body, ul, li {
    border: 0 none;
    margin: 0;
    padding: 0;
}

input, textarea, select, a { outline: none; }

/*
@-webkit-keyframes menu-book-animation {
  0% {transform: translateY(600px);}
100% {transform: translateY(0px);}
}

@-moz-keyframes menu-book-animation {
  0% {transform: translateY(600px);}
100% {transform: translateY(0px);}
}
@-o-keyframes menu-book-animation {
  0% {transform: translateY(600px);}
100% {transform: translateY(0px);}
}
@keyframes menu-book-animation {
  0% {transform: translateY(600px);}
100% {transform: translateY(0px);}
}

.menu{
    bottom:0px;
    -webkit-animation:menu-book-animation 1s;
    -moz-animation:menu-book-animation 1s;
    -o-animation:menu-book-animation 1s;
    animation:menu-book-animation 1s;
      -webkit-animation-timing-function: ease-out; 
    animation-timing-function: ease-out;
}*/

/* FINISH SCREEN */

    .finish-container
    {
        position: absolute;
        text-align: center;
        color: white;
        background-color: #06237C;
        padding: 2%;
        height: 26%;
        font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
        border-radius:10px;
        border: 3px solid #4bcf95;
        left:   10vh;
        right:  10vh;
        bottom: 3vh;
        z-index: 900;
    }
    
    .finish-container p{
    float: left;
    width: 100%;
    font-size: 2.2vh; 
    line-height: 1.5;   
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    z-index: 900;
    }

    .finish-container h4{
    font-size:3vh;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 0.5em;
    float: left;
    width: 100%;
    font-weight: bold; 
    z-index: 900;
    }
    
    .finish-container button{
        padding:5px;
        background-color:#4bcf95;
        z-index: 900;
        cursor: pointer;
    }
    
    .back-to-home
    {
        margin-left: auto;
        margin-right: auto;
        font-size: 3vh;
        margin-top:5px;
        z-index: 901;
    }

/* FINISH SCREEN END */



  .content-container 
    {
    	position: absolute;
    	width:    100%;
        height:   100%;
    }

    .content-image
    {
    width:  100%;
	height:  auto;	
	}
	
    .quiz-title
    {
        font-size: 5vh;
        position: absolute;
        color:    white;
        z-index:  5;
        top:      1vh;
        left:     2vh;
    }
    
    
    .back-to-home
    {
        margin-left: auto;
        margin-right: auto;
        font-size: 3vh;
    }
    

body.ipad-style
{
    max-width:  1536px;
    max-height: 2048px;
 	width:  75vh;
    height: 100vh;
  	margin-left: auto;
    margin-right: auto;	
	margin-bottom:0px;
	margin-top:0px;
    box-shadow: 0px 0px 60px black;
}

/* Index page */

/*.ohjeWrapper{
border:solid 2px #C3C3C3;
padding: 20px;
background:white;
margin: 20px auto;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;

-webkit-box-shadow: -5px 5px 5px 0px rgba(230,230,230,1);
-moz-box-shadow: -5px 5px 5px 0px rgba(230,230,230,1);
box-shadow: -5px 5px 5px 0px rgba(230,230,230,1);
float:left;
}*/

.ohjesivu
{
	background:url(index-assets/ohje_bg.jpg) no-repeat center top;
	background-color:#DAECFF;
    width: 960px !important;
    margin: 0 auto;
	height: 100%;
}
.kikkalogo{
	width:100%;
    border-bottom: 1px solid lightgray;
    padding-bottom: 3vh;
	}

.kikkalogo img{
	width: 75%;
    display: block;
    margin: 0 auto;
	}

.ohjeContent{
padding-top:3vh;	
	}

.ohjesivu p{
    font-family: Tahoma, Arial, Verdana, Helvetica;
    color: #333333;
	font-size: 1.0em;	
    display: block;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

#listOfLibraries{
	width:auto;
	float:left;
	margin-top:4vh;
	margin-bottom:4vh;
	border-bottom: 1px solid lightgray;
}

#listOfLibraries h3{
	margin: 2vh 0;
	font-size: large;
	}


.ohje {
	float:left;
    width: 60%;
	border-bottom: 1px solid lightgray;
}

.ohjesivu a {
	color: #5b54a4;
}

