@charset "utf-8";
/* CSS Document */

@font-face{
	font-family: 'Kabel';
    src: url(../font/ITCKabelStd-Book.otf) format('opentype');
}

body{
	background-image:url('../img/tiledBG.jpg');
	background-repeat:repeat;	
	/*background-color:#f2f2e7;*/
}
a{
	text-decoration: none;
}


/*---------------------------------------------------------------------------------------------------------------------------------------------*/
/*top nav--------------------------------------------------------------------------------------------------------------------------------*/

nav{
	float: left;
	position:fixed;
	margin: 0px;
	margin-top: -10px;
	margin-left: -10px;
	width: 102%;
	height: 110px;;
	background-color: transparent;/*RGBA(248,249,222,1);*/
	z-index: 10;
	overflow:hidden;
	color:#262626;
	border-bottom: 2px solid inset RGBA(0,0,0,0.3);
	
}
#logo_box{
	float: left;
	position:absolute;
	margin: 0px;
	margin-top: 10px;
	width:300px;
	height:100px;
	font-size:3em;
	font-family:'Kabel', Helvetica;
	line-height:100px;
	vertical-align:middle;
	padding-left:15px;
	background-color: transparent;
	z-index:9;
	/*background-image:url('../img/logo_300x100.png');*/
	background-repeat:no-repeat;

}
#nav_elements_container{
	float: right;
	position:absolute;
	margin: 0px;
	margin-top: 10px;
	margin-right:0px;
	width: 100%;
	height: 100px;
	overflow:visible;
	/*background-color:#093;*/
	z-index: 8;
}
#navLinks{
	display: block;
    float: 	right;
	position:relative;
	margin: 0px;
	width: auto;
	height: 100px;
	/*background-color: #969;*/
}
#navLinks a {
    display: block;
    float: left;
	position:relative;
	padding-left:25px;
	padding-right:25px;
	width: auto;
	height: 100px;
	background-color: transparent;
	font-family:'Kabel', Helvetica;
	font-size:1.2em;
	text-align: center;
	line-height:100px;
	vertical-align:middle;
	text-decoration:none;
	color:#262626;
}
/*.nav_element{
	float: right;
	position:relative;
	margin: 0px;
	width: 150px;
	height: 100px;
	background-color: #fff;
	text-align: center;
}*/

#nav_elements_container .icon {
	float:right;
	position:absolute;
	display: none;
	width: 100px;
	height: 100px;
	/*background-color: #89A8D3;*/
	color:#eaeaea;
	text-align:center;
	font-size:1.2em;
	line-height:100px;
	vertical-align:middle;
}
#nav_elements_container .icon:hover{
	line-height:85px;
}


/*---------------------------------------------------------------------------------------------------------------------------------------------*/
/*main content container--------------------------------------------------------------------------------------------------------------------------------*/

#main_container{
	margin: 0px;
	margin-top: 0px;
	margin-left: -10px;
	width: 100%;
	height:auto;
	/*background-color: #E1D6D7;*/
	z-index: 1;
	display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
	
}
#content_container{
	margin: 0px;
	width: auto;
	height: auto;
	/*background-color: #CF0;*/
	display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
}
.column{
	/*padding: 20px;*/
	/*text-align:center;*/
}
#main_content{
	opacity: 0.0;
	animation: 1s slidein;
	animation-delay:0s;
	animation-fill-mode: forwards; 
}
#main_content h2{
	width:70%;
	margin-left:15%;
	margin-top:120px;
	text-align:center;
	font-family:'Kabel', Helvetica;
	font-size:3em;
	}
#main_content .pStatement{
	width:86%;
	margin-left:7px;
	margin-top:10px;
	padding-left:50px;
	font-size:2.7em;
	font-family:'Kabel', Helvetica;
}
#main_content .pCopy{
	width:70%;
	margin-left:7%;
	margin-top:-100px;
	padding-left:50px;
	font-size:1.3em;
	font-family:Arial, sans-serif;
	line-height:1.4em;
}

#secondary_content{
	opacity: 0.0;
	animation: 1s slidein;
	animation-delay:0.3s;
	animation-fill-mode: forwards; 
}
#galleryArea{
	opacity: 0.0;
	animation: 1s slidein;
	animation-delay:0.6s;
	animation-fill-mode: forwards; 
}
#ad_content{
	opacity: 0.0;
	animation: 1s slidein;
	animation-delay:0.9s;
	animation-fill-mode: forwards; 
}
@keyframes slidein {
  from {
    margin-top: 20px;
	opacity: 0.0;
  }

  to {
    margin-top: 0%;
	opacity:1;
  }
}

