@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css?family=Tajawal');

@font-face {
    font-family: 'alcubierreregular';
    src: url('alcubierre-webfont.woff2') format('woff2'),
         url('alcubierre-webfont.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

html,
body {
  height: auto;
  /* The html and body elements cannot have any padding or margin. */
  -webkit-font-smoothing: antialiased;
  font-family: 'Montserrat', sans-serif;
    background-image: url('../img/background.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #282236;
    font-weight: 100;
    font-size: 18px;
    
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 0px;
}

/* Set the fixed height of the footer here */
#footer {
  background-color: #17151c;
  margin-top:50px;
  padding-top:20px;
  padding-bottom:20px;
}


/* Custom page CSS
-------------------------------------------------- */
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.masthead{
    margin: 0 auto;
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;
    display: block;
}

a:active{
    text-shadow: 0 0 0.1em #ffffff, 0 0 0.1em #ffffff,
    0 0 0.1em #ffffff  ;
}

.masthead .logo{
    margin: 0 auto;
}


.langue li{
    display: inline-block;
    float: right;
    letter-spacing: 3px;
    font-size: 12px;
    
}

.langue{
    margin: 1% 1%;
}

 .langue li a{
        font-size: 12px;
        z-index: 10;
        text-decoration: none;
        color: #ffffff;
    }

.langue li a:hover{
    font-weight: 800;
}

ul li a{
    text-decoration: none;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */

#wrap > .container {
  padding: 60px 15px 0;
}
.container .credit {
  margin: 20px 0;
}

#footer a {
  color:#efefef;
    font-weight: 100;
}


header .dropdown-menu {
  top:74px;
  background: #ffcc33;
  border-width:0;
}

h1 {
  font-size:50px;
  font-family: 'Tajawal', sans-serif;
  letter-spacing: 10px;
  font-weight: 900;
  color: #ffffff;
}

.news{
    text-align: center;
    width: 100%;
    padding: 30px 0 0 0;
}



.news .workshop img{
    float: left;
    margin: 1px 0 0 0;
    width: 30%;
}

h5{
    text-transform: uppercase;
    font-size: 35px;
    font-family: 'Tajawal', sans-serif;
    letter-spacing: 3px;
    border-bottom: 1px solid #ffffff;
    padding: 0 0 10px 0;
    font-weight: 200;
}

.news p{
    text-align: left;
    font-weight: 100;
    display: inline-block;
    width:31%;
    margin: 0 15px 0 15px;
    letter-spacing: 1.2px;
}

.timeline{
    display: block;
    background-color: #ffffff;
    height: 1px;
    width: 100%;
}

#nav .timelineimg{
    display: inline-block;
    font-size: 2em;
    top: -16px;
    margin: 0 0 0 35%;
} 

#nav {
  width: 100%;
  position:static;
  top:-32px;
  padding: 15px 0 10px 0;
}



#nav.affix {
   position: fixed;
   top: 0;
   z-index:10;
    background-color: #282236;
   -webkit-transition: all .6s ease-in-out;
}



#footer > .container {
  
}

@media (min-width: 767px) {
  .navbar-nav.nav-justified > li{
      float:none;
  }
}
  
.navbar-nav li a{
padding: 0px 15px 0px 15px;
 font-weight: 100;  
    
} 
  
/* customize nav style */
.navbar-custom {
	font-weight:200;
    letter-spacing: 2px;
    border-width:0;
    font-size: 1.2em;
    font-family: 'Tajawal', sans-serif;
}
.navbar-custom  .navbar-nav>li>a {
	color: #fff;
}
.navbar-custom  .dropdown-menu li>a:hover {
	color: #eee;
}
.navbar-custom  .navbar-nav li>a:hover, .navbar-nav li .open, .navbar-custom .navbar-nav .active a  {

}
.navbar-custom .navbar-nav>.dropdown>a .caret {

}

.navbar-collapse.in { /*3.0.2 bug workaround*/
    overflow-y: visible;
}

