::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-thumb {
    background-color: #808080;
}
.lien {
    color: #333966;
    font-weight: bold;
    text-decoration: none;
}
.lien a:link {
    color: #333966;
    font-weight: bold;
    text-decoration: none;
}
.lien a:visited {
    color: #333966;
    font-weight: bold;
    text-decoration: none;
}
#basreseaux {
        position:relative;
        padding:10px;
        width:calc(100% - 20px);
        height:30px;
        text-align:center;
        margin-bottom:20px;
    }
.paragraphe {
    position:relative;
    float:left;
    width:calc(50% - 10px);
    height:170px;
    margin-right:10px;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:300px;    
}
.paragraphegauche {
    position:relative;
    float:left;
    width:100%;
    height:140px;
    margin-right:10px;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:300px;    
}
.paragrapheinfo {
    position:relative;
    float:left;
    width:calc(50% - 10px);
    height:265px;
    margin-right:10px;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:300px;    
}
.paragrapheinfobis {
     position:absolute;
     top:31px;
     left:0px;
     width:100%;
     height:230px;
     text-align:left;
     overflow:hidden;
     text-overflow:ellipsis;
}
.paragrapheinfo1bis {
     position:absolute;
     top:31px;
     left:0px;
     width:100%;
     height:230px;
     text-align:left;
     overflow:hidden;
     text-overflow:ellipsis;
}
.paragraphetitre {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:26px;
    border-bottom:1px solid #1F2151;
    color:#1F2151;
    font-weight:bold;
    text-align:left;
    cursor:pointer;
}
.paragraphebateau {
    position:relative;
    float:left;
    width:calc(50% - 10px);
    margin-right:10px;
    min-width:300px; 
    margin-top:55px;   
}
#colonnegauche
{
    float:left;
    width:calc(50% - 10px);    
}
#rotationimage {
    display: block;
    width: calc(50% - 10px);
    float: left;
    height: 382px;
    margin-bottom: 20px;
    overflow: hidden;
    padding-left: 10px;
    padding-top: 22px;
}   
.video {
    display:block;
}
.videopt {
    display:none;
}
#colonnedroite {
    position: relative;
    float: left;
    width: 250px;
    background-color: White;
    margin-top: -100px;
    margin-left:-10px;
}
.tourismeparagraphe {
    float:left;
    width:calc(50% - 15px);
    margin-right:10px;
    border-bottom:1px dotted Gray;
    margin:5px;
    height:130px;
}
.tourismeparagraphefond {
    float:left;
    width:calc(50% - 45px);
    margin-right:10px;
    border-bottom:1px dotted Gray;
    margin:5px;
    height:100px;
    background-color:#c5d3f2;
    padding:15px;
}
.imgquenpensezvous {
    position: absolute;
    left: 0px;
    top: 27px;
    width: 90px;
    text-align: left;
}
.quenpensezvous {
    position:absolute;
    left:90px;
    top:31px;
    width:calc(100% - 100px);
    line-height:18px;
    text-overflow:ellipsis;
    overflow:hidden;
    text-align:left;
}
@media screen and (min-width: 1000px) {
    body {
        cursor:default;
        font-size:16px;
        font-family:Lucida Sans Unicode, Helvetica, Verdana, Arial;
        background-image:url(public/rotation_fond/le_bassin_arcachon.jpg);
        background-attachment:fixed;
        margin:0px;
    }
    .affichegrandecran {
        display:block;
    }
    .h1 {
        display:block;
        position:relative;
        margin-left:auto;
        margin-right:auto;
        width:1010px;
        padding:10px;
        height:20px;
        margin-bottom:0px;
        text-align:center;
        color:Gray;
        font-size:13px;
        font-weight:normal;
    }
    #cadregeneral {
        position:relative;
        margin-left:auto;
        margin-right:auto;
        width:1010px;
        padding:10px;
        border:1px solid #333966;
        border-radius:5px;
        background-color:White;
        opacity:0.95;
        text-align:center;
    }
    #entete
    {
        position:relative;
        background-image:url(public/rotation_bandeau/arcachon_cap_ferret_1.jpg);
        width:990px;
        height:333px;
        color:White;
        margin: 10px 10px 8px 10px;
    }
    #bandeau {
        position:absolute;
        left:0px;
        top:50px;
        width:calc(100% - 22px);
        height:24px;
        font-size:16px;
        background-color:#1F2151;
        opacity:0.9;
        text-align:right;
        padding-right:2px;
        padding-top:7px;
        padding-right:20px;
        border-bottom:2px solid White;
    }
    #inscription1 {
        float:right;
        display:block;
    }
    #inscription2 {
        float:right;
        display:block;
    }
    #inscription3 {
        float:right;
        display:block;
    }
    #bandeauvertical {
        position:absolute;
        left:0px;
        top:0px;
        height:333px;
        width:45px;
        background-image:url(images/visuel_bassin_vertical.png);
    }
    #bandeaulogo {
        position:absolute;
        left:55px;
        top:4px;
        width:250px;
        height:135px;
        background-image:url(images/bassinda.png);
    }
    #menu {
        position:relative;
        width:1010px;
        height:30px;
        margin-bottom:0px;
    }
    #menumobile {
        display:none;
    }
    #pub {
        float:left;
        width:710px;
        padding-left:20px;
        background-color:White;
    }
    #pubmention {
        float:left;
        margin-left:15px;
        font-size:13px;
    }
    #pubmoyenne {
        display:block;
        overflow:hidden;
        border:none;
        margin:5px;
        width:700px;
        height:90px;
    }
    #pubpetite {
        display:none;
    }
    #centre {
        float:left;
        width:calc(100% - 270px);
        padding:10px;
        background-color:White;
    }    
    #colonnebottin {
        position:relative;
        float:left;
        width:250px;
        text-align:center;
        height:170px;
        border:1px solid #1F2151;
        text-align:center;
        font-size:16px;
        margin-bottom:20px;
    }
    #colonnebonsplans{
        position:relative;
        float:left;
        width:250px;
        text-align:center;
        height:300px;
        border:1px solid #1F2151;
        text-align:center;
        font-size:14px;
        margin-bottom:20px;
    }
    #colonnepublicite 
    {
        position:relative;
        float:left;
        width:250px;
        text-align:center;
        border:1px solid #1F2151;
        text-align:center;
        font-size:14px;
    }
    #bas {
        position:relative;
        clear:both;
        padding:10px;
        width:calc(100% - 20px);
        height:40px;
        text-align:center;
        font-size:14px;       
    }  
    #pubbas {
        position: relative;
        width: 100%;
        height: 260px;
    } 
    #pubbasgrande {
        display:block;
        width:1000px;
        height:240px;
        overflow:hidden;
        border:none;
        margin:5px;
        left:-5px;
        margin-left:auto;
        margin-right:auto;
    }
    #pubbasmoyenne {
        display: none;
    }
    #pubbaspetite {
        display: none;
    } 
    .lienparagraphe {
        display:block;
    }
    .paragraphegauchepetit {
        position: relative;
        float: left;
        width: 100%;
        height: 125px;
        margin-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 300px;
    }
    .paragraphegauchegrand {
        position: relative;
        float: left;
        width: 100%;
        height: 170px;
        margin-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 300px;
    }
    .image {
        float:left;
        width:calc(50% - 10px);
        margin-bottom:10px;
    } 
}
@media screen and (max-width: 999px) {
    body {
        cursor:default;
        font-size:16px;
        font-family:Lucida Sans Unicode, Helvetica, Verdana, Arial;
        background-image:url();
        margin:0px;
    }
    .h1 {
        display:none;
    }
    .affichegrandecran {
        display:block;
    }
    #cadregeneral {
        position:relative;
        width:calc(100% - 20px);
        padding:10px;
        background-color:White;
        opacity:0.95;
    }
    #entete
    {
        position:relative;
        background-image:url(public/rotation_bandeau/arcachon_cap_ferret_1.jpg);
        width:100%;
        height:230px;
        color:White;
        margin-bottom:8px;
    }
    #bandeau {
        position:absolute;
        left:0px;
        top:50px;
        width:calc(100% - 22px);
        height:24px;
        font-size:16px;
        background-color:#1F2151;
        opacity:0.9;
        text-align:right;
        padding-right:2px;
        padding-top:7px;
        padding-right:20px;
        border-bottom:2px solid White;
    }
    #inscription1 {
        float:right;
        display:block;
    }
    #inscription2 {
        display:none;
    }
    #inscription3 {
        float:right;
        display:block;
    }
    #bandeauvertical {
        display:none;
    }
    #bandeaulogo {
        position:absolute;
        left:15px;
        top:4px;
        width:250px;
        height:135px;
        background-image:url(images/bassinda.png);
    }
    #menu {
        position:relative;
        width:100%;
        height:30px;
        margin-bottom:0px;
        text-align:center;
    }
    #menumobile {
        display:none;
    }
    #pub {
        position:relative;
        width:calc(100% - 20px);
        padding:10px;
        margin-bottom:10px;
        text-align:center;
    }
    #pubmention {
        position:absolute;
        left:15px;
        top:5px;
        font-size:13px;
    }
    #pubmoyenne {
        display:block;
        position:relative;
        margin-left:auto;
        margin-right:auto;
        top:20px;
        width:700px;
        height:90px;
    }
    #pubpetite {
        display:none;
    }
    #centre {
        position:relative;
        width:Calc(100% - 20px);
        padding:10px;
        background-color:White;
    }
    #colonnedroite {
        display:none;
    }
    #bas {
        position:relative;
        clear:both;
        padding:10px;
        width:calc(100% - 20px);
        height:40px;
        text-align:center;
        font-size:14px;
        border-bottom:1px solid Gray;
        margin-bottom:10px;
    }
    #pubbas {
        position: relative;
        width: 100%;
        height: 110px;
        text-align:center;
    }
    #pubbasgrande {
        display: none;
    }
    #pubbasmoyenne {
        display:block;
        position:relative;
        margin-left:auto;
        margin-right:auto;
        width:700px;
        height:90px;
    }
    #pubbaspetite {
        display: none;
    }
    .lienparagraphe {
        display:block;
    }
    .paragraphegauchepetit {
        position: relative;
        float: left;
        width: 100%;
        height: 125px;
        margin-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 300px;
    }
    .paragraphegauchegrand {
        position: relative;
        float: left;
        width: 100%;
        height: 170px;
        margin-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 300px;
    }
    .image {
        float:left;
        width:calc(50% - 10px);
        margin-bottom:10px;
    }    
}
@media screen and (max-width: 600px) {
    body {
        cursor: default;
        font-size: 18px;
        font-family: Lucida Sans Unicode, Helvetica, Verdana, Arial;
        background-image: url();
        margin: 0px;
    }
    .h1 {
        display: none;
    }
    .affichegrandecran {
        display:none;
    }
    #cadregeneral {
        position: relative;
        width: calc(100% - 20px);
        padding: 10px;
        background-color: White;
    }
    #entete {
        position: relative;
        background-image:url();        
        width: 100%;
        height: 130px;
        color: White;
        background-color:#212356;
    }
    #inscription1 {
        display: block;
    }
    #inscription2 {
        display: none;
    }
    #inscription3 {
        display: none;
    }
    #bandeauvertical {
        display: none;
    }
    #bandeaulogo {
        position: absolute;
        left: 15px;
        top: 4px;
        width: 250px;
        height: 135px;
        background-image: url(images/bassinda.png);        
    }
    #menu {
        display:none;
    }
    #menumobile {
        position: relative;
        width: 100%;
        height: 135px;
        margin-bottom: 0px;
        display:block;  
        text-align:center;      
    }
    .lien {
        color: #333966;
        font-weight: bold;
        text-decoration: none;
        margin:5px;
        padding:5px;
        border:1px dotted gray;
        border-radius:5px;
        background-color:#efefef;
        float:left;
        height: 48px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    } 
    #pub {
        position: relative;
        width: calc(100% - 20px);
        padding: 10px;
        text-align: center;
    }
    #pubmention {
        display:none;
    }
    #pubmoyenne {
        display: none;
    }
    #pubpetite {
        display: block;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        top: 20px;
        width: 255px;
        height: 88px;
    }
    #centre {
        position: relative;
        width: calc(100% - 20px);
        padding: 10px;
        background-color: White;
    }
    #colonnedroite {
        display: none;
    }
    #bas {
        position:relative;
        clear:both;
        padding:10px;
        width:calc(100% - 20px);
        height:100px;
        text-align:center;
        font-size:18px;
        margin-bottom:20px;
    }
    .lienbas {
        margin-left: 10px;
        margin-right: 10px;
        height: 32px;
    }
    #pubbas {
        position: relative;
        padding:10px;
        width: calc(100% - 20px);
        height: 88px;
        text-align:center;
        margin-bottom:20px;
    }
    #pubbasgrande {
        display: none;
    }
    #pubbasmoyenne {
        display: none;
    }
    #pubbaspetite {
        display: block;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        width: 255px;
        height: 88px;
    }
    .paragraphe {
        width: calc(100% - 20px);
        margin-right: 0px;
        height: 130px;
        margin-bottom: 20px;
    }
    .paragrapheinfo {
        width: calc(100% - 20px);
        margin-right: 0px;
        height: 230px;
    }
    .paragrapheinfobis {
        top: 0px;
    }
    #rotationimage {
        display: none;
    }
    #colonnegauche {
        width: 100%;
    }
    .paragraphebateau {
        display: none;
    }
    .video {
        display: none;
    }
    .videopt {
        display: block;
    }
    .tourismeparagraphe {
        width: calc(100% - 10px);
    }
    .tourismeparagraphefond {
        width: calc(100% - 40px);
    }
    .lienparagraphe {
        display:block;
    }
    .paragraphegauchepetit {
        position: relative;
        float: left;
        width: 100%;
        height: 125px;
        margin-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 300px;
    }
    .paragraphegauchegrand {
        position: relative;
        float: left;
        width: 100%;
        height: 170px;
        margin-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 300px;
    }
    .image {
        float:left;
        width:calc(100% - 10px);
        margin-bottom:10px;
    }    
}
@media screen and (max-width: 400px) {
    body {
        cursor:default;
        font-size:18px;
        font-family:Lucida Sans Unicode, Helvetica, Verdana, Arial;
        background-image:url();
        background-attachment:fixed;        
        margin:0px;
    }
    .h1 {
        display:none;
    }
    #cadregeneral {
        position:relative;
        width:calc(100% - 20px);
        padding:10px;
        background-color:White;
    }
    #entete
    {
        position:relative;
        background-image:url();
        width:100%;
        height:120px;
        color:White;
        background-color:#212356;
        padding:0px;
        text-align:center;
    }
    #bandeau {
        display:none;
    }
    #inscription1 {
        display:none;
    }
    #inscription2 {
        display:none;
    }
    #inscription3 {
        display:none;
    }    
    #bandeauvertical {
        display:none;
    }
    #bandeaulogo {
        position:absolute;
        left:30px;
        width:250px;
        height:135px;
        background-image:url(images/bassinda.png);
    }
    #menu {
        display:none;
    }
    #menumobile {
        position: relative;
        width: 100%;
        height: 190px;
        margin-bottom: 0px;
        display:block;        
    }
    .lien {
        color: #333966;
        font-weight: bold;
        text-decoration: none;
        margin:5px;
        padding:5px;
        border:1px dotted gray;
        border-radius:5px;
        background-color:#efefef;
        float:left;
        height: 48px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }  
    .imgquenpensezvous {
        display:none;
    } 
    .quenpensezvous {
        left:0px;
        width:calc(100% - 10px);
    }
    #pub {
        position:relative;
        width:calc(100% - 20px);
        padding:10px;
        text-align:center;
        height:110px;
    }
    #pubmention {
        display:none;
    }
    #pubmoyenne {
        display:none;
    }
    #pubpetite {
        display:block;
        position:relative;
        margin-left:auto;
        margin-right:auto;
        top:20px;
        width:255px;
        height:88px;
    }
    #centre {
        position:relative;
        width:calc(100% - 10px);
        background-color:White;
    }
    #colonnedroite {
        display:none;
    }
    #bas {
        position:relative;
        clear:both;
        padding:10px;
        width:calc(100% - 20px);
        height:130px;
        text-align:center;
        font-size:18px;
        margin-bottom:20px;
    }
    .lienbas {
        margin-left: 10px;
        margin-right: 10px;
        height: 32px;
    }
    #pubbas {
        position: relative;
        padding:10px;
        width: calc(100% - 20px);
        height: 88px;
        text-align:center;
        margin-bottom:20px;
    }
    #pubbasgrande {
        display: none;
    }
    #pubbasmoyenne {
        display: none;       
    }
    #pubbaspetite {
        display:block;
        position:relative;
        width:235px;
        height:88px;
    }
    .paragraphe {
        width: calc(100% - 20px);
        margin-right: 0px;
        height:140px;
        margin-bottom:20px;
    }
    .paragrapheinfo {
        width: calc(100% - 20px);
        margin-right: 0px;
        height:230px;
    }
    .paragrapheinfobis {
        top:0px;
    }
    #rotationimage
    {
        display:none;
    }
    #colonnegauche {
        width: 100%;
    }
    .paragraphebateau {
        display:none;
    }
    .video {
        display: none;
    }
    .videopt {
        display: block;
    }
    .tourismeparagraphe {
        width: calc(100% - 10px);
    }
    .tourismeparagraphefond {
        width: calc(100% - 40px);
    }
    .lienparagraphe {
        display:none;
    }
    .paragraphegauchepetit {
        position: relative;
        float: left;
        width: 100%;
        height: 125px;
        margin-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 300px;
    }
    .paragraphegauchegrand {
        position: relative;
        float: left;
        width: 100%;
        height: 210px;
        margin-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 300px;
    }
    .image {
        float:left;
        width:calc(100% - 10px);
        margin-bottom:10px;
    }    
}