@font-face {
    font-family: 'font_awesome_5_freeregular';
    src: url('fonts/font_awesome_5_free-regular-400-webfont.woff2') format('woff2'),
         url('fonts/font_awesome_5_free-regular-400-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'font_awesome_5_freesolid';
    src: url('fonts/font_awesome_5_free-solid-900-webfont.woff2') format('woff2'),
         url('fonts/font_awesome_5_free-solid-900-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'font_awesome_5_brandsregular';
    src: url('fonts/font_awesome_5_brands-regular-400-webfont.woff2') format('woff2'),
         url('fonts/font_awesome_5_brands-regular-400-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'glyphicons-halflings-regular';
    src: url('fonts/glyphicons-halflings-regular.woff') format('woff'),
         url('fonts/glyphicons-halflings-regular.eot') format('eot'),
         url('fonts/glyphicons-halflings-regular.ttf') format('truetype'),
         url('fonts/glyphicons-halflings-regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotoblack';
    src: url('fonts/Roboto-Black-webfont.eot');
    src: url('fonts/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Black-webfont.woff2') format('woff2'),
         url('fonts/Roboto-Black-webfont.woff') format('woff'),
         url('fonts/Roboto-Black-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Black-webfont.svg#robotoblack') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotoblack_italic';
    src: url('fonts/Roboto-BlackItalic-webfont.eot');
    src: url('fonts/Roboto-BlackItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-BlackItalic-webfont.woff2') format('woff2'),
         url('fonts/Roboto-BlackItalic-webfont.woff') format('woff'),
         url('fonts/Roboto-BlackItalic-webfont.ttf') format('truetype'),
         url('fonts/Roboto-BlackItalic-webfont.svg#robotoblack_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotobold';
    src: url('fonts/Roboto-Bold-webfont.eot');
    src: url('fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Bold-webfont.woff2') format('woff2'),
         url('fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Bold-webfont.svg#robotobold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotobold_italic';
    src: url('fonts/Roboto-BoldItalic-webfont.eot');
    src: url('fonts/Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-BoldItalic-webfont.woff2') format('woff2'),
         url('fonts/Roboto-BoldItalic-webfont.woff') format('woff'),
         url('fonts/Roboto-BoldItalic-webfont.ttf') format('truetype'),
         url('fonts/Roboto-BoldItalic-webfont.svg#robotobold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotoitalic';
    src: url('fonts/Roboto-Italic-webfont.eot');
    src: url('fonts/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Italic-webfont.woff2') format('woff2'),
         url('fonts/Roboto-Italic-webfont.woff') format('woff'),
         url('fonts/Roboto-Italic-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Italic-webfont.svg#robotoitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotolight';
    src: url('fonts/Roboto-Light-webfont.eot');
    src: url('fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Light-webfont.woff2') format('woff2'),
         url('fonts/Roboto-Light-webfont.woff') format('woff'),
         url('fonts/Roboto-Light-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotolight_italic';
    src: url('fonts/Roboto-LightItalic-webfont.eot');
    src: url('fonts/Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-LightItalic-webfont.woff2') format('woff2'),
         url('fonts/Roboto-LightItalic-webfont.woff') format('woff'),
         url('fonts/Roboto-LightItalic-webfont.ttf') format('truetype'),
         url('fonts/Roboto-LightItalic-webfont.svg#robotolight_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotomedium';
    src: url('fonts/Roboto-Medium-webfont.eot');
    src: url('fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Medium-webfont.woff2') format('woff2'),
         url('fonts/Roboto-Medium-webfont.woff') format('woff'),
         url('fonts/Roboto-Medium-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Medium-webfont.svg#robotomedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotomedium_italic';
    src: url('fonts/Roboto-MediumItalic-webfont.eot');
    src: url('fonts/Roboto-MediumItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-MediumItalic-webfont.woff2') format('woff2'),
         url('fonts/Roboto-MediumItalic-webfont.woff') format('woff'),
         url('fonts/Roboto-MediumItalic-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Medfonts/iumItalic-webfont.svg#robotomedium_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotoregular';
    src: url('fonts/Roboto-Regular-webfont.eot');
    src: url('fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Regular-webfont.woff2') format('woff2'),
         url('fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotothin';
    src: url('fonts/Roboto-Thin-webfont.eot');
    src: url('fonts/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Thin-webfont.woff2') format('woff2'),
         url('fonts/Roboto-Thin-webfont.woff') format('woff'),
         url('fonts/Roboto-Thin-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Thin-webfont.svg#robotothin') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotothin_italic';
    src: url('fonts/Roboto-ThinItalic-webfont.eot');
    src: url('fonts/Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-ThinItalic-webfont.woff2') format('woff2'),
         url('fonts/Roboto-ThinItalic-webfont.woff') format('woff'),
         url('fonts/Roboto-ThinItalic-webfont.ttf') format('truetype'),
         url('fonts/Roboto-ThinItalic-webfont.svg#robotothin_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* */
html{
    word-break: keep-all;
}

body{
    background: #FFFFFF;
    color: #505050;
    margin: 0;
    font-family: 'robotolight', Arial, sans-serif;
}

#block_page{
	margin: auto;  
  max-width: 100%;
	height: auto;
}

@media screen and (max-width: 480px){
  img{
  height: auto;
  max-width: 100%;
  }
}

a{
    text-decoration: none;
}

a:hover{
    color: #0099FF;
}

/* header */

header{
    position: fixed;
    top: 0;
    width: 100%;
    padding: 15px 0px 15px 80px;
    z-index: 2;
    background-color: white;
    border-bottom: 0.5px solid #D8D8D8;
    margin-bottom: 0;
}

  @media screen and (max-width: 767px){
     header{
     padding: 10px 0 0 0;
     max-width: 100%;
     margin: 0;
     }
  }

@media screen and (min-width: 767px) and (max-width: 1025px){
     header{
     max-width: 100%;
     padding: 15px 0px 15px 0px;
     }
  }

.header{
	display: flex;
	align-items: center;
	justify-content: space-between;
    width: 1024px;
    max-width: 100%;
}


header .nav_drawer ul#menu {
  display: none;
}

  @media screen and (max-width: 767px){
    .header{
     margin: 0;
     max-width: 100%;
     position: relative;
     }
  }

    @media screen and (min-width: 767px) and (max-width: 1025px){
    .header{
     max-width: 90%;
     margin: auto;
     }
  }

  @media screen and (max-width: 767px) {

  nav{
  display: none;
  }

  /* menu pour mobile*/
.nav_drawer{
  position: relative;
}

.nav_drawer ul#menu {
  list-style-type : none;
  background : #0099FF;
  opacity : 0.9;
  left : 0;
  position : absolute; 
  width: 100%;
  z-index : 990;
  display : none;
  margin: 0;
  padding: 0;
  font-family: 'robotobold', 'glyphicons-halflings-regular', Arial, sans-serif;
}

ul#menu li {
  text-align : center;
}

ul#menu li a {
  text-decoration : none;
  display : block;
  padding : 15px 0;
  color: #fff;
}

ul#menu li a:hover {
  background : #a9a9a9;
  opacity : 0.7;
}


div#sp-icon {
  width : 60px;
  height : 60px;
  position : absolute;
  right : 0px;
  top : -62px;
  z-index : 999;
}

div#sp-icon:hover {
  cursor : pointer;
  opacity : 0.7;
}

div#sp-icon span,
div#sp-icon span:before,
div#sp-icon span:after {
  display : inline-block;
  width : 30px;
  height : 3px;
  background : #505050;
  transition-property : transform;
  transition-duration : 0.3s;
}

div#sp-icon span {
  position : absolute;
  left : 50%;
  top : 50%;
  transform : translate( -50%, -50% );
}

div#sp-icon span:before {
  content : "";
  position : absolute;
  transform : translateY( -10px ) rotate( 0deg );
}

div#sp-icon span:after {
  content : "";
  position : absolute;
  transform : translateY( 10px ) rotate( 0deg );
}

div.sp-close span {
  background : transparent !important;
}

div.sp-close span:before {
  transform : rotate( 45deg ) !important;
}

div.sp-close span:after {
  transform : rotate( -45deg ) !important;
}
}

#logo img{
	width: 230px;
}

@media screen and (max-width: 600px){
  #logo img{
     width: 80%;
 }   
}

nav ul{
	display: flex;
	list-style-type: none;
}


nav li{
	padding-left: 30px;
	font-family: 'robotobold', 'glyphicons-halflings-regular', Arial, sans-serif;
}

nav a{
	text-decoration: none;
	color: #505050;
	font-size: 1em;
    display: inline-block;
    position: relative;
}

nav a:after{
    content: "";
    background: #0099FF;
    display: block;
    height: 2px;
    position: absolute;
    top: -16px;
    left: 50%;
    transition: all 2s ease;
    width: 0;
}

nav a:hover:after{
    width: 120%;
    color: #0099FF;
    transform: translateX(-50%);
}

/* contenu */ 
/* commun */

h1{
	font-family: 'fontawesomeregular', Arial, sans-serif;
	font-size:3em;
	font-weight: bold;
	margin-top: 1em;
	margin-bottom: 0.5em;
}

  @media screen and (max-width: 767px){
     h1{
      font-size: 2em;
     }
  }

p{
	font-size: 1em;
}

  @media screen and (max-width: 767px){
     p{
      font-size: 0.9em;
     }
  }

/* index.html */
section.accueil{
    position: relative;
}

section.accueil #copy{
    position: absolute;
    top: 15%;
    left: 10%;
    width: 45%;
}