.ohjesivu a:visited {
	color: #f384ae;
}

.ohjesivu a:hover {
	color: #6ccacc;
}

.ohjesivu h3{
	font-family: Tahoma, Arial, Verdana, Helvetica;
	font-size: 2.1vh;
	line-height:3.5vh;
    display: block;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
.hintHeader {
	font-family: Tahoma, Arial, Verdana, Helvetica;
	font-size: 2.1vh;
	line-height:3.5vh;color: #f384ae;

    display: block;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}


ohje, h1+h2 {
    background: #E5E7E8;
    border: 2px solid #E5E7E8;
}


.ohjeFooter{
	margin-top:6vh;
	float:left;
	width:100%;
}
	
.ohjeFooter img{
	width:100%;	
}

/*Ohjepage ends */

.slick-slider{
margin-bottom:0px;	
	}

.menu
{
   bottom: 0px;
   position:absolute;
   left:0px;
   right:0px;
   margin-left:auto;
   margin-right:auto;
   z-index:5;
}

.menu img
{
	width: 100%;	
}

.menu p{
    font-size: 2.2vh; 

    line-height: 1.5;	
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	}

.question{
	position: absolute;
    z-index: 11;
}

/********************	QUESTION PAGE *********************/


.questionLeft
{	
	width: 39%;
    left: 9%;
    height: 87%;
    top: 9%;
	}

.questionRight {
    width: 39%;
    right: 7%;
    height: 87%;
    top: 9%;
	}

.questionText{
	width: 87%;
    left: 7%;
    height: 87%;
    top: 9%;  
    height: 90%;
	
   -webkit-columns: 2 100px;
   -moz-columns: 2 100px;
   columns: 2 100px;
   -moz-column-fill: auto;
   column-fill: auto;
	}

/********************	QUESTION PAGE *********************/

.questionInputArea
{
    position: absolute;
    z-index: 12;
    right: 4.7%;
    bottom: 5%;
	width: 43%;
}
	
.answerinput{
	width:70%;	
    padding: 6.4% 6%;
	background-color: #fff6e3;
	border:none;
	border-bottom:1px #F9C253 dashed;
	font-size:inherit;
	font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif; 
	font-style:oblique;
	font-variant:normal;
	font-weight: 400;
	color:#E27D0D;
	-webkit-box-shadow:inset 2px 2px 5px #888;
	-moz-box-shadow:inset 2px 2px 5px #888;
    box-shadow:inset 2px 2px 5px #888;
	}
	

	
.answerinput input ::placeholder
{
	
}

.AnswerButton{
	float:right;
	width: 28%;
    background: transparent;
    border: none;
    margin-right:1.8%;	
	cursor:pointer;
	padding:0;
	transition-duration: 0.2s;
	transition-property: transform;

	}	

.AnswerButton:active {
	outline: none !important;
	-ms-transform: scale(0.75,0.75); /* IE 9 */
 	-webkit-transform: scale(0.75,0.75); /* Chrome, Safari, Opera */
    transform: scale(0.75,0.75);
}

.AnswerButton:select {
	outline: none !important;
}	
	
	
		
/**********MODAL QUESTION ***********/
.modalQuestion
{ 
font-size:3.1vw;
   	line-height: 4.7vw;

 position: absolute;
    width:80%;
	height: 50%;
    right: 0;
    left: 0;
    margin: auto;
	background-color:#ffeac4;
	padding:20px;
	top:2%;
	-webkit-box-shadow: 10px 10px 10px 0px rgba(3,19,84,0.21);
-moz-box-shadow: 10px 10px 10px 0px rgba(3,19,84,0.21);
box-shadow: 10px 10px 10px 0px rgba(3,19,84,0.21);
border: 2px solid #1f626c;
}

.modalQuestionLeft{ 	 
	
 	max-height:100%;
	overflow:scroll;

   font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	
	position:static;
	}

.modalQuestionRight{ 	 
	
 	max-height:100%;
	overflow:scroll;

   font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	}

/**********MODAL QUESTION ***********/

/**** MODAL BUTTON & INPUT ***/
.modalAnswerPageSection{
display:block;
float:left;
width:100%;	
	}

.modalCheckAnswerButton{
	float:right;
	cursor:pointer;
	border:none;
	padding:0;
	background:transparent;
transition-duration: 0.1s;
transition-property: transform;

}

.modalCheckAnswerButton button:select {
	outline: none;
}
.modalCheckAnswerButton:active {
 -ms-transform: scale(1.5,1.5); /* IE 9 */
 -webkit-transform: scale(1.5,1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5,1.5);
	transform:translateX(2,0);
}bo


.modalAnswerPageSection input{
    width: 70%;
    -webkit-appearance: none;
    background-color: #ffeeda;
    cursor: auto;
    padding: 1px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px dashed #ffd995;
	font-size:3.1vw;
   	line-height: 4.7vw;
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    font-style: oblique;
    font-variant: normal;
    font-weight: 400;
    float: left;
    margin-top: 25px;
}
	

/****** ANSWER INPUT & CHECK ANSWER BUTTON ****************/

.inputHidden{
	display:none;
	}

.checkAnswerArrow{
    position: absolute;
    bottom:2.5vh;
    height: 4vh
}
	
.checkAnswerArrow img{
	padding:2px;
	height:100%;
	width:auto;				
}


.answer input
{
/*	font-size: 3vh;
	width:80%;
	-webkit-appearance: none;
	background-color:transparent;
	cursor: auto;
    padding: 1px;
	border-top:none;
	border-left:none;
	border-right:none;
    border-bottom: 2px dashed;	
	font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif; 
	font-style:oblique;
	font-variant:normal;
	font-weight: 400;	
    float: left;*/

}

.answer input ::placeholder
{
	font-size:3.1vw;
   	line-height: 4.7vw;
	font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif; 
	font-style:oblique;
	font-variant:normal;
	font-weight: 400;
	color:#E27D0D;
}
.checkAnswerArrow {
    transition-duration: 0.2s;
    transition-property: transform;
    background-color: transparent;
     -webkit-appearance: none; 
     outline: none; 
    align-items: flex-start; 
     text-align: center; 
     cursor: pointer; 
     color: buttontext; 
   box-sizing: border-box; 
    padding: 0px;
    position: absolute;
    bottom:2.5vh;
    height: 4vh;
	border:none;
}



.checkAnswerArrow button:select {
	outline: none;
}

/****** ANSWER INPUT & CHECK ANSWER BUTTON ****************/	

.blurry-content{
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);	
}
	
