/* --------  default -----------  */
@import url('https://fonts.googleapis.com/css?family=Titillium+Web');
@import url('https://fonts.googleapis.com/css?family=Oswald');


HTML {scroll-behavior: smooth;}

BODY {font-family: 'Titillium Web', sans-serif; font-size: 1.2em; margin: 0; background: url("../images/blue86.jpg"); background-attachment: fixed; background-repeat: no-repeat; background-size: cover;}

A, A:visited {color: rgba(0,17,123,0.85);}
A:hover {color: rgba(0,17,123,0.50);}

INPUT {padding: 12px; background: rgba(255,255,255,1.00); border: 0; width: 60%; margin-bottom: 2px;}

TEXTAREA {padding: 12px; background: rgba(255,255,255,1.00); border: 0; width: 60%; height: 10vh; margin-bottom: 2px; font-family: sans-serif;}

INPUT[type="checkbox"] {padding: 6px; background: rgba(0,17,123,1.00); border: 0; width: 4%; margin-bottom: 2px;}
INPUT[type="submit"] {cursor: pointer;}

SELECT {padding: 12px; background: rgba(0,17,123,1.00); border: 0; width: 20%;}

H3 {color: rgba(0,17,123,1.00);}

UL LI {list-style: circle;}
OL LI {margin-bottom: 6px;}

#vmenu {width: 100%; display: table;}

#newslabel {display: table-cell; vertical-align: middle; text-align: center; color: #000; background: rgba(255,142,0,1.0); border-right: 8px solid rgba(225,225,225,1);}

#container {background: #FFF; border: 8px solid #FFF; width: 64%; max-width: 960px; margin: auto; font-family: 'Titillium Web', sans-serif;}
#container IMG {width: 100%;}

#ImageArray {width: 100%; background:rgba(0,17,123,0.50); padding: 0.5vh 0;}
#ImagePanel {width: 50%; margin-left: auto; color: #FFFFFF; font-family: 'Titillium Web', sans-serif;}

#HeaderImg {width: 60%; margin: 0 20%;}

#Logo {width: 100%;}

#LogoDiv P {color: rgba(255,255,255,1.00); text-align: center; margin: 0 8px;}

#maindiv {transition: width 0.8s, height 0s;}