#imgGridFrame{
	display:grid;
	grid-template-columns: 90%;
    grid-template-rows: auto 25%;
	margin-left:7%;
	grid-gap:10px;
	margin-top:25px;
}
#imgFrameMain{
	overflow: hidden;
}
#imgFrameThumbs{
	display:grid;
	grid-template-columns: repeat(4, 1fr);
    grid-template-rows:1fr;
	grid-gap:10px;
}
.imgFrameThumb{
	width:auto;
	heigth:auto;
	overflow:hidden;	
}
.imgFrameThumb:hover{
	cursor:pointer;
}
.imgFrameThumb img{
	margin-top:0px;
	margin-left:0px;
}
.imgFrameThumb img:hover{
	width:98%;
	margin-left:1%;
	margin-top:1%;
}
#secondary_content #toDoIntro{
	
	font-family:Arial, sans-serif;
	font-size:1.2em;
}
.toDoImg .tDText{
	position:relative;
	width:100%;
	margin-top:10px;
	text-align:left;
	font-size:1em;
	padding-left:0px;
	font-family:Arial, Helvetica, sans-serif;
}

#imgGallery{
	float:left;
	position:relative;
	width:100%;
	margin-left:0%;
	text-align:center;
}
.galImg{
	float:left;
	position:relative;
	width:200px;
	height:200px;
	margin-top:10px;
	margin-left:0px;
	overflow:hidden;
	background-color:#0CC;
}
.galImg img{
		float:left;
		position:relative;
		margin-top:0px;
		margin-left:0px;
	}
.galImg img:hover{
	width:98%;
	margin-left:1%;
	margin-top:1%;
	margin-bottom:1%;
	cursor:pointer;
}



/*#main_content{
	width: 45%;
	height: auto;
	background-color: #AF6566;
	
}
#secondary_content{
	width: 30%;
	height: auto;
	background-color: #44599C;
	
}
#ad_content{
	width: 15%;
	height: auto;
	background-color: #61C955;
	
}

#main_content p{
	padding:50px;
}
#secondary_content p{
	padding:50px;
}
#ad_content p{
	padding:50px;
}*/


/*---------------------------------------------------------------------------------------------------------------------------------------------*/
/*footer--------------------------------------------------------------------------------------------------------------------------------*/

footer{
	float: left;
	position:relative;
	margin-top: 20px;
	margin-left: -10px;
	width: 102%;
	height: 80px;
	background-color: RGBA(0,0,0,0.8);
	z-index: 10;
	overflow:hidden;
	text-align:center;
	color:#eaeaea;
	
}
/*---------------------------------------------------------------------------------------------------------------------------------------------*/
/*Image Viewer---------------------------------------------------------------------------------------------------------------*/

#imgViewer{
	position:fixed;
	display:none;
	grid-template-columns:25% 50% 25%;
    grid-template-rows:10% auto;
	grid-template-areas:". . ."
						". a .";
	width:102%;
	height:102%;
	margin-top:-10px;
	margin-left:-10px;
	z-index:100;
	background-color:rgba(255,255,255,0.9);
	animation: 0.5s vwrFade forwards;
	
}
@keyframes vwrFade {
  from {
	opacity: 0.0;
  }

  to {
	opacity:1;
  }
}
#vwrImgFrame{
	grid-area:a;
	background-color:transparent;
}
#viewerImg{
	float:left;
	position:relative;
	margin-left:0px;
	margin-top:0px;
	opacity:0.0;
	border-bottom:solid 3px rgba(0,0,0,0.2);
	border-right:solid 3px rgba(0,0,0,0.2);
	border-left:solid 3px rgba(0,0,0,0.2);
	animation: 1s vwrImgFade forwards;
	animation-delay:1s;
}
@keyframes vwrImgFade {
  from {
	opacity: 0.0;
  }

  to {
	opacity:1;
  }
}


#viewerClsBtn{
	float:left;
	position:absolute;
	margin-top:-10px;
	margin-left:-10px;
	width:20px;
	height:20px;
	background-color:#FFF;
	display:none;
	border:solid 2px #262626;
	font-family:'Kabel', Helvetica;
	font-size:1em;
	text-align:center;
	vertical-align:middle;
	line-height:20px;
	padding-top:1px;
	cursor:pointer;
}





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

