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

body{   font-family: acumin-variable, sans-serif;
font-style: normal;
font-variation-settings: "slnt" 0, "wdth" 110, "wght" 200;
 
   background-image:url('../numeracy/numimages/numback.png');
    background-repeat: no-repeat;
	background-size: 100vw auto;
	 background-position: center top;
}

#numtitle{padding-top:30px;
}
#numtitle img{display:block;
margin-left:10px;
height:auto;
width:500px;
margin-bottom:10px;
}
#ttop{margin-top:20px;
margin-bottom:5px;
margin-right:12%;
margin-left:15%;

}
#ttop h2{color: #000000;
font-size: 1.1em;
text-align:left;
line-height:1.5em;
padding-left:1%;
padding-right:7%;}



main{max-width:1200px;
margin-left:auto;
margin-right:auto;
}

 
/*heading */


/*elements section */
#keyelements{

	width:100%;
	display:flex;

	 
}

#inner{max-width:1225px;
width:100%;
	margin-left:auto;
	margin-right:auto;
display:inline-flex;
	flex-wrap: wrap; 
justify-content: center;
align-items: center;
margin-top:20px;
	text-decoration:none;
}

#inner img{width:auto;
	height:100px;
	margin-left:auto;
	margin-right:auto;
margin-bottom:5px;
	}
#e1,#e2,#e3,#e4,#e5,#e6,#e7,#e8,#e9,#e10,#e11,#e12,#e13,#e14,#e15,#e16{padding:10px;
	
	text-decoration: none;
	text-align: center;
	width:240px;
	height:240px;
	border-radius:20px;
	box-shadow: 2px 2px 5px 0px #2a2d43;
	background:#ffffff;
	margin:20px;
	padding-top:20px;

}
#inner a{text-decoration: none;}
#inner h4{font-family: acumin-variable, sans-serif;
font-style: normal;
font-variation-settings: "slnt" 0, "wdth" 100, "wght" 600;
	font-size:1.2em;
padding-top:3px;
text-align:center;

color:#000000;}


#inner h3{font-family: acumin-variable, sans-serif;
font-style: normal;
font-variation-settings: "slnt" 0, "wdth" 100, "wght" 200;
	font-size:0.85em;
text-align:center;

color:#000000;}

#e1:hover,#e2:hover,#e3:hover,#e4:hover,#e5:hover,#e6:hover,#e7:hover,#e8:hover,#e9:hover,#e10:hover,#e11:hover,#e12:hover,#e13:hover,#e14:hover,#e15:hover,#e16:hover{
	box-shadow: 4px -2px 7px #2a2d43;
	transition:0.3s;
	
}


.block{
	primary-top:30px;width:100%;
	display:block;
background:#2A2D43}
#inner2{max-width:1225px;
width:100%;
	margin-left:auto;
	margin-right:auto;
	padding-top:40px;
}


#bbot{background-image:url('../secimages/backbot.png') !important;
    background-repeat: no-repeat;
 background-size: cover;
margin-bottom:0px;
	padding-bottom:0px;}

#bbot h4{font-family: "coolvetica", sans-serif;
font-weight:600;
font-size:2em;
color:#000000;
margin:20px;
text-align:left;}


#bbot h2{font-family: "acumin-variable", sans-serif;
	font-size:1.3em;
	color:#000000;
font-weight:200;
text-align: left;
margin-top:20px;
}
#bbot .row .col-md-6{display:block;}

#bbot main{padding-top:100px;}
#bbot img{width:60%;
margin-left:10%;}

#qgen{
padding-bottom:30px;
width:100%;}

#gen {margin-left:0px;
width:70%;}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
}
h2{
	font-size:1.4em;
	color:#000000;
text-align: center;
margin-top:20px;
}
#qgen h2{color:#ffffff;}

#inner a{text-decoration:none!important;}

h3{
	font-size:1em;
	color:#000000;
font-weight:300;
text-align: center;
margin-top:15px;
}



h5{
	color:#000000;
	font-weight:100;
	font-size: 1em;}

main .row .col-md-6{display:flex;
justify-content: center;
align-items: flex-end;}

.modal-header{
	border:none;
}
.modal-content{
	border-radius:20px;
	box-shadow: 0px 2px 2px #CFCFCF;
	background:#ffffff;
	justify-content: space-between;
	margin-top:30px;
}
.modal-body{
	width:100%;
	}


.modal-content h2{
	color: #000000;
	text-align: center;
	  
	font-weight: 300;
	font-size: 1.3em;
    padding-below:2px;
}



.modal-body li{
	display:block;
	border-radius:15px;
	box-shadow: 0px 2px 2px #CFCFCF;
	background:#434343;
	width:90%;
	margin-left:auto;
	margin-right:auto;
	padding:10px;
	text-align:center;
	list-style: none;
	text-decoration: none;
}

.modal-body li:hover{
background:#CFCFCF;
	box-shadow: 0px 2px 2px #323232;
	
}
.modal-body li a{
	display:block;
	color:#ffffff;
	
	font-size:1em;
	font-weight:500;
	text-decoration:none;
}
.modal-body li a:hover{
	color:#000000;
}
.modal-body img{
		height:200px;
	width:125px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:20px;
	border:1px solid  #CFCFCF;
	padding:3px;
	border-radius:8px;
	
}
@media (max-width: 1290px) {
#bbot h2{margin-right:5%;}
}
@media (max-width: 1180px) {
#e1,#e2,#e3,#e4{margin:10px;
	width:220px;
	height:220px;
}
#inner h3{
	font-size:0.8em;
	margin-top:10px;
}	
#bbot a{width:70%;}	

#qgen img{width:70%;}
}
@media (max-width: 992px) {

#e1,#e2,#e3,#e4{padding:10px;
	width:300px;
	height:300px;
	margin:15px;
}
#inner h4{
	font-size:1.2em;
}
#inner{margin-top:0px;}

#inner h3{

	font-size:1em;
}	


#keyelements{
height:auto;
 background-size:100% 600px;
}
#ttop h2{font-size: 0.9em;}
#inner img{
	height:180px;
	}

#bbot h2{
	font-size:0.95em;
	color:#000000;
margin-left:10px;
margin-right:20px;

}
#bboti{width:80%;
	margin-left:20%;
}


#bbot a{
margin-top:15px;
	width:60%;
	margin-left:10%;
		font-size:1em;
}

#bbot{margin-top:40px;}


#gen {margin-left:0px;
width:50%;}

#keyelements{   
background-image:none;

}

}
@media (max-width: 768px) {
#himage {display:none;}	
#bboti{display:none;
	}	

#bbot h2{
	font-size:1em;
	text-align:center;
	margin-left:5%;
	margin-right:5%;

}
#gen {
width:60%;
margin-left:20%;
margin-right:20%;;
}
#bbot a{width:60%;
	margin-left:20%;}
.row .col-md-6{width:100%;}	
#qgen img{width:60%;
margin-left:20%;
margin-right:20%;
padding:0;}	

}


@media (max-width: 675px) {
#numtitle img{display:block;
width:420px}
#e1,#e2,#e3,#e4{padding:20px;
	width:360px;
	height:360px;
	margin:15px;
}
#inner h4{
	font-size:1.3em;
}


#inner h3{

	font-size:1.1em;
}	
#keyelements{
height:auto;
 background-image:none;
}

#inner img{
	height:220px;
	}
	
}
@media (max-width: 520px) {
#numtitle img{display:block;
width:300px;
margin-left:auto;
margin-right:auto;
}
#bbot h2{
	font-size:1.2em;
	
}
#ttop h2{font-size:0.85em;}
#bbot h2{font-size:0.85em;}

}