.NewFlash {background: #9DC3E7; width: 96%; margin: 12px auto; padding: 12px; border-radius: 4px; text-align: center;}
#NewFlash H1 {line-height: 1.0rem; font-size: 1.6rem; color: #FFF;}
#NewFlash .button {max-width: 340px; margin: auto;}

#SendPost {background: rgba(200,200,200,1.00); padding: 2%;}

.ListDiv {clear: left; border-top: 1px solid #C0C0C0;}
.ListDiv IMG {float: left; margin: 0 24px 24px 0; width: 160px;}

#submit {padding: 12px; background: rgba(216,218,220,1.00); border: 0; width: 40%; text-align: center; font-weight: 700; cursor: pointer;}

.button {padding: 8px; background: rgba(255,142,0,1.00); border: 0; text-align: center; cursor: pointer; font-weight: 600;}
.greybutton {padding: 4px; background: #CCC; border: 0; text-align: center; cursor: pointer; font-weight: normal; width: 10%; font-size: 0.8rem; margin: 6px auto;}

#menu {background: rgba(225,225,225,1.00); padding-left: 1vw;}

#menu A {margin-left: 7vw;}

#mainNav {display: none;}

#mainNav DIV {background: rgba(225,225,225,1.00); position: absolute; z-index: 99; margin: auto;}

#mainNav NAV {background: rgba(225,225,225,1.00); display: block; text-align: left; padding: 1% 1% 1% 3%; cursor: pointer;}
#mainNav NAV:hover {background:rgba(225,225,225,0.80);}

#flash {background: rgba(207,83,71,1.00); color: rgba(255,255,255,1.00); font-size: 1.2rem; padding: 0.5vw; cursor: pointer;}

#priceTab {width: 60%;}

#footer {bottom: 0; width: 100%; height: 16vh; background: rgba(0,17,123,0.5); color: #FFF; text-align: center; clear: both;}

.smallprint {font-size: 0.75rem;}

.whitetext,.whitetext:visited,.whitetext:hover {color: rgba(255,255,255,1.00);}

.GoogleMap {width: 3vw; height: 3vw; float: right; margin: 1vh 1vw;}

#BuyNow, .BuyNow {cursor: pointer; width: 30%; background:rgba(255,126,0,1.00); padding: 6px; text-align: center; color: rgba(0,0,0,1.00); float: right; margin-right: 20%;}
.GoTo {float: right; margin-right: 25%; text-decoration: none;}

#Blurb {font-family: 'Titillium Web', sans-serif; line-height: 1.5rem;}

#ContactForm {background: rgba(0,17,123,0.70); padding: 12px;}
#ContactForm IMG,
.IconDisplay {display: block;}

::placeholder {color: #828282; opacity: 1;} /* Firefox */
:-ms-input-placeholder {color: #828282;} /* Internet Explorer 10-11 */
::-ms-input-placeholder {color: #828282;} /* Microsoft Edge */

.sidebar {float: left; margin: 0 24px 6px 0; width: 30%; background: rgba(0,17,123,0.500);}
.sidebar IMG {width: 100%; margin: 3px auto;}
.sidebar P {text-align: center;font-style: italic; color: rgba(255,255,255,1.00); font-size: 0.85rem;}

.cursor {cursor: pointer;}

.Trustees {min-height: 240px;}
.Trustees IMG {float: left;}
.Trustees P, .Trustees H3 {margin-left: 175px;}

.LinkLogo {max-width: 960px; max-height: 250px;}
.LinkLogo IMG {max-width: 50%; max-height: 250px; margin: 0 5%;}

.News {min-height: 240px;}
.News DIV {width: 100%; text-align: center; background: #EEE;}
.News .IMGi {float: left; margin-right: 24px; max-width: 20%;}
.News .IMGr {float: right; margin-left: 24px; max-width: 34%;}
.News .IMG1 {margin-right: 8px; max-width: 50%;}
.News .IMG2 {display: inline-flex; max-width: 50%;}

#Bangla {display: inline; height: 1.6rem;}

#Resources {width: 100%;}
#Resources TD {width: 33%; font-size: 0.9rem; border-bottom: 1px solid #CCC;}
.ResourceDiv {border: 1px solid #DDD; max-width: 60%; margin-left: 35%; min-height: 300px; padding: 6px;}
.ResourceImg {max-width: 30%; float:left; border: 1px solid #CCC;}

#Reports LI {font-size: 0.9rem; margin-bottom: 8px;}
.Reports LI {margin-bottom: 8px;}

.DLarrow {max-width: 18px !important;}

#Vimeo {width: 100%; height: 525px;}

/* --------- smartphone -----------  */

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

BODY {font-size: 0.9rem; padding: 0; background: #FFF;}

H2 {font-size: 1.2rem;}

DIV {width: 100%;}

INPUT {padding: 12px; background: rgba(255,255,255,1.00); border: 0; width: 90%; margin-bottom: 2px;}

#vmenu IMG {width: 5vw; margin: 0.5vh; cursor: pointer; display: table-cell;}

#newslabel {display: none;/*width: 160px; font-size: 0.75rem;*/}

#container {margin: 0 1vw; width: 90%;}

#HeaderImg {width: 90%; margin: 0}

#Mtabs {width: 50%;}

.Mtab {border-bottom: 1px solid #999; margin-bottom: 2px; background: rgba(228,42,45,1.00); height: 24px; padding: 4px;}

#LogoDiv {background-image:url("../images/Logo/logo-banner-sml.jpg"); background-repeat: no-repeat; background-size: cover; width: 100%; height: 140px;background-color: rgba(0,17,123,1.00);  border-bottom: 3px solid rgba(0,17,123,1.00);}
#Logo {width: 100%;}

.NewFlash {width: 98%; margin: 12px auto; padding: 6px; border-radius: 3px;}
#NewFlash H1 {line-height: 1.0rem; font-size: 1.3rem;}
#NewFlash .button {max-width: 300px; padding: 5px;}

.menu {background: rgba(225,225,225,1); width: 100%;}

#submit {padding: 12px; background: rgba(216,218,220,1.00); border: 0; width: 90%; margin-top: 12px; text-align: center; font-weight: 700; cursor: pointer;}

#footer {height: 24vh;}

#ContactForm IMG,
.IconDisplay {display: none;}

.GoogleMap {width: 10vw; height: 10vw; float: right; margin: 3vh 3vw;}
.GigItem {min-height: 11vh; background: rgba(216,218,220,1.00); margin-bottom: 1vh; width: 98%;}
.GigItem IMG:not(.GoogleMap) {height: 15vh; margin: 3px 3vw 3vh; float: left; border: 1px solid rgba(0,0,0,0.3);}

#TrackList {width: 100%; margin-left: 4vw; color:rgba(255,255,255,1.00); font-family: 'Titillium Web';}
#CDimage {max-width: 100%; float: none;}

#CDscroller {width: 100%; background-color: rgba(142,157,167,1.00); padding: 4px;}
#CDscroller DIV {margin: auto;}
#CDscroller IMG {display: inline-flex;}
#CDscroller H3 {margin-left: 0;}

#BuyNow, .BuyNow  {cursor: pointer; width: 90%; background:rgba(255,126,0,1.00); padding: 6px; text-align: center; color: rgba(0,0,0,1.00); margin: 4vw;}

.PicDiv {clear: left; border-top: 1px solid #C0C0C0; width: 90%; margin: 0 auto 6px; text-align: center; background: rgba(0,17,123,0.500); color: rgba(255,255,255,1.00);}
.PicDiv IMG {width: 90%;}
.PicDiv P {text-align: center; margin: 3px;}

.sidebar {float: left; margin: 0 24px 4px 0; width: 50%; background: rgba(0,17,123,0.500);}
.sidebar IMG {width: 100%; margin: 3px auto;}
.sidebar P {text-align: center;font-style: italic; color: rgba(255,255,255,1.00); font-size: 0.85rem;}

.Trustees {min-height: 200px;}
.Trustees IMG {float: left; margin-right: 18px; max-width: 100px;}
.Trustees P, .Trustees H3 {margin-left: 0;}

#Bangla {display: inline; height: 1.2rem;}

#Vimeo {height: 200px;}

.smalltext {font-size: 0.5rem;}
}

/* --------  tablets-----------  */

@media screen and (min-width: 768px) {
DIV {width: 100%;}

#container {width: 98%;}

#vmenu IMG {width: 2.5vw; margin: 1.0vh 1.5vw; cursor: pointer; display: table-cell;}

#newslabel {width: 140px; font-size: 0.9rem;}

#Mtabs {width: 34%;}

.Mtab {border-bottom: 1px solid #999; margin-bottom: 2px; background: rgba(228,42,45,1.00); height: 24px; padding: 4px;}

.menu {background: rgba(225,225,225,1); width: 100%;}

#LogoDiv {background-image:url("../images/Logo/logo-banner-lge.jpg"); background-repeat: no-repeat; background-size: cover; width: 100%; height: 120px;background-color: rgba(0,17,123,1.00); }
#Logo {width: 100%;}

.NewFlash {width: 85%;}

#CDimage {max-width: 80%; margin: auto;}

.PicDiv {clear: left; border-top: 1px solid #C0C0C0; width: 90%; margin: 0 auto 6px; text-align: center; background: rgba(0,17,123,0.500); color: rgba(255,255,255,1.00);}
.PicDiv IMG {margin: auto; width: 100%;}
.PicDiv P {text-align: center; margin: 3px;}

#Vimeo {height: 400px;}

.smalltext {font-size: 0.7rem;}

#footer {bottom: 0; height: 18vh; background: rgba(0,17,123,0.5); color: #FFF; text-align: center; clear: both;}
}
/* --------- desktop screen -------------  */

@media screen and (min-width: 1366px) {

#container {width: 64%;}

#vmenu IMG {width: 1.5vw; margin: 1.0vh 1.5vw; cursor: pointer; display: table-cell;}

#newslabel {width: 160px; font-size: 1.2rem;}

.menu {background: rgba(225,225,225,1); width: 100%;}

#Mtabs {width: 34%;}

.Mtab {border-bottom: 1px solid #999; margin-bottom: 2px; background: rgba(228,42,45,1.00); height: 24px; padding: 4px;}

#LogoDiv {background:url("../images/Logo/logo-banner-lge.jpg"); background-repeat: no-repeat; background-size: cover; width: 100%; height: 200px; background-color: rgba(0,17,123,1.00); }

.PicDiv {clear: left; border-top: 1px solid #C0C0C0; width: 30%; margin: 0 auto 6px; background: rgba(0,17,123,0.500); color: rgba(255,255,255,1.00); font-size: 0.85rem; font-style: italic; padding-bottom: 6px;}
.PicDiv IMG {margin: 0 auto; width: 100%;}
.PicDiv P {text-align: center; margin: 3px;}

.smalltext {font-size: 0.8rem;}

#Vimeo {width: 100%; height: 525px;}

TEXTAREA {padding: 12px; background: rgba(255,255,255,1.00); border: 0; width: 90%; height: 10vh; margin-bottom: 2px; font-family: sans-serif;}

#ImagePanel {width: 100%; margin-left: 0;}

#NextGig {width: 96%; margin: 0 4%; font-family: 'Titillium Web', sans-serif; font-size: 0.95rem;}
}