section.accueil p.bouton{
    position: absolute;
    left: 10%;
    bottom: 10%;
}

#copy h1{
	font-family: 'fontawesomeregular', Arial, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 2em;
	color: white;
	letter-spacing: -0.05em;
	margin-bottom: 0em;
}

#copy h1 span{
	color: #0099FF;
}

#copy h2{
	font-size: 0.9em;
	font-family: 'robotolight', Arial, sans-serif;
	color: white;
}


@media screen and (max-width: 480px){
 section.accueil{
    position: relative;
}

section.accueil #copy{
   width: 90%;
   margin: auto;
   position: absolute;
   top: 135px;
   left: 5%;
}
 
section.accueil p.bouton{
   position: absolute;
    left: 5%;
    bottom: 0%;
    opacity: 0;
}

 #copy h1{
  color: #505050;
  font-size: 1.5em;
 }

 #copy h2{
  color: #505050;
 }
}

@media screen and (min-width: 480px) and (max-width: 768px) {
 section.accueil{
    position: relative;
}

section.accueil #copy{
   width: 40%;
   position: absolute;
   top: 5%;
   left: 8%;
}

section.accueil p.bouton{
    position: absolute;
    left: 8%;
    bottom: 10%;
    opacity: 0;
}

 #copy h1{
  color: #fff;
  font-size: 1.3em;
 }

 #copy h2{
    font-size: 0.9em;
    font-family: 'robotolight', Arial, sans-serif;
    color: white;
}
}

@media screen and (min-width: 1040px) and (max-width: 1279px) {
   
section.accueil{
    position: relative;
}

section.accueil #copy{
    position: absolute;
   top: 20%;
   left: 8%;
}

section.accueil p.bouton{
    position: absolute;
    left: 8%;
    bottom: 30%;
}   

   #copy h1{
   color: #fff;
   font-size: 1.5em;
   }

    #copy h2{
    font-size: 1em;
    font-family: 'robotolight', Arial, sans-serif;
    color: white;
    }
}

@media screen and (min-width: 1280px) {
 section.accueil{
    position: relative;
}

section.accueil #copy{
    position: absolute;
   top: 25%;
   left: 8%;
}

