*{ box-sizing:border-box; } #wrapper{ max-width:1200px; margin: 0 auto; } .header{ position:relative; height:675px; background: url('./images/bg1.PNG') no-repeat; background-size:100% 100%; padding:25px 0px 0px 35px; } .menu-icon{ text-align:right; display:none; cursor:pointer; } .menu-icon img{ width:32px; height:32px; } .fx{ display:flex; } .position{ position:fixed; width:1200px; padding:25px 0px 0px 35px; z-index:99; transition:1s; -moz-transition:1s; -webkit-transition:1s; } .glide{ background-color:rgba(154, 175, 202,0.78); padding-bottom:23px; } .nav{ margin-left:auto; margin-right:0px; padding-right:10px; } .menu{ display:flex; padding-top:20px; } .menu li{ margin-right:40px; } .menu li a{ display:block; text-decoration:none; text-transform:uppercase; color:#fff; font:bold 24.62px 'PT Mono', monospace; transition:1s; -moz-transition:1s; -webkit-transition:1s; } .menu li:last-child a{ color:#000; font-size:28px; } .menu li a:hover { color:#bfeff5; } .menu li:last-child a:hover{ color:#000; } .room{ position:absolute; width:43%; height:240px; padding:30px 40px 50px 50px; background:rgba(0, 0, 0, 0.3); right:0; bottom:0; } .room h2{ text-transform:uppercase; color:#fff; font:bold 24.62px 'PT Mono', monospace; margin-bottom:60px; } .button{ display:block; font:bold 24px Arial, sans-serif; color:#fff; text-decoration:none; text-transform:uppercase; background-color:#d4aa80; } .button-one{ width:410px; padding:25px 60px 25px 105px; margin-left:auto; margin-right:0px; transition:1s; -moz-transition:1s; -webkit-transition:1s; } .block-two{ position:relative; display:flex; height:auto; padding-bottom:150px; } .block-two .image-two{ opacity: 0.5; } .content{ width:610px; padding-left:60px; } .content h2{ text-transform:uppercase; color:#000; font:bold 28px 'PT Mono', monospace; padding:50px 40px 40px 0px; } .content p{ color:#7d7a7a; font:16px 'Open Sans', sans-serif; line-height:25px; margin-bottom:200px; } .image-three{ position:absolute; left:33%; top:36%; } .button-two{ width:300px; padding:30px 30px 20px 30px; margin-left:auto; margin-right:0px; transition:1s; -moz-transition:1s; -webkit-transition:1s; } .button-two:hover, .button-one:hover{ background-color:#b18050; } .block-three{ height:675px; background: url('./images/bg2.PNG') no-repeat; background-size:100% 100%; padding-top:210px; padding-left:40px; } .dis{ width:340px; } .dis h2{ text-transform:uppercase; color:#000; font:bold 28px 'PT Mono', monospace; padding-bottom:15px; text-align:center; } .dis p{ font: 18px 'Arial',sans-serif; color:#000; line-height:23px; letter-spacing: 1px; } .block-four{ position:relative; padding:0px 45px; height:920px; margin-bottom:50px; } .content-four{ width:430px; padding-top:50px; z-index:10; } .content-four h2{ text-transform:uppercase; color:#000; font:bold 28px 'PT Mono', monospace; padding-left:10px; padding-bottom:30px; } .content-four p{ font: 18px 'Arial',sans-serif; color:#000; line-height:23px; } .block-four .fx img{ margin-left:auto; z-index:10; } .image-four{ position:absolute; top:38.5%; left:26%; opacity:0.5; z-index:7; } .footer{ height:565px; background:#d4aa80; } .footer h2{ display:block; width:555px; margin:0 auto; padding:65px 0px 55px 0px; font:bold 36px 'Arial', sans-serif; color:#fff; text-transform:uppercase; text-align:center; } .footer form{ width:350px; margin:0 auto; } .footer form p{ padding-bottom:10px; } .footer form p input{ width:100%; font:18px 'Arial', sans-serif; color:#808080; padding:15px; border:none; } .footer form p .button-form{ text-transform:uppercase; color:#fff; font-weight:bold; background-color:#a67a4f; cursor:pointer; transition:1s; -moz-transition:1s; -webkit-transition:1s; } .footer form p .button-form:hover{ background-color:#bd8249; } /*Модульное окно*/ #modal_form { width: 420px; height: 500px; /* Рaзмеры дoлжны быть фиксирoвaны */ border-radius: 20px; background: rgba(198, 210, 212, 0.8); position: fixed; /* чтoбы oкнo былo в видимoй зoне в любoм месте */ top: 70%; /* oтступaем сверху 45%, oстaльные 5% пoдвинет скрипт */ left: 50%; /* пoлoвинa экрaнa слевa */ margin-top: -50px; margin-left: -200px; /* тут вся мaгия центрoвки css, oтступaем влевo и вверх минус пoлoвину ширины и высoты сooтветственнo =) */ display: none; /* в oбычнoм сoстoянии oкнa не дoлжнo быть */ opacity: 0; /* пoлнoстью прoзрaчнo для aнимирoвaния */ z-index: 999; /* oкнo дoлжнo быть нaибoлее бoльшем слoе */ padding:30px; text-align:center; } /* Кнoпкa зaкрыть для тех ктo в тaнке) */ #modal_form #modal_close { display:none; width: 21px; height: 21px; position: absolute; top: 10px; right: 15px; cursor: pointer; } /* Пoдлoжкa */ #overlay { z-index:998; /* пoдлoжкa дoлжнa быть выше слoев элементoв сaйтa, нo ниже слoя мoдaльнoгo oкнa */ position:fixed; /* всегдa перекрывaет весь сaйт */ background-color:#000; /* чернaя */ opacity:0.8; /* нo немнoгo прoзрaчнa */ -moz-opacity:0.8; /* фикс прозрачности для старых браузеров */ filter:alpha(opacity=80); width:100%; height:100%; /* рaзмерoм вo весь экрaн */ top:0; /* сверху и слевa 0, oбязaтельные свoйствa! */ left:0; cursor:pointer; display:none; /* в oбычнoм сoстoянии её нет) */ } #modal_form h2{ font:bold 28px 'PT Mono', monospace; text-transform:uppercase; color:#fff; padding-bottom:10px; } #modal_form p{ font:bold 18px 'PT Mono', monospace; color:#fff; padding-bottom:35px; } #modal_form form p{ padding-bottom:25px; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; } #modal_form form p input{ width:100%; height:60px; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; padding:5px 20px; background-color:rgba(198, 210, 212, 0.8); color:#fff; font:22px 'PT Mono', monospace; border:1px solid #7f999a; outline:none; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { /* display: none; <- Crashes Chrome on hover */ -webkit-appearance: none; margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ } #modal_form form :last-child input{ background-color:#96a3a5; } #modal_form form :last-child input:hover{ background-color:#66a0a9; border:1px solid #7f999a; } #modal_form form :last-child input:focus{ background-color:#66a0a9; border:1px solid #7f999a; } #modal_form form p input:hover{ border-color:#3f618c; cursor:pointer; } #modal_form form p input:focus{ border-color:#053b69; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; }