html,body {
    margin:0;
    padding:0;
    overflow-x:hidden;
    background: whitesmoke;
    }

    
    .info{
    	height: 45px;
    	background: whitesmoke;
    	padding-left:15px;
    	line-height: 45px;
    	color:#ff8800;
    }
    
    	#tel{
		padding-left:40px;
	 	}
	 	
	 	#staff{
	 	    color:#000;
	 	}
	 	
	 	#staff:hover{
	 	    color:#ff8800;
	 	}
	 	
	 	#students{
	 	    color:#000;
	 	}
	 	
	 	#students:hover{
	 	    color:#ff8800;
	 	}
    
    /* ---------menu bar formatting------------- */

    nav {	
    	clear: both;
    	height: 90px;
    	width: 100%;
    	margin-top: 0;	
    	margin-bottom: 0;
    	background: #006f86;
    	font-family: 'Cormorant Infant', serif;
    }
    
    #schoollogo {
    	margin:3px 3px;
    	padding: 2px; 
    	height: 80px;
    	float: left;
    }
    
    label.logo {
    	float: left;
    	color: #fff;
    	font-size: 22px;	
    	line-height: 80px;
    	/*padding: 0 0 0 2px;*/
    	font-weight: bold;
    	margin-right: 80px;	
    }
    
    /* Menu button */
    nav ul {
    	margin-right:5px;
    	float: right;
    	text-align: center;
    }
    
    nav ul li {
    	display: inline-block;
    	line-height: 80px;
    	margin-right: 0;
    	background:#006f86;
    	border-radius: 5px;
    }
    
    /* Menu button text */
    
    ul li a {
    	color: #fff;
    	font-size: 18PX;
    	font-weight:bold;
    	padding: 10px 5px;
    	border-radius: 5px;
    	margin-left: 5px;
    	margin-right: 5px;
    }
    
    .active{
    	background: #ff8800;
    	text-decoration: none;
    	color: #fff;
    	font-weight: bold;
    	border-radius: 5px;
    	line-height: 40px;
    	padding-top:20px;
    	padding-bottom:20px;
    }
    
    ul li:hover {
    	background: #ff8800;
    	text-decoration: none;
    	color: #fff;
    	font-weight: bold;
    	border-radius: 5px;
    	/*line-height: 40px;*/	
    }
    
    ul li a:hover {
    	text-decoration: none;
    	color:#fff;
    	font-weight: bold;
    }
    
    /* Toggler button */
    .checkbtn {
    	font-size: 30px;
    	color: #006f86;
    	float: right;
    	line-height: 80px;
    	margin-right: 15px;
    	cursor: pointer;
    	display: none;
    }
    
    #check {
    	display: none;
    }
    
        
        #containner{
            clear:both;
            width:100%;
            height:100%;
            margin:0;
            background: whitesmoke;
        }
        
     
        #content{
            clear:both;
            width:100%;
            height:100%;
            background: whitesmoke;
            margin-left:auto;
            margin-right:auto;
            font-family: 'Cormorant Infant', serif;
            font-size:20px;
            color:#013220;
            padding:30px 50px 30px 50px;
            line-height:25px;
        }
        
        #title{
            font-size:30px;
            font-weight:bold;
        }
        
        
        #addresses{
            float:left;
            margin-right:50px;
        }
        
        
        .overview{
            width:90%;
            /*margin-top:30px;*/
            margin-left:auto;
            margin-right:auto;
            margin-bottom:30px;
            background:#e8e9eb;
            border-radius:15px;
        }
        
 
 		
		.headcontainer {
			clear: both;
			float: left;
			margin: 0;
			width: 100%;
			height: 100%;
			padding: 0;
			background:whitesmoke;
			border-radius:20px;
			/*background: linear-gradient(whitesmoke, #ccd3d9);*/
		}
		.headpicture {
			float: left;
			margin-top: 0;
			margin-left: 5%;
			margin-right: 5%;
			width: 90%;
			padding: 0;
			content-position: center;
			text-align: center;
			overflow: hidden;
			box-shadow: 1px 2px 2px 2px #2f4f4f;
			border-radius:20px;
			margin-bottom:40px;
		}
		.headpicture:hover img {
			transform: scale(1.3);
		}
		.headpicture img {
			width: 100%;
			height: 100%;
			margin-left: 0;
			margin-right: 0;
			padding:0;
			box-shadow: 1px 1px 2px 2px #aaa;
			transition: all 1.3s ease;
		}
		.headpicturedesc {
			clear: both;
			width: 100%;
			height: 100%;
			margin-left: 0;
			padding: 20px 2px 20px 2px;
			text-align: center;
			color: #013220;
			background: #ccd3d9;
		}
		.managementteam {
			clear: both;
			padding: 10px 0 10px 20px;
			font-family: 'Cormorant Infant', serif;
			text-align: center;
			font-size: 28px;
			color: #000;
			font-weight: bold;
			background: transparent;
		}
       
       
