﻿
*  {
-webkit-appearance: none;
margin:0;
padding:0;
outline:none;
box-sizing:border-box;
color:#333;
}

html {
height: 100%;
overflow-x:hidden;
overflow-y:scroll;
}

body {
font-family: 'Roboto', sans-serif;
background:#fff;
overflow-x: hidden;
}

a { text-decoration:none; color:#888; }
a:hover { color:#222; }

img { border:none; }
.left { float:left; }
.right { float:right; }
.clear { clear:both; }
.hide { position: absolute; top: -9999px; left: -9999px; }

.container, .headerContainer {
width:100%;
max-width:1450px;
padding:0 20px;
margin:0 auto;
position:relative;
}

.container {
display: flex;
flex-wrap: wrap;
gap: 5%;
}

.center {
text-align:center;
}

#contentWrapper {
background:#fff;
padding:0 0 80px;
}

.material-symbols-outlined {
vertical-align:middle;
line-height:inherit;
}


/* navigation */

nav.navigation{
text-align:center;
}

nav.navigation {
padding:30px 0 0;
}

nav.navigation .page-numbers, nav.navigation.single a{
display:inline-block;
font-size:15px;
line-height:32px;
margin:0 5px;
font-weight:400;
}

nav.navigation a.page-numbers, nav.navigation.single a  {
color:#888;
}

nav.navigation a.page-numbers:hover, nav.navigation.single a:hover {
color:#222;
}

nav.navigation span.page-numbers.current {
color:#222;
font-weight:900;
}

nav.navigation span.page-numbers.dots {
background:none;
}

nav.navigation.single {
margin:80px 0 0;
}

nav.navigation.single .navigationLeft {
text-align:left;
float:left;
}

nav.navigation.single .navigationRight {
text-align:right;
float:right;
}

nav.navigation.single a{
margin:0;
}


/* ----- sidebar start ----- */

header a#menu-toggle {
display:none;
color:#000;
position:absolute;
line-height:100px;
top:0;
left:0;
font-size:24px;
padding:0 30px;
z-index:9999;
}

/* Toggle Styles */

#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

#wrapper.toggled {
padding-left: 250px;
}

#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #fff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
width: 250px;
}

#page-content-wrapper {
width: 100%;
position: absolute;
padding: 0;
}

#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}

/* Sidebar Styles */

.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}

.sidebar-nav li a {
border-bottom:1px solid #eee;
color:#000;
font-size:14px;
line-height:50px;
padding:0 15px;
display:block;
background:#fff;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}

.sidebar-nav li a.has-children:after {
font-family: 'FontAwesome';
content:"\f107";
margin-left:10px;
color:#ccc;
}

.sidebar-nav li ul {
padding-left:10px;
}

.sidebar-nav li {
list-style-type:none;
}


/* ----- sidebar end ----- */


/* Header */

header {
background:#f5f5f5;
}


header a#headerLogo {
display:block;
height:100px;
width:400px;
padding:20px 0;
background-image:url(../img/header-logo.png);
background-repeat:no-repeat;
background-size:contain;
background-position:center;
}


.headerRainbow {
background: rgb(229,26,75);
background: linear-gradient(90deg, rgba(229,26,75,1) 0%, rgba(254,204,0,1) 25%, rgba(176,203,31,1) 50%, rgba(0,141,210,1) 75%, rgba(229,26,75,1) 100%); 
height:10px;
}
/* header nav */


header nav {
position:absolute;
right:20px;
z-index: 8888;
bottom:-10px;
}
header nav ul.headerMenu {
display:flex;
flex-wrap:nowrap;
align-items:center;
gap:25px;
list-style:none;
}

header nav ul.headerMenu li {
line-height:40px;
font-size:14px;
font-weight:400;
text-transform:uppercase;
position:relative;
}

header nav ul.headerMenu>li {
padding:0 0 40px;
height: 80px;
}