/*@meia queries----------------------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 872px) {
  #topNavigation {
	 height: 110px;
	 overflow:hidden;
  }
  #nav_elements_container {
     width: 100%;
	 height: auto;
  }
  #navLinks{
	  float:left;
	  width: 103%;javascript:void(0);
	  height: 300px;
	  margin-top:100px;
	  margin-left:-10px;
  }
  #navLinks a{
	  width: 102%;
	  height: 20px;
	  margin-top:0px;
	  line-height:24px;
	  padding-top:20px;
	  padding-bottom:20px;
	  
  }
  #navLinks a:hover{
	background-color:RGBA(109,109,109,0.8);
	color:#eaeaea;
  }
  #nav_elements_container a.icon {
     float: right;
	 position:absolute;
     display: block;
	 top: 0px;
	 right: 0px;
	 color: #262626;
  }
  
 
}



@media screen and (min-width: 873px) {
  #topNavigation{
	 height: 110px;
	 /*background-color:#069;*/
  }
  #topNavigation.responsive{
	 height: 110px;
	 overflow: hidden;
  }
  #nav_elements_container {
    width: 100%;
	height: 100px;
  }
  
  #navLinks{
	  float: right;
	  width:auto;
	  height:100px;
	  margin-top: 0px;
	  margin-right: 25px;
  }
  #navLinks a {
	width: auto;
	height: 100px;
	
  }
  #navLinks a:hover{
	line-height:85px;
	color:#262626; 
  }
  #nav_elements_container a.icon {
    float: right;
    display: none;
  }
}
/*---------------------------------------------------------------------------------------------------------------------------------------------*/

