/*
Theme Name: chien de Robermont
Theme URL: http://www.chienderobermont.be
Author: Enza Lombardo

Description: Page countdown en attendant la création du site
Version: 1.0
*/


/* --------------------------------------------- */
/* ----------------    Reset    ---------------- */
/* --------------------------------------------- */
a,abbr,acronym,address,applet,article,aside,audio,b,blockquote,big,body,center,canvas,caption,cite,code,command,datalist,dd,del,details,dfn,dl,div,dt,em,embed,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,keygen,label,legend,li,meter,nav,object,ol,output,p,pre,progress,q,s,samp,section,small,span,source,strike,strong,sub,sup,table,tbody,tfoot,thead,th,tr,tdvideo,tt,u,ul,var{background:transparent;border:0 none;margin:0;padding:0;border:0;outline:0;}ol, ul {list-style:none;}blockquote, q {quotes:none;}table, table td {padding:0;border:none;border-collapse:collapse;}img {vertical-align:top;}embed {vertical-align:top;}
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;}
mark, rp, rt, ruby, summary, time {display:inline;}
iframe {border:0; margin:0; padding:0;}


/* -------------------------------------------- */
/* ---------------    General    -------------- */
/* -------------------------------------------- */
body{
    /* background: url("../img/bg-index.jpg") no-repeat center fixed;
    background-size: cover; */
    font-family: 'Caviar Dreams', Arial, sans-serif;
    color: #000;

    background: url("../img/bg-index-miroir.jpg") no-repeat center fixed;
    background-size: cover;

}


/* -------------------------------------------- */
/* --------------    box-actif    ------------- */
/* -------------------------------------------- */

/* --- LOGO --- */
#logo img{
    width: 40%;
}


.side-left{
    top: 0;
    left: 0;
    height: 100vh;
    box-sizing: border-box;
}

.side-left, .side-right{
    width: 100%;
}

#intro-content{
    background: rgba(255,255,255,0.6);
    height: 100vh;
    box-sizing: border-box;
}

/* -- debut -> Box-title -- */

#box-title img{
    padding-left: 20%;
}

#box-title{
    padding-top: 10%;
}

#box-title h1{
    font-family: 'Caviar Dreams Bold', Arial, sans-serif;
    border-left: 3px solid #422E27;
    padding-left: 7%;
    font-size: xx-large;
}

#box-title p{
    font-size: 21px;
    margin-top: 4rem;
    text-align: justify;
    margin-left: 40px;
    margin-right: 40px;
    font-size: x-large;
    margin-left: 5%;
}
/* -- fin -> Box-title -- */


/* -- debut -> countdown -- */
#countdown{
    text-align: center;
    margin: auto;
    top: 0; bottom: 0; left: 0; right: 0;
    padding: 10% 0;
    padding-bottom: 0;
}


#countdown #tiles > span{
    width: 92px;
    max-width: 92px;
    font: bold 48px 'Caviar Dreams Bold', Arial, sans-serif;
    text-align: center;
    color: #000;
    margin: 10px 10px;
    display: inline-block;
    border-bottom: 2px solid #000;
    line-height: 75px;
}

#countdown .labels{
    width: 100%;
    height: 25px;
    text-align: center;
    bottom: 8px;
    font-family: 'Caviar Dreams Bold', Arial, sans-serif;
}

#countdown .labels li{
    width: 102px;
    color: #000;
    font-size:20px;
    text-align: center;
    text-transform: uppercase;
    display: inline-block;
    margin:  7px 3px;
}
/* -- fin -> countdown -- */


/* -- debut -> local -- */
#local{
    font-size: large;
    text-align: center;
    margin-top: 15%;
}
/* -- fin -> local -- */


/* ------------------------------------------------ */
/* ---------------    RESPONSIVE    --------------- */
/* ------------------------------------------------ */

@media(max-height:700px){
    #logo img{
        width: 50%;
    }
    #box-title {
        padding-top: 8px;
    }
    #box-title img{
        padding-left: 40%;
    }

    #box-title h1{
        font-size: 23px;
    }

    #box-title p{
        margin-top: 2rem;
        margin-left: 40px;
        font-size: 20px;
    }
    #countdown{
        padding-top: 6%;
    }
}

@media(max-height:500px){
    #logo img{
        width: 50%;
    }
     #box-title {
        padding-top: 8px;
    }
    #box-title img{

    }
    #box-title h1{
        font-size: 18px;
    }
    #box-title p{

    font-size: 18px;
    margin-top: 25px;
    }
}

@media only screen and (min-width: 1000px){
     #countdown #tiles > span{
        width: 70px;
        font-size: xx-large;
        line-height: 60px;
    }
    #countdown .labels li{
        font-size: large;
        display: inline-block;
        margin: 0 -8px;
    }
}

@media only screen and (min-width: 989px) and (max-width:480px) {

}

@media only screen and (max-width: 479px) {
    #box-title img{
        padding-left: 0;
    }
    #box-title{
        padding-top: 60px;
    }
    #countdown{
        padding: 2rem 0;
    }
    #countdown #tiles > span{
        width: 50px;
        font-size: 38px;
        line-height: 60px;
    }
    #countdown .labels li{
        font-size: 16px;
        display: inline;
        margin: 0 12px;
    }
    #local{
        font-size: medium;
        margin-top: 15px;
    }
}