/* Imports */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import 'https://fonts.googleapis.com/css?family=Roboto+Slab';
@font-face { 
    font-family: 'verdana';
    src: url('fonts/verdana.ttf') format('truetype'); 
}
             
/* Resets */
body{
    margin:0;
    padding:0;
}

.mobile{
    display:none;
}

body::-webkit-scrollbar {
    width: 1em;
	/*background-color: #B9B9B9;*/
}
 
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
body::-webkit-scrollbar-thumb {
  background-color: #565656;
  /*background-color: #6F6F6F6F;*/
}

/* Fonts */
body{
    font-family: 'Open Sans', sans-serif;
    font-size:17px;
}

.content p{
    line-height: 30px;
}

.content a{
    color:#d44b1b;
}

h1, h2, h3{
    font-family: "Roboto Slab",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight:normal;
}

h4{
    font-size:17px;
}

h5{
    font-size: 1.1em;
    margin-bottom: 10px;
    font-wheight:normal;
}

/* Basic Format */
.pointer{
    cursor:pointer;
}

section{
    float:left;
    clear:both;
    
    width:100%;
}

.main{
    max-width:1000px;

    float:none;
    margin:auto;
}

.inner{
    float:left;
    width:60%;
    
    min-height:100vh;
    
    padding: 0 5%;
}

.outer{
    float:left;
    width:15%;
    
    min-height:100vh;
}

ul{
    clear:both;
}

.title{
    font-size:54px;
}

.subtitle{
    margin-top: -45px;
    font-size: 20px;
}

.button{
    position:relative;
    float:left;
    
    cursor:pointer;
    text-align:center;
    
    margin: 20px 0;
}

.button p{
    margin: 15px 0;
}

.large{
    width:100%;
}

.squared{
    width:50%;
    float:left;
}

.relief{
    color:rgba(0,0,0,0.7);
}

.questionContainer{
    width:100%;
    float:left;
}

.questionContainer .button:hover{
    background-color:#0581ad;
}

.answer{
    font-size:15px;
    padding: 0 4%;
    min-height:40px;
}

.smallFont{
    font-size:15px;
}

.questionTitle{
    margin: 15px 0 0 0;
}

.questionmarkerContainer{
    clear:both;
    float:left;
    width:100%;
}

.questionmarker{
    float:left;
    width:8.2%;
    height:30px;
    margin-right:2%;
    margin-bottom:15px;
    
    cursor:pointer;
    
    text-align:center;
}

.questionmarker:nth-of-type(10n){
    margin-right:0;
}

.questionmarker p{
    margin:0;
    height:inherit;
}

.backlink, .continuelink{
    margin-top:25px;
    float:left;
    width:50%;
    cursor:pointer;
}

a{
    text-decoration:none;
}

.continuelink{
    text-align:right;
}

.resultQuestion{
    float:left;
    width:93%;
    font-weight:normal;
    cursor:pointer;
}

.correctMarker{
    float:left;
    width:6%;
    margin-left:1%;
    margin-top: 35px;
    text-align:center;
    cursor:pointer;
}

.chosenAnswer, .correctAnswer {
    font-style: italic;
    margin-top:-5px;
}

.chapterContainer li{
    margin-bottom:15px;
    cursor:pointer;
}


/* Colors */
.lilaBack{
    background-color: #63104a;
}

.blueBack{
    background-color: #2b5486;
}

.greenBack{
    background-color: #7ca05a;
}

.orangeBack{
    background-color: #b33b19;
}

.grayBack{
    background-color: #2b2b2b;
}

.yellowBack{
    background-color: #85862b;
}

.blackBack{
    background-color: #313131;
}

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

.redBack{
    background-color: #a73f3f;
}
.cyanBack{
    background-color: #044258;
}

.lila{
    color: #63104a;
}

.blue{
    color: #2b5486;
}

.green{
    color: #7ca05a;
}

.orang{
    color: #b33b19;
}

.gray{
    color: #2b2b2b;
}

.yellow{
    color: #85862b;
}

.black{
    color: #313131;
}

.white{
    color:rgba(255,255,255,0.93);
}
.cyan{
    color: #0581ad;
}
.red{
    color:#a73f3f;
}

.row70{
 width:70%;
 float:left;  
     word-wrap: break-word;
     hyphens:auto; 
}
.row30{
 width:30%;
 float:left;
}


@media (max-width: 1000px){
    .outer{
        display:none;
    }
    .inner{
        width:90%;
    }
    .main{
        width:80%;
    }
    .title{
        font-size:43px;
    }
    
    .subtitle{
        margin-top: -29px;
        font-size: 23px;
    }
}

@media (max-width: 600px){
    
    .main{
        width:100%;
    }
    
    body{
        padding-bottom:30px;
        float:left;
        width:100%;
        background-color:#313131;
    }
    
    .inner{
        min-height:0;
    }
    .title{
        font-size:40px;
    }
    
    .subtitle{
        margin-top: -29px;
        font-size: 20px;
    }
}

@media (max-width: 450px){
    body{
        font-size:15px;;
    }
    .row70{
     width:80%;
    }
    .row30{
     width:20%;
    }
    .title{
        font-size:25px;
    }
    
    .subtitle{
        margin-top: -24px;
        font-size: 16px;
    }
    
    .questionTitle{
        margin-top:15px;
    }
    
    .answer{
        font-size:12px;
    }
    
    p{
        font-size:15px;
    }
    
    .desktop{
        display:none;
    }
}