*{ box-sizing:border-box; }

.main {
	display:grid;
	grid-template-areas: 
		'header header'
		'maincontent1 maincontent1'
		'services1 services2'
		'services3 services4'
		'services5 services6'
		'footer footer' ;
	}
			@media only screen and (max-width: 767px) { 
			.main { display:block; }		
			}		

.header { grid-area: header; width:100%; margin:0; padding:0;}
		#himg { float:left; height:90px; }

			@media only screen and (max-width: 767px) { 
				.header {display:flex;}
				#himg { display:flex; float:left; height:50px; }
						
			}
			
			@media only screen and (max-width:767px) { 
				#mmu {min-width:100% !important; position:absolute; z-index:7; box-sizing:border-box; }
				a.icon { display: block; position: absolute; color:#034265; margin-top:10px; font-size:25px; right: 0; top: 0; }
				#mmu #mml01 {display:block; }		
				#mmu { display:none; width:100%; overflow:hidden;}
				#mmu .mml { background:#9FCDE3; width:100%; position:relative; border:1px solid #9FCDE3; box-sizing:border-box; margin-left:0px !important; }
				#mmu .mml a {width:100%;}
				#mmu .mml:hover {background:#ECF5FA;}
				#mmu .mml .mmll { position:relative; background:#ECF5FA;   }
				#mmu .mml .mplus { color:#034265; float:right; margin-right:15px; font-size:1.1em; visibility:visible;}
				#mmu .mml .mmll a:hover { background:#ECF5FA; border:1px solid #4f4f4f; box-shadow:2px 2px #000;}
			}
			
			@media only screen and (max-width:878px){
				#mmu { min-width:90% !important; }
				.mml {margin-left:1% !important; min-width:125px !important; box-sizing:border-box;}
			}
		
	
	.icon {display:none;}
	.mplus {visibility:hidden;}
	#mmu {  margin-top:55px; margin-right:0; padding:0; min-width:830px;}	
	.mml {float:left; list-style:none; position:relative; display:block; background:#fff; margin-left:5%; min-width:150px; line-height:3; padding: 0px 6px; }
	.mml a {text-decoration:none; font-family:Arial; font-size:17px; color:#034265; font-weight:bold; }
	.mml:hover .mmll { display:block; }
	.mmll { position:absolute; margin-left:-15px; text-align:left; display:none; background:#fff; min-width:250px; z-index:2;}
	.mmll a {text-decoration:none; font-family:Arial; font-size:15px; display:block; padding: 0px 16px; }
	.mmll a:hover {color:#000; background-color:#ccc; }

.maincontent1 { grid-area: maincontent1; width:100%; height:500px;}
		#demo { width:100%; height:500px; }
		#img1, #img2, #img3 { width:100%; height:500px; }
		#img1, #img2, #img3 { opacity:0.4; transition:opacity 1s; }
		#mdot1, #mdot2, #mdot3 { width:99%; height:20px; margin:auto; padding-left:45%; margin-top:-30px; position:absolute;}
		#mdot1 { z-index:5; }
		#mdot2 { z-index:6; }
		#mdot3 { z-index:7; }
		#dot1, #dot2, #dot3 { display:block; float:left; position:relative; margin-left:10px; width:20px; height:20px; background-color:#1A5774; border:1px solid #1A5774; border-radius:50%; }
		button:hover { cursor:pointer; }
		#back1, #back2, #back3 { font-size:40px; margin-top:240px; border:0; color:#024265; background-color:#fff; margin-left:1%; position:absolute; z-index:2; display:none; }
		
		#forward1, #forward2, #forward3 { font-size:40px; color:#024265; margin-top:240px; border:0; background-color:#fff; margin-left:96%; position:absolute; z-index:2; display:none;}
		#pd1, #pd2, #pd3 { margin-left:65%; font-family:Arial; font-size:16px; color:#024265; text-align:center; position:absolute; margin-top:100px; display:none; z-index:2; animation-name:ex1; animation-duration:0.3s; animation-fill-mode:forwards; }
			@keyframes ex1 {from{margin-top:100px;} to{margin-top:150px;}}
			
		@media only screen and (max-width:500px){
			.maincontent1 { height:450px; position:relative; }
			#demo, #img1, #img2, #img3 { height: 350px; }
			#img1, #img2, #img3 { object-fit:cover; object-position: 5% 100%; position:relative;}
			#mdot1, #mdot2, #mdot3 {height:12px; margin-top:0px; padding-left:35%; }
			#dot1, #dot2, #dot3 { background-color:#000; border:1px solid #000; }
			#back1, #back2, #back3 { font-size:0.1px; }
			#forward1, #forward2, #forward3 {font-size:0.1px;}
			#pd1, #pd2, #pd3 { margin-left:5%; font-family:Arial; font-size:12px; color:#000; text-align:center; position:relative; margin-top:0px; display:none; z-index:2; animation-name:ex1; animation-duration:0.3s; animation-fill-mode:forwards; }
			@keyframes ex1 {from{margin-right:-30px;} to{margin-right:25px;}}
		}			
		
		
		
		
.services1 { grid-area: services1; text-align:center; width:100%; max-width:100% !important;}
			#pdimg, #stimg { position:relative; height:300px; }
			.s1s { font-weight:bold; text-decoration:underline; color:#584D4D;}
		
						
			#matimg, #odcimg {height:300px;}
			
			.s1, .s2 { font-family:Arial; font-size:16px; line-height:1.5; color:#584D4D; padding:0px 20px; box-sizing:border-box; }
			
			@media only screen and (max-width:500px){
				#odcimg { height:275px; }
				.services1 a { color: #584D4D; text-align:center;}
				
			}
	
.services2 { grid-area: services2; text-align:center; width:100%; }
.services3 { grid-area: services3; text-align:center; width:100%; max-width:100% !important;}
.services4 { grid-area: services4; text-align:center; width:100%;}

.services5 { grid-area: services5; width:100%; border:0px; background-color:#000; opacity:0.8; margin:auto; color:white; font-family:Arial; font-size:15px;
			height:300px; box-sizing:border-box;}
			.s5p1 { padding:30px; text-align:justify; line-height:1.5; max-width:650px; }
			.s5p2 { text-align:left; padding-left:30px; box-sizing:border-box;}	
				
				@media only screen and (max-width:1150px){
					.services5 { height:390px; box-sizing:border-box;  }
					
				}
				
				@media only screen and (max-width:767px){
					.services5 { display:block; background:#000; color:#fff; height:300px; box-sizing:border-box;}
					.s5p1 { margin:auto; padding:30px; text-align:justify; line-height:1.5; }
					.s5p2 { text-align:center; padding:0; margin:0; line-height:4;}
					.s5p2 a { color:#fff; }
				}
				@media only screen and (max-width:500px){
					.services5 { height:390px }
				}
				
				.fa { padding: 10px; font-size: 30px; text-align: center; text-decoration: none; margin: 5px 2px; }
				.fa:hover { opacity: 0.7; }
				.fa-facebook { background: #000; color: white; }
				.fa-twitter { background: #000; color: white; }
				.fa-linkedin { background: #000; color: white; }
				.fa-instagram { background: #000; color: white; }
				
.services6 { grid-area: services6; width:100%; height:300px; border:0px;
				background-color:#000;  opacity:0.8;
				margin:auto; color:white; font-family:Arial; font-size:15px;
				box-sizing:border-box;
			}
		#s6tb { margin:auto; padding-top:10px; }
		.s6td {padding:20px; line-height:2;}
		.s6td a { color:#fff;  }
		
			@media only screen and (max-width:1150px){
					.services6 { height:390px; box-sizing:border-box; }
					
				}
		
			@media only screen and (max-width:767px){
				.services6 {display:block; background:#000; color:#fff; height:250px;}
				.s6td {padding:40px 30px 30px 30px;}
			}
			
			@media only screen and (max-width:500px){
				.s6td { padding-right:10px; }
			}
			

.footer { grid-area: footer; 
			width:100%; background-color:#000; opacity:0.8;  margin:auto; color:white; font-family:Arial; font-size:15px; height:40px; text-align:center;
				padding:0px;
	}
		@media only screen and (max-width:767px){
			.fp1 { padding:0px; margin:0;}	
		}