header nav ul.headerMenu li a {
color:#444;
display:block;
}

header nav ul.headerMenu li a:hover {
color:#36a09b;
display:block;
}

header nav ul.headerMenu li a .material-symbols-outlined {
font-size:18px;
line-height:40px;
}
header nav ul.headerMenu li a:hover .material-symbols-outlined {
color:#36a09b;
}

header ul.headerMenu li .sub-menu-wrapper {
}

header ul.headerMenu li ul.sub-menu {
position:absolute;
top:72px;
left:0;
background:#111;
list-style:none;
padding:10px 20px;
min-width: auto;
opacity:0;
display:none;
}

header ul.headerMenu li:hover ul.sub-menu {
opacity:1;
display:block;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}


header ul.headerMenu li ul.sub-menu li {
white-space:nowrap;
}

header ul.headerMenu li ul.sub-menu li a {
color:#ccc;
}

header ul.headerMenu li ul.sub-menu li a:hover {
color:#36a09b;
}

/* general */

section {
width: 100%;
padding:60px 0;
}

section p {
margin: 0 0 40px;
font-size:16px;
line-height:24px;
font-weight:300;
}

article ul  {
margin: 0 0 40px 1em;
font-size:16px;
line-height:24px;
font-weight:300;
}

section h3,
section h1 {
margin: 0 0 60px;
font-size:40px;
line-height:44px;
font-weight:900;
font-family:"Lora", serif;
}

section h2 {
margin: 0 0 40px;
font-size:30px;
line-height:30px;
font-weight:900;
font-family:"Lora", serif;
}


.titleWrapper {
position:relative;
width:100%;
}

/* banner */

.homeBanner {
padding:0  0 40px;
background:#f5f5f5;
}

.homeBanner .banner-box {
width:100%;
height:500px;
}

.homeBanner .banner-box div {
width:100%;
height:500px;
border-radius:15px;
background-position:center;
background-size:cover;
display:flex;
align-items:center;
padding:0 100px;
}

.homeBanner .banner-box div p {
font-size:50px;
font-weight:900;
color:#fff;
width:50%;
line-height:70px;
margin:0;
font-family:"Lora", serif;
}

.homeBanner .banner-box div p strong {
background:#36a09b;
color:#fff;
padding:0 20px;
margin: 0 0 10px;
display: inline-block;
border-radius: 3px;
box-shadow:10px 10px 0 0 #222;
}

/* News home */
.homeLatestPosts {
background:#fff;
}

a.linkOlderPosts {
font-size:16px;
color:#888;
position:absolute;
right:0;
font-weight:400;
font-family:"Lora", serif;
text-transform:none;
}

a.linkOlderPosts span {
font-size:16px;
vertical-align:middle;
margin-left:5px;
color:#888;
}

a.linkOlderPosts:hover {
color:#333;
}

a.linkOlderPosts:hover span {
color:#333;
}


/* donations */

.gradientYellowRed {
 background: rgb(254,204,0);
background: linear-gradient(90deg, rgba(254,204,0,1) 0%, rgba(229,26,75,1) 100%); 
}
 .fiftyFiftyWrapper {
display:flex;
align-items:stretch;
width:100%;
}

.fiftyFiftyWrapper .fiftyFiftyItem {
flex-basis:50%;
padding:0 80px;
text-align:center;
}

.fiftyFiftyWrapper .fiftyFiftyItem.homeDonations {
border-left:5px dotted rgba(255,255,255,0.2);
}

.fiftyFiftyWrapper .fiftyFiftyItem h3 {
color:#fff;
font-size:40px;
margin:40px 0;
font-family:"Lora";
text-transform:none;
}

.fiftyFiftyWrapper .fiftyFiftyItem>span {
color:rgba(255,255,255,0.2);
font-size:150px;
}

a.globalButton {
line-height:40px;
display:inline-block;
background:#fff;
padding:0 20px;
border-radius:20px;
font-size:18px;
font-weight:900;
text-transform:uppercase;
}


