/* VAR */


/* CORE */
html{background:radial-gradient(circle at center,#eef2f6, #a8bacd); width:100%; height:100%; font-size:10px;}
    body{width:100%; height:100%;}
        div#container{width:100%; height:100%; /*padding:2.5%;*/ text-align:center;}

/* GENERAL */
h1{}
h2,
.h2{margin:0 0 25px 0; font-family:"Lobster", serif; color:#0077c0; font-size:250%; font-weight:400; font-style:normal; text-decoration:none; text-align:center;}
h3{}

p{margin:0 0 25px 0; font-family:"Roboto", sans-serif; color:#0077c0; font-size:150%;}

ul{}
    ul li{}

ol{}
    ol li{}



/* SPECIFIC */
header{}
#background{}
footer{}

.page{display:none; width:100%; height:100%; padding:15px;}
    .page .content{display:flex; align-items:center; justify-content:center; width:100%; height:100%;}

/* PAGE 01 */
#page01{background:url("../asset/img/background-desktop-01.png") no-repeat center center; background-size:contain; display:block;}

/* PAGE 02 */
#page02{background-image:url("../asset/img/background-desktop-02-left.png"), url("../asset/img/background-desktop-02-right.png"); background-repeat:no-repeat; background-position:left center, right center; background-size:contain;}
    #page02 .content{display:block; padding:50px 0 0 0;}

        .evolve{max-width:400px; margin:0 auto; clear:both;}

        .xlv-grid-panel{margin:0;}

        .xlv-grid-and-clues-flex{width:100%;}

        .xlv-preamble,
        .xlv-clear-area,
        .xlv-controls-etc{display:none;}

        .xlv-grid{background:#0077c0; padding:10px; border-radius:10px;}
            .xlv-grid>rect{fill:#0077c0 !important;}
            .xlv-grid g{border-radius:10px}
                .xlv-grid g rect{rx:5px; ry:5px;}
                .xlv-grid g .xlv-cell-text{font-family:"Roboto", sans-serif; color:#0077c0 !important; fill:#0077c0 !important; font-style:normal; font-weight:bold;}
                .xlv-grid g .xlv-cell-num{font-family:"Roboto", sans-serif; color:#0077c0 !important; fill:#0077c0 !important; font-style:normal; font-weight:bold; opacity:50%;}

        .xlv-curr-clue{display:none;}

        .xlv-clues-box,
        .xlv-clues-label{width:100% !important;}

        .xlv-clues{width:100% !important; padding:25px 0 0 0;}
            .xlv-clues .xlv-clues-panel{width:100% !important; text-align:left;}
                .xlv-clues .xlv-clues-panel hr{display:none;}
                .xlv-clues-label{font-family:"Roboto", sans-serif; font-size:115%; color:#0077c0 !important; font-style:normal; font-weight:bold;}
                .xlv-clues-box .xlv-clues-label,
                .xlv-clues-box .xlv-clue-label,
                .xlv-clues-box td{font-family:"Roboto", sans-serif;  font-size:85%; color:#1c1d3b !important; font-style:normal; font-weight:normal;}
                    .wordnumber{background:#0077c0; display:block; padding:3px 6px 3px 6px; font-size:65%; color:#fff !important; text-align:center; border-radius:5px;}

        .button{background:#0077c0; display:block; max-width:400px; margin:15px auto; padding:10px 0 10px 0; font-family:"Roboto", sans-serif;  font-size:125%; color:#fff !important; font-style:normal; font-weight:bold; text-decoration:none; border-radius:25px;}
        

/* PAGE 03 */
#page03{background-image:url("../asset/img/background-desktop-02-left.png"), url("../asset/img/background-desktop-02-right.png"); background-repeat:no-repeat; background-position:-10% center, 110% center; background-size:contain;}
    #page03 #video{margin:0 15px 0 0; border-radius:10px; overflow:hidden;}
            #page03 #video iframe{width:100%; /*max-width:400px;*/ height:auto; min-height:600px; max-height:100%; margin:0 0 25px 0; border-radius:10px;}
    .side-content{max-width:500px;}
        #page03 .side-content h2{text-align:left; padding:0 15px 0 15px;}
        #page03 .side-content p{text-align:left; padding:0 15px 0 15px;}

    .signature{margin:0 0 25px 0; float:right; width:250px;}
    .logo{margin:0 0 25px 0; float:right; width:250px;}


/* MOBILE */
@media only screen and (max-width: 768px) {
    html{background:radial-gradient(circle at center,#eef2f6, #c2cfdc);}
    body{margin:0;}
    .page .content{flex-wrap:wrap;}

    #page01{/*background-image:url(""); background-repeat:no-repeat; background-position:;*/}
    
    #page02{background-image:none;}
        #page02 .content{padding:0;}

        .button{width:100%;}
    
    #page03{background-image:url("../asset/img/background-mobile-02.png"); background-repeat:no-repeat; background-position:center top; background-size:cover; padding-top:25px;}
        #page03 #video{width:100%; margin:0;}
}