/* line 1, ../sass/demo.scss */

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

.opensans {
  font-family: "Open Sans", sans-serif;
}


@font-face {
  font-family: Raleway;
  src: url('Raleway-Regular.ttf');
}


@font-face {
  font-family: Ralewayblack;
  src: url('Raleway-Black.ttf');
}


@font-face {
  font-family: Ralewaybold;
  src: url('Raleway-Bold.ttf');
}


@font-face {
  font-family: Ralewaylight;
  src: url('Raleway-Light.ttf');
}


@font-face {
  font-family: RalewayMedium;
  src: url('Raleway-Medium.ttf');
}


@font-face {
  font-family: worksans;
  src: url('WorkSans-Regular.ttf');
}


@font-face {
  font-family: worksanslight;
  src: url('WorkSans-Light.ttf');
}


@font-face {
  font-family: worksansthin;
  src: url('WorkSans-Thin.ttf');
}

@font-face {
  font-family: worksansbold;
  src: url('WorkSans-Bold.ttf');
}


@font-face {
  font-family: montserrat;
  src: url('montserrat/Montserrat-SemiBold.otf');
}

@font-face {
  font-family: harvest;
  src: url('harvest.ttf');
}

@font-face {
  font-family: monix;
  src: url('monix.otf');
}


@font-face {
  font-family: camptonb;
  src: url('camptonb.otf');
}

@font-face {
  font-family: Madecanvas;
  src: url('Madecanvas.otf');
}


@font-face {
  font-family: Moon;
  src: url('Moon.otf');
}


@font-face {
  font-family: Moon_Light;
  src: url('Moon_Light.otf');
}


span1 {
	
	font-size: 15px;
	/*color: gray;*/
}


span2 {
	
	/*color:dimgray;*/
	padding-left:7px;
	font-size:20px;
	color:dimgray;
	font-family: Calibri;
}


.middlegallery span2
{
	
	color:dimgray;
	padding-left:7px;
	font-size:18px;

}







span3 {
	
	color:white;
	font-size: 20px;
	padding-top:3px;	
	padding-bottom:2px;
	display:block;
    letter-spacing: 4px;
  	font-family: RalewayMedium;
}

span4 {
  display:block;
  font-size:18px;
  letter-spacing: 5px;
  font-family: Ralewaybold;
  float:left;
  color:salmon;
  margin-right:20px;
}

span5 {
	/*color:#79a2ea;*/
    padding-right:7px;
}


span6 {
font-size:16px;
text-align:left;
color:dimgray;
font-family:Madecanvas;
}


span7 {
display: inline-block;
vertical-align: middle;
}


span9 {
	color:black;
	padding-left:9px;
	font-size:15px;
	font-family: worksans;
}


span10 {
	
	/*color:dimgray;*/

	font-size:95px;
	color:white;
	font-family: Harvest;
}



span11 {


  display:block;
  font-size:24px;
  letter-spacing: 8px;
  font-family: Ralewaybold;
  float:left;
  margin-right:20px;
}

span12 {
	
	
	color:dimgray;
	font-size: 20px;
	padding-top:3px;	
	padding-bottom:2px;
	display:block;
    letter-spacing: 4px;
  	font-family: RalewayMedium;


}




span2 a {
	color:dimgray;
	font-family:Calibri;
}


span3 a {
	color:dimgray;
	padding-left:6px;
}

span5 a {
	color:#000000;
}

span4 a {
	color:#7ba5f0;
}


span10 a {
	color:white;
	font-family:Calibri;
}


@media screen and (min-width: 800px) {
body.index {
    
  color:white;
  background-image: url("moon1.jpg");
  background-position: center;
  padding: 0;
  margin: 0;
  font-size: 18px;
  background-color: #404040;

    
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

  
    }
}


@media screen and (min-width: 800px) {
body.index2 {
    
  color:white;
  background-image: url("moon1.jpg");
  background-position: center;
  padding: 0;
  margin: 0;
  font-size: 18px;
  background-color: #404040;

    
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

  
    }
}



