/********************************************
	* Domaine : dominiquecressot.com
	*
	* Exploitant : Dominique Cressot
	*
	* Rôle : Feuille de style principale 
	*
	* Auteur : Ultra-Fluide, copyright 2018
********************************************/

@font-face {
   font-family: Raleway;
   src: url(Raleway-Light.otf);
   font-weight:normal;
}

@font-face {
   font-family: Raleway;
   src: url(Raleway-Regular.otf);
   font-weight: 500;
}

@font-face {
   font-family: Raleway;
   src: url(Raleway-Medium.otf);
   font-weight: bold;
}

* { border:none; margin:0; padding:0;}

ul li { list-style:none;}

a{ text-decoration:none; }
a:hover { text-decoration:underline;}

body { font-family: Raleway; font-size:13px; }

#header {position:relative; width:100%;margin:0 auto;max-width:1200px; height:77px; background: #fff; position:fixed; left:0;right: 0; box-shadow:0 8px 6px -4px #aaa;padding-bottom:3px;z-index:99999;}
#header h1 {background-image:linear-gradient(to right,#ffbb00,#ff6700);background-position: 0 100%;background-size:100% 5px;background-repeat: no-repeat;font-size:37px; padding-bottom:18px;position:absolute;bottom:0}

#header ul {padding-bottom:9px;position:absolute;right:0; bottom:0}
#header ul  li{ display:inline-block;text-align:right;margin-left:10px;font-size:30px;font-weight: 500;}
#header ul  li:nth-of-type(2){margin-right:50px}
#header ul  li a{color: #ff6600} 
#header ul  li:nth-of-type(1):after {padding-left:13px;content: "|";color:#888;}
@media screen and (max-width: 1000px) {
#header h1 {font-size:3.7vw;padding-bottom:1.8vw}
#header {height:7.7vw;}
#header ul {padding-bottom:0.9vw}
#header ul  li{ font-size:3vw}
#header ul  li:nth-of-type(2){margin-right:5vw}
#header ul  li:nth-of-type(3) img {width:4.6vw}
#header ul  li:nth-of-type(4) img {width:3.6vw}
}

#intro { clear:both; width:100%; max-width:1200px; margin:0 auto; padding-top:114px; overflow: auto;}
@media screen and (max-width: 1200px) {
#intro {padding-top:9.5vw;}
}
#intro .col-left {float:left; width:36%;}
#intro .col-left h1 {font-size:32px;line-height:48px; font-weight:500; }
#intro .col-left img {margin-bottom:8px; width:100%;}
#intro .col-left h2 {font-style: italic; font-size:12px;line-height:15px;}
#intro .col-left ul li { list-style:none; padding-left:10px; background:url('images/puce.png') left center no-repeat;}
#intro .col-left ul li a{ text-decoration:none; color:#000;}
#intro .col-left ul li a:hover { text-decoration:underline;}

#intro .col-right{float:right;width:61%;padding-top: 44px;}
#intro .col-right h2 {font-size:19px; font-weight:normal; line-height:22px;}
#intro .col-right h2 strong {font-weight:bold; }
#intro .col-right .text-left { float:left; width:62.9%;font-size:14px; }
#intro .col-right .text-right { float:right; width:33.9%;margin-left:3.2%;}
#intro .col-right .text-left ul li {margin-top:15px; list-style:none; padding-left:15px; background:url('images/puce-orange.png') left 5px no-repeat;}
#intro .col-right .text-left ul li { margin-bottom:15px;}
#intro .col-right .text-left p  {margin-bottom:15px;}
#intro .col-right .text-right img  {width:100%;}
@media screen and (max-width: 900px) {
#intro .col-right .text-right { display:none}
#intro .col-left {width:44%;}
#intro .col-right{width:54%;}
#intro .col-right .text-left {width:100%;}
}
@media screen and (max-width: 600px) {
#intro .col-left h1 {font-size:5.33vw;line-height:8vw; }
#intro .col-right h2 {font-size:3.17vw;line-height:3.67vw;}
}
@media screen and (max-width: 500px) {
#intro .col-right .text-left {font-size:2.8vw; }
}
#head-timeline{max-width:1200px;width:100%; margin:15px auto 5px auto;font-size:26px}
@media screen and (max-width: 600px) {
#head-timeline{font-size:4.33vw}
}
#timeline {width:100%; background:url('images/fond-timeline-cressot.svg') left top no-repeat;}

