/*screen style for all */
html, body {margin: 0; padding: 0; overflow: auto; }
body {margin: 0; padding: 0; background-color: #ffffff; font-family: 'Mukta Mahee', sans-serif; overflow: hidden; }
h1 h2 h3 h3 a p ul ol {margin: 0; padding: 0; }

ul {margin: 0; list-style-type: none; }

#wrap {width: 60%; background-color: #ffffff; padding: 0; margin: 0 6% 0 12%; z-index: 5;}
@media only screen and (max-width: 359px) {
#wrap {width:92%;margin: 0 2% 0 2%;}
}
@media only screen and (min-width:360px) and (max-width: 400px) {
#wrap {width:90%;margin: 0% 2% 0 2%;}
}
@media only screen and (min-width:401px) and (max-width: 599px) {
#wrap {width:92%;margin: 0 3% 0 2%;}
}
@media only screen and (min-width:600px) and (max-width: 799px) {
#wrap {width:92%;margin: 0 2% 0 2%;}
}
@media only screen and (min-width:800px) and (max-width: 1023px) {
#wrap {width:94%;margin: 0 2% 0 2%;}
}
@media only screen and (min-width:1024px) and (max-width: 1279px) {
#wrap {width:96%;margin: 0 6% 0 6%;}
}
@media only screen and (min-width:1280px) and (max-width: 1366px) {
#wrap {width:88%;margin: 0 6% 0 10%;}
}

h1 {font-family: 'Vollkorn', serif; font-size:320%; text-align: left; display: flex; align-items:center;letter-spacing: 
.4px; line-height: 100%; color: #080808; position: relative; top: -10px; left: 0; z-index: 10;}
@media only screen and (max-width: 359px) {
h1 {font-size:150%; letter-spacing:.3px; line-height: 110%; position: relative; top: -40px; left: 0; left: 0;}
}
@media only screen and (min-width:360px) and (max-width: 479px) {
h1 {font-size:180%; letter-spacing:.3px; line-height: 110%; left: 0;}
}
@media only screen and (min-width:480px) and (max-width: 599px) {
h1 {font-size:220%; letter-spacing:.3px; line-height: 110%; left: 0;}
}
@media only screen and (min-width:600px) and (max-width: 679px) {
h1 {font-size:260%; letter-spacing:.3px; line-height: 110%; left: 0;}
}
@media only screen and (min-width:680px) and (max-width: 990px) {
h1 {font-size:300%; letter-spacing:.3px; line-height: 110%; left: 0;}
}
@media only screen and (min-width:991px) and (max-width: 1023px) {
h1 {font-size:310%; letter-spacing:.3px; line-height: 110%; left: 0;}
}
@media only screen and (min-width:1024px) and (max-width: 1279px) {
h1 {font-size:330%; letter-spacing:.3px; line-height: 110%; left: 0;}
}



#logo {width:150px; float:left; padding:20px 22px 0px 30px; }
@media only screen and (max-width: 399px) {
#logo {width: 66px; padding:36px 12px 0px 20px;}
}
@media only screen and (min-width: 400px) and (max-width:679px) {
#logo {width: 90px; padding: 36px 20px 0px 20px;}
}
@media only screen and (min-width: 680px) and (max-width:1024px) {
#logo {width: 150px; padding:36px 22px 0px 20px;}
}
@media only screen and (min-width: 1025px) and (max-width:1023px) {
#logo {width: 103px; padding:36px 18px 0px 20px;}
}
@media only screen and (min-width: 1024px) and (max-width:1280px) {
#logo {width: 150px; padding:36px 22px 0px 20px;}
}


#contentbox {clear:all; margin-left: auto; margin-right: auto; width: 100%; background-color: #ffffff; padding: 0 0 0 15%; z-index:30;}
@media only screen and (max-width: 400px) {
#contentbox {padding: 0 0 0 4%;}
}
@media only screen and (min-width: 401px) and (max-width: 599px) {
#contentbox {padding: 0 0 0 4%;}
}
@media only screen and (min-width: 600px) and (max-width: 1023px) {
#contentbox {padding: 0 0 0 5%;}
}
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
#contentbox {padding: 0 0 0 0;}
}
@media only screen and (min-width: 1280px) and (max-width: 1365px) {
#contentbox {padding: 0 0 0 2%; }
}
@media only screen and (min-width: 1366px) and (max-width: 1919px) {
#contentbox {padding: 0 0 0 3%; }
}

#leftbox {display: inline-block; float: left; width: 38%; padding: 0 5% 0 0; margin: 0 20px 0 0; background-color: #ffffff; z-index: 40;}
@media only screen and (max-width: 719px) {
#leftbox {width: 100%;}
}
@media only screen and (min-width: 720px) and (max-width: 1023px) {
#leftbox {width: 43%;}
}
@media only screen and (min-width: 1024px) and (max-width: 1280px) {
#leftbox {width: 43%;}
}
@media only screen and (min-width: 1281px) and (max-width: 1919px) {
#leftbox {width: 45%;}
}

#rightbox {display: inline-block; float: left; width: 44%; padding: 8px 0 0 0; margin: 0; background-color: #ffffff; z-index: 38;}
@media only screen and (max-width: 719px) {
#rightbox {width: 100%; padding: 50px 0 0 0;}
}
@media only screen and (min-width: 720px) and (max-width: 990px) {
#rightbox {width: 42%; padding: 2px 0 0 0;}
}
@media only screen and (min-width: 991px) and (max-width: 1023px) {
#rightbox {width: 42%; padding: 6px 0 0 0;}
}
@media only screen and (min-width: 1024px) and (max-width: 1365px) {
#rightbox {width: 42%; padding: 3px 0 0 0;}
}
@media only screen and (min-width: 1366px) and (max-width: 1919px) {
#rightbox {width: 42%; padding: 7px 0 0 10px;}
}



h2 {font-size: 200%; font-family: 'Mukta Mahee', sans-serif; color: #000000; font-weight: bold; text-decoration: none; padding: 0; margin-top: 2.4%; margin-bottom: 2.2%; width: 100%; line-height: 100%; clear:left; }
@media only screen and (max-width: 400px) {
h2 {font-size:150%; margin-top: 2%; margin-bottom: 1%;line-height: 112%;}
}
@media only screen and (min-width: 401px) and (max-width: 479px) {
h2 {font-size:156%; width: 100%;}
}
@media only screen and (min-width: 480px) and (max-width: 599px) {
h2 {font-size: 156%; width:90%;}
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
h2 {font-size: 162%; width:90%;}
}

ul {list-style-type: square; list-style-position: inside; font-size: 134%; font-family: 'Mukta Mahee', sans-serif; color: #19191a; padding: 0; width: 100%; }
@media only screen and (max-width: 599px) {
ul {font-size:110%; padding: 0 0 0 5%; width: 90%;}
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
ul {font-size:124%; padding: 0 0 0 4%; width: 94%;}
}

h3 {font-size: 180%; font-family: 'Mukta Mahee', sans-serif; color: #121111; font-weight: bold; text-decoration: none; width:100%; clear:left; }
@media only screen and (max-width: 399px) {
h3 {font-size:110%; line-height: 110%;}
}
@media only screen and (min-width: 400px) and (max-width: 599px) {
h3 {font-size:148%;}
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
h3 {font-size:148%;}
}

h4 {font-size: 152%; font-family: 'Mukta Mahee', sans-serif; color: #121111; font-weight: bold; text-decoration: none; width:100%; margin-bottom: 20px; clear:left; }
@media only screen and (max-width: 399px) {
h4 {font-size:138%; line-height: 105%;}
}
@media only screen and (min-width: 400px) and (max-width:480px) {
h4 {font-size:128%; line-height: 100%;}
}
@media only screen and (min-width: 479px) and (max-width:599px) {
h4 {font-size:130%; line-height: 100%;}
}
@media only screen and (min-width: 600px) and (max-width:1024px) {
h4 {font-size:140%; line-height: 100%;}
}

p {font-size: 120%; font-family: 'Mukta Mahee', sans-serif; color: #130f0f; font-weight: normal; text-decoration: none; line-height: 160%; padding: 0; margin:0; width: 100%; }
@media only screen and (max-width: 399px) {
p {width: 90%; }
}
@media only screen and (min-width: 400px) and (max-width: 1024px) {
p {font-size:114%; width: 94%;}
}

.ptopspace {font-size: 120%; font-family: 'Mukta Mahee', sans-serif; color: #130f0f; font-weight: normal; text-decoration: none; line-height: 160%; padding:40px 0 0 0; margin:0; width: 100%; }
@media only screen and (min-width: 720px) and (max-width: 1024px) {
.ptopspace {padding: 20px 0 0 0;}
}

.bigp {font-size: 134%; font-family: 'Mukta Mahee', sans-serif; color: #130f0f; font-weight: normal; text-decoration: none; line-height: 170%; width: 65%; }
@media only screen and (max-width: 399px) {
.bigp {font-size:124%; width: 90%; line-height: 130%;}
}
@media only screen and (min-width: 400px) and (max-width: 599px) {
.bigp {font-size:118%; width: 90%; line-height: 130%;}
}
@media only screen and (min-width: 600px) and (max-width: 719px) {
.bigp {font-size:118%; width: 94%; line-height: 130%;}
}



.smallp {font-size: 94%; font-family: 'Mukta Mahee', sans-serif; color: #130f0f; font-weight: normal; text-decoration: none; line-height: 150%; }
hr {float:left; width: 65%; }
@media only screen and (max-width: 399px) {
hr {width:88%;}
}

.redup {color:#7d070d; font-weight:bold;}


a.text:link {font-size:100%; font-family: 'Mukta Mahee', sans-serif;
 background-color: transparent; color: #184d8b; font-weight:normal; text-decoration: underline; }
a.text:visited {font-size:100%; 
font-family: 'Mukta Mahee', sans-serif; background-color: transparent;color: #465D78; font-weight:normal; text-decoration: underline; }
a.text:hover {font-size: 100%; 
font-family: 'Mukta Mahee', sans-serif; background-color: transparent;color: #740f37; font-weight:normal; text-decoration: underline; }

#formarea {background-color: transparent; z-index: 50; }
@media only screen and (max-width: 680px) {
#formarea {position:relative; top: 0; left: 0x; }
}
@media only screen and (min-width: 601px) and (max-width: 679px) {
#formarea {position:relative; top: 0; left: -30px; }
}

#footer {clear: left; position: relative; top: -35px; left: 0; width: 99%; background-color: #ffffff; padding: 8% 0 0 15%; margin: 0; z-index:60; }
@media only screen and (max-width: 680px) {
#footer {padding: 8% 0 0 2%;}
}

#footerboxleft {display: inline-block; float: left; width: 38%; padding: 2px 0 0 0; margin: 0; background-color: #ffffff; z-index: 61;}
@media only screen and (max-width: 608px) {
#footerboxleft {width: 100%; padding: 2px 0 0 10px;}
}

#footerboxright {display: inline-block; float: left; width: 44%; padding: 8px 0 0 0; margin: 0; background-color: #ffffff; z-index: 62;}
@media only screen and (max-width: 680px) {
#footerboxright {width: 100%; padding: 2px 0 0 10px;}
}


/* togglebox dropdown box section */

.infobox {padding: 0; width: 99%; background-color: transparent; position:relative; top: 0; left: 0; z-index: 71; } /* ultimate togglebox container */
@media only screen and (max-width: 599px) {
.infobox {position:relative; top: 0; left: -50px; }
}
@media only screen and (min-width: 600px) and (max-width: 680px) {
.infobox {position:relative; top: 0; left: 0; }
}


details.ddbox {text-align:left; z-index: 60; }
summary {cursor:pointer;text-decoration:none; background-color: transparent; font-size: 90%; 
font-family: 'Mukta Mahee', san-serif; color:#000000; padding: 5px; text-decoration:none; width: 100%; overflow:hidden;} /* clickable button */
@media only screen and (max-width: 600px) {
summary {cursor:pointer;font-size:88%; width: 100%; font-family: 'Mukta Mahee', sans-serif;}
}


details[open] summary::after {content: "CLOSE"; text-decoration:none; padding: 5px 8px; text-decoration:none;  position: absolute; bottom: 10px; left: 1px; z-index: 9; } /* internal close button */

.info {padding: 5px; background-color: transparent; margin: 0;color: #130f0f; font-size: 105%; 
font-family: 'Mukta Mahee',san-serif; overflow:hidden;} /* the dropbox itself */

.infofloat {z-index: 77; } /* what does this do */

/* end of togglebox dropdown section */