@import url("reset.css");

/*
COULEURS
#dd262e
#000
#fff
*/


body{ background:#000; font-family: 'Source Sans Pro', sans-serif; color:#fff; font-size:18px; font-weight:300; line-height:1; }
h1,h2,h3,h4,h5{ font-weight:900; font-style:italic; line-height:1.3; font-size:36px; text-transform:uppercase; }
p{ line-height:1.4; }
sup{ vertical-align: super; font-size: smaller; }
.underline{ text-decoration:underline; }
a:hover{ }
::selection	{ background:#d4d4d4; color:#fff; }
::-moz-selection { background:#d4d4d4; color:#fff; }
::-webkit-input-placeholder{color:#666}
:-moz-placeholder{color:#666;opacity:1}
::-moz-placeholder{color:#666;opacity:1}
:-ms-input-placeholder{color:#666}
.strong{ font-weight:900; }
.em{ font-style:italic; }



/**HOME**/
#home-screen{ position:relative; height:1000px; width:100%; text-align:center; z-index:10;background:url(../images/bg-header.jpg) center center no-repeat; background-size:cover; }
#home-screen .lang{ position:absolute; top:0; right:80px; display:block; background:#fff; color:#000; font-size:18px; text-transform:uppercase; padding:12px 30px; }
#home-screen .inner{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:90%; }
#home-screen h2{ margin:30px 0 10px; }
#home-screen p{ margin:0 0 30px 0; }
#home-screen .scroll{ display:inline-block;}

#bande-exemples{ width:100%; display:block; }

#intro{ background:url(../images/bg-boat.jpg) center center no-repeat; padding:120px 0; }
#intro .inner{ max-width:970px; margin:0 auto; text-align:center; }
#intro p{ margin-top:30px; font-size:20px; }
#intro h3{ font-size:20px; margin-top:40px; margin-bottom:16px;  }
#intro ul{  }
#intro ul div{ float:left; width:25%; padding:0 10px; }
#intro ul li{ padding:4px 0; }

#emploi{ background:#1e1e1e; padding:80px 0; color:#c3c6c9; margin-bottom:60px; }
#emploi .inner{ max-width:970px; margin:0 auto; text-align:center; }
#emploi h2.highlight{ color:#dd262e; margin-top:30px; line-height:1.2; font-size:24px;}
#emploi h2.highlight>span{ font-weight:300; display:block; font-style:normal; }

#products .inner{max-width:1600px; margin:0 auto;}
#products .product{ float:left; width:33.3333%; padding:8px; }
#products .product>div{ border:2px solid #dd262e; }
#products .product .title{ padding:36px 0 0 0; }
#products .product .title h3{ font-size:60px; color:#000; float:left; background:#dd262e; padding:12px 20px; line-height:1;}
#products .product .title h4{ float:left; padding:22px 30px; font-size:22px; line-height:1;}
#products .product .title h4>span{display: block; font-size: 16px; font-style: normal; font-weight: 300; }
#products .product .desc{ font-size:15px; padding:36px 36px 20px 36px; }
#products .product .desc h5{ font-size:20px; margin-top:20px; }
#products .product .prix{ font-size:60px; padding:0 36px 36px 36px; }
#products .product .bottom{ background:#dd262e; padding:20px; text-align:center; }
#products .product .bottom a{ font-size:15px; color:#000; text-decoration:underline; }
#products .product .bottom a.btn{ width:42%; box-sizing:border-box; font-weight:900; font-style:italic; font-size:18px; text-transform:uppercase; padding:12px 16px; color:#dd262e; background:#fff; text-decoration:none; float:left; margin:0 4%; margin-bottom:12px;}
#products .product .bottom a.btn img{ width:75%; max-width:50px; margin-bottom:12px;}
#products .product .bottom a.btn:hover{ background:#000; color:#fff; }
#products .product .bottom a.cmd{ font-weight:900; font-style:italic; text-transform:uppercase; }

.bottom-contact{ text-align:center; padding:60px 20px; }
.bottom-contact .btn { display: block; border: 1px solid #fff; max-width: 280px; margin: 10px auto; padding: 10px 0; opacity:0.5;}
.bottom-contact .btn:hover{ opacity:1; }
.bottom-contact .tel{ font-size:36px; font-weight:900; font-style:italic; display:block; margin:20px 0 10px; }
.bottom-contact .adresse{ font-size:20px; display:block; line-height:1.3; }

#footer{ text-align:center; background:#1e1e1e; padding:26px 20px; font-size:13px; }
#footer .payment-info{ opacity:0.7; }
#footer .payment-info img{ margin:10px 0 20px; }

#modal{ display:none; position:fixed; background:rgba(0,0,0,0.9); left:0; right:-18px; overflow-y:scroll; top:0; bottom:0; z-index:999; padding:20px; }
#modal.open{ display:block; }
#modal .inner{ background:#fff; max-width:560px; margin:40px auto; padding:80px; color:#000; position:relative; }
#modal .close{ position:absolute; top:20px; right:20px; cursor:pointer; }
#modal .close:hover{ opacity:0.6; }
#modal h2{ text-align:center; margin-bottom:30px; }
#modal button{ font-weight:900; font-style:italic; font-size:22px; text-transform:uppercase; padding:12px 16px; background:#dd262e; color:#fff; text-decoration:none; font-family: 'Source Sans Pro', sans-serif; border:none; display:block; text-align:center; width:100%; cursor:pointer; }
#modal button:hover{ background:#bd1b22; }
#modal label{ display:block; font-weight:900; font-style:italic; text-transform:uppercase; margin-bottom:6px; }
#modal .input{ display:block; width:100%; border:1px solid #999; margin-bottom:20px; padding:10px; }
#modal textarea.input{ height:80px; resize:none; font-family: 'Source Sans Pro', sans-serif; }
#modal .input.error{ border-color:#bd1b22; background:#ffdada; color:#bd1b22; }
#modal .input:focus{ border-color:#000; }
#modal .note{ border-top:1px solid #ddd; padding:20px 0; line-height:1.3; font-size:16px; }
#modal .success{margin-bottom: 10px; margin-top: -10px; color: #299214; text-align: center; padding: 10px; background: #c5ecbd;}
#cmd-selected{ font-weight:900; font-style:italic; display:block; font-size:19px; }

@media only screen and (max-height:840px) {
	#home-screen h1{ font-size:35px; }
}
@media (max-width: 1549px) {
}
@media (max-width: 979px) {
	#home-screen { position:relative; height:auto; }
	#home-screen .lang{ left:0; right:auto; width:100%; }
	#home-screen .inner{ position:static; transform:none; width:90%; margin:0 auto; padding:80px 0; }
	#home-screen h1 img{ max-width:90%; }
	#home-screen h2{ line-height:1; }
	#bande-exemples{ display:none; }
	#intro{ background:url(../images/bg-boat.jpg) center center no-repeat; background-size:cover; padding:100px 20px; }
	#intro ul div{ float:none; width:100%; }
	#emploi{ padding:80px 20px; }
	#products .product{ float:none; width:90%; padding:8px; margin:0 auto; }
	#products .product .bottom a.btn{ padding:20px 16px; font-size:85%;}
	#modal .inner{ padding:40px 20px; margin:0 auto; }
}


















/*CSS Animations*/

@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  60% {
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  60% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  60% {
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}


.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}

@-webkit-keyframes slideInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes slideInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown
}