@import url("https://use.typekit.net/yms8juo.css");

html{
    scroll-behavior: smooth;
}

nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

nav .navbar-brand {
    grid-column: 2 / span 1;
}

nav .navbar-collapse {
    grid-column: 1 / span 3;
    grid-row: 1 / span 1;
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-light .navbar-toggler {
    color: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0);
}

body{
    background: rgb(237,169,188);
    background: linear-gradient(90deg, rgba(237,169,188,1) 0%, rgba(222,143,166,1) 40%, rgba(203,109,135,1) 100%);
    background-attachment:fixed;
    color:white;
    font-family: basic-sans;
}

main {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-direction: column;
    flex-direction: column;
}

nav li{
    font-weight: 600;
}

.heart-emoji{
    color:red;
}

.sun-emoji{
    color:yellow;
}

.hero h1{
    font-weight: 600;
    font-size:54px;
}

.hero-description{
    font-size:18px;
    padding: 0;
    margin: 50px 0;
}

.hero-right{
    background-image: url("../assets/Component1.png"), url("../assets/Group\ 21.svg");
    background-repeat: no-repeat;
    background-size: 80%, contain;
    background-position: center;
}

.hero{
    min-height:700px;
    height:700px;
    margin-top:80px;
    margin-bottom:100px;
}

.event-cloud-mobile{
    display:none !important;
}

.event-cloud{
    color: #7AC0D6;
    border-radius:12px;
    width:90%;
    padding-left:30px;
    padding-right:30px;
    padding-top:20px;
    padding-bottom:20px;
}

.event-cloud p{
    text-align: left;
    margin-bottom:20px;
}

.about-mobile-background{
    display:none;
}

.about-cloud{
    border-radius: 25px;
    padding:50px;
}

.about-cloud img{
    border-radius: 25px;
}

h4 {
    color:#7AD6BA;
    margin:0px;
    font-size:22px;
    font: normal normal normal 22px/29px kapelka-new;
}

h5 {
    color:#D791A5;
    font-weight:900;
    font-size: 36px;
}

.shift-background{
    background: var(--unnamed-color-7ad6ba) 0% 0% no-repeat padding-box;
    background: #7AD6BA 0% 0% no-repeat padding-box;
    opacity: 1;
    width:200px;
    display: inline-block;
    width: 100px;
    text-align: center;
}

.shift-background-flavor{
    background: var(--unnamed-color-7ad6ba) 0% 0% no-repeat padding-box;
    background: #7AD6BA 0% 0% no-repeat padding-box;
    opacity: 1;
    width:200px;
}


.about-cloud p{
    color:black;
    margin-top:50px;
    font-size:18px;
    line-height:30px;
}

.about-cloud a{
    background-color:#7AC0D6;
    color:white;
    padding: 15px 35px;
    border-radius: 27px;
    font-size:12px;
}

.about-cloud a:hover{
    background-color:#7AD6BA;
}

.button-div{
    margin-top:67px;
}

.bg-wrapper-flavor{
    width:100%;
    margin-top:150px;
    background-color:white;
    background-image: url("../assets/mask_group_4.svg");

}

.flavor-page {
    width: 100%;
    max-width: 100%;
}

.flavor-page img{
    height:350px;
    width:350px;
    background-color:#DCCFDA;
    border-radius:50%;
}

.flavor-page p{
    color:black;
    margin-top:27px;
    font-size: 18px;
}

.flavor-page div{
    margin-top:80px;
}

.flavor-page p span{
    color:#7AD6BA;
}

.flavor-description p:first-of-type{
    color:#7AD6BA;
    font-weight: 600;
}

.flavor-description{
    margin-bottom: 80px;
}

.resize-comment-cloud{
    width:590px;
}

.comment-page{
    margin-top:200px;
    border-radius:25px;
    padding:50px;
}

.comment-page p{
    color:black;
    font-size: 17px;
    font-weight:200;
}

.comment-page p span{
    font-weight: bold;
}

.bg-wrapper-about{
    background-image: url("../assets/Group\ 32.svg");
    background-position: center;
    background-size:100% 100%;
    margin: 150px 0;
    width:100%;
}

.footer-page{
    padding-bottom:0;
}

.footer-page a{
    color:white;
    text-decoration: underline;
}

.footer-eu{
    font-size:10px;
}

.footer-margin{
    margin-top:290px;
    margin-bottom:85px;
}

.footer-margin svg{
    padding-bottom:30px;
}

.eu-sign img{
    border-radius:5px;
    -o-object-fit: cover;
    object-fit: cover;
}

    
.comments-wrapper {
    margin-top:35px;
}

/*EU-razpis*/

.eu-wrapper-inner .row {
    margin-top:70px;
}

.eu-wrapper-inner h1{
    font-size:54px;
    line-height: 64px;
}

.background-section-dots {
    background-image: url("../assets/Group32.svg");
    background-position: center bottom;
    background-repeat: no-repeat;
}

.button-mobile:hover{
    text-decoration: none;;
}

