*{
html{
overflow-x: hidden !important;
}
margin: 0;
border: 0;
padding: 0;
}
body{
font: 14px/20px Arial, San-Serif;
font-weight: bold;
color: #555;
margin: 0;
float: center;
background: #E6E6FA;
}
table {
width: 100%;
text-align: left;
border: 1px solid black; }
 th, td {
text-align: center;
border: 1px solid black; }
h1 {
text-align: center;
font-size: 180%
line-height: 100%
padding 5% 0;
}
h2 {
text-align: center;
color: #FF0000;
text-decoration:underline;
line-height: 200%
padding-left: 2%;
}
h3 {
line-height: 100%;
padding: 5% 0;
}
img {
align:center;
border-radius: 10px;
max-width:100%;
}

.fiximg1 {
position:relative;
background-size:cover;
background-repeat: no-repeat;
background-image:url('images/preview.jpg');
min-height: 400px;
max-width: 100%;
background-attachment:fixed;
}
.fiximg2 {
position:relative;
background-position:center;
background-size:cover;
background-repeat: no-repeat;
background-image:url('images/DSC_1339.jpg');
min-height: 600px;
background-attachment:fixed;
}
.fiximg3 {
position:relative;
background-position:center;
background-size:cover;
background-repeat: no-repeat;
background-image:url('images/IMG_20190210_141306.jpg');
min-height: 500px;
background-attachment:fixed;
}
.gallery{
         margin: 10px 50px;
}

.gallery img{
width: 300px;
}
a{
color: #000;
text-decoration: none;
font-weight: bold;
}

header {
background-color: #F44336;
background-repeat: no-repeat;
width: 100%;
position: absolute;
top: 0;
z-index: 100;
opacity: 0.8;
}
p {
padding: 0 50px 0 50px;
font-family: "Times New Roman", Times, serif;

font-size: 1em;

}
#logo {
position: relative;
float: left;
width: 20%;
height: auto;
margin-top: 10px;
margin-left: 20px;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 7vh;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 60%;
}
.nav-links li {
	list-style: none;
}
.nav-links a{
	text-decoration: none;
	font-weight: bold;
}
.nav-links a:hover{
	color: white;
	text-decoration: underline;
	font-weight: bold;
}
.burger{
	
}
.burger div{
	width: 22px;
	height: 3px;
	background-color: white;
	margin: 4px;
}



.current {
color: #FFF;
text-decoration:underline;
}
#doc {
margin: 20px 0;
}
#content {
margin: 0 auto;
max-width: 90%;
margin-top: 110px;
}

.clear {
margin-top: 50px;
}
.space {
margin-top: 130px;
}
.blueberry {
background: #F0F0F0;
max-width: 100%;
}
section {
width: 25%;
padding: 0px 20px 0px;


}
section1 {
width: 23%;
float: right;
margin: 5%;
font-size: 1,5vw;



}

aside {
margin-top: 50px;
margin: 0 auto;
width: 70%;
height: auto;
}


footer {
background: #333333;
width: 100%;
overflow: hidden;
opacity: 0.90;
bottom: 0;
}
footer p, footer h3 {
color: #FFF;
padding: 10px 5px 0 10px;
}

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

section1{
width: 80%;}
section{
width: 80%;}


}



@media screen and (max-width: 640px) {	
body{overflow-x: hidden;}
.nav-links{
	display: block;
	width: 90%;
	position: absolute;
	right:0px;
	height: 92vh;
	top: 8vh;
	background-color: #F44336;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 50%;
	transform: translateX(100%);
	transition: transform 0.5s ease-in;
	}
	.nav-links li{
		opacity: 1;
	}	
	.burger{
		display: block;
		cursor: pointer;
		
	}
	.nav-active{
		transform: translateX(0%);
		
	

section{
width: 100%;
}
section1{
width: 100%;}

}


@media screen and (max-width: 740px) {
	
body{overflow-x: hidden;}

	
	

section1{
width: 80%;}
section{
width: 80%;
}



}	


@media screen and (max-width: 960px) {
body{overflow-x: hidden;}
header { absolute;}
section{
width: 100%;}
section1{
width: 100%;
             } 
			 img{
	max-width: 100%;
}
}

@media screen and (max-width: 1024px) {
body{overflow-x: hidden;}
header { absolute;}
section{
width: 100%;
            }
section1{
width: 100%;
            }
	 img{
	max-width: 100%;
}		
}
                                                            




}
section {
float: left;
border-radius: 10px;
margin: 0;
padding: 0;
}
 

#map {
height: 200px;
width: 200px;
}
.textOverImage{
position:relative;
width: 300px;
height: 220px;
background-size: 100%;
transition: 0.5s
}

.textOverImage:hover{
background-size: 110%;
}
.textOverImage:after{
content:attr(data-text);
position: relative;
overflow: hidden;
background-color: rgba(0,0,0,1);
color: #fff;
opacity: 0;
content: attr(data-text);
transition: 0.5s;
}
.textOverImage:hover:after{
opacity: 1;
}

.btn {
            background-color: green;
            color: white;
            padding: 12px;
            text-align: center;
            font-size: 16px;
            margin: 5px;
            opacity: 0.5;
            transition: 0.5s;
            display: inline-block;
            text-decoration: none;
            cursor: pointer;
         }
         .btn:hover {
            opacity: 2
         }

input[type=submit] {
    width: 20em;  height: 2em;
}