body{
	padding:0; margin:0; text-decoration:none;
}
 
.top_bar{
	width:100%;
	height: 60px;
	position:fixed;
	top:0;
	padding-top:0;
	margin-top:0;
	padding:0;
	margin:0;
	z-index:8;
	background-color:white;
	opacity:95%;
	border: black solid 1px;
	border-radius: 5px;
} 

.top_bar ul li {
	display:inline-block;
	float:right;
	top:0;
	padding-top:0;	
}


.top_bar ul li img{
	margin: 0 10px;
}

.top_bar h1{
	float:left;
	margin-left: 15%;
	top:0;
	color:black;
	text-decoration:none;
	padding-top:0;
}

#signin{
	float:right;
	margin-right: 19%; 
	margin-top:12.5px;
	margin-left: 25px;
}

#signin:hover{
}
 
.content{
	width:70%;
	margin:60px 15% 0 15%;
	padding:0 0;
}

header{
	width:auto;
	height:140px;
}
 
header img{
	float:left;
	height:200px;
	width:auto;
	margin-top:3%;
	padding-left:0;
	margin-left:0;
}
 
header h1{
	display:block;
	float:left;
	padding-left: 1%;
	padding-top:5%;
	color:black;
	text-decoration:none;
 
}
 
nav{
	display:none;
	width:70%;
	clear:both;
	float:left;
	padding:0;
	margin:0;
	overflow:visible;
}
 
nav ul{
	width:100%;
	padding-left:0;
	float:left;
}
 
nav ul a li{
	line-height:150%;
	list-style-type:none;
	color:black;
	float:left;
	border: solid black 1px;
	padding: 0 8.5%;
}
 
 
.main{
	width: 70%;
	float:left;
	display:block;
	padding:0;
	margin:0;
	margin-top:3%;
	clear:both;
}
 
aside{
	width:22%;
	margin: 0 0 0 4%;
	float:left;
	display:block;
	padding:0;
	background-color:#f8f9f9;
	border-radius: 8px;
	margin-top: 4%;
 
}
 
.articles{
	width:90%;
	padding: 3% 5%;
}
 
article{
	display:block;
	margin: 2% 0 2% 0;
	padding:0;
}
 
 
aside ul li img{
	height:100px;
	width:auto;
}
 
aside ul li{
	text-align:center;
	list-style-type:none;
}
 
.menu{
	border:solid black 1px;
	position:fixed;
	top: 15px;
	left: 20px;
	padding: 0 0.5%;
	width:95px;
	z-index:10;
}
 
.menu img{
	height:30px;
	padding:0;
	margin:0;
	width:auto;
	float:left;
	display:block;
	padding-left:0;
}
 
.menu h3{
	display:block;
	float:left;
	padding:0 1%;
	margin:0;
	color:black;
	margin-top:5px;
	margin-left: 4px;
}
 
#side_nav{
	position: fixed;
	height:100%;
	width:30%;
	border: black solid 1px;
	left:-500px;
	top:0;
	background-color:white;
	opacity:1.0;
	z-index:12;
	border-radius:10px;
	transition:all 0.75s ease-in-out 0s;
}
 
#side_nav ul{
	width:100%;
	float:left;
	padding:0 5% 0 5%;
	padding-top:20%;
}
 
#side_nav ul li{
	display:block;
	width:90%;
	text-align:left;
	border-bottom: black solid 1px;
	line-height:400%;
	float:left;
	text-decoration:none;
	color:black;
}
 
#side_nav img{
	margin-left:20%;
	margin-top:6%;
 
}
 
.footer_menu img{
	height:100px;
	width:auto;
}
 
.footer_menu{
	float:right;
	bottom:0.5%;
	right:2%;
	display:block;
	position:fixed;
	transform: translateZ(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
}
 
#footer_bar{
	float:left;
	position:fixed;
	width:100%;
	height:200px;
	z-index:5;
	opacity:1.0;
	bottom:-250px;
	transition:all 0.75s ease-in-out 0s;
}
 