.eu-copy-text {
    line-height: 2em;
    text-align: center;
}

.eu-footer-notice {
    position: fixed;
    left: 20px;
    bottom: 20px;
    border-radius: 15px;
    overflow: hidden;
}

.eu-footer-notice{
   -o-object-fit: cover;
   object-fit: cover;
}

.eu-footer-notice img{
    -o-object-fit: cover;
    object-fit: cover;
    width:200px;
}

.cookie-wrapper {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index:2;
    border-radius: 15px;
    overflow: hidden;
    max-width: 520px;
}

.cookie-wrapper .cookie-wrapper-inner{
    background-color: white;
    padding: 35px;
}

.cookie-wrapper .cookie-wrapper-inner b{
    color: #D791A5;
}

.cookie-wrapper .cookie-wrapper-inner p{
    color: black;
}

.cookie-wrapper .cookie-wrapper-inner .cookie-button-div a{
    padding: 15px 35px;
    background-color: #7AC0D6;
    display: block;
    border-radius: 25px;
    font-size: 12px;
    text-transform: uppercase;
    text-align: center;
    color: white;
    font-weight: bold;
}

.event-list-container {
    display: grid;
    row-gap: 10px;
}

.event-list-container .event-list-container-item {
    color:black;
}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

    .container{
        padding-left:30px !important;
        padding-right:30px !important;
    }

    header{
        margin-left:0px !important;
        margin-right:0px !important;
    }

    #header {
        max-width: 100%;
    }

    nav .navbar-collapse {
        grid-row: 2 / span 1;
    }

    .hero{
        margin-top:0px !important;
        padding-top:0px !important;
        height: auto;
    }

    .hero h1{
        text-align:center;
        font-size:38px;
    }

    .hero p{
        text-align:center;
        margin:0px;
        font-size:18px;
    }

    .hero-description{
        margin-top:50px;
    }
    
    .bg-wrapper-about{
        padding:0px;
        margin:0px;
        background-image:none;
    }

    .about-cloud h4{
        font-size:20px;
    }

    .about-cloud p{
        font-size:14px;
    }

    .about-cloud{
        padding-left:40px;
        padding-right:40px;
    }

    .hero-mobile-background{
        margin-top:52px;
        margin-left:20px;
        margin-right:20px;
        background-image: url("../assets/Component1.png");
        background-size:contain;
        background-repeat:no-repeat;
        background-position: center;
        height:450px;
        padding-top:40%;
    }

    .about-mobile-background{
        margin-top: 50px;
        padding-left:0px !important;
        padding-right:0px !important;
        display:block !important;
    }

    .about-mobile-background img{
        height:100% !important;
        width:100% !important;
    }
    
    .event-cloud-mobile{
        border-radius:15px;
        max-width: 450px;
        color: #7AC0D6;
        display:block !important;
        text-align: left;
        padding:25px;
        margin-top: -60px;
    }

    .event-cloud-mobile p{
        text-align: left;
        margin-bottom:20px;
    }

    .bg-wrapper-flavor{
        background-image:none !important;
    }

    .button-mobile{
        text-align:center;
    }

    .flavor-description{
        padding-bottom:76px;
    }

    .flavor-page {
        padding: 0 30px;
        max-width: 720px;
        margin: 0 auto;
    }
    
    .flavor-page div{
        margin-top:50px;
        padding: 0 40px;
    }

    .mobile-resize-about{
        padding-left:0px !important;
        padding-right:0px !important;
    }

    .button-div{
        text-align: center;
    }

    .resize-comment-cloud{
        width:70%;
    }

    .resize-comments{
        padding:0px !important;
    }

    .comment-page{
        padding-left:40px;
        padding-right:40px;
    }

    .footer-page{
        text-align: center;
    }

    .eu-sign{
        text-align: center;
        margin-top:30px;
    }

    .hero-right {
        display:none;
    }

    /*EU-razpis*/
    .eu-wrapper-inner h1{
        font-size:38px;
        line-height: 54px;
    }

    .background-section-dots {
        background-image: none;
    }

    .comments-wrapper {
        margin-top:35px;
    }
}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {

    .container{
        padding-left:30px !important;
        padding-right:30px !important;
    }

    nav .navbar-collapse {
        grid-row: 2 / span 1;
    }

    .hero{
        margin-top:0px !important;
        padding-top:0px !important;
        height: auto;
    }

    .hero h1{
        text-align:center;
        font-size:38px;
    }

    .hero p{
        margin:0px;
        font-size:18px;
    }

    .hero-description{
        margin-top:80px;
        text-align: center;
    }
    
    .bg-wrapper-about{
        padding:0px;
        margin:0px;
        background-image:none;
    }

    .about-cloud h4{
        font-size:20px;
    }

    .about-cloud p{
        font-size:14px;
    }

    .about-cloud{
        padding-left:40px;
        padding-right:40px;
    }

    .hero-mobile-background{
        margin-top:50px;
        padding:0;
        background-image: url("../assets/Component1.png");
        background-size:contain;
        background-repeat:no-repeat;
        background-position: center;
        height:400px;
    }

    .about-mobile-background{
        margin-top:35px;
        padding-left:0px !important;
        padding-right:0px !important;
        display:block !important;
    }

    .about-mobile-background img{
        height:100% !important;
        width:100% !important;
    }
    
    .event-cloud-mobile{
        border-radius:15px;
        max-width: 350px;
        color: #7AC0D6;
        display:block !important;
        margin-top:-50px;
        padding:25px;
        text-align: left;
    }

    .event-cloud-mobile p{
        text-align: left;
        margin-bottom:20px;
    }

    .bg-wrapper-flavor{
        background-image:none !important;
    }

    .button-mobile{
        text-align:center;
    }

    .flavor-description{
        margin-bottom:50px;
    }

    .flavor-page {
        padding: 0 30px;
        max-width: 540px;
        margin: 0 auto;
    }

    .flavor-page div{
        margin-top:50px;
    }
    
    .flavor-page > div {
        padding: 0 40px;
    }

    .flavor-page img{
        width:200px;
        height: auto;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .mobile-resize-about{
        padding-left:0px !important;
        padding-right:0px !important;
    }
    
    .button-div{
        text-align: center;
    }

    .resize-comment-cloud {
        width:auto;
    }

    .resize-comments{
        padding:0px !important;
    }

    .comment-page {
        padding-left:40px;
        padding-right:40px;
        max-width: 540px;
    }

    .comments-wrapper {
        margin-top:35px;
    }
    
    .footer-page{
        text-align: center;
    }

    .hero-right {
        display:none;
    }
    
    .eu-sign{
        text-align: center;
        margin-top:30px;
    }
    .footer-margin {
        margin-top:100px;
    }

    .cookie-wrapper {
        left: 20px;
    }

}

@media (max-width: 576px) {
    .flavor-page {
        max-width: 540px;
    }
}
/* Portrait phones and smaller */
@media (max-width: 480px) {

    .container{
        padding-left:30px !important;
        padding-right:30px !important;
    }

    .hero{
        margin-top:0px !important;
        padding-top:0px !important;
        height:auto;
        margin-bottom:80px;
    }

    .hero h1{
        text-align:center;
        font-size:38px;
    }

    .hero p {
        margin:0px;
        font-size:18px;
    }

    .hero-mobile-background{
        margin-top:50px;
        margin-bottom:0;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
        background-image: url("../assets/Component1.png");
        background-size:contain;
        background-repeat:no-repeat;
        height:300px;
    }

    .hero-description{
        margin-top:70px;
        text-align: center;
    }

    .event-cloud-mobile {
        width:100%;
        border-radius:15px;
        color: #7AC0D6;
        display:block !important;
        padding:15px 40px;
        margin-top:-50px;
    }

    .bg-wrapper-about{
        padding:0px;
        margin:0;
        background-image:none;
    }

    .about-cloud h4{
        font-size:20px;
    }

    .about-cloud p{
        font-size:14px;
    }

    .about-cloud{
        padding-left:40px;
        padding-right:40px;
    }

    .about-mobile-background {
        margin-top:35px;
        padding-left:0px !important;
        padding-right:0px !important;
        display:block !important;
    }

    .bg-wrapper-flavor {
        width:100%;
        margin-top:100px;
        background-image:none !important;
    }

    .button-mobile{
        text-align:center;
        padding: 15px
    }

    .flavor-description{
        margin-bottom:50px;
    }

    .mobile-resize-about{
        padding-left:0px !important;
        padding-right:0px !important;
    }

    .button-div{
        text-align: center;
    }

    .resize-comment-cloud{
        width:100%;
    }

    .resize-comments{
        padding:0px !important;
    }

    .comment-page{
        padding-left:40px;
        padding-right:40px;
        margin-top:100px;
    }
    
    .comments-wrapper {
        margin-top:35px;
    }

    .footer-page{
        text-align: center;
    }
    
    .eu-sign{
        text-align: center;
        margin-top:30px;
    }
    .footer-margin {
        margin-top:100px;
    }
    .eu-copy-text {
        text-align: left;
    }
    .footer-eu {
        padding:0 40px;
    }
}


/* Portrait phones and smaller */
@media (max-width: 350px) {
    .about-cloud{
        padding-left:25px;
        padding-right:25px;
    }
    .flavor-page {
        padding: 0 30px;
    }

    .flavor-page > div{
        padding: 0 25px;
    }
    .flavor-description{
        margin-bottom:50px;
    }
    .flavor-page img{
        height:150px;
        width:150px;
        background-color:#DCCFDA;
        border-radius:50%;
    }
    .event-cloud-mobile {
        padding:20px 25px;
    }
    .comment-page{
        margin-top:100px;
        padding: 50px 25px;
    }
    .comments-wrapper {
        margin-top:35px;
    }
    .footer-margin {
        margin-top:100px;
    }
    .footer-eu {
        padding:0 25px;
    }
}