/*
Theme Name: Betheme
Author: Muffin group
Description: The biggest WordPress Theme ever
Theme URI: http://themes.muffingroup.com/betheme
Author URI: http://muffingroup.com
License: Themeforest Split Licence
License URI: -
Version: 17.8.5

All css files are placed in /css/ folder
*/

/*HUMANITARNA AKCIJA*/


#layerslider_1 {
	height: 570px !important;
}

.para1, .para2, .para3{ 
	text-align:center;
}

.para1 p, .para3 p{ 
	color:#f26760;
	padding:0 15%;
	font-family: "Lexend Deca", Arial, Tahoma, sans-serif;
    font-size: 16px;
    line-height: 2;
}

.para2 p{ 
	color:#61bfc1;
	padding:0 15%;
	font-family: "Lexend Deca", Arial, Tahoma, sans-serif;
    font-size: 16px;
    line-height: 2;
}

.linkovi a, .telfax p, .telfax a{ 
	color:#61bfc1;
	font-family: "Lexend Deca", Arial, Tahoma, sans-serif;
    font-size: 16px;
}

.sredstva .popupaoc-button{ 
	background-color:#f26760;
	text-align:center;
	font-family: "Lexend Deca", Arial, Tahoma, sans-serif;
    font-size: 16px;
	padding:5%;
	border-radius:10px;
}

.materijal .popupaoc-button{ 
	background-color:#61bfc1;
	text-align:center;
	font-family: "Lexend Deca", Arial, Tahoma, sans-serif;
    font-size: 16px;
	padding:5%;
	border-radius:10px;
}
.humpocetna{ 
	text-align:center;
}

.humpocetna p{ 
	font-size:30px;
	line-height:60px;
}

.humpocetna a{ 
	color:#ffffff;
}

.humpocetna button{ 
	background-color:#61bfc1;
	font-size:26px;
}

.e_vijecnica{
	text-align:center;
	animation: scaledown .4s linear;
	animation-fill-mode:forwards;
}

.e_vijecnica:hover{
	animation: scale 0.4s linear;
	animation-fill-mode:forwards;
}

@keyframes scaledown{
	0%{
		-webkit-transform:scale(1.1);
		transform:scale(1.1);
	}
	
	100%{
		-webkit-transform:scale(1.0);
		transform:scale(1.0);
	}
}

@keyframes scale{
	0%{
		-webkit-transform:scale(1);
		transform:scale(1);
	}
	
	100%{
		-webkit-transform:scale(1.1);
		transform:scale(1.1);
	}
}

.e_vijecnica img{
	width:40%;
}

.e_vijecnica h4{
	position:relative;
	font-size:24px!important;
	padding:10px;
}

.e_vijecnica h4::after{
	content:"";
	width:20%;
	height:3px;
	background-color:#FF0000;
	position:absolute;
	top:110%;
	right:40%;
}

.transparentnost{
	text-align:center;
	animation: scaledown .4s linear;
	animation-fill-mode:forwards;
}

.transparentnost:hover{
	animation: scale 0.4s linear;
	animation-fill-mode:forwards;
}

.transparentnost img{
	width:40%;
}

.transparentnost h4{
	position:relative;
	font-size:24px!important;
	padding:10px;
}

.transparentnost h4::after{
	content:"";
	width:20%;
	height:3px;
	background-color:#FF0000;
	position:absolute;
	top:110%;
	right:40%;
}

.informacije{
	text-align:center;
	animation: scaledown .4s linear;
	animation-fill-mode:forwards;
}

.informacije:hover{
	animation: scale 0.4s linear;
	animation-fill-mode:forwards;
}

.informacije img{
	width:40%;
}

.informacije h4{
	position:relative;
	font-size:24px!important;
	padding:10px;
}

.informacije h4::after{
	content:"";
	width:20%;
	height:3px;
	background-color:#FF0000;
	position:absolute;
	top:110%;
	right:40%;
}

.projekti{
	text-align:center;
	animation: scaledown .4s linear;
	animation-fill-mode:forwards;
}


