@media all and (max-width: 800px){
* {margin:0px auto; padding:0px;}

.body {font-size:1em; line-height:1.5;}
.lgbody {font-size:1em; line-height:1.5;}
.lgbody .title { font-size:16px; color:#274e6c;}
.smalltext {font-size:12px;}
.pika-stage img {max-height:480px; }
.bodylinks img {margin-right:10px;}

#clear {clear:both;}
body,td,th {
	font-family: Oswald, 'Sans-Serif';
	color: #0e0e0e;
	line-height:1.5;
	font-size:1em;
}
body {
 background-image: url(localimages/C21_Pattern4.jpg);
 background-repeat:repeat;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;font-family: 'Barlow', sans-serif;
  letter-spacing: 2px;
}
.small {font-size:12px;}
#container {position:relative; overflow:hidden;  width:100%; background-color:#FFFFFF; text-align:center;}
#container .logo {max-width:280px; height:auto; margin-top:20px;}
#header { background-color:#FFFFFF; width:100%; border-bottom: solid 1px #cccccc;}
#header .left {text-align:left; padding:17px 0px 15px 20px; background-color:#333333; font-size:20px;color:#ffffff;}
#header .left  a:link {color:#FFFFFF; text-decoration:none;}
#header .left  a:visited {color:#FFFFFF; text-decoration:none;}
#header .left  a:hover {color: #FFCC00; text-decoration:underline;}
#header .left  a:active {color:#FFFFFF; text-decoration:none;}

#header .title {font-size:32px; font-weight:bold; color:#f1f1f1; padding:0px 0px 10px 30px;}
#header .right {text-align: center; padding:10px 20px 10px 20px; background-color:#ffffff;}


#slideshow {  width:100%;  position:relative; overflow:hidden; text-align:center; background-color: rgba(37,37,38,0.55);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; background-image:url(localimages/banner.jpg); height:840px;}
#slideshow:after {background-color: rgba(37,37,38,0.5);}
#info {font-size: 1.75em; color:#ffffff;
  font-weight: 600;
  line-height: 1.5;background: rgba(000, 000, 000, .5); height:100%;
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}
  #box { padding:110px 20px 20px 20px; text-align:center; }
  #buton {background-color:#beaf87; text-align:center; font-size:1em; color:#ffffff; margin-top:90px; cursor:pointer;}

#content {  background-color:#FFFFFF; padding-bottom:90px;}
#content .left2 { padding:10px 10px 15px 10px;}
#content .vid {flex:4 22%; padding:10px 10px 15px 10px; margin:20px;}
#content .center { background-color:#666666; margin-bottom:90px; font-family: Montserrat, 'Sans-Serif';}
#content .right { text-align:center;}
#content .right div {padding:10px; text-align:center; background-color:#333333; color:#FFFFFF;margin:1px 0px 1px 0px; cursor:pointer;}
#content .right div:hover {padding:10px; text-align:center; background-color:#746649; color:#FFFFFF;margin:1px 0px 1px 0px; cursor:pointer;}
#content .right p {padding:10px; font-size:14px;}
#content .remarks {background-color:#FFFFFF; font-size:18px; line-height:1.5; font-family: Montserrat, 'Sans-Serif'; padding:20px 40px 20px 40px; text-align:left;}
#content .remarks .title {font-size:24px; font-weight:bold; margin-bottom:20px; color:#746649;}
#secondaryDiv {flex:none!important; background-color:#FFFFFF; width:100%; border-bottom: solid 1px #cccccc; }
#secondaryDiv div {flex:none!important; display:inline-table; margin:0px 10px 0px 10px;}
#content #gallery {width:100%; flex:none!important;}
#detailsmain {  background-color:#333333; color:#ffffff; font-size:1.3em; text-align:center; position:absolute; left:0; right:0; bottom:0;}
#detailsmain div {margin:10px 0px 10px 0px; padding:10px 0px 10px 0px; cursor:pointer;}
#detailsmain2 {  background-color:#333333; color:#ffffff; font-size:1.3em; text-align:center; position:absolute; left:0; right:0; top:0;}
#detailsmain2 div {margin:10px 0px 10px 0px; padding:10px 0px 10px 0px; cursor:pointer;}

#details { }
#details .left { padding:10px 10px 15px 10px;border:solid 1px #333333; font-size:1.2em; }
#details .left div {padding:10px; text-align:left;  color:#333333;margin:1px 0px 1px 0px; overflow:hidden; }
#details .left > :nth-child(even) {border-bottom:solid 1px #333333;}
#details .left > :nth-child(odd) {border-bottom:solid 1px #333333;}
#details .left div > div {float:right;}
#details .left  div:hover {padding:10px; text-align:left; background-color:#746649; color:#FFFFFF;margin:1px 0px 1px 0px; cursor:pointer;}
#details .right{ padding:10px 10px 15px 10px;}
.designations {padding:40px; text-align:center;}

#details2 { background-color:#746649; width:100%; margin-bottom:40px;}
#details2 div {padding:10px; text-align: center;  color:#ffffff; font-size:1.2em; }
#details2  div:hover {padding:10px; text-align: center;  color:#ffffff;  font-size:1.2em; cursor:pointer; background-color:#333333}

.contact {text-align:center; font-size:18px; font-family: Montserrat, 'Sans-Serif';flex:none!important; background-color:#252526; width:100%; color:#ffffff; padding:40px 20px 40px 20px;}
.contact img {max-width:160px;}


#footer {background-color:#000000; padding:20px 10px; text-align:center; color:#FFFFFF;}
#footer a:link {color:#FFFFFF; text-decoration:none;}
#footer a:visited {color:#FFFFFF; text-decoration:none;}
#footer a:hover {color: #FFCC00; text-decoration:underline;}
#footer a:active {color:#FFFFFF; text-decoration:none;}

/* happy menu */
#cssdropdown, #cssdropdown ul {
padding: 0;
margin: 0;
list-style: none;
}

#cssdropdown li {
display:inline-table;
position: relative;
}