section.accueil p.bouton{
    position: absolute;
    left: 8%;
    bottom: 20%;
}   


   #copy h1{
   color: #fff;
   font-size: 2.5em;
   }

    #copy h2{
    font-size: 1em;
    font-family: 'robotolight', Arial, sans-serif;
    color: white;
    }
}

#contenu{
    padding-top: 85px;
    z-index: 1;
}

@media screen and (max-width: 480px){
 #contenu{
   padding-top: 61.9px;
 }  
}

@media screen and (min-width: 480px) and (max-width: 767px){
 #contenu{
   padding-top: 65px;
 }  
}

/* slideshow */
.slideshow{
    position: relative;
    height: auto; 
}

@media screen and (max-width: 480px){
.slideshow{
    position: relative;
    height: 280px;
    overflow: hidden;
}
}

@media screen and (min-width: 480px) and (max-width: 767px){
.slideshow{
    position: relative;
    height: 253px;
    max-height: 100%;
}
.slideContents{
    width: 100%;
    height: auto;
}

.play_stop{
  display: none;
}

.gradient2{
  position: absolute;
  bottom: 0;
}
}

@media screen and (min-width: 768px) and (max-width: 1023px){
  .slideshow{
    position: relative;
    height: 264px;
    max-height: 100%;
}
.slideContents{
    width: 100%;
    height: 264px;
    max-height: 100%;
}

.play_stop{
  position: absolute;
  top:220px;
}
.tooltip{
  position: absolute;
    top: 270px;
}
}

@media screen and (min-width: 1024px) and (max-width: 1280px){
  .slideshow{
    position: relative;
    height: 352px;
    max-height: 100%;
}
.slideContents{
    width: 100%;
    height: 352px;
    max-height: 100%;
}

.play_stop{
  position: absolute;
  top:312px;
}
.tooltip{
  position: absolute;
    top: 362px;
}
}

.slideshow input{
    display: none;
}

.brain{
    margin: 0 auto;
    position: relative;
}

.slideContents{
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    height: 450px;
}

.slideContents .slide_image {
    display: flex;
    -moz-display: flex;
    -ms-display: flex;
    position: absolute;
    top: 0;
    left: 0%;
    width: 100%;
    height: auto;
    z-index: 0;
}

@-moz-document url-prefix(){
    .slideContents .slide_image {
    display: flex;
    width: 400%;
    height: 100%;
}
}

@media all and (-ms-high-contrast:none) {
    *::-ms-backdrop, .slideContents .slide_image {
    display: flex;
    width: 400%;
    height: 100%;
}
}


.slideContents img { 
    width: 100%;
    height: 100%;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
    margin: 0;
    padding: 0;
}

.play_stop{
    position: absolute;
    width: 94px;
    height: 30px;
    z-index: 1;
    bottom: 15px;
    right: 15px;
}

.tooltip{
  position: absolute;
    width: 80px;
    height: 40px;
    bottom: -60px;
    display: inline-block;
    float: left;
    border-radius: 2px;
    background: #fff;
    z-index: -10;
    opacity: .8;
    -moz-animation: tool ease-in 6s;
    -moz-animation-fill-mode: forwards;
    -webkit-animation: tool ease-in 6s;
    -webkit-animation-fill-mode: forwards;
    animation: tool ease-in 6s;
    animation-fill-mode: forwards;
}

.tooltip > p{
    font-size: 1em;
    font-weight: bolder;
    color: #F00;
}
.tooltip:after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 10px solid #fff;
    border-bottom: 5px solid transparent;
    bottom: -50px;
}
.hideStop, .hidePlay, .hidePause{
    width: 30px;
    height: 30px;
    margin-top: -30px;
    border-radius: 15px;
    display: inline-block;
    float: left;
    z-index: 999;
    opacity: .3;
}
.hideStop{
    background: transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/24_Stop-48.png) 0 0 no-repeat;
    background-size: 100%;
    visibility: hidden;
}
.hidePlay{
    margin-left: 32px;
    background: transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/23_Play-48.png) 0 0 no-repeat;
    background-size: 100%;
    visibility: hidden;
}
.hidePause{
    margin-left: 64px;
    background: transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/25_Pause-48.png) 0 0 no-repeat;
    background-size: 100%;
}

