body {
    margin: 0;
    font-family: "Roboto",sans-serif;
    font-weight: 300;
    background-color: #0c2a4e;
    color:white;
    background: url("../images/silence_bg_home_notext_bw.jpg") no-repeat center center fixed;
    background-size: cover;
    background-position: center -100px;
    overflow-x: hidden;
}
.complete-screen{
    display: grid;
    grid-template-columns: auto 460px;
    grid-template-rows: auto 150px;
}
.card{
    background-color: rgba(0,162,255,1);
    margin-bottom: 0.5rem;
    transition: all 0.3s ease-in-out;
}
.card:last-of-type{
    background-color: rgba(0,162,255,1);
    margin-bottom: 0;
}
.card a{
    display: block;
    position: relative;
    transition: all 0.3s ease-in-out;
}

.card-body-icon
{
    color: rgba(255,255,255,0.2);
    font-size: 30px;
    padding-right: 0.5em;
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    transition: all 0.3s ease-in-out;
}

.card a:hover{
    padding-left: 1rem;
}

.card-body:hover .card-body-icon{
    color: rgba(255,255,255,1);
}

.canton-selector:hover .card{
        opacity: 0.5;
}
.canton-selector:hover .card:hover{
        opacity: 1;
}
.help-box .card{
    background-color: rgba(0,162,255,0.5);
} 
.canton-link-group{
    padding: 1rem 0;
}
.access-grid-item-title {
    display: inline-block;
    font-size: 1.1rem;
    line-height: 2.6rem;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 1.4rem;
    color: white;
    font-weight: 600;
    border: 2px solid white;
    text-align: center;
    margin: 0.4rem 0.8rem 0.4rem 0;
    transition: all 0.3s ease-in-out;
}
.access-grid-item-title:hover,
.login-item-box a.active .access-grid-item-title{
    background-color: white;
    color: rgba(0,162,255,1);
    transform: scale(1.2);
} 
.help-box .access-grid-item-title {
    background-color: white;
    border: 2px solid white;
    color: rgba(0,162,255,1);
    font-size: 1.5rem;

}

.h1, .h2, .h3, h1, h2, h3 {
    font-family: "Roboto Condensed",sans-serif;
    color: white;
    text-transform: uppercase;
}
.h4, h4 {
    font-weight: 400;
}

a{
    color: #00a2ff;
    text-decoration: none;
}
a:hover{
    color: white;
    text-decoration: none;
}
.access-grid-item-list ul{
    padding: 0px 15px 5px 15px;
    margin: 0;
}
.access-grid-item-list li {
    list-style: none;
}
.access-grid-item-list li a,
.access-grid-item-list li a h3{
    color:white;
}
.login-item-box a {
    color: white;
    font-weight: 600;
}
.site-description {
    color: #00a2ff;
    margin: .5em 0 3em 0;
    line-height: 1.3;
    font-size: 1.2rem;
    font-weight: 400;
}
h1.site-title{
    display: inline-block;
    width: 350px;
    height: 160px;
    background: url("../images/silence.svg") no-repeat 50%;
    background-size: auto;
    background-size: contain;
    text-indent: -5000px;
    color: transparent;
    max-width: 100%;
}
.splash-screen-logo {
    margin: 30px 0 0 0;
}

body, html, .complete-screen{
    min-height: 100vh;
}
.copyright-box,
.site-info {
    font-size: 0.75em;
}
.login-item-box{
    transition: all 0.3s ease-in-out;
}


/* footer */
.site-footer ul#menu-menu-sponsors, .site-footer ul#menu-menu-sponsors-2, .site-footer ul.menu {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: stretch;
align-items: flex-start;
padding: 0;
}
.site-footer ul.menu li {
    border-right: 2px solid hsla(0,0%,100%,.4);
    padding-right: 9px !important;
    margin-right: 9px !important;
    font-size: .75em;
    list-style: none;
}
.site-footer ul.menu li a {
    text-transform: uppercase;
}
.site-footer .copyright-box a, .site-footer .site-info a {
    color: rgba(255,255,255,0.4);
    text-decoration: none;
}
.site-footer ul#menu-menu-sponsors, 
.site-footer ul#menu-menu-sponsors-2, 
.site-footer ul#menu-menu-sponsors-2 li, 
.site-footer ul#menu-menu-sponsors li, 
.site-footer ul.menu, 
.site-footer ul.menu li {
list-style: none;
margin: 0;
padding: 0;
}

.extra-login{
    margin: 1em 1em 0 1em;
    font-size: 0.75em;
    display: inline-block;
}

.logo-menu a {
    display: inline-block;
    width: 100px;
    height: 55px;
    text-indent: -5000px;
    margin: 0 28px 20px 0;
    background: no-repeat 50%;
        background-image: none;
        background-size: auto;
    background-size: contain;
}

.logo-ciip a {
    background-image: url(../images/logo-ciip.svg);
    width: 65px;
}
.logo-geneve a {
    background-image: url(../images/logo-etat-ge.svg);
    width: 65px;
}
.logo-unil-cec a {
    background-image: url(../images/logo-unil-cec.svg);
    width: 85px;
    margin-right: 0;
}

.logo-ofc a {
    background-image: url(../images/logo-ofc.svg);
    width: 130px;
    height: 60px;
    margin-right: 0;
}
.site-footer {
    grid-column-start: 1;
    grid-column-end: 3;
    padding-top: 2rem;
    padding-bottom: 1rem;
    color: #fff;
    background: rgba(12,42,78,1);
}
.right-col{
    background: rgba(12,42,78,1);
    padding: 2rem 2rem 0 2rem;
    z-index: 2;
}