.navbar-toggle {
	outline:0;
}

.navbar-collapse ul li{
    vertical-align: top;
}

.col div{
    display: inline-block;  
    vertical-align: top;
    margin: 0 auto;
    color: #ffffff;
    font-weight: 100;
}

.col1{
    width: 30%;
}

.col2{
    width: 69%;
}

h2{
    color: #e53b8e;
    font-size: 4em;
    font-weight: 100;
    letter-spacing: 0.2em;
    font-family: 'Tajawal', sans-serif;
    padding: 0;
    margin: 0;
}

h3{
    font-family: 'Tajawal', sans-serif;
    letter-spacing: 1.3px;
    font-size: 1.6em;
    font-weight: 100;
}

.col .col2 p{
    margin: 20px 0;
    letter-spacing: 1.5px;
    font-weight: 100;
}

.col1 img{
    padding: 0 0 25px 0;
    width: 90%;
}

.col2 .epigraph{
    color: #e53b8e;
    font-size: 18px;
    letter-spacing: 0.1em;
    width: 85%;
    text-align: center;
    border-top: 1px solid #e53b8e;
    border-bottom: 1px solid #e53b8e;
    padding: 5px 0 5px 0;
    display: block; 
    margin: 0 auto;
}

div .presentation{
    border-left: 3px solid #ffffff;
    padding: 0 0 0px 10px;
    margin: 0 0 20px 0; 
}


.underline{
    border-bottom: 4px solid #ffffff;
    width: 15%;
    margin: 0 auto;
    display: block;
}

.device{
    color: #ffffff;
    border-bottom: 1px solid #e53b8e;
    text-align: center;
    font-weight: 100;
}

.infographic {
    margin: 0 auto;   
    background-image: url(../img/road2.png);
    background-repeat: no-repeat;
    background-position: center top;
}

h4{
    font-family: 'Tajawal', sans-serif;
    font-size: 45px;
    letter-spacing: 0.1em;
    font-weight: 100;
    padding: 0;
    margin: 0;
}

.device .list-dispo li{
    width: 15%;
    display: inline-block;
    vertical-align: top;
    margin: 1% 1% 5% 1%;
    font-weight: 700;
    padding: 1%;
    list-style: none;
    font-size: 20px;
}

.device .list-dispo{
    width: 100%;
    padding: 0;
}


.device .road-img{
      width: 100%;
}

.col-info .inline{
    display: inline-block;
    vertical-align: top;
}

.texte{
    width: 60%;
}

.col-info .inline2 .col-left .none{
        display: none;
    }

.col-info .inline2 .none2{
        display: none;
    }

.col-info .inline2{
    display: inline-block; 
    width: 45%;
    margin: 0 2%;
    vertical-align: top;
}

.col-info .point{
    margin: 10px 5px 0 5px;
}

.col-info .reportage{
    margin: 0 0 0 40%;
}

.col-info .road{
    display: none;
}

.col-info{
    margin: 0 auto;
    width: 100%;
}

.col-info1 div{
    vertical-align: top;
}

.col-info2 div{
    vertical-align: middle;
}

.col-left{
    text-align: right;
    font-weight: 100;
    margin: 25% 0 0 0;
    font-weight: 100;
}

.col-right{
    margin: 30% 0 0 0;
    text-align: left;
    font-weight: 100;
}

.circle{
    width: 25px;
    height: 25px;
    border-radius: 20px;
    border: 12px double #ffffff;
    display: inline-block;
}

.device .article{
    text-align: left;
}

.global{
    text-align: center;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: 0.2em;
    width: 30%;
    margin: 0 auto;
    border: 3px solid #e11864;
    background-color: #282236;
}

.edition .col-edition{
    display: inline-block;
    width: 45%;
    padding: 0 5%;
    margin: 0 auto;
    text-align: center;
    vertical-align: top;
}

