/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 20.8.2018, 9:28:02
    Author     : siavash
*/
body{
    /*background: url(../img/bodybg.jpg) no-repeat center center fixed!important;*/
}
body {
    font-family: 'Montserrat', sans-serif;
    background: url('/themes/pubivisa/css/viikkovisa_pro/kuvat/Online-visa-taustakuva.jpg') no-repeat center center fixed;
    background-color: #fff;
    /*background: linear-gradient(180deg, #FBAB7E 0%, #F7CE68 100%) no-repeat center center fixed;*/
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    max-height: 100%;
    background-repeat: no-repeat;
    background-position: center center ;
    color: #000;
}

.modal-backdrop{
    opacity: 1;
    /*background-color: #ff5858;
    background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);*/
    background: url('/themes/pubivisa/css/viikkovisa_pro/kuvat/Online-visa-taustakuva.jpg') no-repeat center center fixed!important;
    background-position: center top;
    background-size: cover;
}
.modal-backdrop.show{
    opacity: 1;
}

.btn-warning {background-image: linear-gradient(to top, #ffcc00 0%, #ffc107 51%, #cc9900 100%)}


#timerbar{

}
.mainCard{
    background-color: inherit;
} 
.textWrap{
    background-color: #fff;
}
.kysymysBg{
    background-color: #fff;
}
.textWrap.rounded-lg, #kysymys .rounded-lg {
    border-radius: 1.5rem!important;
}

.mainCard .list-group-item{
    background-color: inherit;
}

.KysymysmerkitLogo img{
    max-height: 22vh;
}
.vastausTila{
    max-height: 12vh;
}
.audioMuteUnmute{
    font-size: 2vw;
}
#baaripahkina_logo img{
    max-height: 20vh;
}
.yla_container{
    padding-left: 0px;
    padding-right: 0px;
}
.navbar-nav{
    letter-spacing: 0px;
    font-size: inherit;
    float: left;
}
.shadowTextBlack {
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    text-shadow: 1px 1px 2px black, 0 0 25px #333333, 0 0 5px #333333;
}
nav.yritys_main_nav .nav > li{
    float: left;
    padding: 10px 0px 10px 0px;

}
nav.yritys_main_nav{
    background: inherit;
}
.b3_main_nav_container{
    background: #000;
}
div.b3_main_nav_container #navbar  ul > li > a{
    color: #fff;
}
nav.yritys_main_nav .nav > li > a:hover{
    background-color: #999;
}
@media screen and (min-width: 768px){
    .nav>li>a {
        padding: 10px;
    }
}
.container-white {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.84);
}
#ylanavi ul{
    padding: 0px;
}
.login_row {

    border-radius: 10px 10px 10px 10px;
    min-height: 20px;
    padding: 7px 14px;
    position: absolute;
    right: 10px;
    top: 2px;
}

.login_row.logged {

    border-radius: 10px 10px 10px 10px;
    min-height: 20px;
    padding: 7px 14px;
    position: absolute;
    right: 10px;
    top: 10px;
}
.clear20{
    margin-bottom: 20px;
}
.clear10{
    margin-bottom: 10px;
}
.form-group.required .control-label:after {
    color: #d00;
    content: "*";
    margin-left: 5px;
    margin-top: 2px;
}
.container.container-white{
    background: none repeat scroll 0 0 rgba(250, 250, 250, 0.96);
    margin-bottom: 20px;
}
.blueTab li.active a {
    background-color: #0088cc!important; 
    color: #ffffff!important;
}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    /*pointer-events: none;*/
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}
@media only screen and (max-width: 767px) {
    ul#ccm-system-nav a#ccm-nav-sign-out{
        display: none;
    }
    .login_row.logged{
        position: relative;
    }
}
#navbar .dropdown-menu{
    background-color: #000;
}
#navbar .dropdown-menu li a:hover{
    background-color: #5bc0de;
}
/*-- Mobile Rotate Instruction -- */
#rotateHolder{
    position:absolute;
    min-width:100vw;
    width:100vw;
    max-width: 100vw;
    height:100vh;
    max-height: 100vh;
    background-color:#0A1529;
    z-index:100000; 
    display:none;
    left:0px;
}
.tietoSpan{
    font-size: 1.5rem;
}
.mobileRotate{
    width:100%;
    height:auto;
    max-height: 100%;
    position:absolute;
    text-align:center;
}
.rotateImg{-webkit-animation:spin .5s linear infinite; -moz-animation:spin .5s linear infinite; animation:spin .5s linear infinite; margin-bottom:10px;}
.rotateDesc{color:#fff; font-size:15px; line-height:15px; font-family:'bariol_regularregular';}

@-moz-keyframes spin { 50% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(0deg); } }
@-webkit-keyframes spin { 50% { -webkit-transform: rotate(90deg); } 100% { -webkit-transform: rotate(0deg); } }
@keyframes spin { 50% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } 100% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } }
#kysymysimg img{
    height: auto;
    max-width: 100%;
    max-height: 35vh;
}

#kysymysInner{
    min-height: 30vh;
    max-height: 30vh;
    max-width: 100%!important;
    width: 100%!important;

}
#kysymys .boxfitted,#kysymyshead .boxfitted{
    line-height: 1.1!important;
}
#vastauswrap .answerlink, #vastauswrap_kuva .answerlink {
    font-size: inherit;
    font-weight: 700;
}
.h-100vh{
    height: 100vh;
    height: 100%;

}
#kysymys{
    min-width: 100%!important;
    width: 100%!important;
    max-width: 100%!important;
    font-weight: 700;
}
.kuvaKysymys.secondArea{

    max-height: 30vh;
}

btnNettivisa{
    background-color: #e4a021;
}
#valiDia{
    min-width: 100%;
    width: 100%;
    background-color: #fff;
    border-radius: 20px;
    
    min-height: 0px;
}
#valiDia .boxfitted{
    padding: 10px;
}
#valiDia .shadowTextBlack{
    text-shadow: none!important;
    color: #000!important;
    
}
#kysymysheadwrap{
    height: 80vh!important;
}
.vHeight{
    min-height: 95vh;
}


@media (max-width: 575.98px) {
    .tietoSpan{
        font-size: 1.1rem;
    }
    #kysymysInner{
        /* min-height: 20vh!important;*/
        max-height: 30vh!important;
        /*  height: 30vh!important; */
    }

    #kysymysimg img{
        height: auto;
        max-width: 100%;
        max-height: 30vh;
    }
    #timerbar{
        height: 10px!important;
    }
    .vHeight{
        min-height: 90vh;
    }
    .KysymysmerkitLogo img{
        max-height: 15vh;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    #kysymysInner{
        min-height: 30vh!important;
        max-height: 30vh!important;
    }
    #kysymysimg img{
        height: auto;
        max-width: 100%;
        max-height:33vh;
    }
    #timerbar{
        height: 10px!important;
    }
    .vHeight{
        min-height: 90vh;
    }
    .KysymysmerkitLogo img{
        max-height: 15vh;
    }
}

/* tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
    #kysymysInner{
        min-height: 30vh!important;
        max-height: 30vh!important;
    }
    #kysymysimg img{
        height: auto;
        max-width: 100%;
        max-height: 35vh;
    }
    #kysymysheadwrap{
        height: 80vh!important;
    }
    .vHeight{
        min-height: 85vh;
    }
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    .vHeight{
        min-height: 90vh;
    }
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .vHeight{
        min-height: 95vh;
    }
}