@charset "utf-8";

@media all {
    #page {
        min-height:100%;
        width:100%;
        background:#fff url("../medias/index/Léa_Grima_Ap_Tchagui_Ile_De_Ré_Plage_CopyRight_David_Grima.png") no-repeat top left fixed;
        background-size:100% 100%;
        -webkit-background-size:cover;
         -khtml-background-size:cover;
           -moz-background-size:cover;
            -ms-background-size:cover;
             -o-background-size:cover;
                background-size:cover;
    }
        
    h1 {
        font-size:2.5em;
        font-weight:600;
        padding:0.3em 0.5em;
        text-shadow:0 0 0.2em #000;
        width:24.8em;
    }
    h1 a, h1 a:link, h1 a:hover, h1 a:visited, h1 a:focus, h1 a:active {
        text-decoration:none;
        color:#fff;
    }
    
    h2 {
        font-size:2em;
        font-weight: 300;
        text-align: center;
        padding:0.5em 0 0.5em 0;
    }
    
    p {
        clear:both;
        text-align:justify;
        margin:1em 0 1em 0;
    }
    
    table {
        width: 100%;
    }
    table caption {
        font-size:2em;
        font-weight: 300;
        padding-bottom:1em;
    }
    table td {
        font-size:2em;
        line-height:2em;
        background-color:#fff;
        background-color:rgba(255,255,255,0.7);
        border:1px solid #000;
    }
    
    table.little td {
        font-size:1em;
        line-height:1em;
        padding:0.5em;
    }
    
    .text {
        padding: 0.5em;
        background-color:#fff;
        background-color:rgba(255,255,255,0.7);
        border:1px solid #000;
    }
    
    .margin {
        margin-bottom:2em;
    }
    
    .file {
        width: 5em;
        border: 1px solid #000000;
    }
    
    .center {
        text-align: center;
    }
        
    ul.list {
        list-style-type: square;
    }
    .list li {
        margin-left: 1em;
    }
    
    #adresse {
        display:none;
    } 
    
    /* Menu du site */
    #menuAssociation {
        font-size:2em;
        font-weight:100;
        display:block;
        background-color:#000;
        color:white;
        padding-top:0.4em;
    }
    #menuAssociation a {
        display:block;
        width:8em;
        padding:0.2em 1em 0.2em 1em;
        text-decoration:none;
        color:white;
        -webkit-transition:background-color 0.5s ease;
         -khtml-transition:background-color 0.5s ease;
           -moz-transition:background-color 0.5s ease;
            -ms-transition:background-color 0.5s ease;
             -o-transition:background-color 0.5s ease;
                transition:background-color 0.5s ease;
    }
    #menuAssociation a.actif {
        /*text-shadow:0 0 0.2em #000;
        background-color:rgba(255,255,255,0.3);*/
    }
    #menuAssociation a:hover {
        text-shadow:0 0 0.2em #000;
        background-color:rgba(255,255,255,0.5);
    }
    #menuInscription a, #menuContact a, #menuFacebook a {
        font-size:0.5em;
        font-weight:200;
        text-align:center;
        position:absolute;
        -webkit-transition:background-size 0.5s ease, color 0.5s ease;
         -khtml-transition:background-size 0.5s ease, color 0.5s ease;
           -moz-transition:background-size 0.5s ease, color 0.5s ease;
            -ms-transition:background-size 0.5s ease, color 0.5s ease;
             -o-transition:background-size 0.5s ease, color 0.5s ease;
                transition:background-size 0.5s ease, color 0.5s ease;
    }
    #menuInscription a {
        background:transparent url(../medias/icones/taekwondo-couple-silhouettes.png) no-repeat center top;
        background-size:3.1em;
        padding:3em 0 0 0;
        height:4em;
        width:6em;
        top:25em;
        right:5em;
    }
    #menuContact a {
        background:transparent url(../medias/icones/online-help.png) no-repeat center top;
        background-size:2.5em;
        padding:2.5em 0 0 0;
        height:3.5em;
        width:7em;
        top:31em;
        right:8.5em;
    }
    #menuFacebook a {
        background:transparent url(../medias/icones/facebook-logo.png) no-repeat center top;
        background-size:2.5em;
        padding:2.5em 0 0 0;
        height:3.5em;
        width:5.3em;
        top:31em;
        right:1.5em;
    }
    #menuInscription a:hover, #menuContact a:hover, #menuFacebook a:hover {
        text-shadow:none;
        background-color:transparent;
        color:transparent;
    }
    #menuInscription a:hover {
        background-size:4.1em;
    }
    #menuContact a:hover {
        background-size:3.5em;
    }
    #menuFacebook a:hover {
        background-size:3.5em;
    }
        
    /* Copyrigth */
    #copyright {
        font-size:0.6em;
        font-weight:100;
        display:block;
    }
    #copyright a {
        color:#fff;
        text-decoration:none;
    }
    #copyright a:hover {
        border-bottom:1px solid #fff;
        border-color:rgba(255,255,255,0.5);
    }
    
}

