html {scroll-behavior: smooth;background:#fff;}
*{padding:0;margin:0;box-sizing:border-box;font-family:verdana, sans-serif;}
p{font-size:0.9rem;line-height:150%;padding-bottom:1rem;}
h1{font-size:1.8rem;padding-bottom:0.6rem;font-family:Lucida Grande, sans-serif;line-height: 130%;}
h2{font-size:1.6rem;padding:1rem;font-family:Lucida Grande, sans-serif; border-radius:8px;margin:2rem 0 1.6rem;background:#ffdd00;color:black !important;padding:  0.8rem 1.4rem}

.parent {
	display: grid;
	grid-template-columns: 	1fr minmax(600px,1fr) minmax(600px,1fr) 1fr;
	grid-template-rows: 	40px 140px auto auto auto auto auto 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	>>flex-direction: row;

}


.parent > div{
	padding:1.2rem;
	display:flex;  
	align-items:center;
		background:white;
	}


.div1 		{ grid-area: 1 / 1 / 2 / 5; background:black !important;}
.contactBar { grid-area: 1 / 2 / 2 / 4; display:flex;background:black !important;justify-content:flex-end;padding:0;align-items: center !important;}
.contactBar p{padding:0;color:white;}
.contactBar a:link{ text-decoration:none;color:white;}
.contactBar a:hover{ text-decoration:none;color:#bbb;}

.div4 		{ grid-area: 2 / 1 / 3 / 5; background:white!important;border-bottom:1px solid #154c79 !important}
.header 	{ grid-area: 2 / 2 / 3 / 4; background:white !important; justify-content:space-between;border-bottom:1px solid black !important;}
.header		img{max-height:98%;}
.menu 		{ grid-area: 3 / 2 / 4 / 4;background:white;}

.nav{text-align:center;width:100%;} 
.nav ul{list-style:none;}
.nav li{display:block; float:left;border-left:1px dashed #ccc;}
.nav li:nth-child(1){left;border:0;}
.nav a:link{padding:0 20px;line-height:40px;text-decoration:none;background:white;height:40px;display:block;font-family:verdana, sans-serif;font-size:0.8rem;color:#154c79;}
.nav a:visited{color:black;}
.nav a:hover{background:#ffdd00;color:black;}

.panorama{grid-area: 3 / 1 / 8 / 4;  padding:0 !important;display:flex !important;align-items:flex-start !important;}
.panorama img{opacity: 0.3;}
.showcase 	{grid-area: 4 / 3 / 5 / 4; padding:0 !important;z-index:1;}
.showcase 	img{max-width:100%; padding-top:4rem; border-radius:45% 55% 14% 86% / 64% 79% 21% 36%; }

.content	{ grid-area: 4 / 2 / 6 / 3; background:white !important ; flex-direction: column; align-items:flex-start !important; z-index:100;padding:4rem 3rem 4rem 1.4rem !important;}
.content  	p{ color:#333;font-size:0.9rem;}  
.content  	h1{ color:black;}  
.content  	a:link{ color:black;text-decoration:none;}  
.content a:visited{color:black;}
.content h2:hover{background:black;color:#ffdd00 !important;}



.service:link{color:black !important; }
.service:visited{color:black !important;}
.service:hover{color:black !important;}

.advertise ul {display:flex;margin-top:0.8rem;padding-left:1.8rem;font-size:24px;line-height:125%;color:#333;list-style-type:none;} 
.advertise li{ padding-bottom:0.6rem;height:200px;width:200px;background:red;padding-left:2rem;}  

.advertise	{ padding:0 !important;grid-area: 6 / 2 / 7 / 4; background:white !important;display:flex !important;justify-content: space-between !important; flex-flow: row wrap;
border-top:1px dashed black;padding-top:3rem !important;padding-bottom:3rem !important;box-sizing:border-box;}
.advertise p{ color:#154c79;font-size:0.9rem;}  
.advertise h2{background:#B0DFE5; text-align:center;color:#154c79 !important;text-align:center !important;}
.advertise ol{ margin-left:1.2rem;color:#154c79;font-size:0.9rem;}
.advertise a:link, .advertise a:visited{ text-decoration:none;color:black; }
.service{background:#eee;height:220px; min-width:200px;  padding:1rem;}
.service img{height:140px;padding-left:2.43rem;padding-top:2rem;padding-bottom:2rem;}
.service h4{font-size:20px;padding-bottom:1rem;text-align:center;}
.service p{font-size:16px;padding-bottom:1rem;}

#webAppDev .advertising{display:flex !important;justify-content: flex-start !important; flex-flow: row wrap;}
.portfolio{padding:1rem;width:600px;}
.portfolio img{height:500px;padding-left:2.43rem;padding-top:2rem;padding-bottom:2rem;}
.portfolio p, h4{text-align:center !important;}

.advertise a:hover{ text-decoration:none;color:white;}
.emailus{border-radius:0.3rem;border:1px solid #154c79;padding:0 0.6rem;background:#154c79;color:white;}
.emailus:hover, .emailus:hover a:link{color:#154c79;background:white;}  

.div10 		{ grid-area: 7 / 1 / 8 / 5; background:black !important;}
.btmMenu 	{ grid-area: 7 / 2 / 8 / 3; background:black !important;}
.btmMenu 	{ grid-area: 7 / 2 / 8 / 7; background:black;height:100%;display:flex;align-items:center;padding:2rem 0;}
.btmMenu 	ul{list-style:none;}
.btmMenu 	li{float:left;}
.btmMenu 	a:link{padding:0 8px;text-decoration:none;font-family:verdana, sans-serif;font-size:0.7rem;color: #ffdd00;display:block;}
.btmMenu 	a:visited{color:#ffdd00;}
.btmMenu 	a:hover{color:white;}




.btmLogo 	{ grid-area: 7 / 3 / 8 / 4; background:black !important; justify-content:flex-end;}

.div11 		{ grid-area: 8 / 1 / 9 / 5; background:#555 !important;}
.disclaimer	{ grid-area: 8 / 2 / 9 / 4; background:#555 !important;}
.disclaimer p{font-size:0.5rem;color:white;} 

.div12 		{ grid-area: 9 / 1 / 10 / 5; background:#000 !important;}
.copyright	{ grid-area: 9 / 2 / 10 / 4; background:#000 !important;justify-content:space-between !important;}
.copyright  	p{font-size:0.7rem;color:white;justify-content:flex-end !important;}

.copyright 	a:link{padding:0 8px;text-decoration:none;font-family:verdana, sans-serif;font-size:1.6rem;color:white;display:block;border-radius:0.6rem;border:1px solid white;padding:0 0.4rem;}
.copyright 	a:visited{color:white;}
.copyright 	a:hover{color:#bbb;}

.burger		{display:none;}
.registration{display:block }


.registration  input[type=text] {
  border: 2px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  background-color: white;
  padding: 4px ;
}


.registration input[type=submit] {
    padding:5px 15px; 
    background:#c41200; 
    border: 2px solid #c41200;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    color:white;
}





.social{padding:0.2rem;margin-right:2rem;}
.social img{height:32px;}
.share img{height:26px;}

#accreditation .content h1 {padding: 0.6rem 0 0.2rem 0;line-height: 120%;}
#accreditation .content p {padding: 0 0 0.5rem 0;}

#members .content h1 {padding: 0.6rem 0 0.2rem 0;line-height: 120%;}
#members .content p {padding: 0 0 0.5rem 0;}
#contact .content {background-image: url("branding/yellow.jpg");}



.chat{
     position:fixed;
     bottom:1rem;
     right:1rem;
     height: 50px;
     width: 50px;
}


/* ******** MOBILE ********** */

@media only screen and (max-width:800px){

.parent {
	display: grid;
	grid-template-columns: 	minmax(400px, 1fr);
	grid-template-rows: 	100px repeat(8, auto);
	grid-template-areas: "header" "showcase" "content" "advertise" "btmMenu" "btmLogo" "disclaimer" "copyright";
	background:#eee;
	flex-direction: column;
}

.parent > div{

	xxpadding:2rem;
	display:flex;  
	align-items:center;
	xxborder-bottom:1px solid black;
	}

.contactBar 	{ grid-area: contactBar; 	display:none !important;}
.header 		{ grid-area:header; 		justify-content:space-between; }
.menu 			{ grid-area: menu; 			display:none !important;}
.showcase 		{ grid-area: showcase; 		}
.content 		{ grid-area: content ; 		padding:1.4rem !important;}
.advertise 		{ grid-area: advertise ; 	padding-left:1.8rem !important;}
.btmMenu 		{ grid-area: btmMenu ; 		}
.btmLogo		{ grid-area: btmLogo; 		justify-content:flex-end;background:#154c79;}
.disclaimer		{ grid-area: disclaimer ; 	justify-content:flex-start;}
.copyright 		{ grid-area: copyright ; 	justify-content:flex-start;}


.div1, .contactBar, .div4, .div10, .div11, .div12{display:none !important;}
.service {background:#eee;height:250px; width:100% !important;margin-right:2rem;padding:1rem;display:flex;align-items:center;justify-content:flex-start;margin-bottom:1rem;}
.service img{padding-right:1rem;}
.portfolio{padding:1rem;}
.portfolio img{max-width:100%;height:auto;padding-left:2.43rem;padding-top:2rem;padding-bottom:2rem;}
.portfolio p, h4{text-align:center !important;}


.burger{display:flex;z-index:200;}
.registration{display:none }

.chat{
     position:fixed;
     bottom:4.5rem;
     right:1rem;
     height: 50px;
     width: 50px;
}
}