@charset "utf-8";
/* CSS Document */

body {
    font-family: 'Open Sans', san-serif;
	font-size: 16px;
	padding: 0px;
	margin: 0px;
  }
    
main > * { 
   padding: 0px;
} 
	
 footer { 
  text-align: center;
  background: blue; 
  color: white;
} 

main {
  background-color: #fff;
}

section {
   background-color: white; 
   padding: 0;
   margin: 0;
}


.wrapper{
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0px;
	padding: 0px;
    
}

section > button,
section > a {
 text-decoration: none;
 color: #fff;
 font-size: 0.75rem;
 text-align: center;
 display:inline-block;
 box-sizing: border-box;
}

/* start header css*/
.main-header {
  background-color: #2d3192;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.section-header {
   background-color: #2d3192; 
   padding: 0;
   margin: 0;
   
}
/*.section-header > button,
.section-header > a {
 text-decoration: none;
 color: #fff;
 font-size: 36px;
 font-weight: bold;
 text-align: center;
 display:inline-block;
 box-sizing: border-box;
}*/

.container {
  list-style:none;
  background: #2d3192;
  margin: 0;
  padding: 0;
}

.flex {
  padding: 0;
  margin: 0;
  list-style: none;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: center;
}
.item {
  background: #2d3192;
  padding: 5px;
  width: 100px;
  height: 50px;
 /* margin: 10px;*/
  
  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
}

.item-menu {
  background: #0099ff;
  padding: 5px;
  width: 100px;
  height: 55px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
  flex: 1 1 100px;
}
.item-menu:nth-child(1) {
  background: #0099ff;
  padding: 35px 85px 5px 0px;
  width: 425px;
  height: 118px;
  flex: 1 1 425px;;
}
.item-menu:nth-child(2) {
  background: #0099ff;
  padding: 5px;
  width: 80px;
  height: 55px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
}
.item-menu:nth-child(3) {
  background: #0099ff;
  padding: 5px;
  width: 60px;
  height: 55px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
}
.item-menu:nth-child(4) {
  background: #0099ff;
  padding: 5px;
  width: 60px;
  height: 55px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
}
.item-menu:nth-child(5) {
  background: #0099ff;
  padding: 5px;
  width: 80px;
  height: 55px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
}
.item-menu:nth-child(8) {
  background: #0099ff;
  padding: 5px;
  width: 225px;
  height: 75px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
  flex: 1 1 225px;
}

.item-menu:nth-child(10) {
  background: #0099ff;
  padding: 5px 5px 5px 65px;
  width: 100px;
  height: 180px;
  flex: 1 1 100px;
}

.section-headera {
 width: 100%; 
 font-size: 18px;
 font-weight: bold;
 padding: 0.5rem;
 text-decoration: none;
 color: #fff;
 text-align: center;
 display:inline-block;
}

.section-header > img, 
.section-header > button,
.section-header > a {
 width: 100%; 
 font-size: 18px;
 font-weight: bold;
 padding: 0.5rem;
 text-decoration: none;
 color: #fff;
}

/* end header css /*

/* relevant CSS */

section > img, 
section > button,
section > a {
 width: 100%; 
 font-size: 24px;
 padding: 2rem;
 text-decoration: none;
 color: #fff;
}
     

@media screen and (min-width: 40em) {
body, 
main, 
section {
  display: flex;
  flex-direction: column;
}
	
.main-header {
  background-color: #2d3192;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

main > section, 
main > section > p {
 flex: 1;
}
   
main {
 flex-direction: row;
     
}
main > section {
      margin: 10px;
    }
	 
header, nav {
      order: -1;
 }
}