@charset "UTF-8";
/* CSS Document */
html, body{
	height: 100%;
	 margin:0;
    padding:0;
	background-color: #DBE0E4;
}

.container{
	background-color: #DBE0E4;
	height:100%;
	width:100%;
}

/*Header left section*/
.header{
	 text-align: center;
	width:100%;
	color: #a08c7d;
}

.home img{
	border:1px solid black;
}
.header h3{
	font-size:5em;
	padding:.5%;
	margin:0px;
	font-family: 'Staatliches','Source Sans Pro', sans-serif;
	letter-spacing: 10px;
}

/*
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
	border-radius: 20px;
 
}

.dropdown-content a {
	border-radius: 20px;
  color: black;
  padding: 10px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.dropdown-content a:hover {
	background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
*/

/*Nav bar 
font-family: 'Baloo 2', cursive;
font-family: 'Patrick Hand', cursive;
font-family: 'Poiret One', cursive; */

.navbuttons{
	
	font-size: 15px;
	font-family: 'Staatliches', 'Source Sans Pro', sans-serif;
	font-weight: bold;
	letter-spacing: 6px;
	width:100%;
	display:inline-block;
	overflow: hidden;
	border-bottom: 4px double #fff;
	border-top: 4px double #fff;
	
}
.navbuttons ul {
  list-style-type: none;
  overflow: hidden;
	align-content: center;
	
	
}

.navbuttons li {
  display: inline-block;
	   
}

.navbuttons li a {
  display: inline-block;
  	color: #a08c7d;
  text-align: center;
  padding-right: 30px;
  text-decoration: none;
}

.navbuttons li a:hover{
	color: #8C4A4B;
}


.navbuttons .icon {
  display: none;
}


.content {
	background-color:white;
	font-size: 16px;
	border-radius: 20px;
	width:70%;
	margin-top:15px;
	margin-right: auto;
  	margin-left: auto;
	padding:10px;
	text-align: center;
	clear: both;
  display: table;

}
.about{
	margin-bottom:200px;
}
.about h2 {padding-left:15px;}
.about p{
	font-size:15px;
	  text-align: justify;
  text-justify: inter-word;
	padding-left:15px
	
}

.about img{
	float:right;
	margin-left:40px;
	margin-right:40px;
	max-width: 100%;
	max-height: 100%;
	
}

.content h2{
	font-size:60px;
	 padding: 0px;
    margin: 0px;
	font-family: 'Staatliches','Source Sans Pro', sans-serif;
	letter-spacing: 10px;
	
}

.vid_container{
position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
	height:0;
    overflow: hidden;
}

.content iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
	align-content: center;
}



h2 {
  animation-duration: 2s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    /*margin-left: 100%;
    width: 300%; */
	 opacity: 0%;
	 transform: scale(0);
  }

  to {
   /* margin-left: 0%;
    width: 100%;*/
	  opacity:100%;
	  transform:scale(1);
  }
}

/*view more */

.home{
	max-width:900px;
	margin:auto;
	
}


.btn {
	float:left;
	font-family: 'Staatliches','Source Sans Pro', sans-serif;
	letter-spacing: 2px;
	width:30%;
	display:block;
  background-color: #a08c7d;
  border-radius: 20px;
  color: white;
  padding: 16px 33px;
  text-align: center;
  font-size: 16px;
	margin:5px;
	
  transition: 0.3s;
	  animation-duration: 2s;
  animation-name: appear;
}

@keyframes appear {
  from {
	  opacity: 0%;
	 transform: scale(0);
  }

  to {
	  opacity:100%;
	   transform: scale(1);
  }
}

.btn:hover {
	opacity: 0.6
}

/* Create four equal columns that floats next to each other */

* {
  box-sizing: border-box;
}
.row {
padding-left:5.5%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}


.footer { width:100%;
	color:#fff;
	font-size:14px;
	padding: 10px;
	text-align: center;
}




@media screen and (max-width: 990px){
.btn {
		width:100%;
	margin-top:10px;
	}
	.row{
		padding-left:0px;
	}
	.content{
		width:500px;
	}
	
	.about {
		margin:0px;
	}
	
	.about img{
	float:none;
	display:none;
	height: auto;

	}
}
	
@media screen and (max-width: 768px){
	
	.navbuttons {font-size:15px;
	
	}
	.content h2{
		font-size:25px;
	}
	.header{
		align-content: center;
		
	}
	.content{
		width:500px;
	}
	.btn {
		width:100%;
		margin:4px 0px;
		
	}
	.header h3 {
		font-family: 'Staatliches','Source Sans Pro', sans-serif;
		font-size:40px;
		text-align: center;
	}
	
	.navbuttons li{
		width:100%;
		padding:5px;
		font-size:15px;
		display:block;
	}
	.content h2{
		font-family: 'Staatliches','Source Sans Pro', sans-serif;
		font-size:35px;
	}
	
  
	
}


@media only screen and (max-width: 600px) {
	body{width:auto;}
	.header h3 {
		font-family: 'Staatliches','Source Sans Pro', sans-serif;
		font-size:30px;
		text-align: center;
	}
	
	
}