.butPlay, .butStop, .butPause{
    width: 30px;
    height: 30px;
    border-radius: 15px;
    z-index: 3;
    margin-left: 2px;
    background: rgba(75,78,67,.6);
    display: inline-block;
    float: left;
}
.butPlay{
    background: transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/23_Play-48.png) 0 0 no-repeat;
    background-size: 100%;
    cursor: pointer;
}
.butStop{
    margin-left: 0;
    background: transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/24_Stop-48.png) 0 0 no-repeat;
    background-size: 100%;
    cursor: pointer;
}
.butPause{
    background: transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/25_Pause-48.png) 0 0 no-repeat;
    background-size: 100%;
    cursor: pointer;
}
.butPlay:hover{
    background: transparent url(http://s45.radikal.ru/i109/1310/98/4834faaaa287.png) 0 0 no-repeat;
    background-size: 100%;
}
.butStop:hover{
    background: transparent url(http://i021.radikal.ru/1310/2f/d8b2c38314ff.png) 0 0 no-repeat;
    background-size: 100%;
}
.butPause:hover{
    background: transparent url(http://s019.radikal.ru/i621/1310/ed/b9bfce7c1a1a.png) 0 0 no-repeat;
    background-size: 100%;
}

/*BOTTOM LINE*/
.aline{
    position: absolute;
    bottom: 0;
    visibility: hidden;
    width: 100%;
    height: 10px;
}
.line{
    position: absolute;
    height: 10px;
    background: #0099FF;
    opacity: .5;
    z-index: 3;
}
.aline > .bord{
    display: flex;
    -webkit-display: flex;
    width: 25%;
    height: 10px;
    border-top: 2px solid transparent;
}
.bord > span{
    width: 2px;
    height: 10px;
    display: flex;
    -webkit-display: flex;
    background-color: transparent;
}
.bord:last-child > span{
    width: 0;
    height: 0;
}

/*PAGGINATION*/
.but {
    position: relative;
    width: 100%;
    height: 20px;
    margin-top: -21px;
    float: left;
    text-align: center;
    z-index: 100;
}
.select_but{
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background: rgba(0,0,0,.8);
    z-index: 5;
}
.select_but > div{
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #fff;
    margin: 3px;
    display: none;
}
.select_but:hover{
    background: rgba(255,255,255,.6);
    cursor: pointer;
}

/*SLIDE MANAGE*/
.right, .left{
    position: absolute;
    top: 45%;
    margin: 0;
    display: inline-block;
    cursor: pointer;
    transition: background .3s; 
    height: 60px;
    width: 30px;
    z-index: 3;
}
.left{
    background-color: rgba(0,0,0,0.5);
    border-radius: 0px 60px 60px 0px;
    left: 0;
}
.right{
    background-color: rgba(0,0,0,0.5);
    border-radius: 60px 0px 0px 60px;
    right: 0;
}
.right:hover{
    background: rgba(255,255,255,.2);
    -webkit-animation: anim-right ease .3s;
    animation: anim-right ease .5s;
}

.left:hover{
    background: rgba(255,255,255,.2);
    -webkit-animation: anim-left ease .5s;
    animation: anim-left ease .5s;
}

i.ico_left{
  position: absolute;
  top: calc(50% - 5px);
  z-index: 999;
  font-size: 1.5em;
  opacity: 0.6;
  left: 5px;
}

i.ico_right{
  position: absolute;
  top: calc(50% - 5px);
  z-index: 999;
  font-size: 1.5em;
  opacity: 0.6;
  right: 5px;
}

i.ico_left:hover,
i.ico_right:hover {
    opacity: .9;
}

.int{
    display: none;
}

@media screen and (max-width: 767px){
    .right, .left{
      opacity: 0;
    }

    i.ico_left,
    i.ico_right {
      display: none;
    }

    .slideContents .slide_image {  
    -webkit-animation-name: tool, alls;/*定義したアニメーションの呼び出し*/  
    -webkit-animation-duration: 15s;/*アニメーションは『合計』で何秒か*/  
    -webkit-animation-iteration-count:infinite;/*『infinite』無制限に繰り替えす*/  
     }  
}

@media screen and (min-width: 767px) and (max-width: 1024px){
    .right, .left{
        position: absolute;
        top: 23%;
    }

    i.ico_left,
    i.ico_right {
        top: 27%;
    }

    .aline{
      position: absolute;
      top: 254px;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1040px){
    .aline{
      position: absolute;
      top: 342px;
    }
}

/*INPUT PLAY&STOP&PAUSE CHECKED*/
#play:checked ~ .brain .slideContents .play_stop{
    margin-top: 0;
}
#play:checked ~ .brain .slideContents .play_stop .hidePause{
    visibility: hidden;
}
#play:checked ~ .brain .slideContents .play_stop .butPlay{
    visibility: hidden;
}
#play:checked ~ .brain .slideContents .play_stop .hidePlay{
    visibility: visible;
}
#play:checked ~ .brain .slideContents .aline{
    visibility: visible;
}
#play:checked ~ .brain .slideContents .but .select_but > div{
    display: block;
}
#play:checked ~ .brain .slideContents .aline .line{
    -webkit-animation: linew 16s ease-out infinite;
    animation: linew 16s ease-out infinite;
}
#play:checked ~ .brain .slideContents .slide_image {
    -webkit-animation: alls 16s linear infinite;
    animation: alls 16s linear infinite;
}
#play:checked ~ .brain .slideContents .but .select1 > div{
    -webkit-animation: sel1 16s linear infinite;
    animation: sel1 16s linear infinite;
}
#play:checked ~ .brain .slideContents .but .select2 > div{
    -webkit-animation: sel2 16s linear infinite;
    animation: sel2 16s linear infinite;
}
#play:checked ~ .brain .slideContents .but .select3 > div{
    -webkit-animation: sel3 16s linear infinite;
    animation: sel3 16s linear infinite;
}
#play:checked ~ .brain .slideContents .but .select4 > div{
    -webkit-animation: sel4 16s linear infinite;
    animation: sel4 16s linear infinite;
}

#stop:checked ~ .brain .slideContents .play_stop .butPause{
    visibility: hidden;
}
#stop:checked ~ .brain .slideContents .play_stop .butStop{
    visibility: hidden;
}
#stop:checked ~ .brain .slideContents .play_stop .hideStop{
    visibility: visible;
}
/*#stop:checked ~ .brain .cont .aline .line{
    width: 0px;
    -webkit-animation:none;
    animation:none;
}*/
#pause:checked ~ .brain .slideContents .play_stop .butPause{
    visibility: hidden;
}
#pause:checked ~ .brain .slideContents .play_stop .select_but > div{
    display: block;
}
#pause:checked ~ .brain .slideContents .aline{
    visibility: visible;
}
#pause:checked ~ .brain .slideContents .play_stop{
    margin-top: 0;
}
#pause:checked ~ .brain .slideContents .line{
    -webkit-animation: linew 16s linear infinite;
    -moz-animation: linew 16s linear infinite;
    animation: linew 16s linear infinite;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}
#pause:checked ~ .brain .slideContents .slide_image {
    -webkit-animation: alls 16s linear infinite;
    -moz-animation: alls 16s linear infinite;
    animation: alls 16s linear infinite;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}
#pause:checked ~ .brain .slideContents .but .select1 > div{
    -webkit-animation: sel1 16s linear infinite;
    -moz-animation: sel1 16s linear infinite;
    animation: sel1 16s linear infinite;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}