.f_left{
	float:left;
	width:20%;
	float:left;
	background-color:#1b2126;
	bottom:0;
	height:200px;
}
 
.f_left h3{
	color:white;
}
 
.f_left ul li{
	color:white;
}
 
.f_right{
	background-color:#293239;
	width:80%;
	float:left;
	bottom:0;
	height:200px;
 
}
 
.fr{
	float:left;
	margin-left:5%;
	height:100%;
	margin-top:2%;
}
 
.fr h4{
	color:white;
}
 
.close1:hover,
.close1:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
 
#block{
	display:none;
}
 
.click_back img{
	display:block;
	height: 100px;
	width:auto;
}
 
.click_back{
	top:1%;
	right:2%;
	width:10%;
	height:100%;
	float:right;
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
	transition-delay: 1s;
}

/* Image Slider */

.slides {
    padding: 0;
    width: 609px;
    height: 420px;
    display: block;
    margin: 0 auto;
    position: relative;
	float:left;
	margin-top: 0px;
}

.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.slides input { display: none; }

.slide-container { display: block; }

.slide {
    top: 0;
    opacity: 0;
    width: 609px;
    height: 420px;
    display: block;
    position: absolute;

    transform: scale(0);

    transition: all .7s ease-in-out;
}

.slide img {
    width: 100%;
    height: 100%;
}

.nav label {
    width: 200px;
    height: 100%;
    display: none;
    position: absolute;

	opacity: 0;
    z-index: 9;
    cursor: pointer;

    transition: opacity .2s;

    color: #FFF;
    font-size: 156pt;
    text-align: center;
    line-height: 380px;
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container  .slide {
    opacity: 1;

    transform: scale(1);

    transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
	width: 100%;
	bottom: 9px;
	height: 11px;
	display: block;
	position: absolute;
	text-align: center;
}

.nav-dots .nav-dot {
	top: -5px;
	width: 11px;
	height: 11px;
	margin: 0 4px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: white;
	opacity:0.4;
}

.nav-dots .nav-dot:hover {
	cursor: pointer;
	background-color: white;
	opacity:0.8;
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,{
	background: white;
	opacity: 0.8;
}

/* End Image Slider */

.recent{
	width:95%;
	height: 420px;
	border: black solid 1px;
	border-radius:5px;
	background-color:#293239;
	margin: 80px 0 0 0;
}

.recent_side{
	width:200px;
	margin-right: 10px;
	margin-top: 10px;
	padding: 5px 5px;
	float:right;
	background-color:white;
	border: black solid 1px;
	border-radius: 5px;
}

@media only screen and (min-width: 150px) and (max-width: 800px){
 
	.content{
		width:100%;
		padding:0;
		margin:0;

	}
 
	.menu{
		display:none;
	}
 
	nav{
		display:block;
		width:85%;
		clear:.slides;
		margin-top: 68%;
	}
 
	nav ul{
		width:100%;
	}
 
	nav ul li{
		width:100%;
		text-align:center;
	}
 
	.main{
		width:90%;
		margin: 0 5%;
		padding:0;
	}
 
	aside{
		width:100%;
		margin-bottom: 0;
		margin-left:0;
	}
 
	aside img{
		float:left;
		margin: 0 1%;
		display:block;
	}
 
	.footer_menu{
		display:none
	}
	
	#footer_bar{
		display: block;
		position:relative;
		bottom:0;
		margin-top:0;
	}
	
	#footer_bar img{
		display:none;
	}
 
	.image_slider{
		width:90%;
	}
	
	.slides{
		width:100%;
		height:auto;
		margin-top:60px;
	}
	
	.slides img{
		width:100%;
	}
	
	.slide{
		width:100%;
		height:auto;
	}
	
	.slide img{
		width:100%;
		height:auto;
	}
	.recent{
		display:none;
	}
 
	#signin{
		margin-right:2%;
	}
	
	.top_bar h1{
		margin-left:2%;
	}
	
}