@charset "utf-8";
html, body{font-family: 'Nunito', sans-serif; font-weight:400; color: #1f1f1f; font-size:16px; line-height:1.4; word-wrap:break-word; background:#fff;}
body.doNotScroll{overflow:hidden; height:100vh;}
*:focus {outline: none;}
h1, .h1{font-size:70px; line-height:1.2; margin: 30px 0; font-weight:700; padding:0; position:relative; color:#12a8aa;font-family: 'Nunito', sans-serif;}
h2{font-size:24px; line-height:1.2; margin:50px 0 30px 0; font-weight:500; padding:0;}
.h2{font-size:75px; line-height:1.2; margin:50px 0 30px 0; font-weight:900; padding:0; text-align: center; color:#12a8aa; font-family: 'Nunito', sans-serif;}
h3{font-size:20px; line-height:1.2; margin:50px 0 30px 0; font-weight:400; padding:0;}
a{text-decoration:none; color:inherit; outline:none;}
p{margin:0 0 20px 0;}
p:last-child{margin:0;}
textarea{resize:none;}
input:focus {outline:none;}
.center {text-align: center;}
.mobile {display: none;}
.transition2s{transition:all 0.2s linear 0s; -webkit-transition:all 0.2s linear 0s; -moz-transition:all 0.2s linear 0s; -o-transition:all 0.2s linear 0s; -ms-transition:all 0.2s linear 0s;}
.transition3s{transition:all 0.3s linear 0s; -webkit-transition:all 0.3s linear 0s; -moz-transition:all 0.3s linear 0s; -o-transition:all 0.3s linear 0s; -ms-transition:all 0.3s linear 0s;}
.pageContent{margin-bottom: 100px;}
.pageContent a{text-decoration: underline; font-weight: 500;}
.pageContent a:hover{font-weight: 700;}
.left{float:left;clear:both;}
.right{width:50%;float:right;clear:right;}

header.small{height: 90px; transition:all 0.3s linear 0s; -webkit-transition:all 0.3s linear 0s; -moz-transition:all 0.3s linear 0s; -o-transition:all 0.3s linear 0s; -ms-transition:all 0.3s linear 0s;-webkit-box-shadow: 10px -8px 41px 0px rgb(0 0 0 / 53%); -moz-box-shadow: 10px -8px 41px 0px rgba(0,0,0,0.53); box-shadow: 10px -8px 41px 0px rgb(0 0 0 / 53%);}
header.small .headerLogo{padding:5px 0 0 0}
header.small .headerLogo p{font-size: 18px; display: inline-block;}
header.small .lngHolder{top: 28px;}
header.small .headerLogo img {width: 100px; position: relative; left: 3%; transform: translatex(-50%);}

header{position: fixed; background: #FCFBF9; width: 100%;z-index: 99; height: 160px;}
.header-behind{padding:79px;}
header .headerTop{padding:10px 0;}
header .headerLogo {max-width: 20%; width: 250px; margin: 0; display: inline-block; padding: 20px 20px 20px 0;}
header .headerLogo img{width: 150px; margin: 0 auto;}
header .headerLogo p {color: #00318c; font-weight: 800; font-size: 22px; text-align: center;}
header .headerLogo p span {color: #d01d0c;}
#dog, #cat, #support ,#home-contact {margin: 100px 0 0 0;}

/*.mainNav{list-style:none; width: 100%; padding: 1px 0; -ms-flex: 0 0 calc(100% - 340px); flex: 0 0 calc(100% - 340px); max-width:calc(100% - 340px); margin:0; display:block; text-align:center;}*/
.mainNav {list-style: none; width: auto; padding: 1px 0; margin: 0; display: inline-block; text-align: center; top: 50%; transform: translateY(-50%); position: absolute;color:#000; height: 40px;}
.mainNav>li{float:none; margin:0 5px 0 0; display:inline-block; position:relative;}
.mainNav>li>a{padding:22px 2px; text-transform:uppercase; font-size:16px; font-weight:400; font-size: 13.5px;}
.mainNav>li>i{font-size: 22px;}
.mainNav>li>a:hover{color:#1da650;}
.mainNav>.homeNav{display:inline-block;}
.mainNav>.homeNav .icon{font-size: 22px;}
.mainNav .dropdown{position: absolute; left: 0; min-width: 230px; padding: 12px 15px; background:#fff; z-index: 5; display: block; border-radius: 5px; margin-top:20px; visibility: hidden; opacity: 0; text-align: left; transform: translate3d(0,30px,0); box-shadow: 0 4px 20px 0 rgba(0,0,0,.1); transition: .35s all cubic-bezier(.65,.05,.36,1); list-style:none;}
.mainNav .dropdown>li{}
.mainNav .dropdown>li>a{padding:11px 5px; border-bottom: 1px solid rgba(196,196,196,.5); display:block; white-space: nowrap; font-size: 16px; line-height: 1;}
.mainNav .dropdown>li:last-child>a{border:none;}
.mainNav .dropdown>li:hover>a{color:#1da650; background:#f2f2f2;}
.mainNav>li.focus .dropdown{opacity: 1; visibility: visible; transform: translate3d(0,0,0);}
.lngHolder{-ms-flex: 0 0 100px; flex: 0 0 100px; max-width: 100px; margin: 0; display: block;}
.lngHolder {list-style: none; padding: 1px 0; margin: 0; text-align: center; top: 63px; position: relative; color: #000; z-index: 1; float: right;}

.main-menu-list>li:hover {background: linear-gradient(180deg,#f48638,#ffae19); color: #fff;}

.banner{width:100%;background-image:url("../img/main-banner-image.jpg");background-repeat:no-repeat;background-size:cover;height:75vh;background-position-y: 50%;}
.banner .banner-text-holder {position: absolute; top: 70%;}
.banner .title-holder {position: absolute; top: 40%; font-size: 60px; font-weight: 900; text-transform: uppercase;}
.first-banner-button{padding:10px 30px;background: #f9b256;color:#000;border-radius:5px;font-size:20px;}
.first-banner-button i{font-size: 24px; margin-right: 10px;position: relative; top: 2px;}

#dog .box-dog>.h2{color: #f9b256; margin-top: 0;}
#dog .box-dog .undertitle{max-width: 70%; margin: 0 auto 20px auto;}
#dog .box-dog .list-dogs{display: flex;}
#dog .box-dog .list-dogs .dog-item {width: calc(calc(100% - 30px)/4); display: block; float: left; margin: 0 5px; overflow: hidden;}
#dog .box-dog .list-dogs .dog-item img:hover {transform: scale(1.2);}
#dog .box-dog .list-dogs .dog-item:first-child {margin-left: 0;}
#dog .box-dog .list-dogs .dog-item:last-child {margin-right: 0;}
#dog .box-dog .buttonHolder {display: table; margin-top: 40px; margin-left: auto; margin-right: auto;}
#dog .box-dog .button {font-size: 18px; font-weight: 900; background: #f9b256; border-radius: 5px; padding: 15px 25px;}

#cat .box-cat>.h2{color: #af60a2; margin-top: 0;}
#cat .box-cat .undertitle{max-width: 70%; margin: 0 auto 20px auto;}
#cat .box-cat .list-cats{display: flex;}
#cat .box-cat .list-cats .cat-item {width: calc(calc(100% - 30px)/4); display: block; float: left; margin: 0 5px; overflow: hidden;}
#cat .box-cat .list-cats .cat-item img:hover {transform: scale(1.2);}
#cat .box-cat .list-cats .cat-item:first-child {margin-left: 0;}
#cat .box-cat .list-cats .cat-item:last-child {margin-right: 0;}
#cat .box-cat .buttonHolder {display: table; margin-top: 40px; margin-left: auto; margin-right: auto;}
#cat .box-cat .button {font-size: 18px; font-weight: 900; background: #af60a2; border-radius: 5px; padding: 15px 25px; color: #fff;}

#support {background: #eeeeee; padding:30px 0}
#support .box-program-support{display:flex;width:100%;}
#support .box-program-support .division-program-support{width: calc(calc(100% - 40px)/2); margin: 0 20px;}
#support .box-program-support .division-program-support:first-child{margin-left: 0;}
#support .box-program-support .division-program-support:last-child{margin-right: 0;}
#support .program-suport-button{border-radius:5px;background: #86c06a;border:none;color:#FFFFFF;text-align:center;font-size:24px;padding:10px 30px;transition:all 0.3s;position:absolute;bottom:30px;}
#support .program-suport-button span{cursor:pointer;display:inline-block;position:relative;transition:0.5s; font-weight: 900;}
#support .program-suport-button span:after{content:'\00bb';position:absolute;opacity:0;top:0;right:-20px;transition:0.5s;}
#support .program-suport-button:hover span{padding-right:25px;}
#support .program-suport-button:hover span:after{opacity:1;right:0;}

#adopted {background: #eeeeee; padding:30px 0; margin-top: 50px;}
#adopted h2{font-weight: 500; color: #1f1f1f;}
#adopted .box-program-adopted{display:flex; width: calc(calc(100% - 40px)/5); float: left;margin: 0 5px; text-align: center;}
#adopted .box-program-adopted:first-of-type{margin-left: 0;}
#adopted .box-program-adopted:last-of-type{margin-right: 0;}
#adopted .box-program-adopted .title {font-size: 28px; font-weight: 600; margin-bottom: 10px;}
#adopted .program-suport-button{border-radius:5px;background: #86c06a;border:none;color:#FFFFFF;text-align:center;font-size:24px;padding:10px 30px;transition:all 0.3s;position:absolute;bottom:30px;}
#adopted .program-suport-button span{cursor:pointer;display:inline-block;position:relative;transition:0.5s; font-weight: 900;}
#adopted .program-suport-button span:after{content:'\00bb';position:absolute;opacity:0;top:0;right:-20px;transition:0.5s;}
#adopted .program-suport-button:hover span{padding-right:25px;}
#adopted .program-suport-button:hover span:after{opacity:1;right:0;}

#home-contact .image-holder{float: left; width: 50%;}
#home-contact .info-holder{width: 50%; float: left;}
#home-contact .info-holder h2 {text-align: left; color:#000; font-weight: 600;}
#home-contact .info-holder div {float: left; width: 50%;}
#home-contact .info-holder div h3{font-weight: 500; margin: 0 0 10px 0 ;font-size:24px;}
#home-contact .image-holder img {width: auto;}
/* Contact */
.borderLeft{border-left:1px solid #ca7234; padding:0 0 0 20px; color: #ffffff;}
h1.titleContact {font-size: 48px; font-weight: 700; line-height: 56px; color: #ffffff; margin: 50px 0; text-transform: uppercase; position: relative; z-index: 1;}
#contactForm{width:50%; margin:0 0 70px 0; float: left;}
#contactForm input, #contactForm textarea{border:1px solid #01308c;color:#01308c;font-size:14px;line-height:30px;margin:0 0 15px 0;outline:0;padding:10px;resize:none;width:100%;background:#fff}
#contactForm button{color:#fff; background:#01308c; border:none; line-height:20px; font-size:14px; padding:10px 50px; width:100%; text-transform:uppercase; font-weight:400;}
#contactForm button .fas{margin:0 10px 0 0;}
#mail_fail,#mail_success,#mail_success_footer,#mail_fail_footer{display:none;padding:15px 0;margin:20px 0 0 0;float:right;font-size:13px;line-height:12px;border-radius:4px; width:100%; text-align:center;}
#mail_success,#mail_success_footer{color:#044406;background-color:#B7FBB9}
#mail_fail, #mail_fail_footer{color:#D8000C;background-color:#FFBABA}
.pageContactImg{padding:50px 0; background: linear-gradient( rgba(0,0,0,0.5), rgba(0, 0, 0, 0.5) ),url(../img/bg.jpg) no-repeat center center fixed;}
p.title2 {font-size: 36px; color: #ffffff; margin-bottom: 55px;}
#contactForm input:focus, #contactForm textarea:focus{border-color: #01308c;}
input:focus::placeholder, input:focus::placeholder, textarea:focus::placeholder {color: transparent;}

/*Iskustva usvojitelja*/
.xp-single{padding:20px;border-radius:25px;overflow:auto;margin-bottom:30px;}
.xp-single:hover{box-shadow:1px 1px 10px 5px rgb(40 25 36 / 20%);cursor:pointer;opacity:80%;transition:0.1s ease-in-out;}
.xp-image{width:50%;border-top-left-radius:5px;border-bottom-left-radius:5px;float:left;height:360px;background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;}
.xp-info{border-top-right-radius:5px;border-bottom-right-radius:5px;display:inline-block;width:50%;top:19px;border:2px solid #f58538;left:-60px;background-color:white;padding:10px;position:relative;}
.xp-title, .happy-title, .adopt-title, .exp-cel-title, .exp-title {font-size:20px;font-weight:600;margin:10px 0;}
.page-xp-image{height:300px;background-size:cover;background-repeat:no-repeat;background-position:center;margin-bottom:20px;}
.page-xp-owners{font-size:20px;font-weight:500;}

.happy-holder, .exp-cel-holder, .exp-holder{display:flex;flex-wrap:wrap;align-items:flex-start;}
.happy-link, .exp-cel-link, .exp-link{width:calc(calc(100% - 40px)/5);margin: 4px;}
.happy-single, .exp-cel-single, .exp-single{display:flex;flex-direction:column;margin:0 5px 25px;}
.happy-single:hover, .exp-cel-single:hover, .exp-single:hover{box-shadow:1px 1px 10px 5px rgb(40 25 36 / 20%);cursor:pointer;transition:0.1s;}
.happy-single:hover img, .exp-cel-single:hover img, .exp-single:hover img{transform:scale(1.2);transition:0.5s;}
.happy-image-div, .exp-cel-image-div, .exp-image-div{overflow:hidden;}
.happy-info, .exp-cel-info, .exp-info{width:100%;text-align:center;}

.exp-cel-owners {font-weight: 600;margin-bottom: 10px;}

.advices-holder{display:flex;flex-wrap:wrap;align-items:flex-start;}
.advices-link{width:calc(calc(100% - 40px)/5);margin: 4px;}
.advices-single{display:flex;flex-direction:column;margin:0 5px 25px;}
.advices-single:hover{box-shadow:1px 1px 10px 5px rgb(40 25 36 / 20%);cursor:pointer;transition:0.1s;}
.advices-single:hover img{transform:scale(1.2);transition:0.5s;}
.advices-image-div{overflow:hidden;}
.advices-info{width:100%; text-align: center;}
.advices-title{font-weight: 600; font-size: 20px;}
.advices-single{min-height: 230px;}
.page-advices-image{
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height: 550px;
	margin-bottom: 30px;
	width: 50%;
    float: left;
    margin-right: 25px;
}

.adopt-holder{display:flex;flex-wrap:wrap;align-items:flex-start;}
.adopt-link{width:calc(calc(100% - 40px)/5);margin: 4px;}
.adopt-single{display:flex;flex-direction:column;margin:0 5px 25px;}
.adopt-single:hover{box-shadow:1px 1px 10px 5px rgb(40 25 36 / 20%);cursor:pointer;transition:0.1s;}
.adopt-single:hover img{transform:scale(1.2);transition:0.5s;}
.adopt-image-div{overflow:hidden;}
.adopt-info{width:100%;text-align:center;}

.xp-button-holder{border-radius:20px;background: linear-gradient(180deg,#f48638,#ffae19);border:none;color:#FFFFFF;text-align:center;font-size:24px;padding:10px 30px;transition:all 0.5s;}
.xp-button-holder span{cursor:pointer;display:inline-block;position:relative;transition:0.5s;}
.xp-button-holder span:after{content:'\00bb';position:absolute;opacity:0;top:0;right:-20px;transition:0.5s;}
.xp-button-holder:hover span{padding-right:25px;}
.xp-button-holder:hover span:after{opacity:1;right:0;}

.content {text-align: justify;line-height: 1.5;font-size: 18px;margin-top: 65px;display: flow-root;}


/* Paginacija */
.justify-content-center{-webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important;}
.pagination{display: -webkit-box; display: -ms-flexbox; display: flex; padding-left: 0; list-style: none; border-radius: .25rem;}
.page-item {padding: 10px;}
.page-link {position: relative; display: block; padding: .5rem .75rem; margin-left: -1px; line-height: 1.25; background-color: #fff; border:1px solid #d6d6d6;}
.page-item .page-link {outline: initial !important; box-shadow: none !important; line-height: 1.3; min-width: 38px; text-align: center; height: 38px; padding: .55rem 0; cursor: pointer; border-radius: 50%; text-decoration: none;}
.page-link {background-color: transparent; border-color: transparent;}
.page-item.active .page-link {background: transparent; background-color:#d01d0c; color:#fff;}

.pageBannerHolder {margin: 0; height: 300px; background-position: center; background-size: cover;}

.home-adopt-img{display: flex; justify-content: space-between;}
.home-adopt-img>img{width: 49%}
/* GALERIJA-ISKUSTVA USVOJITELJA*/
.gallery-holder{overflow: hidden; padding: 25px 0;}
.gallery-single{ width: 24%; float: left; height:400px; margin: 0 1.3333% 1.3333% 0; background-size: cover; background-position: center; background-repeat: no-repeat;}
.gallery-single:nth-child(4n){margin: 0 0 1.3333% 0;}


/*Kontakt*/
#contactForm {width: 50%;margin-top: 50px;float: right;}
.contact-holder {width: 50%;display: inline-block;}

footer {padding: 50px 0; background-color: #fbfbfb; box-shadow: -5px 4px 10px rgb(0 0 0 / 50%);}
footer h2, footer .h2, #support h2, .home-contact h2{margin: 0;}
footer .footer-contact{margin: 0;}
.footer-social div {width: 33.333%; float: left; padding: 0 35px;}
.footer-social div:nth-child(3n) {padding: 0;}
.footer-social div:nth-child(2n) {padding-left: 0;}
.footer-img img:nth-child(1){width: 200px; margin: 0 auto;}
.footer-img img:nth-child(2){width: 100px; margin: 0 auto; padding-top: 20px;}
footer ul{padding-left: 17px;}
footer li{margin-bottom:5px;}
footer .title{border-bottom:3px solid #1da650; font-size: 18px; font-weight: 600;}
#backToTop{bottom:20px;right:20px;cursor:pointer;display:none;height:50px;position:fixed;width:50px;border-radius:5px;font-size:20px;line-height:50px;text-align:center;z-index:100;color:#fff;background: linear-gradient(180deg,#42a5f5,#2196f3);border:1px solid #fff;}