@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed&display=swap');

/*
font-family: 'Roboto Condensed', sans-serif;
font-family: 'Roboto', sans-serif;
*/

@import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap');

/* font-family: 'Pacifico', cursive; */

@import url('https://fonts.googleapis.com/css?family=Ramabhadra&display=swap');

/* font-family: 'Ramabhadra', sans-serif; */


@import url('https://fonts.googleapis.com/css?family=Anton|Open+Sans+Condensed:300&display=swap');

/*
font-family: 'Open Sans Condensed', sans-serif;
font-family: 'Anton', sans-serif;
*/

@import url('https://fonts.googleapis.com/css?family=Acme|Bangers|Great+Vibes|Indie+Flower|Lobster|Merriweather&display=swap');

/*
font-family: 'Merriweather', serif;
font-family: 'Indie Flower', cursive;
font-family: 'Lobster', cursive;
font-family: 'Acme', sans-serif;
font-family: 'Great Vibes', cursive;
font-family: 'Bangers', cursive;
*/

*, *::after, *::before {
    box-sizing:border-box;
    padding:0;
}

/* In case mobile phone is detected */


.mb-dialog {
    display:none;
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    z-index: 999;
    background: lightblue;
    padding: 40px;
    text-align:center;
}

.mb-dialog p {
    font-size: 1.64rem;
}

.mb-dialog span {
    font-size: 5rem;
}


/* Mainstream */

html {
    width: 100%;
    height: 100%;
    overflow:hidden;
    position:relative;
    font-family: 'Roboto Condensed', sans-serif;

}

body {
    background-size:cover;
}


body.theme-1 {
    background-color:floralwhite;
}

body.theme-2 {
    background-image:url('resources/animated2.gif');
}

body.theme-3 {
    background-image:url('resources/static1.png');
}

body.theme-4 {
    background-image:url('resources/backgrounds/background8.jpg');
}

body.theme-5 {
    background-image:url('resources/backgrounds/background9.jpg');
}

body.theme-6 {
    background-image:url('resources/backgrounds/background10.jpg');
}

body.theme-7 {
    background-image:url('resources/backgrounds/background11.gif');
}

body.newBackground {
    transition:all 0.1s ease-out;
}

.lang-selector {
    display:block;
    overflow:hidden;
    /**/
    position:absolute;
    bottom:60px;
    right:20px;
    z-index:998;
    /**/
    background-color:rgba(0, 0, 0, 0.5);
    border-radius:7px;
    /**/
    transition:all 0.4s ease-out;
}


.lang-selector .flag-picker {
    display:inline-block;
    cursor:pointer;
    opacity:0.7;
    transition:all 0.2s ease-out;
}

.lang-selector .flag-picker:hover {
    opacity:1;
}

.lang-selector .flag-picker.selected {
    opacity:1;
}


.bar {
    /*border:1px solid yellow;*/
    width:100%;
    min-height:150px;
    /**/
    position:relative;
    z-index:997;
    left:0;  
    transform:translateY(-100%); 
    /**/  
    background-color: rgba(255, 255, 255, 0.7);
}

.bar-o, .bar-u {
    transition:all 0.3s ease-out;
}

.bar .forms {
    background-color: rgba(255, 255, 255, 0.7);
    width:100%;
    /**/
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    /**/
    margin:0;
    padding: 20px 40px;

}

.bar .forms div {
    margin: 5px 15px;
    display:inline-block;
}

.bar .forms div.table {
    display:table;
}

.bar .form {
    min-height:59px;
    /*vertical-align:text-bottom;*/
}


.bar .form.table .wrapper {
    display:table-cell;
    vertical-align:bottom;
}

.bar .forms label {
    font-size:1.3rem;
}

.bar .forms input {
    width:120px;
}

.bar .forms select {
    box-sizing:content-box;
    min-width:150px;
    min-height:20px;
    font-size:1.3rem;
    padding:2px 4px;

}

.bar .forms button {
    font-size:1.3rem;
}

.bar .bar-toggler {
    /*border:1px solid red;*/
    display:block;
    content:url('resources/arrow_new1.png');
    width:50px;
    height:50px;
    opacity:0.9;
    /**/
    position:absolute;
    bottom:-50px;
    left:70px;
    transition:all 0.3s ease-out;
    /**/
    overflow:hidden;
}