@media screen and (min-width: 800px) {
body.indexsecond {
    
  color:white;

  padding: 0;
  margin: 0;
  font-size: 18px;
  background-color: #205E69;
    background-position: center;
  /*background-color: #194b54;*/
    
/*
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
*/

    background-image:    url(images/background.svg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */

   }
}

body.index a {
 
    font-size: 14px;
	text-decoration:none;
}


body.index2 a {
 
    font-size: 14px;
	text-decoration:none;
}


body.indexsecond a {

    font-size: 14px;
	text-decoration:none;
}







.wrapper {
  width:100%;
  min-height: 100vh;
  position:relative;
  font-size: 14px;
  margin-left:0;
  margin-right:auto;
  overflow: auto;
  padding-bottom:40px;
  background-color:none;
/*border: 1px solid white;*/
  /*border:1px solid red;*/

}

.wrapper2 {
  width:60%;
  min-height: 100vh;
  position:relative;
  font-size: 14px;
  margin-left:auto;
  margin-right:auto;
  overflow: auto;
  padding-bottom:40px;
  background-color:none;
/*border: 1px solid white;*/
 /* border:1px solid red;*/

}



.topmenu {
width:98%;
font-size: 2vw;
height:25px;
background-color:;
display:         flex;
flex-wrap:       wrap;
text-align:left;


}


.align-left2 {
  width:100%;
  font-size: 2vw;
padding-left: 20pt;
display:         flex;
flex-wrap:       wrap;
text-align:left;

  margin-top:1%;

}


.secondmenu {
width:100%;
font-size: 2vw;
display:         flex;
flex-wrap:       wrap;
justify-content: center;
margin-bottom: 15pt;

}


.thirdmenu {
margin-left:auto;
margin-right:auto;
width:95%;
font-size: 0.8vw;
display:         flex;
flex-wrap:       wrap;
justify-content: center;
margin-bottom: 15px;
font-family: Ralewaybold;
}

.thirdmenu td {
padding-right:10px;
padding-left:10px;
padding-top:5px;
padding-bottom:5px;
border-right: 1px solid white;
}

.thirdmenu td:last-child {
border-right: none;
}


.thirdmenu a {
color:white;
}




.align-right {
border-right: none;
}




.mainthemes {
color:white;	
margin-top:250pt;
margin-bottom:20pt;
margin-left:2%;
width:18%; 
height: 87pt;
position:relative;
font-family: Raleway;
font-size: 16pt;
padding-left: 2%;
padding-right:2%;
padding-top:20pt;
padding-bottom:2%;
float:left; 
box-shadow: 0 0px 10px #36454F;
background-size: contain; 
}

.mainthemes p 
{
position: absolute; top: -10px;
}

.categories {
color:#36454F;	
width:100%;  
position:relative;
font-family: "Open Sans", sans-serif;

background-color: white;
display:         flex;
flex-wrap:       wrap;
justify-content: center;

}

.categories img {
    bottom: 0px;
}


.categories a {

	color:inherit;
	text-decoration:none;
}

.categoriestext {
color:#36454F;	
margin-top:50pt;
margin-bottom:20pt;
width:40%; 
position:relative;
font-family: Raleway;
font-size: 16pt;
padding-left: 2%;
padding-right:2%;
padding-top:20pt;
padding-bottom:15px;
 
margin-left:auto;
margin-right:auto;
box-shadow: 0 0px 10px #36454F;
  
}


.categoriestext a {
color:inherit;	

}

li {
  margin: 8px 0;
}



.align-center2 {
  max-width:1000px;
  text-align: center;
  font-size: 1em;
  letter-spacing:2%;
  color:dimgray;
  font-family:Madecanvas;
  margin-top:140px;

  margin-left:auto;
  margin-right:auto;
}





/* line 16, ../sass/demo.scss */
.clear {
  clear: both;
  float: none;
  width: 100%;
}

/* line 22, ../sass/demo.scss */






.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding-left:1.5%;
}


