body,html {
height: 98vh;
background-image: url("../kuvat/taustakuva.png");
background-color: #26224e;
background-repeat: round;
}
img {
border : none;
}
label {
display:block;
}
.image-header{
display:flex;
width: inherit;
height: 200px;
background-image: url("uploads/images/rovaniemi.jpg");
background-size: contain;
background-repeat: no-repeat;
}
.cont_fb {
font-size: 18px;
}
.formi {
margin-top : 35px;
}
#vastaus_btn {
display:none;
}
#seuraava_kysymys_btn {
display:none;
}
#btn_laheta{
padding: 10px 40px;
background-color: #26224e;
font-family: 'Titillium Web';
color: white;
border-radius: 5px;
border: 2px solid red;
}
#vastaus_btn{
width : 85%;
height: 75px;
background-color: #26224e;
color: white;
font-size: 20px;
border: 2px solid red;
}
#vastaus_btn:hover{
background-color: #59748f;
}
#btn_esripesri{
padding: 10px 40px;
background-color: #26224e;
font-family: 'Titillium Web';
color: white;
border-radius: 5px;
border: 2px solid red;
}
#seuraava_kysymys_btn{
width : 85%;
height: 75px;
background-color: #26224e;
color: white;
font-size: 20px;
border: 2px solid red;
}
#seuraava_kysymys_btn:hover{
background-color: #59748f;
}
#btn_kartta_init{
padding: 10px 40px;
background-color: #26224e;
font-family: 'Titillium Web';
color: white;
border-radius: 5px;
border: 2px solid red;
}
#btn_kysymyspeli_init{
padding: 10px 40px;
background-color: #26224e;
font-family: 'Titillium Web';
color: white;
border-radius: 5px;
border: 2px solid red;
}
#LoadingScreen{
position: fixed;
top: 0;
height: 100vh;
width: 100%;
background-color: #383063;
z-index: 3000;
display: flex;
justify-content: center;
align-items: center;
transition: all 1s;
}
#LoadImg{
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 350px;
width: 300px;
}
#LoadImg img{
position: absolute;
top: 0;
}
#palaute {
display: none;
}
.loaderImg {
position: absolute;
bottom: 0px;
display : block;
margin: 8px auto;
border: 6px solid #f3f3f3;
border-radius: 50%;
border-top: 6px solid red;
width: 55px;
height: 55px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.loader {
display : none;
margin: 8px auto;
border: 6px solid #383063;
border-radius: 50%;
border-top: 6px solid #3498db;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.bg_color {
background-color: #26224e;
}
.roi_font {
margin-top: 20px;
font-family: 'Titillium Web', sans-serif;
color: white;
text-align: center;
font-weight: bold;
font-size: 35px;
}
.kysymys {
text-align: center;
color: white;
}
.kysymys_lukema {
text-align: center;
color: white;
}
.kuvat {
margin-top: 25px;
max-width: 200px;
max-height: 150px;
border: 2px solid red;
border-radius: 20px;
display: block;
margin: 25px auto;
}
#tulos_kuvien_maara{
display: none;
}
.center {
justify-content: center;
}
#kartta {
display: block;
height: 80vh;
background-color: antiquewhite;
border: 5px solid red;
}
#messut_img{
max-width: 80%;
}
#loppuikkuna {
max-width: 450px;
margin: 0 auto;
display : none;
text-align: center;
height: 800px;
background-color: white;
border: 5px solid red;
}
#kysymyksen_kuva{
display:none;
}
#kysymysikkuna {
max-width: 450px;
margin: 0 auto;
display : block;
text-align: center;
min-height: 600px;
background-color: white;
border: 5px solid red;
}
#aloitusikkuna {
max-width: 450px;
margin: 0 auto;
display : none;
text-align: center;
height: 800px;
background-color: white;
border: 5px solid red;
}
#karttapeli_header {
display: none;
}
#kysymyspeli_header {
display: block;
}
#kuvia_oikein{
margin: 0 auto;
}
#tulos_otsikko{
margin: 0 auto;
}
.vastaukset_lista {
margin: auto;
padding: 0;
}
.vastaukset_lista li {
margin-right: 30px;
margin-left: 30px;
margin-bottom: 12px;
margin-top: 12px;
list-style-type: none;
padding-right: 20px;
padding-left: 20px;
padding-top:30px;
padding-bottom:20px;
border: 3px solid red;
cursor: pointer;
}
.vastaukset_lista li:hover {
background-color: #28487a;
}
.sillat {
height: 100%;
background-image: url("../kuvat/taustakuva.png");
background-repeat: space;
}
.bottom_ {
font-family: 'Titillium Web', sans-serif;
color: white;
z-index: 1999;
padding: 23px;
font-size: 16px;
background-color: #26224e;
position: relative;
/* top: -100px; */
top: 8px;
}
#btn_seuraava {
font-family: 'Titillium Web', sans-serif;
display: none;
margin: 10px auto;
badding: 20px 20px;
padding: 10px 40px;
color: white;
background-color: #26224e;
border: 3px solid red;
}
#btn_seuraava:hover {
background-color: #494480;
}
/* Style the Image Used to Trigger the Modal */
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 2000; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 1000px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
ul#progress {
list-style: none;
/* width: 125px; */
/* margin: 0 auto; */
padding-top: 50px;
/* padding-bottom: 50px; */
/* padding-right: 46px; */
padding: 0;
}
.container {
display:block;
display: flex;
justify-content: center;
}
#container_kysymyspeli {
display:flex;
justify-content: center;
}
.kysymys_lukema {
display:none;
}
ul#progress li {
float:left;
position:relative;
width:15px;
height:15px;
border:1px solid #fff;
border-radius:50px;
margin-left:10px;
border-left:1px solid #E5E5E5; border-top:1px solid #E5E5E5; border-right:1px solid #E5E5E5; border-bottom:1px solid #E5E5E5;
background:#E5E5E5;;
}
ul#progress li:first-child { margin-left:0; }
.running .ball {
background-color:#b5b5ba;
background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
background-color:#81CE97;
width:15px;
height:15px;
border-radius:50px;
-moz-transform:scale(0);
-webkit-transform:scale(0);
-moz-animation:loading 1s linear forwards;
-webkit-animation:loading 1s linear forwards;
}
#layer1 { -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; }
#layer2 { -moz-animation-delay:1s; -webkit-animation-delay:1.5s; }
#layer3 { -moz-animation-delay:1.5s; -webkit-animation-delay:2.5s; }
#layer4 { -moz-animation-delay:2s; -webkit-animation-delay:3.5s; }
#layer5 { -moz-animation-delay:2.5s; -webkit-animation-delay:5s; }
@-moz-keyframes loading {
0%{-moz-transform:scale(0,0);}
100%{-moz-transform:scale(1,1);}
}
@-webkit-keyframes loading {
0%{-webkit-transform:scale(0,0);}
100%{-webkit-transform:scale(1,1);}
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}