@import url(https://fonts.googleapis.com/css?family=Roboto:400,100);
body{
    font-size: 100%;
    margin:0;
    background: #4ea771;
    background-size: cover;
    -webkit-user-select: none; 
    -moz-user-select: none;
    -ms-user-select: none;
}
#container{
    height:100vh;
}
#mainTextContainer{
    position: absolute;
    top:28%;
    width: 100%;
}
#horaSpan{
    font-family: 'Roboto', sans-serif;
    font-weight: 100; 
    font-size:1800%;
    color:white;
}
#icono_tiempo{
    position: absolute;
    top:29%;
    left:70%;
    width:25%;
}
#sublinea{
    font-family: 'Roboto', sans-serif;
    font-weight: 100; 
    font-size:450%;
    color:white;
    margin-top:-2%;
    margin-left:2%;
}
#divis_2{
    font-size:115%;
}
#diaSpan{
    font-family: 'Roboto', sans-serif;
    font-weight: 400; 
    font-size:100%;
}
#ubicSpan{
    font-family: 'Roboto', sans-serif;
    font-weight: 100; 
    font-size:100%;
}
#settingsImg{
    position: absolute;
    top:94%;
    left:96%;
    width:3.5%;
}
#tempSpan{
    font-family: 'Roboto', sans-serif;
    font-weight: 400; 
    font-size:100%;
}
#tUnit{
    font-size:52.5%;
    vertical-align:52.5%;
}
#debugDiv{
    display:none;
    color:white;
    font-family:sans-serif;
    -webkit-user-select: auto; 
    -moz-user-select: auto;
    -ms-user-select: auto;  
}
#settingsDiv{
    display:none;
    color:white;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}
#debugImg{
    position: absolute;
    top:94%;
    right:96.5%;
    width:3%;
}
a:link {color: #ffffff}
a:visited {color: #ffffff}
a:hover {color: #000}
a:active {color: #ffffff}
button{
    cursor:pointer;
}

#loading{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background:#4ea771;
    display:visible;
    z-index: 2;
}
#loadingImg{
    position: absolute;
    top:48%;
    left:38%;
}
#loadingText{
    margin-top: 85vh;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 400; 
    font-size:100%; 
    text-align:center;
}
/* MEDIA QUERIES */


        /* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-width : 321px) 
and (max-width : 360px) {
    #mainTextContainer{
    top:35%;
    width: 100%;
    }
    #horaSpan{
    font-size:500%;
    }
    #sublinea{
    font-size:140%;
    margin-top:-2%;
    margin-left:2%;
    }
    #icono_tiempo{
    top:32.5%;
    left:65%;
    width:35%;
    }
    #settingsImg{
    top:94.5%;
    left:92%;
    width:7.5%;
    }
    #debugImg{
    top:94%;
    right:92%;
    width:7.5%;
    }
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
    #mainTextContainer{
    top:35%;
    width: 100%;
    }
    #horaSpan{
    font-size:500%;
    }
    #sublinea{
    font-size:150%;
    margin-top:-2%;
    margin-left:2%;
    }
    #icono_tiempo{
    top:35%;
    width:30%;
    }
    #settingsImg{
    top:94%;
    left:92%;
    width:7.5%;
    }
    #debugImg{
    top:94%;
    right:92%;
    width:7.5%;
    }
}
    /* y636: Crappy Smartphones ---------- */
@media only screen 
and (max-width : 250px) {
    #mainTextContainer{
    top:33%;
    width: 100%;
    }
    #horaSpan{
    font-size:400%;
    }
    #sublinea{
    font-size:100%;
    margin-top:-2%;
    margin-left:2%;
    }
    #icono_tiempo{
    top:36%;
    }
    #settingsImg{
    top:94%;
    left:92%;
    width:7.5%;
    }
    #debugImg{
    top:94%;
    right:92%;
    width:7.5%;
    }
}

/* y636: Tablets */
@media only screen 
and (min-width : 361px) 
and (max-width : 768px) {
    #mainTextContainer{
    top:35%;
    width: 100%;
    }
    #horaSpan{
    font-size:990%;
    }
    #sublinea{
    font-size:250%;
    margin-top:-2%;
    margin-left:2%;
    }
    #icono_tiempo{
    top:35%;
    left:65%;
    width:35%;
    }
    #settingsImg{
    top:94.5%;
    left:92%;
    width:7.5%;
    }
    #debugImg{
    top:94%;
    right:92%;
    width:7.5%;
    }
}
/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 479px)
and (max-width : 765px)	{
    #mainTextContainer{
    top:38%;
    width: 100%;
    }
    #horaSpan{
    font-size:600%;
    }
    #sublinea{
    font-size:200%;
    margin-top:-2%;
    margin-left:2%;
    }
    #icono_tiempo{
    top:35%;
    width:30%;
    }
    #settingsImg{
    top:94%;
    left:92%;
    width:5.5%;
    }
    #debugImg{
    top:90%;
    right:92%;
    width:5.5%;
    }
}
/* y636: 640-480 */
@media only screen 
and (width : 640px) 
and (height : 480px) {
    #mainTextContainer{
    top:35%;
    width: 100%;
    }
    #horaSpan{
    font-size:750%;
    }
    #sublinea{
    font-size:250%;
    margin-top:-2%;
    margin-left:2%;
    }
    #icono_tiempo{
    top:31%;
    left:65%;
    width:35%;
    }
    #settingsImg{
    top:90.5%;
    left:93.5%;
    width:5.5%;
    }
    #debugImg{
    top:90.5%;
    right:93.5%;
    width:5.5%;
    }
}
/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-width : 766px) 
and (max-width : 1024px) {
    #mainTextContainer{
    top:30%;
    width: 100%;
    }
    #horaSpan{
    font-size:1500%;
    }
    #sublinea{
    font-size:350%;
    margin-top:-2%;
    margin-left:2%;
    }
    #icono_tiempo{
    top:31%;
    left:65%;
    width:35%;
    }
    #settingsImg{
    top:93.5%;
    left:92%;
    width:7.5%;
    }
    #debugImg{
    top:94%;
    right:92%;
    width:7.5%;
    }
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-width : 770px) 
and (max-width : 1024px) 
and (orientation : landscape) {
    #mainTextContainer{
    top:25%;
    width: 100%;
    }
    #horaSpan{
    font-size:1700%;
    }
    #sublinea{
    font-size:470%;
    margin-top:-2%;
    margin-left:2%;
    }
    #icono_tiempo{
    top:24%;
    left:65%;
    width:35%;
    }
    #settingsImg{
    top:92.5%;
    left:94%;
    width:4.5%;
    }
    #debugImg{
    top:92.5%;
    right:94%;
    width:4.5%;
    }
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-width : 766px) 
and (max-width : 1024px) 
and (orientation : portrait) {
    #mainTextContainer{
    top:32.5%;
    width: 100%;
    }
    #horaSpan{
    font-size:1200%;
    }
}

