* { box-sizing: border-box;
    font-family:"Arial", Arial, Sans-serif;
    
    }

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
html,body{  
    background-color: rgb(255,255,230); 
            height: 100%;
            margin:0;
            padding:0;
            }
.wrapper {  
            min-height: 100%;
            margin-bottom: -50px;
            position: relative;}
.push {     
            height:50px;
            clear: both;}
#masthead img { 
            display: block;
            margin-left: auto;
            margin-right: auto;
            width:100%;
            height:auto;}

#contacts { 
            float:right; 
            text-align: center;
        }
#cell_buttons {
            float:left;
            }
#cell_buttons a {
    text-decoration: none;
    background-color: inherit;
    color:inherit;
}
#cell_buttons p {
            background-color: rgb(142,34,50);
            color:rgba(237,166,0,1);
            padding-top: 20px;
            padding-bottom: 20px;
            border: 1px double rgba(237,166,0,1);
            margin-top: 0px;
            margin-bottom: 0px;
            min-height:30px;
                }
#cell_buttons p:hover, #cell_buttons ul:hover > div{ 
            color:rgb(142,34,50);
            background-color: rgba(237,166,0,1);}
#cell_buttons .dropdown p{
            padding-left: 30%;
            border-style: hidden;
}
#cell_buttons div { color: inherit;
                    background-color: inherit;}
#cell_buttons ul {  position:relative;
                    list-style-type:none; 
                    margin: 0;
                    padding:0;
                    color:rgba(237,166,0,1);
                    background-color: rgb(142,34,50);
                    border: 1px double rgba(237,166,0,1);
                    clear:both;}
                    }
#cell_buttons ul:hover {color:rgb(142,34,50);
                        background-color: rgba(237,166,0,1); }
#cell_buttons li { list-style-type: none; 
                    padding-top:20px;
                    padding-bottom: 20px;
                    height:50px;
                    margin-top: 0px;
                    margin-bottom: 0px;
                    margin-left: 0px;
                    padding-left:auto;
                    padding-right: auto;}
.btnCell {
        width:70%;
        padding-left: 10px;
        border-right: none;
        float:left;
        background-color: inherit;
        color:inherit;
}
.arrow {
    border-left: none;
        float:right;
        width:30%;
        background-color: inherit;
        color:inherit;
        text-align: center;
        }
.btn, .dropdown {background-color: transparent;}
.btn  span, .btn p{background-color: transparent;
                font-family: "Georgia", Georgia, Sans-serif;}
#desktop_buttons {  

            float:left;
            padding-top: 120px; /* SUJET À CHANGEMENT, ICI LE POSITIONNEMENT DES DKT_BUTTONS */
            min-height: 150px;
            background-image: url("image/img_wave_large.jpg");
            background-repeat:  no-repeat;
            background-size : 100% 100%;}
#desktop_buttons a, #cell_buttons a {
            text-decoration: none;
}
.dropdown{display: none;
            clear:both;}
#main {     clear:both;
            padding-left: 8.33%;
            padding-right: 8.33%;}
.column, .special-column, .sole-column {   
            float:left;
            display:block;
            margin-top: 25px;
            margin-bottom: 25px;
            }
p {         
            word-wrap: break-word;
            }
li {        
            word-wrap:break-word;
            list-style-position: outside;
            text-align: justify;
            list-style-type: disc;
            margin-top: 10px;
            margin-bottom: 10px;
            
            


}

strong, b  {   
            color: rgb(142,34,50);
            font-weight: bold;
}
#main h1,h2,h3,h4,h5,h6{   
            color: rgb(142,34,50);
            word-wrap: break-word;
            text-align: center;
           }
#main img { 
            display: block;
            margin:auto;}
.titles     {
            font-size: 120%;
            color:rgb(142,34,50);
}
.titles p{  
            border-bottom: 2px solid rgb(142,34,50);
            padding-left: 5px;
}
.titles li {
            list-style: none;
}
#footnote { 
            position: relative;
            min-height: 50px;
            background-image: url("image/img_footnote.jpg");
            background-repeat:  no-repeat;
            background-size : 100% 100%;}

#footnote a:hover img {
            box-shadow: 0px 0px 15px rgb(255,255,230);}

.desktop_only {display: none;}
.cell_only {display:block;}
.special-column {background-color: rgba(237,166,0,0.2);
                    border-radius: 30px;}
#newsletter{display:block;}
#profilePicture{width: 45%;}
@media only screen and (min-width: 768px) {
    /* For desktop: !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}

    .desktop_only{display: block;}
    .cell_only{display: none;}

    #masthead img {
                margin-left: 15%;
                float:left; 
                overflow: auto;
                transform:translate(0px,15px);
                width:400px;
                height:auto;}
    #contacts { 
                padding-top: 20px;
                transform:translate(0px,25px);
                }
    .btn {   
                width:125px;
                padding-left: 10px;
                padding-right: 10px;
                padding-top:10px;
                padding-bottom:10px;
                float:right;}

    .btn span { 
                display: block;
                color:rgb(255,255,230);
                position: relative;
                border-bottom: 1px solid rgb(255,255,230);
                text-align: center;
               
    }
    .btn span:hover{
                color:rgba(237,166,0,1);
                border-color: rgba(237,166,0,1);
                }
    .dropdown { 
                
                position: absolute;
                padding-left: 25px;
                padding-top: 9px;
                z-index: 1;}
    .dropdown p{
                background-color: rgb(142,34,50);
                padding-left: 10px;
                padding-right: 10px;
                padding-top: 5px;
                padding-bottom: 5px;
                margin-top: 0px;
                margin-bottom: 0px;
                color: rgba(237,166,0,1);
                border: 1px solid rgba(237,166,0,1);}

    .dropdown p:hover  {
                background-color: rgba(237,166,0,1);
                color: rgb(142,34,50);
                } 
    .titles {margin-right: 8.33%;}
    .sole-column { 
                    margin-right: 25%;
                    margin-left: 25%;
                    width:50%;}
    #profilePicture {width:45%;
                        height:auto;
                    min-width: 150px;
                    }
    
}