/* Font */ @font-face { font-family: CalligraphRuss-Regular; src: url("CalligraphRuss-Regular.ttf"); } @font-face { font-family: Montserrat-Bold; src: url("Montserrat-Bold.ttf"); } @font-face { font-family: Montserrat-Italic; src: url("Montserrat-Italic.ttf"); } @font-face { font-family: Montserrat-Light; src: url("Montserrat-Light.ttf"); } @font-face { font-family: Montserrat-Medium; src: url("Montserrat-Medium.ttf"); } @font-face { font-family: Montserrat-Regular; src: url("Montserrat-Regular.ttf"); } @font-face { font-family: Bonche; src: url("Bonche.ttf"); } /* */ @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: #fff; display: flex; justify-content: center; align-items: center; flex-direction: column; font-family: Font1; } .screen { align-items: center; justify-content: flex-start; overflow-x: clip; } .flex{ display: flex; } .icenter{ align-items: center; } .tcenter{ text-align: center; } .center{ justify-content: center; } .between{ justify-content: space-between; } .around{ justify-content: space-around; } .col{ flex-direction: column; } .row{ flex-direction: row; } .w{ width: 100%; } .h{ height: 100vh; } .bg { background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; } .contain{ background-size: contain !important; } /* 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; } .main { display: flex; height: 100vh; width: 100%; background: white; flex-direction: column; justify-content: space-between; align-items: center; font-family: Montserrat-Light; } .mainlower { /* background: blue; */ width: 100%; height: 100px; color: black; } .timer_label { /* position: absolute; */ margin-top: 20PX; FONT-SIZE: 32PX; } .clock { DISPLAY: FLEX; FLEX-DIRECTION: row; align-items: center; justify-content: space-evenly; width: calc(100% - 20px); } .countdown-item { display: flex; justify-content: center; align-items: center; flex-direction: column; /* font-weight: 600; */ font-size: 40px; width: 63px; height: 68px; align-items: center; display: flex; justify-content: space-around; } .countdown-item p { font-weight: 500; font-size: 20px; padding: 0; margin: 0; line-height: 10px; text-transform: lowercase; } .timer {display: flex;align-items: center;justify-content: center;} .timerlabel { font-family: 'Font4'; text-align: center; font-size: 30px; } .countdown-item.bordered1 { border-left: 1px white solid; border-right: 1px white solid; } .countdown-item.bordered2 { border-right: 1px white solid; } .countdown-item span { line-height: 0px; font-size: 40px; } .timerblock { width: 100%; height: 650px; display: flex; flex-direction: column; justify-content: center; position: relative; align-items: center; color: #516941; } .muright { background: url(1.jpeg) no-repeat; background-size: contain; height: 350px; width: 230px; } .mainupper { width: 100%; display: flex; flex-direction: row; justify-content: space-around; margin-top: 20%; } .name.n { font-size: 90px; } .name.a { font-size: 90px; } .muleft { display: flex; flex-direction: column; justify-content: center; align-items: center; } .name.na { text-align: center; text-transform: uppercase; border-top: 1px black solid; border-bottom: 1px black solid; height: 100px; align-items: center; display: flex; } .datawait {text-align: right;margin-right: 20px;width: 100%;font-size: 20px;font-family: Montserrat-Medium;} .dearguest { width: 100%; display: flex; flex-direction: column; align-items: center; background: url(4.jpeg); background-size: 360px; } .h1.guest { text-transform: capitalize; } .h1 { font-family: Bonche; text-align: center; font-size: 32px; margin: 30 0; text-transform: uppercase; line-height: 35px; } .p { font-size: 14px; text-align: center; font-family: 'Montserrat-Medium'; } .datetext { font-family: 'Montserrat-Medium'; margin-top: 30px; font-size: 20px; } .photo2 { background: url(2.jpeg) no-repeat; background-size: cover; width: 70%; height: 340px; background-position: center; margin: 30px 0; } .h2 { font-family: Montserrat-Medium; text-align: center; margin: 10 0; } .h3 { font-family: 'Montserrat-Bold'; font-size: 14px; margin: 10px 0 5 0; } .anketa { width: calc(100% - 40px); font-family: 'Montserrat-Regular'; } input { background: none; } button { height: 40px; width: 100%; margin: 15 0; text-transform: uppercase; font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: center; background: none; border: 1px black solid; color: black; } .underline { width: 100%; height: 35px; font-size: 14px; border: none; outline: 0; border-bottom: 1px black solid; } .underline::placeholder{ color: #353535; } .circles { height: 120px; gap: 10px; } .circle1 { width: 60px; height: 60px; background: white; border-radius: 50%; border: 1px white solid; } .circle2 { width: 60px; height: 60px; background: #cfcfcf; border-radius: 50%; border: 1px darkgrey solid; } .circle3 { width: 60px; height: 60px; background: black; border-radius: 50%; border: 1px black solid; } .separatorBLOCK { background: url(3.jpeg); height: 50px; width: 100%; background-size: 360px; } .timingBLOCK { width: 100%; background: url(5.jpeg); background-size: 360px; display: flex; flex-direction: column; /* align-items: center; */ } .timingitem { width: auto; margin-left: 20px; margin-bottom: 30px; } .tleft { min-width: 130px; overflow: hidden; text-overflow: clip; max-width: 130px; } .tleft div{font-family: 'Montserrat-Medium';} .hf { font-family: 'Montserrat-Medium'; } .r { font-family: 'Montserrat-Medium'; font-size: 14px; color: #636363; margin: 6px; } .i { color: #636363; font-family: 'Montserrat-Italic'; font-size: 14px; margin: 6px; } .map { height: 360px; } .sign { font-family: CalligraphRuss-Regular; font-size: 60px; height: 150px; display: flex; justify-content: center; align-items: center; }