html, body{
  height: 100%;
}
body { 
			background-image: url(https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1952&q=80) ;
			background-position: center center;
			background-repeat:  no-repeat;
			background-attachment: fixed;
			background-size:  cover;
			background-color: #999;
  
}

div, body{
  margin: 0;
  padding: 0;
  font-family: exo, sans-serif;
  
}
.wrapper {
  height: 100%; 
  width: 100%; 
}

.message {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%; 
  height:45%;
  bottom: 0; 
  display: block;
  position: absolute;
  background-color: rgba(0,0,0,0.6);
  color: #fff;
  padding: 0.5em;
}


.content {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  margin: 40px auto;
  background: rgba(22,22,22, 0.5);
  width: 100%;
  max-width: 960px;
  border-radius: 5px;
  padding-bottom: 32px;
}

h1, h1 a {
  min-height: 120px;
  width: 90%;
  max-width: 700px;
  vertical-align: middle;
  text-align: center;
  margin: 0 auto;
  text-decoration: none;
  color: #fff;
  padding-top: 80px;
}

p {
  width: 90%;
  max-width: 700px;
  text-align: left;
  margin: 0 auto;
  padding-bottom: 32px;
}
.aside-left {
	width: 30%;
	float: left;
	display: block;
	min-height: 300px;
}
.main {
	width: 33%;
	float: left;
	display: block;
	min-height: 300px;
}
.aside {
	width: 30%;
	float: right;
	display: block;
	min-height: 300px;
}
.topnav {
  background-color: #333;
  overflow: hidden;
}
.footer {
	width: 100%;
	display: inline-block;
}
.left-footer {
	width: 30%;
	float:left;
	display:block;
	min-height: 200px;
}
.center-footer {
	width: 33%;
	float: left;
	display: block;
	min-height: 200px;
}
.right-footer {
	width: 33%;
	float: right;
	display: block;
	min-height: 200px;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


.topnav a:hover {
  background-color: #ddd;
  color: black;
}


.topnav a.active {
  background-color: #4CAF50;
  color: white;
}


.topnav .icon {
  display: none;
}


.topnav .icon {
  display: none;
}


.tabs-container{
   position: relative;
   background: #2652CC;
   width: 120px;
   height: 100vh;
   float: left;
   z-index: 20;
 
}

.tabs-container label{
   position: relative;
   padding: 10px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   display: block;
   font-size: 13px;
   color: #fff;
   cursor: pointer;
   user-select: none;
}
 

.tabs-container label:hover{
  background: rgba(0, 0, 0, 0.2);
 
}

.tab-content{
   position: relative;
   background: #eee;
   width: calc(100% - 120px);
   min-height: 100vh;
   padding: 15px;
   float: left;
   box-sizing: border-box;
   z-index: 19;
   display: none;
}
 
.tab-content:after{
   content: "";
   clear: both;
 
}

input[name="tab"]{
   display: none;
}

input[name="tab"]:checked + .tab-content{
   display: block;
   animation: slide 0.5s forwards;
}
 

@keyframes slide{
   from{
     left: -100%;
     opacity: 0;
   }
   to{
     left: 0;
     opacity: 1;
   }
}
.style }
 border-style:solid;
 border-color:#287EC7;
}