@font-face {
	font-family: "Poppins Medium";
	src: url(../fonts/Poppins-Medium.ttf);
}
html {
	margin: 0;
	padding: 0;
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
	font-family: "Poppins Medium";
	font-size: 30px;
}

.container {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0 auto;
	position: relative;
}

.adv-wrapper {
	width: 35%;
	content: "";
	height: 100%;
	float: left;
	background-image: url('../images/statue3.png');
	background-blend-mode: multiply;
	background-repeat: no-repeat;
	background-position: 80% 100%;
	background-size: 650px 867px;
}

.vezir-wrapper {
	width: 30%;
	height: 100%;
	float: left;
	background-image: url('../images/Vlogo.png');
	background-repeat: no-repeat;
	background-position: 50% 40%;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.vb-wrapper {
	width: 35%;
	content: "";
	height: 100%;
	float: left;
	background-image: url('../images/building1.png');
	background-blend-mode: multiply;
	background-repeat: no-repeat;
	background-size: 900px 803px;
	background-position: -50% 100%;
}

.adv-logo {
	width: 335px;
	height: 155px;
	margin: auto;
	background-repeat: no-repeat;
	position: relative;
	top: 36%;
	left: -10%;
	line-height: 470px;
	text-align: center;
	color: #fff;
	text-decoration: none;
}

.vb-logo {
	width: 300px;
	height: 168px;
	margin: auto;
	background-repeat: no-repeat;
	position: relative;
	top: 37%;
	right: -5%;
	line-height: 450px;
	text-align: center;
	color: #fff;
	text-decoration: none;
}

@-webkit-keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

.fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

.overlay {
	width: 100%;
	height: 100%;
	margin: auto;
	padding: 0;
	position: absolute;
	left: 0;
	top: 0;
	background: url('../images/overlay.png');
	background-repeat: no-repeat;
	opacity: 0.2;
}

.adv-wrapper, .vb-wrapper {
	background-image: none;
	z-index: 2;
	position: relative;
	outline: none;
	text-decoration: none;
	width: 50%;
}

@media screen and (max-width: 1440px) {
	.vezir-wrapper {
		background-size: contain;
	}
}

@media (min-width:769px) and (max-width:1024px){

	body {
		font-size: 25px;
	}

	.adv-logo {
		background-size: 100%;
	}

	.vb-logo {
		background-size: 95%;
	}

	.container {
		background-size: 40% 80%, 50% 80%;
	}
}

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

	body {
		font-size: 20px;
	}

	.adv-logo  {
		background-image: url('../images/advokatura_velimirovic_i_partneri_logo_bw.png');

		background-size: 70%;
		line-height: 345px;
		left: 5%;
		color: #ffdd18;
	}

	.vb-logo {
		background-image: url('../images/ViB_invest_logo_bw.svg');
		background-size: 65%;
		line-height: 336px;
		right: -15%;
		color: #ffdd18;
	}

	.mobile {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0 auto;
		position: relative;
		background-color: #0e4a34;
		top: -100%;
		z-index: -1;
	}
}

@media screen and (min-width: 768px) {
	.vb-wrapper:hover .vb-logo  {
		display: block;
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}

	.adv-wrapper:hover .adv-logo {
		display: block;
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}

	.adv-logo {
		background-image: url('../images/advokatura_velimirovic_i_partneri_logo.png');
		display: none;
	}

	.vb-logo {
		background-image: url('../images/ViB_invest_logo.svg');
		display: none;
	}

	.mobile {
		display: none;
	}

	.container {
		background-color: #0e4a34;
		background-image:  url('../images/statue.png'),
		url('../images/building.png');
		background-repeat: no-repeat,
		no-repeat;
		background-position: 0% 100%, 130% 100%;
		background-blend-mode: multiply;
		background-size: 30% 80%, 48% 80%;
	}
}


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

	.container {
		background-position: 94% 47.7%, 137% 100%;
		background-blend-mode: multiply;
		background-size: 53% 33%, 70% 33%;
	}

	.adv-wrapper {
		width: 100%;
		height: 35%;
		top: 30%;
		background-image: linear-gradient(to bottom left, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.10) 100%);
	}

	.vb-wrapper {
		width: 100%;
		height: 35%;
		top: 30%;
		background-image: linear-gradient(to bottom left, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.10) 100%);
		background-size: 100% 100%;
	}

	.vezir-wrapper {
		width: 30%;
		height: 30%;
		top: 2%;
		z-index: 1;
	}

	.adv-logo {
		top: 5%;
		left: -8%;
		line-height: 270px;
		text-align: left;
		width: 60%;
		font-size: 15px;
	}

	.vb-logo {
		top: 10%;
		right: 8%;
		line-height: 270px;
		text-align: left;
		width: 60%;
		font-size: 15px;
	}

	.mobile {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0 auto;
		position: relative;
		background-color: #0e4a34;
		background-image:  url('../images/statue-half.png'),
		url('../images/building.png');
		background-repeat: no-repeat, no-repeat;
		background-position: 100% 46.3%, 141% 100%;
		background-blend-mode: multiply;
		background-size: 50% 35%, 63% 33%;
		top: -100%;
	}
}