.column img {
  margin-top: 8%;
  vertical-align: middle;
  width: 100%;
max-width:300px;
}






.align-center img {
	max-width: 100%;
	height: auto;
    width: auto\9; /* ie8 */
}



.align-left {
  font-size: 60pt;
  color: white;
  font-family:getaway;
  height: 500px;
  display:inline-block;
  text-align:center;

}



.align-left3 a {

  text-decoration:none;
  font-family:Madecanvas;
  color:white;
}



.bottom {
  color:gray;
  width:100%;
  height: 40px;
  font-size: 12px;
background-color:white;
    position: absolute;
    bottom: 0;  
  text-align:center;

  padding-top:1vh;
  font-family: "Open Sans", sans-serif;
}

.bottomindex {
  color:gray;
  width:100%;
  height: 40px;
  font-size: 12px;
background-color:none;
    position: absolute;
    bottom: 0;  
  text-align:center;

  padding-top:1vh;
  font-family: "Open Sans", sans-serif;
}



.bottom a {

	text-decoration:none;
  font-family: "Open Sans", sans-serif;

}





/* MOBILE BEGINS HERE */
/* MOBILE BEGINS HERE */
/* MOBILE BEGINS HERE */
/* MOBILE BEGINS HERE */
/* MOBILE BEGINS HERE */
/* MOBILE BEGINS HERE */
/* MOBILE BEGINS HERE */
/* MOBILE BEGINS HERE */
/* MOBILE BEGINS HERE */
/* MOBILE BEGINS HERE */
/* MOBILE BEGINS HERE */
/* MOBILE BEGINS HERE */
/* MOBILE BEGINS HERE */
/* MOBILE BEGINS HERE */
/* MOBILE BEGINS HERE */
/* MOBILE BEGINS HERE */




@media screen and (max-width: 800px) {
  body.index {
  background-image: url("moon_vertical.jpg");
  background-size: 100vw;
  background-repeat: no-repeat;

  padding: 0;
  margin: 0;
  font-size: 18px;
  background-color: #404040;


  }
}




@media screen and (max-width: 800px) {
body.index2 {
  background-image: url("moon_vertical2.jpg");    
  background-size: 100vw;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
   font-size:18px;
  background-color: #404040;

  }
}

body.index2 a {
 

	text-decoration:none;
	color:white;   
}

body.index2 td {
 

	text-decoration:none;
	color:white;   
}


@media screen and (max-width: 800px) {
body.indexsecond {
  color:white;
  background-color: #205E69;
}
    
}





@media screen and (max-width: 800px) {
.topmenu {
  width:95%;
 
  font-size: 10px;
  font-family:Madecanvas;
   /*border: 1px solid red;*/
text-align:center;
margin-top:15px;
display:         flex;
flex-wrap:       wrap;
  }
}



@media screen and (max-width: 800px) {
.align-left2 {
  margin-top:1%;
  margin-left:2%;
  font-size: 20px;
  width: 90%;
  display: flex;
  flex-wrap: wrap;
   color:white;

 }
}




@media screen and (max-width: 800px) {
.wrapper {
  width:100%;
  font-size: 16px;
  font-family:Madecanvas;

float:left;
text-align:center;
margin-top:5px;
  }
}


@media screen and (max-width: 800px) {
.wrapper2 {
  width:100%;
  font-size: 16px;
  font-family:Madecanvas;

float:left;
text-align:center;
margin-top:5px;
  }
}


@media screen and (max-width: 800px) {
.secondmenu {
  width:100%;
  font-size: 16px;
  font-family:Madecanvas;
   /*border: 1px solid red;*/
float:left;
text-align:center;
margin-top:5px;
  }
}

@media screen and (max-width: 800px) {
.thirdmenu {
  width:95%;
  font-family:Madecanvas;

  text-align:center;
  margin-top:10px;


  }
}




