@font-face {
    font-family: 'Geometos';
    src: url('../fonts/geometos/Geometos.eot');
    src: url('../fonts/geometos/Geometos.eot?#iefix') format('embedded-opentype'),
    url('../fonts/geometos/Geometos.woff2') format('woff2'),
    url('../fonts/geometos/Geometos.woff') format('woff'),
    url('../fonts/geometos/Geometos.ttf') format('truetype'),
    url('../fonts/geometos/Geometos.svg#Geometos') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html{width:100%; height:100%;}
body{  width:100%; height:100%; max-width:600px; max-height:1000px;margin:0 auto; font-size:16px; padding:0; font-family: 'Arial', 'Geometos', sans-serif; font-size:18px; color:#FFF;}
div{ box-sizing: border-box;}



#main-container{position:relative;display:block; width:100%; height:91%; box-sizing: border-box; margin:0; padding:0; z-index:50; background-image:url(../img/fond.jpg); background-position: center; background-size: cover; }

header{
    position:relative; width:100%; height:auto;
}
header #bandeau{ width:100%; height:auto;}

#bloc-date{position:absolute; width:20%; height:auto; bottom:5%; right:5%;}
#bloc-date img{ width:100%; height:auto;}


.geometos-font{font-family: 'Geometos', sans-serif;}
.gold-color{color:rgb(208,154,44);}
.uppercase{text-transform:uppercase;}
.align-center{text-align:center;}
.align-left{text-align:left;}
.align-right{text-align:right;}
.sep-lr{padding:0 15px;}

#txt-erreur{
    display: flex;
    align-self: center;
    justify-content: center;
    font-size:1.6em;
    height:50%;

}
#txt-erreur span {
    display: flex;
    align-items: center;
}


#txt-tenter{
    display: flex;
    align-self: center;
    justify-content: center;
    font-size:1.6em;
    height:8%;
    max-height:40px;
}
#txt-tenter span {
    display: flex;
    align-items: center;
}

#cadeaux{
    display: flex;
    align-self: center;
    justify-content: center;
    height:12%;
    max-height:65px;
}
#cadeaux span {
    display: flex;
    align-items: center;
}
.cadeaux-nom{
    font-weight:bold;
    font-size:1.5em;
    padding:0 3%;
    line-height:1;
}



#txt-boutique{
    display: flex;
    align-self: center;
    justify-content: center;
    font-size:0.9em;
    height:7%;
    max-height:30px;
}
#txt-boutique span {
    display: flex;
    align-items: center;
}

#boutiques{
    display: flex;
    align-self: center;
    justify-content: center;
    height:9%;
    max-height:55px;
    padding:0 30px;
}

#boutiques .logo, #boutiques span{
    display: flex;
    align-items: center;
    height:100%;
    max-width:50%;
}
#boutiques .logo{border:solid 1px #FFFFFF; padding:12px; box-sizing: border-box)}
#boutiques .logo img{max-height:100%; height:auto; width:auto; max-width:100%;}



#lien-reseaux{
    display: flex;
    align-self: center;
    justify-content: center;
    height:25%;
    max-height:140px;
    margin:5% 10% 2% 10%; background:#FFF; box-sizing: border-box; padding:10px; border-radius:30px;
}

#lien-reseaux .reseaux{
    display:block;
    height:100%;
}
#lien-reseaux .reseaux img{max-height:100%; height:auto; width:auto; max-width:100%;}

#lien-reglement{
    display: flex;
    align-self: center;
    justify-content: center;
    height:2%;
    margin-top:3%;
}
#lien-reglement a{
    display: flex;
    align-items: center;
    color:#FFF;
    font-size:0.8em;

    text-decoration: none;
}

footer{
    display: flex;
    align-self: center;
    justify-content: center;
    text-align:center;
    height:9%; padding: 0.4% 10%; background:#FFF; box-sizing: border-box; z-index:100;
}
footer span{
    display: flex;
    align-items: center;
}
footer span #logo{max-height:40px; width:auto; height:100%;}

footer #copyright{
    display: flex;
    align-items: center;
    color:#000;
    font-size:0.8em;
    font-weight:bold;
    text-decoration: none;
    text-align:center;
}


@media only screen and (max-width:480px) {
    #txt-boutique {
        font-size: 0.8em;
    }
    .cadeaux-nom {
        font-size: 1.1em;
        line-height:1.2;
    }
}

@media only screen and (max-width:340px) {
    #txt-tenter {
        font-size: 1.2em;
    }

    .cadeaux-nom {
        font-size: 1.1em;
    }

    #txt-boutique {
        font-size: 0.7em;
    }

    #lien-reseaux {
        margin: 5% 2% 2% 5%;
    }
    #boutiques{
        max-height:50px;
    }
}



@media screen and (orientation:landscape) and (max-height: 640px) {
    html{width:100%; height:100%;}
    body{  width:100%; height:auto; max-width:2000px; max-height:2000px;}


    header{margin-bottom:20px;}
    header #bandeau{ width:100%; height:auto;}
    header #bandeau{width:50%;}

    #bloc-date{position:absolute; width:15%; height:auto; bottom:5%; right:5%;}
    #bloc-date img{ width:100%; height:auto;}


    #txt-tenter{
        height:auto;
        max-height:100px;
        margin-bottom:10px;
    }

    #cadeaux{
        height:auto;
        max-height:300px;
        margin-bottom:10px;
    }

    #lien-reseaux {
        height: 200px;
        max-height: 200px;
    }

    #txt-boutique{
        height:auto;
        max-height:50px;
        margin-bottom:10px;
    }

    #boutiques{
        height:60px;
        max-height:55px;
        padding:0 30px;
    }


    #lien-reglement{
        height:auto;
        margin-top:10px;
        margin-bottom:20px;
    }
    #main-container{
        padding-bottom:15px;
    }

}