@media screen and (min-width:801px) {
    body {
        overflow:hidden;
    }

    .right {
        float: right; 
        width: 49%;
    }
    .left {
        float: left;        
        width: 49%;
    }

    .club .left {
        width: 33%;
    }
    .club .right {
        width: 33%;
    }

    .full {
        width: 100%;
    }

    #burger {
        display:none;
    }
    #menuAssociation {
        position:fixed;
        top:0;
        right:0;
        width:8.5em;
        height:100%;
        background-color:rgba(0,0,0,0.5);
    }
    #copyright {
        position:fixed;
        top:63em;
        right:5em;
    }

    /* Content */
    #content {
        padding:1em;
        height:33.8em;
        width:60em;
        background-color:#fff;
        background-color:rgba(255,255,255,0.85);
        overflow: auto;
    }

    #carte {
        width:62em;
        height:36.5em;
    }
    
    table.tarif {
        width: 28em;
        margin-top:2em;
    }
    table#passeport.tarif {
        margin-right:1.5em;
    }
    table.tarif td {
        width:7.5em;
    }
    
    table.prof img {
        width:5em;
    }
    table.prof td:nth-child(2) {
            padding-left: 1em;
    }
    
    div.valeurs img {
        width:14.75em;
        vertical-align:text-top;
    }
} 

@media screen and (max-width:800px) {
    body {
        Aoverflow-x:hidden;
    }

    .club .left {
        width: 100%;
    }
    .club .right {
        width: 100%;
    }

    #page{
        background:#fff none;        
    }
    h1 {
        display:none;
    }
    h2 {
        color:#40566e;
        font-size:1em;
        font-weight:600;
        margin-top:1em;
    }
    p {
        text-align:left;
    }
    .text{
        background-color:#c0d9ed;
        border-left:none;
        border-right:none;
    }
    #burger {
        font-size:1em;
        color:#ffffff;
        background-color:#40566e;
        cursor:pointer;
        text-align:center;
    }
    #burger img {
        width:2em;
    }
    #menuAssociation {
        width:100%;
        position:relative;
        height:0;
        background-color:#40566e;
        overflow: hidden;
        -webkit-transition: height 0.5s ease;
           -moz-transition: height 0.5s ease;
            -ms-transition: height 0.5s ease;
             -o-transition: height 0.5s ease;
                transition: height 0.5s ease;

    }
    #menuTKD a, #menuClub a, #menuEvenements a, #menuCours a, #menuProfesseurs a, #menuHoraires a, #menuTarifs a, #menuPlan a {
        font-size:0.8em;
        padding:0.2em 0 0.2em 0;
        width:15.5em;
    }
    #menuInscription a, #menuContact a, #menuFacebook a {
        top:initial;
        right:initial;        
        display:block;
        position: relative;
        float:left;
        margin: 0.3em 0 0 0;
        height:2em;
    }
    #menuInscription a {
        width:100%;
    }
    #menuContact a, #menuFacebook a {
        width:49.5%;
    }

    #copyright {
        text-align:center;
        margin-top:1em;
    }
    #copyright a {
        color:#000;
    }

    /* Content */
    #content {
        margin-top:1em;
        width:100%;
        text-align:center;
    }
    
    #content img {
        width: 90%;
    }
    
    #carte {
        width:100%;
        height:15em;
    }
    
    table td {
        font-size:1em;
        line-height:1em;
    }

    table caption {
        color:#40566e;
        font-size:1em;
        font-weight:600;
        margin-top:1em;
    }
}   

@media print {
}