@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Kanit:200');

BODY {
/*background-color: rgba(25,25,25,1.00);*/
background: url("../images/DroneBG.jpg");
background-position: top; background-repeat: no-repeat; background-size: cover; background-attachment: fixed;
font-family: 'Kanit', sans-serif;
margin: 0;
}

INPUT:not([type="radio"]):not([type="checkbox"]), TEXTAREA, SELECT {border: 6px solid #FFF; width: 90%; font-size: 0.9rem; font-family: 'Kanit'; color: rgba(0,0,0,1.00);}

IFRAME {border:0; position: fixed; z-index: 1; width: 100vw; height: 100vh;}

A, A:visited {color: rgba(255,255,255,1.00);}
A:hover {color: rgba(255,255,255,0.75);}

.whitetext {color: rgba(255,255,255,1.00);}
.smalltext, FORM P {font-size: 0.7rem;}

#Container {position: absolute; z-index: 10;}

#header {
position: fixed;
z-index: 10;
margin: 0;
background: linear-gradient(90deg, rgba(0,50,63,1) 65%, rgba(0,50,63,0.85) 100%);
color: rgba(255,255,255,1.00);
font-size: 1.5rem;
width: 25vw;
padding: 18px;
line-height: 0.8rem;
}

#MainDiv {
margin-left: 0.4vw;
padding-left: 1.5vw;
min-height: 50vh;
margin-top: 18vh;
width: 22.5vw;
background: rgba(0,50,63,0.75);
padding: 18px;
}

#Footer {background: rgba(34,34,34,1.00); height: 100%;}

.button {background: rgba(66,154,11,1.00); padding: 8px; width: 40%; cursor: pointer; text-align: center;}
.homelink {text-decoration: none;}
#GalleryDiv {margin-top: 160px;}

#Popover {text-align: center; background: rgba(0,0,0,0.70); width: 40vw; height: 78vh; left: 20vw; margin: auto; position: absolute; z-index: 100; border-radius: 8px;}
#Popover IMG {width: 50%; margin-left: 0; border: 1px solid #FFF; cursor: pointer;}
#Popover .button {background:rgba(255,155,0,1.00); color:#000; padding: 8px; width: 40%; cursor: pointer; text-align: center;}
#Popover #Closer {float: right; margin: 0 4% 0 0; font-size: 240%; cursor: pointer; background: rgba(255,255,255,0.15); padding: 0 2%}

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

@media screen and (max-width: 550px) {
H2 {font-size: 1.2rem;}
H3 {font-size: 0.8rem;}

#header {width: 100vw;}
#header H1 {font-size: 2rem;}
#header H4 {font-size: 1rem;}
#MainDiv {width: 90vw; margin: 24vh auto;}

#Popover {width: 80%; height: 60%; left: 10%; border-radius: 4px;}
#Popover IMG {width: 90%;}
#Popover .button {padding: 4px; width: 60%; }
#Popover #Closer {float: right; margin: 0 4% 0 0; font-size: 130%;}
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px)
and (max-device-width: 1024px) {

H2 {font-size: 1.6rem;}
H3 {font-size: 1.1rem;}

#header {width: 45vw;}
#header H1 {font-size: 2rem;}
#header H4 {font-size: 1rem;}
#MainDiv {width: 45vw; margin: 12vh auto;}

#Popover {width: 60vw; height: 60vh; left: 20vw; border-radius: 6px;}
#Popover IMG {width: 64%;}
#Popover .button {padding: 4px; width: 60%; }
#Popover #Closer {float: right; margin: 0 4% 0 0; font-size: 160%;}

}


/* Desktops and laptops. iPad portrait ----------- */
@media only screen 
and (min-width: 1025px)
and (max-width : 1279px) {

H2 {font-size: 1.6rem;}
H3 {font-size: 1.1rem;}

#header {width: 35vw;}
#header H1 {font-size: 2rem;}
#header H4 {font-size: 1rem;}
#MainDiv {width: 35vw; margin: 12vh auto;}

#Popover {width: 60vw; height: 76vh; left: 20vw; border-radius: 8px;}
#Popover IMG {width: 40%;}
#Popover .button {padding: 4px; width: 60%; }
#Popover #Closer {float: right; margin: 0 4% 0 0; font-size: 160%;}

}