/*
	Theme name: Umem bolje 2
	Description: Specijalno namenjena tema za sajt udruzenja "Umem bolje"
	Version: 1.0
	Author: Igor Nikodijevic <igorgaj87@gmail.com>
	Tags: tema,umembolje,udruzenje,porodica,deca
	Licence: none
	Text Domain: umembolje
	Domain path: /lang
*/

* {
    box-sizing: border-box;
}

/* Add animation on load  "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

section {
	padding-top: 20px;
	padding-bottom: 30px;
	clear-fix: both;
}

.section_bg{
	padding-bottom: 25px;
	color: #1f244a;
	background: #ccffff; /* Old browsers */
	background: -moz-linear-gradient(top, #ccffff 1%, #acdcef 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ccffff 1%,#acdcef 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ccffff 1%,#acdcef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccffff', endColorstr='#acdcef',GradientType=0 ); /* IE6-9 */	
}

#top-bar{
	position: relative;
	width: 100%;
	border-top: 5px solid #96ca52;
	z-index: 999;
}

@media  (min-width : 768px ) {
	#top-bar{
		position: absolute;
	}	
	

	
}

@media  (max-width : 768px ) {
	.navbar-collapse {
		background-color: rgb(255,255,255,0.75);
	}
}



#lang {
	background-color: white;
	width: 80px;
	font-size: 1.1em;
	margin-left: 20px;
	padding: 5px 10px;
	border-bottom: 3px solid #96ca52;
}




/*NAVIGATION UNDERLINE ON HOVER*/



.navbar-nav>li>a {
	text-align: center; !important;
}

.nav>li>a:hover {
	position: relative;
}

.nav>li>a:before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 80%;
	bottom: 0;
	width: auto;
	height: 5px;
	visibility: hidden;
	background-color: orange;
	-webkit-transition: right 0.4s,background-color 0.4s;
	transition: right 0.4s,background-color 0.4s;
}

.nav>li>a:hover:before {
	right: 0;
	visibility: visible;
	background-color: #96ca52; //green
}


/*HEAD IMAGE*/

.jumbotron {
	display: block;
	position: relative !important;
	width : 100%;
	padding-top: 60%;
	margin-bottom: -20px !important;
	background-image: url("images/header_04.jpg");
	background-size: cover;
	background-position: center;
}

#hlogo {
	display: block;
	position: absolute;
	transform: translateX(10%);
	top: 25%;
	padding-top: 30%;
	width: 30%;
	background-image: url("images/logo_okrugli_podrska_ruke2.png");
	background-size: contain;
	-webkit-animation: hlogo 2s;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-direction: alternate;
	animation: hlogo 2s;
	animation-fill-mode: forwards;
	animation-direction: alternate;	
}

.hlogo {

	-webkit-animation: hlogo-inf 3s 2s infinite;
	animation: hlogo-inf 3s 2s infinite;
    -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
    animation-delay: 2s;
}



@-webkit-keyframes hlogo{
	0% {
		transform: translateX(10%) scale(0.1) rotate(180deg);
		opacity: 0;
	}
	100% {
		transform: translateX(25%) scale(1) rotate(360deg);
		opacity: 0.4;
	}
}

@keyframes hlogo{
	0% {
		transform: translateX(10%) scale(0.1) rotate(180deg);
		opacity: 0;
	}
	100% {
		transform: translateX(25%) scale(1) rotate(360deg);
		opacity: 0.4;
	}
}


@-webkit-keyframes hlogo-inf {
	0% {
		opacity: 0.4;
	}
	60% {
		opacity: 0.9;
	}
	100% {
		opacity: 0.4;
	}
}

@keyframes hlogo-inf {
	0% {
		opacity: 0.4;
	}
	60% {
		opacity: 0.9;
	}
	100% {
		opacity: 0.4;
	}
}

/*HEADINGS*/

h2 {
	margin-top: 30px;
	text-shadow: 2px 2px 2px rgba(50, 50, 50, 0.5);
}

h2 + .divider {
    margin-top: 20px;
}

