@font-face {font-family: "title-font"; src: url("../fonts/megan.woff") format('woff');}
@font-face {font-family: "regular-font"; src: url("../fonts/Helvetica-Condensed.woff") format('woff');}


a, a:hover {text-decoration:none; color :#333e48;} 
a:hover {text-decoration:none; color :#cf212b;}  
h1,h2,h3,h4 {letter-spacing: 4px;} 
p {line-height:1.5em; color:#333e48;}
ul, li, ol {list-style-type:none; margin-left:0px; padding-left:0px;}
h1, h2, h3, h4 {text-transform:uppercase; font-weight:normal;}
h1 {font-size:2em;}
h2 {font-size:1.4em;}
img {border:0px; margin:0px; padding:0px; outline:none; position:relative;}


table,td,tr {border:0px;}
    
body {height: 60vh; margin:0px; padding:0px; font-family: "Cambay", sans-serif; font-style: normal; font-size:14px;}
.content {max-width:1280px; margin:0px auto;position:relative; z-index:5; display: block;}
.content .content-left {float:left; width:48%; position:relative;}
.content .content-right {float:right; width:48%; position:relative;}
.content .content-clear {clear:both; display:block;}


img {width: 100%;}
.height {height: 10px;}
          
.image-container { max-width: 800px; position: relative; margin: auto;}

.image-container img{opacity:1; animation:myship3 2s; -moz-animation:myship3 2s; -webkit-animation:myship3 2s;}
@keyframes myship3 {from {opacity:0;} to{opacity:1;} }
@-moz-keyframes myship3 {from {opacity:0;} to{opacity:1;}}
@-webkit-keyframes myship3 {from {opacity:0;} to{opacity:1;} }


section {min-height: 100vh; position:relative;}

.reveal{ position: relative; transform: translateY(150px); opacity: 0; transition: 1s all ease; }
.reveal.active{ transform: translateY(0); opacity: 1; }

.reveal1{position: relative; transform: translateY(200px); opacity: 0; transition: 2s all ease;}
.reveal1.active1{transform: translateY(0);opacity: 1;}

.reveal-intro-titre{top:30px; animation:myship 1s; -moz-animation:myship 1s; -webkit-animation:myship 1s;}
@keyframes myship {from {top: 0px;} to{top:30px;} }
@-moz-keyframes myship {from {top: 0px;} to{top:30px;}}
@-webkit-keyframes myship {from {top: 0px;} to{top:30px;} }

.reveal-intro-splash{top:320px; animation:myship2 3s; -moz-animation:myship2 3s; -webkit-animation:myship2 3s;}
@keyframes myship2 {from {opacity: 0;} to{opacity:1;} }
@-moz-keyframes myship2 {from {opacity: 0;} to{opacity:1;}}
@-webkit-keyframes myship2 {from {opacity: 0;} to{opacity:1;} }
    
section.section-intro {background-image:url(../img/webdesigner-chez-cocliko.jpg); background-size:cover; background-repeat:no-repeat; background-position:50% 0px;}
section.section-intro .title {position:absolute; max-width:600px; top:30px; z-index:20; left:40px;}
section.section-intro .title h1 {color:#ffffff; font-family: "Cambay", sans-serif; font-weight: 400; font-style: normal; font-size:12px;}
section.section-intro .splash {max-width:600px; margin:0px auto; padding:18% 0px;}
section.section-intro .splash img{width:100%;}
section.section-intro .text-intro{padding:42px 0px;}
section.section-intro .splash h2{color:#ba8f6b; font-size:0.9em; float:right; width:33%; margin-top:0px !important;}
section.section-intro .splash p{color:#999999; font-size:0.9em; line-height:1.2em; float:left; width:60%; margin-top:0px !important;}

section.section-presentation {background-color:#e4e4dc; background-image:url(../img/section-presentation-portrait.jpg); background-size:cover; background-repeat:no-repeat; background-position:50% 0px; color:#333333; }
section.section-presentation .content {margin:0px 24% 0px 24%; padding:16% 0px 10% 0px; }
section.section-presentation .content-left {max-width:480px; width:33%;}
section.section-presentation .content-right {z-index:20; position:relative; max-width:480px; width:48%;}
section.section-presentation h2 {color:#cf212b; margin-top:120px; font-family: 'title-font', Arial, Helvetica, sans-serif; text-transform:none; font-size:6em; line-height: 0.6em; letter-spacing: 0px;}
section.section-presentation p {color:#333333;}


section.section-break {background-color:#cf212b; color:#ffffff; min-height: auto;}
section.section-break .content {margin:0px 24% 0px 24%; padding:8% 0px 8% 0px; }
section.section-break .content-left {z-index:20; position:relative; max-width:320px;  width:33%;}
section.section-break .content-right {z-index:20; position:relative; max-width:900px;  width:96%;}
section.section-break h2 {color:#ffffff; margin-top:0px;font-family: 'title-font', Arial, Helvetica, sans-serif; text-transform:none; font-size:4em; line-height: 0.6em; letter-spacing: 0px;}
section.section-break p {color:#ffffff;}


section.section-etre {background-color:#f8f8f8; color:#333333;}
section.section-etre .content {margin:0px 24% 0px 24%; padding:16% 0px 10% 0px; }
section.section-etre .content-right {z-index:20; position:relative; width:44%; max-width:320px; }
section.section-etre .content-left {z-index:10; text-align:right; width:44%; float:left; max-width:320px; }
section.section-etre .content ul {margin:22px 0px;}
section.section-etre h2 {color:#333333; margin-top:0px; font-family: 'title-font', Arial, Helvetica, sans-serif; text-transform:none; font-size:3em; line-height: 0.6em; letter-spacing: 0px;}
section.section-etre p {color:#333333;}

section.section-parcours {background-color:#f8f8f8; color:#333333; min-height: auto; width:100%;  border-top:#999999 dotted 1px;  border-bottom:#999999 dotted 1px;}
section.section-parcours .content {margin:0px; padding:0px; max-width:100%}
section.section-parcours .content-left {display:block; z-index:20; position:relative; width:16%; float:left; padding:4%; border-right:#999999 dotted 1px;}
section.section-parcours .content-right {display:block; z-index:10; position:relative; width:16%; float:right; padding:4%; color:#cf212b;  }
section.section-parcours .content ul {margin:22px 0px;}
section.section-parcours .content ul li{padding:12px 0px;}
section.section-parcours h3 {margin-top:0px; font-family: 'title-font', Arial, Helvetica, sans-serif; text-transform:none; font-size:3em; line-height: 0.6em; letter-spacing: 0px;}
section.section-parcours h3 span {font-family: "Cambay", sans-serif; font-size:0.3em; text-transform:uppercase; font-weight:400;}
section.section-parcours p {}
section.section-parcours .content-right a{color:#cf212b;}
section.section-parcours .content-right a:hover{color:#777777;}


section.section-shop {background-color:#F8F8F8; color:#333e48; min-height: auto; }
section.section-shop .content {margin:0px 14% 0px 14%; padding:18% 0px 10% 0px;}
section.section-shop .content-left {width:49%; padding-top:36px; text-align:right;}
section.section-shop .content-right {width:49%; float:left;}
section.section-shop h2 {color:#cf212b; font-family: 'title-font', Arial, Helvetica, sans-serif; text-transform:none; font-size:3em; line-height: 0.6em; letter-spacing: 0px; text-align:center;}
section.section-shop h2 span{font-family: "Cambay", sans-serif; font-size:0.3em; text-transform:uppercase; font-weight:400;}
section.section-shop h3 {margin:124px 0px 0px -102px; color:#cf212b; font-family: 'title-font', Arial, Helvetica, sans-serif; text-transform:none; font-size:2.8em; line-height: 0.6em; letter-spacing: 0px;}
section.section-shop h3 span{color:#333e48; font-family: "Cambay", sans-serif; font-size:0.6em; text-transform:uppercase; font-weight:400;}
section.section-shop p {color:#333e48;}
section.section-shop img {max-width:380px;}

a.cta {color:#666666; text-transform:uppercase; letter-spacing:2px; border:1px solid #666666; padding: 6px 26px 2px 26px; background:#f8f8f8; transition: background 0.5s; transition: color 0.5s; border: transform 0.5s;}
a.cta:hover {color:#ffffff; border:1px solid #cf212b; padding: 6px 26px 2px 26px; background:#cf212b; }

section.section-contact { min-height: auto; background-color:#ffffff; background-image:url(../img/coquelicot.jpg); background-size:cover; background-repeat:no-repeat; background-position:50% 50%; }
section.section-contact .content {padding:2% 10%; background:#ffffff; margin:10%;}
section.section-contact .content-left {float:left; width:60%;}
section.section-contact .content-right {float:right; width:38%;}
section.section-contact .content h3 {text-transform:none; letter-spacing:2px; font-size:1.8em; color:#cf212b; line-height: 1.1em; margin-top: 64px; }


a.btn-arrow-bottom {display:block; width:40px; height:40px; margin:0px auto -20px auto; position:absolute; bottom:32px; left:50%; cursor:pointer; z-index:997;}



/* --------- COOKIES --------- */

.cookieConsentContainer { z-index: 999; width: 300px; min-height: 20px; box-sizing: border-box; padding: 30px 30px 30px 30px; background: #333e48; overflow: hidden; position: fixed; bottom: 30px; right: 30px; display: none; background-image:url('../images/cookies.png'); background-repeat: no-repeat; background-size: 30%; background-position: 90%;}
.cookieConsentContainer .cookieTitle {color:#ffffff}
.cookieConsentContainer .cookieDesc p { margin: 0; padding: 0; color: #FFFFFF; font-size: 0.7em; line-height: 20px; display: block; margin-top: 10px;}
.cookieConsentContainer .cookieButton a {cursor: pointer; display: inline-block; font-family: OpenSans, arial, "sans-serif"; color: #FFFFFF; font-size: 11px; font-weight: bold; margin-top: 14px; background: #333e48; box-sizing: border-box; border:1px solid #666666; padding: 8px 12px; text-align: center; transition: background 0.3s;}
.cookieConsentContainer .cookieButton a:hover {cursor: pointer; display: inline-block; font-family: OpenSans, arial, "sans-serif"; color: #FFFFFF; font-size: 11px; font-weight: bold; margin-top: 14px; background: #ba8f6b; box-sizing: border-box; border:1px solid #ba8f6b; padding: 8px 12px; text-align: center; transition: background 0.3s;}
.cookieConsentContainer .cookieClose  {float:right}
.cookieConsentContainer .cookieClose a {cursor: pointer; color:#ffffff; }
.cookieConsentContainer .cookieClose a:hover {cursor: pointer; color:#ba8f6b; }


/* --------- PUB ------------- */
.pub1 {position:fixed; z-index:9997; height:315px; width:560px; background-color:#ffffff; left:-200px; bottom:0px; opacity:0; transition: 0.5s all ease; transition-delay: 6s;}
.pub1.active1 {left:20px; bottom:20px; opacity:1; }
.pub1:after {content:'Publicité'; color:#666666; font-size:9px; text-transform:uppercase; position: absolute; background: #fff; padding: 4px 12px; letter-spacing: 2px; transform: rotate(-90deg); top: 60px; right: -64px;}


.pub2 {position:fixed; z-index:9999; height:315px; width:560px; background-color:#ffffff; left:-200px; bottom:0px; opacity:0; transition: 0.5s all ease; transition-delay: 26s;}
.pub2 img {float:left; width:40%; margin:4%}
.pub2 p {float:left; width:40%; margin:4%;}
.pub2.active1 {left:20px; bottom:20px; opacity:1; }
.pub2:after {content:'Publicité'; color:#666666; font-size:9px; text-transform:uppercase; position: absolute; background: #fff; padding: 4px 12px; letter-spacing: 2px; transform: rotate(-90deg); top: 60px; right: -64px;}

button.button-close {background: #fff; border: 0px; position: absolute; transform: rotate(-90deg);  top: 0px; right: -33px; padding: 4px 7px;} 



@media only screen and (max-width:900px) {
	
	body {font-size:16px;}
    .content {max-width:900px;}
    .content .content-left {float:none; width:100%;}
    .content .content-right {float:none; width:100%; }
    section.section-intro .splash {padding: 34% 0px;}
    section.section-presentation {background-image: url(../img/section-presentation-portrait.jpg); background-size: 118%; background-position: 70% 100%;}
    section.section-presentation .content {margin:0px 4% 0% 28%; padding:8% 0px 12% 0px; }
    section.section-presentation .content-left {max-width:900px; width:80%;}
    section.section-presentation .content-right {max-width:900px; width:80%;}
    section.section-break .content {margin:0px 8% 0px 8%;}
    section.section-etre .content {margin:0px 8% 0px 8%; padding:8% 0px 10% 0px; }
    section.section-etre .content-right {width:80%; max-width:800px; }
    section.section-etre .content-left {text-align:left; width:80%; float:none; max-width:800px; }
    section.section-parcours .content {margin:0px; padding:0px; max-width:80%}
    section.section-parcours .content-left {width:100%; float:none; padding:0px 8% 0px 8%;  }
    section.section-parcours .content-right {width:100%; float:none;padding:0px 8% 0px 8%;   }
    section.section-parcours h3 {margin-top: 62px; margin-bottom: 22px;}
    section.section-shop .content {margin:0px 4% 0px 4%; padding:8% 0px 10% 0px;}
    section.section-shop .content-left {width:44%; padding-top:36px; text-align:left; float:left;}
    section.section-shop .content-right {width:54%; float:left;}
    section.section-contact .content-left {float:none; width:100%;}
    section.section-contact .content-right {float:none; width:100%;}
    section.section-contact .content h3 {font-size: 1.2em;}
    .pub1 {width:80%; }
    .pub2 {width:80%; }
    .pub2 p {font-size:13px;}
    a.cta {font-size:13px;}

}

@media only screen and (max-width:680px) {
	
    section.section-presentation {background-image: url(../img/section-presentation-portrait.jpg); background-size: 200%; background-position: 0% 110%;}
    section.section-presentation .content {margin:0px 4% 0% 8%; padding:8% 0px 112% 0px; }
     a.cta { font-size: 13px; margin-left: -102px;}
}