#pause:checked ~ .brain .slideContents .but .select2 > div{
    -webkit-animation: sel2 16s linear infinite;
    -moz-animation: sel2 16s linear infinite;
    animation: sel2 16s linear infinite;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}
#pause:checked ~ .brain .slideContents .but .select3 > div{
    -webkit-animation: sel3 16s linear infinite;
    -moz-animation: sel3 16s linear infinite;
    animation: sel3 16s linear infinite;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}
#pause:checked ~ .brain .slideContents .but .select4 > div{
    -webkit-animation: sel4 16s linear infinite;
    -moz-animation: sel4 16s linear infinite;
    animation: sel4 16s linear infinite;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}

/*INPUT MANAGE&PAGINATION CHECKED*/
#slide1:checked ~ .brain .slideContents .but .select1 > div{display: block;}
#slide1:checked ~ .brain .manage_one{display: inline-block;}

#slide2:checked ~ .brain .slideContents .slide_image{ margin-left:-100%;}
#slide2:checked ~ .brain .manage_two{display: inline-block;}
#slide2:checked ~ .brain .slideContents .but .select2 > div{display: block;}

#slide3:checked ~ .brain .slideContents .slide_image{ margin-left:-200%;}
#slide3:checked ~ .brain .manage_tre{display: inline-block;}
#slide3:checked ~ .brain .slideContents .but .select3 > div{display: block;}

#slide4:checked ~ .brain .slideContents .slide_image{ margin-left:-300%;}
#slide4:checked ~ .brain .manage_for{display: inline-block;}
#slide4:checked ~ .brain .slideContents .but .select4 > div{display: block;}

/*ANIMATION*/
    /*ANIMATION TOOLTIP*/
@-webkit-keyframes tool{
    0%{opacity: 0; margin-left: -400%;}
    15%{opacity: .8; margin-left: -94px;}
    17%{margin-left: -126px;}
    19%{margin-left: -94px;}
    21%{margin-left: -104px;}
    23%{margin-left: -94px;}
    95%{opacity: .8;}
    100%{opacity: .0; margin-left: -94px; visibility: hidden;}
}
@keyframes tool{
    0%{opacity: 0; margin-left: -400%;}
    15%{opacity: .8; margin-left: -94px;}
    17%{margin-left: -126px;}
    19%{margin-left: -94px;}
    21%{margin-left: -104px;}
    23%{margin-left: -94px;}
    95%{opacity: .8;}
    100%{opacity: .0; margin-left: -94px; visibility: hidden;}
}
    /*ANIMATION SLIDE&LINE*/
@-webkit-keyframes linew{
    0%{width: 0px;}
    25%{width: 25%;}
    50%{width: 50%;}
    75%{width: 75%;}
    100%{width: 100%;}
}
@-webkit-keyframes alls{
    0%{margin-left: 0px;}
    23%{margin-left: 0px;-webkit-filter: blur(0px);}
    24%{-webkit-filter: blur(10px);}
    25%{margin-left:-100%;-webkit-filter: blur(0px); }
    48%{margin-left: -100%;-webkit-filter: blur(0px);}
    49%{-webkit-filter: blur(10px);}
    50%{margin-left: -200%;-webkit-filter: blur(0px);}
    73%{margin-left: -200%;-webkit-filter: blur(0px);}
    74%{-webkit-filter: blur(10px);}
    75%{margin-left: -300%;-webkit-filter: blur(0px);}
    98%{margin-left: -300%;-webkit-filter: blur(0px);}
    99%{-webkit-filter: blur(10px);}
    100%{margin-left: 0px;-webkit-filter: blur(0px);}
}

@keyframes linew{
    0%{width: 0px;}
    25%{width: 25%;}
    50%{width: 50%;}
    75%{width: 75%;}
    100%{width: 100%;}
}
@keyframes alls{
    0%{margin-left: 0px;}
    23%{margin-left: 0px;}
    25%{margin-left: -100%;}
    48%{margin-left: -100%;}
    50%{margin-left: -200%;}
    73%{margin-left: -200%;}
    75%{margin-left: -300%;}
    98%{margin-left: -300%;}
    100%{margin-left: 0px;}
}

/*TRANSITION*/
.slide_image, .play_stop{
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.int{
    -webkit-transition: background-color 300ms ease-in-out;
    -moz-transition: background-color 300ms ease-in-out;
    transition: background-color 300ms ease-in-out;
}


button{
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}

button.bouton, 
section.accueil div p.bouton,
#blog p.bouton{
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
	background-color: #0099FF;
    color: white;
    font-size: 0.9em;
    font-family: 'robotomedium', Arial, sans-serif;
    letter-spacing: -0.02em;
	border-radius: 3px;
    box-shadow: 0 0px 3px #909090;
    margin-top: 0.8em;
}

button.bouton:hover, 
section.accueil div p.bouton:hover,
#blog p.bouton:hover{
    box-shadow: 0px 2.5px 0 #0066FF;
    background-color: rgba(0,153,255,0.8);
    text-shadow: 0px 1px 0 #0066FF;
}

section.accueil p.bouton a{
    color: #fff;
}



/* les pages de service et portofolio */ 
#services,#notre_projet,#contact,#blog{
    position: relative;
    padding-bottom: 4em;
}

@media screen and (max-width: 480px){
    #services .detail,.wrap, #blog .detail {
     display: flex;
     flex-direction: column;
     justify-content: center;
     height: auto;
 }
}