.edition h3{
   text-transform: uppercase;
   font-size: 40px;
   font-weight: 100;
}

.edition{
    width: 100%;
    margin: 0 auto;
}

.col-edition table{
    width: 100%;
    margin: 0 auto;
}

.col-edition table tr td{
    padding: 15px;
    letter-spacing: 2px;
    border: 1px solid #e53b8e;
    background-color: rgba(0, 0, 0, 0.3);
    font-weight: 100;
}

.col-edition table tr .td-none{
    border: none;
    background-color: rgba(0, 0, 0, 0);
}

.col-edition table tr .td-rose{
    background-color: rgba(229, 59, 142, 0.8);
}
.col-edition table tr .pink{
    color: #e53b8e;
    font-weight: 900;
}

.divider {
	height:50px;
}

.panel {
	border-width:0;
}

.row .video{
    display: inline-block;
    width: 30%;
   margin: 1%;
}

.row .video iframe{
    width: 100%;
    height: 300px;;
}

.row .video p{
        color: #ffffff;
    }

.row{
    text-align: center;
    background-color: #e53b8e;
}

.row h2{
    color: #ffffff;
}

.token{
    width: 100%;
    margin: 3% 1% 3% 1%;
    
}

.col-token{
    width: 20%;
    display: inline-block;
    margin: 0 2%;
    vertical-align: top;
}

.tittle-token{
    color: #e53b8e;
    font-weight: 500;
    font-size: 20px;
    
}

.subtitle{
    color: #efedf4;
    font-style: italic;
    font-size: 16px;
}

.token-text{
    font-size: 15px;
}

.sstitre{
    font-size: 22px;
    font-weight: 100;
}

.partner{
    color: #ffffff;
    margin: 0 auto;
    text-align: center;
    padding: 0 0 4% 0;
}


.container-car img{
    float: left;
    margin: 5px 10px 0 0;
}


.partner p{
    color: #ffffff;
    margin: 0 auto;
}


.text-price{
    width: 25%;
    padding: 10px 0;
    font-size: 16px;
    letter-spacing: 1.1px;
}


.price{
     font-size: 3em;
    font-family: 'Tajawal', sans-serif;
    font-weight: 800;
    margin: 0;
    line-height: 1;
}

.price-partner{
    border: 1px solid #e53b8e;
    width: 25%;
    margin: 0 auto;
    padding: 10px;
}

.edit{
    font-size: 25px;
    letter-spacing: 5px;
}

.container-car .car{ 
    padding: 30px 0 0 0;
    width: 50%;
    margin: 0 auto;
}

.container-car{
    color: #ffffff;
    width: 100%;
    margin: 0 auto;
}

.CTA{
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 2em;
    width: 25%;
    margin: 0 auto;
    background-color: #e53b8e;
    font-family: 'Tajawal', sans-serif;
    padding: 1%;
}

.partner .CTA a{
    color: #ffffff;
    font-weight: 600;
}

.row-contact{
    margin: 0 auto;
    text-align: center;
    background-color: #ffffff;
    padding: 2% 0;
}

.col-contact{
    width: 30%;
    display: inline-block;
    font-size: 1.5em;
    margin: 2% 0;
}

.col-contact a{
    display: block;
    font-size: 16px;
    color: #282236;
}

.scroll-top{
    color: #000000;
}

.post{
    font-size: 18px;
    font-weight: 600;
}

.event-footer{
    width: 30%;
    float: right;
}

#footer .container .text-muted,.img-muted{
    vertical-align: middle;
    display: inline-block;
    width: 49%;
}

.table-mobile{
        display: none;
    }

#map-canvas {
  	width: 100%; 
  	height: 300px;
	margin: 0;
	padding: 15px;
}

.scroll-top {
   position:fixed;
   bottom:0;
   right:6%;
   z-index:100;
   background: #f2f3f2;
   font-size:24px;
   border-top-left-radius:3px;
   border-top-right-radius:3px;
}
.scroll-top a:link,.scroll-top a:visited {
  color:#222;
} 
 

