/*  ----------------------------------------------------------------------------  */

/*  ----------------------------------------------------------------------------  */

/*  --------------------------------- ABOUT PAGES ------------------------------  */
 
/*  ----------------------- info (about) / Awards / Contact --------------------  */
       			
/*  ------------------------------- UPDATED June 25 ----------------------------  */

/*  ----------------------------------------------------------------------------  */

/*  ----------------------------------------------------------------------------  */







/*         prevents highlighting blocks       */
div {
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */}

img {
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */}



body 
{
/*  -------MASTER FONT ---  */

 font-family: 
"Century Gothic",
"Apple Gothic",
"Helvetica Neue",/*  ---- Safari ---  */
"URW Gothic L",
"Avant Garde",
sans-serif;
/*  ----------------------  */

}

html {scroll-behavior: smooth;}



body, html {height: 100%;margin: 0;}

body 
{
height: 100%;margin: 0;
background:rgb(60,100, 65);
background-size:100% auto;
background-opacity: 0.5;
}















/*  -----------------------------------------------------------  */
	    	/*         ABOUT -INFO       */
/*  -----------------------------------------------------------  */

* {box-sizing: border-box;}

p01{opacity:0.23;}

p30{font-size:20px; color:white;}
@media screen and (max-width: 800px) {p30{font-size:3vw;}}
p30 a {text-decoration: none; color:rgb(200 300 220);} 
p30 a:hover{opacity: 0.6;} 

P30 a:visited {color: rgb(200 300 220);}



.bg 
{
height: 100%; 
background-position: center;
background-size: cover;
z-index:0;
}



/*  --------------------- COLUMNS --------------------  */

/* Left column */
.leftColumn {float: left;width: 75%;}

/* Right column */
.rightcolumn {float: left;width: 25%;padding-left: 20px;}

@media screen and (max-width: 800px) 
{.leftColumn, .rightcolumn {width: 100%; padding: 0;}}

* Clear floats after the columns */
.row:after {content: ""; display: table; clear: both;}



/*  ------- Landscape --------  */
.single {float:left; width:calc(37% - 50px); margin-left:60px; border:0px solid red}
.double {padding:20px; width:74%;float:left;}
.ImageCol {width:calc(26% - 20px);padding: 1%; float:left;}
/*  -------------------------  */


/*  ------- mobile --------  */
@media screen and (max-width: 1000px) 
{
.double, .single {float:left; width:90%; height:auto; padding 0;margin-left: 5%;margin-top:0;margin-bottom:0;}
.ImageCol {width: 80%;  height:auto;padding: 0; margin:10%;}
}
/*  -------------------------  */

/*  ---------------------------------------------------  */