.gradient{
    background: -moz-linear-gradient(bottom,#FFF 50%, #E0E0E0); 
    background: -webkit-linear-gradient(bottom,#FFF 50%, #E0E0E0); 
    background: linear-gradient(to top,#FFF 50%, #E0E0E0); 
    height: 15px;
}

.gradient2{
    background: -moz-linear-gradient(bottom,#E0E0E0 10%, #FFF); 
    background: -webkit-linear-gradient(bottom,#E0E0E0 10%, #FFF); 
    background: linear-gradient(to top,#E0E0E0 10%, #FFF); 
    height: 50px;
}

@media screen and (max-width: 600px){
 .gradient2{
  display: none;
 }
}

.crap2{
    background: url('images/cta2-img.png'), url('images/cta2-bg.jpg') repeat-x;
    background-size: 30%;
    height: 60px;
    width: 100%;
    border-bottom: 0.5px solid #D8D8D8;
    padding-bottom: 0;
    opacity: 0.8;
}

.page_title{
    text-align: center;
    padding: 5em 0 3em 0;
}

.page_title h1{
    font-family: 'robotoblack', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 2.5em;
    font-stretch: semi-condensed;
    padding-bottom: 0;
}

.page_title p:nth-child(3){
    font-family: 'robotolight', sans-serif;
    font-size: 1.1em;
    margin-top: 0.5em;
    line-height: 1.8;
}

@media screen and (max-width: 480px){
 .page_title{
  padding: 2em 0 3em 0;
 }

 .page_title h1{
    font-size: 2em;
}

.page_title p:nth-child(3){
    font-size: 1em;
    margin-top: 0.5em;
    line-height: 1.5;
}
}

@media screen and (min-width: 480px) and (max-width: 767px){
 .page_title{
  padding: 2em 0 3em 0;
 }

 .page_title h1{
    font-size: 2em;
}

.page_title p:nth-child(3){
    font-size: 0.9em;
    margin-top: 0.5em;
    line-height: 1.5;
}
}

.detail{
    width: 1024px;
    max-width: 100%;
    margin: auto;
}

@media screen and (max-width: 1024px){
 .detail, .page_title{
  width: 90%;
  margin: auto;
 }
}

.ornament{
    width: 100%;
    text-align: center;
    margin: 10px 0 -15px 0;
}

.ornament p{
    position: relative;
    display: inline-block;
    padding: 24px 30px 0px 30px;
}
.ornament p:before, .ornament p:after{
    content:"";
    width:75%;
    height:4px;
    border-top:0.3px solid #D8D8D8;
    position:absolute;
    top:0;
}
.ornament p:before{left:-24px;}
.ornament p:after{right:-24px;}
.ornament p span{
    width: 12px;
    height: 12px;
    background-color: #0099FF;
    border-radius: 50%;
    position: absolute;
    top: -6px;
    left: 50%;
    margin-left: -6px;
}

#services .detail{
    display: flex;
}

.gauche img{
    width: 450px;
}

@media screen and (max-width: 767px){
  .gauche img{
  display: none;
 }
}

 @media screen and (min-width: 768px) and (max-width: 900px){
  .gauche img{
  width: 300px;
 }
 }  

.droite ul:first-child{
    padding-top: 70px;
}

.droite ul:not(:first-child){
    margin-top: 3em;
}

.droite ul{
    padding-left: 140px;
}

.droite ul li{
    list-style: none;
    font-family: robotobold, Arial, sans-serif;
    font-size: 1.2em;
    text-transform: uppercase;
    position: relative;
}

.droite ul li.li_01:before,
.droite ul li.li_02:before,
.droite ul li.li_03:before{
    font-weight: 900;
    font-size: 2em;
    color: #0099FF;
    position: absolute;
    left: -105px;
    width: 2.2em;
    height: 2.2em;
    border-radius: 50%;
    border: 1px solid #D8D8D8;
    text-align: center;
    vertical-align: middle;
    line-height: 2.2em;
}

.droite ul li.li_01:before{
    font-family: "Font Awesome 5 Free";
    content: '\f201';
}

.droite ul li.li_02:before{
    font-family: "Font Awesome 5 Free";
    content: '\f1b3';
}

.droite ul li.li_03:before{
    font-family: "Font Awesome 5 Free";
    content: '\f200';
}

.droite ul span{
    position: absolute;
    left: -30px;
    top: 1.7em;
    width: 13px;
    height: 13px;
    background-color: #0099FF;
    border-radius: 50%;
    border: 3px solid white;
}

.droite ul p{
    font-family: 'robotolight', Arial, sans-serif;
    line-height: 1.5;
    font-size: 0.9em;
    text-transform: none;
}

@media screen and (max-width: 900px){
    .droite ul p{
    line-height: 1.5;
    font-size: 0.8em;
}
}

.droite ul p strong{
    font-family: robotoblack, Arial, sans-serif;
}

@media screen and (max-width: 480px){
  
.droite ul{
  padding-top: 90px;
  padding-left: 0;
  }

.droite ul:first-child{
    margin-top: 3em;
}

.droite ul:not(:first-child){
    margin-top: 5em;
}

 .droite ul li{
  text-align: center;
 }

.droite ul li.li_01:before,
.droite ul li.li_02:before,
.droite ul li.li_03:before{
  font-size: 3em;
  color: #0099FF;
  position: absolute;
  left: 28%;
  top: -140px;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  border: 1.5px solid #D8D8D8;
  text-align: center;
  vertical-align: middle;
  line-height: 2.2em;
}

.droite ul span{
  position: absolute;
  left: 68%;
  top: -90px;
  width: 20px;
  height: 20px;
  background-color: #0099FF;
  border-radius: 50%;
  border: 3px solid white;
}
}

/* portofolio */

#notre_projet{
    background: #F0F0F0;
}

#notre_projet .page_title{
    margin-bottom: 0;
}

.tab{
    width: 1024px;
    max-width: 100%;
    margin: auto;
    text-align: center;
}

label{
    display: flex;
    justify-content: center;
    align-items: center;
}

.tab_item{
    display: inline-block;
    width: 100px;
    height: 25px;
    background-color: #D8D8D8;
    font-family: 'robotomedium', Arial, sans-serif;
    text-align: center;
    font-size: 0.9em;
    padding: 8px 15px 3px 15px;
    transition: all 0.3s ease;
}

@media screen and (max-width: 480px){
    label{
    display: flex;
    flex-direction: column;
    }

    .tab_item{
      width: 70%;
  }

  .tab input:checked + .tab_item:after{
    display: none;
}
}

@media screen and (min-width: 480px) and (max-width: 767px){
    label{
    display: flex;
    flex-wrap: wrap;
    }

    .tab_item{
      width: 15%;
  }

}



.tab_item:hover{
    opacity: 0.75;
}

label[for="all"]{
    border-radius: 5px 0 0 5px;
}

label[for="portfolio"]{
    border-radius: 0 5px 5px 0;
}

input[name="tab_item"] {
    display: none;
}

.tab .tab_content{
    display: none;
    overflow: hidden;
    padding-top: 40px;
}

#all:checked ~ #all_content,
#creative:checked ~ #creative_content,
#corporate:checked ~ #corporate_content,
#portfolio:checked ~ #portfolio_content{
    display: block;
}

.tab input:checked + .tab_item{
    background-color: #0099FF;
    box-shadow: 0px 2px 2px #0066FF;
    color: white;
    position: relative;
}

.tab input:checked + .tab_item:after{
    content: "";
    position: absolute;
    top: 100%;
    left: 43%;
    border: 9px solid transparent;
    border-top: 9px solid #0066FF;
}

.wrap{
    display: flex;
    flex-wrap: wrap;
    height: auto;
    justify-content: center;
}

#creative:checked ~ #creative_content .wrap,
#corporate:checked ~ #corporate_content .wrap,
#portfolio:checked ~ #portfolio_content .wrap{
    margin-right: auto;
}

figure{
    margin: 0 0 0em 0;
}

.wrap figure img{
    width: 240px;
}

.wrap figure{
    position: relative;
    overflow: hidden;
    margin: 0 3px 0 3px;
}

.wrap figure .projet{
    background-color: rgba(0,0,0,0.4);
    width: 100%;
    height: 60px;
    position: absolute;
    bottom: -60px;
    transition: all 1s ease;
}

.wrap figure:hover .projet{
    bottom: 5px;
}

@media screen and (max-width: 480px){
figure{
  margin: 0 0 0em 0;
}

.wrap figure img{
  width: 100% !important;
}
}

figcaption{
    font-size: 1.1em;
    font-family: 'robotomedium', Arial, sans-serif;
    color: white;
    padding-left: 15px;
    position: absolute;
    top: 15px;
    line-height: 1em;
    text-align: left;
}

figcaption span{
    font-size: 0.8em;
    font-family: 'robotolight', Arial, sans-serif;
}

.projet .yeux{
    font-family: "Font Awesome 5 Free";
    font-size: 0.8em;
    color: white;
    position: absolute;
    right: 8px;
    bottom: -41px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    background-color: #0099FF;
    border: 2.5px solid white;
    text-align: center;
    vertical-align: middle;
    line-height: 3em;
}

figure .yeux:hover{
    background-color: rgba(0,153,255,0.6);
}

figure .yeux a i{
    color: #FFFFFF;
    transition-duration: 0.3s;  /*変化に掛かる時間*/
}

figure .yeux a i:hover{
    transform: rotate(360deg) scale(1.3);
    transition-duration: 0.3s;
}

figure:hover .yeux{
    bottom: 41px;
}

/* contact */

#contact{
    margin: 0;
    padding: 0;
}