.fiftyFiftyWrapper .fiftyFiftyItem.homeVolunteering a {
color:#f79c14;
}

.fiftyFiftyWrapper .fiftyFiftyItem.homeDonations a {
color:#ec4a37;
}

a.globalButton:hover {
background:#333;
color:#fff !important;
}



/* Blog list */

.homeLatestPosts {
}

.postArchive {
display:flex;
align-items:stretch;
gap:2%;
flex-wrap:wrap;
justify-content:start;
}

.postArchive .postArchiveItem {
flex-basis:32%;
max-width:32%;
background:#eee;
border-radius:15px;
padding:20px;
position:relative;
flex-shrink:1;
flex-grow:1;
}

.postArchive .postArchiveItem a {
display:block;
}


.postArchive .postArchiveItem .postArchiveItemThumbnail  {
width:100%;
height:auto;
aspect-ratio:4 / 3;
background-position:center;
background-size:cover;
border-radius:3px;
overflow:hidden;
margin:0 0 20px;
}

.postArchive .postArchiveItem h3  {
font-size:24px;
line-height:40px;
color:#36a09b;
font-weight:600;
margin:0 0 10px;
text-transform:none;

}

.postArchive .postArchiveItem h3 a {
color:#36a09b;
}

.postArchive .postArchiveItem h3 a:hover {
color:#333;
}

.postArchive .postArchiveItem a.more-link {
line-height:40px;
display:inline-block;
color:#fff;
background:#36a09b;
padding:0 20px;
border-radius:20px;
font-size:18px;
font-weight:300;
}

.postArchive .postArchiveItem a.more-link:hover {
background:#333;
}

.postArchive .postArchiveItem .postDate {
position:absolute;
bottom:20px;
right:20px;
font-size:14px;
font-family:"Lora", serif;
color:#888;
}



/* blog post */

article {
width:100%;
}

article .postThumbnail img {
max-width:100%;
}

article .postThumbnail img {
max-width:100%;
}

article h1 {
}


/* aside box */

aside {
background:#eee;
border-radius:15px;
padding:20px 20px 10px;
margin:0 0 40px;
}

aside h3 {
font-size:30px;
margin:0 0 20px;
}

aside ul {
list-style:none;
margin:0;
}


aside ul li {
display:flex;
align-items:start;
font-size:16px;
line-height:24px;
font-weight:300;
margin:0 0 10px;
}

aside ul li span {
font-size:16px;
line-height:24px;
color:#36a09b;
margin-right:10px;
}

aside.map {
padding:0;
}

aside.map iframe {
width:100%;
border:none;
border-radius:15px;
height:400px;
}

/* social */

aside.asideSocialIcons {
padding-bottom:20px;
}

aside.asideSocialIcons ul li a {
color:#fff;
font-size:24px;
}

aside.asideSocialIcons ul li a svg{
fill:#fff !important;
}


/*List*/

.contentCategoryList {
display: flex;
flex-wrap: wrap;
gap:2%}

.contentCategoryList article {
flex-basis:31.99999%;
max-width:31.99999%;

}

.contentCategoryList.grid article  {
flex-basis:31.99999%;
max-width:31.99999%;
background:#f5f5f5;
border-radius:3px;
padding:20px;
margin: 0 0 30px;
}

.contentCategoryList article h2 {
font-size: 20px;
line-height: 26px;
box-sizing: border-box;
padding:10px 0 0;
height:62px;
overflow:hidden;
font-weight:600;
} 


.contentCategoryList article h2 a {
color:#222;
} 

.contentCategoryList.grid article h2 {
padding:20px 0  0;
height:72px;
} 

.contentCategoryList article h2 a:hover {
color:#888;
} 

.contentCategoryList article img {
margin-bottom:0;
}
.contentCategoryList.grid article img {
border-radius:3px;
}

.contentCategoryList article .entryContent p {
margin: 10px 0 20px;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
display: -webkit-box;
display: inline
}


