@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap');

* {
    box-sizing: border-box;
    font-family: 'Titillium Web', sans-serif !important;
}

html, body {
    padding: 0;
    margin: 0;
    font-size: 100%;
}

@media screen and (max-width: 1200px) {

    /*resize body rem */
    html, body {
        font-size: 85%;
    }
}


@media screen and (max-width: 920px) {

    /*resize body rem */
    html, body {
        font-size: 73%;
    }
}


@media screen and (max-width: 768px) {

    /*resize body rem */
    html, body {
        font-size: 85%;
    }
}



.button-normal {
    font-size: 0.9rem;
    background-color: #000;
    color: #fff;
    padding: 1.3rem 4rem;
    margin: 1rem;
    display: inline-block;

}

.button-normal:hover {
    background-color: #00AEEF;
    color: #fff;

}

.button-cat {
    font-size: 0.9rem;
    background-color: transparent;
    border: 2px solid #000;
    color: #000;
    padding: 0.8rem 1.5rem;
    margin: 0.8rem;
    display: inline-block;
}

.button-cat-active:hover {
    background-color: #000;
    color: #fff;
}

.button-cat-active {
    font-size: 0.9rem;
    background-color: #000;
    border: 2px solid #000;
    color: #fff;
    padding: 0.8rem 1.8rem;
    margin: 0.8rem;
    display: inline-block;
}

.button-cat:hover {
    background-color: #000;
    color: #fff;
}

.button-outline {
    font-size: 0.9rem;
    border: 2px solid #fff;
    background-color: transparent !important;
    font-weight: 600;
    color: #fff;
    padding: 1.3rem 4rem;
    margin: 1rem;
    display: inline-block;
    transition: all 0.6s;
    cursor: pointer;
}

.button-outline:hover {
    border: 2px solid #fff;
    background-color: #fff !important;
    color: #000;
    transition: all 0.6s;
}



.page-numbers {
    font-size: 0.9rem;
    background-color: transparent;
    border: 2px solid #000;
    color: #000;
    padding: 0.8rem 1.5rem;
    margin: 0.8rem;
    display: inline-block;
}

.page-numbers:hover {
    background-color: #000;
    color: #fff;
}


.page-numbers.current {
    font-size: 0.9rem;
    background-color: #000;
    border: 2px solid #000;
    color: #fff;
    padding: 0.8rem 1.8rem;
    margin: 0.8rem;
    display: inline-block;
}


.bigwrapp {
    width: 94rem;
    max-width: 100%;
    padding: 0 2rem;
    margin-left: auto;
    margin-right: auto;
}

.midwrapp {
    width: 78rem;
    max-width: 100%;
    padding: 0 2rem;
    margin-left: auto;
    margin-right: auto;
}

.smallwrapp {
    width: 60rem;
    max-width: 100%;
    padding: 0 2rem;
    margin-left: auto;
    margin-right: auto;
}



/* GLAVNI MENI */

ul.glavni-meni {
    list-style-type: none;
}

ul.glavni-meni>li {
    display: inline;
}

ul.glavni-meni>li>a {
    color: #fff;
}

ul.glavni-meni ul {
    list-style-type: none;
}

li a {
    list-style-type: none;
    color: #fff;
}

/* NASLOVI KATEGORIJA */

.naslov-kategorije {
    margin-bottom: 4rem;
}

.naslov-kategorije .naslov-dogadanja {
    height: 4.5rem;
    max-width: 100%;
}

.naslov-kategorije .naslov-radionice {
    height: 3.5rem;
    max-width: 100%;
}

@media screen and (max-width: 480px) {

    .naslov-kategorije .naslov-dogadanja {
        height: auto;
        max-width: 80%;
    }

    .naslov-kategorije .naslov-radionice {
        height: auto;
        max-width: 80%;
    }

}



/* HEADER */
.header {
    height: 33rem;
    background-size: cover;
    background-position: center;
    z-index: 1;
    overflow: hidden !important;
}

.header-video {
    height: 33rem;
    background-size: cover;
    background-position: center;
    z-index: 1;
    overflow: hidden !important;
}

.header-video video {
    height: 100%;
	width: 100%;
	object-fit: cover;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    z-index: 3;
}

