@charset "utf-8";
.navbar.navbar-expand-lg.navbar-dark.bg-primary {
	background-color: #003399 !important;
}
.navbar-nav.d-flex.flex-wrap .nav-item .nav-link:hover{
	background-color: #E7E7E7;
	color: #000000;
}
.navbar-nav.d-flex.flex-wrap .nav-item .nav-link {
	color: #FFFFFF;
	text-align: center;
}
.navbar-toggler-icon { 
  background-color: black;
  border:1px solid white;
}
.card .card-body .card-title {
	font-size: small;
	text-align: center;
	font-weight: bold;
}
h1, h2, h3, h4  {
font-size: 18px !important;
font-weight: bold !important;
text-align: center !important ;
}
@media (max-width: 480px) { 
h1, h2, h3, h4, h5  {
font-size: 14px !important;
font-weight: bold !important;
text-align: center !important;	
}
}
.btn {
margin: 5px auto;
}
figcaption {
text-align: center;
	font-weight: bold;
}
.container {
background-color: #CCCCFF !important;	
}
body {
background-color: #FCFFCC !important;	
}
/**********************************
css for iframe (non responsice content) note display is block so that we can then pull left the wrap container
note also different media queries - where we scale the iframe
***********************************/
 
 .frame {
    margin-top: 5px;
    display: block;
    width: 1000px;
    height: 2000px;
    border: 0;
   
}
@media(max-width:320px)  {
	.wrap {
    width: 275px;
    height: 550px;
    padding: 0;
	overflow: auto !important;
	-webkit-overflow-scrolling: touch !important;	

	}

    .frame {
	display: block;
    width: 1000px;
    height: 2000px;
    border: 0;
	
	
    -ms-transform: scale(0.275);
    -moz-transform: scale(0.275);
    -o-transform: scale(0.275);
    -webkit-transform: scale(0.275);
    transform: scale(0.275);
    
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
   }
@media (min-width:321px) and (max-width:480px) {
	.wrap {
    width: 300px;
    height: 600px;
    padding: 0;
    overflow: auto !important;
	-webkit-overflow-scrolling: touch !important;	
    

	}

    .frame {
	display: block;
    width: 1000px;
    height: 2000px;
    border: 0;
	 
	
    -ms-transform: scale(0.30, 0.30);
    -moz-transform: scale(0.30, 0.30);
    -o-transform: scale(0.30, 0.30);
    -webkit-transform: scale(0.30, 0.30);
    transform: scale(0.30);
    
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
   }
@media (min-width:481px) and (max-width:660px){
	.wrap {
    width: 400px;
    height: 800px;
    padding: 0;
    overflow: auto !important;
	-webkit-overflow-scrolling: touch !important;	


	}

    .frame {
	display: block;
    width: 1000px;
    height: 2000px;
    border: 0;
	
	
    -ms-transform: scale(0.40, 0.40);
    -moz-transform: scale(0.40, 0.40);
    -o-transform: scale(0.40, 0.40);
    -webkit-transform: scale(0.40, 0.40);
    transform: scale(0.40, 0.40);
    
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
   }
@media (min-width:661px) and (max-width:768px){
	.wrap {
    width: 500px;
    height: 1200px;
    padding: 0;
    overflow: auto !important;
	-webkit-overflow-scrolling: touch !important;	


	}

    .frame {
	display: block;
    width: 1000px;
    height: 2000px;
    border: 0;
	
	
    -ms-transform: scale(0.50);
    -moz-transform: scale(0.50);
    -o-transform: scale(0.50);
    -webkit-transform: scale(0.50);
    transform: scale(0.50);
    
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
   }
@media (min-width:769px) and (max-width:1200px){
	.wrap {
    width: 700px;
    height: 1400px;
    padding: 0;
    overflow: auto !important;
	-webkit-overflow-scrolling: touch !important;	


	}

    .frame {
	display: block;
    width: 1000px;
    height: 2000px;
    border: 0;
		
		
    -ms-transform: scale(0.70);
    -moz-transform: scale(0.70);
    -o-transform: scale(0.70);
    -webkit-transform: scale(0.70);
    transform: scale(0.70);
    
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
   }

@media (min-width:1201px) and (max-width:3000px){
	.wrap {
    width: 1000px;
    height: 2000px;
    padding: 0;
    overflow: auto !important;
	-webkit-overflow-scrolling: touch !important;	


	}

    .frame {
	display: block;
	width: 1000px;
    height: 2000px;
    border: 0;
	 -ms-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -o-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
   }
	/**********************************
css for iframe (non responsive content with a wide conent) note display is block so that we can then pull left the wrap container
note also different media queries - where we scale the iframe
***********************************/
    .framewide {
    margin-top: 10px;
    display: block;
    width: 1200px;
    height: 3600px;
    border: 0;
    margin-right: 10px;
}
@media(max-width:320px)  {
	.wrap {
    width: 300px;
    height: 900px;
    padding: 0;
	overflow: auto !important;
	-webkit-overflow-scrolling: touch !important;	

	}

    .framewide {
	display: block;
    width: 1200px;
    height: 3600px;
    border: 0;
	
	
    -ms-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);
    
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
   }
@media (min-width:321px) and (max-width:480px) {
	.wrap {
    width: 300px;
    height: 900px;
    padding: 0;
    overflow: auto !important;
	-webkit-overflow-scrolling: touch !important;	
    

	}

    .framewide {
	display: block;
    width: 1200px;
    height: 3600px;
    border: 0;
	 
	
    -ms-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);
    
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
   }
@media (min-width:481px) and (max-width:660px){
	.wrap {
    width: 468px;
    height: 1260px;
    padding: 0;
    overflow: auto !important;
	-webkit-overflow-scrolling: touch !important;	


	}

    .framewide {
	display: block;
    width: 1200px;
    height: 3600px;
    border: 0;
	
	
    -ms-transform: scale(0.39);
    -moz-transform: scale(0.39);
    -o-transform: scale(0.39);
    -webkit-transform: scale(0.39);
    transform: scale(0.39);
    
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
   }
@media (min-width:661px) and (max-width:768px){
	.wrap {
    width: 636px;
    height: 1800px;
    padding: 0;
    overflow: auto !important;
	-webkit-overflow-scrolling: touch !important;	


	}

    .framewide {
	display: block;
    width: 1200px;
    height: 3600px;
    border: 0;
	
	
    -ms-transform: scale(0.53);
    -moz-transform: scale(0.53);
    -o-transform: scale(0.53);
    -webkit-transform: scale(0.53);
    transform: scale(0.53);
    
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
   }
@media (min-width:769px) and (max-width:1200px){
	.wrap {
    width: 768px;
    height: 2160px;
    padding: 0;
    overflow: auto !important;
	-webkit-overflow-scrolling: touch !important;	


	}

    .framewide {
	display: block;
    width: 1200px;
    height: 3600px;
    border: 0;
		
		
    -ms-transform: scale(0.64);
    -moz-transform: scale(0.64);
    -o-transform: scale(0.64);
    -webkit-transform: scale(0.64);
    transform: scale(0.64);
    
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
   }

@media (min-width:1201px) and (max-width:3000px){
	.wrap {
    width: 1200px;
    height: 3600px;
    padding: 0;
    overflow: auto !important;
	-webkit-overflow-scrolling: touch !important;	


	}

    .framewide {
	display: block;
    width: 1200px;
    height: 3600px;
    border: 0;
    
		
		
    -ms-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -o-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
   }

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}