.divider-default {
	background: -webkit-linear-gradient(to right, rgb(0, 255, 210) 25%, #fb00ff 120%);
	background: -o-linear-gradient(to right, rgb(0, 255, 210) 25%, #fb00ff 120%);
	background: -moz-linear-gradient(to right, rgb(0, 255, 210) 25%, #fb00ff 120%);
	background: linear-gradient(to right, rgb(0, 255, 210) 25%, #fb00ff 120%);
}

.divider {
    display: block;
    border: 0;
    font-size: 0;
    line-height: 0;
    height: 3px;
    max-width: 100px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
	margin-bottom: 20px;
}


/*MEET OUR TEAM*/

ul.row {
	list-style-type: none;
}

#person-info {
	display: hidden;
}

.team-item {
	text-decoration: none;
	list-style-type: none;
}

.team-item>h3 {
	-webkit-transition: all 1s;
	transition: all 1s;
}

.img-team {
    opacity: 1;
	width: 50%;
	margin: auto;
	backface-visibility: hidden;
	-webkit-transition: all 1s;
	transition: all 1s;
}

.img-team:hover {	
		opacity: 0.8;
		border-radius: 20%;
		filter: blur(2px);
}

.img-team:hover + h3 {
	transform: scale(1.1);
}

.box-circle {
	border-radius: 50%;
}

.box-circle2 {
	border-radius: 50%;
}

.overlay-container {
    position: relative;
}

.overlay-content {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.overlay-container:hover .img-team {
  opacity: 0.3;
}

.overlay-container:hover .overlay-content {
  opacity: 1;
}

.overlay-text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 24px;
  border-radius: 5px;
  cursor: pointer;
}

/*PROJECTS*/

.supports_logo {
	margin: 5px 10px;
	-webkit-transition: 0.2s;
	transition: 0.2s
}

.supports_logo:hover {
	transform: scale(1.1);
}

/*DONATORS*/

.img-donators {
	display: block;
	margin: auto;
	height: 160px;
	filter: grayscale(100%);
	-webkit-transition: all 0.6s;
	transition: all 0.6s; !important
}

.img-donators:hover {
	filter: grayscale(10%);
	transform: scale(1.2);
}

#donate-container {
	display: none;
	color: #864646;
	background: radial-gradient(circle,#ffd294,#8a6d3b);
	width:50%;
	min-width: 260px;
	margin: 0 auto;
	padding: 25px;
	border-radius: 10px;
	font-size: 1.3em;
	-webkit-box-shadow: 0px 5px 15px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 5px 15px 3px rgba(0,0,0,0.5);
	box-shadow: 0px 5px 15px 3px rgba(0,0,0,0.5);
}



/*COLLABORATORS*/

.slide-wrapper {
	position: relative;
	overflow: hidden;
	transform: translate3d(0, 0, 0);
}

.scroll-edge {
	position: absolute;
	top: 0;
	width: 50px;
	height: 100%;
	z-index: 999;
	background-color: red;
}

.scroll-edge-left{
	left: 0;
	background: -webkit-linear-gradient(to right, white, transparent);
	background: -o-linear-gradient(to right, white, transparent);
	background: -moz-linear-gradient(to right, white, transparent);
	background: linear-gradient(to right, white, transparent);
}

.scroll-edge-right{
	right: 0;
	background: -webkit-linear-gradient(to left, white, transparent);
	background: -moz-linear-gradient(to left, white, transparent);
	background: -o-linear-gradient(to left, white, transparent);
	background: linear-gradient(to left, white, transparent);
}

.slide-container {
	display: block;
	position: relative;
	white-space: nowrap;
	width: auto; /*2300px;*/
	height: 120px;
	padding: 20px 0;
	transform: translate3d(0, 0, 0);
	-webkit-animation: scroll-logo 15s linear infinite;	
	-webkit-animation-direction: alternate-reverse;	
	animation: scroll-logo 15s linear infinite;	
	animation-direction:alternate-reverse;
}

@-webkit-keyframes scroll-logo {
	0% {
		transform: translateX(5%);  
	}
	100% {
		transform: translateX(-110%);  
	}
}

@keyframes scroll-logo {
	0% {
		transform: translateX(5%);  
	}	
	100% {
		transform: translateX(-110%);  
	}
}

.slide-item {
	display: inline-block;
	width: auto;
	height: 100%;
	margin: 15px 15px;
	padding: 10px 20px;
	border-radius: 5%;
	background-color: lightgray;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

.slide-item:hover {
	box-sizing: border-box;
	border: 3px solid rgba(0, 0, 0, 0.5);
	transform: scale(1.2);

}

.okvir1 {
	display: block;
	width: max-content;
	margin: 0 auto;
	margin-bottom: 15px;
	padding: 15px;
	border-radius: 10px;
	text-align: center;
	background-color: rgba(0,0,0,0.1);
}

/*ADVICE*/

#advice-container, #contact-container {
	display: block;
	width: 60%;
	max-width: 360px;
	margin: 0 auto;
	margin-top: 20px;
}

.btn-advice {
	display:block;
	margin: 30px auto;
	white-space: normal !important;
}

.validate-error {
	
}



/*GALLERY*/

div.gallery {
    border: 1px solid #ccc;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

div.gallery:hover {
    border: 1px solid #777;
	-webkit-box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.5);
	-moz-box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.5);
	box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.5);
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}


.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}


/*FOOTER*/

#footer-copy {
	position: relative;
	display:block;
	width: 100%;
	padding: 20px 0px;
	color: #b7e3e6;
	background-color: #0b437b;
	text-align: center;
}

#author-container {
		display: none;
		width: 40%;		
		max-width: 400px;
		min-width: 200px;	
		margin: 25px auto;
		padding: 15px;	
		border-top: 1px dotted #b7e3e6;
}

#author-container>h4 {
	text-transform: uppercase;
}

.social-btn {
	color: #2c305d;
}

.social-btn:hover {
	transform: scale(1.1);
}


.wpcf7-submit {
    color: #fff;
    background-color: #5cb85c;;
    border: 1px solid transparent;
    display: block;
    margin: 30px auto;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;    
}




/*SCROLLBAR - Firefox and IE not support*/

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
	background-color: #F90;	
	background-image: -webkit-linear-gradient(45deg,
	                                          rgba(255, 255, 255, .2) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(255, 255, 255, .2) 50%,
											  rgba(255, 255, 255, .2) 75%,
											  transparent 75%,
											  transparent);
	background-image: linear-gradient(45deg,
	                                          rgba(255, 255, 255, .2) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(255, 255, 255, .2) 50%,
											  rgba(255, 255, 255, .2) 75%,
											  transparent 75%,
											  transparent);									  
}