.header-single {
    position: relative;
}

.header .header-gradient {
    position: absolute;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    width: 100%;
    height: 35%;
    top: 0;
    z-index: 4;
}

.header-video .header-gradient {
    position: absolute;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    width: 100%;
    height: 35%;
    top: 0;
    z-index: 4;
}

.header-gradient-other {
    position: absolute;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.85) 100%);
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 4;
}

.header .header-meni,
.homewrapp .header-meni
 {
    display: grid;
    grid-template-columns: 351px 1fr;
    gap: 2rem;
    position: absolute;
    top: 2rem;
    left: 0;
    right: 0;
    width: 94rem;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 2rem;
    color: #fff;
    z-index: 33;
}

.header-single .header-meni {
    display: grid;
    grid-template-columns: 351px 1fr;
    gap: 2rem;
    margin: 0 auto;
    width: 94rem;
    max-width: 100%;
    padding: 2rem;
    color: #fff;
}

.header-logo {
    width: 100%;
    text-align: left;
}


/* LOGO OUTLINE*/
.logo-outline {
    margin-bottom: 2rem;
    text-align: center;
    z-index: 10;
    padding-bottom: 15.2rem;
    position: relative;
}

.logo-outline div {
    position: absolute;
    width: 79.5%;
    height: 100%;
    margin: 0 auto;
    top: -8rem;
    left: 0;
    right: 0;
}

.logo-outline img {
    width: 100%;
    height: auto;
}



@media screen and (max-width: 1200px) {

    .logo-outline {
        margin-bottom: 4rem;
        padding-bottom: 20%;
    }

    .logo-outline div {
        top: -50%;
    }

}

@media screen and (max-width: 768px) {
    .header .header-meni {
        grid-template-columns: 1fr;
    }

    .homewrapp .header-meni {
        grid-template-columns: 1fr;
    }

    .header-single .header-meni {
        grid-template-columns: 1fr;
    }

}





/* DOGADANJA & RADIONICE */
.single-content img {
    width: 100%;
    display: block;
    margin-bottom: 2rem;
}

.breadcrumbs a {
    color: #000;
}

.breadcrumbs a:hover {
    color: #00AEEF;
}



.dogadanja-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 6rem;
}

.dogadanja {
    box-sizing: border-box !important;
}

.dogadanja-img {
    background-size: cover;
    background-position: center;
    height: 22rem;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
}

.dogadanja a {
    color: #000;
}

.dogadanja img {
    width: 100%;
}

.nav-links {
    text-align: center;
}


.radionice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
}

.radionice-grid-single {
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    gap: 2rem;
}

.radionice-grid-single a {
    color: #000;
}
.radionice-grid-single a:hover {
    color: #00AEEF;
}



.radionice {
    padding: 6rem 0 4rem 0;
    background-size: cover;
    background-position: center;
}

.radionice-kategorija {
    max-width: 65%;
}

.radionice .strelice {
    text-align: right;
}

.radionice-naslov-grid {
    display: grid;
    grid-template-columns: 1fr 10rem;
    gap: 2rem;
}

.radionice-blok {
    position: relative;
    height: 30rem;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
}

.radionice-content {
    position: absolute;
    padding: 1rem 2.6rem;
    left: 0;
    bottom: 0;
    color: #fff;
    z-index: 20;
}


.radionice-blok .radionice-blok-gradient {
    position: absolute;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.4) 100%);
    width: 100%;
    height: 100%;
    bottom: 0;
    z-index: 10;
    opacity: 0.7;
    transition: all 0.8s;
}

.radionice-blok:hover .radionice-blok-gradient {
    opacity: 0.96;
    transition: all 0.8s;
}


/* Radionice jednokratne */
.radionice-jedno-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
}

.radionice-jedno-img {
    background-size: cover;
    background-position: center;
    height: 19rem;
}

.radionice-jedno-grid h4 {
    margin-top: 0;
}


/* Radionice galerija */
.radionice-gallery img, .jedno-radionice-gallery img {
    max-width: 100%;
    display: block;
}

