/* ==========================================================================
   Général
   ========================================================================== */


@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,700,300);

body{
    background-image: url("../img/marseille1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    width: 100%;
    margin: 0 auto;
    font-family: 'Open Sans', Tahoma, Arial, sans-serif;
    color: #3e424e;
}

a{
    text-decoration: none;
    color: #464043;
}

video{
    width: 85%;
    margin: 10px 0 0 0;
}


header{
    display: block;
    background-color: rgba(255, 255, 255, 0.75);
    position: fixed;
    top: 0;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 20px 0 20px 0;
    color: #464043;
}

header a{
    font-weight: 600;
}


.container{
    display: block;
    max-width: 950px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;   
    box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.42);
    background: url(../img/marseille2.jpg) no-repeat center fixed;
    padding: 0 0 3em 0;
}

nav ul{
    text-align: left;
    margin: 6em 0 0 2em;
}

nav li{
    display: inline-block;
    padding: 2em 0 2em 0;
}

nav a{
    color: #666666;
    font-size: 0.90em;
}


nav a:hover, a:focus, a:active{
    color : #00b0f0;
    font-weight: 600;
}

nav a.current{
    font-weight: 600;
    color : #000000;
}

h1{
    color: #666666;
    margin: 1em 0 1em 0;
    text-transform: uppercase;
}

.trait{
    display: block;
    width: 5%;
    background-color: #666666;
    height: 4px;
    margin: 0 auto;
}

h4{
    font-weight: 400;
    font-size: 1.4em;
    color: #1c1c23;
}

.exemple h4{
    margin: 0;
}

p{
    padding: 1em 6em;
}

.cercle{
	border-radius: 50%;
    background-color: #234c9a;
    color: #ffffff;
    margin: 0 0 0 1em;
    width: 60%;
height: 110px;
padding: 5em 1em 1em 1em;
}

.dispositif{
    background-color: #ffffff;
    width: 85%;
	margin: 0 auto;
    padding: 1em 0 0 0;
}

.dispositifbleu{
    background-color: #234c9a;
	color: white;
    width: 85%;
	margin: 0 auto;
    padding: 1em 0 0 0;
}

.dispositifrose{
    background-color: #e31d86;
	color: white;
    width: 85%;
	margin: 0 auto;
    padding: 1em 0 0 0;
}

.dispositif2{
    width: 85%;
	margin: 0 auto;
    padding: 1em 0 0 0;
}

.frequentation{

    width: 85%;
    margin: 0 auto;
    padding: 1em 0 0 0;
}

.frequentation ul{
    list-style: none;
}


h2{
    font-size: 1.7em;
    color: #666666;
    font-weight: 600;
}

h7{
    font-weight: bold;
}

.dispositif li{
    font-weight: 600;
    list-style: none;
   text-align: center;
   margin: 0 auto;
    width: 100%;
    padding: 4px;
}

.dispositif ul{
    width: 100%;
    padding: 0;
}

.dispositif .espace{

    padding: 1.5em 0em;
}

.dispositifbleu li{
    font-weight: 600;
    list-style: none;
   text-align: center;
   margin: 0 auto;
    width: 100%;
    padding: 4px;
}

.dispositifbleu ul{
    width: 100%;
    padding: 0;
}

.dispositifbleu .espace{

    padding: 1.5em 0em;
}

i{
    color: #e31d86;
    margin: 0 1em 0 0;

}

.dispositif a{
    display: block;
    font-weight: 500;
    margin: 0.8em 0;
        
}

.mention{
    font-size: 12px; 
    font-weight: 400;
    color: #00b0f0;
}

