/* Main css */
body {
    margin: 0;
    padding: 0;
}

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    font-family: arial;
    text-align: center;
	background-color: #cacaca;
}

/* Fonts */
@font-face {
	font-family: domaineFont;
	src: url("../fonts/domaine_sans_text_regular.otf");
}

@font-face {
	font-family: domaineFontItalic;
	src: url("../fonts/domaine_sans_text_regularitalic.otf");
}

@font-face {
	font-family: domaineFontBold;
	src: url("../fonts/domaine_sans_text_bold.otf");
}

@font-face {
	font-family: domaineFontBoldItalic;
	src: url("../fonts/domaine_sans_text_bolditalic.otf");
}

.container {
	display: block;
	position: relative;
	height: 100%;
	width: 100%;
}

/* 1. slide */
.page1 {
	background: #fff url("../images/vrnik_pozadina.jpg") no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	text-align: center;
}

.page1 .head-img {
	display: block;
	position: absolute;
    top: 35%;
    left: 50%;
    transform: translate3d(-50%,-35%,0);
}

.head-img img {
	width: 100%;
	height: auto;
	transition: all .5s;
}

.head-txt {
	display: block;
	position: relative;
    top: 70%;
	width: 100%;
	margin: auto;
	color: #626365;
	font-size: 28px;
	line-height: 1.5;
	font-family: domaineFontItalic;
	transition: all .5s;
}

