:root {
--color1:#069;
}

*{margin:0;padding:0;box-sizing:border-box;}
body{color:#333;font:16px/1  'Trebuchet MS',arial,sans-serif;font-weight:300}

a{cursor:pointer}
p a,
li a{color:var(--color1);text-decoration:underline}
p a:hover,
li a:hover{color:var(--color1);text-decoration:underline}

h1{margin:0 0 10px;font-size:1.5vw;font-weight:300;line-height:1.25}
h2{margin:15px 0 10px;font-size:1.5vw;font-weight:300;line-height:1.25}
h3{margin:15px 0 10px;font-size:1vw;font-weight:600;line-height:1.25}
p,li{margin:10px 0 0;font-size:1vw;font-weight:300;line-height:1.5}
ul,ol{margin:0 0 0 1em}

@media (max-width: 1080px){
h1{font-size:24px}
h2{font-size:24px}
h3{font-size:16px}
p,li{font-size:16px}
}

div::-webkit-scrollbar{display:none;}
div{-ms-overflow-style:none;scrollbar-width:none;}

/* Header START */

.header{display:flex;width:100%;background:var(--color1)}
.headerLogo{display:flex;align-items:center;padding:20px;margin:0 auto 0 0;}
.headerLogo svg{height:40px;}
.headerMenu{display:inline-flex;}
.headerMenuButton{position:relative;display:inline-flex;align-items:center;justify-content:center;height:80px;padding:0 15px;font-size:20px;font-weight:300;text-decoration:none;color:#fff;}
.headerMenuButton.active{text-decoration:underline}
.headerMenuButton:last-child{padding:0 30px 0 15px}
.headerHamburger{display:none;}

@media (max-width: 1080px){
.showPhoneMenu .header{position:fixed;z-index:1;height:100%}
.headerLogo{z-index:10;height:70px;padding:15px}
.headerLogo svg{height:40px;}
.headerMenu{position:fixed;top:0;left:-200vw;display:flex;align-items:center;justify-content:center;height:100vh;width:100vw;background:var(--color1);opacity:0;transition:opacity .5s}
.showPhoneMenu .headerMenu{left:0;opacity:1;padding:0;}
.showPhoneMenu .headerMenuButton{display:flex}
.headerHamburger{position:relative;z-index:10;display:flex;align-items:center;justify-content:center;width:40px;min-width:40px;height:40px;margin:15px 15px 0 0;}
.headerHamburgerIcon,
.headerHamburgerIcon:before,
.headerHamburgerIcon:after{position:absolute;display:block;height:3px;width:30px;background:#fff;}
.headerHamburgerIcon:before{content:"";margin:-8px 0 0;}
.headerHamburgerIcon:after{content:"";margin:8px 0 0;}
}

/* Header END */

/* Footer START */

.footer{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;min-height:80px;padding:12px 20px;background:var(--color1);color:#fff;font-size:16px;line-height:1.5;text-align:center}
.footer a{color:#fff;text-decoration:none;}
.footer a:hover{text-decoration:underline;}
.footerPhoneDot{padding:0 7px;}

@media (max-width: 999px){
.footer{display:block;padding:30px 0;line-height:1.5}
.footerPhoneDot{display:none;}
.footerPhoneBlock{display:block;}
}

/* Footer END */

/* Home START */

.home1{display:grid;min-height:calc(100vh - 80px);grid-template-rows:2fr 1fr;font-size:1.5vw;}
.home1>*{display:flex;align-items:center;justify-content:center;position:relative;}
.home1>:nth-child(1){grid-column:1/3;grid-row:1/2;background:#069;font-size:3vw;line-height:1.25}
.home1>:nth-child(2){grid-column:1/2;grid-row:2/3;background:#4933aa}
.home1>:nth-child(3){grid-column:2/3;grid-row:2/3;background:#2b526f}
.home1>*>img{position:absolute;height:100%;width:100%;object-fit:cover}
.home1>*>img{filter:grayscale(100%) opacity(50%);transition:filter .5s}
.home1>*:hover>img{filter:grayscale(100%) opacity(10%)}
.home1>*>div{position:absolute;color:#fff;text-align:center;}
.home1>*>*>img{height:4vw;margin:0 auto 1vw;display:block}

@media (max-width:1080px){
.home1{min-height:calc(100vh - 70px);}
.home1>*>img{filter:grayscale(100%) opacity(10%)}
}

@media (max-width:1080px) and (orientation: portrait){
.home1{font-size:3vw;}
.home1>:nth-child(1){font-size:7vw;}
.home1 span{display:block}
.home1>*>*>img{height:5vw;margin:0 auto 2vw;display:block}
}

/* Home END */

/* Main START */

.main{display:flex;height:calc(100vh - 80px)}
.mainImg{flex:1;height:100%;}
.mainImg img{height:100%;width:100%;;object-fit:cover}
.mainContent{overflow:auto;width:33.3333vw;min-width:375px;padding:3vw;background:#fff;}

@media (max-width: 1080px){
.main{display:block;height:auto}
.mainImg{height:auto}
.mainImg img{height:100vw;max-height:60vh;width:100%;object-fit:cover}
.mainContent{overflow:auto;width:auto;min-width:auto;min-height:calc(40vh - 70px);padding:30px;}
}

/* Main END */