@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: "CormorantInfant-Regular"; src: url("CormorantInfant-Regular.ttf") format("truetype"); } @font-face { font-family: "CormorantInfant-SemiBold"; src: url("CormorantInfant-SemiBold.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: #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; } .h1 { font-family: CormorantGaramond-SemiBold; font-size: 30px; text-transform: uppercase; margin: 20px 0; } .photo { background: url(1.jpeg) no-repeat; width: calc(100% - 40px); height: 322px; margin-top: 15px; background-position: center; background-size: cover; margin-bottom: 5px; } .spacer { height: 20px; } .h1.date { font-size: 31px; font-family: CormorantInfant-SemiBold; margin-bottom: 0px; } .h2 { width: calc(100% - 40px); font-family: CalligraphRuss-Regular; font-size: 30px; margin-top: 20px; line-height: 20px; font-size: 35px; margin: 20px 0px; } .photo2 { background: url(2.jpeg) no-repeat; width: 100%; height: 130px; margin: 15px 0px; background-position: center; background-size: cover; } .photo3 { background: url(7.jpeg) no-repeat; width: 100%; height: 170px; margin: 15px 0px; background-position: center; background-size: cover; } .p { width: calc(100% - 40px); font-family: 'CormorantGaramond-Regular'; font-size: 17px; } .spacer2 { height: 35px; width: 100%; } .list { width: 120px; height: 70px; background: url(8.jpeg) no-repeat; background-size: cover; position: absolute; z-index: -1; margin-top: -30px; right: 0; } .icons{ width: 55px; height: 35px; } .icons.icon1 { background: url(3.png) no-repeat; background-position: center; background-size: contain; } .icons.icon2 { background: url(4.png) no-repeat; background-position: center; background-size: contain; } .icons.icon3 { background: url(5.png) no-repeat; background-position: center; background-size: contain; } .icons.icon4 { background: url(6.png) no-repeat; background-position: center; background-size: contain; } .vs { width: 1px; background: black; height: 35px; } .flex.col.programi { justify-content: center; align-items: center; } .w.flex.row.programitem { /* justify-content: center; */ margin-left: 100px; } .timep { font-size: 16px; font-family: 'CormorantInfant-Regular'; } .textp { font-family: 'CormorantInfant-Regular'; text-transform: uppercase; font-size: 15px; } .color1 { width: 55px; height: 18px; background: #efbfbb; } .color2 { width: 55px; height: 18px; background: #ca9c9c; } .color3 { width: 55px; height: 18px; background: #a8716c; } .color4 { width: 55px; height: 18px; background: #624034; } .color5 { width: 55px; height: 18px; background: #2b1811; } .flex.row.colors { height: 70px; justify-content: center; align-items: center; gap: 7px; } .showonmap { font-family: 'CormorantGaramond-SemiBold'; width: 75%; height: 40px; display: flex; justify-content: center; text-align: center; align-items: center; background: #e7c3c0; color: #624034; border: 1px #624034 solid; font-size: 20px; margin-bottom: 20px; } .underline { width: 100%; height: 35px; font-size: 14px; border: none; outline: 0; border-bottom: 1px black solid; font-family: 'CormorantGaramond-Regular'; font-size: 17px; } .anketa { width: calc(100% - 40px); } .h3 { font-family: 'CormorantGaramond-SemiBold'; font-size: 17px; line-height: 17px; margin-top: 12px; margin-bottom: 8px; } label { font-family: 'CormorantGaramond-Regular'; font-size: 16px; } button#sendButton { margin-left: auto; margin-right: auto; width: 75%; margin-top: 20px; height: 30px; color: black; font-family: 'CormorantGaramond-Regular'; font-size: 17px; background: none; border: 1px black solid; } .h2.wd { text-align: center; font-size: 40px; margin-top: 45px; margin-bottom: 35px; } .lastspacer { height: 40px; } .withlove { font-family: 'CormorantGaramond-SemiBold'; font-size: 27px; line-height: 0; }