#header {
  background-color: rgba(0, 0, 0, 0);
}
/* ------------------------------------------------------------------------------
	 Banner
-------------------------------------------------------------------------------*/

.banner {
	background-position: center top;
	background-repeat: no-repeat;
	-moz-background-size: cover;
	-o-background-size: cover;
	-webkit-background-size: cover;
	background-size: cover;
	min-height: 750px;
  	height:100vh;
}
.banner-btn {
	opacity: 0.5;
}
.banner-text {
	padding-top: 33%;
}
.banner-text h1 {
	color: #fff;
	font-family: "Source Sans Pro";
	font-size: 53px;
	letter-spacing: 20px;
	font-weight: 700;
	text-transform: uppercase;
}
.banner-text p {
	color: #8d8d8d;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 3px;
	line-height: 24px;
	margin-top: 10px;
	margin-bottom: 80px;
	text-transform: uppercase;
}
/* ------------------------------------------------------------------------------
	 Intro
-------------------------------------------------------------------------------*/
.intro {
	position: relative;
}
.intro blockquote {
	border: 0;
	margin: 0;
	padding: 100px 15% 0;
}
.intro h1 {
	color: #000;
	font: 27px "Source Sans Pro";
}
.intro p {
	color: #6c7279;
	display: block;
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	margin-top: 30px;
}

/* Introduction */
.introduction{ width:100%;/* padding-bottom:0;*/}
.introduction img{width:100%; margin-top:50px;}
.introduction p{text-align:justify;}
@media screen and (max-width: 991px){
  .introduction p{text-align:center;}
}


