* {
  box-sizing: border-box;
}

body {
  background: url(https://i1.wallbox.ru/wallpapers/main/201121/c0de3e0d9d1edcf881c1c47717321db4.jpg) no-repeat;
  background-size: cover;  
    color: #eee;
  font: 1em 'PT Sans', sans-serif;
background-color: #000000;

}

::selection {
  background-color: #4EC6DE;
}

.mainpage{
  background: url(https://pbs.twimg.com/media/D2rMy9PWkAA5XYw.jpg);
  background-size: cover;  
}

.conteiner{background-color: #4EC6DE;display:inline-block;}

.header{
  padding: 20px;
  margin: -8px;  
  font-weight: bold;
  text-align: right;
  font-size: 250%;
}

.tabbed {
  width: 800px;
  margin: 50px auto;
  margin-left: 500;
}

.tabbed > input {
  display: none;
}

.tabbed > label {
  display: block;  
  float: left;
  padding: 10px 40px;
  margin-right: 7.7px;
  cursor: pointer;
  transition: background-color .3s;
}

.tabbed > label:hover,
.tabbed > input:checked + label {
  background: #4EC6DE;
}

.tabs {
  clear: both;
  min-height: 100%;
  perspective: 600px;
  margin-bottom: 100%;
  padding-bottom: 10%;
  }

.tabs > div {
  width: 791px; 
  position: absolute;
  border: 2px solid #4EC6DE;
  padding: 10px 30px 40px;
  line-height: 1.4em;
  opacity: 0;
  transform: rotateX(-90deg);
  transform-origin: top center;
  transition: opacity .3s, transform 1s;
  z-index: 0; 
}

#tab-nav-1:checked ~ .tabs > div:nth-of-type(1),
#tab-nav-2:checked ~ .tabs > div:nth-of-type(2),
#tab-nav-3:checked ~ .tabs > div:nth-of-type(3),
#tab-nav-4:checked ~ .tabs > div:nth-of-type(4),
#tab-nav-5:checked ~ .tabs > div:nth-of-type(5){
  transform: rotateX(0deg);
  opacity: 1;
  z-index: 1;
}

@media screen and (max-width: 700px) {
  .tabbed { width: 400px }
  .tabbed > label { display: none }
  .tabs > div {
    width: 400px;
    border: none;
    padding: 0;
    opacity: 1;
    position: relative;
    transform: none;
    margin-bottom: 60px;
  }
  .tabs > div h2 {
    border-bottom: 2px solid #4EC6DE;
    padding-bottom: .5em;
  }  
 .poster{
    margin-left:45%;
 }
}

.poster{
	margin-top:35px;
    position:absolute;
    background:#4EC6DE;
    height: 30px;    
    width:10%;
    margin-left:65%;
    text-align: center;
    padding: 5px;
}

.descr{
    display:none;
    opacity: 1;
    border-radius: 0 10px 10px;
    border: 3px inset blue;
    margin-left:100px;
    color: #777;
    margin-top:17px;
    background: #f3f3f3;
    height: 90px;
    -moz-box-shadow:0 5px 5px rgba(0,0,0,0.3);
    -webkit-box-shadow:0 5px 5px rgba(0,0,0,0.3);
    box-shadow:0 5px 5px rgba(0,0,0,0.3);
}

.poster:hover .descr{
    display:block;
    position:absolute;
    top:7px;
    left:20px;
    z-index:200;
    width:250px;