html, body{
position: relative;
font-family: 'Roboto Slab', serif;
color: #6B6B6B;
margin: 0;
padding: 0;
}
li{
list-style: none;
}
header{
background: #363636;
width: 100%;
justify-content: space-between;
height: 16vh;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.pos_blk{
padding: 27% 5%;
}
.menu{
padding: 0;
display: flex;
height: 3.5vh;
width: 50%;
justify-content: flex-end;
flex-wrap: wrap;
}
.menu li{
margin-right: 2%;
height: 3.5vh;
}
.modul{
font-size: 3.3vh;
color: white;
margin-left: 2vw;
}
.menu li a{
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 2.5vh;
}
.menu li a:hover{
color: #eca187;
}
.in{
color: #da4453 !important;
}
section{
background: url(img/bg_img.jpg) no-repeat;
background-size: cover;
width: 100%;
height: 84vh;
}
.part2 h1{
width: 36vw;
color: #fff;
font-size: 3.3vh;
margin-bottom: 2vh;
background-color: rgba(218, 68, 83, 0.8);
}
.part2 p{
background-color: rgba(59,59,59,.8);
color: #ddd;
font-size: 2vh;
width: 36vw;
}
.part3{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
margin-top: 2vh;
}
.a_block{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-around;
max-width: 100%;
flex-wrap: wrap;
width: 70%;
}
.article{
margin-bottom: 30px;
float: left;
box-sizing: border-box;
border: 1px solid #dadada;
max-width: 100%;
width: 60%;
}
.img1{
margin-top: 2vh;
width: 92%;
margin-left: 3.5%;
}
.Layout {
color: #444444;
margin-left: 3.5%;
font-size: 3.4vh;
}
.inform{
padding-left: 0;
margin-left: 9%;
font-size: 1vh;
}
.inform li{
font-size: 2.1vh;
padding-left: 5%;
display: inline;
}
.inform li:nth-child(1){
background: url(img/clndr.png) no-repeat;
background-size: 18% auto;
}
.inform li:nth-child(2){
background: url(img/ppl.jpg) no-repeat;
background-size: 28% auto;
}
.inform li:nth-child(3){
background: url(img/Content.png) no-repeat;
background-size: 17% auto;
}
.main_txt{
margin-bottom: 30px;
font-size: 2.5vh;
margin-left: 3.5%;
width: 90%;
color: #6b6b6b;
}
.display_a{
font-size: 3vh;
margin-bottom: 50px;
font-family: Arial;
color: #fff;
text-decoration: none;
text-transform: uppercase;
padding: 10px 2%;
background:#da4453;
display: inline-block;
margin-left: 70%;
}
.display_a:hover{
color:#fff;
}
.general{
border-radius: 2px;
border: 1px solid #dadada;
box-sizing: border-box;
width: 34%;
}
.general h2{
text-transform: uppercase;
font-size: 2.4vh;
margin-left:5%;
}
.litter{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
width: 93%;
justify-content: space-around;
height: 3%;
}
.litter a i{
padding: 10px;
border-radius: 20%;
font-size: 20px;
color: #fff;
background: #c1c0c0;
height: 100%;
width: 100%;
text-align: center;
}
.litter a :hover{opacity: .7
}
.ppl_lt{
width: 20px;
height: 20px;
}
.smth_wt{display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
margin-left: 10%;
}
.smth_wt a{
font-size: .9em;
text-decoration: none;
color: #fff;
border-radius: 5px;
margin-right: 2%;
padding: 0 2%;
background: #dadada;
margin-top: 2vh;
height: 33px;
display: flex;
align-items: center;
}
.smth_wt a:hover{
opacity: .8;
}
.beta{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
color: #cfc2c4;
}
.alpha{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
width: 80%;
margin-left: 10%;
}
.tags1{
display: flex;
flex-wrap: wrap;
}
.tags2{
}
.ppl_name{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
align-items: center;
}
.comment{
height: 60%;
}
.username{
padding-left: 1vh;
font-weight: bold;
font-size: 0.9em;
margin: 0;
}
.mb_text{
padding: 2vh 0;
font-size: .9em;
border-bottom: 1px solid;
}
.tags2{margin: 3vh 0;
}
footer{
background: #363636;
width: 100%;
justify-content: space-around;
display: flex;
flex-wrap: wrap;
align-items: center;
}
footer .nav{
margin-left: 1.5%;
}
footer h2{
color: #fff;
font-size: 3vh;
}
footer h2 span{
color: #999999;
}
@media screen and (max-width: 1024px) {
.article{width: 100%;
}
.a_block{
width: 100%
}
.general{
width: 100%;
}
.litter{
height: 9vh
}
.tags1{
display: flex;
margin-bottom: 1vh
}
.menu{
width: 100%;
}
.part2 h1{
padding: 0;
width: 100%;
font-size:20px;
}
.part2 p{
width: 100%;
font-size: 15px;
}
}