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


@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:24px;
  letter-spacing: 8px;
  font-family: Ralewaybold;
  float:left;
  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;*/
	padding-left:9px;
	font-size:15px;
	color:white;
	font-family: worksanslight;
}



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;
  
  padding: 0;
  margin: 0;
  font-size: 18px;
  background: url(background_mountains.jpg) no-repeat center center fixed;
  
  /*
  animation-name: change; 
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
    */
    
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    
    
    }
}

body.index a {
    color:dimgray;
    font-size: 18px;
}


@keyframes change {
    0%, 15% {
        background: url(SDN_5112.jpg) no-repeat center center fixed;
        /*background-size: 50% 60%;*/
            }
            
    20%, 35% {
        background: url(DSC_8235.jpg) no-repeat center center fixed;
        /*background-size: 50% 60%;*/
            }
            
    40%, 55% {
        background: url(SDN_2418.jpg) no-repeat center center fixed;
        /*background-size: 50% 60%;*/
            }
            
    60%, 75% {
        background: url(SDN_4625.jpg) no-repeat center center fixed;
        /*background-size: 50% 60%;*/
            }
            
            
    80%, 100% {
        background: url(DSC_6587.jpg) no-repeat center center fixed;
        /*background-size: 50% 60%;*/
            }
}





body.index2 {
  width:100%;
  padding: 0;
  margin: 0;
  font-size: 18px;

  /*-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  */
}


body.index2 a {
    color:gray;
    
}


.wrapper {
  width:100%;
  min-height: 100vh;

  font-size: 20px;
  margin-left:auto;
  margin-right:auto;
  overflow: auto;
}


.pageheadertext {
  width:100%;
  font-size: 1.5vw;
  font-family:Madecanvas;
float:left;
text-align:center;
margin-top:75px;
}



.align-left2 {
  width:60%;
  font-size: 2vw;

float:left;
text-align:left;
  margin-left:3%;
  margin-top:1%;
}



.align-left3 {
  width:27%;
  float:right;
padding-top:5px;
  font-size: 16px;
  text-align:center;
    margin-right:3%;
  margin-top:1%;

}


.align-left3 table {
width:100%;
  text-align: center;


}


.align-left3 table td {
border-right: 1px solid white;
padding-right:10px;
  text-align: center;

}


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



.categories {
position:relative;
float:left;
height:300px;
margin-left:25px;
margin-top:25px;
}

.categories img {
    bottom: 0px;
}


.categoriestext {
width:100%;    
position:absolute;
z-index: 1;
bottom: 0px;
color:white;
background-color: black;
opacity: 0.6;
height:28px;
padding-top:5px;
font-size:14px;
  font-family:Calibri;
}


.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;
}



body.gallery {
  padding: 0;
  margin: 0;
  
   width:100%;
}



/* line 8, ../sass/demo.scss */
* {
  box-sizing: border-box;
}


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

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

.middleindex {
  max-width:100%;
  /*color:dimgray;*/
  font-size: 18px;
  margin-left:auto;
  margin-right:auto;
  margin-top:5px;
  padding-bottom:1.5%;
  height:35px;
}

.middleindex {
  max-width:100%;
  /*color:dimgray;*/
  font-size: 18px;
  margin-left:auto;
  margin-right:auto;
  margin-top:5px;
  padding-bottom:1.5%;
  height:35px;
}



.middlegallery {
  max-width:100%;
  color:dimgray;
  font-size: 18px;
  margin-left:auto;
  margin-right:auto;
  margin-top:5px;
  height:35px;
  padding-bottom:1.5%;
}


.middlegallery a {
  max-width:1000px;
  color:dimgray;
  font-size: 18px;
  margin-left:auto;
  margin-right:auto;
  margin-top:2%;
  height:35px;
  padding-bottom:1.5%;
}


.containerwrapper {
  width:100%;
  min-height: 100vh;
  color:white;
  font-family: 'Raleway', sans-serif;
  padding-top:12px;
  font-size: 20px;
  margin-left:auto;
  margin-right:auto;
  background-color: white;
  margin-top:2%;

}


.container {
  max-width:1250px;
  width: 99%;
  height: 100%;
  color:white;
  font-family: 'Montserrat', sans-serif;
  margin-top: 2%;
  font-size: 20px;
  margin-left:auto;
  margin-right:auto;
  background-color: white;

}


.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;
}





/* line 32, ../sass/demo.scss */
.container .gallery a img {
  float: left;
  width: 75%;
  height: auto;
  padding-left:2%;
   padding-top:2%;
   object-fit: cover;

  -webkit-transition: -webkit-transform .15s ease;
  -moz-transition: -moz-transform .15s ease;
  -o-transition: -o-transform .15s ease;
  -ms-transition: -ms-transform .15s ease;
  transition: transform .15s ease;
  position: relative;
}
/* line 46, ../sass/demo.scss */
.container .gallery a:hover img {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  z-index: 5;
}
/* line 57, ../sass/demo.scss */
.container .gallery a.big img {
  width: 40%;
  height: auto;

}

/*
.align-center {
	width: 100%;
	text-align:center;
	font-size: 60px;

	margin-top:6%;
    letter-spacing: 0px;
	margin-left:auto;
    margin-right:auto;
    padding-left:4%;
    padding-right:4%;
}   */


.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:white;
  width:100%;
  height: 25px;
  font-size: 11px;
  position:relative;
  bottom:0;
  left:0;
  text-align:center;
  padding-top:0.5vh;
  font-family:Madecanvas;
}



.bottom a {

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





/* 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 {
  padding: 0;
  margin: 0;
  background: url("sea_small2.jpg") no-repeat; 
  background-position: 50% 45%;
  
  /*
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  */

  }
}


@media screen and (max-width: 800px) {
body.index2 {
  padding: 0;
  margin: 0;
    font-size:10px;
  }
}



@media screen and (max-width: 800px) {
body.index2 a {
    color:gray;

    
  }
}




@media screen and (max-width: 800px) {
  .middleindex {
   margin-top:0;
   border:none;
   padding-bottom:0;

  }
}


@media screen and (max-width: 800px) {
  .middlegallery {
     height:20px;
     border:none;

  }
}



@media screen and (max-width: 800px) {
  .categories {
    height:150px;
    width:150px;
    margin-left:5%;
    margin-top:5%;

  }
}

@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) {
  .categoriestext {
width:100%;    
position:absolute;
z-index: 1;
bottom: 0;
color:white;
background-color: black;
opacity: 0.6;
height:20px;
padding-top:4px;
font-size:10px;
  }
}


@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-center2 {
   width:100%;
   font-size: 16px;
   margin-left:auto;
   margin-right:auto;
  }
}


@media screen and (max-width: 800px) {
.align-left2 {
  margin-top:5%;
  margin-left:6.5%;
  font-size: 120px;
  float:left;
  width: 56%;
 }
}

@media screen and (max-width: 800px) {
  .align-left3 {
font-size:9px;
float:left;
width: 90%;
margin-top:2%;
  }
}





@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:black;
  }
}


@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: 8px;
     color:black;
  }
}


@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;

  }
}