.tarif{
    background-color: #e31d86;
    background: linear-gradient(to bottom, #e31d86 0%,#e31d86 100%);
    font-weight: 700;
    font-size: 1.5em;
    color: #ffffff;
    padding: 0.8em 0;

}

.tarifbleu{
    background-color: #234c9a;
    font-weight: 700;
    font-size: 1.5em;
    color: #ffffff;
    padding: 0.8em 0;

}

.tarifrose{
    background-color: #e31d86;
    font-weight: 700;
    font-size: 1.5em;
    color: #ffffff;
    padding: 0.8em 0;

}


.raisons{
    background-color: #00b0f0;
    background: linear-gradient(to bottom, #00b0f0 0%,#00b0f0 100%);
    font-weight: 50;
    font-size: 13px;
    color: #ffffff;
    padding: 0.8em 0;

}

.raisonswhite{
    background-color: #ffffff;
    font-weight: 100;
    font-size: 15px;
    color: #666666;
    padding: 0.8em 0;

}

.asterique{
    font-size: 14px;
    color: #757e85;
    padding: 1em 0 2em 0;
}

.exergue{
    font-weight: 700;
    color: #00b0f0;
}

.impact{
    font-weight: 600;
}

.col{
    display: inline-block;
    margin: 0 auto; 
    padding: 0 0 1.5em 0;
}

.col2{
    display: inline-block;
    margin: 0 auto; 
    padding: 0 0 0em 0;
    width: 25%;
    margin: 3%
}

.col2 .tarif a{
    padding: 0;
    margin: 0;
    color: #ffffff;
    font-weight: 700
}


h5{
    font-size: 3em;
    margin: 0;
    padding: 0 1em 0 1em;
    color: #32cd32;
}

h6{
    font-size: 25px;
    padding: 0;
    margin: 1em 0 1em 0;
    color: #008000;
}

.social-encart h4{
    margin: 0.5em;
}

.abonne{
    margin: 0;
}

.social{
    margin: 2em 0 0 0;
}

.espace{
    display: block;
    width: 100%;
    height: 2em;
}

.spe-tech{
    background-color: #ffffff;
    width: 85%;
    margin: 0 auto;
    padding: 0.6em 0 0.5em 0;
}

h3{
    color: #666666;
    margin: 2em 0 1em 0;
    font-size: 1.9em;
  
}

#encart2{
    display: block;
    height: 2em;
}

.souligne{
    text-decoration: underline;
}

.spe-tech a{
    font-weight: 700;
    color: #00b0f0;
}

.spe-tech p{
    margin: 0;
   
}

footer{
    display: block;
    max-width: 950px;
    margin: 4em auto;
    text-align: center; 
}

.questions{
    padding: 0 0 1.5em 0;
    font-size: 1.5em;
    font-weight: 600;
    color: #000000;
}

footer ul{   
    background-color: rgba(255, 255, 255, 0.8);  
    box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.42);
    background: url(../img/marseille2.jpg) no-repeat center fixed;  
    padding: 2em 0;
}

footer li{
    list-style: none;
    color: #1c1c23;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.flex-row > div {
  width: 33.3333%;
}






/* ==========================================================================
   Fin générale
   ========================================================================== */

/* ==========================================================================
   Spécifique et ciblage élément page pub
   ========================================================================== */

.appli{
    margin: 0 auto;
    padding: 2em 0;
}

.store{
    margin: 0 auto;
    padding: 1em;
}

.store img{
    margin: 0 2.2em 2.2em 2em;
}

.spe-tech strong{
    display: block;
    margin: 0 0 1em 0;
}

.exemples img{
    margin: 2em 0 0 0;
    width: 90%;
}



/* ==========================================================================
   Fin spécifique et ciblage élément page pub
   ========================================================================== */


/* ==========================================================================
   Responsive @media
   ========================================================================== */

@media only screen and (max-width: 480px) {
    /* insert styles here */
        p{
      width: 90%;
       margin: 5% auto;
        display: block;
        padding: 0;
    }
    
     iframe{
        width: 100%;
    }
    
     h4{
        margin: 0;
        padding: 0;
    }
    
    .img-width{
    width: 80%;
}
.flex-row {
  display: block;
  flex-wrap: wrap;
  justify-content: center;
}	
}

@media all and (min-width: 480px) and (max-width: 768px) {
 
   
    
    p{
      width: 90%;
       margin: 5% auto;
        display: block;
        padding: 0;
    }
    
     iframe{
        width: 100%;
    }
    
     h4{
        margin: 0;
        padding: 0;
    }
    
    .img-width{
    width: 80%;
}
	.flex-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
}


/* ==========================================================================
   Fin Responsive @media
   ========================================================================== */

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

/* Clearfix
 * Adding a 'clearfix' class will allow parent elements to contain a floated child element
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}