@font-face { font-family: "CalligraphRuss-Regular"; src: url("CalligraphRuss-Regular.ttf") format("truetype"); } @font-face { font-family: "CormorantGaramond-Regular"; src: url("CormorantGaramond-Regular.ttf") format("truetype"); } @font-face { font-family: "CormorantGaramond-SemiBold"; src: url("CormorantGaramond-SemiBold.ttf") format("truetype"); } @font-face { font-family: "CormorantGaramond-SemiBoldItalic"; src: url("CormorantGaramond-SemiBoldItalic.ttf") format("truetype"); } @font-face { font-family: "CormorantInfant-Regular"; src: url("CormorantInfant-Regular.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; z-index: 1; } .screen { align-items: center; justify-content: flex-start; overflow-x: clip; background-color: #fff; z-index: 0; } .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: 18px; border: none; outline: 0; border-bottom: 1px black solid; font-family: 'CormorantGaramond-Regular'; } .anketa { width: calc(100% - 40px); } /* 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, .button{ color: black; background: none; border: 1px black solid; border-radius: 5px; height: 50px; width: 100%; font-family: 'CormorantGaramond-SemiBold'; font-size: 23px; margin-top: 40px; } .map { width: 100%; height: 500px; } .loaderscreen { width: 100%; height: 100vh; background: #ffffff; display: flex; justify-content: center; z-index: 5; } .loader { width: 48px; height: 48px; border: 2px solid #74af95; 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: #ff3f3f; 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: 50px; margin-bottom: 50px; } .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: CalligraphRuss-Regular; font-size: 80px; line-height: 50px; } .countdown-item p{ margin: 0px; text-transform: uppercase; font-size: 14px; font-family: CormorantInfant-Regular; } .timervs { /* width: 1px; */ /* height: 100%; */ /* background: black; */ } /* NICE DATE */ .updown { border-top: 1px solid #bc9455; border-bottom: 1px solid #bc9455; width: 80px; height: 23px; align-items: center; display: flex; justify-content: center; font-size: 17px; align-self: center; } .right.updown { font-size: 17px; font-family: Font3; } .date .center { align-items: center; display: flex; } .month { font-size: 16px; } .date .day { font-size: 44px; margin-top: 7px; line-height: 29px; color: #bc9455; } .year { font-size: 20px; } /* */ .main { width: 100%; height: 610px; background: url(1.png) no-repeat; background-size: contain; background-position: top center; display: flex; flex-direction: column; justify-content: center; align-items: center; } .h1 { font-family: CalligraphRuss-Regular; font-size: 74px; line-height: 60px; } .date { font-family: 'CormorantInfant-Regular'; } .upkust { width: 100%; height: 200px; background: url(2.png) no-repeat; background-size: contain; } .lowkust { width: 100%; height: 170px; background: url(3.png) no-repeat; background-size: contain; } .p { font-family: 'CormorantGaramond-Regular'; font-size: 19px; text-align: center; margin: 10px 0px; line-height: 20px; } .h3 { font-family: 'CalligraphRuss-Regular'; font-size: 48px; margin-top: 60px; margin-bottom: 25px; } .h2 { font-family: CalligraphRuss-Regular; font-size: 67px; line-height: 80px; margin-top: 40px; } .flex.row.progitem { margin-left: 40px; } .progtime { min-height: 100%; width: 40px; display: flex; justify-content: center; align-items: center; border-right: 1px black solid; } .progtime span { transform: rotateZ(-90deg); font-family: 'CormorantInfant-Regular'; font-size: 29px; } .flex.col.progtext { padding: 15px; } .ptitle { font-family: 'CormorantGaramond-SemiBold'; font-size: 22px; margin-bottom: 8px; line-height: 21px; } .pp { font-family: 'CormorantGaramond-Regular'; font-size: 22px; line-height: 21px; } .program.fullwidth.acenter { gap: 10px; display: flex; flex-direction: column; justify-content: start; } .program { display: flex; flex-direction: column; gap: 20px; } .h2.dress { } .h2.prog { margin-top: 0px; } .h4 {text-align: center;font-family: CormorantGaramond-SemiBoldItalic;font-size: 19px;/* margin-bottom: 30px; */} .h5 { font-family: 'CormorantGaramond-SemiBold'; font-size: 19px; margin-top: 25px; margin-bottom: 7px; } label { font-family: 'CormorantGaramond-Regular'; font-size: 18px; } .lastkust.fullwidth { height: 210px; background: url(6.png) no-repeat; background-size: cover; background-position: center bottom; /* margin-bottom: -30px; */ display: flex; justify-content: center; } .and { font-family: 'CormorantGaramond-Regular'; font-size: 60px; line-height: 0px; color: #e1dbd2; z-index: -1; }