.view {
   width: 100%;
   height: 100%;
   float: left;
   overflow: hidden;
   position: relative;
}
.view .mask,.view .content {
   width: 96%;
   height: 93%;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 2%;
   padding:15px;
   margin-top:2%;
}
.view img {
   display: block;
   position: relative;
   width:100%;
   height:100%;
}
.view .mask::before, .view .content::before{
	left:15px;
	right:15px;
	top:15px;
	bottom:15px;
	border:2px solid #ffffff!important;
	position:absolute;
	content:'';
	border-radius:2px;
}
.view h2 {
   color: #fff !important;
   text-align: center;
   position: relative;
   font-size: 21px;
   padding: 10px;
   margin: 3% 0 0 0;
   font-family: '29LT Bukra SmBd';
}
.view p {
   font-size: 15px;
   position: relative;
   color: #fff!important;
   text-align: center;
   margin-bottom:25px;
   font-family: '29LT Bukra Lt';
   padding:0 15px;
}
.view a.info{
   color: #fff!important;
   text-decoration:underline!important;
   font-family: '29LT Bukra SmBd';
}
.mask1 h2 {
	color: #fff;
    text-align: center;
    position: relative;
    font-size: 21px;
    padding: 10px;
    margin: 50% 0 0 0;
    font-family: '29LT Bukra SmBd';
}
.mask1 p {
   font-size: 15px;
   position: relative;
   color: #fff!important;
   text-align: center;
   margin-bottom:25px;
   font-family: '29LT Bukra Lt';
   padding:0 15px;
}
.mask1 a.info{
   color: #fff!important;
   text-decoration:underline!important;
   font-family: '29LT Bukra SmBd';
   cursor: pointer;
   position: relative;
   z-index: 99;
}
.mask h2 {
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 21px;
   padding: 10px;
   margin: 18% 0 0 0;
   font-family: '29LT Bukra SmBd';
}
.mask p {
   font-size: 15px;
   position: relative;
   color: #fff!important;
   text-align: center;
   margin-bottom:25px;
   font-family: '29LT Bukra Lt';
   padding:0 15px;
}
.mask a.info{
   color: #fff!important;
   text-decoration:underline!important;
   font-family: '29LT Bukra SmBd';
   cursor: pointer;
   position: relative;
   z-index: 99;
}
.overhead {
	position: absolute;
    bottom: 0;
    padding: 10px 15px;
    font-size: 20px;
    color: #fff;
}
.overhead cite {
	position:relative;
	z-index:1;
	font-family: '29LT Bukra SmBd';
}
.overhead::before {
	content:'';
	position:absolute;
	background:#04c3de;
	opacity:0.7;
	left:0;
	right:0;
	top:0;
	bottom:0;
	width:100%;
	height:100%;
}
.view-eighth .mask {
background-image: -webkit-linear-gradient(rgba(5, 195, 222, .9), rgba(117, 120, 129, .9));
background-image: -webkit-linear-gradient(center top, rgba(5, 195, 222, .9), rgba(117, 120, 129, .9));
background-image: -moz-linear-gradient(center top, rgba(5, 195, 222, .9), rgba(117, 120, 129, .9));
background-image: -ms-linear-gradient(center top, rgba(5, 195, 222, .9), rgba(117, 120, 129,, .9));
background-image: -o-linear-gradient(center top, rgba(5, 195, 222, .9), rgba(117, 120, 129, .9));
background-image: linear-gradient(center top, rgba(5, 195, 222, .9), rgba(117, 120, 129, .9));
filter: progid: DXImageTransform.Microsoft.gradient(startColorStr='rgba(12, 109, 176, 0.7)', endColorStr='rgba(27, 181, 128, 0.7)', gradientType='1');
   top: 0;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.3s ease-out 0.5s;
   -moz-transition: all 0.3s ease-out 0.5s;
   -o-transition: all 0.3s ease-out 0.5s;
   -ms-transition: all 0.3s ease-out 0.5s;
   transition: all 0.3s ease-out 0.5s;
}
.view-eighth .mask1 {
   background-color: rgba(43, 128, 187, 0.7);
   top: 0;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.3s ease-out 0.5s;
   -moz-transition: all 0.3s ease-out 0.5s;
   -o-transition: all 0.3s ease-out 0.5s;
   -ms-transition: all 0.3s ease-out 0.5s;
   transition: all 0.3s ease-out 0.5s;
}
.view-eighth h2 {
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out 0.1s;
   -moz-transition: all 0.2s ease-in-out 0.1s;
   -o-transition: all 0.2s ease-in-out 0.1s;
   -ms-transition: all 0.2s ease-in-out 0.1s;
   transition: all 0.2s ease-in-out 0.1s;
}
.view-eighth p {
   color: #333;
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out 0.2s;
   -moz-transition: all 0.2s ease-in-out 0.2s;
   -o-transition: all 0.2s ease-in-out 0.2s;
   -ms-transition: all 0.2s ease-in-out 0.2s;
   transition: all 0.2s ease-in-out 0.2s;
}
.view-eighth a.info {
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out 0.3s;
   -moz-transition: all 0.2s ease-in-out 0.3s;
   -o-transition: all 0.2s ease-in-out 0.3s;
   -ms-transition: all 0.2s ease-in-out 0.3s;
   transition: all 0.2s ease-in-out 0.3s;
}
.view-eighth:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   top: 0px;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
   -webkit-animation: bounceY 0.9s linear;
   -moz-animation: bounceY 0.9s linear;
   -ms-animation: bounceY 0.9s linear;
   animation: bounceY 0.9s linear;
}
.view-eighth:hover h2 {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.4s;
   -moz-transition-delay: 0.4s;
   -o-transition-delay: 0.4s;
   -ms-transition-delay: 0.4s;
   transition-delay: 0.4s;
}
.view-eighth:hover p {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
.view-eighth:hover a.info {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}
.view-eighth .mask1 {
	background-image: -webkit-linear-gradient(rgba(5, 195, 222, .9), rgba(117, 120, 129, .9));
	background-image: -webkit-linear-gradient(center top, rgba(5, 195, 222, .9), rgba(117, 120, 129, .9));
	background-image: -moz-linear-gradient(center top, rgba(5, 195, 222, .9), rgba(117, 120, 129, .9));
	background-image: -ms-linear-gradient(center top, rgba(5, 195, 222, .9), rgba(117, 120, 129,, .9));
	background-image: -o-linear-gradient(center top, rgba(5, 195, 222, .9), rgba(117, 120, 129, .9));
	background-image: linear-gradient(center top, rgba(5, 195, 222, .9), rgba(117, 120, 129, .9));
	filter: progid: DXImageTransform.Microsoft.gradient(startColorStr='rgba(12, 109, 176, 0.7)', endColorStr='rgba(27, 181, 128, 0.7)', gradientType='1');
	   top: 0;
	   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	   filter: alpha(opacity=0);
	   opacity: 0;
	   -webkit-transition: all 0.3s ease-out 0.5s;
	   -moz-transition: all 0.3s ease-out 0.5s;
	   -o-transition: all 0.3s ease-out 0.5s;
	   -ms-transition: all 0.3s ease-out 0.5s;
	   transition: all 0.3s ease-out 0.5s;
}
.view-eighth:hover .mask1 {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    top: 0px;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-animation: bounceY 0.9s linear;
    -moz-animation: bounceY 0.9s linear;
    -ms-animation: bounceY 0.9s linear;
    animation: bounceY 0.9s linear;
}
.view .mask1::before, .view .content::before {
    left: 15px;
    right: 15px;
    top: 15px;
    bottom: 15px;
    border: 2px solid #ffffff !important;
    position: absolute;
    content: '';
    border-radius: 2px;
}
.view .mask1, .view .content {
    width: 96%;
    height: 96%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 2%;
    padding: 15px;
    margin-top: 2%;
}
@keyframes bounceY {
    0% { transform: translateY(-205px);}
    40% { transform: translateY(-100px);}
    65% { transform: translateY(-52px);}
    82% { transform: translateY(-25px);}
    92% { transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}
@-moz-keyframes bounceY {
    0% { -moz-transform: translateY(-205px);}
    40% { -moz-transform: translateY(-100px);}
    65% { -moz-transform: translateY(-52px);}
    82% { -moz-transform: translateY(-25px);}
    92% { -moz-transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);}
}
@-webkit-keyframes bounceY {
    0% { -webkit-transform: translateY(-205px);}
    40% { -webkit-transform: translateY(-100px);}
    65% { -webkit-transform: translateY(-52px);}
    82% { -webkit-transform: translateY(-25px);}
    92% { -webkit-transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);}
}
@media only screen and (min-width: 1101px) and (max-width: 1199px) 
{
.view .mask,.view .content {
   padding:0px;

}
.view h2 {
   margin: 20px 0 0 0;
}
}
@media only screen and (min-width: 992px) and (max-width: 1099px) 
{
.view .mask,.view .content {
   padding:0px;

}
.view h2 {
   margin: 0px 0 0 0;
}
}
@media only screen and (min-width: 600px) and (max-width: 699px) 
{
.view .mask,.view .content {
   padding:0px;

}
.view h2 {
   margin: 20px 0 0 0;
}
}
@media(max-width:599px){
.view .mask,.view .content {
   padding:0px;

}
.view h2 {
   margin: 0px 0 0 0;
}
}