html, body {
    font-size: 100%;
    font-family: Verdana, sans-serif;  
    margin: 0;
    padding: 0; 
}

.wrapper-header {
    width: 100%;
}

header {
    background: #de9931;
    width: 100%;
    height: 90px;
    position: fixed;
    display: inline-block;
    font-family: Verdana, sans-serif;
    font-size: 100%;
    top: 0;
    left: 0; 
    z-index: 100;
}

header h1 { 
    display: none; 
}


#logo {
    margin: 0.2% 1% 0 1%;
    padding-top: 0.1%;
    width: 6%;
}





/*#################################*/

.wrapper-index {
    height: auto;
    width: 100%;
    margin: 0;
}


.wrapper-wiki {
    display: flex;
    width: 100%;
    margin: 6% 0 0 15%;
}



.left {
    flex: 1;
    -webkit-flex: 1;
    background: rgba(145, 145, 145, 0.52);
}


.boxheader {
    width: 100%;
}


a {
	text-decoration: none;
	color: #00457A;
}

.boxheader h1 {
    color: #00457A;
    font-size: 2em;
    margin: 0;
    padding: 4% 0 0 0;
    text-decoration: underline;
}



.flex-container {
    display: flex;
    justify-content: left;
    align-items: center;
    width: 100%;
}

.flex-container span {
    padding: 0 0 0 50px;
    font-size: 150%;
    color: #00457A;
    width: 90%;
}

.flex-container1 {
    display: flex;
    align-items: left;
    width: 100%;
}

.flex-container1 span1 {
    padding: 0 0 0 0;
    font-size: 110%;
    font-weight: 800;
    color: #4c5a79;
    width: 50%;
}

.flex-container2 {
    display: flex;
    align-items: left;
    width: 100%;
}


.flex-container2 span2 {
    padding: 0 0 0 10%;
    font-size: 150%;
    color: #00457A;
}

.flex-container2 span3 {
    padding: 0 0 5% 21%;
    font-size: 140%;
    color: #00457A;
}

.flex-container2 span4 {
    padding: 0 0 5% 21%;
    font-size: 120%;
    color: #00457A;
}

.flex-container3 {
    display: flex;
    align-items: left;
    padding: 0;  
    width: 100%;
}

.flex-container3 span3 {
    font-size: 140%;
    padding: 2% 0 0 0;
    color: #00457A;
    width: 100%;
}



/*##############################*/






/*############################################*/
/*###############Media Queries################*/
/*############################################*/

/*################## 1920px ####################*/

@media screen and (max-width: 1920px) {
 
    
.wrapper-wiki {
    display: flex;
    width: 74%;
    margin: 8% 0 0 28%;
}
    

.flex-container2 span2 {
    padding: 0 0 0 8%;
    width: 80%;
}

.flex-container2 span3 {
    padding: 0 0 5% 21%;
    width: 80%;
}    
    
}


/*################## 1800px ####################*/



@media screen and (max-width: 1800px) {

    
.flex-container2 span2 {
    padding: 0 0 0 9%;
    width: 80%;
}  
    
    
}



/*################## 1700px ####################*/



@media screen and (max-width: 1700px) {


    
.flex-container2 span2 {
    padding: 0 0 0 9.5%;
}    
    
    
}



/*################## 1600px ####################*/



@media screen and (max-width: 1600px) {

  
    
.wrapper-wiki {
    display: flex;
    width: 75%;
    margin: 6% 0 0 25%;
}
    
.flex-container2 span2 {
    padding: 0 0 0 10%;
}
    
    
}
    
    
/*################## 1500px ####################*/
 
@media screen and (max-width: 1500px) {    

    

    
.wrapper-wiki {
    margin: 12% 0 0 14%;
}
    
    
}
    
    
/*################## 1400px ####################*/
 
@media screen and (max-width: 1400px) {    
   
    
    
    
.boxheader h1 {
    font-size: 1.7em;
}      
    
.boxheader h5 {
    font-size: 1.7em;
    padding: 3% 0 0 0;
}

.flex-container2 span2 {
    padding: 0 0 0 11%;
}    

    
}
    
