@import url(http://fonts.googleapis.com/css?family=Raleway:700,100,400,300);
@import url(http://fonts.googleapis.com/css?family=Vollkorn:400italic,400);


/*
// Table of contents //

  1. Body
    1.1 Headlines
    1.2 Form Elements
    1.3 Form Elements
    1.4 Main Elements // header, footer, section


  2. Tools - Utils
    2.1 Spacing
    2.2 Title Box // .title-box
    2.3 Section Overlay // .section-overlay
    2.4 Tools // Misc
    2.5 Links // a a:hover
    2.6 Site Loader // .loader


  3. Header
    3.1 Particles Effect // #particles
    3.2 Scroll Opacity // .lead-text
    3.3 Navigation // nav
    3.4 Typewriter Effect
    3.5 Elements of Header


  4. Introduction
    4.1 Elements of Header


  5. Quote
    5.1 Elements of quote


  6. Features with Icons
    6.1 Title Box
    6.2 Elements of Features


  7. Content with Video Background
    7.1 Background Video // video
    7.2 Thanks Image // figure img
    7.3 Elements of Video Background


  8. Features with Ipad
    8.1 Icons // .icon
    8.2 Content // .content
    8.3 Elements of Ipad Features


  9. Client Logos
    9.1 Client Images // .client-logos .box img
    9.2 Section Title // h6
    9.3 Carousel Container // .logos-list
    9.4 Elements of Client Logos

  10. Portfolio
    10.1 Filter of portfolio // .portfolio .filter
    10.2 Thumbs list of portfolio // .portfolio .works-container
    10.3 Elements of Portfolio

  11. Team Members
    11.1 Elements of Team Members

  12. Process of Work
    12.1 Icons // .icon
    12.2 Contents // .content
    12.3 Elements of Process

  13. Services
    12.1 Icons // .icon
    12.2 Contents // .content
    12.3 Elements of Services

  14. Testimonials
    14.1 User of Testimonial // h2
    14.2 User position // .job-title
    14.3 Navigation for Carousel // .owl-dots
    14.1 Elements of Testimonials

  15. Prices
    15.1 Price Box // .prices .price-box
    15.2 Price Box Selected // .prices .price-box.selected
    15.3 Elements of Prices

  16. Counter
    16.1 Icons // .icon
    16.1 Content // .content
    16.1 Elements of Counter

  17. Recent Posts
    17.1 Carousel of posts // .recent-posts .container .posts-carousel
    17.2 Elements of Recent Posts

  18. Google Maps
    18.1 Container of Google Maps // #map

  19. Footer
    19.1 Contact Us // .contact-box
    19.2 Reach Us // #contact
    19.4 Elements of Recent Posts

  20. SubFooter
    20.1 Elements of SubFooter

  21. Modal
    20.1 Elements of Modal

  22. Section Backgrounds
    20.1 Elements of Backgrounds

  23. Typewriter Transition
    20.1 Elements of Typewriter Transition

  24. Contact Form
    20.1 Elements of Contact Form

  25. Mobile Fixes
    25.1 Elements of Mobile Fixes


*/



/* Body */
*{ outline:none !important;}
body{ margin:0; padding:0; font-family: 'Raleway', sans-serif; color:#28282e; font-size:14px; -webkit-font-smoothing: antialiased; outline:none;}
html,body { height: 100%;}


/* Headlines */
h1{ font-weight:700;}
h2{ font-weight:700;}
h3{ font-weight:700;}
h4{ line-height:28px;}


/* Form Elements */
input[type="text"]{ outline:none;}
input[type="submit"]{ outline:none;}
input[type="button"]{ outline:none;}
textarea{ outline:none;}


/* Main Elements */
header{ width:100%; float:left; background-position:center;}
footer{ width:100%; float:left; background:#28282e;}
section{ width:100%; float:left; position:relative; }
section.overlay{ position:relative;}
section.overlay:after{content:''; width:100%; height:100%; background:rgba(40,40,46, 0.9); position:absolute; left:0; top:0;}

/* ------------------------------------------------------------------------------
  Global Styles
-------------------------------------------------------------------------------*/
a {
  color: #e84545;
}
a:hover, a:focus {
  text-decoration: none;
  -moz-transition: background-color, color, 0.3s;
  -o-transition: background-color, color, 0.3s;
  -webkit-transition: background-color, color, 0.3s;
  transition: background-color, color, 0.3s;
}
body {
  font-family: "Source Sans Pro";
  font-weight: 400;
  color: #6c7279;
}
ul, ol {
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
}
.section {
  padding: 100px 0;
}
.no-padding {
  padding: 0;
}
.no-gutter [class*=col-] {
  padding-right: 0;
  padding-left: 0;
}
.space {
  margin-top: 60px;
}


/* TOOLS - UTILS */

/* Spacing */
.section-padding{ padding:100px 0;}
.no-padding{ padding:0;}
.no-margin{ margin:0;}


/* Title Box */
.title-box{ width:100%; float:left; margin: -30px 0px 30px 0px;}
.title-box h6{ font-size:15px; position:relative; background:url(../img/template/title-seperate.png) center bottom no-repeat;}
.title-box h6{ padding-bottom:40px; margin-bottom:30px;}
.title-box h2{ font-size: 40px; margin-bottom: 30px; text-transform: uppercase;}


/* Section Overlay */
.section-overlay { position:relative;}
.section-overlay:after{contnet:''; width:100%; height:100%; position:absolute; left:0; top:0; background:#28282e; opacity:0.9;}

/* Tools */
.error-pages{ height:100% !important;}
.error-pages img{ margin-top:20px;}
.error-pages h1{ margin:0 !important;}
.error-pages h2{font-size:140px; color:#fff; margin-top:100px;}
.bolder{ font-weight:700;}
.colored{color:#ef3c3c;}
i{ font-size:40px;}
p{color:#5b5b5b; line-height:24px; margin-bottom:20px; font-size:17px; font-family: 'Vollkorn', serif;}


/* Links */
a{color:#2b2b2b; outline:none; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease;}
a{font-weight:700;}
a:hover{color:#2b2b2b;}


/* Button */
.button{ line-height:40px; display:inline-block; border:1px solid #ccc; padding:0 25px; font-size:12px;}
.button:hover{ background:#ef3c3c; color:#fff; text-decoration:none; border:1px solid #ef3c3c;}


/* Site Loader */
.loader {position: fixed;left: 0px;top: 0px;width: 100%;height: 100%;z-index: 9999;background: url('../img/template/load.gif') 50% 180px no-repeat #eee;text-align:center; padding-top:220px; font-weight:700; }



/* HEADER */

/* Particles Effect */
header #particles{ width:100%; height:100%; float:left; position:relative;}
header #particles canvas{ opacity:0.1;}
header #particles .intro{ width:100%; height:100%; position:absolute; left:0; top:0;}


/* Video */

.video-container{
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-position: 50% 50%;
    margin: 0 auto;
}

video{
    max-width: none;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    position: relative;
    min-width: 100%;
    min-height: 100%;
    height: auto;
}

.video-cover{
  width: 100%;
}

/* Mobile Fixes */
@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) {
  .video-container{
    display: none;
  }
  .background-img1{background-image:url(../img/template/header.jpg);}
}


@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
  .video-container{
    display:none;
  }
  .background-img1{background-image:url(../img/template/header.jpg);}
}

/* Titre */
.banner .lead-text {margin-top: 27vh;}
.banner .lead-text span{white-space:pre;}
.banner .lead-text h1{ font-size:90px; font-weight:700; color:#fff; padding-bottom:20px; position:relative; opacity: 1;}
.banner .lead-text h1:after{content:''; width:90px; height:3px; float:left; position:absolute; left:50%; bottom:0; margin-left:-45px; background:#ef3c3c;}
.banner .lead-text h3{ font-size:20px; font-weight:300; line-height:30px; color:#fff; margin-bottom:60px;}
.banner .lead-text .button{ border:1px solid #fff; color:#fff; padding:5px 30px;width: 150px; margin-right: 5px; margin-left: 5px;}
.banner .lead-text .button:hover{color:#fff; background:#ef3c3c; border:1px solid #ef3c3c;}


/* ------------------------------------------------------------------------------
   Header
-------------------------------------------------------------------------------*/
#header {
  position: fixed;
  width: 100%;
  z-index: 999;
  background-color: #060606;
  border-color: #060606;
}
.valid-message{
  position: absolute;
  width: 500px;
  text-align: center;
  z-index: 2000;
  margin-left: calc(50% - 250px);
}
.valid-message h6{
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
}
@media screen and (max-width: 500px){
  .valid-message{
    width: 100%;
  }
  .valid-message h6{
    font-weight: 500;
    font-size: 10px;
  }
}
#header .header-content {
  margin: 0 auto;
  max-width: 1170px;
  padding: 60px 0;
  width: 100%;
  -moz-transition: padding 0.3s;
  -o-transition: padding 0.3s;
  -webkit-transition: padding 0.3s;
  transition: padding 0.3s;
}
#header .logo{
  float: left;
}
#header.fixed {
  background-color: #060606;
  border-color: #060606;
}
#header.fixed .header-content {
  border-bottom: 0;
  padding: 25px 0;
}
#header.fixed .nav-toggle {
  top: 18px;
}
.banner .lead-text h1 img {
    max-width: 720px;
    min-width: 210px;
    width: 80%;
}
.navigation.open {
  opacity: 0.9;
  visibility: visible;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
.navigation {
  float: right;
  padding: 6.5px 0px;
}
.navigation li {
  display: inline-block;
}
.navigation a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 400;
  margin-left: 40px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.navigation a:hover, .navigation a.active {
  color: #fff;
}
.nav-toggle {
  display: none;
  height: 44px;
  overflow: hidden;
  position: fixed;
  right: 5%;
  text-indent: 100%;
  top: 53px;
  white-space: nowrap;
  width: 44px;
  z-index: 99999;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.nav-toggle:before, .nav-toggle:after {
  border-radius: 50%;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
}
.nav-toggle:before {
  background-color: #e84545;
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.nav-toggle:after {
  background-color: #e84545;
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  -moz-transition-duration: 0s;
  -o-transition-duration: 0s;
  -webkit-transition-duration: 0s;
  transition-duration: 0s;
}
.nav-toggle span {
  background-color: #fff;
  bottom: auto;
  display: inline-block;
  height: 3px;
  left: 50%;
  position: absolute;
  right: auto;
  top: 50%;
  width: 18px;
  z-index: 10;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.nav-toggle span:before, .nav-toggle span:after {
  background-color: #fff;
  content: "";
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-transition: -moz-transform 0.3s;
  -o-transition: -o-transform 0.3s;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}
.nav-toggle span:before {
  -moz-transform: translateY(-6px) rotate(0deg);
  -ms-transform: translateY(-6px) rotate(0deg);
  -webkit-transform: translateY(-6px) rotate(0deg);
  transform: translateY(-6px) rotate(0deg);
}
.nav-toggle span:after {
  -moz-transform: translateY(6px) rotate(0deg);
  -ms-transform: translateY(6px) rotate(0deg);
  -webkit-transform: translateY(6px) rotate(0deg);
  transform: translateY(6px) rotate(0deg);
}
.nav-toggle.close-nav:before {
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
}
.nav-toggle.close-nav:after {
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}
.nav-toggle.close-nav span {
  background-color: rgba(255, 255, 255, 0);
}
.nav-toggle.close-nav span:before, .nav-toggle.close-nav span:after {
  background-color: #fff;
}
.nav-toggle.close-nav span:before {
  -moz-transform: translateY(0) rotate(45deg);
  -ms-transform: translateY(0) rotate(45deg);
  -webkit-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
}
.nav-toggle.close-nav span:after {
  -moz-transform: translateY(0) rotate(-45deg);
  -ms-transform: translateY(0) rotate(-45deg);
  -webkit-transform: translateY(0) rotate(-45deg);
  transform: translateY(0) rotate(-45deg);
}
/* ------------------------------------------------------------------------------
   User Style
-------------------------------------------------------------------------------*/
.social-icons, .footer .footer-share {
  margin-top: 30px;
}
.social-icons li, .footer .footer-share li {
  display: inline-block;
  float: none;
}
.social-icons a, .footer .footer-share a {
  border: 1px solid #e8ecee;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  color: #c6cacc;
  display: block;
  font-size: 14px;
  height: 32px;
  line-height: 32px;
  margin-right: 5px;
  text-align: center;
  width: 32px;
}
.social-icons a:hover, .footer .footer-share a:hover {
  background-color: #e84545;
  border-color: #e84545;
  color: #fff;
}

.container-user{
  height: 100vh;
  padding-top: 151px;
}
.container-user #content-projet{
  width:100%;
  height: 100%;
}

/* Marge */

#marge{
  width:100%;
  height:150px;
}

/* 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;}
footer p a{ color:#5b5b5b; line-height: 24px; margin-bottom: 20px; font-size: 17px; font-family: 'Vollkorn', serif; font-weight: 400;}
footer p a:hover{ color:#ffffff; }
footer .social-icons{
  margin-top: 0px;
}


/* 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"]{ 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;}


/* 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%;}
}