/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 5 août 2016, 09:28:19
    Author     : davyfrot
*/


/* PAGE 1 
#intro
{
background: url('../img/background_page_1.png') no-repeat center fixed;
}
*/


@font-face
{
    font-family:'brandon_bld';
    src:url('../fonts/Brandon/Brandon_bld.otf'); 

}
  #page_1
    {
        width: 100%;
    
    }
    
#about
{
    min-height:  1300px;
       margin-top: -500px;
    height: 150%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,86e5f5+8,61d9ed+25,81e3f4+42,14c3df+73,00afcd+100&0.08+0,0.45+11,1+29,1+100 */
background: -moz-linear-gradient(top,  rgba(255,255,255,0.08) 0%, rgba(134,229,245,0.35) 3%, rgba(127,227,244,0.45) 6%, rgba(97,217,237,0.88) 25%, rgba(105,219,239,1) 29%, rgba(129,227,244,1) 42%, rgba(20,195,223,1) 73%, rgba(0,175,205,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.08) 0%,rgba(134,229,245,0.35) 3%,rgba(127,227,244,0.45) 5%,rgba(97,217,237,0.88) 25%,rgba(105,219,239,1) 29%,rgba(129,227,244,1) 42%,rgba(20,195,223,1) 73%,rgba(0,175,205,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,0.08) 0%,rgba(134,229,245,0.35) 8%,rgba(127,227,244,0.45) 5%,rgba(97,217,237,0.88) 25%,rgba(105,219,239,1) 29%,rgba(129,227,244,1) 42%,rgba(20,195,223,1) 73%,rgba(0,175,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14ffffff', endColorstr='#00afcd',GradientType=0 ); /* IE6-9 */

}
#logo_container
{
    position: absolute;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.23);
    margin-top: 0px;
       padding: 7px;
    
}
@media (min-width: 600px)
{
#logo
{
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
}
@media (max-width: 600px)
{
    #logo
{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
    
}



.drapeau
{
width: 30px;
float: left;
margin-left: 15px;
margin-top: 20px;
}
.texte
{
    margin-top: 48px;
    margin-left: 15px;
    position: absolute;
    width: 44%;
        text-align: justify;
    
}
.osberry_sarl
{
   font-weight: bolder; 
       font-size: 15px;
}

#fleche
{
    width: 62px;
    padding-right: 10px;
    margin-top: -20px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: relative;
 
    -webkit-animation-name: scroller;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 0;
    -webkit-animation-duration: 10s;
    -moz-animation-name: scroller;
    -moz-animation-iteration-count: infinite;
    -moz-animation-delay: 0s;
    -moz-animation-duration: 10s;
    animation-name: scroller;
    animation-iteration-count: infinite;
    animation-delay: 0s;
    animation-duration: 12s;
}

@-webkit-keyframes scroller{
    0%{top:-110px }
    10%{top:-100px }
    20%{top:-110px }
    30%{top:-100px }
    40%{top:-110px }
    50%{top:-100px }
    60%{top:-110px }
    70%{top:-100px }
    80%{top:-110px }
    90%{top:-100px }
    100%{top:-110px}
}
@-moz-keyframes scroller{
     0%{top:-110px }
    10%{top:-100px }
    20%{top:-110px }
    30%{top:-100px }
    40%{top:-110px }
    50%{top:-100px }
    60%{top:-110px }
    70%{top:-100px }
    80%{top:-110px }
    90%{top:-100px }
    100%{top:-110px}
}

@keyframes scroller{
    0%{top:-110px }
    10%{top:-100px }
    20%{top:-110px }
    30%{top:-100px }
    40%{top:-110px }
    50%{top:-100px }
    60%{top:-110px }
    70%{top:-100px }
    80%{top:-110px }
    90%{top:-100px }
    100%{top:-110px}
    }

@media (max-width: 600px)
{
.bloc_p1
{
        margin-top: 147px;
    position: absolute;
   margin-left: 10%;
    margin-right: 10%;
        width: 80%;
}
.bloc_text
{
min-width: 85px;
    width: 49.6%;
height: 250px; 
    margin-top: -4px;
    margin-left: -3px;
background-color: rgba(255, 255, 255, 0.58);
display: inline-block;
}
.texte
{
    margin-top: 48px;
    margin-left: 15px;
    margin-right: 15px;
    position: absolute;
    width: 44%;
        text-align: justify;
        font-size: 11px;       
}
}

@media (min-width: 600px)
{
    
.bloc_p1
{
       margin-top: 147px;
    position: absolute;
   margin-left: 10%;
    margin-right: 10%;
        width: 80%;
}
.bloc_text
{
min-width: 85px;
    width: 49.6%;
height: 250px; 
    margin-top: -4px;
    margin-left: -3px;
background-color: rgba(255, 255, 255, 0.58);
display: inline-block;
}
.texte
{
    margin-top: 48px;
    margin-left: 15px;
    margin-right: 15px;
    position: absolute;
    width: 44%;
        text-align: justify;
        font-size: 13px;       
}  
}

@media (min-width: 600px)
{
.container_bloc_marques {
   /* width: 700px;*/
       width: 100%;
       margin-top: 480px;
       margin-left: auto;
       margin-right: auto;
       margin-top: 370px;
    
}
.bloc_marque
{
  /*  width: 120px;*/
    height: 100px;
        line-height: 100px;
   background-color:rgba(255, 255, 255, 0.2);
    display: inline-block;
         width: 14.3%;
        margin-left: -4px;
    
}
.bloc_marque_2
{
      /*  width: 120px;*/
    height: 100px;
        line-height: 100px;
    background-color: rgba(0, 175, 205, 0.64);
    display: inline-block;
    width: 14.3%;
    margin-left: -4px;
}

.bloc_marque_3
{
     /*  width: 120px;*/
    height: 100px;
   background-color:rgba(255, 255, 255, 0.2);
    display: inline-block;
    width: 14.3%;
    margin-left: -4px;
    line-height: 3px;   
}

.bloc_marque_last
{
        height: 100px;
        line-height: 100px;
   background-color:rgba(255, 255, 255, 0.2);
    display: inline-block;
         width: 14.3%;
        margin-left: -4px;
}


.texte_marque
{   
    min-width: 116px;
    max-width: 160px;
    margin-left: auto;
    margin-right: auto;
        font-weight: bolder;
        
}
.texte_marque_point
{   
    color: transparent;
    min-width: 116px;
    max-width: 160px;
    margin-left: auto;
    margin-right: auto;
}



.texte_marque_2
{
    font-family:'brandon_bld';
    min-width: 116px;
    line-height: 20px;
    max-width: 138px;
    margin-left: auto;
    margin-right: auto;
        font-weight: bolder;
}
.texte_marque_3
{
    font-family:'brandon_bld';
    line-height: 20px;
    max-width: 138px;
    margin-left: auto;
    margin-right: auto;
    font-weight: bolder;
}
.texte_marque_4
{
    font-family:'brandon_bld';
    line-height: 14px;
    max-width: 138px;
    margin-left: auto;
    margin-right: auto;
    min-width: 116px;
    font-weight: bolder;

}
 
.texte_marque_5
{
    font-family:'brandon_bld';
    min-width: 131px;
    line-height: 14px;
    max-width: 138px;
    margin-left: auto;
    margin-right: auto;
    font-weight: bolder;
}


.small_marques
{
    font-size: 11px;
    line-height: 12px;
}

}

/* ECRAN INFERIEUR À 768px*/
@media (max-width: 768px)
{
.container_bloc_marques {
       width: 100%;
       margin-top: 480px;
       margin-left: auto;
       margin-right: auto;
       margin-top: 370px;   
}

.bloc_marque
{
  /*  width: 120px;*/
    height: 100px;
        line-height: 100px;
   background-color:rgba(255, 255, 255, 0.2);
    display: inline-block;
         width:17%;
        margin-left: -4px;
    
}
.bloc_marque_2
{
      /*  width: 120px;*/
    height: 100px;
        line-height: 100px;
    background-color: rgba(0, 175, 205, 0.64);
    display: inline-block;
    width: 17%;
    margin-left: -4px;
}

.bloc_marque_3
{
     /*  width: 120px;*/
    height: 100px;
   background-color:rgba(255, 255, 255, 0.2);
    display: inline-block;
    width:17%;
    margin-left: -4px;
    line-height: 3px;   
}

.bloc_marque_last
{
    display: none;
}

.texte_marque
{   
    font-size: 9px;
    max-width: 160px;
    margin-left: auto;
    margin-right: auto;
}
.texte_marque_point
{   
        color: transparent;
    max-width: 160px;
    margin-left: auto;
    margin-right: auto;
        line-height: 95px;
}



.texte_marque_2
{
    font-size: 9px;
    line-height: 20px;
    max-width: 138px;
    margin-left: auto;
    margin-right: auto;
}
.texte_marque_3
{  
     font-size: 9px;
    line-height: 20px;
    max-width: 138px;
    margin-left: auto;
    margin-right: auto;
}
.texte_marque_4
{
    font-size: 9px;
    line-height: 14px;
    max-width: 138px;
    margin-left: auto;
    margin-right: auto;

}
 
.texte_marque_5
{
    font-size: 9px;
   line-height: 14px;
   max-width: 138px;
   margin-left: auto;
   margin-right: auto;
}


.small_marques
{
    font-size: 6px;
    line-height: 12px;
}

}
#footer
{
     margin-top: -240px;
     text-align: center;
 
}



@media (max-width: 600px)
{
#adresse_bea
{
display: inline-block;    
    float: left;
    margin-left: 30px;
        margin-top: 30px;
    font-weight: bolder;
}
#contact_bea
{
    display: inline-block; 
        float: right;
    margin-right: 30px;
        margin-top: 30px;
    font-weight: bolder;

}
#map
{
    display: none;; 
}
}
@media (min-width: 600px)
{

#adresse_bea
{
    float: left;
    margin-left: 30px;
    font-weight: bolder;
    z-index: 1000;
    position: absolute;
    font-size: 15px;

}
#contact_bea
{
    margin-right: 30px;
       margin-top: 7px;
    font-weight: bolder;
    z-index: 10000;
    position: absolute;
    width: 100%;
    text-align: right;
    padding-right: 38px;
    font-size: 15px;

}
#map
{
     /* display: inline-block; */
    width: 456px;
    margin-top: -126px;
    /* max-width: 350px; */
    margin-right: 44px;
    /* width: 40%; */
}
}