/* 2. slide */
.page2 {
	background: #fff url("../images/vrnik_02.jpg") no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

/* 3. slide */
.page3 {
	background: #fff url("../images/de_canavellis_03.jpg") no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.page-half {
	display: flex;
	display: -webkit-flex;
	justify-content: center;
	align-items: center;
	-webkit-align-items: center;
	width: 50%;
	height: 100%;
	float: left;
}

.page3-txt {
	font-family: domaineFont;
	color: #626365;
	font-size: 24px;
	line-height: 1.5;
	text-align: left;
	padding: 0px 18%;
}

.page3-img1 {
	display: block;
	position: absolute;
	width: 50%;
	height: 49.5%;
	top: 0;
	right: 0;
	background: #fff url("../images/vrnik_03_1.jpg") no-repeat center bottom;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	transition: all .5s;
}

.page3-img2 {
	display: block;
	position: absolute;
	width: 50%;
	height: 49.5%;
	bottom: 0;
	right: 0;
	background: #fff url("../images/vrnik_03_2.jpg") no-repeat center top;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	transition: all .5s;
}

/* 4. slide */
.page4 {
	background-color: #fff;
	width: 100%;
	height: 100%;
}

.page4-img1 {
	display: block;
	position: absolute;
	width: 49.5%;
	height: 49.5%;
	top: 0;
	left: 0;
	background: #fff url("../images/vrnik_04_1.jpg") no-repeat center center/100% auto;
	transition: all .5s;
}

.page4-img2 {
	display: block;
	position: absolute;
	width: 49.5%;
	height: 49.5%;
	bottom: 0;
	left: 0;
	background: #fff url("../images/vrnik_04_2.jpg") no-repeat center 30%/100% auto;
	transition: all .5s;
}

.page4-img3 {
	display: block;
	position: absolute;
	width: 50%;
	height: 100%;
	top: 0%;
	right: 0;
	background: #fff url("../images/vrnik_04_3.jpg") no-repeat center center/100% auto;
	transition: all .5s;
}

/* 5. slide */
.page5 {
	background-color: #fff;
	width: 100%;
	height: 100%;
}

.page5-img1 {
	display: block;
	position: absolute;
	width: 49.5%;
	height: 100%;
	top: 0%;
	left: 0;
	background: #fff url("../images/vrnik_05_1.jpg") no-repeat center center/100% auto;
	transition: all .5s;
}

.page5-img2 {
	display: block;
	position: absolute;
	width: 50%;
	height: 100%;
	top: 0%;
	right: 0;
	background: #fff url("../images/vrnik_05_2.jpg") no-repeat center center/100% auto;
	transition: all .5s;
}

/* 6. slide */
.page6 {
	background-color: #fff;
	width: 100%;
	height: 100%;
}

.page6-img1 {
	display: block;
	position: absolute;
	width: 60%;
	height: 100%;
	top: 0%;
	left: 0;
	background: #fff url("../images/de_canavellis_06_1.jpg") no-repeat center center/100% auto;
	transition: all .5s;
}

.page6-img2 {
	display: block;
	position: absolute;
	width: 39.5%;
	height: 49.5%;
	top: 0;
	right: 0;
	background: #fff url("../images/de_canavellis_06_2.jpg") no-repeat center bottom/100% auto;
	transition: all .5s;
}

.page6-img3 {
	display: block;
	position: absolute;
	width: 39.5%;
	height: 49.5%;
	bottom: 0;
	right: 0;
	background: #fff url("../images/de_canavellis_06_3.jpg") no-repeat -100px 35%/160% auto;
	transition: all .5s;
}

/* 7. slide */
.page7 {
	background: #fff url("../images/vrnik_pozadina.jpg") no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	text-align: center;
}

.page7-img1 {
	display: block;
	position: absolute;
	width: 49.5%;
	height: 49.5%;
	top: 7%;
	left: 3%;
	background: url("../images/vrnik_vector-09.svg") no-repeat center top/35% auto;
	transition: all .5s;
}

.page7-txt {
	display: block;
	position: relative;
	margin: -20% auto 0px 0px;
	font-family: domaineFont;
	color: #626365;
	font-size: 24px;
	line-height: 1.5;
	text-align: left;
	padding: 0px 0px 0px 8%;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

a {
	color: #626365;
}

/* MEDIA STYLES */
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
	.head-txt {
		width: 98%;
		font-size: 12px;
		transition: all .5s;
	}
	
	.page3 .page-half.page-half-txt {
		display: flex;
		width: 100%;
		height: 50%;
		float: none;
	}
	
	.page3 .page-half {
		display: block;
		position: relative;
		width: 100%;
		height: 50%;
		float: none;
	}
	
	.page3-img1 {
		position: absolute;
		width: 100%;
		height: 49.5%;
		background: #fff url(../images/vrnik_03_1.jpg) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	
	.page3-img2 {
		position: absolute;
		width: 100%;
		height: 50%;
		background: #fff url(../images/vrnik_03_2.jpg) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	
	.page3-txt {
		font-size: 14px;
		padding: 0px 10%;
	}
	
	.page4-img1 {
		width: 100%;
		height: 33%;
		background: #fff url(../images/vrnik_04_1.jpg) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		text-align: center;
	}
	
	.page4-img2 {
		width: 100%;
		height: 33%;
		top: 33.5%;
		background: #fff url("../images/vrnik_04_2.jpg") no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		text-align: center;
	}
	
	.page4-img3 {
		width: 100%;
		height: 33%;
		top: 67%;
		background: #fff url(../images/vrnik_04_3.jpg) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		text-align: center;
	}
	
	.page5-img1 {
		width: 100%;
		height: 49.8%;
	}
	
	.page5-img2 {
		width: 100%;
		height: 49.8%;
		top: unset;
		bottom: 0%;
	}
	
	.page7 .page-half.page-half-txt {
		display: flex;
		align-items: start;
		-webkit-align-items: start;
		width: 100%;
		height: 66.66%;
		float: none;
	}
	
	.page7 .page-half {
		display: block;
		position: relative;
		width: 100%;
		height: 33.33%;
		float: none;
	}
	
	.page7-img1 {
		position: relative;
		width: 60%;
		height: 100%;
		margin: 0 auto;
		top: unset;
		left: unset;
		background: url(../images/vrnik_vector-09.svg) no-repeat center center;
	}
	
	.page7-txt {
		font-size: 16px;
		margin: 0px auto;
		padding: 0px 5%;
	}
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
	.head-txt {
		font-size: 15px;
		transition: all .5s;
	}
	
	.page3-txt {
		font-size: 15px;
	}
	
	.page3-img1 {
		height: 49.7%;
	}
	
	.page3-img2 {
		height: 49.7%;
	}
	/*
	.page4-img1 {
		width: 100%;
		height: 24%;
		background: #fff url(../images/vrnik_04_1.jpg) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		text-align: center;
	}
	
	.page4-img2 {
		width: 100%;
		height: 25.1%;
		top: 24.5%;
		background: #fff url("../images/vrnik_04_2.jpg") no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		text-align: center;
	}
	
	.page4-img3 {
		width: 100%;
		height: 50%;
		top: 50%;
		background: #fff url(../images/vrnik_04_3.jpg) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		text-align: center;
	}
	
	.page5-img1 {
		width: 100%;
		height: 49.7%;
	}
	
	.page5-img2 {
		width: 100%;
		height: 49.7%;
		top: unset;
		bottom: 0%;
	}
	
	.page7 .page-half.page-half-txt {
		display: flex;
		align-items: start;
		-webkit-align-items: start;
		width: 100%;
		height: 66.66%;
		float: none;
	}
	
	.page7 .page-half {
		display: block;
		position: relative;
		width: 100%;
		height: 33.33%;
		float: none;
	}
	
	.page7-img1 {
		position: relative;
		width: 35%;
		height: 100%;
		margin: 0 auto;
		top: unset;
		left: unset;
		background: url(../images/vrnik_vector-09.svg) no-repeat center center;
	}
	
	.page7-txt {
		font-size: 14px;
		margin: 0px auto;
		padding: 0px 5%;
	}
	*/
	.page7-txt {
		font-size: 14px;
		margin: -5% auto 0px 0px;
	}
	
	.page7-img1 {
		top: 10%;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
	.head-txt {
		font-size: 18px;
		transition: all .5s;
	}
	
	.page3-txt {
		font-size: 16px;
	}
	
	.page3-img1 {
		height: 49.7%;
	}
	
	.page3-img2 {
		height: 49.7%;
	}
	
	.page4-img1 {
		width: 100%;
		height: 24%;
		background: #fff url(../images/vrnik_04_1.jpg) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		text-align: center;
	}
	
	.page4-img2 {
		width: 100%;
		height: 25.1%;
		top: 24.5%;
		background: #fff url("../images/vrnik_04_2.jpg") no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		text-align: center;
	}
	
	.page4-img3 {
		width: 100%;
		height: 50%;
		top: 50%;
		background: #fff url(../images/vrnik_04_3.jpg) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		text-align: center;
	}
	
	.page5-img1 {
		width: 100%;
		height: 49.7%;
	}
	
	.page5-img2 {
		width: 100%;
		height: 49.7%;
		top: unset;
		bottom: 0%;
	}
	
	.page7 .page-half.page-half-txt {
		display: flex;
		align-items: start;
		-webkit-align-items: start;
		width: 100%;
		height: 66.66%;
		float: none;
	}
	
	.page7 .page-half {
		display: block;
		position: relative;
		width: 100%;
		height: 33.33%;
		float: none;
	}
	
	.page7-img1 {
		position: relative;
		width: 50%;
		height: 100%;
		margin: 0 auto;
		top: unset;
		left: unset;
		background: url(../images/vrnik_vector-09.svg) no-repeat center center;
	}
	
	.page7-txt {
		font-size: 18px;
		margin: 0px auto;
		padding: 0px 5%;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.head-txt {
		font-size: 20px;
		transition: all .5s;
	}
	
	.page3-txt {
		font-size: 18px;
	}
	
	.page3-img1 {
		height: 49.7%;
	}
	
	.page3-img2 {
		height: 49.7%;
	}
	
	.page4-img1 {
		height: 49.7%;
		background: #fff url(../images/vrnik_04_1.jpg) no-repeat center center/auto 100%;
	}
	
	.page4-img2 {
		height: 49.7%;
		background: #fff url(../images/vrnik_04_2.jpg) no-repeat center center/auto 100%;
	}
	
	.page4-img3 {
		background: #fff url(../images/vrnik_04_3.jpg) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		text-align: center;
	}
	
	.page5-img1 {
		background: #fff url(../images/vrnik_05_1.jpg) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		text-align: center;
	}
	
	.page5-img2 {
		background: #fff url(../images/vrnik_05_2.jpg) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		text-align: center;
	}
	
	.page7-txt {
		font-size: 20px;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) and (max-width: 1499.98px) {
	.head-txt {
		font-size: 23px;
		transition: all .5s;
	}
	
	.page3-txt {
		font-size: 20px;
	}
	
	.page3-img1 {
		height: 49.7%;
	}
	
	.page3-img2 {
		height: 49.7%;
	}
	
	.page4-img1 {
		height: 49.6%;
		background: #fff url(../images/vrnik_04_1.jpg) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		text-align: center;
	}
	
	.page4-img2 {
		height: 49.6%;
		background: #fff url(../images/vrnik_04_2.jpg) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		text-align: center;
	}
	
	.page4-img3 {
		background: #fff url(../images/vrnik_04_3.jpg) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		text-align: center;
	}
	
	.page5-img1 {
		background: #fff url(../images/vrnik_05_1.jpg) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		text-align: center;
	}
	
	.page5-img2 {
		background: #fff url(../images/vrnik_05_2.jpg) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		text-align: center;
	}
	
	.page7-txt {
		font-size: 22px;
	}
}

/* Extra extra large devices (large desktops, 1500px and up) */
@media (min-width: 1500px) {

}