@media screen and (max-width: 800px) {
.thirdmenu td {
padding-right:5px;
padding-left:5px;
padding-top:5px;
padding-bottom:5px;
border-right: 1px solid white;

}

.thirdmenu td:last-child {
border-right: none;
    }
}

@media screen and (max-width: 800px) {
.thirdmenu td a {
    font-size:2vw; 
    font-family:Ralewaybold;
}
}


@media screen and (max-width: 800px) {
.categories {
color:#36454F;	
width:100%;  
position:relative;
font-family: "Open Sans", sans-serif;
box-shadow: none;
background-color: white;
/*
display:         flex;
flex-wrap:       wrap;
*/

}
}

@media screen and (max-width: 800px) {
.categories img {
    bottom: 0px;

}
}

@media screen and (max-width: 800px) {
.categories a {

	color:inherit;
	text-decoration:none;

}
}


@media screen and (max-width: 800px) {
.categoriestext {
color:#36454F;	
margin-top:2pt;
margin-bottom:20pt;
width:98%; 
/*position:relative;*/
font-family: Raleway;
font-size: 10pt;
padding-left: 4%;
padding-right:4%;

padding-bottom:15px;
text-align:left; 
box-shadow: none;
  
}
}



@media screen and (max-width: 800px) {
.categoriestext a {
text-align:left; 

}
}



@media screen and (max-width: 800px) {
.categoriestext img {
max-width:30%; 

}
}

@media screen and (max-width: 800px) {
.mainthemesframe {
border 1px solid red;    
	
margin-top:60pt;

    }
}


@media screen and (max-width: 800px) {
.mainthemes {
 
color:white;	
margin-top:40pt;
margin-bottom:10pt;
margin-left:3%;
margin-right:3%;
width:9rem; 
height: 4.5rem;
position:relative;
font-family: Raleway;
font-size: 8pt;
font-weight:bold;
padding-top:20pt;
padding-bottom:2%;
float:left; 
box-shadow: 0 0px 10px #36454F;
background-size: contain; 
background-image:no-repeat;
    }
}


@media screen and (max-width: 800px) {
.mainthemes p 
{
position: absolute; top: -40px;

    }
}




@media screen and (max-width: 800px) {
  .categories img {
    height:100%;
    width:100%;
    /*position:relative;*/
  }
}


@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}



@media screen and (max-width: 800px) {
  .column img {
 margin-top: 4%;
  vertical-align: middle;
  width: 100%;
  max-width:300px;
  }
}



@media screen and (max-width: 800px) {
.pageheadertext {
  width:100%;
  font-size: 16px;
  font-family:Madecanvas;
   /*border: 1px solid red;*/
float:left;
text-align:center;
margin-top:75px;
  }
}





@media screen and (max-width: 800px) {
  .align-left3 a {
font-size:10px;
  }
}


@media screen and (max-width: 800px) {
  span1 {
     font-size: 8px;
  }
}


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

     font-size: 12px;
     color:dimgray;
  }
}


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

     font-size: 8px;
      color:dimgray;
  }
}


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

     font-size: 10px;
     color:salmon;
  }
}


@media screen and (max-width: 800px) {
span6 {
font-size:10px;
text-align:left;
color:dimgray;
}
}


@media screen and (max-width: 800px) {
span9 {
	color:black;
	font-size:8px;

  }
}

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

     font-size: 40pt;
     color:white;
  }
}


@media screen and (max-width: 800px) {
span11 {
     font-size: 10px;
     color:black;
   }
}


@media screen and (max-width: 800px) {
span12 {
     font-size: 8px;

   }
}


@media screen and (max-width: 800px) {
span2 a {
	color:white;
	font-family:Calibri;
	font-size: 12px;

   }
}

@media screen and (max-width: 800px) {
  span5 {
     border-right: 1px solid white;
  }
}




@media screen and (max-width: 800px) {
  .bottom {
    font-size: 8px;
    padding-top:1vh;

  }
}


@media screen and (max-width: 800px) {
  .gallery .bottom {
    font-size: 8px;
    padding-top:1vh;
    position:relative;

  }
}