.contentCategoryList article .entryMeta {
border-bottom:none;
padding:10px 0;
}

.contentCategoryList article .entryContent {
padding-bottom:50px;
}

.contentCategoryList.grid article .entryContent {
padding-bottom:0;
}

.contentCategoryList article .entryHeader {
	padding: 0 0 20px;
line-height:15px;
}

.contentCategoryList article .entryHeader .entryCategory {
top: -10px;

}

.contentCategoryList.grid article .entryHeader {
display:none;}


/* comments */

#comments {
border-top:1px solid #ddd;
font-size:15px;
font-weight:400;
}

#comments {
border-top:1px solid #ddd;
padding:30px 0 0;
margin:-30px 0 0;
}

#comments h3 {
margin: 0 0 30px;
font-size: 24px;
font-weight: 600;
}


#comments h3 small {
text-transform:none;
display:block;
font-size:15px;
margin:30px 0;
font-weight:400;
}

#comments ul {
list-style:none;
}

#comments ul.comment-list {
margin:0 0 30px;
}

#comments ul.comment-list p {
padding:0 0 30px;
display:block;
}

#comments ul.comment-list li {
padding:30px 0;
border-bottom:1px solid #ddd;
}

#comments ul.children {
margin:30px 0 0;
padding:0 30px;
border-left:5px solid #f5f5f5;
border-right:5px solid #f5f5f5;
border-bottom:5px solid #f5f5f5;
}

#comments ul.children li {
padding:30px 0;
border-top:1px solid #eee;
border-bottom:none;
}

#comments .comment-author  {
display:inline-block;
}

#comments  em.comment-awaiting-moderation {
display: inline-block;
border-radius: 12px;
background: #222;
color: #fff;
font-size: 12px;
line-height: 20px;
padding: 0 9px;
margin-left: 5px;
}

#comments .comment-author img.avatar {
border-radius:25px;
display:block; 
float:left;
margin:0 20px 0 0;
}

#comments .comment-author cite {
font-style:normal;
line-height:25px;
font-size:18px;
}

#comments .comment-author cite a {
color:#222;
}

#comments .comment-author span.says {
display:none;
}


#comments .comment-meta  {
display:block;
line-height:25px;
padding:0 0 0 70px;
position:relative;
top:-25px;
color:#888;
}

#comments .comment-meta *  {
display:inline-block;
}

#comments form label {
display:block;
padding:0 0 8px;
color:#888;
}

#comments form p {
margin:0 0 30px;
}

#comments form input[type=text], #comments form textarea {
display:block;
width:100%;
font-family:Segoe UI, serif;
padding:0 10px;
line-height:40px;
border:1px solid #ddd;
font-size:15px;
}

#comments form input[type=submit] {
font-family:Segoe UI, serif;
padding:0 20px;
line-height:40px;
border:none;
border-radius:20px;
color:#fff;
background-color:#222;
font-size:15px;
cursor:pointer;
}

#comments form input[type=submit]:hover {
background-color:#444;
}

/* Kontakt */

.wpforms-container.contactForm label {
display:block;
padding:0 0 8px;
color:#888;
}

.wpforms-container.contactForm input[type=text], .wpforms-container.contactForm input[type=email], .wpforms-container.contactForm textarea {
display:block;
width:100%;
padding:0 10px;
line-height:40px;
border:1px solid #ddd;
font-size:16px;
margin:0 0 20px;
font-family: 'Roboto', sans-serif;
}

.wpforms-container.contactForm button[type=submit] {
border:none;
font-size:18px;
cursor:pointer;
line-height:40px;
color:#fff;
background:#36a09b;
padding:0 20px;
border-radius:20px;
font-weight:300;
font-family: 'Roboto', sans-serif;

}

.wpforms-container.contactForm button[type=submit]:hover {
background-color:#444;
}
.wpforms-container.contactForm .wpforms-recaptcha-container {
margin:0 0 20px;
}