#carte{
     position: relative;
     height: auto;
}

.google_map{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 48%;
    overflow: hidden;
    background: rgba(0,153,255,1);
}

.google_map iframe{
    opacity: 0.8;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 600px){
    iframe{
  width: 100%; 
  height: 100%;
}
}

#carte .formulaire{
     background-color: rgba(255,255,255,0.9);
     height: 80%;
     width: 300px;
     max-width: 100%;
     position: absolute;
     right: 150px;
     top: 50px;
     box-shadow: 0 3px 3px #D8D8D8;
     padding-left: 20px;
}

@media screen and (min-width: 600px) and (max-width: 1024px){
    #carte .formulaire{
     width: 300px;
     height: 85%;
     max-width: 100%;
     position: absolute;
     right: 50px;
     top: 30px;
     box-shadow: 0 3px 3px #D8D8D8;
     padding-left: 20px;
     }
}


#carte h1{
    font-size: 1.5em;
}

#carte span, footer span{
    font-family: 'robotomedium', Arial, sans-serif;
}

#carte address{
    font-size: 0.9em;
    font-style: normal;
    margin-bottom: 1em;
    font-family: 'robotolight', Arial, sans-serif;
}

@media screen and (max-width: 600px){
#carte{
  height: auto;
  position: static;
}

#carte .formulaire{
   background: none;
   height: auto;
   width: 90%;
   box-shadow: none;
   margin: auto;
   position: static;
   padding-bottom: 2em;
}
}

form div+div{
    margin-top: 0.7em;
}

input, textarea{
    display: inline-block;
    width: 260px;
    padding: 5px 0px 5px 7px;
    border-radius: 4px;
    border: 0.8px solid #D8D8D8;
}

input::placeholder, textarea::placeholder{
    font-family: 'robotomedium', Arial, sans-serif;
    font-size: 1.1em;
    color: #A8A8A8;
}

textarea{
    height: 13em;
}

@media screen and (max-width: 600px){
  input, textarea{
  width: 90%;
}

 textarea{
  height: 8em;
}
}

@media screen and (min-width: 600px) and (max-width: 1024px){

  textarea{
  width: 90%;
  height: 2em;
  overflow: auto;
}

div.formulaire form{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
}

button .bouton{
     font-size: 3em;
}

/* blog */
#blog{
   margin-top: 0;
   background-color: #F0F0F0;
   display: none;
}

#blog .page_title p{
    font-size: 1.5em;
    font-family: 'robotomedium', Arial, sans-serif;
}