.radionice-gallery figure, .jedno-radionice-gallery figure {
    margin: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    margin-bottom: 0.7rem;
    break-inside: avoid;
}

.radionice-gallery figure>img, .jedno-radionice-gallery figure>img {
    grid-row: 1 / -1;
    grid-column: 1;
}

.radionice-gallery figure a, .jedno-radionice-gallery figure a {
    color: black;
    text-decoration: none;
}

.radionice-gallery {
    column-count: 3;
    column-gap: 1rem;
}

.jedno-radionice-gallery {
    column-count: 4;
    column-gap: 1rem;
}

@media only screen and (max-width: 640px) {

    .radionice-gallery {
        column-count: 2;
    }

    .jedno-radionice-gallery {
        column-count: 3;
    }

}



@media screen and (max-width: 1200px) {

    .radionice-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

@media screen and (max-width: 768px) {

    .radionice-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .radionice-grid-single {
        grid-template-columns: 1fr;
        gap: 6rem;
    }

    .dogadanja-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
        margin-bottom: 3rem;
    }

    .radionice-naslov-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

}


/* GALERIJA */
.galerija {
    margin-top: 7.25rem;
    margin-bottom: 7.25rem;
    text-align: center;
}

.galerija-img {
    width: 100%;
}


/* ZAGREB-NEWSLETTER */

.zagreb-newsletter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;

}

.zagreb {
    background-color: #184682;
    width: 100%;
    text-align: center;
    padding: 1rem;
}

.zagreb-img {
    width: 65%;
    margin-top: 3rem;
    margin-bottom: 3rem;
    text-align: center;
}

.zagreb-text {
    color: #fff;
    padding: 1rem;

}

.newsletter {
    width: 100%;
    background-image: url('img/Fotka_NL.jpg');
    background-size: cover;
    background-position: center;
    position: relative
}

.newsletter-overlay {
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 10
}

.newsletter-content {
    position: absolute;
    color: #fff;
    text-align: center;
    padding: 1rem;
    z-index: 20
}

.newsletter-email {
    width: 80%;
    font-size: 1rem;
    padding: 0.5rem;
}

.newsletter-checkbox input {
    width: 1.3rem;
    height: 1.3rem;
}

.newsletter-text {
    display: grid;
    grid-template-columns: 1.5rem 12fr;
    gap: 1.5rem;
    margin: auto;
    width: 80%;
    text-align: left;
}

.newsletter-text p {
    padding: 0;
}

.newsletter-text .wpcf7-list-item {
    margin: 0;    
}

.newsletter-button {
    text-align: center;
    z-index: 30;
}



@media screen and (max-width: 920px) {

    .newsletter-content {
        position: relative;
    }

}

@media screen and (max-width: 768px) {

    .zagreb-newsletter {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

}


/* PLAVA LINIJA */
.plava-linija {
    background-color: #00AEEF;
    width: 100%;
    height: 0.5rem;
    margin-top: 0;

}




/* FOOTER */

.footer-background {
    background-color: #000000;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 0.9fr 1fr 1fr 1fr;
    gap: 1rem;
    text-align: left;
    font-size: 1rem;
}

#footer a {

    color: #fff;
}

#footer a:hover {

    color: #00AEEF;
}

.hr-footer {
    width: 14rem;
    margin-left: 0;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem
}

.footer-adress {
    color: #fff;
    line-height: 1.5rem;
}

.footer-ul {
    padding-left: 0;
}

.footer-ul li {
    margin-bottom: 0.8rem;
    padding-left: 0;
}

.footer-ul hr {
    width: 8rem;
    margin: 1.3rem 0;
}

.footer-dno {
    display: grid;
    grid-template-columns: 1fr 120px;

}

.footer-ikone {
    text-align: right
}


@media screen and (max-width: 920px) {

    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .footer-grid :first-child {
        grid-column: 1 / -1;
    }

}

@media screen and (max-width: 768px) {

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

}


/* RESPONSIVE MOBILE */
@media screen and (max-width: 480px) {

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .dogadjanja-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

}



/* Navigation */

nav .topnav {
    /*background-color: #333;*/
    overflow: hidden;
}