/* Search */

h2.searchResultTitle {
display:block;
font-size:15px;
font-weight:400;
line-height:24px;
padding:10px 0;
text-align:center;
color:#222;
border:1px solid #ddd;
margin:0 0 36px;
}

.searchNoResult {
border:1px solid #ddd;
padding:30px 30px 0;
}

.searchNoResult p {
font-size:15px;
font-weight:400;
line-height:24px;
margin:0 0 30px;
}
.searchNoResult p {
font-size:15px;
font-weight:400;
line-height:24px;
margin:0 0 30px;
}
.searchNoResult p a {
color:#888;
}

.searchNoResult p a :hover{
color:#222;
}

.searchNoResult .search-wrap {
margin:0 0 30px;
}


/* footer */


.siteFooter {
background:#111;
color:#ccc;
padding:60px 0;
text-align:center;
font-size:13px;
line-height:13px;
}


/* začasno skrito*/
.cat-item-21 {display:none;}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 720px) {
	.contentLeft {
	float:none;
	width:100%;
	padding:0 20px;
	}

	.contentRight {
	width:100%;
	float:none;
	padding:80px 20px 0;
	}

    .headerBar {display:none;}

    header #headerLogo {
    width:40%;
    padding:30px 0;
    }
	
	header a#menu-toggle {
    display:block;
    }
	
	.entryHeader h2 {
	font-size: 24px;
	line-height: 30px;
	}	
	
	.entryFooter {
	padding: 0 20px 60px;
	}
	
	nav.navigation {
    padding: 30px 20px 0;
	}
	
	.siteFooter {
    line-height: 23px;
	}
	
	.entryLeaveComment {
    float: none;
    display: block;
    text-align: center;
    margin: 0 0 20px;
	}

	.entryShare {
	text-align: center;
	width: 100%;
	display: block;
	}
	.container, .headerContainer, .headerBarContainer {
	padding:0;
	}

	.entryContent .youtubeGroup  figure {
	width:100%;
	}
	.entryContent .youtubeGroup  figure iframe  {
	height:280px;
	}

	.entryContent .wp-block-pullquote p    {
	font-size:1.4em;
	}
	.entryContent .wp-block-pullquote {
    padding: 50px 20px 25px;
	}
	
	.entryContent .imageQuote img {
    width: 100%;
	}
	
	.entryContent .imageQuote {
    padding: 10px;
	}

	.entryContent .imageQuote p {
	width: 100%;
	padding: 20px;
	text-align:center;
	}
	
	.entryContent h3 {
    font-size: 20px;
    line-height: 1.4;
	}
	.contentCategoryList article, .contentCategoryList.grid article {
        max-width:100%;
        flex-basis:100%;
        padding: 20px;
        margin: 0 0 5px;
	}
	
	.contentCategoryList article h2 {
    font-size: 24px;
    height: auto;
    padding: 20px 0 10px;
	}
	.contentCategoryList article .entryHeader {
	padding: 0 0 20px;
	}
	.contentCategoryList article .entryContent {
	padding-bottom:50px;
	}

    .contentCategoryList.grid article  {
    background:#fff;
    }

    .entryContent a.more-link {
    background: #f5f5f5;
    }

    .search-wrap input[type="search"] {
    background: #f5f5f5;
    }

	
}


@media(min-width:1024px) {
    #wrapper {
        padding-left: 0;
    }

    #wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 0;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 0;
    }

    #page-content-wrapper {
        padding: 0;
        position: relative;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }

	
}



@media(min-width:786px) 
and (max-width:1280px) {

    .container, .headerContainer, .headerBarContainer {
    padding:0 20px;
    }
     .headerBarContainer {
    padding:0;
    }
    .contentCategoryList article {
    flex-basis:49%;
    max-width:49%;

    }
    .headerBar nav > ul > li a {
    padding: 0 10px;
    }

}

