@font-face { font-family: 'Roboto'; src: local('Roboto'), url('fnt/Roboto-Regular.ttf'); } @font-face { font-family: 'Roboto-light'; src: local('Roboto-light'), url('fnt/Roboto-Light.ttf'); } @font-face { font-family: 'Roboto-thin'; src: local('Roboto-thin'), url('fnt/Roboto-Thin.ttf'); } html, body { margin: 0; padding: 0; font-family: 'Roboto-light', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; color: #1f0b03; cursor: default; } a { color: inherit; text-decoration: none; } #head-fix { position: fixed; top: 0; width: 100%; z-index: 2; background-color: white; box-shadow: 0px 7px 5px #332d2d; } #header { display: flex; justify-content: center; font-weight: 600; } #header>div { margin: .4rem 1.2rem; } #logo { display: flex; align-items: center; font-size: 1.5em; font-weight: bolder; } #logo img { width: 95px; margin-right: .75rem; } .hditem { display: flex; align-items: center; } .hditem img { height: 2.5rem; margin-right: .8rem; } #call { text-align: center; font-size: .8em; font-weight: 800; color: white; background-color: #2f150b; padding: .7em 2.4em; border-radius: 6px; } .menu { padding-left: 5rem; display: flex; color: white; background-color: #b42700; font-weight: 800; } .menuItem { padding: 1rem 1.5rem; text-align: center; height: 100%; } #scr1 { position: relative; margin-top: 9rem; background: url(img/bkg1_1920.jpg) no-repeat; background-size: cover; background-position: left center; width: 100%; height: 85vh; } #title-text { position: absolute; bottom: 4rem; left: 0; right: 0; padding: 1rem 5rem; background-color: #b4270075; font-family: 'Roboto-light', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; color: white; font-size: 4.5rem; font-weight: 600; } #title-text span { font-family: 'Roboto-thin', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 4rem; } .scr-box { font-family: 'Roboto-thin', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 2.5rem; color: white; background-color: rgb(27, 25, 25); padding: 2em 1em 2em 3em; } .scr-box>span { font-weight: bold; } .row { position: relative; display: flex; } .row>div { border: 1px solid lightgray; } .row:nth-child(odd) { flex-direction: row-reverse; } .row:nth-child(odd)>.row-txt { background-color: #ffeadd; } .row:nth-child(even)>.row-txt { background-color: #53453e; color: white; } .row-txt { width: 50%; min-height: 50vh; padding: 2rem 0; } .row-txt>p, .row-txt>h2 { padding: 0 2.5em; } .row-txt li { margin: 0 2.5em; } .row-img { width: 50%; background-repeat: no-repeat; background-size: cover; background-position: center; } #scr3 .row:nth-child(1) .row-img { background-image: url(img/slide_zh/01.jpg), url(img/slide_zh/02.jpg), url(img/slide_zh/03.jpg), url(img/slide_zh/04.jpg), url(img/slide_zh/05.jpg), url(img/slide_zh/06.jpg), url(img/slide_zh/07.jpg), url(img/slide_zh/08.jpg), url(img/slide_zh/09.jpg), url(img/slide_zh/10.jpg), url(img/slide_zh/11.jpg), url(img/slide_zh/12.jpg), url(img/slide_zh/13.jpg), url(img/slide_zh/14.jpg); } #scr3 .row:nth-child(2) .row-img { background-image: url(img/slide_eu/01.jpg), url(img/slide_eu/02.jpg), url(img/slide_eu/03.jpg), url(img/slide_eu/04.jpg), url(img/slide_eu/05.jpg), url(img/slide_eu/06.jpg), url(img/slide_eu/07.jpg), url(img/slide_eu/08.jpg), url(img/slide_eu/09.jpg), url(img/slide_eu/10.jpg), url(img/slide_eu/11.jpg); } #scr3 .row:nth-child(3) .row-img { background-image: url(img/slide_pn/01.jpg), url(img/slide_pn/02.jpg), url(img/slide_pn/03.jpg); } #scr3 .row:nth-child(4) .row-img { background-image: url(img/slide_3d/01.jpg); } #scr3 .row:nth-child(5) .row-img { background-image: url(img/slide_rn/01.jpg), url(img/slide_rn/02.jpg); } #scr5 .row:nth-child(1) .row-img { background-image: url(img/slide_vo/01.jpg), url(img/slide_vo/02.jpg), url(img/slide_vo/03.jpg), url(img/slide_vo/04.jpg), url(img/slide_vo/05.jpg), url(img/slide_vo/06.jpg), url(img/slide_vo/07.jpg), url(img/slide_vo/08.jpg), url(img/slide_vo/09.jpg), url(img/slide_vo/10.jpg), url(img/slide_vo/11.jpg), url(img/slide_vo/12.jpg), url(img/slide_vo/13.jpg), url(img/slide_vo/14.jpg), url(img/slide_vo/15.jpg); } #scr5 .row:nth-child(2) .row-img { background-image: url(img/slide_vr/01.jpg), url(img/slide_vr/02.jpg), url(img/slide_vr/03.jpg), url(img/slide_vr/04.jpg), url(img/slide_vr/05.jpg); } #scr6 { font-family: 'Roboto-thin', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 2.5rem; color: white; background-color: #1b1919; padding: 1em; } #scr6>span { font-weight: bold; margin-left: 2em; } .cards { display: flex; flex-wrap: wrap; justify-content: center; flex-grow: 1; margin-top: 1em; } .card { min-width: 9em; max-width: 15em; border: 1px solid white; border-radius: 6px; margin: 1rem; font-family: 'Roboto-light', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 1rem; } .card-header { display: flex; text-align: center; justify-content: center; align-items: center; padding: .5em; height: 2.5em; background-color: white; color: #1f0b03; font-size: 1.2em; font-weight: bolder; } .card-text { padding: 1em; } #scr7 { display: flex; } #scr7>div { width: 50%; padding: 2rem; } #reviews { background-color: #53453e; } #reviews h2 { padding-bottom: 2em; color: white; } .rewiew { position: relative; margin-top: 3rem; border: 2px solid #b8583e; border-radius: 6px; width: 75%; } .r-name { padding: .5em; color: white; background-color: #b8583e; font-weight: bold; } .r-text { padding: 1em; background-color: #fffaf8; } .rewiew:nth-child(odd) { margin-left: 25%; } .rewiew img { width: 70px; position: absolute; top: -45px; border: 4px solid #b8583e; border-radius: 6px; } .rewiew:nth-child(even) img { left: 30px; } .rewiew:nth-child(odd) img { right: 30px; } .rewiew:nth-child(even) .r-name { padding-left: 120px; } .rewiew:nth-child(odd) .r-name { text-align: right; padding-right: 120px; } #contacts { background-color: #ffeadd; } #map { padding: 5px; border: 1px solid #1f0b03; } #contacts p { font-size: 1.4em; padding: 1em 0; } #faq { margin-top: 4em; } .query { padding-top: .5em; font-weight: bold; } .answer { padding-bottom: .5em; } #bottom { color: white; background-color: #1b1919; padding: 3.5em; font-size: 1.2em; } #bottom-container { display: flex; } #bottom-container>div { margin-right: 5em; } #bottom-container>div:first-child { line-height: 1.8em; font-weight: bolder; } .bottom-info { margin-top: 2.5em; font-size: .85em; } a[href^='tel:'] { font-size: 1.4em; } /* Для перехода по якорям, чтобы шапка не закрывала часть контента */ html { scroll-padding-top: 8em; } @media(max-width:1265px) { #scr1 { background: url(img/bkg1_1265.jpg) no-repeat; } #contacts #header { flex-direction: column; } #contacts .hditem { margin: .2em 0; } } @media(max-width:960px) { #logo { display: none; } #scr1 { margin-top: 6em; } #bottom-container>div:first-child { display: none; } html { scroll-padding-top: 6em; } } @media(max-width:810px) { #head-fix { position: relative; } #scr1 { margin: 0; } #head-fix #header>div:nth-child(2) { display: none; } .menu { flex-direction: column; padding-left: 0; } .menu div { border-bottom: 1px solid #2f150b; } #bottom-container { flex-direction: column; } html { scroll-padding-top: 0 } } @media(max-width:700px) { #head-fix #header, #map { display: none; } #title-text { font-size: 2em; } #title-text span { font-size: 1em; } .scr-box { padding: 10px; font-size: 1.5em; } .row { flex-direction: column !important; } .row-txt { width: 100%; } .row-img { width: 100%; height: 30vh; margin-top: 15vh; } #scr6>span { font-size: 2rem; } #scr7 { flex-direction: column; width: 100% !important; } #reviews, #contacts { width: 100% !important; margin: 0; padding: 0 10px !important; } .rewiew:nth-child(odd) { margin-left: 0; } }