/*@media (min-width: 768px) {*/
/*    .desktop-message {*/
/*        display: block;*/
/*        padding-bottom: 200px;*/
/*        margin-top: 150px;*/
/*        text-align: center;*/
/*    }*/

/*    #preloader, #content {*/
/*        display: none;*/
/*    }*/

/*}*/

@media (max-width: 769px) {
    .container {
        max-width: 500px;
        margin: 0 auto;
    }

    .main .main-info {
        margin-left: 0;
        text-align: center;
        width: 100%;
    }
    .main .main-info p{
        font-size: 30px;
    }



    .location {
        padding-top: 50px;
        padding-bottom: 50px;
        text-align: center;
    }
    .location .container {
        flex-direction: column;
    }

    .location-info {
        max-width: 749px;
    }

    .location-info h4{
        font-size: 28px;
        text-align: center;
    }
    .location-info p{
        font-size: 30px;
        text-align: center;
    }
    .location-info a {
        font-size: 20px;
        position: relative;
        display: inline-block;
    }
    .location-images .butilka {
        display: none;
    }
    .location-images .bokal1 {
        display: block;
        width: 65px;
        top: -26px;
        right: -42px;
    }
    .location-images .bokal2 {
        display: block;
        width: 65px;
        top: -20px;
        right: 193px;
    }
    .program {
        /*width: 400px;*/
        width: 400px;
        margin: 0 auto;
    }
    .program .wave{
        display: none;
    }
    .program .wave-text.two, .wave-text.three {
        margin-top: -64px;
    }
    .program-title {
        font-size: 33px;
        margin-top: 45px;
    }
    .timeline {
        display: grid;
        gap: 20px;
        max-width: 400px;
        margin: 0 auto;
        position: relative;
    }
    .timeline::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 15px;
        width: 2px;
        height: 79%;
        background-color: #6b6c44;
        transform: translateX(-50%);
    }
    .event {
        display: grid;
        grid-template-columns: 1fr 1fr;
        text-align: center;
        gap: 20px;
    }
    .description {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .time {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
    }
    .time {
        font-size: 30px;
        font-weight: normal;
    }
    .time.first {
        margin-left: 0;
    }
    .time.second {
        margin-left: 0;
    }
    .time.three {
        margin-left: 0;
    }
    .time.four {
        margin-left: 0;
    }
    .dot {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);

    }
    .description {
        font-size: 24px;
        margin-left: 0;
    }
    .description.four {
        margin-left: 0;
    }



    .dresscode {
        padding-top: 20px;
        padding-bottom: 20px;

    }

    .dresscode-title {
        font-size: 36px;
    }
    .dresscode-info {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
    .dresscode-info-text {
        font-size: 30px;
        text-align: center;
    }
    .dresscode-info-image {
        display: flex;
        gap: 10px;
        justify-content: center;
    }

    .heart1, .heart2 {
        width: 50px;
        height: 50px;
    }
    .heart3 {
        width: 50px;
        height: 50px;
    }

    .heart-wrapper1, .heart-wrapper2,
    .heart-wrapper3 {
        width: 70px;
        height: 70px;


    }


    .organizer {
        padding-top: 30px;
        text-align: center;
    }
    .organizer-text {
        font-size: 30px;
        margin-bottom: 20px;
        text-align: center;
    }
    .organizer-title {
        font-size: 36px;
    }

    .organizer-name {
        font-size: 30px;
        margin-bottom: 30px;
    }
    .organizer a {
        font-size: 22px;
        margin: 0;
    }
    .wedding-form .des {
        font-size: 20px;
    }


    .wishes-title {
        font-size: 36px;
    }

    .wishes-text {
        font-size: 30px;
        text-align: center;
    }

    .presence {
        padding-bottom: 30px;
    }
    .presence .container{
        max-width: 400px;
    }
    .presence-title {
        font-size: 36px;
    }
    .presence-text {
        font-size: 30px;
        margin-bottom: 30px;
        text-align: center;
    }




    .wedding-form {
        font-size: 28px;

    }

    .wedding-form {
        input[type="text"], textarea {

            margin-top: 15px;
        }
    }
    .timout-title {
        font-size: 36px;
    }

    #countdown {
        display: flex;
        justify-content: center;
        gap: 0;
    }


    .time-box span {
        font-size: 30px;
    }

}
@media (max-width: 560px) {
    .container {
        max-width: 400px;
        margin: 0 auto;
    }
 .calendar-date .month{
        padding-bottom: 40px;
        margin-top: -80px;
        line-height: 2;
    }
    .calendar-section {
        padding-top: 20px;
    }
    .god {
        top: 20px;
    }
.main-title {
    font-size: 33px;
}


    .main .main-info {
        margin-left: 0;
        text-align: center;
        width: 100%;
    }
    .main .main-info p{
        font-size: 20px;
    }




    .location {
        padding-top: 50px;
        padding-bottom: 50px;
       text-align: center;
    }
    .location .container {
        flex-direction: column;
    }

    .location-info h4{
        font-size: 28px;
        text-align: center;
    }
    .location-info p{
        font-size: 20px;
        text-align: center;
    }
    .location-info a {
        font-size: 20px;
        position: relative;
        display: inline-block;
    }
    .location-images .butilka {
        display: none;
    }

    .program {
        /*width: 400px;*/
        width: 400px;
        margin: 0 auto;
    }
    .program .wave{
        display: none;
    }
    .program .wave-text.two, .wave-text.three {
        margin-top: -64px;
    }
    .program-title {
        font-size: 33px;
        margin-top: 45px;
    }
    .timeline {
        /*display: flex;*/
        /*flex-direction: column;*/
        /*align-items: center;*/
        /*gap: 0;*/
        /*position: relative;*/
        display: grid;
        gap: 20px;
        max-width: 400px;
        margin: 0 auto;
        position: relative;
    }
    .timeline::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 15px;
        width: 2px;
        height: 79%;
        background-color: #6b6c44;
        transform: translateX(-50%);
    }
    .event {
        /*display: flex;*/
        /*align-items: center;*/
        /*gap: 20px;*/
        /*width: 75%;*/
        /*position: relative;*/
        display: grid;
        grid-template-columns: 1fr 1fr;
        text-align: center;
        gap: 20px;
    }
     .description {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .time {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
    }
    .time {
        font-size: 30px;
        font-weight: normal;
    }
    .time.first {
margin-left: 0;
    }
    .time.second {
        margin-left: 0;
    }
    .time.three {
        margin-left: 0;
    }
    .time.four {
        margin-left: 0;
    }
    .dot {
        width: 14px;
        height: 14px;
        background-color: #4b3935;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);

    }
    .description {
        font-size: 24px;
        margin-left: 0;
    }
    .description.four {
        margin-left: 0;
    }



    .dresscode {
        padding-top: 20px;
        padding-bottom: 20px;

    }

    .dresscode-title {
        font-size: 33px;
    }
    .dresscode-info {
        display: flex;
        flex-direction: column;
        gap: 20px;

    }
    .dresscode-info-text {
        font-size: 20px;
        text-align: center;
    }
    .dresscode-info-image {
        display: flex;
        gap: 10px;
        justify-content: center;
    }

    .heart1, .heart2, .heart3, .heart4, .heart5 {
        width: 50px;
        height: 50px;
    }


    .heart-wrapper1, .heart-wrapper2,
    .heart-wrapper3, .heart-wrapper4, .heart-wrapper5 {
        width: 70px;
        height: 70px;


    }
.title-two {
    white-space: nowrap;
    font-size: 50px;
    font-weight: normal;
    margin-top: -190px;
    padding: 40px 0;
    color: rgba(128, 128, 128, 0.5);
    z-index: 1;
    font-family: "ekat", sans-serif;
}

    .organizer {
        padding-top: 50px;
        text-align: center;
    }
    .organizer-text {
        font-size: 20px;
        margin-bottom: 20px;
        text-align: center;
    }
    .organizer-title {
        font-size: 36px;
    }

    .organizer-name {
        font-size: 30px;
        margin-bottom: 20px;
    }
    .organizer a {
        font-size: 36px;
        margin: 0;
    }
    .wedding-form .des {
        font-size: 20px;
    }


    .wishes-title {
        font-size: 36px;
    }

    .wishes-text {
        font-size: 20px;
        text-align: center;
    }

    .presence {
        padding-bottom: 30px;
    }
    .presence .container{
       max-width: 400px;
    }
    .presence-title {
        font-size: 33px;
    }
    .presence-text {
        font-size: 20px;
        margin-bottom: 30px;
        text-align: center;
    }




    .wedding-form {
        font-size: 20px;

    }

    .wedding-form {
        input[type="text"], textarea {

            margin-top: 15px;
        }
    }
    .timout-title {
        font-size: 36px;
    }

    #countdown {
        display: flex;
        justify-content: center;
        gap: 0;
    }


    .time-box span {
        font-size: 30px;
    }

}