#timeline #time-contenu {max-width:1200px; margin:0 auto 20px auto;pposition:relative;}
#timeline #time-contenu svg {max-width:1200px;max-height:374px}
#timeline #experiences > * + g { cursor: pointer;}
@media screen and (max-width: 1200px) {
#timeline {background:none}
#timeline #time-contenu svg {max-height:31.17vw}
}


#detail {width:100%; max-width:1200px; margin: 0 auto;position:relative; overflow:hidden; margin-top:15px; min-height:540px;margin-bottom:20px}
#detail #contenu { margin: 0 auto;height:auto;position:relative;}
#detail #contenu > div { width:94%; position:absolute; top:0; left:3%; visibility:hidden}
#detail #contenu > #__15 {visibility:visible;position:relative;}
#detail #contenu > div {animation-duration: 1.5s;}
@keyframes outright {
  from {
	transform: translate(0);
	visibility:visible;
  }

  to {
	transform: translate(105%);
	visibility:hidden;
  }
}
@keyframes inright {
  from {
	transform: translate(-105%);
	visibility:visible;
  }

  to {
	transform: translate(0);
	visibility:visible;
  }
}
@keyframes outleft {
  from {
	transform: translate(0);
	visibility:visible;
  }

  to {
	transform: translate(-105%);
	visibility:hidden;
  }
}
@keyframes inleft {
  from {
	transform: translate(105%);
	visibility:visible;
  }

  to {
	transform: translate(0);
	visibility:visible;
  }
}


#detail .detail-img { width:50%; float:left;}
#detail .detail-img img{width:100%;}

#detail .detail-text {width:49%; float:right;}
#detail .detail-text h1{font-size:16px; color:#ffbb00; margin-bottom:10px;}
#detail .detail-text h1.etape2{color:#ff9900;}
#detail .detail-text h1.etape3{color:#ff6600;}
#detail .detail-text h1.etape4{color:#df6517;}
#detail .detail-text h2{ font-size:15px;}
#detail .detail-text p {  margin-bottom:10px;}
#detail .detail-text a{text-decoration:underline;color:black }
#detail .detail-text a:hover{text-decoration:none; }
#detail .detail-text ul li { padding-left:15px; margin-bottom: 10px; background:url('images/puce-orange-p.png') left 5px no-repeat;}
#detail .detail-text ul li ul li {background:url('images/puce.png') left 5px no-repeat;margin-bottom: 5px}
#detail .detail-text ul li ul {margin-top: 5px}
#detail .prev {width:3%; position:absolute; top:0; left:0;  padding-top:200px;z-index:10 }
#detail .next {width:3%;position:absolute; top:0; right:0;text-align: right; padding-top:200px;}
#detail .prev:hover, #detail .next:hover{ cursor: pointer;}
@media screen and (max-width: 800px) {
#detail .prev, #detail .next {width:5%;}
#detail #contenu > div { width:90%;left:5%}
}
@media screen and (max-width: 700px) {
#head-timeline{font-size:4.33vw}
#detail .detail-img { width:100%; float:none;}
#detail .detail-text {width:100%; float:none;}
}

#footer  { clear: both; width:100%; /*width:72.5%;*/ background-color:#555555; color:#bbbbbb; /*padding:25px 13.75% 150px 13.75%;*/ padding:25px 0 150px;}
#footer #contenu-footer{ max-width:1200px; margin:0 auto; position: relative;}
#footer  h1{ font-weight:normal; font-size:18px; line-height:38px;}
#footer  h1 strong{ font-weight:bold;}
#footer  .pdf{ color:#fff; background:url('images/pdf.png') left center no-repeat;font-size: 15px; padding:5px 0 0 25px; margin-bottom:15px;}
#footer  .pdf a {color:#fff; }
#footer  .info { margin-top:20px;}
#footer  .info li{ display:inline-block; padding-left:20px; margin-right:20px;}
#footer  .info li.adress{ background:url('images/adresse.png') left center no-repeat;}
#footer  .info li.email{ background:url('images/mail.png') left center no-repeat;}
#footer  .info li.email a{ color:#bbbbbb; }
#footer  .info li.tel{ background:url('images/tel.png') left center no-repeat;}

#footer .social { position:absolute; top:25px; right:0%;}
#footer .social a {margin-left:10px;}
@media screen and (max-width: 400px) {
#footer .social {display:none}
}