.projekti:hover{
	animation: scale 0.4s linear;
	animation-fill-mode:forwards;
}

.projekti img{
	width:40%;
}

.projekti h4{
	position:relative;
	font-size:24px!important;
	padding:10px;
}

.projekti h4::after{
	content:"";
	width:20%;
	height:3px;
	background-color:#FF0000;
	position:absolute;
	top:110%;
	right:40%;
}


.savjetovanje{
	text-align:center;
	animation: scaledown .4s linear;
	animation-fill-mode:forwards;
}

.savjetovanje:hover{
	animation: scale 0.4s linear;
	animation-fill-mode:forwards;
}

.savjetovanje img{
	width:40%;
}

.savjetovanje h4{
	position:relative;
	font-size:24px!important;
	padding:10px;
}

.savjetovanje h4::after{
	content:"";
	width:20%;
	height:3px;
	background-color:#FF0000;
	position:absolute;
	top:110%;
	right:40%;
}

.servis{
	text-align:center;
	animation: scaledown .4s linear;
	animation-fill-mode:forwards;
}

.servis:hover{
	animation: scale 0.4s linear;
	animation-fill-mode:forwards;
}

.servis img{
	width:40%;
}

.servis h4{
	position:relative;
	font-size:24px!important;
	padding:10px;
}

.servis h4::after{
	content:"";
	width:20%;
	height:3px;
	background-color:#FF0000;
	position:absolute;
	top:110%;
	right:40%;
}

.dokumenti{
	text-align:center;
	animation: scaledown .4s linear;
	animation-fill-mode:forwards;
}

.dokumenti:hover{
	animation: scale 0.4s linear;
	animation-fill-mode:forwards;
}

.dokumenti img{
	width:40%;
}

.dokumenti h4{
	position:relative;
	font-size:24px!important;
	padding:10px;
}

.dokumenti h4::after{
	content:"";
	width:20%;
	height:3px;
	background-color:#FF0000;
	position:absolute;
	top:110%;
	right:40%;
}

.btn{
	display:inline;
	background-color:#e91e63;
	text-transform:uppercase;
	border-radius:10px!important;
}


.btn1{
	display:inline;
	background-color:#61bfc1;
	text-transform:uppercase;
	border-radius:10px!important;
}

@media only screen and (max-width:770px){
	.linkovi, .telfax, .sredstva, .materijal{ 
		text-align:center;
	}
}

@media (min-width: 320px) and (max-width: 400px) { 
	#layerslider_1 {
		height: 100px !important;
	}
}

@media (min-width: 401px) and (max-width: 500px) { 
	#layerslider_1 {
		height: 130px !important;
	}
}

@media (min-width: 501px) and (max-width: 600px) { 
	#layerslider_1 {
		height: 150px !important;
	}
}

@media (min-width: 601px) and (max-width: 770px) { 
	#layerslider_1 {
		height: 170px !important;
	}
}

@media (min-width: 771px) and (max-width: 1024px) { 
	#layerslider_1 {
		height: 220px !important;
	}
}

@media (min-width: 1025px) and (max-width: 1100px) { 
	#layerslider_1 {
		height: 250px !important;
	}
}

@media (min-width: 1101px) and (max-width: 1200px) { 
	#layerslider_1 {
		height: 270px !important;
	}
}

@media (min-width: 1201px) and (max-width: 1300px) { 
	#layerslider_1 {
		height: 290px !important;
	}
}

@media (min-width: 1301px) and (max-width: 1400px) { 
	#layerslider_1 {
		height: 320px !important;
	}
}

@media (min-width: 1401px) and (max-width: 1500px) { 
	#layerslider_1 {
		height: 340px !important;
	}
}

@media (min-width: 1501px) and (max-width: 1600px) { 
	#layerslider_1 {
		height: 360px !important;
	}
}

@media (min-width: 1601px) and (max-width: 1900px) { 
	#layerslider_1 {
		height: 375px !important;
	}
}