@media (max-width: 403px) {
    .heart-wrapper1, .heart-wrapper2, .heart-wrapper3, .heart-wrapper4, .heart-wrapper5 {
        width: 50px;
        height: 50px;
    }
    .heart1, .heart2, .heart3, .heart4, .heart5 {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 430px) {
    .container {
        max-width: 370px;
        margin: 0 auto;
    }
    .timout-title {
        font-size: 30px;
    }
}
@media (max-width: 376px) {
    .container {
        max-width: 350px;
        margin: 0 auto;
    }


    .main .main-info .main-image-left p {
        font-size: 20px;
        top: -18px;
        left: 142px;
    }
    .main .main-info .main-image-right p {
        font-size: 20px;
        top: 125px;
        left: -100px;
    }
    .day {
        padding: 7px;
        width: 20px;
        height: 20px;
    }
    .heart {
        bottom: -16px;
        right: -12px;
    }



    .main .main-info p{
        font-size: 24px;
    }


    .location-info h4{
        font-size: 24px;
    }
    .location-info p{
        font-size: 24px;
    }
    .location-info a {
        font-size: 16px;
    }


    .location-images .bokal2 {
        display: block;
        width: 56px;
        top: -20px;
        right: 163px;
    }

    .program {
        max-width: 350px;
    }

    .timeline {

        max-width: 350px;
    }
    .time {
        font-size: 36px;
    }
    .event {

    }

    .dresscode-info-text {
        font-size: 24px;
    }
    .dresscode-title {
        font-size: 33px;
    }

    .organizer-title {
        font-size: 33px;
    }


    .organizer-text {
        font-size: 24px;
    }
    .wishes-title {
        font-size: 33px;
    }
    .wishes-text {
        font-size: 24px;
    }

    .presence-title {
        font-size: 33px;
    }

    .presence-text {
        font-size: 24px;
    }

    .wedding-form {
        max-width: 350px;
    }

    .main .main-info h1 {
        font-size: 50px;
    }
    .title-img6 {
        top: 320px;
        right: 130px;
    }
}

@media (max-width: 321px) {
    .container {
        max-width: 300px;
        margin: 0 auto;
    }


    .main-image-left img {
        width: 125px;
    }
    .main .container{

    }
    .main .main-info .main-image-left p {
        font-size: 20px;
        top: -18px;
        left: 131px;
    }
    .main .main-info .main-image-right p {
        font-size: 20px;
        top: 125px;
        left: -100px;
    }




    .main .main-info p{
        font-size: 22px;
    }


    .location-info h4{
        font-size: 22px;
    }
    .location-info p{
        font-size: 22px;
    }
    .location-info a {
        font-size: 14px;
    }
    .program-title {
        font-size: 29px;
    }

    .location-images .bokal2 {
        display: block;
        width: 56px;
        top: -20px;
        right: 163px;
    }
    .time {
        font-size: 28px;
    }

    .program {
        max-width: 300px;
    }

    .timeline {

        max-width: 300px;
    }

    .timeline::before {
        top: 17px;
        height: 80%;
    }
    .dot {
        left: 50%;
    }
    .event {
    }
    .time.four {
    }

    .dresscode-info-text {
        font-size: 22px;
    }
    .dresscode-title {
        font-size: 32px;
    }

    .organizer-title {
        font-size: 32px;
    }

    .organizer-text {
        font-size: 22px;
    }
    .wishes-title {
        font-size: 32px;
    }
    .wishes-text {
        font-size: 22px;
    }

    .presence-title {
        font-size: 32px;
    }

    .presence-text {
        font-size: 22px;
    }

    .wedding-form {
       width: 280px;
        box-sizing: border-box;
    }
}