@import url('https://fonts.googleapis.com/css?family=Open+Sans'); @import url('https://fonts.googleapis.com/css?family=Roboto+Slab'); * { box-sizing: border-box; margin: 0; } html { font-size: 10px; } body { font-family: 'Open Sans', sans-serif; font-size: 1.4rem; line-height: 1.7; color: #6B6B6B; background: #F2f2f2; } img { max-width: 100%; } h1, h2, h3, h4, h5, h6 { font-family: 'Roboto Slab', serif; } h2 { font-size: 2.8rem; } main { overflow: hidden; margin: 40px 0; } header { background: #363636; } header { position: fixed; width: 100%; top: 0; left: 0; z-index: 1; /*повышает приоритет элементу*/ } /*----------------------------------header------------------------------------*/ header .head-menu { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; height: 75px; } header section p a { color: #DADADA; font-weight: bolder; text-decoration: none; font-size: 20px; } header .head-menu .menu { list-style: none; text-transform: uppercase; font-size: 12px; } header li { display: inline; margin-right: 30px; } header li a { text-decoration: none; color: #fff; } header li a:hover { color: #DA4453; transition: .3s; } /*----------------------------------slider----------------------------------------------*/ section.slider { background: url(../img/slider.jpg) no-repeat; padding-top: 75px; width: 100%; height: 500px; margin-bottom: 50px; display: flex; flex-flow: column wrap; justify-content: flex-end; } .inslider { max-width: 1170px; margin: 0 auto; position: absolute; left: 0; right: 0; padding-bottom: 50px; } section .slider-caption { background: rgba(218, 68, 83, 0.7); font-size: 24px; font-weight: bolder; padding: 12px 20px; color: #fff; max-width: 350px; } section .slider-under-caption { background: rgba(59,59,59, 0.8); color: #DDDDDD; padding: 12px 20px; max-width: 600px; } /*--------------------------------------------------------------------------------------*/ .inner-content { max-width: 1170px; margin: auto; } main .colum-content { float: left; width: 750px; max-width: 66%; } main .colum-side { float: left; width: 34%; padding-left: 30px; } article { margin-bottom: 50px; } article a.article-prew { transition: opacity .3s; } article a.article-prew:hover { opacity: 0.8; } article a img { vertical-align: middle; } article .article-content { background: #fff; border: 1px solid #dadada; padding: 45px 50px; } article h2 { margin-bottom: 30px; } article h2 a { text-decoration: none; color: #444; transition: color 0.3s; } article h2 a:hover { color: #DA4453; } article .meta-info { margin-bottom: 30px; } article .meta-info a { text-decoration: none; color: #6B6B6B; margin-right: 15px; } article .links { text-align: right; margin-top: 20px; } article .links .readmore { background: #DA4453; color: #fff; text-decoration: none; padding: 11px 13px; display: inline-block; border-radius: 4px; text-transform: uppercase; transition: background 0.5s; border: 1px solid transparent; } article .links .readmore:hover { background: #000; border-color: #000; } /*------------------------------------right----------------------------------------*/ .colum-side .colum-side-inner { background: #fff; border:1px solid #DADADA; border-radius: 4px; padding: 30px; } .colum-side .colum-side-inner p { font-weight: bolder; color: #636467; padding-bottom: 25px; text-transform: uppercase; } .colum-side-inner .social-media { display: flex; flex-flow: row wrap; justify-content: flex-start; } .colum-side-inner .social-media a { height: 40px; width: 40px; color: #fff; margin-right: 5px; margin-bottom: 5px; border-radius: 3px; font-size: 18px; background: #C1C0C0; text-align: center; line-height: 2; } .colum-side-inner .social-media a.tw:hover { background: #55ACEE; } .colum-side-inner .social-media a.f:hover { background: #4365B9; } .colum-side-inner .social-media a.yb:hover { background: #DF3333; } .colum-side-inner .social-media a.gg:hover { background: #D62408; } .colum-side-inner .social-media a.vk:hover { background: #5B8BB4; } .colum-side .colum-side-inner .comments-block { color: #C1C0C0; margin-bottom: 10px; padding-bottom: 50px; } .comments-block ul { list-style: none; padding-left: 0; } .comments-block ul li span { font-weight: bolder; } .links-block { margin-bottom: 0; } .links-block .tag-link { display: flex; flex-flow: row wrap; } .links-block .tag-link a { background: #DADADA; margin-bottom: 4px; margin-right: 4px; padding: 6px 7px; color: #fff; border-radius: 3px; font-size: 12px; text-decoration: none; } .links-block .tag-link a:hover { background: #DA4453; } /*------------------------------------footer----------------------------------------*/ footer { background: #1F1F1F; padding: 10px 0; } footer .footer-menu { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } footer .footer-menu .menu{ padding-left: 0; } footer li { display: inline; margin-right: 30px; } footer li a { color: #DADADA; text-decoration: none; padding: 10px 15px; } footer li a:hover { color: #FFF; } footer address { color: #999; font-size: 12px; font-style: normal; } footer address span { color: #DADADA; } /*webkit-transform: moz-transform: ms-transform: */