/* Style the links inside the navigation bar */
nav .topnav a {
    float: right;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 0.9rem 2rem;
    text-decoration: none;
    font-size: 1rem;
    background-color: rgba(0, 0, 0, 0);
    transition: 0.6s all;
}

/* Add an active class to highlight the current page */
nav .active {
    background-color: #04AA6D;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
nav .topnav .icon {
    display: none;
}

/* Dropdown container - needed to position the dropdown content */
nav .dropdown {
    float: right;
    overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
nav .dropdown .dropbtn {
    font-size: 1rem;
    border: none;
    outline: none;
    color: white;
    padding: 1rem 2rem;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: 0.6s all;
}

/* Style the dropdown content (hidden by default) */
nav .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 150;
}

/* Style the links inside the dropdown */
nav .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
nav .topnav a:hover, .dropdown:hover .dropbtn {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    transition: 0.6s all;
}

/* Add a grey background to dropdown links on hover */
nav .dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
nav .dropdown:hover .dropdown-content {
    display: block;
}

@media screen and (max-width: 1200px) {
    nav .topnav a {
        padding: 1rem 1rem;
    }

    /* Style the dropdown button to fit inside the topnav */
    nav .dropdown .dropbtn {
        padding: 1rem 1rem;
    }
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 768px) {

    nav .topnav>a {
        float: left;
        background-color: #000;
    }

    nav .topnav>a:not(:first-child), .dropdown .dropbtn {
        display: none;
        background-color: #000;
    }

    nav .topnav>a.icon {
        float: right;
        display: block;
        font-size: 1.4rem;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 768px) {
    nav .topnav.responsive {
        position: relative;
        background-color: #000;
        box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.2);
    }

    nav .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    nav .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }

    nav .topnav.responsive .dropdown {
        float: none;
    }

    nav .topnav.responsive .dropdown-content {
        position: relative;
        display: block;
    }

    nav .topnav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left;
    }
}


/* MODAL */

/* The Modal (background) */
.modal {
	display: none;
	/* Hidden by default */
	position: fixed;
	/* Stay in place */
	z-index: 1000;
	/* Sit on top */
	padding-top: 120px;
	/* Location of the box */
	left: 0;
	top: 0;
	width: 100%;
	/* Full width */
	height: 100%;
	/* Full height */
	overflow: auto;
	/* Enable scroll if needed */
	background-color: rgb(0, 0, 0);
	/* Fallback color */
	background-color: rgba(0, 0, 0, 0.4);
	/* Black w/ opacity */
}

/* Modal Content */
.modal-content {
	position: relative;
	background-color: #fefefe;
	margin: auto;
	padding: 0;
	border: 1px solid #888;
    border-radius: 0.5rem;
	width: 35rem;
	max-width: 80%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
	from {
		top: -20rem;
		opacity: 0
	}

	to {
		top: 0;
		opacity: 1
	}
}

@keyframes animatetop {
	from {
		top: -20rem;
		opacity: 0
	}

	to {
		top: 0;
		opacity: 1
	}
}

/* The Close Button */
.close {
	color: #000;
	float: right;
	font-size: 2rem;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}

.modal-header {
	padding: 0 1rem;
	color: #000;
}

.modal-body {
	padding: 0 16px;
}


/* The Modal (background) */
.modal-vendor {
	display: none;
	/* Hidden by default */
	position: fixed;
	/* Stay in place */
	z-index: 1;
	/* Sit on top */
	padding-top: 120px;
	/* Location of the box */
	left: 0;
	top: 0;
	width: 100%;
	/* Full width */
	height: 100%;
	/* Full height */
	overflow: auto;
	/* Enable scroll if needed */
	background-color: rgb(0, 0, 0);
	/* Fallback color */
	background-color: rgba(0, 0, 0, 0.4);
	/* Black w/ opacity */
}

/* Modal Content */
.modal-content-vendor {
	position: relative;
	background-color: #fefefe;
	margin: auto;
	/*top: 50%;
	transform: translateY(-50%));*/
	padding: 1rem;
	border: 1px solid #888;
	border-radius: 5px;
	width: 370px;
	max-width: 80%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s
}



/*CONTACT FORM 7 */
.wpcf7-list-item-label {
	display: none;
}