/*################## 1300px ####################*/
 

@media screen and (max-width: 1300px) {
    

.wrapper-wiki {
    margin: 11% 0 0 15%;
}

    
}


/*################# 1024px ####################*/



@media screen and (max-width: 1024px) {

    
.wrapper-wiki {
    margin: 15% 0 0 10%;
}    
    
.flex-container3 span3 {
    padding: 0 0 5% 3%;
    font-size: 120%;
} 
    
.flex-container span {
    font-size: 120%;
} 
    
.flex-container2 span2 {
    padding: 0 0 0 15%;
    font-size: 120%;
}
 
    
}


    
/*################## 992px #####################*/



@media screen and (max-width: 992px) { 
    

.flex-container2 span2 {
    padding: 0 0 0 15%;
    font-size: 110%;
}    
    
.flex-container2 span3 {
    padding: 0 0 5% 21%;
    font-size: 110%;
}    
    
.flex-container3 span3 {
    font-size: 110%;
}    
    


}
    
/*################## 860px #####################*/

@media screen and (max-width: 860px) {
    
    
    
.wrapper-wiki {
    margin: 20% 0 0 8%;
    width: 96%;
} 
    
.flex-container span {
    font-size: 120%;
}
    
    
.flex-container2 span2 {
    padding: 0 0 0 14%;
    font-size: 120%;
}
    
    
.flex-container2 span3 {
    padding: 0 0 5% 21%;
    font-size: 120%;
}
    
.flex-container3 span3 {
    font-size: 120%;
    padding-left: 0;
}     
    
.flex-container3 {
    width: 100%;
}
    
    
}
    
/*################## 768px #####################*/

@media screen and (max-width: 768px) {
   
    
header {
    height: 80px;
}
    
.wrapper-wiki {
    margin: 12% 0 0 4%;
    width: 96%;
}    
    
.boxheader h1 {
    font-size: 1.2em;
    margin: 0;
}

.boxheader h5 {
    font-size: 1.4em;
}

    
.flex-container span {
    padding: 0 0 0 50px;
    font-size: 100%;
}    
    
.flex-container2 span2 {
    padding: 0 0 0 13%;
    font-size: 100%;
}
    
    
.flex-container2 span3 {
    padding: 0 0 5% 24%;
    font-size: 100%;
}  
    
.flex-container2 span4 {
    padding: 0 0 5% 24%;
    font-size: 100%;
}    
    
.flex-container3 span3 {
    font-size: 100%;
} 
    
 
    
}
    
    
/*################## 480px #####################*/



@media screen and (max-width: 480px) {
    

 
.boxheader {
    font-size: 55%;
    margin-top: 12%;
}
    
    
.flex-container span {
    padding: 0 0 0 30px;
}
    
    
.flex-container2 span2 {
    padding: 0 0 0 14%;
    font-size: 100%;
    width: 80%;
}
    
    
.flex-container2 span3 {
    padding: 0 0 5% 27%;
    font-size: 100%;
}   
    
.flex-container2 span4 {
    padding: 0 0 5% 27%;
} 
    

.wrapper-wiki {
    margin: 8% 0 0 18%;
    width: 80%;
}

    
}

/*################## 320px #####################*/


@media screen and (max-width: 320px) {

#logo {
    display: none;
}
    
    
.wrapper-wiki {
    margin: 8% 0 0 5%;
    width: 90%;
}

    
.flex-container span {
    padding: 0 0 0 10px;
    font-size: 90%;
}
      
    
.flex-container2 span2 {
    padding: 0 0 0 13%;
    font-size: 90%;
}
    
.flex-container2 span3 {
    padding: 0 0 5% 21%;
    font-size: 80%;
}   
    
.flex-container2 span4 {
    padding: 0 0 5% 21%;
    font-size: 80%;
}     
    
    
.flex-container3 span3 {
    font-size: 80%;
} 
    
    
.wrapper-index {
   width: 100%;
}    
    
.boxheader {
    margin: 24% 0 0 0;
} 


.boxheader3 h1 {
    font-size: 1.2em;
}

    
}