/* y636: N7 Landscape */
@media only screen 
and (min-width : 960px) 
and (max-width : 970px) 
and (orientation : landscape) {
    #mainTextContainer{
    top:30%;
    width: 100%;
    }
    #horaSpan{
    font-size:1200%;
    }
    #sublinea{
    font-size:400%;
    margin-top:-2%;
    margin-left:2%;
    }
    #icono_tiempo{
    top:26%;
    width:30%;
    }
}
/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1023px)
and (max-width : 1278px){
    #mainTextContainer{
    top:30%;
    width: 100%;
    }
    #horaSpan{
    font-size:1200%;
    }
    #sublinea{
    font-size:420%;
    margin-top:-2%;
    margin-left:2%;
    }
    #icono_tiempo{
    top:25%;
    left:70%;
    width:30%;
    }
    #settingsImg{
    top:92.5%;
    left:95.5%;
    width:3.5%;
    }
    #debugImg{
    top:92.5%;
    right:95.5%;
    width:3.5%;
    }
}

/* y636: 13 notebook ----------- */
@media only screen 
and (min-width : 1279px)
and (max-width : 1365px){
    #icono_tiempo{
    top:25%;
    left:70%;
    width:30%;
    }
}

/* y636: 15 notebook ----------- */
@media only screen 
and (min-width : 1366px)
and (max-width : 1439px){
    #mainTextContainer{
    top:28%;
    width: 100%;
    }
    #icono_tiempo{
    top:25%;
    left:70%;
    width:30%;
    }
    #settingsImg{
    top:92.5%;
    left:96%;
    width:3.5%;
    }
}

/* y636: 19 notebook ----------- */
@media only screen 
and (min-width : 1440px)
and (max-width : 1598px){
    #mainTextContainer{
    top:25%;
    width: 100%;
    }
    #horaSpan{
    font-size:2000%;
    }
    #sublinea{
    font-size:550%;
    margin-top:-2%;
    margin-left:2%;
    }
    #icono_tiempo{
    top:23%;
    left:70%;
    width:30%;
    }
    #settingsImg{
    top:92.5%;
    left:95.5%;
    width:3.5%;
    }
    #debugImg{
    top:92.5%;
    right:95.5%;
    width:3.5%;
    }
}
/* y636: 20 notebook ----------- */
@media only screen 
and (min-width : 1599px)
and (max-width : 1678px){
    #mainTextContainer{
    top:25%;
    width: 100%;
    }
    #horaSpan{
    font-size:2000%;
    }
    #sublinea{
    font-size:550%;
    margin-top:-2%;
    margin-left:2%;
    }
    #icono_tiempo{
    top:19%;
    left:70%;
    width:30%;
    }
    #settingsImg{
    top:92.5%;
    left:95.5%;
    width:3.5%;
    }
}
/* y636: 22 and up res. notebook ----------- */
@media only screen 
and (min-width : 1679px)
and (max-width : 1918px){
    #mainTextContainer{
    top:25%;
    width: 100%;
    }
    #horaSpan{
    font-size:2200%;
    }
    #sublinea{
    font-size:600%;
    margin-top:-2%;
    margin-left:2%;
    }
    #icono_tiempo{
    top:22%;
    left:70%;
    width:30%;
    }
}
/* y636: FHD screens and up ----------- */
@media only screen 
and (min-width : 1919px){
    #mainTextContainer{
    top:25%;
    width: 100%;
    }
    #horaSpan{
    font-size:2400%;
    }
    #sublinea{
    font-size:680%;
    margin-top:-2%;
    margin-left:2%;
    }
    #icono_tiempo{
    top:20%;
    left:70%;
    width:30%;
    }
    #settingsImg{
    top:92%;
    left:95.5%;
    width:3.5%;
    }
    #debugImg{
    top:92%;
    right:95.5%;
    width:3.5%;
    }
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    #mainTextContainer{
    top:35%;
    width: 100%;
    }
    #horaSpan{
    font-size:600%;
    }
    #sublinea{
    font-size:150%;
    margin-top:-2%;
    margin-left:2%;
    }
    #icono_tiempo{
    top:37%;
    width:30%;
    }
    #settingsImg{
    top:94%;
    left:92%;
    width:7.5%;
    }
    #debugImg{
    top:94%;
    right:92%;
    width:7.5%;
    }
}