/* =============== Custom Underline Style =================================== */

		.underlineContainer{
			width: 100%;
			height:20px;
			padding: 0; /* no left and right padding- goes with full page line*/
			/*padding: 3px 330px; /* left and right padding goes with short line */
		}
		.line{
			width: 100%; /* width of the lines - Eg. full page */
			/*width: 50%; /* width of the lines - Eg. short line */
			height: 40px;
			padding: 0;
			position: relative;
		}
		.line::before, .line::after{
			content: '';
			position: absolute;
			width: 48%; /* space between the two lines*/
			height: 2px; /* thikness of the lines*/
			/*padding: 0 20px;*/
			margin: auto;
			top: 15%;  /* Lower % raises the lines and higher % lowers the lines*/
		}
		.line::before{
			left: 0;
			background: linear-gradient(to right, #fff, #ff8800);
		}
		.line::after{
			right: 0;
			background: linear-gradient(to right, #ff8800, #fff);
		}
		.shape{
			width: 7px;
			height: 7px;
			border: solid #ff8800 2px;
			/*border-radius: 50%;*/
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			transform: rotate(45deg);
			background: #ff8800;
		}
/* ======================================================================= */
        
        
        
        
        
        
    /* 1st Screen Break Level ------------------------------------------*/
    
       	@media (max-width: 992px) {
       	    	label.schname {
    		float: left;
    		color: green;
    		font-size: 16px;
    		line-height: 50px;		
    	}	
    		
    	nav ul li a {
    		font-size: 14px;
    		padding: 10px 2px;
    	}
    
    	#motto {
    		display: block;
    		background: #c5aa6a;
    	}
    
    	.adminotice {
    		font-size: 17px;
    	}
    
    	.carousel-caption h1 {
    		font-size: 180%;
    	}
    	.carousel-caption h3 {
    		font-size: 140%;
    	}
    
    	.srccar{
    		width:100%; height:120px;
    	}
    	
    	#content{clear:both;width:80%;height:100%;}
    	
    	.overview{
            width:90%;
        }
    }
       	
   
	    
	/* -----2nd Screen Break Level------------------------------ */
    
    @media (max-width: 852px) {

	nav ul {
	margin-right:0px;
	}

	nav ul li a {
		color: #0c775b;
	}

	 ul li a:hover {
	 	padding-left: 20%;
	 	padding-right: 20%;
    }

	#students{
		display: none;
	}

	#staff{
		display: none;
	}

	label.schname {
		float: left;
		font-size: 14px;
		margin: 0;		
	}	
		.checkbtn {
		display: block;
	}

		nav ul {
		position: relative;
		width: 100%;
		height: cover;
		background: whitesmoke;
		margin: 0;
		text-align: center;
		display: none;
		bottom:10px;
	}

	nav ul li{
		display: block;
		width: 100%;
		line-height: 40px;
		border-bottom: 1px solid #006f86;
		color: #006f86;
		margin-top:10px;
		background:transparent;
	}
	
	nav ul li a{
		font-size:18px;
	}


	#check:checked ~ ul {
		display: block;
		background-color: whitesmoke;
		margin: 0;
		padding-left:0;
	}

	label.logo {
		font-size: 24px;
		padding-left: 5px;
		line-height: 80px;
		margin-right: 0;		
	}
	
	#content{clear:both;width:100%;height:100%;}
	
	.overview{
            width:95%;
        }
}


    /* -----3rd Screen Break Level------------------------------------ */
    
    @media (max-width: 576px) {

	nav {
		height: 95px;
	}

	nav ul {
    	margin-right:0;
    	margin-left:0;
    	width: 100%;
    }
    
     nav ul li {
		background:transparent;
	}

    nav ul li a {
        margin-left:0;
		color: #0c775b;
		font-size:18px;
		background:transparent;
	}
	
	nav ul li a.active {
	    color: #fff;
	}

	#students{
		display: none;
	}

	#staff{
		display: none;
	}

	label.schname {
		display: none;		
	}	

	#schoollogo {
		margin:7px 5px;
		padding: 2px; 
		height: 70px;
		float: left;
    }

	label.logo {
		font-size: 22px;
		padding-left: 5px;
		line-height: 70px;
		margin-right: 0;		
	}

	ul li a:hover {
	 	padding-left: 20%;
	 	padding-right: 20%;
    }

    .info{
    	height: 40px;
    	background: whitesmoke;
    	padding-left:5px;
    	line-height: 10px;
    	color:#ff8800;
    }

	#email{
		float: left;
		font-size: 12px;
		padding-right:5%;
		line-height: 40px;
	 	}

	#tel{
		float: left;
		font-size: 12px;
	    padding-left:15px;
		padding-right:0%;
		line-height: 40px;
	 	}
	 	
	 	body{clear:both;background-position:right;width:100%;}
	 	
	 	#content{clear:both;width:100%;height:100%;padding:15px;}
	 	
	 	#addresses{
            clear:both;
        }
        
        .overview{
            width:100%;
            margin:0;
            border-radius:0;
        }
    }
 

		/*-----------Footer Section----------------------*/
footer {
	width: 100%;
	height: 100%;
	clear: both;
	color: #fff;
	padding: 0;
	font-size: 18px;
}

.row {
	width: 100%;
	height: 100%;
	margin-right: auto;
	margin-left: auto;
}

footer i {
	font-size: 15px;
	font-weight: bold;
	padding: 0 10vw 0 10vw;
}