.site-footer h2.footer-col-title {
    font-size: .8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: rgba(0,162,255,1);
}
.logdescr{
    font-size: 0.5em;
    text-transform: none;
}
.footer-col {
    margin-right: 2rem;
}

label {
    margin-bottom: .1rem;
    font-size: 0.8em;
}
.form-control:focus{
    border-color: rgba(0,162,255,0.9);
    box-shadow: 0 0 0 .2rem rgba(0,162,255,0.25);
}
.fa{
    color: rgba(0,162,255,1);
}
.input-group-text{
    background-color: rgba(209,237,255,1);
    border: 1px solid rgba(0,162,255,0.25);
}

.btn-primary{
    color: #fff;
    background-color: rgba(0,162,255,0.9);
    border-color: rgba(0,162,255,0.9);
}
.btn-primary:hover {
    color: #fff;
    background-color: rgba(0,162,255,1);
    border-color: rgba(0,162,255,1);
}


/* ANIMATION */

.anim_container {
    text-align: center;
    position:absolute;
    top:55%;
    left:15%;
}

.timer {
    padding: 10px;
    overflow: hidden;
    display: inline-block;
    border-radius: 5px;
    position: relative;
    transform:scale(4.5);
}
@media only screen and (max-width:768px) {
    .timer{transform:scale(1.7);}
    .anim_container{left:auto;right:120px;top:50%;}
    .fullhomelink{background-position: -450px center;}
}

@media only screen and (max-width:640px) {
    .timer{transform:scale(1);}
    .anim_container{left:auto;right:20px;}
    .fullhomelink{background-position: center center;}
}
@media only screen and (max-width:480px) {
    .timer{transform:scale(0.8);}
    .anim_container{left:auto;right:10px;top:40%;}
}
@media only screen and (max-width:360px) {

    .anim_container{left:auto;right:0;top:47%;}
    .fullhomelink{background-position: -380px center;}
}
    @media only screen and (max-width:320px) {

    .fullhomelink{background-position: -230px center;}
}

    .hundredmilisecond{
        display: none;
    }

.cell {
    /*Should only display 1 digit. Hence height = line height of .numbers
    and width = width of .numbers*/
    width: 0.60em;
    height: 40px;
    font-size: 46px;
    overflow: hidden;
    position: relative;
    float: left;
    color: rgba(255,255,255, 0.3);
}

.numbers {
    width: 0.6em;
    line-height: 40px;
    font-family: 'Roboto Mono', monospace;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
}

/*Styles for the controls*/
#timer_controls {
    margin-top: -5px;
}
#timer_controls label {
    cursor: pointer;
    padding: 5px 10px;
    background: #efefef;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    border-radius: 0 0 3px 3px;
}
input[name="controls"] {display: none;}

/*Control code*/
#stop:checked~.timer .numbers {animation-play-state: paused;}
#start:checked~.timer .numbers {animation-play-state: running;}
#reset:checked~.timer .numbers {animation: none;}

.moveten {
    /*The digits move but dont look good. We will use steps now
    10 digits = 10 steps. You can now see the digits swapping instead of 
    moving pixel-by-pixel*/
    animation: moveten 1s steps(10, end) infinite;
    /*By default animation should be paused*/
    animation-play-state: running;
}
.movesix {
    animation: movesix 1s steps(6, end) infinite;
    animation-play-state: running;
}

/*Now we need to sync the animation speed with time speed*/
/*One second per digit. 10 digits. Hence 10s*/
.second {animation-duration: 10s;}
.tensecond {animation-duration: 60s;} /*60 times .second*/

.milisecond {animation-duration: 1s;} /*1/10th of .second*/
.tenmilisecond {animation-duration: 0.1s;}
.hundredmilisecond {animation-duration: 0.01s;}

.minute {animation-duration: 600s;} /*60 times .second*/
.tenminute {animation-duration: 3600s;} /*60 times .minute*/

.hour {animation-duration: 36000s;} /*60 times .minute*/
.tenhour {animation-duration: 360000s;} /*10 times .hour*/

/*The stopwatch looks good now. Lets add some styles*/

/*Lets animate the digit now - the main part of this tutorial*/
/*We are using prefixfree, so no need of vendor prefixes*/
/*The logic of the animation is to alter the 'top' value of the absolutely
positioned .numbers*/
/*Minutes and Seconds should be limited to only '60' and not '100'
Hence we need to create 2 animations. One with 10 steps and 10 digits and
the other one with 6 steps and 6 digits*/
@keyframes moveten {
    0% {top: 0;}
    100% {top: -400px;} 
    /*height = 40. digits = 10. hence -400 to move it completely to the top*/
}

@keyframes movesix {
    0% {top: 0;}
    100% {top: -240px;} 
    /*height = 40. digits = 6. hence -240 to move it completely to the top*/
}

@media screen and (min-width: 990px) {
    body {
        background-position: -250px -100px;
    }
}

@media screen and (max-width: 990px) {
    .site-footer ul.menu{
        margin-bottom: 2rem;
    }
    .site-footer .footer-col {
        margin-bottom: 2rem;
    }

    .complete-screen{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto auto auto;
    }
    .site-footer,left-col,right-col {
        grid-column-start: 1;
        grid-column-end: 1;
    }
    .left-col{
        min-height: 70vh;
    }
    .site-footer{
            padding: calc(2rem + 15px);
    }
}

@media screen and (max-width: 600px) {
    .left-col{
        min-height: 50vh;
    }
    h1.site-title {
        display: inline-block;
        width: 260px;
        height: 100px;
    }
    .site-description{
        margin: .5em 0 1em 0;
        font-size: 1rem;
    }
}