/*Mouse over effects for Portfolio Thumbs*/



/*COMMON*/



.view {

   width: 33.3%;

   margin:0px;

   float: left;

   border: none;

   overflow: hidden;

   position: relative;

   text-align: center;

   cursor: default;

}

.view .mask,.view .content {

   width: 33.3%;

   position: absolute;

   overflow: hidden;

   top: 0;

   left: 0;

}

.view img {

   display: block;

   position: relative;

}

.view h2 {

  font-weight: normal;

  letter-spacing: 1px;

   text-transform: uppercase;

   color: #fff;

   text-align: center;

   position: relative;

   font-size: 16px;

   line-height: 23px;

font-family:"MontserratRegular";

   padding: 0;

   margin: 0;

   margin-top: 50px;

}

.view h6 {

   margin: 0;

   margin-top: 20px;

}

.view h6 > span{

  font-weight: normal;

   color: #000;

   border:solid 1px #000;

   text-align: center;

   position: relative;

   font-size: 12px;

   line-height: 12px;

font-family:"OpenSansRegular";

   padding: 5px 10px;

}

.view a.info {

   display: inline-block;

}

.view a.info: hover {

}







/* NINTH EXAMPLE*/

.view-ninth .mask-1, .view-ninth .mask-2 {

    height: 200%;

    width: 200%;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    filter: alpha(opacity=100);

    opacity: 1;

    -webkit-transition: all 0.3s ease-in-out 0.6s;

    -moz-transition: all 0.3s ease-in-out 0.6s;

    -o-transition: all 0.3s ease-in-out 0.6s;

    transition: all 0.3s ease-in-out 0.6s;

}

.view-ninth .mask-1 {

    left: auto;

    right: 0;

    -webkit-transform: rotate(56.5deg) translateX(-180px);

    -moz-transform: rotate(56.5deg) translateX(-180px);

    -o-transform: rotate(56.5deg) translateX(-180px);

    -ms-transform: rotate(56.5deg) translateX(-180px);

    transform: rotate(56.5deg) translateX(-180px);

    -webkit-transform-origin: 100% 0%;

    -moz-transform-origin: 100% 0%;

    -o-transform-origin: 100% 0%;

    -ms-transform-origin: 100% 0%;

    transform-origin: 100% 0%;

}

.view-ninth .mask-2 {

    top: auto;

    bottom: 0;

    -webkit-transform: rotate(56.5deg) translateX(180px);

    -moz-transform: rotate(56.5deg) translateX(180px);

    -o-transform: rotate(56.5deg) translateX(180px);

    -ms-transform: rotate(56.5deg) translateX(180px);

    transform: rotate(56.5deg) translateX(180px);

    -webkit-transform-origin: 0% 100%;

    -moz-transform-origin: 0% 100%;

    -o-transform-origin: 0% 100%;

    -ms-transform-origin: 0% 100%;

    transform-origin: 0% 100%;

}

.view-ninth .content {

/*    background: rgba(0, 0, 0, 0.9);*/

    height: 0;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

    filter: alpha(opacity=50);

    opacity: 0.5;

    width: 100%;

    overflow: hidden;

    -webkit-transform: rotate(-33.5deg) translate(-112px, 166px);

    -moz-transform: rotate(-33.5deg) translate(-112px, 166px);

    -o-transform: rotate(-33.5deg) translate(-112px, 166px);

    -ms-transform: rotate(-33.5deg) translate(-112px, 166px);

    transform: rotate(-33.5deg) translate(-112px, 166px);

    -webkit-transform-origin: 0% 100%;

    -moz-transform-origin: 0% 100%;

    -o-transform-origin: 0% 100%;

    -ms-transform-origin: 0% 100%;

    transform-origin: 0% 100%;

    -webkit-transition: all 0.4s ease-in-out 0.3s;

    -moz-transition: all 0.4s ease-in-out 0.3s;

    -o-transition: all 0.4s ease-in-out 0.3s;

    transition: all 0.4s ease-in-out 0.3s;

}

.view-ninth h2 {

    background: transparent;

    margin-top: 10px;

}

.view-ninth a.info {

}

.view-ninth:hover .content {

  padding: 70px 10px;

  text-align: center;

    height: 100%;

    width: 100%;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";

    filter: alpha(opacity=90);

    opacity:1;

    margin: 0;

    -webkit-transform: rotate(0deg) translate(0, 0);

    -moz-transform: rotate(0deg) translate(0, 0);

    -o-transform: rotate(0deg) translate(0, 0);

    -ms-transform: rotate(0deg) translate(0, 0);

    transform: rotate(0deg) translate(0, 0);

}

.view-ninth:hover .mask-1, .view-ninth:hover .mask-2 {

    -webkit-transition-delay: 0s;

    -moz-transition-delay: 0s;

    -o-transition-delay: 0s;

    transition-delay: 0s;

}

.view-ninth:hover .mask-1 {

    -webkit-transform: rotate(56.5deg) translateX(1px);

    -moz-transform: rotate(56.5deg) translateX(1px);

    -o-transform: rotate(56.5deg) translateX(1px);

    -ms-transform: rotate(56.5deg) translateX(1px);

    transform: rotate(56.5deg) translateX(1px);

}

.view-ninth:hover .mask-2 {

    -webkit-transform: rotate(56.5deg) translateX(-1px);

    -moz-transform: rotate(56.5deg) translateX(-1px);

    -o-transform: rotate(56.5deg) translateX(-1px);

    -ms-transform: rotate(56.5deg) translateX(-1px);

    transform: rotate(56.5deg) translateX(-1px);

}