@charset "UTF-8";
* {font-family: 'Roboto', sans-serif;}
html {padding: 0;margin: 0;overflow: hidden}
body {padding: 0;margin: 0;overflow: hidden;max-width: 100vw;max-height: 100vh}

.right-corner{position:fixed;right:0;top:0;max-width:50vw;}
.home-wrapper {transition: .5s ease-in-out all;position: relative; z-index:99;width: 100vw;display: flex;height: 100vh;overflow: hidden;opacity: 1}
.home-inner {transition: .5s ease-in-out all;position: relative; z-index:99;width: 1440px; max-width: 90vw;display: flex;flex-direction: column;margin: 0 auto; float: none;justify-content: space-between;height: 100vh;overflow: hidden;}
.home-wrapper.hide {transition: .5s ease-in-out all;margin-left: 100vw;opacity: 0}
.home-wrapper:after {opacity: 0;position: absolute;left: 0;top: 0;width: 100vw;height: 100vh; background-color: rgb(0 0 0 / 48%);content: '';display: block;transition: .5s ease-in-out all;}
.home-wrapper.hide:after {opacity: 1;transition: .5s ease-in-out all;}

.contact-wrapper {transition: .5s ease-in-out all;position: relative; z-index:99;width: 100vw;display: flex;margin-left:-100vw; margin-top: -100vh ;height: 100vh;overflow: hidden;}
.contact-inner {transition: .5s ease-in-out all;position: relative; z-index:99;width: 1440px; max-width: 90vw;display: flex;flex-direction: column;float: none;justify-content: space-between;height: 100vh;overflow: hidden;margin: 0 auto}
.contact-wrapper.show { margin-left:0;transition: .5s ease-in-out all;animation: bghide 4s ;  animation-delay: 0s;}

.twocol {display: flex;width:  60%;margin-bottom:50px}
.twocol .row{font-weight: normal;font-size: 12pt;letter-spacing: 0.1em;text-align: left;color: #1d1d1d;padding-top: 22px;display: flex;}
.twocol .row b{width: 100px}

header  {padding: 22px 0; display: flex;align-items: center;justify-content: space-between;}
header h1 {font-size:12px;color:#ccc}
header .logo {width: 320px; }
header .logo img {width: 70%;height: auto;}
header .contact {font-weight: bold;font-size: 10pt;letter-spacing: 0.1em;text-align: right;color: #1d1d1d; cursor: pointer;}
header .close {font-weight: bold;font-size: 10pt;letter-spacing: 0.1em;text-align: right;color: #1d1d1d; cursor: pointer;}
content {}
content span{font-weight: bold;font-size: 20pt;letter-spacing: 0.1em;color: #1d1d1d;position: relative; display: inline-flex; margin-right: 15px;}
content span:after{content: '';height: 148px;background: transparent;border: 1px solid #1d1d1d;display: block;float: left;margin-top: 00px;margin-left: 12px;}
footer {display: flex;justify-content: space-between;padding: 30px 0}
footer .left{font-weight: 500;font-size: 8pt;letter-spacing: 0.1em;text-align: left;color: #1d1d1d;}
footer .socials {display: flex;align-items: center; justify-content: center;position: relative;margin-left: 5px}
footer .socials:before {width: 48px;height: 0px;background: transparent;border: 1px solid #1d1d1d;content: '';display: flex;align-self: flex-end;}
footer .socials a{display: flex;padding: 0 5px}
footer .socials a img{height: 11px}
footer .right{display: flex;font-weight: bold;font-size: 12pt;letter-spacing: 0.1em;text-align: left;color: #1d1d1d;align-items: center; justify-content: center;}

@keyframes bghide {
   0% { background-color: #fff }
   10% { background-color: #fff }
   100% { background-color: transparent; }
}

@media(max-width:768px){ 
content span {font-size: 14pt}
content span:after {margin-top: 20px}
.twocol .row{padding-top: 13px;font-size:10pt}
.twocol {flex-direction:column;width:100%}
content span:after {    height: 0;width:100%;}
.right-corner{max-width:80vw;}
header h1 {color: #000;}
}