@font-face { font-family:"Google Sans"; src: url(GoogleSans-Regular.ttf); }
body { font-family: 'Google Sans',arial, sans-serif; padding:0; margin:0;}
h3 { text-align: center; font-size:22px; color: #2CB5E8; font-weight:bold; }
p#about { padding: 40px; font-size: 18px; line-height: 130%; text-align: justify; }
span#first_letter { font-size: 55px; }
span.space { padding-left: 40px; }
header { height: 60px; width:100%; background-color: #1fc8db; background-image: linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%); }
.head-container { position: absolute; width:200px; height: 60px; left: 20px; top: 0px; background-color: rgba(255,255,255,0); }
footer { height: 60px; width:100%; background-color: #eeeeee; background-image: linear-gradient(0deg, #ccc 0%, #ddd 51%, #eee 75%); text-align: center; margin-top: 20px; position:absolute; bottom:0;}
/* page wrapper */
.wrapper { max-width:1200px; margin: 0 auto; }
.wrapper1 { max-width:800px; margin: 0 auto; }
.full_page { width:100%; height: 50px; background-color: #eee; }
.thumb { width: 33.33%; float:left; text-align: center; }
#scrolling { display: none; }

/*--------Navigation bar-------------*/
.nav{ max-width: 1200px; height: 60px; margin: 0 auto; margin-top: -16px; border-radius: 20px; }
li { list-style: none; }
.sub-topic { width:200px; margin-left: 0px; padding-inline-start:0px; }
.sub-topic1 { width:600px; background-color: #eee; margin-left: 0px; padding-inline-start:0px;}
ul li.topic{ width: 16%; line-height: 50px; position: relative; background: #222; text-align: center; float: left; background: #eee; font-size: 20px; }
ul li.mobile { display:none; }
ul li.hovre{ line-height: 40px; position: relative; background: #222; text-align: left; display: block; background: #eee; font-size: 16px; }
ul li.hovre1{ width: 25%; line-height: 50px; position: relative; background: #222; text-align: left; display: inline-block; background: #eee; font-size: 16px; }
ul li ul{ position: absolute; margin-left: -40px; z-index:1; display: none; }
ul li.topic a{ color: #333; width: 100%; height: 48px; display: inline-block; text-decoration: none; text-align: center; }
ul li.hovre a{ color: #333; width: 100%; height: 38px; display: inline-block; text-decoration: none; text-align: center; }
ul li a:hover { font-weight: bold; border-bottom: 2px solid #1fc8db; }
.nav > ul > li:nth-of-type(1){ border-radius: 5px 0px 0px 5px; } /* background-color: #f00; */
.nav > ul > li:nth-of-type(6){ border-radius: 0px 5px 5px 0px; } /* background-color: #f00; */
.nav ul li:hover ul{ display: block; border-width: 0px 3px 3px 0px; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);}
.fa{ margin-right: 5px; }
.fa-list.modify{ display: none; position: absolute; float: right; right: 20px; margin-top: 10px; cursor: pointer; }
.sub-heading { text-align: left; color: #000; background-color: #ddd; font-size:16px; font-weight: bold; padding-left: 15px;}

/*--------Footer-------------*/
footer { height: 60px; width:100%; background-color: #eeeeee; background-image: linear-gradient(0deg, #ccc 0%, #ddd 51%, #eee 75%); text-align: center; margin-top: 20px; position:absolute; bottom:0;}
#container { position: relative; clear:both;}
#copyright { height: 60px; width:100%; position: absolute; bottom: 0; background-color: #eeeeee; background-image: linear-gradient(0deg, #ccc 0%, #ddd 51%, #eee 75%); text-align: center; margin-bottom: -100px;}

/*--------Products-------------*/
.prod_title { width:30%; color: #000; text-align:left; clear: both; padding-left: 15px;}
hr {width: 30%; margin: -20px 0 20px 0; color: #1fc8db; height: 3px;}
.prod-link { text-decoration: none; color:#1fc8db; }
a.prod-link:hover { font-weight: bold; }
/*h2 { text-decoration: underline; text-decoration-color: #1fc8db; width:50%;}*/
.img_c { width: 30%; height: 230px; float:left; text-align:center;}
.des_c { width: 70%; min-height: 230px; float:left; background-color: #f8f8f8;}
li.desc { list-style-type: square; line-height: 150%; }
p.strong { text-decoration: bold; padding-left: 20px; }

/*--------Mobile View-------------*/
@media screen and (max-width: 900px) {
	.img_c { width:100%; clear:both; }
	.des_c { width:100%; clear:both; height:100%; }
}

@media screen and (max-width: 600px) {
	.fa-list.modify{ display: block; }
	#scrolling { display: block; margin:0 auto; width:250px;}
	.nav{ display: none; width: 100%; height: auto; margin: 0 auto;}
	ul li.topic{ width: 100%; float: left; line-height: 60px; font-size: 20px; }
	ul li.mobile { display:block; }
	ul li a{ width: 100%; height: 58px; display: block; }
	body{ overflow-x:hidden; }
	.nav ul li:hover ul{ display: none; }
	.thumb { width: 100%; float:left; }
	.prod_title { width:100%; color: #000; }
	hr {width: 70%; margin: -20px 0 20px 0; color: #1fc8db; height: 3px;}
/*	.img_c { width:100%; clear:both; }
	.des_c { width:100%; clear:both; height:100%; }*/
	h1 { margin-top: -45px; }
}