/*Adjust page content----------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width:1250px){
	#main_container{
		grid-template-columns: 80% 20%;
        grid-template-rows: 10fr ;
	}
	#content_container{
		margin: 0px;
		width: auto;
		height: auto;
		/*background-color: #CF0;*/
		grid-template-columns: 75% 25%;
        grid-template-rows: auto auto;
	}
	#main_content{
		width: auto;
		height: auto;
		/*background-color: #AF6566;*/
		margin-left:0%;
	}
	
	#main_content p{
		margin-top:10px;
		padding:50px;
	}
	
	#secondary_content{
		width: auto;
		height: auto;
		/*background-color: #44599C;*/
	}
	#secondary_content h2{
		margin-top:120px;
		text-align:center;
		font-family:'Kabel', Helvetica;
		font-size:3em;
	}
	#secondary_content #toDoIntro{
		width:100%;
		height:auto;
		margin-left:0%;
		margin-top:10px;
		padding:0px;
		font-family:Arial, sans-serif;
		font-size:1.2em;
	}
	
	#toDo{
		display:grid;
		margin-left:0%;
		grid-template-columns:100%;
		grid-template-rows:repeat(6, auto);
		background-color:transparent;
		text-align:left;
	}
	.toDoImg{
		width:100%;
		height:auto;
		margin-top:10px;
		margin-left:0px;
		background-color:transparent;
	}
	.toDoImg img{
		float:left;
		position:relative;
		margin-top:0px;
		margin-left:0px;
		width:100%;
		height:auto;
	}
	.toDoImg .tDText{
		float:left;
		margin-top:10px;
		text-align:left;	
	}
	#galleryArea{
		float: left;
		position:relative;
		margin-top: 0px;
		width: 100%;
		height: auto;
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 2;
		grid-row-end: 3;	
	}
	#galleryArea h2{
		margin-top:120px;
		text-align:center;
		font-family:'Kabel', Helvetica;
		font-size:3em;
	}
	.imgGallery{
		float:left;
		position:relative;
		width:45%;
		margin-left:3%;
		background-color:transparent;
		text-align:center;
		overflow:visible;
	}
	.galImg{
		float:left;
		position:relative;
		width:100%;
		height:auto;
		margin-top:10px;
		margin-right:0px;
		overflow:hidden;
		background-color:transparent;
		
	}
	#imgGal2{
		margin-top:0px;
	}
	
	
	.topGalImg{
		margin-top:10px;	
	}
	.topGalImg2{
		margin-top:10px;	
	}
	
	
	#ad_content{
		
		width: auto;
		height: auto;
		/*background-color: #61C955;*/

	}
	#vertAds{
		display:block;
		width:60%;
		margin-left:20%;
		margin-top:110px;
	}
	#horizAds{
		display:none;
		width:70%;
		margin-left:15%;
		margin-top:110px;
	}
	#ad_content p{
		margin-top:110px;
		padding:20px;
	}
}
@media only screen and (min-width:726px) and (max-width:1249px){
	#main_container{
		grid-template-columns: 80% 20%;
        grid-template-rows: auto;
	}
	#content_container{
		width: auto;
		height: auto;
		/*background-color: #CF0;*/
		grid-template-columns: 10fr;
        grid-template-rows: auto auto auto;
		
	}
	#main_content{
		
		width: auto;
		height: auto;
		/*background-color: #996;*/

	}
	#main_content p{
		margin-top:20px;
		padding:50px;
	}
	
	
	#secondary_content{
		width: auto;
		height: auto;
		/*background-color: #61C955;*/

	}
	#secondary_content #toDoIntro{
		padding:50px;
	}

	#secondary_content h2{
		margin-top:70px;
		padding:20px;
		text-align:center;
		font-family:'Kabel', Helvetica;
		font-size:3em;
	}
	#secondary_content #toDoIntro{
		width:70%;
		height:auto;
		margin-left:15%;
		margin-top:-10px;
		padding:0px;
		font-family:Helveica, Arial, sans-serif;
		font-size:1.2em;
	}
	#toDo{
		display:grid;
		width:86%;
		margin-left:7%;
		grid-template-columns:100%;
		grid-template-rows:repeat(6, 350px);
		grid-gap:2.5%;
		background-color:transparent;
		text-align:center;
	}
	.toDoImg{
		float:left;
		position:relative;
		width:100%;
		height:auto;
		margin-top:100px;
		margin-left:0px;
		background-color:transparent;
	}
	.toDoImg img{
		float:left;
		position:relative;
		margin-top:0px;
		margin-left:0px;
	}
	.toDoImg .tDText{
		width:%;
		padding-left:25px;
		text-align:left;
	}
	
	#galleryArea{
		float: left;
		position:relative;
		margin-top: 0px;
		width: 100%;
		height: auto;	
	}
	#galleryArea h2{
		margin-top:120px;
		text-align:center;
		font-family:'Kabel', Helvetica;
		font-size:3em;
	}
	.imgGallery{
		float:left;
		position:relative;
		width:45%;
		margin-left:3%;
		background-color:transparent;
		text-align:center;
		overflow:visible;
	}
	.galImg{
		float:left;
		position:relative;
		width:100%;
		height:auto;
		margin-top:10px;
		margin-right:0px;
		overflow:hidden;
		background-color:transparent;
		
	}
	.topGalImg{
		margin-top:10px;
	}
	.topGalImg2{
		margin-top:10px;	
	}
	
	#ad_content{
		
		width: auto;
		height: auto;
		/*background-color: #AF6566;*/
	}
	#vertAds{
		display:block;
		width:70%;
		margin-left:15%;
		margin-top:110px;
	}
	#horizAds{
		display:none;
		width:70%;
		margin-left:15%;
		margin-top:110px;
	}
	#ad_content p{
		margin-top:110px;
		padding:20px;
	}
	
}
@media only screen and (max-width:725px){
	#main_container{
		grid-template-columns: 10fr;
        grid-template-rows: auto auto;	
	}
	#content_container{
		width: auto;
		height: auto;
		left:0%;
		/*background-color: #CF0;*/
		grid-template-columns: auto;
        grid-template-rows: auto auto auto;
	}
	#main_content{
		float: left;
		position:relative;
		margin: 0px;
		margin-left:0%;
		width: 100%;
		height: auto;
		/*background-color: #61C955;*/

	}
	#main_content p{
		margin-top:10px;
		padding:50px;
	}
	
	
	#secondary_content{
		float: left;
		position:relative;
		margin-top: 0px;
		width: 100%;
		height: auto;
		/*background-color: #AF6566;*/

	}
	#secondary_content h2{
		margin-top:70px;
		padding:20px;
		text-align:center;
		font-family:'Kabel', Helvetica;
		font-size:3em;
	}
	#secondary_content #toDoIntro{
		width:70%;
		height:auto;
		margin-left:7%;
		margin-top:-50px;
		padding:50px;
		
	}
	#toDo{
		display:grid;
		width:86%;
		margin-left:7%;
		grid-template-columns:100%;
		grid-template-rows:repeat(6, auto);
		background-color:transparent;
		text-align:center;
	}
	.toDoImg{
		width:100%;
		height:auto;
		margin-top:10px;
		margin-left:0px;
		background-color:transparent;
	}
	.toDoImg img{
		float:left;
		position:relative;
		margin-top:0px;
		margin-left:0px;
		width:100%;
		height:auto;
	}
	.toDoImg .tDText{
		float:left;
		margin-top:10px;
		text-align:center;	
	}
	
	#galleryArea{
		float: left;
		position:relative;
		margin-top: 0px;
		width: 100%;
		height: auto
	}	
	#galleryArea h2{
		margin-top:120px;
		text-align:center;
		font-family:'Kabel', Helvetica;
		font-size:3em;
	}
	.imgGallery{
		float:left;
		position:relative;
		width:86%;
		margin-left:7%;
		background-color:transparent;
		text-align:center;
	}
	.galImg{
		float:left;
		position:relative;
		width:100%;
		height:auto;
		margin-top:10px;
		margin-left:0px;
		overflow:hidden;
		background-color:transparent;
	}
	.topGalImg{
		margin-top:10px;	
	}
	
	
	#ad_content{
		float: left;
		position:relative;
		margin: 0px;
		width: 100%;
		height: auto;
		left:0%;
		/*background-color: #44599C;*/

	}
	#vertAds{
		display:none;
		width:70%;
		margin-left:15%;
		margin-top:110px;
	}
	#horizAds{
		display:block;
		width:90%;
		margin-left:5%;
		margin-top:110px;
	}
	#ad_content p{
		margin-top:110px;
		padding:50px;
	}
	footer{
		width:105%;
	}
	
}