/*GLOBAL*/
header,nav,section,article,aside,footer,hgroup{display:block;}
.preload *{-webkit-transition: none !important; transition: none !important;}
a{text-decoration:none; outline: 0; color:inherit;}
a img{border:none;}
.img_hide{display: block !important; width: 0; height: 1px; border: 0; position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden;}
.mail_hide, .hide_mail{display: none !important;}
.clear{clear:both; margin: 0; display: block; width: 100% !important; float: none !important;}
.clear.hide{display: none !important;}
.relative{position: relative;}
button, input[type=submit]{cursor: pointer; -webkit-appearance: none; outline: 0; }
input[type="submit"]:focus {outline:none;}
input, textarea {-webkit-appearance: none; border-radius: 0;}
input[type="submit"]::-moz-focus-inner {border:0;}
label{cursor: text;}
input[type=checkbox], input[type=radio]{cursor: pointer;}
input:focus{outline:0; }
input[type="text"], input[type="password"], textarea, select {outline: none;}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
input[type=number] {-moz-appearance:textfield;}
input[name="fake1"], input[name="fake2"]{opacity: 0; font-size: 0; line-height: 0; padding: 0; visibility: hidden; overflow: hidden; position: fixed; top: 0; left: 0; z-index: -30}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active {-webkit-animation: autofill 0s forwards;animation: autofill 0s forwards;}
@keyframes autofill {100% {background: transparent;color: inherit;}}
@-webkit-keyframes autofill {100% {background: transparent;color: inherit;}}







html{margin: 0 auto; padding: 0; background: #f1f1f1 ;}
body{color: #000000; min-height: 100vh; background: url(../img/main_bg.jpg) no-repeat scroll center center #ffffff; background-size: cover; overflow-x: hidden; -webkit-text-size-adjust: none; text-rendering: auto; -webkit-backface-visibility:hidden;  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0 auto; font-family: Calibri, sans-serif, Arial; padding: 0; font-weight: 400;}


.btn{letter-spacing: 1px; font-weight: 700; font-size: 18px; line-height: 24px; padding: 10px 30px 12px; text-decoration: none; white-space: nowrap; overflow: hidden; position: relative; background: none; display: block; border: 1px solid transparent; text-align: center; border-radius: 6px; -webkit-transition: all 400ms ease; transition: all 400ms ease;}
.btn.inline{display: inline-block; vertical-align: middle;}

/*use*/
.btn.typ_1{background: #00534e; border: 1px solid #00534e; color: #ffffff;}
.btn.typ_1:hover{background: #ffffff; border: 1px solid #00534e; color: #00534e;}


@media screen and (max-width: 500px) {
    .btn{font-size: 14px; line-height: 18px;}
}





.box{position: absolute; inset: 0; padding: 30px 0; display: flex; align-items: center; justify-content: center;}
.box .in{border-radius: 12px; overflow: hidden; width: 90%; max-width: 700px; display: block;}
.box .in .bg{font-style: normal; padding: 30px; text-align: center;}
.box .in .bg.white{background: rgba(255, 255, 255, 0.90); color: #000;}
.box .in .bg.green{color: #fff; background: rgba(0, 83, 78, 0.9);}
.box .in .bg .logo{max-width: 256px; display: block; margin: 0 auto;}
.box .in .bg h1{color: #00534e; font-size: 24px; line-height: 32px; text-transform: uppercase; font-weight: 700; margin: 10px 0 0;}
.box .in .bg h2{color: #00534e; font-size: 26px; line-height: 32px; font-weight: 400; margin: 25px 0 0;}
.box .in .bg h3{font-style: italic; font-size: 34px; line-height: 40px; font-weight: 600; margin: 0;}
.box .in .bg .btn{margin: 15px 0 0;}
.box .in .bg p{font-size: 18px; line-height: 24px; font-weight: 400; margin: 25px 0 0;}

.box .in .bg .mail{text-decoration: underline;margin: 25px 0 0; display: flex; font-size: 18px; line-height: 24px; font-weight: 400; align-items: flex-start; justify-content: center;}
.box .in .bg .mail svg {height: 28px; padding-right: 5px; transition: .4s; width: 35px}
.box .in .bg .mail:hover svg {transform: translate(5px)}



@media screen and (max-width: 1024px) {
    .box{padding: 25px 0; }
    .box .in{border-radius: 8px; max-width: 540px; }
    .box .in .bg{padding: 25px;}
    .box .in .bg .logo{max-width: 210px;}
    .box .in .bg h1{font-size: 22px; line-height: 28px;}
    .box .in .bg h2{font-size: 24px; line-height: 28px; margin: 20px 0 0;}
    .box .in .bg h3{font-size: 28px; line-height: 34px;}
    .box .in .bg p{font-size: 16px; line-height: 22px; margin: 20px 0 0;}
}

@media screen and (max-width: 500px) {
    .box{padding: 20px 0; }
    .box .in{border-radius: 6px;}
    .box .in .bg{padding: 20px;}
    .box .in .bg .logo{max-width: 180px;}
    .box .in .bg h1{font-size: 20px; line-height: 28px;}
    .box .in .bg h2{font-size: 22px; line-height: 26px; margin: 15px 0 0;}
    .box .in .bg h3{font-size: 20px; line-height: 26px;}
    .box .in .bg .btn{margin: 10px 0 0;}
    .box .in .bg p{font-size: 14px; line-height: 22px; margin: 15px 0 0;}
    .box .in .bg p br{display: none;}
}