.bar .bar-toggler::selection { /* to remove the blue glow while clicking on it in firefox */
    outline:none;
}

.bar .bar-toggler-u {
    content:url('resources/arrows/arrow_down.png');
}

.bar .bar-toggler-o {
    content:url('resources/arrows/arrow_up.png');
    opacity:0.6;
}


.bar .intro {
    font-family: 'Roboto', sans-serif;
    font-weight:bold;
    font-size:1.3rem;
    text-align:Center;
    line-height:30px;
    padding:10px;
}

.bar .intro span {
    color:dimgray;
}

.bar .intro a {
    color:black;
    text-decoration:none;
    font-size:2rem;
    margin:2px;
}

.bar .intro a:hover {
    color:gray;
}






/* MODAL*/

.modal {
    font-size:1.3rem;
}

.modal .modal-header {
    font-size:1.5rem;
}

.modal h3, .modal .alert {
    font-size:1.4rem;
}

.modal .form {
    display:inline-block;
    margin:1.6% /*10px*/;
    color:gray;
}

.modal .alert {
    color:rgba(255, 0, 0, 0.7)
}

.modal .form label {
    color:rgba(0, 0, 0, 0.7);
}

.modal .form input {
    color:black;
    padding:5px;
}

.modal .form input::placeholder {
    color:rgba(0, 0, 0, 0.4);
}







/* THE CLOCK */


.clock {
    /*border:1px solid red;*/
    /**/
    min-width:700px;
    min-height:400px; /*used to be just height*/
    /**/
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    /**/
    padding: 30px;
}

.clock .dc, .clock .date {
    /*cursor:wait;*/
    cursor:help;
}


.clock .dc::selection, .clock .dc p::selection, .clock .dc div::selection, .clock .date::selection {
    background-color:none; /*doesn't work*/
}

.clock.theme-1 {
    font-family: 'Roboto Condensed', sans-serif;
    text-align:left;
    color:black;
  /*  min-width:700px;
    min-height:400px; */
}

.clock.theme-1 .dc p {
    font-size:10.4rem;
}

.clock.theme-1 .dc div {
    font-size:5.3rem;
}

.clock.theme-1 .dc div span {
    color: rgb(54, 113, 201);
}

.clock.theme-1 .date {
    font-size:2.8rem;
}

.clock.theme-2 {
    font-family: 'Pacifico', cursive;
    background-color: rgba(140, 140, 140, 0.3);
    border-radius: 2.14rem;
    border: 1px solid white;
    text-align: center;
    color: #f0f8ff;
    min-width:700px;
    min-height:400px;
    /**/
    padding: 2% 8% 4% 8%;
}

.clock.theme-2 .dc div {
    font-size:5rem;
}

.clock.theme-2 .dc div span {
    color:#ffff00;
}


.clock.theme-3 {
    font-family: 'Ramabhadra', sans-serif;
    text-align: left;
    color:rgba(0, 0, 0, 0.7);
    min-width:700px;
    min-height:400px;
}

.clock.theme-3 .dc div {
    font-size:4rem;
}

.clock.theme-3 .dc div span {
    color:rgba(0, 0, 0, 1);
}


.clock.theme-4 {
    border:2px solid yellow;
    border-radius:7px;
    background-color:rgb(0, 77, 77, 0.4);
    font-family: 'Roboto Condensed', sans-serif;
    color:yellow;
    text-align:left;
    min-width:700px;
    min-height:400px;
    /**/
    padding:2.5% 16% 4% 2%;
}

.clock.theme-4 .dc div {
    font-size:5rem;
}

.clock.theme-4 .dc div span {
    color:#95F1A8;
}


.clock.theme-5 {
    border: 5px solid blueviolet;
    border-radius: 100%;
    background-color: rgba(256, 256, 256, 0.9);
    font-family: 'Lobster', cursive;
    color: #CE369B;
    text-align:center;
    min-width: 500px;
    min-height: 400px;
    top: 70%;
    /**/
    padding: 2% 4% 3% 4%;
}

.clock.theme-5 .dc {
    margin-top:3.57rem;
}