.mainitems{ color:#0e0e0e; text-transform:uppercase;
border: none;width: 100%;
margin:10px 0px 10px 0px;

}

.mainitems a{color:#0e0e0e;
width: 100%;
margin:10px 0px 10px 0px;
text-decoration: none;
}

.subuls{
display: none;
width: 100%;

z-index:999;
background-color:#00539f;
border: 1px solid black;
}

.subuls li{
width: 100%; line-height:1.9; padding:2px;
}

.subuls li a:link{ color:#fff;  font-weight:normal;
text-decoration: underline;
}

.subuls li a:visited{ color:#fff;  font-weight:normal;
text-decoration:none;
}
.subuls li a:hover{ color: #FFCC00;  font-weight: bold;
text-decoration: underline;
}

.subuls li a:active{ color:#fff;  font-weight:normal;
text-decoration: none;
}

#cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}

#cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}

#restofcontent { /*wrap rest of content of the page inside this div*/
clear: left;
}


}

@media all and (min-width: 800px) and (max-width: 1200px){
* {margin:0px auto; padding:0px;}

.body {font-size:1em; line-height:1.5;}
.lgbody {font-size:1em; line-height:1.5;}
.lgbody .title { font-size:16px; color:#274e6c;}
.smalltext {font-size:12px;}

.bodylinks img {margin-right:10px;}

#clear {clear:both;}

body,td,th {
	font-family: Oswald, 'Sans-Serif';
	color: #0e0e0e;
	line-height:1.5;
	font-size:1em;
}
body {
 background-image: url(localimages/C21_Pattern4.jpg);
 background-repeat:repeat;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
margin-bottom: 0px;font-family: 'Barlow', sans-serif;
  letter-spacing: 2px;
}
.small {font-size:12px;}
#container {position:relative; overflow:hidden; max-width:1980px; width:100%; background-color:#FFFFFF; text-align:center;}
#container .logo {max-width:280px; height:auto; margin-top:1%;}
#header { background-color:#FFFFFF; width:100%; border-bottom: solid 1px #cccccc; display:flex; justify-content:space-between; flex-wrap:wrap;}
#header .left {text-align:left; padding:17px 0px 15px 24%; flex: 1 17%; background-color:#333333; color:#ffffff;}
#header .left  a:link {color:#FFFFFF; text-decoration:none;}
#header .left  a:visited {color:#FFFFFF; text-decoration:none;}
#header .left  a:hover {color: #FFCC00; text-decoration:underline;}
#header .left  a:active {color:#FFFFFF; text-decoration:none;}

#header .title {font-size:32px; font-weight:bold; color:#f1f1f1; padding:0px 0px 10px 30px;}
#header .right {text-align: center; padding:10px 20px 0px 40px; background-color:#ffffff; flex: 1 75%}


#slideshow {  width:100%;  position:relative; overflow:hidden; text-align:center; background-color: rgba(37,37,38,0.55);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; background-image:url(localimages/banner.jpg); height:640px;}
#slideshow:after {background-color: rgba(37,37,38,0.5);}
#info {font-size: 1.75em; color:#ffffff;
  font-weight: 600;
  line-height: 1.5;background: rgba(000, 000, 000, .5); height:100%;
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
  #box {width:450px; padding:110px 20px 20px 20px; text-align:center; }
  #buton {background-color:#beaf87; text-align:center; font-size:1em; color:#ffffff; margin-top:90px; cursor:pointer;}

#content { display:flex; justify-content:space-between; flex-wrap:wrap; background-color:#FFFFFF; padding-bottom:90px;}
#content .left2 {flex:1 50%; padding:10px 10px 15px 10px;}
#content .vid {flex:4 22%; padding:10px 10px 15px 10px; margin:20px;}
#content .center { background-color:#666666; margin-bottom:90px; font-family: Montserrat, 'Sans-Serif';}
#content .right {flex:1 20%; text-align:center;}
#content .right div {padding:10px; text-align:center; background-color:#333333; color:#FFFFFF;margin:1px 0px 1px 0px; cursor:pointer;}
#content .right div:hover {padding:10px; text-align:center; background-color:#746649; color:#FFFFFF;margin:1px 0px 1px 0px; cursor:pointer;}
#content .right p {padding:10px; font-size:14px;}
#content .remarks {background-color:#FFFFFF; font-size:18px; line-height:1.5; font-family: Montserrat, 'Sans-Serif'; padding:40px; text-align:left;}
#content .remarks .title {font-size:24px; font-weight:bold; margin-bottom:20px; color:#746649;}
#secondaryDiv {flex:none!important; background-color:#FFFFFF; width:100%; border-bottom: solid 1px #cccccc; }
#secondaryDiv div {flex:none!important; display:inline-table; margin:0px 10px 0px 10px;}
#content #gallery {width:100%; flex:none!important;}
#detailsmain { display:flex; justify-content:space-between; flex-wrap:wrap; background-color:#333333; color:#ffffff; font-size:1.3em; position:absolute; padding:5px 0px 5px 0px; bottom:0px; width:100%;}
#detailsmain2 {display:flex; justify-content:space-between; flex-wrap:wrap; background-color:#333333; color:#ffffff; font-size:1.3em; position:absolute; padding:5px 0px 5px 0px; width:100%; left:0; right:0; top:0;}
#detailsmain2 div { cursor:pointer;}
#details { display:flex; justify-content:space-between; flex-wrap:wrap;  padding-bottom:90px;width:90%;}
#details .left { flex:1 40%;padding:10px 10px 15px 10px;border:solid 1px #333333; font-size:1.2em; }
#details .left div {padding:10px; text-align:left;  color:#333333;margin:1px 0px 1px 0px; overflow:hidden; }
#details .left > :nth-child(even) {border-bottom:solid 1px #333333;}
#details .left > :nth-child(odd) {border-bottom:solid 1px #333333;}
#details .left div > div {float:right;}
#details .left  div:hover {padding:10px; text-align:left; background-color:#746649; color:#FFFFFF;margin:1px 0px 1px 0px; cursor:pointer;}
#details .right{flex:1 50%; padding:10px 10px 15px 10px;}
.designations {padding:40px; text-align:center;}

#details2 { display:flex; justify-content:space-between; flex-wrap:wrap;background-color:#746649; width:100%; margin-bottom:40px;}
#details2 div {padding:10px; text-align: center;  color:#ffffff; flex:1 4; font-size:1.2em; }
#details2  div:hover {padding:10px; text-align: center;  color:#ffffff; flex:1 4; font-size:1.2em; cursor:pointer; background-color:#333333}

.contact {text-align:center; font-size:18px; font-family: Montserrat, 'Sans-Serif';flex:none!important; background-color:#252526; width:100%; color:#ffffff; padding:40px 20px 40px 20px;}
.contact img {max-width:160px;}
#footer {background-color:#000000; padding:20px 10px; text-align:center; color:#FFFFFF;}
#footer a:link {color:#FFFFFF; text-decoration:none;}
#footer a:visited {color:#FFFFFF; text-decoration:none;}
#footer a:hover {color: #FFCC00; text-decoration:underline;}
#footer a:active {color:#FFFFFF; text-decoration:none;}

/* happy menu */
#cssdropdown, #cssdropdown ul {
padding: 0;
margin: 0;
list-style: none;
}

#cssdropdown li {
display:inline-table;
position: relative;
}

.mainitems{ color:#0e0e0e; text-transform:uppercase;
border: none; font-size:17px; letter-spacing:2px;  font-family:Arial, Helvetica, sans-serif!important;
margin:0px 9px 0 9px;

}

.mainitems:last-child{ color:#fff; text-transform:uppercase;
border: none;
margin:0px -10px 0px 9px;

}

.mainitems a{color:#0e0e0e;
margin-left: 6px;
margin-right: 8px;
text-decoration: none;
}

.subuls{
display: none;
width: 14em;
position: absolute;
top: 1.2em;
left: 0;
z-index:999; text-align:center;
background-color: #ffffff;
border: 1px solid black;
}

.subuls li{
width: 100%; line-height:1.75; padding:2px;
}

.subuls li a:link{ color:#0e0e0e;  font-weight:normal;
text-decoration:none;
}

.subuls li a:visited{ color:#0e0e0e;  font-weight:normal;
text-decoration:none;
}
.subuls li a:hover{ color: #00539f;  font-weight:normal;
text-decoration: underline;
}

.subuls li a:active{ color:#0e0e0e;  font-weight:normal;
text-decoration: none;
}

#cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}

#cssdropdown .mainitems:last-child .subuls { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left:-144px;
}

#cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}

#restofcontent { /*wrap rest of content of the page inside this div*/
clear: left;
}
}


@media all and (min-width: 1200px) {

* {margin:0px auto; padding:0px;}

.body {font-size:1em; line-height:1.5;}
.lgbody {font-size:1em; line-height:1.5;}
.lgbody .title { font-size:16px; color:#274e6c;}
.smalltext {font-size:12px;}

.bodylinks img {margin-right:10px;}

#clear {clear:both;}

body,td,th {
	font-family: Oswald, 'Sans-Serif';
	color: #0e0e0e;
	line-height:1.5;
	font-size:1em;
}
body {
 background-image: url(localimages/C21_Pattern4.jpg);
 background-repeat:repeat;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;font-family: 'Barlow', sans-serif;
  letter-spacing: 2px;
}
.small {font-size:12px;}
#container {position:relative; overflow:hidden; max-width:1980px; width:100%; background-color:#FFFFFF; text-align:center;}
#container .logo {max-width:280px; height:auto; margin-top:1.5%;}
#header { background-color:#FFFFFF; width:100%; border-bottom: solid 1px #cccccc; display:flex; justify-content:space-between; flex-wrap:wrap;}
#header .left {text-align:left; padding:15px 0px 10px 10px; flex: 1 24%; background-color:#333333; color:#ffffff; max-width:360px; min-width:360px;}
#header .left  a:link {color:#FFFFFF; text-decoration:none;}
#header .left  a:visited {color:#FFFFFF; text-decoration:none;}
#header .left  a:hover {color: #FFCC00; text-decoration:underline;}
#header .left  a:active {color:#FFFFFF; text-decoration:none;}
#header .title {font-size:32px; font-weight:bold; color:#f1f1f1; padding:0px 0px 10px 30px;}
#header .right {text-align:left; padding:10px 20px 0px 40px; background-color:#ffffff; flex: 1 60%}


#slideshow {  width:100%;  position:relative; overflow:hidden; text-align:center; background-color: rgba(37,37,38,0.55);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; background-image:url(localimages/banner.jpg); height:640px;}
#slideshow:after {background-color: rgba(37,37,38,0.5);}
#info {font-size: 1.75em; color:#ffffff;
  font-weight: 600;
  line-height: 1.5;background: rgba(000, 000, 000, .5); height:100%;
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
  #box {width:450px; padding:110px 20px 20px 20px; text-align:center; }
  #buton {background-color:#beaf87; text-align:center; font-size:1em; color:#ffffff; margin-top:90px; cursor:pointer;}

#content { display:flex; justify-content:space-between; flex-wrap:wrap; background-color:#FFFFFF; padding-bottom:90px;}
#content .left2 {flex:1 50%; padding:10px 10px 15px 10px;}
#content .vid {flex:4 22%; padding:10px 10px 15px 10px; margin:20px;}
#content .center { background-color:#666666; margin-bottom:90px; font-family: Montserrat, 'Sans-Serif';}
#content .right {flex:1 20%; text-align:center;}
#content .right div {padding:10px; text-align:center; background-color:#333333; color:#FFFFFF;margin:1px 0px 1px 0px; cursor:pointer;}
#content .right div:hover {padding:10px; text-align:center; background-color:#746649; color:#FFFFFF;margin:1px 0px 1px 0px; cursor:pointer;}
#content .right p {padding:10px; font-size:14px;}
#content .remarks {background-color:#FFFFFF; font-size:18px; line-height:1.5; font-family: Montserrat, 'Sans-Serif'; padding:40px; text-align:left;}
#content .remarks .title {font-size:24px; font-weight:bold; margin-bottom:20px; color:#746649;}
#secondaryDiv {flex:none!important; background-color:#FFFFFF; width:100%; border-bottom: solid 1px #cccccc; }
#secondaryDiv div {flex:none!important; display:inline-table; margin:0px 10px 0px 10px;}
#content #gallery {width:100%; flex:none!important; text-align:center;}
#detailsmain { display:flex; justify-content:space-between; flex-wrap:wrap; background-color:#333333; color:#ffffff; font-size:1.3em; position:absolute; padding:5px 0px 5px 0px; bottom:0px; width:100%; }
#detailsmain div {cursor:pointer;}
#detailsmain2 {display:flex; justify-content:space-between; flex-wrap:wrap; background-color:#333333; color:#ffffff; font-size:1.3em; position:absolute; width:100%; left:0; right:0; top:0;}
#detailsmain2 div { cursor:pointer;}
#details { display:flex; justify-content:space-between; flex-wrap:wrap;  padding-bottom:90px;width:90%;}
#details .left { flex:1 40%;padding:10px 10px 15px 10px;border:solid 1px #333333; font-size:1.2em; }
#details .left div {padding:10px; text-align:left;  color:#333333;margin:1px 0px 1px 0px; overflow:hidden; }
#details .left > :nth-child(even) {border-bottom:solid 1px #333333;}
#details .left > :nth-child(odd) {border-bottom:solid 1px #333333;}
#details .left div > div {float:right;}
#details .left  div:hover {padding:10px; text-align:left; background-color:#746649; color:#FFFFFF;margin:1px 0px 1px 0px; cursor:pointer;}
#details .right{flex:1 50%; padding:10px 10px 15px 10px;}
.designations {padding:40px; text-align:center;}

#details2 { display:flex; justify-content:space-between; flex-wrap:wrap;background-color:#746649; width:100%; margin-bottom:40px;}
#details2 div {padding:10px; text-align: center;  color:#ffffff; flex:1 4; font-size:1.2em; }
#details2  div:hover {padding:10px; text-align: center;  color:#ffffff; flex:1 4; font-size:1.2em; cursor:pointer; background-color:#333333}

.contact {text-align:center; font-size:18px; font-family: Montserrat, 'Sans-Serif';flex:none!important; background-color:#252526; width:100%; color:#ffffff; padding:40px 20px 40px 20px;}
.contact img {max-width:160px;}

#footer {background-color:#000000; padding:20px 10px; text-align:center; color:#FFFFFF;}
#footer a:link {color:#FFFFFF; text-decoration:none;}
#footer a:visited {color:#FFFFFF; text-decoration:none;}
#footer a:hover {color: #FFCC00; text-decoration:underline;}
#footer a:active {color:#FFFFFF; text-decoration:none;}

/* happy menu */
#cssdropdown, #cssdropdown ul {
padding: 0;
margin: 0;
list-style: none;
}

#cssdropdown li {
display:inline-table;
position: relative;
}

.mainitems{ color:#0e0e0e; text-transform:uppercase;
border: none; font-size:17px; letter-spacing:2px;  font-family:Arial, Helvetica, sans-serif!important;
margin:0px 9px 0 9px;

}

.mainitems:last-child{ color:#fff; text-transform:uppercase;
border: none;
margin:0px -10px 0px 9px;

}

.mainitems a{color:#0e0e0e;
margin-left: 6px;
margin-right: 8px;
text-decoration: none;
}

.subuls{
display: none;
width: 18em;
position: absolute;
top: 1.2em;
left: 0;
z-index:999; text-align:center;
background-color: #ffffff; font-size:15px;
border: 1px solid black;
}

.subuls li{
width: 100%; line-height:1.75; padding:2px;
}

.subuls li a:link{ color:#0e0e0e;  font-weight:normal;
text-decoration:none;
}

.subuls li a:visited{ color:#0e0e0e;  font-weight:normal;
text-decoration:none;
}
.subuls li a:hover{ color: #00539f;  font-weight:normal;
text-decoration: underline;
}

.subuls li a:active{ color:#0e0e0e;  font-weight:normal;
text-decoration: none;
}

#cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}

#cssdropdown .mainitems:last-child .subuls { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left:-144px;
}

#cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}

#restofcontent { /*wrap rest of content of the page inside this div*/
clear: left;
}
}