section {
  color: #ffffff;
  min-height: 800px;
  height: auto !important;
  padding-top:100px;
  margin: 0 auto;
  text-align: center;
}

.bg-1 {
	background: url('../img/bg-1.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}

.bg-2 {
	background: url('../example/bg_suburb.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}

.bg-3 {
	background: url('../img/bg-2.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}

.bg-4 {
	padding-top:30px;
    background-color:#e6e6e6;
}

.panel .img-responsive {
	min-height:270px;
    max-height:270px;
}

/*------------------------------------------
  Responsive Grid Media Queries - 1280, 1024, 768, 480
   1280-1024   - desktop (default grid)
   1024-768    - tablet landscape
   768-480     - tablet 
   480-less    - phone landscape & smaller
--------------------------------------------*/
@media all and (min-width: 1024px) and (max-width: 1280px) { 
 
    .workshop img{
        width: 30%;
    }
    
    .col-info .inline2{
        width: 40%;
        margin: 0;
    }
    
    .timelineimg{
    display: inline-block;
    font-size: 3em;
    position: absolute;
    top: -5px;
    } 
    
    .logo{
        margin: 0 auto;
        padding: 0 0 0 5%;
    }
    
    .col-info .inline2{
        width: 45%;
    
    }
    
    .col-info .inline{
        width: 40%;
        
    }
     
    .col-info .texte{
        width: 60%;
    }
    
    .col-info .point{
        display: none;
    }
    
    .col-info .pictos{
        width: 10%;
    }
    
    .col-left{
        margin: 10% 10% 0 0;
    }
    
    .col-right{
        margin: 10% 0 0 10%;
    }
    
    .article{
        margin: 0 0 0 10%;
    }
    
    .circle2{
    width: 15px;
    height: 15px;
    border-radius: 15px;
    border: 10px double #ffffff;
    display: inline-block;
    margin: 3px 0 0 0;    
    }
    
    .infographic{
        background: url(../img/road-tab.svg) top no-repeat;
        
    }
    
    .col-info .inline2 .col-left .col-info2 .none{
        display: inline-block;
        width: 10%;
    }
    
    .col-info .inline2 .col-left .col-info1 .none{
        display: inline-block;
        width: 10%;
    }
    
    .col-info .inline2 .col-right .none2{
        display: inline-block;
        width: 10%;
    }
    
    .col-info .inline2 .article .none2{
        display: inline-block;
        width: 10%;
    }
    
    .col-info .global{
       width: 50%
    }
    
    .edition .col-edition{
    display: inline-block;
    width: 49%;
    margin: 0 auto;
    text-align: center;
    vertical-align: top;
    }
    
    .edition .col-edition img{
        width: 100%;
    }
    
    .col-edition table{
    width: 70%;
    margin: 0 auto;
}

    .col-edition table tr td{
        padding: 15px;
        letter-spacing: 2px;
        border: 1px solid #e53b8e;
        background-color: rgba(0, 0, 0, 0.3);
        font-weight: 100;
        font-size: 12px;
    }
    
    .token{
        margin: 0;
    }
    
    .row .video iframe{
        height: 200px;
    }
    
    .bg-3 .col-token{
        display: block;
        width: 90%;
        text-align: left;
        margin: 5% auto;
    }
    
    .bg-3 .col-token img{
        float: left;
        margin: 0 5% 0 0;
    }
    
    .bg-3 .col-token .tittle-token{
        font-weight: 700;
        font-size: 25px;
    }
    
    .partner .price-partner{
        width: 50%;
        margin: 5% auto;
    }
    
    .partner .text-price{
        width: 50%;
    }
    
    .partner .CTA{
        width: 50%;
    }
    
    .contact .col-contact{
        vertical-align: top;
        padding: 0 5%;
        display: block;
        width: 100%;
    }
    
    .container-car .car{
        width: 80%;
    }
    
    .row{
        width: 100%;
        margin: 0 auto;
    }
    
    .table-mobile{
        display: none;
    }
    
}

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

    .masthead .logo{
        margin: 0 auto;
        width: 80%;
        padding: 0 0 0 20%;
    }
    
    .navbar-nav li a{
     padding: 0px 0px 0px 0px;
     font-weight: 100;  

    } 
  
    /* customize nav style */
    .navbar-custom {
        font-weight:200;
        letter-spacing: 0px;
        border-width:0;
        font-size: 1.2em;
        font-family: 'Tajawal', sans-serif;
    }
    
    .timelineimg{
    display: inline-block;
    font-size: 3em;
    position: absolute;
    top: -5px;
    } 
    
    .col1 img{
        display: inline-block;
        width: 32%;
        margin: 0 0.2%;
    }
    
    .col1{
        
         width: 100%;
    }
    
    .col2{
        width: 100%;
        
    }
    
    .col2 h3{
        letter-spacing: 0;
    }
    
    #nav {
        width: 100%;
        position:static;
        top:0;
        padding: 15px 0 10px 0;
    }
    
    .edition .col-edition{
    display: block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    vertical-align: top;
    }
    
    .container{
        margin: 0;
        padding: 0;
    }
    
    .row{
        margin: 0;
        padding: 0;
    }
    
    .workshop img{
        display: block;
        width: 100%;
        padding: 0 0 10px 0;
    }
    
    .workshop p{
        display: block;
        width: 100%;
        margin: 0 auto;
    }
    
    .device h4{
    font-size: 25px;
    letter-spacing: 0em;
    font-weight: 100;
    }
    
    .device .inline img{
        width: 100%;
        margin: 0;
    }
    
    .device p{
        font-size: 15px;
    }
    
    .device .petchiant{
        float: right;
    }
    
    .token{
        margin: 0;
    }
    
     .road .road-img{
        display: none;
    }
    
    .device .pictos{
        width: 10%;
    }
    
    .device .photos{
        width: 8%;
    }
    
    .col-info .inline2{
        width:40%;
    }
    
    .col-info .road{
        width: 3px;
        background-color: #e11864;
        height: 550px;
        display: inline-block;
        margin: 0 15px;
    }
    
    .col-info .col-left {
        margin: 10% 0 0 0;
    }
    
    .col-info .col-right{
        margin: 5% 0 0 0;
    }
    
    .col-info .global{
        width: 80%;
        border: 3px solid #e11864;
    }
    
    .col-info .texte{
        width: 80%;
    }
    
    .col-info .point{
        display: none;
    }
    
    .infographic{
        background: none;
    }
    
    .circle2{
    width: 15px;
    height: 15px;
    border-radius: 15px;
    border: 10px double #ffffff;
    display: inline-block;
    margin: 3px 0 0 0;    
    }
    
    .col-info .inline2 .col-left .none{
        position: absolute;
        left: 46%;
        display: inline-block;
    }
    
    .col-info .inline2 .none2{
        position: absolute;
        left: 49%;
        display: block;
    }
    
    .edition .col-edition .ed-13{
        margin: 10% 0 0 0;
        padding: 10% 0 0 0;
    }
    
    .row .video iframe{
        display: block;
        width: 70%;
        margin: 0 auto;
    }
    
    .row .video{
        display: block;
        width: 100%;
        margin: 0 0 5% 0;  
    }
    
    .bg-3 .col-token{
        display: block;
        width: 90%;
        text-align: left;
        margin: 5% auto;
    }
    
    .bg-3 .col-token img{
        float: left;
        margin: 0 5% 0 0;
    }
    
    .bg-3 .col-token .tittle-token{
        font-weight: 700;
        font-size: 25px;
    }
    
    .partner .price-partner{
        width: 50%;
        margin: 5% auto;
    }
    
    .partner .text-price{
        width: 50%;
    }
    
    .partner .CTA{
        width: 50%;
    }
    
    .contact .col-contact{
        vertical-align: top;
        padding: 0 5%;
        display: block;
        width: 100%;
    }
    
    .container-car .car{
        width: 80%;
    }
    
    .table-mobile{
        display: none;
    }
}

@media all and (min-width: 480px) and (max-width: 768px) {
    
    #nav{
        padding:0;
    }
    
    #wrap .container{
        padding: 0 15px;;
    }
    
    .logo{
        width: 100%;
    }
    
    h1{
        font-size: 1em;
    }
    
    h5{
        font-size: 1.2em;
    }
    
    .TMGE{
        width: 35%;
        padding: 5% 0 0 0;
    }
    
    .langue li a{
        font-size: 10px;
    }
    
    #nav.affix{
        background-color: rgba(10, 10, 10, 0.5);
    }
    
    .container .timeline{
        display: none;
    }
    
    .container ul .timelineimg{
        display: none;
    }
    
    #section1{
        height: 1px;
    }
    
    h2{
    font-size: 2.5em;
    padding: 0;
    margin: 0;
    letter-spacing: 0;
    }
    
    p{
        font-size: 12px;
        margin: 0;
    }
    
    h3{
        font-size: 22px;
    }
    
    .col2 .epigraph{
        font-size: 14px;
    }
    
     .col1 img{
        display: inline-block;
        width: 31%;
        margin: 0 auto;
    }
    
    .col1{
        text-align: center;
         width: 100%;
        margin: 0 auto;
    }
    
    .col2{
        width: 100%;
        
    }
    
    .col2 h3{
        letter-spacing: 0;
    }
    
    .news .workshop img{
        display: block;
        width: 100%;
        padding: 0 0 10px 0;
    }
    
    .workshop p{
        display: block;
        width: 100%;
        margin: 0 auto;
    }
    
    .device .list-dispo li{
        width: 100%;
        padding: 0 25% 0 25%;
        margin: 1% 0;
    }
    
     .device h4{
    font-size: 20px;
    letter-spacing: 0em;
    font-weight: 100;
    }
    
    .device .inline img{
        width: 100%;
        margin: 0;
    }
    
    .device p{
        font-size: 12px;
    }
    
    .device .petchiant{
        float: right;
    }
    
     .road .road-img{
        display: none;
    }
    
    .device .pictos{
        width: 10%;
    }
    
    .device .photos{
        width: 8%;
    }
    
    .col-info .inline2{
        width:40%;
    }
    
    .col-info .road{
        width: 3px;
        background-color: #e11864;
        height: 450px;
        display: inline-block;
        margin: 0 15px;
    }
    
    .col-info .col-left {
        margin: 10% 0 0 0;
    }
    
    .col-info .col-right{
        margin: 5% 0 0 0;
    }
    
    .col-info .global{
        width: 80%;
        border: 3px solid #e11864;
    }
    
    .col-info .texte{
        width: 80%;
    }
    
    .col-info .point{
        display: none;
    }
    
    .infographic{
        background: none;
    }
    
    .circle2{
    width: 15px;
    height: 15px;
    border-radius: 15px;
    border: 10px double #ffffff;
    display: inline-block;
    margin: 3px 0 0 0;    
    }
    
    .col-info .inline2 .col-left .none{
        position: absolute;
        left: 45%;
        display: inline-block;
    }
    
    .col-info .inline2 .none2{
        position: absolute;
        left: 48%;
        display: block;
    }
    
    .global{
        font-size: 18px;
        letter-spacing: 1px;
    }
    
    .table{
        display: none;
    }
    
    .table-mobile{
        display: block;
        margin: 0 auto;        
    }
    
    .table-mobile tr td{
        width: 40%;       
    }
    
    .col-edition table tr td{
        padding: 5px;
        margin: 0;
    }
    
    .edition{
        width: 100%;
    }
    
    .edition .col-edition{
        width: 100%;
        display: block;
    }
    
    .edition .col-edition img{
        width: 80%;
        margin: 0 auto;
    }
    
    .edition .col-edition .ed-13{
        margin: 10% 0 0 0;
        padding: 10% 0 0 0;
    }
    
    .sstitre{
        padding: 2%;
        font-size: 18px;
    }
    
    .bg-1{
        padding: 10% 0 0 0;
    }
    
    .row{
        width: 100%;
        margin: 0 auto;
    }
    
    .row .video{
        display: block;
        width: 90%;
        margin: 5% auto;
       
    }
    
    .row .video iframe{
         height: 250px;
    }
    
    .bg-3 .col-token{
        display: block;
        width: 90%;
        text-align: left;
        margin: 10% auto;
    }
    
    .bg-3 .col-token img{
        float: left;
        margin: 0 5% 0 0;
    }
    
    .bg-3 .col-token .tittle-token{
        font-weight: 700;
        font-size: 25px;
    }
    
    .partner .price-partner{
        width: 70%;
        margin: 5% auto;
    }
    
    .partner .text-price{
        width: 70%;
    }
    
    .partner .CTA{
        width: 70%;
        margin: 2% auto;;
    }
    
    .contact .col-contact{
        vertical-align: top;
        padding: 0 5%;
        display: block;
        width: 100%;
    }
        
    .container-car .car{
        width: 80%;
    }
    
    .token{
        margin: 0;
    }
    
}

