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; } }