/* the styles for the elements */
* {
	margin: 0;
	padding: 0;
}

html {
    background: #33ccff;
	background: linear-gradient(to top right, #06F4DC, #06F4DC);
	background-image: -moz-linear-gradient(
	    to top right, #06F4DC, #06F4DC);
	background-image: -webkit-linear-gradient(
	    to top right, #06F4DC, #06F4DC);
	background-image: -o-linear-gradient(
	    to top right, #06F4DC, #06F4DC);
}

body {
	font-family: 'Exo 2', sans-serif;
	font-size: 100%;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	border: 3px solid #00D7C0;
	border-radius: 15px;
	box-shadow: 10px 5px 5px gray;
	background-color: #FAEED1;

}

/* the styles for links */
a:link, a:visited {
	text-decoration: none;
}
a:focus, a:hover {
	text-decoration: underline;
}



/* the styles for the header */
header {
	padding: 1.5em 0 2em 0;
	border-bottom: 3px solid #008083;
}
header img {
	float: left;
	width: 100%;
	max-width: 75px;
	padding: 0em;
	padding-left: 1.5em;
	padding-right: 1em;
}

/* text shadow class */
.shadow {
	text-shadow: .3px .3px .3px #5d5d5d;
}


/* the styles for the navigation menu */
#nav_menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	position: relative;
}
#nav_menu ul li {
	float: left;
	width: 20%;
}
#nav_menu ul li a {
	display: block;
	text-align: center;
	padding: 2em .2em;
	text-decoration: none;
	background-color: #008083;
	color: white;
	font-weight: bold;
}
#nav_menu a:hover {
	background-color: #06F4DC;
	color: #000000;
}
#nav_menu ul ul {
	display: none;
	position: absolute;
	top: 100%;
	width: 100%;
}
#nav_menu ul ul li a {
	text-align: left;
	padding-left: .5em;
}
#nav_menu ul ul li {
	float: none;
	
}
#nav_menu ul li:hover > ul {
	display: block;
	width: 100%;
}
#nav_menu > ul::after {
	content: "";
	clear: both;
	display: block;
}
#nav_menu a.current {
	color: White;
	font-weight: bolder;
}
#nav_menu ul ul {
    display: none;
    position: absolute;
    top: 100%;
}


/* the styles for the main content */
main {
	clear: left;
}
main h3 {
	font-size: 150%;
	margin-bottom: 10px;
	text-align: center;
}
main h3:first-letter { 
	font-size: 200%;
}

/* the styles for the aside */

aside {
	width: 150px;
	float: right;
	padding-left: 1em;
	padding-right: 1em;
	background-color: #008083;
	padding-top: .2em;
	margin-top: .5em;
	margin-bottom: .5em;
	margin-right: .1em;
	text-align: center;
	color: white;
}
aside h3 {
	font-size: 100%;
	text-align: left;
	color: white;
}
aside h3:first-letter {
	font-size: 105%;
}
aside img {
	width: 100%;
	max-width: 125px;
	height: 100%;
	max-height: 100px;
	padding-top: .3em;
}

/* the styles for the section */
section {
	width: 55%;
	float: left;
	padding-left: 1.5em;
	padding-bottom: 2em;
}
#info {
	width: 70%;
}
#info p {
	padding-bottom: .5em;
}
#info p img {
	width: 100%;
	max-width: 250px;
	height: 100%;
	max-height: 250px;
	padding-top: .3em;
	display: block;
    margin-left: auto;
    margin-right: auto;
}
#info iframe {
	display: block;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 2em;
}
/*the styles for the nav list*/
#nav_list {
	float: left;
	width: 15%;
	padding-left: .1em;
	padding-right: 2em;
	margin-top: .5em;
}
#nav_list h3 {
	font-size: 100%;
}
#nav_list ul {
	list-style-type: none;
}
#nav_list ul li {
	width: 150px;
	background-color: #008083;
	border-bottom: 1px solid white;
	margin-bottom: 5px;
}
#nav_list ul li a {
	display: block;
	color: white;
	text-decoration: none;
	padding: 8px 5px;
	font-weight: bold;
	text-align: center;
}
#nav_list ul li a:hover {
	background-color: #FF4500;
}


/* the styles for the scroll to top button */
#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 60px; /* Place the button at the bottom of the page */
    right: 50px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: red; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
	transition: all .5s;
}

#myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
	padding: 3em;
}

/* the styles for the nivo-slider */
section div {
	font-size: 99%;
}

#slider img {
	max-width: 800px;
	width: 100%;
}
#wrapper {
	padding-top: 2em;
}

/* the styles for the footer */
footer {
	clear: both;
	border-top: 3px solid #00D7C0;

}
footer p {
	text-align: center;
	color: black;
	font-size: 90%;
	padding: 1em 0;
}



/* hide the slicknav in large-screen view */
.slicknav_menu {
	display: none;
}



/* tablet portrait to standard 960 */
@media only screen and (max-width: 959px) {
	html {
		background-image: none;	
		width: 100%;
	}
	body  {
		margin: 0 auto; 
		padding: 0;
		border: none;
		box-shadow: none;
		width: 98%;
	}
	/* hide the navigation menu */
	#nav_menu {
		display: none;
	}
	
	/* and replace it with the slicknav menu */
	.slicknav_menu {
		display: block;
		text-align: left !important;
		background-color: #008083 !important;
	}
	.slicknav_menu a.current {
		color: black;
		font-weight: bold;
	}
}



/* mobile landscape to tablet portrait */
@media only screen and (max-width: 767px) {
	header img { float: none; }
	header { text-align: center; }
	section, aside {
		float: none;
		width: 98%;
		margin: 0 auto;
		padding: .5em;
	}
	/*the styles for the nivo slider */
	#wrapper, #slider, .slider-wrapper {
		width: 100%;
		padding: 0;
		margin: 0;
		box-shadow: none;
	}
	#slider img {
		width: 100%;
	}
	/*the styles for the aside and nav_list */
	aside, #nav_list {
		float: none; 
		width: 100%;
		padding: 10px 0; 
		text-align: center;
	}
	aside h2, aside h3 {
		text-align: center;
	}
	#nav_list ul li {
		float: none;
		width: 100%;
		text-align: center;
	}
	/*the styles for the section*/
	section {
		width: 90%;
		float: none;
		margin: 0 .7em;
		padding: 10px 1em 10px .5em;	
	}
	#info {
		width: 90%;
	}
	/* the styles for the video */
	#info iframe {
		width: 99%;
	}
}



/* mobile portrait to mobile landscape */
@media only screen and (max-width: 479px) {
	body { font-size: 90%; }
}