/* Quote */
.quote{ width:100%;}
.quote .space{ padding:0 60px;}
.quote .container{ position:relative; z-index:2;}
.quote .container img{ margin-bottom:60px;}
.quote .container h2{ color:#fff; line-height:44px; margin-bottom:60px; font-size:36px;}
.quote .container span{ font-family: 'Vollkorn', serif; color:#fff; font-size:17px; margin-top:30px; border-top:1px solid #fff; padding-top:30px;}
.quote .container .colored{ color:#ef3c3c;}


/* Features with Icons */
.icon-features{ width:100%;}
.icon-features .padding{ padding:0 40px;}
.icon-features i{ width:124px; line-height:140px; display:inline-block; margin-top:30px; margin-bottom:20px; background:url(../img/template/icon-bg.png) no-repeat;}
.icon-features h4{ font-weight:700; font-size:20px;}
.icon-features a{ margin-top:10px;}


/* Content with Video Background */
.video-bg{ width:100%; position:relative; overflow:hidden;}
.video-bg video{width:100%; position:absolute; left:0; top:0;}
.video-bg .container{ position:relative; z-index:2;}
.video-bg .space{ padding:0 40px;}
.video-bg figure{ width:100%; float:left; margin-bottom:30px;}
.video-bg figrue img{ display:inline-block;}
.video-bg h2{ color:#fff; line-height:44px; margin-bottom:60px; font-size:36px;}
.video-bg a{ color:#fff; display:inline-block; padding:8px 20px; border:1px solid #fff;}
.video-bg a:hover{ background:#ef3c3c; text-decoration:none; color:#fff; border:1px solid #ef3c3c; }


/* Features with Ipad */
.ipad-features{ width:100%;}
.ipad-features .box{ width:100%; float:left; margin-bottom:60px;}
.ipad-features .box .icon{ width:20%; float:left; text-align:center;}
.ipad-features .box .icon i{ font-size:50px; margin-top:20px;}
.ipad-features .box .content{ width:80%; float:left; border-left:1px solid #eee; padding-left:20px;}
.ipad-features .box .content h3{ margin-top:0;}
.ipad-features .box .content p{ margin-top:15px; margin-bottom:0;}
.ipad-features .box .content p:before{ content:''; width:20px; height:1px; float:left; background:#ef3c3c; margin-top:10px; margin-right:6px;}


/* Client Logos */
.client-logos{ width:100%;}
.client-logos h6{color:#fff; margin-bottom:20px; position:relative; z-index:2;}
.client-logos .box{ width:100%; padding:20px 0; border:1px solid rgba(255,255,255,0.3); position:relative; z-index:2;}
.client-logos .box{ cursor:url(../img/template/drag-cursor.png), move;}
.client-logos .box img{ width:100%;}
.client-logos .box img {-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
.client-logos .item{ width:100%; float:left;}
.client-logos .logos-list{ width:100%; float:left;}

/* ------------------------------------------------------------------------------
  Services
-------------------------------------------------------------------------------*/

#section-four .icon img {
  vertical-align: baseline;
  width: 100%;
}
#section-four h2{
  line-height: 52px;
  white-space: nowrap;
  color: #fff;
  position: relative;
  z-index: 2;
}
#section-four .process-content h2{
  font-weight: 700;
  font-size: 24px;
  height:52px;
  text-transform: uppercase;
}
#section-four .id-graf{
  line-height: normal;
  white-space: normal;
}
/* ------------------------------------------------------------------------------
	Works
-------------------------------------------------------------------------------*/
#works{
  padding-bottom: 50px;
}
.work {
  -moz-box-shadow: 0 0 0 1px #fff;
  -webkit-box-shadow: 0 0 0 1px #fff;
  box-shadow: 0 0 0 1px #fff;
  text-align: center;
  overflow: hidden;
}
.work a:hover{
  cursor: pointer;
}
.work img
{
  width: 100%;
}
.work .overlay {
  background: rgba(0, 0, 0, 0.9);
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  -moz-transition: opacity, 0.3s;
  -o-transition: opacity, 0.3s;
  -webkit-transition: opacity, 0.3s;
  transition: opacity, 0.3s; }
.work .overlay-caption {
  position: absolute;
  text-align: center;
  top: 50%;
  width: 100%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%); }
.work h5, .work p, .work img {
  -moz-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  -webkit-transition: all, 0.5s;
  transition: all, 0.5s; }
.work h5, .work p {
  color: #fff;
  margin: 0;
  opacity: 0; }
.work h5 {
  margin-bottom: 5px;
  -moz-transform: translate3d(0, -200%, 0);
  -ms-transform: translate3d(0, -200%, 0);
  -webkit-transform: translate3d(0, -200%, 0);
  transform: translate3d(0, -200%, 0); }
.work p {
  -moz-transform: translate3d(0, 200%, 0);
  -ms-transform: translate3d(0, 200%, 0);
  -webkit-transform: translate3d(0, 200%, 0);
  transform: translate3d(0, 200%, 0); }

.work-box-dude:hover img {
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2); }
.work-box-dude:hover .overlay {
  opacity: 1; }
  .work-box-dude:hover .overlay h5, .work-box-dude:hover .overlay p {
    opacity: 1;
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }

.btn-projet-tot {
    margin-top: 50px;
    margin-left: calc(50% - 100px);
    width: 200px;
    text-align: center;
}

	/* ------------------------------------------------------------------------------
	Work animation
-------------------------------------------------------------------------------*/
.work:nth-child(1) {
  -moz-animation-delay: 0.1s;
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s; }
.work:nth-child(2) {
  -moz-animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s; }
.work:nth-child(3) {
  -moz-animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s; }
.work:nth-child(4) {
  -moz-animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s; }
.work:nth-child(5) {
  -moz-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s; }
.work:nth-child(6) {
  -moz-animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s; }
.work:nth-child(7) {
  -moz-animation-delay: 0.7s;
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s; }
.work:nth-child(8) {
  -moz-animation-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s; }

.animated {
  visibility: visible; }

/* ------------------------------------------------------------------------------
	 Teams
-------------------------------------------------------------------------------*/
.person {
	text-align: center;
	margin: 0 auto;
}
.person img{
  margin: 0 auto;
}
.person-content {
	margin-top: 20px;
}
.person-content span{
  font-weight: 700;
}
.person h4 {
	font-weight: 400;
}
.person h5 {
	color: #e84545;
	font-size: 13px;
	font-weight: 400;
	margin-bottom: 20px;
}
@media screen and (max-width: 1024px){
  .person {
    max-width: 1000px;
    margin: 0 auto 50px;
  }
}
@media screen and (max-width: 1200px) and (min-width: 992px){
  .person-content {
    height: 310px;
  }
  .p-describ-perso{
    height: 145px;
  }
}

/* Process of Works */
.process{ width:100%;}
.process .process-content{ padding:0 30px; position:relative; z-index:2;}
.process .process-content .icon:hover img{ margin-top:-124px; }
.process .process-content:hover i{ color:#000;}
.process .icon{ width:124px; height: 124px; line-height:170px; display:inline-block; overflow:hidden; text-align:center; }
.process .icon i{font-size:50px; color:#fff; padding-top:40px;}
.process .content{ width:100%;}
.process .content h2{ color:#fff; position:relative; margin-bottom:30px;}
.process .content h2:after{content:''; width:30px; height:1px; position:absolute; left:50%; margin-left:-15px; background:#fff; bottom:-15px;}
.process .content span{ font-size:30px; color:#fff; font-weight:700; margin-bottom:10px; display:inline-block;}
.process .content p{ color:#fff; margin-bottom:0;}


/* Services */
.services-icon{ width:100%; padding-bottom:0 !important;}
.services-icon .space{ margin-bottom:100px;}
.services-icon .icon{ width:30%; float:left;}
.services-icon .icon i{ width:124px; line-height:140px; display:inline-block; margin-bottom:20px; /*background:url(../img/template/icon-bg.png) no-repeat;*/ text-align:center; font-size:50px;}
.services-icon .content{ width:60%; float:left;}
.services-icon .content h4{ font-weight:700; font-size:20px;}
.services-icon .content a{ margin-left:25px;}
.services-icon .content ul{ padding-left:0; margin:20px 0;}
.services-icon .content ul li{ margin:6px 0; list-style:none;}
.services-icon .content ul li:before{ content:''; width:20px; height:1px; float:left; background:#ef3c3c; margin-top:10px; margin-right:6px;}


/* Testimonials */
.testimonials{ width:100%;}
.testimonials h6{ margin-bottom:30px;}
.testimonials .job-title{ width:100%; display:block; margin-bottom:30px;}
.testimonials .job-title:before{ content:''; width:20px; height:1px; float:left; background:#ef3c3c; margin-top:10px; margin-right:3px;}
.testimonials .quote{ width:80px; height:80px; font-size:120px; background:#28282e; display:inline-block; font-family:times new roman; line-height:130px; text-align:center; color:#fff; overflow:hidden;}
.testimonials .owl-dots{ width:100%; float:left;}
.testimonials .owl-dots .owl-dot{ width:30px; height:5px; float:left; background:#999; margin-right:10px;}
.testimonials .owl-dots .owl-dot.active{ background:#ef3c3c;}


/* Prices */
.prices{width:100%;}
.prices .price-box{ width:100%; border:1px solid #f4f4f4; padding-bottom:30px;}
.prices .price-box:hover{ border:1px solid #E8E8E8;}
.prices .price-box:hover a{border:1px solid #E8E8E8; background:#E8E8E8;}
.prices .price-box:hover a:hover{color:#333;}
.prices .price-box:hover h2{ background:#E8E8E8;}
.prices .price-box.selected {border:1px solid #ef3c3c; margin-top:-30px;}
.prices .price-box.selected a{border:1px solid #ef3c3c; background:#ef3c3c; color:#fff;}
.prices .price-box.selected a:hover{color:#fff;}
.prices .price-box.selected h2{ color:#fff; background:#ef3c3c; padding:45px 0;}
.prices .price-box.selected span{color:#fff;}
.prices .price-box h2{ width:100%; float:left; background:#f4f4f4; margin-top:0; margin-bottom:30px; padding:30px 0;}
.prices .price-box h2 span{ width:100%; float:left; font-size:18px; font-family:'Vollkorn', serif; margin-top:10px; font-weight:normal; color:#666;}
.prices .price-box ul{ width:90%; margin:0; margin-left:5%; margin-bottom:30px; padding:0;}
.prices .price-box ul li{ width:100%; border-bottom:1px solid #f4f4f4; margin:0; padding:15px 0;}
.prices .price-box ul li{list-style:none;}


/* Counter */
.counter{ width:100%;}
.counter .container{ position:relative; z-index:2; color:#fff;}
.counter .container .title-box{ margin-bottom:40px;}
.counter .icon{ float:left; padding-top:15px; padding-bottom:15px; border-right:1px dotted #666; padding-right:20px; margin-right:20px;}
.counter .content{ width:100%; float:left; }
.counter .content span{ font-size:20px; font-weight:700;}
.counter .content p{ color:#fff; margin-bottom:0; font-family:'Raleway', sans-serif;}
.counter .content p:before{ content:''; width:20px; height:1px; float:left; background:#ef3c3c; margin-top:12px; margin-right:3px;}


/* Recent Posts */
.recent-posts{ width:100%;}
.recent-posts .container{ position:relative; z-index:2;}
.recent-posts .container .item{ width:100%; float:left;}
.recent-posts .container .posts-carousel{ width:100%; float:left;}
.recent-posts .container .posts-carousel img{ width:100%; height: 280px; overflow: hidden;}
.recent-posts .container .posts-carousel img:hover{ opacity:0.8;}
.recent-posts .container .posts-carousel span{ color:#999; font-size:12px; margin-bottom:10px;}
.recent-posts .container .posts-carousel p{ margin-top:20px;}
.recent-posts .container .posts-carousel p:before{ content:''; width:20px; height:1px; float:left; background:#ef3c3c; margin-top:10px; margin-right:6px;}
.recent-posts .container .posts-carousel .read-more{ width:100%; float:left; border-top:1px solid #eee; padding-top:10px; margin-top:20px;}
.recent-posts .container .posts-carousel .read-more a{ color:#ef3c3c;}


/* Recent Posts */
.blog-list{ width:100%;}
.blog-list .blog-post{ width:100%; float:left; margin-bottom:80px;}
.blog-list .blog-post img{ width:100%;}
.blog-list .blog-post img:hover{ opacity:0.8;}
.blog-list .blog-post span{ color:#999; font-size:12px; margin-bottom:10px;}
.blog-list .blog-post p{ margin-top:20px;}
.blog-list .blog-post p:before{ content:''; width:20px; height:1px; float:left; background:#ef3c3c; margin-top:10px; margin-right:6px;}
.blog-list .blog-post .read-more{ width:100%; float:left; border-top:1px solid #eee; padding-top:10px; margin-top:20px;}
.blog-list .blog-post .read-more a{ color:#ef3c3c;}
.blog-list .pagement{ width:100%; float:left; margin:0; padding:0; border:1px solid #eee;}
.blog-list .pagement li{ float:left; list-style:none; padding:10px; border-right:1px solid #eee;}
.blog-list .pagement li:last-child{ float:right; border-left:1px solid #eee; border-right:none;}
.blog-list .pagement li a{float:left;}
.blog-list .pagement li a:hover{ color:#ef3c3c;}

.blog-list .side-bar{ width:100%; padding-left:30px;}
.blog-list .side-bar form{ width:100%; float:left; margin-bottom:40px;}
.blog-list .side-bar form input[type="text"]{width:163px; height:32px; float:left; border:1px solid #eee; border-right:0; padding:0 8px;}
.blog-list .side-bar form input[type="submit"]{ float:left; height:32px; background:#28282e; color:#fff; border:none;}
.blog-list .side-bar .text-content{ width:100%; float:left; margin-bottom:40px;}
.blog-list .side-bar .related-news{ width:100%; float:left; margin:0; padding:0; margin-bottom:40px;}
.blog-list .side-bar .related-news li{ width:100%; float:left; margin-bottom:20px; list-style:none;}
.blog-list .side-bar .related-news li small{ width:100%; float:left; color: #999; font-size: 12px; margin-bottom: 2px;}
.blog-list .side-bar .archives{ width:100%; float:left; margin-bottom:40px; padding:0;}
.blog-list .side-bar .archives li{ width:100%; float:left; margin-bottom:10px; list-style:none;}
.blog-list .side-bar .tags{ width:100%; float:left; padding:0;}
.blog-list .side-bar .tags li{ float:left; margin:2px; padding:3px 6px; list-style:none; border:1px solid #ccc;}
.blog-list .side-bar .tags li a{color:#999; font-size:12px;}

/* Google Maps */
.google-maps{ width:100%; float:left; padding-top:60px;}
.google-maps #map{width: 100%; height: 400px; float:left;}


/* Footer */
footer { width:100%; padding-bottom:0 !important;}
footer h4{ color:#ccc; font-weight:700; margin-bottom:20px;}
footer p{ margin-bottom:0;}
footer .google-maps{ width:100%; height:210px; overflow:hidden;}
footer .contact-box{ width:100%; float:left; margin-bottom:40px;}
footer .contact-box .icon{ width:15%; float:left; padding-top:10px;}
footer .contact-box .icon i{font-size:20px; color:#ccc;}
footer .contact-box .content{ width:85%; float:left;}


/* Subfooter Us */
footer .sub-footer{ width:100%; float:left; border-top:1px solid #333; margin-top:30px; padding:30px 0;}
footer .sub-footer p{ float:right;}



/* Reach Us */
footer form{ width:100%; float:left;}
footer form input[type="text"], footer form input[type="email"]{ width:100%; height:32px; border:none; border-bottom:1px solid #666; background:none; margin-bottom:5px; color:#fff;}
footer form textarea{ color:#fff;}
footer form input[type="submit"]{ background:none; border:1px solid #666; color:#fff; font-weight:700; padding:6px 20px;}
footer form textarea{ width:100%; height:100px; border:none; border-bottom:1px solid #666; background:none;}


/* Modal */
.modal{ width:100%;}
.modal-dialog{ width: calc(100% - 20px); background:#28282e; min-height: calc(100vh - 20px);}
.modal-content{border-radius:0; padding:20px 35px; background:none; box-shadow:none; border:none; color:#fff;}
.modal button.close{ width:48px; height:48px; position:fixed; z-index:2; top:0; right:0; font-size:44px; opacity:1; color:#fff; background:#ef3c3c; text-shadow:none; padding-bottom:4px; text-align:center;}
.modal button.close:hover{ opacity:1; color:#fff;}
.modal-header, .modal-body {padding: 15px 0px;}
.modal-body .date{color: #5b5b5b;}
.modal-body .row {margin:15px 0px;}
.modal-body .modal-cont-img img{width: calc(100% - 30px);}
.modal-body .modal-cont-video .iframe-ratio {display: block; width: 100%; height: auto;}
.modal-body .modal-cont-video iframe{position: absolute; top: 0; left: 0; width: calc(100% - 30px); height: 100%;}
.modal-body .info-projet p{color:#c3c3c3; word-wrap: break-word;}
.modal-body .info-projet span{font-weight: 700; color:#fff;}
.modal-body .info-projet .describ-projet{font-style: italic;}
/*.modal-body .info-projet i{display: inline-block; line-height: 24px; margin:0px 5px 20px 0px; font-size: 17px;font-weight: 400; font-family: 'Vollkorn', serif;}
*/

/* Section Backgrounds */
/*.background-img2{background-image:url(../img/template/hero8.jpg);}
.background-img3{background-image:url(../img/template/hero2.jpg);}*/
.background-img4{background-image:url(../img/template/hero9.png);}
.background-img5{background-image:url(../img/template/bg-service.jpg);}
.background-img6{background-image:url(../img/template/hero5.jpg);}
.background-img7{background-image:url(../img/template/hero6.jpg);}


/* Typewriter Transition */
.typed-cursor {opacity: 1;font-weight: 100;-webkit-animation: blink 0.3s infinite;-moz-animation: blink 0.3s infinite;-ms-animation: blink 0.3s infinite;-o-animation: blink 0.3s infinite;animation: blink 0.3s infinite;}
 @-keyframes blink {0% {opacity:1;}
50% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes blink {
0% {opacity:1;}
50% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes blink {
0% {opacity:1;}
50% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes blink {
0% {opacity:1;}50% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes blink {
0% {opacity:1;}50% {opacity:0;}
100% {opacity:1;}
}


/* Contact Form */
#success, #error {display:none}
#success p, #error p {margin-top:20px; float:left; color:#fff;}
#contact label{ width:100%; color:red;}
#error p {color:#c0392b}



/* Mobile Fixes */
@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) {
.icon-features .padding{ padding:0;}
.video-bg figure img{ width:107px;}
.ipad-features img{ width:100%;}
.team-members img{ width:100%;}
.process .process-content{ margin-bottom:40px;}
.services-icon .icon{ width:40%;}
.services-icon .content{ width:60%;}
.portfolio .works-container li{ width:50%;}
}


@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

header .lead-text h1{ font-size:35px; margin-top:90px;}
.title-box h2{ font-size:30px;}
.quote .space{ padding:0;}
.quote .container h2{ font-size:25px; line-height:30px;}
.video-bg .space{ padding:0;}
.video-bg h2{  font-size:25px; line-height:30px; margin-bottom:30px;}
.video-bg figure img{ width:107px;}
.ipad-features img{ width:100%;}
.portfolio .filter li{ margin-bottom:30px;}
.portfolio .works-container li{ width:100%;}
.process .process-content{ margin-bottom:40px;}
.services-icon .icon{ width:100%;}
.services-icon .content{ width:100%; margin-bottom:40px;}
.prices .price-box.selected{ margin:40px 0;}
.counter .content{ margin-bottom:30px;}
footer .sub-footer img{ margin:30px 0;}
footer .sub-footer p{ float:left; margin-bottom:20px;}
.modal-dialog{ width:100%;}
.modal-dialog img{ width:100%;}
}