/********************	GO THROUGH NEXT PAGE *********************/

.storyLeft
{
	width: 39%;
    left: 9%;
    height: 87%;
    top: 9%;
}

.storyRight {
    width: 39%;
    right: 7%;
    height: 87%;
    top: 9%;
}

.story{
    width: 87%;
    left: 7%;
    height: 87%;
    top: 9%;  
    height: 90%;
   -webkit-columns: 2 100px;
       -moz-columns: 2 100px;
            columns: 2 100px;
    -moz-column-fill: auto;
         column-fill: auto;
}



/********************	GO THROUGH NEXT PAGE *********************/

/********************	NEXT PAGE BUTTON *********************/

.nextScreenSection{
	position:absolute;
	z-index:11;
	right:0%;
	top:33%;
	}


.nextScreenButton{
	cursor:pointer;
	width: 7vh;
    height: auto;
	border:none;
	padding:0;
	background:transparent;
	position:absolute;
	    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
	right:1vw;
 /* -webkit-animation:nextScreenButton 2s infinite; */
   outline: none;
}

@-webkit-keyframes nextScreenButton {
  0%       { right:5px; }
 50%	 { right:25px; }
  100%     {right:5px;}
}
	
	.nextScreenButton img{
width:100%;
	}

.nextScreenButton{
transition-duration: 0.1s;
transition-property: transform;
transform: rotate(0deg);
}

.nextScreenButton button:select {
	outline: none;
}
.nextScreenButton:active {
 -ms-transform: scale(1.5,1.5); /* IE 9 */
 -webkit-transform: scale(1.5,1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5,1.5);
}
/********************	NEXT PAGE BUTTON *********************/

.quiz-title
{
    font-size: 5vh;
    position:absolute;
    color: white;
    z-index: 5;
    top:     1vh;
    left:    2vh;   
}

.exit-quiz
{
    width:  2vh;
    height: 2vh;
    z-index: 10;
    position: absolute;
    right: 1vh;
    top: 1vh;
    
}

