body {max-width: 100%; font-family: Roboto; font-weight: 400; font-size: 16px; color: #4e4e4e;}

a {text-decoration: none}
em {font-style: italic;}
strong {font-weight: bold}

header {text-transform: uppercase; background-color: #282828; height: 56px; border-bottom: 2px solid #E16E7B; padding-top: 30px}
.headerWrapper {max-width: 1180px; margin: 0 auto; overflow: hidden}
header li {display: inline-block;font-size: 14px; padding-right: 20px}
header li a {display: block; padding: 7px 5px 32px 5px; color: #c5c5c5}
.logo {float: left; padding-right: 150px}
header li a:hover {border-bottom: 3px solid #E16E7B; color:#E16E7B}
header nav {float: left;}
.social {float: right;}
.social a {border: 1px solid #AAAAAA; border-radius: 50%; color: #CCCCCC; display: inline-block;
font-size: 17px; height: 30px; line-height: 30px; margin: 0 4px; text-align: center; width: 30px;}
.social a:hover {background-color: #e16e7b; color: #fff!important;}
header.active {border-bottom: 3px solid #E16E7B; color:#E16E7B}

.contentSlider{max-width: 2000px; overflow: hidden; border-top: 3px solid #282828; background-color:#61d5dd}
.contentSlider img {opacity: 0.8; display: block;}
.slider {position: relative}
.captionSlider {text-align: center; position: absolute; top: 30%;left: 10%; width: 80%; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); color: #FFF}
.captionSlider h2{text-transform: uppercase; padding-bottom: 20px; font-weight: 700; font-size: 68px;}
.captionSlider p {font-size: 18px}

.nav-slide {position: absolute; z-index: 200; right: 50px; bottom: 100px}
.nav-slide a {cursor: pointer; display: block;height: 10px; width: 10px; border-radius: 50%; border: 1px solid #fff}
.nav-slide li {display: inline-block; margin-right: 10px;}
.active2 { background-color: #FFF;}

.feature {position: relative; background-color: #EFEDEE;}
.feature li {display: inline-block;}
.whiteNoise {position: absolute; top:-70px; width: 1180px; left: 50%; margin-left:-590px; text-align: center; background-color: #FFF}
.whiteNoise a {color: #FFF;display: block; padding:20px; border-radius: 3px; margin: 40px 15px 40px 15px }
.portfolio a{background-color: #3fcc9d}
.quote a{background-color: #f39c12}

.featureContent {text-align: center; width: 1180px; margin: 0 auto; padding-bottom: 100px}
.featureContent h2 {padding-bottom: 20px;padding-top: 150px; font-weight: bold; font-size: 38px; color: #282828; border-bottom: 1px solid rgba(0, 0, 0, 0.15);}
.featureContent h3 {padding-bottom: 50px;padding-top: 20px; font-weight: bold; font-size: 19px;}

.colonnes {margin-right: 2%; display: inline-block;box-sizing:border-box; padding: 20px; background-color: #FFF; width: 32%;}
.last {margin-right: 0}
.colonnes .fa {font-size: 3.5em; margin: 25px 0;}
.colonnes h4 {font-size: 22px; font-weight: bold; color: #282828; margin-bottom: 12px;}
.colonnes p {font-size: 16px; margin-bottom: 20px; line-height: 1.4em}

.counters {background: url(../img/parallax-1.jpg) no-repeat fixed;}
.counterContent {text-align: center; width: 1180px; margin: 0 auto; padding-bottom: 100px}
.counters h2 {padding-bottom: 20px;padding-top: 100px; font-weight: bold; font-size: 38px; color: #FFF; border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
.counters h3 {color: #FFF; opacity: 0.8; padding-bottom: 50px;padding-top: 20px; font-weight: bold; font-size: 19px;}
#clients {font-size: 52px; line-height: 1.5em; font-weight: bold; color: #FFF; opacity: 0.8;}
#projects {font-size: 52px; line-height: 1.5em; font-weight: bold; color: #FFF; opacity: 0.8;}
#queries {font-size: 52px; line-height: 1.5em; font-weight: bold; color: #FFF; opacity: 0.8;}
#stuff {font-size: 52px; line-height: 1.5em; font-weight: bold; color: #FFF; opacity: 0.8;}
#members {font-size: 52px; line-height: 1.5em; font-weight: bold; color: #FFF; opacity: 0.8;}

.caption {font-size: 14px; font-weight: bold; color: #FFF; opacity: 0.8;}
.clock {width: 19%; display: inline-block;}

.teamContent {text-align: center; width: 1180px; margin: 0 auto; padding-bottom: 50px}
.teamContent h2 {padding-bottom: 20px;padding-top: 150px; font-weight: bold; font-size: 38px; color: #282828; border-bottom: 1px solid rgba(0, 0, 0, 0.15);}
.teamContent h3 {padding-bottom: 50px;padding-top: 20px; font-weight: bold; font-size: 19px;}

.equipe {text-align: center; width: 1180px; margin: 0 auto; font-size: 0; padding-bottom: 50px}

.equipeMembre {width: 24%; background-color: #FFF; display: inline-block; margin-right: 1.33%}
.equipeMembre:last-child {margin-right: 0}
.equipeMembre:hover .fun{top:-125px;}

.fun {position: absolute; top:0;transition:all .3s ease-in-out}

.equipeMembreCV {height: 315px; overflow: hidden; position: relative;}
.equipeMembreCV h4 {font-weight: bold; font-size: 22px; padding: 10px 0px; }
.equipeMembreCV h5 {font-size: 16px; padding: 0px 0px 15px 0px;}
.equipeMembreCV p {font-size: 16px; padding: 0px 20px 15px 20px;}

.equipeSocial {height: 66px; border-top: 1px solid #e8e8e8;}
.equipeSocial a {border: 1px solid #AAAAAA; border-radius: 50%; color: #CCCCCC; display: inline-block;font-size: 17px; height: 30px; line-height: 30px; margin: 18px 6px; text-align: center; width: 30px;}
.equipeSocial a:hover {background-color: #e16e7b; color: #fff!important;}


/*
.team {width: 1180px; margin: 0 auto; font-size: 0; padding-bottom: 50px}
.people {width: 24%; background-color: #FFF; text-align: center; display: inline-block; margin-right: 1%}
.peopleCV {margin:20px;}
.peopleCV h3 {font-size: 22px; color: #282828;}
.peopleCV h4 {font-size: 16px; color: #000; padding: 5px 0 5px 0 }
.peopleCV p {font-size: 14px;line-height: 1.5em}
.peopleSocial {height: 66px; border-top: 1px solid #e8e8e8;}
.peopleSocial a {border: 1px solid #AAAAAA; border-radius: 50%; color: #CCCCCC; display: inline-block;
font-size: 17px; height: 30px; line-height: 30px; margin: 18px 6px; text-align: center; width: 30px;}
.peopleSocial a:hover {background-color: #e16e7b; color: #fff!important;}*/

.white {background-color: #FFF}

.serviveContent {text-align: center; width: 1180px; margin: 0 auto; padding-bottom: 50px}
.serviveContent h2 {padding-bottom: 20px;padding-top: 50px; font-weight: bold; font-size: 38px; color: #282828; border-bottom: 1px solid rgba(0, 0, 0, 0.15);}
.serviveContent h3 {padding-bottom: 50px;padding-top: 20px; font-weight: bold; font-size: 19px;}

.ouPas .fa {border-radius: 50%; height: 70px; line-height: 70px; margin: 0 auto; display: block;
width: 70px; font-size: 2.5em; color: white}
.arrow {top: -8px; border-left: 15px solid rgba(0, 0, 0, 0); border-right: 15px solid rgba(0, 0, 0, 0);
border-top: 15px solid; display: inline-block; position: relative;}

.clickMe {text-align: center}
.clickMe a {border: 1px solid #AAAAAA; border-radius: 50%; color: #CCCCCC; display: inline-block;
font-size: 17px; height: 50px; line-height: 50px; margin: 18px 6px; text-align: center; width: 50px;}
.clickMe a:hover {background-color: #e16e7b; color: #fff!important;}

.tweets {background-image: url(../img/twitter_bg.jpg);}
.tweetsContent {font-size:18px;color: #FFF; width: 1180px; margin:0 auto; padding-top: 50px; padding-bottom: 50px}
.tweetsContent a{color: #e16e7b; background-color: #FFFFFF; border-radius: 4px; display: inline-block; font-size: 18px;
margin-top: 30px; padding: 15px 20px; text-transform: none; }

.porfolioContent {text-align: center; width: 1180px; margin: 0 auto; padding-bottom: 50px}
.porfolioContent h2 {padding-bottom: 20px;padding-top: 50px; font-weight: bold; font-size: 38px; color: #282828; border-bottom: 1px solid rgba(0, 0, 0, 0.15);}
.porfolioContent h3 {padding-bottom: 50px;padding-top: 20px; font-weight: bold; font-size: 19px;}
.portfolioMenu li a{display: inline-block; margin-right: 5px; color: #4E4E4E;}
.portfolioMenu {text-transform: uppercase; padding-bottom: 20px}

.greyBox {width: 100%; height: 350px; background-color: #EFEDED; position: relative;}
.greyBox img {float: left; padding: 20px 20px 0 20px }
.greyBox .blabla {text-align: left; padding:20px; line-height: 1.5em}
.greyBox .blabla h4 {font-weight: bold; font-size: 28px; color: #282828; padding-bottom: 20px}
.greyBox .blabla .fa {cursor: pointer; position: absolute; top: 0; right: 20px; border: 1px solid #888; border-radius: 50%; color: #888; display: inline-block;
font-size: 17px; height: 30px; line-height: 30px; margin: 18px 6px; text-align: center; width: 30px;}

.gallerie {text-align: center; width: 1180px; margin: 0 auto; font-size: 0}
.gallerieImage {display: inline-block; width: 380px; height: 380px; position: relative; margin-right: 20px; margin-bottom: 20px}
.gallerieImage:nth-child(3n) {margin-right: 0}
.gallerieImage img {font-size: 0;}
.gallerieImageOverlay {color: #FFF; width: 380px; height: 380px; background-color: #e16e7b; position: absolute; top:0;
opacity:0;}
.gallerieImageOverlay:hover {opacity: 1; transition: all 0.25s linear;}
.gallerieImageOverlay h4 {color: #fff; width: 60%; margin-left: 20%; font-size: 20px; padding-top: 50px; padding-bottom: 20px; line-height: 1.4em}
.gallerieImageOverlay p {color: #fff; font-size: 16px;width: 60%; margin-left: 20%; line-height: 1.4em; padding-bottom: 50px;}
.button {color: #e16e7b; background-color: #FFFFFF; margin-top: 15px; padding: 12px 20px; border-radius: 3px; font-size: 20px}

.pricing {background-image: url(../img/hbg7.png); font-size: 0;}
.pricing h2 {padding-bottom: 20px;padding-top: 100px; font-weight: bold; font-size: 38px; color: #FFF; border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
.pricing h3 {color: #FFF; opacity: 0.8; padding-bottom: 50px;padding-top: 20px; font-weight: bold; font-size: 19px;}
.pricingItem {width: 280px; background-color: #FFF; display: inline-block; margin-right: 20px}
.pricingItem:last-child {margin-right: 0}
.pricingItem h4 {line-height: 28px; font-size: 24px; padding: 15px 0; text-transform: uppercase;
background-color: #e16e7b; color: #fff!important;}
.price {background-color: #EFEDED; color: #282828; padding: 25px 0 15px; font-size: 64px; font-weight: bold}
.period {background-color: #EFEDED;color: #969696; font-size: 14px; padding-bottom: 10px}
.pricingItem li {font-size: 18px; line-height: 36px}
.sign {border-top: 1px solid #E8E8E8; margin-top: 15px; padding: 30px 0;}
.sign a {font-size: 18px; background-color: #282828; border-radius: 2px; color: #FFFFFF; display: inline-block; padding: 10px 40px;}
.more h4 {padding: 25px 0;}
.more .price {color: #e16e7b}
.more .sign a {background-color: #e16e7b}
.more .sign {padding: 30px 0 40px 0;}

.testimonialsItem {display: inline-block; width: 570px}
.testimonialsItem img {border: 7px solid #FFFFFF; border-radius: 50%;}
.testimonialsItem p {line-height: 1.5em}
.arrow2 {top:-5px; border-left: 15px solid rgba(0, 0, 0, 0); border-right: 15px solid rgba(0, 0, 0, 0);
border-top: 15px solid; display: inline-block; position: relative;}
.testimonialsContent {}

.white {background-color: #FFF; border-top: 1px solid rgba(0, 0, 0, 0.1);border-bottom: 1px solid rgba(0, 0, 0, 0.1);}

.clientsContent li {width: 20%}
.clientsContent ul {margin: 0 auto; font-size: 0}

.blogItem {width: 538px; background-color: #FFF; padding: 20px; text-align: left; display: inline-block; margin-right: 20px; margin-bottom: 20px}
.blogItem:nth-child(2n) {margin-right: 0}
.blogItem h2 {font-size: 28px; padding-top: 20px; border-bottom: none;}
.blogItem h2 a {color:#282828; transition: all 0.25s linear;}
.blogItem h2 a:hover {color:#e16e7b}
.blogItem p {padding: 10px 0 20px 0; line-height: 1.5em}
.post {display: block; color: #888888; clear: both; border-bottom: 1px solid #E8E8E8; padding-bottom: 10px;}
.post a:hover {color:#e16e7b}
.post a {color: #888888; transition: all 0.25s linear}
.readMore a{color:#e16e7b}
.readMore{text-align: right}

.blogNav {padding-top: 20px}

.blogNav a {border: 1px solid #888; border-radius: 50%; color: #888; display: inline-block;
font-size: 17px; height: 50px; line-height: 50px; margin: 18px 6px; text-align: center; width: 50px;}
.blogNav .active, .blogNav a:hover {border: 1px solid #e16e7b; background-color: #e16e7b; color: #FFF}


.info {width: 45%; text-align: left; line-height: 2em; display:inline-block;}
.info .equipeSocial {border-top: none;}
.info h6 {font-weight: bold; font-size: 16px; color: #222;}
.fa-map-marker, .fa-phone, .fa-envelope {padding-right: 15px; color: #222; font-size: 20px;}

.questionnaire {width: 45%; display: inline-block; vertical-align: top}
.questionnaire input, .questionnaire textarea {display: block; width: 100%; box-sizing:border-box; margin-bottom: 20px; padding-left: 10px}
.questionnaire input {height: 50px}
.questionnaire textarea {height: 200px}
#valide {border-radius: 5px; background-color: #e16e7b; color: #fff!important; border: medium none; float: right; padding: 10px 50px; text-indent: 0; text-transform: capitalize;
width: auto;}

.map {width: 100%; height: 500px; position: relative; overflow: hidden; transform: translateZ(0px);
background-color: rgb(229, 227, 223);}

footer {text-transform: uppercase; background-color: #282828; height: 50px; border-top: 2px solid #E16E7B;
padding-top: 30px; font-size: 14px}
footer a {color: #e16e7b;}
.footerContent {width: 1180px; margin: 0 auto}
.copyright {width: 55%; float: left; padding-top: 10px}
#backToTop {width: 8%; float: left}
.footerNav {width: 35%; float: left; text-align: right; padding-top: 10px}
.footerNav a {display: block;padding-left: 20px}
footer .fa {border: 1px solid #4e4e4e; border-radius: 50%; color: #4e4e4e; display: inline-block;
font-size: 17px; height: 30px; line-height: 30px; text-align: center; width: 30px;}