body {
	background:#fff;
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-weight:400;
	padding:0px;
	margin:0px;

}

:root {
    --blue-color: #000000;   
}


.container {
	Width:100%;
	padding-top:100px;
}



p {
	font-size:16px;
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-weight:400;
	line-height:1.3;
}

/*

///////////////////////////////////

// Headers

///////////////////////////////////

*/

.link {
    position:fixed;
	z-index:999;
	margin:0px;
	padding:0px;
	width:100%;
	height:61px;
	background:#FFFFFF;
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-weight:400;
    overflow:hidden;
    border-bottom:1px solid #000000;
}

a {
	text-decoration:none;
    color:#000;
}

ul {
	padding:0px;
	margin:auto;
	list-style-type:none;	
}

nav {
    max-width:1200px;
    margin:auto;
}

li {
    display:inline;

}


.menu {
    float:right;
    position:relative;
    color:#000;
    text-decoration:none;
    overflow:hidden;
    display: inline;
    padding:20px 20px;
    font-size:20px;
    height:21px;


}

.nav:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  border-bottom: 2px solid #000;
  transition: 0.2s;
}



.nav:hover:before {
    width:100%;    
}

.name {
	float:left;
    padding:20px 30px;
    font-size:20px;
    height:21px;

}

.top-right{
    padding-right:10px;
    margin:0px;
}


#content {
	padding:0px 50px;
	margin:auto;
	max-width:1000px;
	padding-bottom:150px;

}

.text {
	width:100%;
	margin-bottom:45px;
}

.intro{
	font-weight:700;
}




/*

///////////////////////////////////

// Image effects / title hovers

///////////////////////////////////

*/

.img_img {
	width:100%;
	display: block;
	height:auto;
	animation: fadein 1s;
    -moz-animation: fadein 1s; /* Firefox */
    -webkit-animation: fadein 1s; /* Safari and Chrome */
    -o-animation: fadein 1s; /* Opera */
}

@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

.images {
	width:100%;
	display:block;
	height:auto;
	padding-bottom:20px;
	padding-top:20px;
	animation: fadein 1s;
    -moz-animation: fadein .5s; /* Firefox */
    -webkit-animation: fadein .5s; /* Safari and Chrome */
    -o-animation: fadein .5s; /* Opera */

}

.hero_image {
	width:100%;
	display: block;
	height:auto;
	padding-bottom:20px;
	padding-top:0px;
	animation: fadein 1s;
    -moz-animation: fadein .5s; /* Firefox */
    -webkit-animation: fadein .5s; /* Safari and Chrome */
    -o-animation: fadein .5s; /* Opera */
}

.img__wrap {
  	position: relative;
	width:100%;
	height:auto;
	margin-bottom:120px;

}

.img__description {
  position: absolute;
  color: var(--blue-color);
  border:1px solid var(--blue-color);
  visibility: hidden;
  opacity: 0;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  font-size:40px;
  padding:20px;
  background:#FFF;
  box-shadow: 4px 4px;
  font-family: 'Roboto',Helvetica, Arial, sans-serif;
  font-style:bold;


  /* transition effect. not necessary */
  transition: opacity .3s, visibility .3s;
}

.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
}

.photos {
    width:auto;
    max-width:800px;
    height:auto;
	margin:auto;
	padding-bottom:100px;
}

.photos img{
    pointer-events:none;
    max-height:800px;
    height:auto;
    max-width:100%;
    width:auto;
    margin:auto;
}

.vid {
	width:100%;
	
}

.vid2 {
	width:100%;
	max-width:998px;
	
}


h1 {
	font-size:25px;
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-style: normal;
    font-weight:400;


}

/*

///////////////////////////////////

// About Section

///////////////////////////////////

*/


.abouttitle {
	color:var(--blue-color);
	padding-top:20px;
}

.aboutcontainer {
	padding-top:100px;
	width:100%;
}

.about {
	float:left;
	width:30%;
	padding-right:30px;
	padding-top:30px;
}

.abouttext {
	float:left;
	width:50%;
	padding-right:30px;
	padding-top:30px;
}

.aboutimg {
	width:100%;
}

.links {
	color:#000;
	text-decoration:none;
    border-bottom:2px solid #000;
}

.links:hover {
	color:var(--blue-color) !important;
    border-bottom:2px solid var(--blue-color);
    -webkit-transition: .2s ease-out;
    -moz-transition: .2s ease-out;
    -o-transition: .2s ease-out;
    transition: .2s ease-out;
}

.titles {
	width:100%;
	border-bottom:1px solid var(--blue-color);
	padding-bottom:5px;
	color:var(--blue-color);
	
}


/*

///////////////////////////////////

// Scrolling

///////////////////////////////////

*/

::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background:#000; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #FFF; 
  border:1px solid #000;

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ccc; 
}


/*

///////////////////////////////////

// Footers

///////////////////////////////////

*/


#footer {
	background-color:#FFF;
	color:#000;
	width:100%;
    height:100px;
    border-top:1px solid #000;
}


.bottom {
	max-width:2500px;
	margin:auto;
	padding:50px 30px;
    font-size:20px;

}

#top {
    display:hidden;
}

.topbutton {
    float:right;
    display:inline;
    font-size:25px;
    padding-right:20px;
}

.topbutton:hover {
    color:var(--blue-color);
}

.end {

	height:150px;
}


.zoomableContainer{
	background-color:#e7e7e7;
}

#imgContainer{
	width:100%;
	height:600px;
	overflow:hidden;
}

/*

///////////////////////////////////

// For Mobile

///////////////////////////////////

*/

@media screen and ( max-width: 640px ) {
  
  
  #content {
  	padding:0px 10px;
  }
  
  li {
  	font-size:25px;
  	
  }
  
  .link {
    	height:65px;

  }
  
  .name {
  	display:none;
  }
  .end {

	height:50px !important;
	}
	
	.bottom{
		height:50px !important;
		text-align:center;
	}
 
	 .img__description {
  		font-size:30px !important;
	}
	
	.img__wrap {
	margin-bottom:60px !important;

	}	
	
	.about {
		width:100% !important;
        max-width:300px;
        float:none !important;
        height:auto;
        margin:auto !important;

	}
	
	.aboutcontainer {
		padding-top:0px !important;
		width:100%;
        margin-left:10px;
        margin-right:10px;
	}
	
	.abouttitle {
	   color:var(--blue-color);
	   padding-top:0px;
	}
    
    .abouttext {
	float:none;
    width:100% !important;
	padding-right:0px !important;
	padding-top:15px !important;
    }
    
    .nav:hover:before {
    display:none !important; 
    }
    
    .topbutton {
        display:none !important;
    }
}

@media screen and ( max-width: 400px ) {
	li {
  	font-size:20px;
  	
  }
  
  .link {
    	height:60px;
  }
  
   .img__description {
  		font-size:20px !important;
	}
	
	.img__wrap {
		margin-bottom:50px;
	}
}