/***** SEARCH MODAL *****/

	
/*
iframe {
        -ms-zoom: 0.75;
        -moz-transform: scale(0.75);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.75);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.75);
        -webkit-transform-origin: 0 0;
}*/

#searchModal{
	display:none;
	overflow-y: auto; /* has to be scroll, not auto */
	-webkit-overflow-scrolling: touch;
	}
	
.ui-dialog{
margin-top:20px;	
	}	
	
.ui-dialog .ui-dialog-content {
	padding:0px !important;
	}

.ui-widget-header {
    border: 1px solid #aaaaaa;
    background: white;
    color: #222222;
    font-weight: bold;
}

/*******	SEARCH 	**********/
.searchBttMenu
{
    width: 15%;
    height: 30%;
    position: absolute;
    background-image: url(menu-assets/search.png);
    z-index: 15;
    float: right;
    bottom: 93%;
    display: block;
    right: 10%;
    background-size: contain;
    cursor: pointer;
    background-repeat: no-repeat;
}





.fullBG {
  background: url(../resources/background-vignette.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.game-bg
{
    background-color: #1a5962;
}

.wrong-answer
{
    background-color: #DEA6B6 !important;
}

/* iPad3 Portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {

.menu p{
	font-size: 2.25vh; 
    line-height: 1.5;	
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
}
	
body.ipad-style
{
	width:auto;
	height:auto;	
}
.content-image
{
	width: 100% !important;
}
.ohjesivu
{
	background:url(index-assets/ohje_bg.jpg) no-repeat center top;
	background-color:#DAECFF;
    width: 95% !important;
    margin: 0 auto;
	height: 100%;
	background-color:#1a5962;
}


}

/* iPhone 5 Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	  
body.ipad-style
{
	width:auto;
	height:auto;	
}

.answerinput {
    width: 70%;
    padding: 3.4% 3%;
    background-color: #fff6e3;
    border: none;
    border-bottom: 1px #F9C253 dashed;
    font-size: inherit;
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    font-style: oblique;
    font-variant: normal;
    font-weight: 400;
    color: #E27D0D;
    -webkit-box-shadow: inset 2px 2px 5px #888;
    -moz-box-shadow: inset 2px 2px 5px #888;
    box-shadow: inset 2px 2px 5px #888;
}

.answer input ::placeholder
{
    font-size: 1vh; 
    line-height: 1.5;
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif; 
    font-style:oblique;
    font-variant:normal;
    font-weight: 400;
    color:#E27D0D;
}

#searchModal iframe {
        -ms-zoom: 0.5;
        -moz-transform: scale(0.5);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.5);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.5);
        -webkit-transform-origin: 0 0;
}

.content-image
{
	width: 100% !important;
	height: auto !important;
}

.menu p{
	font-size: 1.7vh; 
    line-height: 1.5;	
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
}

.ohjesivu h3{
	font-family: Tahoma, Arial, Verdana, Helvetica;
	font-size: 2em;
    display: block;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

.hintHeader {
font-family: Tahoma, Arial, Verdana, Helvetica;
font-size: 2em;	
color: #f384ae;

    display: block;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

.game-bg
{
    background-color: #1a5962;
}
/* FINISH SCREEN */

    .finish-container
    {
        position: absolute;
        text-align: center;
        color: white;
        background-color: #06237C;
        padding: 2%;
        height: 26%;
        font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
        border-radius:10px;
        border: 3px solid #4bcf95;
        left:   2vw;
        right:  2vw;
        bottom: 3vh;
        z-index: 900;

    }
    
    .finish-container p{
    float: left;
    width: 100%;
    font-size: 1.8vh; 
    line-height: 1.5;   
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    z-index: 900;
    }

    .finish-container h4{
    font-size:3vh;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0.5em;
    float: left;
    width: 100%;
    font-weight: bold; 
    z-index: 900;
    }
    
    .finish-container button{
        padding:5px;
        background-color:#4bcf95;
        z-index: 900;
        cursor: pointer;
    }
    
    .back-to-home
    {
        margin-left: auto;
        margin-right: auto;
        font-size: 3vh;
        margin-top:10px;
        z-index: 901;
    }

/* FINISH SCREEN END */

}
/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}