@import url("common.css");
/*h2				{ font-style:italic;}*/
.bannerWraper	{ }
.banner-cont	{ padding:30px 0 30px 0; }
.bannerWraper h1{ font-size:4.5em; color:#333c3f; }
#testimonial						{ border-top:4px solid #d8d6d6;}
#testimonial article				{ width:70%; margin:20px auto 50px auto; text-align:center; border-bottom:1px solid #b4b4b6; padding-bottom:30px;}
#testimonial article:last-child		{ margin-bottom:0; border-bottom:0;}
#testimonial article h3				{ font-size:2em;}
#testimonial article p				{ margin:10px 0; font-size:1.3em; line-height:1.6em; color:#323236; text-align:center;}
#testimonial article p + p			{ color:#000; line-height:1.2em; font-weight:700;}
#testimonial article p + p span		{ display:block;}
.testimonial .clientTestimonials section	{ width:27%; margin:40px 3%;}
.testimonial .clientTestimonials section div	{ border:7px solid #bdbcbc; padding:20px 15px; position:relative; background-color:#fff;box-shadow: 10px 10px 5px #888888;}
#testimonial article img	{ margin:0 0 20px 0;border-radius:115px;box-shadow: 10px 10px 5px #888888; width:230px; height:230px;}

.bannerWraper h1 a	{ display: block;
    float: right;
    font-size: 0.4em;
    padding: 12px 18px 12px 18px;
    border: 0px solid #017c8e;
    text-decoration: none;
    background-color: #fc3176;
    color: #fff;
    border-radius: 4px;
    margin-top: 13px;
    font-weight: normal;}
.bannerWraper h1 a:hover {     background-color: #007bd5; }

.portfolioMain			{ padding:40px 0;border-top:4px solid #d8d6d6;}
/*.portfolioMain section	{ width:22%; margin:3% 1.5%; background-color:#f39233;box-shadow: 10px 10px 5px #888888; float:left; border-radius:10px !important;}
.portfolioMain section h4 a	{ padding:140px 20px 40px 20px; display:block; background:url(../images/web-design-icon.png) no-repeat 50% 30px; font-size:2em; font-weight:700; color:#fff; text-decoration:none; text-align:center; line-height:1.4em; text-transform:uppercase; border-radius:10px !important;}
.portfolioMain section h4 a span	{ display:block; font-size:1.7em;}
.portfolioMain section h4 a:hover	{ background-color:#e77505;}

.portfolioMain section + section h4 a	{ background-color:#abdd4b;}
.portfolioMain section + section h4 a:hover	{ background-color:#86c50c;}

.portfolioMain section + section + section h4 a	{ background-color:#ead229;}
.portfolioMain section + section + section h4 a:hover	{ background-color:#d7bc00;}

.portfolioMain section + section + section + section h4 a	{ background-color:#3abbba;}
.portfolioMain section + section + section + section h4 a:hover	{ background-color:#039493;}

.portfolioMain section + section + section + section + section h4 a	{ background-color:#eb6a8a;}
.portfolioMain section + section + section + section + section h4 a:hover	{ background-color:#c93a5d;}

.portfolioMain section + section + section + section + section + section h4 a	{ background-color:#769995;}
.portfolioMain section + section + section + section + section + section h4 a:hover	{ background-color:#4d726e;}

.portfolioMain section + section + section + section + section + section + section h4 a	{ background-color:#9b6393;}
.portfolioMain section + section + section + section + section + section + section h4 a:hover	{ background-color:#843879;}

.portfolioMain section + section + section + section + section + section + section + section h4 a	{ background-color:#133d7b;}
.portfolioMain section + section + section + section + section + section + section + section h4 a:hover	{ background-color:#0a2b5d;}*/

#portfolio ul, #mobileportfolio ul {
    overflow: hidden;
    transition: none;
}
#portfolio ul li{ float: left; width: 49%; position: relative; overflow: hidden; margin-right: 1.5%; margin-bottom: 1.5%; transition: none;}
#mobileportfolio ul li{ float: left; width: 32%; position: relative; overflow: hidden; margin-right: 1.5%; margin-bottom: 1.5%; transition: none;}
#portfolio ul li:nth-child(2n) { margin-right:0px; }
#mobileportfolio ul li:nth-child(3n) { margin-right:0px; }	
#portfolio ul li img, #mobileportfolio ul li img{width: 100%; transform: translate3d(0px, 0px, 0px); transition: none !important;}
#portfolio ul li a, #mobileportfolio ul li a{margin: 0; padding: 0; border: none; display: block;}
#portfolio ul li .info, #mobileportfolio ul li .info{    box-sizing: border-box;
    position: absolute;
    top: 0;
    right: -322px;
    max-width: 272px;
    height: 99%;
    padding: 17% 25px 0px;
    background-color: rgba(51,51,51,0.89);
    text-align: left;
    font-size: 12px;
    line-height: 17px;
    font-weight: 400;
    color: #fff !important;
    transform: translate3d(0px, 0, 0px);}
#portfolio ul li .info h4, #mobileportfolio ul li .info h4{font-size:22px; line-height:24px; font-weight:700; color:#fff !important; text-transform: uppercase; margin:0 0 10px;}
#portfolio ul li .info p, #mobileportfolio ul li .info p{font-size:15px; line-height:18px; color: #de3f00; font-weight: 700; padding: 10px 0 20px; margin: 0;}
#portfolio  ul li .info a, #mobileportfolio  ul li .info a{font-size:13px; line-height:18px; color: #fff; text-transform: uppercase; font-weight: 700; border:#fff 1px solid; border-radius: 20px; display: inline-block; padding: 10px 23px; text-decoration: none;}
#portfolio ul li .info a:hover, #mobileportfolio ul li .info a:hover{background-color: #fff; color: #333;}
#portfolio ul li:hover .info, #mobileportfolio ul li:hover .info{transform: translate3d(-322px, 0, 0px);}


.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



@media screen and (max-width: 979px) {
.banner-cont{text-align: center;}
.bannerWraper h1 span{display: block;} 
.bannerWraper h1 a{display: inline-block; float: none; margin-top: 0 !important;}
#portfolio ul li .info,
#mobileportfolio ul li .info{padding: 15px 15px 0px;}
#portfolio ul li .info h4,
#mobileportfolio ul li .info h4{font-size: 17px; line-height: 20px;}
}

@media screen and (max-width: 570px) {
#portfolio ul li,
#mobileportfolio ul li{width: 100%;}
}

@media screen and (max-width: 450px) {
.bannerWraper h1{font-size: 3.5em;}
}