.awardX3{position:absolute; top:110px;width: 96%; margin-left: 2%;}
.awardX3 img{Float: left; width:25%; opacity:0.7;}
@media screen and (max-width: 800px) {#awardIcons {text-align: center}}
@media screen and (max-width: 800px) {.awardX3 {top: 60px; left: 0px;width:90%; margin: 5%; }}
@media screen and (max-width: 800px) {.awardX3 img{width:50%;opacity: 1;}}


#aboutText {position:absolute; bottom: 50px; text-align: left;}
@media screen and (max-width: 800px) {#aboutText {bottom: 40px;text-align: center}}





#news
{position:absolute; top:-110px; }

#newsTab
{
 position:absolute;
 top: -42px;
 background-color: green; 
 padding:12px 40px;
 border-radius: 0px 10px 0px 0px;
 width: 180px;
}
#newsTab a{letter-spacing:2px;color:white;;text-decoration: none;}
@media screen and (max-width: 800px) {#newsTab {display:none}}







.cardtop 
{
color:white;
background-color: green; 
Padding:12px 40px;
Margin:0px;
}

.card 
{
background-color: white;
padding:1px 20px;
margin-left:5px;
Margin-bottom: 20px;
}


.socialpost
{
position:relative; 
left: 10%; 
width:80%;
max-width:600px;
border:1px  solid red;
}




#gap1 {height:220px;}
#gap2 {height:300px;}
@media screen and (max-width: 600px) {#gap1{height:0px;}}







/* Image Zoom */

.modal 
{
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

.modal-content {margin: auto; display: block; height:95%;}


#caption 
{
  margin: auto;
  display: block;
  width: 89%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}



/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}




.closeImg 
{
  position: fixed;
  top: 100px;
  Left: 10%;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  background-color:black;
  padding: 10px;
  transition: 0.3s;
}

.closeImg:hover,
.closeImg:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}



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

  .modal-content {margin-top:100px; width: 95%;height:auto;}
  .closeImg {left: 0px;margin-top:70px;}
}


div.desc {
  padding: 7px;
Font-size: 10px;
  text-align: center;
}


.view {cursor: pointer;}
.view:hover {opacity: 0.9;}

/* image zoom end */


	    	/*        end info      */
/*  -----------------------------------------------------------  */




























/*  -----------------------------------------------------------  */
	    	/*         AWARDS      */
/*  -----------------------------------------------------------  */





p3 
{
padding:30px 0px 0px 25px;
font-family: "Century Gothic","Apple Gothic",
AppleGothic,"URW Gothic L","Avant Garde",Futura,sans-serif; 
text-align:center;
color:white;
font-size:22px;
text-decoration: none;
line-height:100%;
}


p4
{
color:rgb(150, 300, 150);
font-weight:normal;
font-size:9px;
letter-spacing:1px;
}


p20
{
font-family: "Century Gothic","Apple Gothic",AppleGothic,"URW Gothic L","Avant Garde",Futura,sans-serif;
color:white;
line-height:120%;
text-align:left;
font-weight:normal;
font-size:15px;
padding:0px 10px 80px 0px;
}


highlight {color:#ffe6b3;}
silver {color:rgb( 238, 241, 254);}




#banner
{
width: 220px;
max-width: 300px;
border:0px solid red;
}
@media screen and (max-width: 600px) {#banner {width:100%; 
max-width: 220px;
border:0px solid red;}}





	/*        Award laurels     */
.awardLaurels{width: 90%;border:0px solid red; padding-top: 95px;opacity: 0.4;}
.awardLaurels img{float:left;width:25%;}
@media screen and (max-width: 800px) 
	{
.awardLaurels {padding-top:0px; max-width: 500px; width:90%; margin:5%; }
.awardLaurels img{width:100%;opacity: 1;}
	}






.awardtext
{
width: 400px;
border:0px solid green;
}
.awardtext a
{
color:#FF5060;
color:#ffcc66;
text-align:left;
font-weight:normal;
font-size:20px;
text-decoration: none;
}
.awardtext a:hover {color:  #ffe6b3;}
@media screen and (max-width: 550px) {.awardtext {margin-left: 0px;width: 200px}}

.topGap{height: 120px;}
@media screen and (max-width: 550px) {.topGap{height: 360px;}}

.awardgap{height: 120px;}
.awardIcons{}


	    	/*        end awards      */
/*  -----------------------------------------------------------  */





















/*  -----------------------------------------------------------  */
	    	/*         CONTACT       */
/*  -----------------------------------------------------------  */



p5
{
color:rgb(150, 300, 150);
font-weight:normal;
text-align:center;
font-size:15px;
line-height:100%;
}


p6
{
color:white;
Font-weight:bold;
text-align:center;
font-size:25px;
line-height: 1.8;
}


.contacttext
{
max-width:450px;
font-size: 18px; 
letter-spacing: 1px;
padding: 60px 20px 0px 20px;
color:rgb(300,230, 300);
}

.contacttext a {text-decoration: none;color:var(--Active);} 
.contacttext a:hover {opacity:0.8;}

@media screen and (max-width: 375px) {.contacttext {padding: 60px 10px 0px 10px;}}

.contactlink{font-size: 15px;}
@media screen and (max-width:375px) {.contactlink {font-size: 12px;}}
@media screen and (max-width:375px) {p5{font-size: 12px;}}
@media screen and (max-width:375px) {p6{font-size: 22px;}}



.iconbtn 
{
cursor:pointer;
opacity:1.0;
}
.iconbtn:hover{opacity:0.8;}


.icongroup 
{
cursor:pointer
width:100%
max-width: 520px;
float: left;
border:0px solid yellow;
}
.icongroup img{width:5%;max-width: 50px;opacity:1.0;padding:10px 10px 0px 10px;}
.icongroup img:hover{opacity:0.8;}