@media all and (max-width: 480px) {
    
    #nav{
        padding:0;
    }
    
    #wrap .container{
        padding: 0 15px;;
    }
    
    .logo{
        width: 100%;
    }
    
    h1{
        font-size: 1em;
    }
    
    h5{
        font-size: 1.2em;
    }
    
    .TMGE{
        width: 35%;
        padding: 5% 0 0 0;
    }
    
    #nav.affix{
        background-color: rgba(10, 10, 10, 0.5);
    }
    
    .container .timeline{
        display: none;
    }
    
    .container ul .timelineimg{
        display: none;
    }
    
    #section1{
        height: 1px;
    }
    
    h2{
    font-size: 2.5em;
    padding: 0;
    margin: 0;
        letter-spacing: 0;
    }
    
    p{
        font-size: 12px;
        margin: 0;
    }
    
    h3{
        font-size: 22px;
    }
    
    .col2 .epigraph{
        font-size: 14px;
    }
    
     .col1 img{
        display: inline-block;
        width: 31%;
        margin: 0 auto;
    }
    
    .col1{
        text-align: center;
         width: 100%;
        margin: 0 auto;
    }
    
    .col2{
        width: 100%;
        
    }
    
    .col2 h3{
        letter-spacing: 0;
    }
    
    .news .workshop img{
        display: block;
        width: 100%;
        padding: 0 0 10px 0;
    }
    
    .workshop p{
        display: block;
        width: 100%;
        margin: 0 auto;
    }
    
     .device h4{
    font-size: 20px; 
    letter-spacing: 0em;
    font-weight: 100;
    }
    
    .device .inline img{
        width: 100%;
        margin: 0;
    }
    
     .device .list-dispo li{
        width: 100%;
        padding: 0 25% 0 25%;
        margin: 1% 0;
    }
    
    
    .device p{
        font-size: 12px;
    }
    
    .device .petchiant{
        float: right;
    }
    
     .road .road-img{
        display: none;
    }
    
    .device .pictos{
        width: 10%;
    }
    
    .device .photos{
        width: 8%;
    }
    
    .col-info .inline2{
        width:40%;
    }
    
    .col-info .road{
        width: 3px;
        background-color: #e11864;
        height: 650px;
        display: inline-block;
        margin: 0 15px;
    }
    
    .col-info .col-left {
        margin: 10% 0 0 0;
    }
    
    .col-info .col-right{
        margin: 5% 0 0 0;
    }
    
    .col-info .global{
        width: 80%;
        border: 3px solid #e11864;
    }
    
    .col-info .texte{
        width: 80%;
    }
    
    .col-info .point{
        display: none;
    }
    
    .infographic{
        background: none;
    }
    
    .circle2{
    width: 15px;
    height: 15px;
    border-radius: 15px;
    border: 10px double #ffffff;
    display: inline-block;
    margin: 3px 0 0 0;    
    }
    
    .col-info .inline2 .col-left .none{
        position: absolute;
        left: 42.5%;
        display: inline-block;
    }
    
    .col-info .inline2 .none2{
        position: absolute;
        left: 47.5%;
        display: block;
    }
    
    .global{
        font-size: 18px;
        letter-spacing: 1px;
    }
    
    .table{
        font-size: 10px;
        display: none;
    }
    
    .table-mobile{
        display: block;
        font-size: 14px;
        width: 50%;
        margin: 0 auto;
    }
    
    .col-edition table tr td{
        padding: 5px;
        margin: 0;
    }
    
    .edition{
        width: 100%;
    }
    
    .edition .col-edition{
        width: 100%;
        display: block;
    }
    
    .edition .col-edition img{
        width: 80%;
        margin: 0 auto;
    }
    
    .edition .col-edition .ed-13{
        margin: 10% 0 0 0;
        padding: 10% 0 0 0;
    }
    
    .sstitre{
        padding: 2%;
        font-size: 18px;
    }
    
    .bg-1{
        padding: 10% 0 0 0;
    }
    
    .row{
        width: 100%;
        margin: 0 auto;
    }
    
    .row .video{
        display: block;
        width: 90%;
        margin: 5% auto;
       
    }
    
    .row .video iframe{
         height: 250px;
    }
    
    .bg-3 .col-token{
        display: block;
        width: 90%;
        text-align: left;
        margin: 10% auto;
    }
    
    .bg-3 .col-token img{
        float: left;
        margin: 0 5% 0 0;
    }
    
    .bg-3 .col-token .tittle-token{
        font-weight: 700;
        font-size: 25px;
    }
    
    .partner .price-partner{
        width: 70%;
        margin: 5% auto;
    }
    
    .partner .text-price{
        width: 70%;
    }
    
    .partner .CTA{
        width: 70%;
        margin: 2% auto;;
    }
    
    .contact .col-contact{
        vertical-align: top;
        padding: 0 5%;
        display: block;
        width: 100%;
    }
        
    .container-car .car{
        width: 80%;
    }
    
    .token{
        margin: 0;
    }
    

}