#blog .detail{
    display: flex;
    justify-content: space-between;
    margin-top: 0;
}

#blog .detail article{
    background: #FFF;
    width: 32%;
    height: 290px;
    box-shadow: 0 3px 3px #D8D8D8;
    position: relative;
}

@media screen and (max-width: 480px){
#blog .detail article:not(:last-child){
  margin-bottom: 1em;
}

#blog .detail article{
  width: 100%;
  margin: auto;
}
}

@media screen and (min-width: 480px) and (max-width: 767px){
#blog .detail article:not(:last-child){
  margin-bottom: 1em;
}

#blog .detail article{
  width: 45%;
  margin: auto;
}

#blog .detail {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     height: auto;
     justify-content: flex-start;
 }
}

@media screen and (min-width: 768px) and (max-width: 1024px){

div .blog1,.blog2,.blog3{
    height: 100px;
}

}

div .blog1,.blog2,.blog3{
    position: absolute;
    top: 15px;
    left: 7%;
    width: 86%;
    height: 150px;
    background-color: black;
}

div .blog1:before{
    content: "16 NOV";
    position: absolute;
    top: 10px;
    left: -10px;
    height: 20px;
    background-color: #0099FF;
    padding: 2px 5px;
    color: white;
}

div .blog2:before{
    content: "9 NOV";
    position: absolute;
    top: 10px;
    left: -10px;
    height: 20px;
    background-color: #0099FF;
    padding: 2px 5px;
    color: white;
}

div .blog3:before{
    content: "2 NOV";
    position: absolute;
    top: 10px;
    left: -10px;
    height: 20px;
    background-color: #0099FF;
    padding: 2px 5px;
    color: white;
}

div .blog1{
    background: url(images/blog_01.jpg) no-repeat;
    background-size: 105%;
}

div .blog2{
    background: url(images/blog_02.jpg) no-repeat;
    background-size: 105%;
}

div .blog3{
    background: url(images/blog_03.jpg) no-repeat;
    background-size: 105%;
}

#blog .detail article:hover{
    box-shadow: 0 0px 10px #B8B8B8;
}

article h1{
    font-size: 1.2em;
    position: absolute;
    top: 160px;
    padding-left: 21px;
}

article p{
    font-size: 0.8em;
    position: absolute;
    bottom: 3px;
    padding-left: 21px;
}

#blog div.plus_article{
    text-align: center;
    padding: 2em 0 0em 0;
}

#blog p.bouton a{
    color:#FFFFFF;
    font-size: 1.3em;
    font-family: 'robotolight', Arial, sans-serif;
}

/* footer */

footer{
    height: 200px;
    width: 100%;
    background: url('images/cta2-img.png') repeat-x bottom;
    background-color: #0099FF;
    background-size: 50%;
    color: white;
}

footer .footer{
    width: 1024px;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: auto;
    padding-top: 20px;
    position: relative;
}

footer .gauche{
    display: flex;
}

footer .footer-address{
    margin-left: 50px;
}

footer .footer-link{
    left: -50px;
}

footer p{
	font-size: 1.2em;
    margin-bottom: 0.2em;
}

footer .footer-address ul{
    display: flex;
    margin: 0 0 0 -40px;
}

footer ul li{
    list-style: none;
    margin-right: 0.3em;
}

footer ul li a{
    color: #fff;
}

footer i{
    font-size: 1.5em;
}

footer ul li a:hover{
    color: yellow;
}


div.footer div.footer-link{
    position: relative;
}

footer address{
    font-size: 1.2em;
    font-style: normal;
}

.footer-link p:first-child{
    font-family: 'robotolight', Arial, sans-serif;
    font-size: 0.9em;
    margin-bottom: 0;
    border: none;
}

.footer-link p{
    font-family: 'robotobold', Arial, sans-serif;
    font-size: 1.6em;
    margin-top: 0.1em;
    transition: border-bottom 3s ease-in;
}

.footer-link p:nth-child(2):after{
    content: "\f303";
    font-family: "Font Awesome 5 Free";
    font-size: 1.8em;
    position: absolute;
    right: -1.1em;
    top: 14px;
    font-weight: 900;
}

.footer-link p:nth-child(2) a{
    color: white;
}

.footer-link a:after{
   background: #fff;
   content: "";
   display: block;
   height: 2px;
   position: absolute;
   bottom: 2px;
   transition: 2s ease;
   width: 0;
}

.footer-link a:hover:after{
    width: 100%;
    right: 0;
    background: yellow;
}

.footer-link p:nth-child(2) a:hover{
    color: yellow;
}

@media screen and (max-width: 767px){
   footer{
  height: auto;
  background: none;
  background-color: #0099FF;
  align-items: center;
}

footer .footer{
  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: center;
}

footer .gauche{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

footer .footer-address{
  margin:0 0 2em 0px;
  position: relative;
}

/* */
footer .footer-link{
  left: 0px;
}

footer address, footer p{
  font-size: 1em;
  text-align: center;
}

footer address a{
  color: #fff;
}

footer .footer-address ul{
    display: flex;
    position: absolute;
    left: 35%;
    margin: 0;
    padding: 0;
}

footer i{
  font-size: 1.4em;
  color: #fff;
}

footer i:not(:last-child){
  margin-right: 0.3em;
} 
}

@media screen and (min-width: 767px) and (max-width: 1024px){
footer{
    height: 250px;
    max-width: 100%;
}

footer .footer{
    width: 90%;
    margin: auto;
}

footer .gauche{
  display: static;
  flex-direction: column;
}

footer .footer-address{
    margin: 0px;
}

footer p{
    font-size: 1em;
    margin-bottom: 0em;
}

footer div address{
    margin-bottom: 0;
}



}
/*
.crap{
    background-size: 60%;
    height: 120px;
    width: 100%;
    border-bottom: 0.5px solid #D8D8D8;
    padding-bottom: 0;
}
*/