@font-face { font-family: "Montserrat-Italic"; src: url("Montserrat-Italic.ttf") format("truetype"); } @font-face { font-family: "Montserrat-Medium"; src: url("Montserrat-Medium.ttf") format("truetype"); } @font-face { font-family: "Montserrat-Regular"; src: url("Montserrat-Regular.ttf") format("truetype"); } @font-face { font-family: "Montserrat-SemiBold"; src: url("Montserrat-SemiBold.ttf") format("truetype"); } @font-face { font-family: "Montserrat-SemiBoldItalic"; src: url("Montserrat-SemiBoldItalic.ttf") format("truetype"); } /* */ @media (max-width: 600px) { .screen{ width: 100%; } } @media (min-width: 600px) { .screen{ width: 450px; } } html{ overflow-x: hidden; } body{ margin: 0; padding: 0; background-color: #ababab; display: flex; justify-content: center; align-items: center; flex-direction: column; } .screen { align-items: center; justify-content: flex-start; overflow-x: clip; background-color: #e8e9ee; z-index: 0; position: relative; } .flex{ display: flex; } .acenter{ align-items: center; } .aleft{ align-items: left; } .aright{ align-items: right; } .tcenter{ text-align: center; } .tleft{ text-align: left; } .tright{ text-align: right; } .jcenter{ justify-content: center; } .jstart{ justify-content: start; } .jend{ justify-content: end; } .jbetween{ justify-content: space-between; } .jaround{ justify-content: space-around; } .col{ flex-direction: column; } .row{ flex-direction: row; } .fullwidth{ width: 100%; } .fullheight{ height: 100vh; } .bg { background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; } .contain{ background-size: contain !important; } .underline { width: 100%; height: 35px; font-size: 14px; border: none; outline: 0; border-bottom: 1px black solid; font-family: 'CormorantGaramond-Regular'; font-size: 17px; margin-top: 5px; background: none; font-family: 'Montserrat-Regular'; } .anketa { width: calc(100% - 40px); margin-top: 20px; } /* flex */ /* FadersIN */ .hidden{ transition: 2s; opacity: 0; } .visible{ opacity: 1; } .fadein-left.hidden{ transform: translateX(-99%); } .fadein-left.visible{ transform: translateX(0); } .fadein-right.hidden{ transform: translateX(99%); } .fadein-right.visible{ transform: translateX(0); } .fadein-scale0.hidden{ scale: 0; } .fadein-scale05.hidden{ scale: 0.5; } .fadein-scale0.visible{ scale: 1; } .fadein-scale05.visible{ scale: 1; } .fadein-bottom.hidden{ transform: translateY(99%); } .fadein-bottom.visible{ transform: translateY(0); } .button{ color: black; background: none; border: 1px black solid; border-radius: 8px; height: 50px; width: calc(100% - 50px); margin-top: 40px; font-family: 'Montserrat-SemiBold'; font-size: 20px; } .map { width: 100%; height: 50vh; } .loaderscreen { width: 100%; height: 100vh; background: #e8e9ee; display: flex; justify-content: center; z-index: 5; } .loader { width: 48px; height: 48px; border: 2px solid #FFF; border-radius: 50%; display: inline-block; position: relative; box-sizing: border-box; animation: rotation 1s linear infinite; align-self: center; } .loader::after, .loader::before { content: ''; box-sizing: border-box; position: absolute; left: 0; top: 0; background: #d54734; width: 6px; height: 6px; border-radius: 50%; } .loader::before { left: auto; top: auto; right: 0; bottom: 0; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* TIMER */ .timer { width: 100%; display: flex; flex-direction: column; margin-top: 100px; } .ht { font-family: 'CormorantInfant-SemiBold'; font-size: 24px; } .clock { display: flex; justify-content: center; margin: 10px; gap: 10px; } .countdown-item { display: flex; flex-direction: column; align-items: center; font-family: 'Montserrat-Regular'; } .countdown-item span { font-family: 'CormorantInfant-SemiBold'; font-size: 40px; } .countdown-item p{ margin: 0px; text-transform: uppercase; font-size: 12px; } .timervs { width: 1px; height: 100%; background: black; } /* NICE DATE */ .updown { border-top: 1px solid black; border-bottom: 1px solid black; width: 80px; height: 23px; align-items: center; display: flex; justify-content: center; font-size: 14px; align-self: center; } .right.updown { font-size: 17px; } .date .center { align-items: center; display: flex; } .month { font-size: 14px; } .date{ font-family: 'CormorantGaramond-Regular'; } .date .day { font-size: 33px; margin-top: 7px; } .year { font-size: 20px; } /* */ .004801 { } .009200 { } .370095 { } .63 { } .679400 { } .adressred {height: 100px;width: 267px;background: url(6.png) no-repeat;color: white;font-family: Montserrat-Medium;background-position: right;background-size: contain;font-size: 35px;padding-right: 25px;margin-top: 160px;} .ankettitle {height: 68px;width: 100%;background: #064d43;color: white;font-family: Montserrat-Medium;font-size: 30px;margin-top: 50px;} .circle {background: url(5.jpeg) no-repeat;height: 300px;width: 300px;background-position: center;background-size: cover;border-radius: 50%;position: absolute;margin-top: -260px;margin-left: -110px;} .clockicon {width: 30px;height: 25px;background: url(7.png) no-repeat;background-position: center;background-size: contain;margin: 0;} .coffebreak {height: 91px;background: #d54734;color: black;font-family: Montserrat-Italic;font-size: 25px;margin-top: 50px;} .coffebreaktext1 { } .coffebreaktext2 { font-family: Montserrat-Medium; font-size: 20px; } .css { } .greenleft { height: 62px; width: 100px; background: url(3.png) no-repeat; background-size: contain; background-position: left;} .greenright { height: 62px; width: 100px; background: url(4.png) no-repeat; background-size: contain; background-position: right;} } .h1 { } .h2 { } .h3 {font-family: 'Montserrat-Regular';font-size: 25px;margin-top: 37px;text-align: center;margin-bottom: 24px;} .h4 {font-family: 'Montserrat-SemiBold';font-size: 19px;margin-top: 25px;margin-bottom: 5px;} .hour {font-family: 'Montserrat-SemiBold';margin-left: 10px;font-size: 20px;} .hourblock {margin-top: 10px;} .tright .hourblock { display: flex; justify-content: end; } .jakov {width: calc(100% - 40px);padding: 15px;font-family: Montserrat-SemiBoldItalic;font-size: 25px;);)%;);} .line {width: 31px;height: 1px;background: black;/* align-self: center; */margin-top: 20px;margin-left: 15px;margin-right: 15;} .main {/* background: url(1.png) no-repeat; *//* background-size: cover; */display: flex;flex-direction: column-reverse;max-height: 50%;background-position: center;} .main > div{ height: 46px; /* background: green; */ font-family: Montserrat-Medium; font-size: 25px; color: white; display: flex; align-items: baseline; margin-left: 40px; } .mainprize {width: 100%;margin-top: 100px;background-color: #e8e9ee;/* height: 610px; */} .mptitle {height: 70px;display: flex;align-items: center;font-family: 'Montserrat-SemiBold';font-size: 24px;color: white;background: #064d43;} .name {font-size: 24px;margin-top: 9px;} .open { } .p {font-family: 'Montserrat-Regular';font-size: 20px;} .radio {margin-top: 4px;display: flex;align-items: center;} .ru { } .spacer {height: 160px;} .time {font-size: 35px;} .timeitem { } .times {font-family: 'Montserrat-Regular';} .timimgred {height: 100px;width: 267px;background: url(2.png) no-repeat;color: white;font-family: Montserrat-Medium;background-position: right;background-size: contain;font-size: 35px;padding-left: 25px;margin-top: 20px;} .png { } .tititi {position: relative;} .tititi > span { position: absolute; margin-left: 60px; font-family: Montserrat-Medium; color: white; margin-top: -50px; } .mainprize > .p { text-align: right; margin-right: 20px; margin-top: 50px; } .mptitle > span { margin-right: 20px; } button.red { height: 60px; width: calc(100% - 60px); color: white; background: #d54734; border: none; font-family: Montserrat-Regular; font-size: 24px; border-radius: 8px; margin-top: 25px; } input[type="radio"] { width: 20px; height: 20px; } label { font-family: 'Montserrat-Regular'; line-height: 0px; margin-top: 5px; margin-left: 9px; }