@font-face { font-family: Oswald; font-weight: 300 900; font-stretch: 75% 200%; src: url('../fonts/Oswald-VariableFont_wght.ttf'); }
@font-face { font-family: Montserrat; font-weight: 300 900; font-stretch: 75% 200%; src: url('../fonts/Montserrat-VariableFont_wght.ttf'); }

html { height: 100%; }
body { margin: 0; padding: 0; font-size: 14px; font-family: 'Oswald', sans-serif; background: #fff; color: #000; font-weight: 400; height: 100%; }
table,td { margin: 0; padding: 0; font-size: 14px; border-collapse: collapse; vertical-align: top; }
img { border: 0; display: block; }
iframe { border: 0; }
h1,h2,h3,h4,h5,h6,h7,p,ul,ol,li,form { font-weight: 400; padding: 0; margin: 0; list-style: none; }
.radio { vertical-align: middle; }
select,input,textarea,option { padding: 0; margin: 0; font-size: 14px; font-family: 'Oswald', sans-serif; color: #666; outline: none; }
select::-ms-expand { display: none; }
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
a { color: #999; cursor: pointer; outline: none; text-decoration: none; }
a:hover { color: #CCC; text-decoration: underline; transition: all 0.5s ease; }
.br { clear: both; height: 0; overflow: hidden; }
::-moz-selection { background: #000; color: #ddd; }
::selection { background: #000; color: #ddd; }

.header { background: #E40026; padding: 15px 30px; position: fixed; left: 0; top: 0; right: 0; z-index: 5; opacity: 90%; }

.header .logo { width: 96px; height: 100px; background: url('../images/logo.png') no-repeat 50% 50%; background-size: cover; font-size: 0; }
.header .logo a { display: block; width: 100%; height: 100%; }
.header .menu { text-align: right; position: absolute; right: 30px; bottom: 20px; color: #ffcc00; }
.header .menu li { display: inline-block; font-family: 'Oswald', sans-serif; font-size: 18px; line-height: 22px; font-weight: 300; margin: 0 10px; text-transform: uppercase; }
.header .menu a { color: #f9fcff; text-decoration: none; }
.header .menu a:hover { color: #ffcc00; }
.header .menu li.a a { color: #ffcc00; }

.two-blocks { min-height: calc(100% - 115px); position: relative; border: 30px solid #fff; }
.two-blocks .block-left { width: calc(25% - 30px); margin-top: 124px; }
.two-blocks .block-right { background-position: 50% 50%; background-size: cover; position: absolute; left: 25%; right: 0; top: 124px; bottom: 0; }
.two-blocks .block-right img { display: none; }

.two-blocks-next { min-height: calc(100% - 115px); position: relative; border: 30px solid #fff; }
.two-blocks-next .block-left { width: calc(25% - 30px); margin-top: 12px; }
.two-blocks-next .block-right { background-position: 50% 50%; background-size: cover; position: absolute; left: 25%; right: 0; top: 12px; bottom: 0; }
.two-blocks-next .block-right img { display: none; }


.gallery { display: flex; flex-wrap: wrap; background: #000; margin-top: 124px; }
.gallery div { width: 25%; background-position: 50% 50%; background-size: cover; opacity: 0.7; }
.gallery div a { width: 100%; display: block; }
.gallery div img { width: 100%; filter: grayscale(1); }

.pic { border-left: 30px solid #fff; border-right: 30px solid #fff; border-bottom: 30px solid #fff; border-top: 0; }

.content { margin: 0 0 30px; }
.content h1 { font-family: 'Oswald', sans-serif; font-size: 29px; line-height: 30px; font-weight: 400; margin: 0 0 25px; text-transform: uppercase; }
.content h2 { font-family: 'Oswald', sans-serif; font-size: 30px; line-height: 32px; font-weight: 300; margin: 0 0 25px; text-transform: uppercase; }
.content h3 { font-family: 'Oswald', sans-serif; font-size: 17px; line-height: 22px; font-weight: 400; margin: 0 0 25px; text-transform: uppercase; }
.content h4 { font-family: 'Oswald', sans-serif; font-size: 15px; line-height: 22px; font-weight: 400; margin: 0 0 25px; text-transform: uppercase; }
.content p { font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 20px; margin: 0 0 25px; font-weight: 300; }
.content ul { margin: 0 0 20px 40px; }
.content ul li { font-size: 14px; line-height: 20px; margin: 0 0 6px; list-style: disc; }
.content ol { margin: 0 0 20px 40px; }
.content ol li { font-size: 14px; line-height: 20px; margin: 0 0 6px; list-style: decimal; }
.content .table table { width: 100%; overflow: scroll; margin: 0 0 20px; }
.content .table table th { background: rgba(0,0,0,0.1); color: #000; padding: 6px 10px; border-bottom: 1px solid #ddd; text-align: left; font-weight: 400; font-size: 14px; line-height: 24px; }
.content .table table td { padding: 6px 10px; border-bottom: 1px solid #ddd; font-size: 14px; line-height: 24px; }
.content .picture { padding: 30px 0; }
.content .picture img { max-width: 100%; display: block; margin: 0 0 15px; }
.content .picture p { font-size: 13px; line-height: 17px; margin: 0; }

.footer { background: #E40026; padding: 15px 30px; height: 25px; color: #d1d1d1; display: flex; flex-wrap: wrap; justify-content: space-between; }
.footer p { font-size: 14px; line-height: 22px; font-weight: 300; margin: 0; }

.social { display: flex; flex-wrap: wrap; }
.icon a { display: block; width: 100%; height: 100%; }
.icon { display: block; margin: 0 10px 0 0; width: 24px; height: 24px; background-position: 50% 50%; background-size: cover; font-size: 0; border-radius: 50px; }
.icon-fb { background-image: url('../images/icon-fb.svg'); }
.icon-in { background-image: url('../images/icon-in.svg'); }
.icon-pn { background-image: url('../images/icon-pn.svg'); }
.icon-lin { background-image: url('../images/icon-lin.svg'); }
.icon-mail { background-image: url('../images/icon-mail.svg'); }

.icon-fb-b { background-image: url('../images/icon-fb-b.svg'); }
.icon-in-b { background-image: url('../images/icon-in-b.svg'); }
.icon-lin-b { background-image: url('../images/icon-lin-b.svg'); }
.icon-mail-b { background-image: url('../images/icon-mail-b.svg'); }

.form { position: relative; }
.form-field { margin: 0 0 15px; }
.form-field label { display: block; font-size: 14px; line-height: 20px; font-weight: 400; margin: 0 0 5px; }
.form-field label span { color: #fff; font-weight: 700; }
.form-field .it { background: rgba(0,0,0,0.0); border: 1px solid rgba(0,0,0,0.2); border-radius: 8px; color: #000; font-size: 14px; line-height: 20px; height: 36px; padding: 0 10px; width: calc( 100% - 24px ); }
.form-field .ia { background: rgba(0,0,0,0.0); border: 1px solid rgba(0,0,0,0.2); border-radius: 8px; color: #000; font-size: 14px; line-height: 20px; height: 84px; padding: 10px 10px; width: calc( 100% - 24px ); resize: none; }
.form-field .it:focus, .ia:focus { border: 1px solid #ae7fd5; transition: 0.3s ease-out; }
.form-field .it::placeholder, .ia::placeholder { color: rgba(0,0,0,0.3); }
.form-field .ib { display: inline-block; border: 0; height: 70px; padding: 0 55px 0 0; font-size: 16px; line-height: 70px; background: url('../images/more.png') no-repeat 100% 50%; color: #000; }
.form-field .ib:hover { color: #7952b3; transition: 0.3s ease-out; }

@media screen and (max-width: 1000px) {
.gallery div { width: 50%; }

.header { padding: 15px 20px;}
/*.header .logo { width: 124px; height: 47px; }*/
.header .logo { width: 43px; height:46px; }
.header .menu { display: block; position: fixed; left: -100%; top: 77px; right: 100%; bottom: 0; background: #fff; z-index: 10; text-align: right; padding: 40px 22px 22px; }
.header .menu li { display: block; line-height: 24px; margin: 0 0 20px; font-weight: 500; }
.header .menu a { color: #131b30; }
.header .menu a:hover { color: #ffcc00; }
.header .menu li.a a { color: #ffcc00; }

.two-blocks { min-height: inherit; position: relative; border: 20px solid #fff; }
.two-blocks .block-left { width: auto; margin-top: auto; }
.two-blocks .block-right { background-position: 50% 50%; background-size: cover; position: relative; left: auto; right: auto; top: auto; bottom: auto; }
.two-blocks .block-right img { display: block; width: 100%; }

.content h1 { font-size: 26px; line-height: 26px; margin: 0 0 20px; }
.content h2 { font-size: 24px; line-height: 24px; margin: 0 0 20px; }
.content h3 { font-size: 20px; line-height: 22px; margin: 0 0 20px; }
.content h4 { font-size: 18px; line-height: 20px; margin: 0 0 20px; }
.content p { margin: 0 0 20px; }

.ms{position:fixed;right:20px;top:28px;width:26px;height:26px;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out;cursor:pointer;z-index:101}
.ms s{display:block;position:absolute;height:3px;width:100%;background:#f9fcff;opacity:1;left:0;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out}
.ms s:nth-child(1){top:0}
.ms s:nth-child(2),.ms s:nth-child(3){top:8px}
.ms s:nth-child(4){top:16px}
.ms.open s:nth-child(1){top:7px;width:0;left:50%}
.ms.open s:nth-child(2){-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.ms.open s:nth-child(3){-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
.ms.open s:nth-child(4){top:7px;width:0;left:50%}
.ms.open{position:fixed}

.two-blocks { margin-top: 77px; }
.gallery { margin-top: 77px; }

.pic { border-left: 20px solid #fff; border-right: 20px solid #fff; border-bottom: 20px solid #fff; border-top: 0; }
.pic-top { border-left: 0px solid #fff; border-right: 0px solid #fff; border-bottom: 0px solid #fff; border-top: 0; }
}

@media screen and (max-width: 500px) {
.gallery div { width: 100%; }

}