.clock.theme-5 .dc div {
    font-size:4rem;
}

.clock.theme-5 .dc div span {
    color:#3FB9EA;
}


.clock.theme-6 {
    border:7px dashed rgb(255, 251, 100);
    color: rgb(255, 251, 100);
    background-color:rgba(256, 256, 256, 0.3);
    font-family: 'Open Sans Condensed', sans-serif;
    text-align: left;
    top:42%;
    left:40%;
    /**/
    padding: 1% 17% 2% 1.5%;
}

.clock.theme-6 .dc div {
    font-size:4rem;
}

.clock.theme-6 .dc div span {
    color: rgb(6, 255, 242);
}

.clock.theme-7 {
    border: 3px solid white;
    border-radius: 15px;
    background-color: rgba(0, 0, 0, 0.6);
    color: rgb(237, 253, 219);
    font-family: Bangers, cursive;
    text-align: right;
    left: 65%/*1250px*/;
    /**/
    padding: 1.2% 1.1% 2% 14%;
}

.clock.theme-7 .dc div span {
    font-size:5.7rem;
    color:#E99EF1;
}

.dc {
    /*border:1px solid blue;*/
    /**/
    margin-top:60px;
    font-size:11rem;
}

.dc p {
    margin:0;
    display:inline-block;
}

.dc div {
    display:inline-block;
    
}

.dc div * {
    display:block;
}

.dc div i {
    font-size:70%;
    /*color:black;*/
}

.dc div span {
    font-size:100%;
}


.date {
    /*border:1px solid green;*/
    /**/
    margin-top:40px;
    /**/
    font-size:3rem;
}


.custom {
    transition:all 0.1s ease-out;
}









/* don't forget to credit the author of the flags with this code <div>Icons made by <a href="https://www.freepik.com/" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/"             title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/"             title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div> */ 



/* RESPONSIVE */


/* smallest screen */

@media screen and (min-width: 1px) {
    html {
        font-size:5px;
    }

    .bar .forms input {
        width: 70px;
    }

    .lang-selector {
        width:42px;
        height:42px;
    }

    .lang-selector:hover {
        width:224px;
    }

    .lang-selector .flag-picker {
        width:28px;
        height:28px;
        margin:7px 7px;
    }
}

/* average-screen mobile devices */

@media screen and (min-width: 350px) {
    html {
        font-size:8px;
    }

    .bar .forms input {
        width: 100px;
    }

    .lang-selector {
        width:48px;
        height:48px;
    }

    .lang-selector:hover {
        width:256px;
    }

    .lang-selector .flag-picker {
        width:32px;
        height:32px;
        margin:8px 8px;
    }
}


/* larger-screen mobile devices */ 

@media screen and (min-width: 400px) {
    .bar .forms input {
        width: 120px;
    }

    .lang-selector {
        width:60px;
        height:60px;
    }

    .lang-selector:hover {
        width:320px;
    }

    .lang-selector .flag-picker {
        width:40px;
        height:40px;
        margin:10px 10px;
    }
}


/* Mobile devices on the whole*/

@media screen and (max-width: 768px) {
    .no-mobile {
       display:none !important;
    }

    html {
        font-size:8px;
    }

    .bar {
        background-color: rgba(255, 255, 255, 0.9);
    }

    .clock {
        min-width:100%;
        min-width:100%;
    }
}

/* if greater than iPad -----> */

@media screen and (min-width: 768px) {
    html {
        font-size:10px;
    }
}

/* anything less than iPad Pro, iPad Pro included */ 

@media screen and (max-width: 1024px) {
    .no-tablet {
        display: none;
    }
}


/* Macbook Pro 13.3' Retina display  */
@media screen and (min-width:2560px) {
    html {
        font-size:17px;
    }

    .bar .forms div {
        margin: 0.1% 0.8%;
    }

    .lang-selector {
        width:90px;
        height:90px;
    }

    .lang-selector:hover {
        width:480px;
    }

    .lang-selector .flag-picker {
        width:60px;
        height:60px;
        margin:15px 15px;
    }
}


/* Macbook Pro 15.4' Retina display  */
@media screen and (min-width:2880px) {
    html {
        font-size:19px;
    }
}