/* CSS for iPhone, iPad, and Retina Displays */

/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
}

/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}

/* iPhone Portrait */
@media screen and (max-device-width: 480px) and (orientation:portrait) {
    
    
} 

/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
}

/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation:portrait) {
    .col-info .inline2 .col-left .none{
        position: absolute;
        left: 45%;
        display: inline-block;
    }
    
    .col-info .inline2 .none2{
        position: absolute;
        left: 49%;
        display: block;
    }
    
    .edition .col-edition{
    width: 70%;
    padding: 0 5%;
    margin: 0 auto;
    text-align: center;
    }
    
     .row .video iframe{
         height: 250px;
         width: 500px;
    }
    
    .global{
        font-size: 27px;
    }
    
    .col-info .col-right{
        margin:8% 0 0 0;
    }
}

/* iPad Landscape */
@media screen and (min-device-width: 481px) and (orientation:landscape) {
    
    .timelineimg{
        display: inline-block;
        font-size: 3em;
        position: absolute;
        top: -5px;
    } 
    
     .edition .col-edition{
    width: 40%;
    padding: 0 5%;
    margin: 0 auto;
    text-align: center;
    }
    
    .edition{
        width: 100%;
    }
    
    .edition img{
        width: 100%;
    }
    
    .edition .table{
        display: none;
    }
    
    .edition .table-mobile{
        display: block;
    }
    
     .row .video iframe{
         height: 250px;
    }
}