/*
 Theme Name:   Twenty Twenty Child
 Description:  Twenty Twenty Child Theme
 Author:       BRANDD - Domen Doberšek
 Author URI:   https://brandd.si
 Template:     twentytwenty
 Text Domain:  twentytwentychild
*/

/* KAZALO
 * 
 * 0.0 NAVIGACIJA
 * 1.0 HERO
 * 2.0 
 * 3.0 
 * 4.0 
 * 5.0 
 * 6.0 
 * 7.0 MIX
 * 8.0 FOOTER
 * 9.0 OUR STORY
 * 10.0 SERVICES
 * 11.0 COURSES
 */

/* RESPONSIVE CSS
 * Small devices (portrait tablets and large phones, 600px and up) 
 * @media only screen and (min-width: 600px)

 * Small devices (tablets, 768px and up) 
 * @media (min-width: 768px)

 * Medium devices (desktops, 992px and up) 
 * @media (min-width: 992px)

 * Large devices (large desktops, 1200px and up) 
 * @media (min-width: 1200px)
*/



/* 0.0 NAVIGACIJA
 * -------------------------------------------------- */
.nav-links, .page-numbers, .post-link a{
	color: #60503F;
}
.nav-links:hover, .page-numbers:hover, .post-link:hover a{
	color: #94C474;
}

.modal-menu a {
	color: #60503F !important;
}

.header-inner .toggle path {
	fill: #7E6E54;
}

.nav-cta{
	display:flex;
	align-items: center;
	justify-items: center;
}

.nav-cta > .button-rectangle{
	margin-left: 1em;
	font-size: 1.5rem;
}

.nav-cta > .button-rectangle:hover{
	font-size: 1.8rem;
}


/* 1.0 HERO
 * -------------------------------------------------- */
/* Hero base class */
.hero {
  	margin-bottom: 8rem;
	height: 80rem;
	align-items: center;
}

/* Since positioning the image, we need to help out the caption */
.hero-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.hero-item-promo {
  bottom: 0;
  height: 40rem;
}
.hero-item-promo > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 100%;
  bottom: 0;
  object-fit: cover;
	z-index:-10;
}

.promo-text
{
	position: absolute;
	text-align: center;
	padding: 1em;
	color: #FFF;
}

.promo-title
{
	font-weight: 300;
	font-style: italic;
	margin-bottom: 0.5em;
	text-shadow: 0 2px 3px rgba(0,0,0,75%);
	opacity: 0%;
    font-size: 1.5em;
}	

/* 4.0 FRONT PAGE - SPLOSNO
 * -------------------------------------------------- */	
	.first-row{
		padding-top: 10rem;
	}

/* 7.0 MIX
 * -------------------------------------------------- */
body{
	font-family: "Playfair Display", serif !important;
}

h1, h2, h3, h4{
	color: #60503F;
}

.full-width{
	width:100% !important;
	max-width:100%;
	margin-left:0;
	margin-right:0;
	padding-left:0;
	padding-right:0;
	margin-top: 5em;
}

.full-width-subpage{
	width:100% !important;
	max-width:100%;
	margin-left:0;
	margin-right:0;
	padding-left:0;
	padding-right:0;
	margin-top: 1em;
}

.obj-center{
	display: flex;
	justify-content: center;
}

.separator-left{
    width: 100%;
    height: 8em; /* Adjust the height as needed */
	background-color: #94C474;
	position:absolute;
   	bottom:0;
   	left:0;
	z-index:-10;
	border-radius: 0 40px 40px 0;
}

.separator-center{
	margin: 5rem 15%;
}

.separator-title-left{
	background-color: #7E6E54;
	width: 100%;
	height: 15rem;
	border-radius: 0 25px 25px 0;
}

.separator-title-right{
	background-color: #7E6E54;
	width: 100%;
	height: 15rem;
	border-radius: 25px 0 0 25px;
}


.circle{
	height: 100%;
	aspect-ratio: 1/1;
	max-height: 3em;
	margin: 0.4em;
	border-radius: 50%;
	background-color: #8D807C;
}

.circle2:before{
		text-decoration: none;
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: -100;
        transform: translate(-50%, -50%);
       	height: 100%;
		aspect-ratio: 1/1;
        background-color: rgba(148, 196, 116, 30%);
        border-radius: 50%;
}
.circle3:before{
		text-decoration: none;
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: -100;
        transform: translate(-50%, -50%);
       	height: 100%;
		aspect-ratio: 1/1;
        background-color: rgba(126, 110, 84, 50%);
        border-radius: 50%;
}
.dark-brown{
	background-color: #7E6E54;
}

.light-brown{
	background-color: #8C7D6E;
}

.beige{
	background-color: #EAD3A8;
}

.green{
	background-color: #94C474;
}

.icon{
	width:100%;
	aspect-ratio: 1/1;
}


.title2{
	font-size:2.3em;
	color: #7E6E54;
	font-weight: 700;
}

.title3{
	font-weight: 800;
	font-size:2.1rem;
}

.title4{
	font-weight: 800;
	font-size:1.9rem;	
}

.quote{
	font-size: 1.8em;
	font-style: italic;
	font-weight: 100;	
}
.text-desc{
	padding-top: 2rem;
	text-align: center
}


.right{
	object-position: 2em 0;
	text-align: right;
	padding-right: 5rem;
}

.left{
	object-position: 2em 0;
	text-align: left;
	padding-left: 5rem;
}

.center{
	text-align: center;
	padding: 2rem 5rem;
}

.center2{
	text-align: center;

}

.no-pm{
	padding:0;
	margin:0;
	height: 80rem;
}

.btn-arr{
	color: #7E6E54;
}

.button-link a{
	text-decoration: none;
	font-size: 1.1em;
	position:absolute;
	margin: 3rem;
	right: 5rem;
	transition: font-size 2s, color 2s;
}
a.button-link:hover, a.btn-arr:hover{
	color: #94C474;
	font-size: 1.4em;
}

.button-rectangle{
	font-size: 1.5em;
	color: #FFF;
	background-color: #94C474;
	padding: 0.2em 0.5em;
	border-radius:10px;
	position: absolute;
  	top: 50%;  
	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
	transition: font-size 2s;
	margin-top:1em;
}

a.button-rectangle{
	text-decoration: none;
	color: #FFF;
}

a.button-rectangle:hover{
	font-size: 2.5em;
	
}

.button-rectangle.btn-arr{
	color: #FFF;
}

.btn-anim1{
	animation: shake 4s cubic-bezier(.36,.07,.19,.97) both;
	transform: translateY(-50%) rotate(0deg);
	animation-iteration-count: infinite;
}

@keyframes shake {
  2%, 18% {
    transform: translateY(-50%) rotate(1deg);
  }
  4%, 16% {
    transform: translateY(-50%) rotate(-1deg);
  }
  6%, 10%, 14% {
    transform: translateY(-50%) rotate(2deg);
  }
  8%, 12% {
    transform: translateY(-50%) rotate(-2deg);
  }
  100% {
    transform: translateY(-50%) rotate(0deg);
  }
}

.team-img{
	margin-top: 10rem;
	height: 70rem;
	position:absolute;
	bottom:0;
	object-fit: contain;
	object-position:bottom;
}

.vikt-desc:before{
	content: '';
	position: absolute;
	top: 80%;
	right: 0%;
	z-index: -100;
	transform: translate(-50%, -50%);
	width: 80px; /* Adjust size of the circle */
	height: 80px; /* Adjust size of the circle */
	background-color: rgba(126, 110, 84, 50%); /* Adjust color of the circle */
	border-radius: 50%;	
	animation: team-desc1 30s ease-in-out infinite reverse;
}

.vikt-desc{
	width:80%;
	position: relative;
	top: -5%;
	left: 10%;
}

.mar-desc::before{
	content: '';
	position: absolute;
	top: 80%;
	right: 30%;
	z-index: -100;
	transform: translate(-50%, -50%);
	width: 80px; /* Adjust size of the circle */
	height: 80px; /* Adjust size of the circle */
	background-color: rgba(148, 196, 116, 50%); /* Adjust color of the circle */
	border-radius: 50%;	
	animation: team-desc1 30s ease-in-out infinite;
}

@keyframes team-desc1 {
	0% {top: 100%; right: 40%;}
	15% {top: 30%; right: 80%;}
	30% {top: 100%; right: 40%;}
	45% {top: 0%; right: -40%;}
	65% {top: 100%; right: 40%;}
	100% {top: 100%; right: 40%;}
}

.mar-desc{
	width:80%;
	position: relative;
	top: 5%;
	right: -10%;
}

.mar-img{
	transform: rotatey(180deg);
	right: 0;
}

.block{
	width: 100%;
	background-color: #7E6E54;
	border-radius: 15px;
	color: #FFF;
	aspect-ratio: 1/1;
	margin: 1em;
	text-align: center;
	padding:1em;
}

.block-center{
	display: flex;
	justify-content: center;
	align-items: center;
}

.fa-block{
	padding: 1em;
}

a.block-link{
	color: #FFF;
}

a.block-link:hover{
	color: #000;
	font-weight: 800;
}

.block:hover{
	background-color: #94C474;
}

.blog-block{
	aspect-ratio: 1/1;
	margin: 1em;
	border-radius: 50px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: 0;
	display: flex;
    justify-content: center;
    align-items: center;
}

.blog-block-full{
	background-color: #7E6E54;
	color: #FFF;
}

.blog-block-transp{
	border-color: #7E6E54;
	color: #7E6E54;
	border-style: solid;
	border-width: thin;
}

.blog-block-full:before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(126, 110, 84, 0.5);
	border-radius:inherit;
	transition: background-color 2s;
	z-index: -1;
	transition: background-color 2s;
}

.blog-block-full:hover:before{
	background-color: rgba(0, 0, 0, 0.75);
}

.blog-block-full .title2{
	color: #FFF;
}

a.blog-block-full, a.blog-block-transp{
	text-decoration: none;
}

a.blog-block-full:hover, a.blog-block-transp:hover{
	color: #94C474;
}

.blog-content{
	margin-top: 3em;
	margin-bottom: 3em;
}

.post-link{
	margin: 3em;
}


/* 8.0 FOOTER
 * -------------------------------------------------- */
#site-footer{
	background-color: #7E6E54;
	padding-bottom: 0;
}
.footer-navigacija{
	width: calc(100% - 4rem);
	margin: 0em auto; 
	color: #FFF !important;
}

.footer-navigacija a{
	color: #FFF;
	font-weight: 400;
}

.footer-navigacija .dashicons{
	font-size: 2em;
	margin: 0 0.2em 0.5em 0.2em;
}

.footer-navigacija ul{
	display: inline-block;
}

.logo-footer{
	padding: 2em;
}

/* 9.0 OUR STORY
 * -------------------------------------------------- */
.story-desc{
	min-height: 30em;
}

.story{
	position: relative;
	min-height: 20em;
}

.story-img{
	width:90%;
	position:absolute;
	bottom: 0;
	left: 0;
  	/*object-position: 0 100%;*/
}

.cta{
	margin-top:25rem;
	margin-bottom:25rem;
}

/* 10.0 SERVICES
 * -------------------------------------------------- */

.services-bg{
	position:relative;
}

.services-bg::before{
	content:'';
	position: absolute;
	top: 0;
	left: 0;
	background-color: #7E6E54;
	border-radius: 0 100px 0 0;
	width: 80%;
	height:100%;
	z-index:-100;
}

.srv{
	color: #FFF;
	position: relative;
  	top: 50%;
  	transform: translateY(-50%);
}

.srv-title{
	color: #FFF;
	padding: 5rem 5rem;
}

.srv-desc{
	font-weight: 600;
	font-size:1.4rem;
}

.srv-btn{
	position: absolute;
	right: 1em;
	bottom: 0.5em;
}
.service-group{
	margin-left:10%;
}

.service-tbn{
	background-color: rgba(126, 110, 84);
	border-radius: 25px;
	width: 100%;
	aspect-ratio: 2/1;
	margin: 1rem 1rem;
	background-size: cover;
	background-position: center;
}

.service-tbn::before, .hero-img:before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(126, 110, 84, 0.3);
	border-radius:inherit;
	transition: background-color 2s;
}

a.srv-link{
	text-decoration: none;
	color: #FFF;
	font-size: 1.5rem;
	transition: font-size 2s;
}

.service-tbn:hover:before{
	background-color: rgba(0, 0, 0, 0.5);
}

.service-tbn:hover a.srv-link{
	font-size:1.8rem;
}

.hero-img{
	height: 80rem;
    width: 100%;
    position: relative;
    left: 0;
	background-size: cover;
    background-position: center;
	border-radius: 100px 0 0 100px;
}

.hero-noimg{
	height: 20rem;
    width: 100%;
    position: relative;
    left: 0;
	background-size: cover;
    background-position: center;
	border-radius: 100px 0 0 100px;
}

.hero-text{
	position:relative;
	padding: 7.5rem 2rem;
	color: #FFF;
	height: 100%;
}

.hero-short-desc{
	width: 50%;
	position: absolute;
	right: 7.5rem;
	bottom: 7.5rem;
}

.hero-long-desc-container{
	position: relative;
	width: 80%;
	left: 0;
	top: -15em;
	background-color: #7E6E54;
	border-radius: 0 100px 100px 0;
	z-index: -1;
}

.hero-long-desc-text{
	color: #FFF;
	padding: 20em 2em 2em 2em ;
}

.naziv-storitve{
	font-weight: 800;
	font-size: 1.5em;
	color: #7E6E54;
	
}

.trajanje{
	font-style: italic;
	font-size: 1.5em;
	font-weight: 300;
	color: #8D807C;
}

.cena-container{
	background-color: #8D807C;
	border-radius: 25px;
	aspect-ratio: 4/1;
	display: flex;
    align-items: center;
    justify-content: center;
}

.cena{
	font-size:2em;
	font-weight: 800;
	color: #FFF;
}

.storitev-row{
	margin-bottom: 2em;
}


/* 11.0 COURSES
 * -------------------------------------------------- */
.izpostavljeno-sredina{
	position: relative;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	padding: 100px;
	background-color: #7E6E54;
	border-radius: 100px;
	z-index: -1;
	color: #FFF;
	font-size: 2.5rem;
	font-weight: 500;
}


.izpostavljeno-desno{
	position: relative;
	width: 50%;
	right: 0;
	padding: 25px;
	background-color: #7E6E54;
	border-radius: 25px;
	z-index: -1;
	color: #FFF !important;
}
.izpostavljeno-desno h2, .izpostavljeno-desno h5{
	color: #FFF !important;
	text-align: center;
}

.izpostavljeno{
	padding: 25px;
	background-color: #7E6E54;
	border-radius: 25px;
	z-index: -1;
	color: #FFF;
	vertical-align: middle;
}


.izpostavljeno h2 {
	color:#FFF;
	text-align: center;
	
}

.izpostavljeno-borderline {
	border: solid 10px #94C474;
	text-align: center;
	border-radius: 25px;
	padding: 25px;
}

.izpostavljeno-borderline p{
	font-size: 2.5rem;
	font-weight: 500;
}

blockquote p{
	color:#7E6E54 !important;
}

.quote-author{
	font-size: 2.5rem !important;
	color: #94C474 !important;
	font-weight: 400;
}

.anim-krog01:before{
	content: '';
	position: relative;
	top: 80%;
	right: 0%;
	z-index: -100;
	transform: translate(-50%, -50%);
	width: 80px; /* Adjust size of the circle */
	height: 80px; /* Adjust size of the circle */
	background-color: rgba(148, 196, 116, 50%); /* Green - Adjust color of the circle */
	border-radius: 50%;	
	animation: anim1 25s ease-in-out infinite;
}
.anim-krog02:before{
	content: '';
	position: relative;
	top: 80%;
	right: 0%;
	z-index: -100;
	transform: translate(-50%, -50%);
	width: 80px; /* Adjust size of the circle */
	height: 80px; /* Adjust size of the circle */
	background-color: rgba(126, 110, 84, 50%); /* Brown - Adjust color of the circle */
	border-radius: 50%;	
	animation: anim1 25s ease-in-out infinite reverse;
	transform: scaleX(-1);
}

@keyframes anim1 {
	0% {top: 100%; right: -20%;}
	15% {top: 30%; right: 20%;}
	30% {top: 100%; right: -20%;}
	45% {top: 0%; right: -100%;}
	65% {top: 100%; right: -20%;}
	100% {top: 100%; right: -20%;}
}

.shake-anim1{
	animation: shake2 4s cubic-bezier(.36,.07,.19,.97) both;
	/*transform: translateY(-50%) rotate(0deg);*/
	animation-iteration-count: infinite;
}

@keyframes shake2 {
  2%, 18% {
    transform: rotate(1deg);
  }
  4%, 16% {
    transform: rotate(-1deg);
  }
  6%, 10%, 14% {
    transform: rotate(2deg);
  }
  8%, 12% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.border-left-ul-green, .border-left-ul-brown{
	padding:0.5em;
	border-left: solid 10px;
}

.border-left-ul-green{
	border-color: #94C474;
}

.border-left-ul-brown{
	border-color: #7E6E54;
}

.title-background1{
	color: #FFF;
	background-color: #94C474;
	padding: 1em;
	border-radius: 0 75px 75px 0;
	width: 100%;
}

.title-background2{
	color: #FFF;
	background-color: #7E6E54;
	padding: 1em 2em;
	border-radius: 75px;
}

/* RESPONSIVE CSS
-------------------------------------------------- */
/* Extra Small devices (phones, up to 1000px and up) */
@media only screen and (max-width: 1000px) {
	.header-inner{
		position: fixed;
		background: #FFF;
		width: 100%;
		padding: 1em;
		top: 0em;
	}

.hero-short-desc{
	width: 75%;
	right: 2.5rem;
}

	/* 11.0 COURSES
 * -------------------------------------------------- */
.izpostavljeno-sredina{
	width: 100%;
	padding: 25px;
	border-radius: 25px;
}


.izpostavljeno-desno{
	width: 100%;
}


}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

.nav-cta > .button-rectangle{
	font-size: 2rem;
}

.nav-cta > .button-rectangle:hover{
	font-size: 2.3rem;
}	
	
	
/* 1.0 CUSTOMIZE THE CAROUSEL
 * -------------------------------------------------- */	
.promo-text{
	width: 90%;
	top: 40%;
}
	
.promo-title {
    font-size: 2.0em;
}

.hero {
    height: 80rem;
}
	
/* 4.0 FRONT PAGE - SPLOSNO
 * -------------------------------------------------- */


/* 7.0 MIX
 * -------------------------------------------------- */

.title2{
	font-size: 2.3em;
}


/* 8.0 FOOTER
 * -------------------------------------------------- */
	
/* 9.0 OUR STORY
 * -------------------------------------------------- */
.story{
	min-height: 20em;
}

.advantage{
	padding: 3rem 1rem;
}

.mar-desc{
	width:50%;
	top: 15%;
	right: -5%;
}

.services-bg::before{
	width: 60%;
}

.srv-title{
	padding: 5rem 10rem;
}

	
.title3{
	font-size:4rem;
}

.title4{
	font-size:3rem;	
}


.srv-desc{
	font-size:1.8rem;
}

.srv-btn{
	right: 1em;
	bottom: 1em;
}


a.srv-link{
	font-size: 1.8rem;
}

.service-tbn:hover a.srv-link{
	font-size:2.5rem;
}
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {

.nav-cta > .button-rectangle{
	font-size: 2.5rem;
}

.nav-cta > .button-rectangle:hover{
	font-size: 2.8rem;
}	
	
/* 1.0 CUSTOMIZE THE CAROUSEL
 * -------------------------------------------------- */
.hero {
    height: 80rem;
}
.hero-img{
	width: 90%;
	left: 10%;
}
	
.hero-text{
	padding: 7.5rem;
}

.hero-long-desc-text{
	padding: 20em 5em 5em 5em ;
}

	
/* 4.0 FRONT PAGE - SPLOSNO
 * -------------------------------------------------- */
	

	
/* 7.0 MIX
 * -------------------------------------------------- */
.button-rectangle{
	font-size: 1.8em;
	margin-top:0;
	}
/* 8.0 FOOTER
 * -------------------------------------------------- */
/* 9.0 OUR STORY
 * -------------------------------------------------- */
.story{
	min-height: 25em;
}	

.advantage{
	padding: 3rem 2rem;
}
	
.vikt-desc{
	width:40%;
	top: 25%;
	left: 55%;
}
	
.mar-desc{
	width:50%;
	top: 25%;
	right: -10%;
}

.services-bg::before{
	width: 50%;
}

.title3{
	font-size:2.5rem;
}

.title4{
	font-size:2.2rem;	
}


.srv-desc{
	font-size:1.4rem;
}

.srv-btn{
	right: 0.5em;
	bottom: 0.5em;
}


a.srv-link{
	font-size: 1.5rem;
}

.service-tbn:hover a.srv-link{
	font-size:1.8rem;
}
	
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {

/* 0.0 NAVIGACIJA
 * -------------------------------------------------- */
	
.header-navigation-wrapper{
	height: 2em;
	padding: 1.5em;
	z-index: 1;
	padding-right: 4em;
	margin-right: 0em;
	margin-top: 0em;
	/*overflow:hidden;*/
	text-transform:uppercase;
}
	
.primary-menu a {
	text-decoration:none;
	color: #86754E !important;
}
	
	
.primary-menu a::before {
  	content: '';
  	position: absolute;
  	top: 50%;
  	left: 50%;
	z-index: -100;
  	transform: translate(-50%, -50%);
 	width: 50px; /* Adjust size of the circle */
  	height: 50px; /* Adjust size of the circle */
  	background-color: rgba(126, 110, 84, 20%); /* Adjust color of the circle */
  	border-radius: 50%;
	transition: background-color 2s;
}
	
.primary-menu a:hover::before {
	text-decoration:none;
  	content: '';
  	position: absolute;
  	top: 50%;
  	left: 50%;
	z-index: -100;
  	transform: translate(-50%, -50%);
 	width: 50px; /* Adjust size of the circle */
  	height: 50px; /* Adjust size of the circle */
  	background-color: rgba(148, 196, 116, 30%); /* Adjust color of the circle */
  	border-radius: 50%;
}
.primary-menu li.current-menu-item > a{
		text-decoration:none;
	}
.primary-menu li.current-menu-item > a:hover{
		text-decoration:none !important;
	}
.primary-menu li.current-menu-item > a::before, .primary-menu li.current-menu-item > .link-icon-wrapper > a::before{
		text-decoration:none;
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: -100;
		transform: translate(-50%, -50%);
		width: 50px; /* Adjust size of the circle */
		height: 50px; /* Adjust size of the circle */
		background-color: rgba(148, 196, 116, 30%); /* Adjust color of the circle */
		border-radius: 50%;	
	}
.primary-menu ul{
		background-color: #FFF !important;
		text-align: center;
	}

.primary-menu ul::after{
		border-bottom-color: #7E6E54 !important;
	}
	
/* 1.0 CUSTOMIZE THE CAROUSEL
 * -------------------------------------------------- */
	.promo-text{
		width: 60%;
	}
	.promo-title{
		font-size: 2.5em;
	}
.hero {
    height: 60rem;
}
.hero-img{
	width: 75%;
	left: 25%;
}
.hero-long-desc-container{
	width: 65%;
}

/* 7.0 MIX
 * -------------------------------------------------- */
.quote{
	font-size: 1.5em;
}
.advantage{
	padding: 3rem 5rem;
}
	
.separator-center{
	margin: 5rem 25%;
}
.button-rectangle{
	font-size: 2em;
	}
/* 8.0 FOOTER
 * -------------------------------------------------- */
.footer-navigacija{
	width: 90%;
}
/* 9.0 OUR STORY
 * -------------------------------------------------- */
	
.story{
	min-height: 30em;
}

.vikt-desc{
	width:50%;
	top: 10%;
	left: 80%;
}
.mar-desc{
	width:50%;
	top: 40%;
	right: 15%;
}

.services-bg::before{
	width: 40%;
}

.srv-title{
	padding: 10rem 10rem;
}

.service-group{
	margin-left:20%;
}

.title3{
	font-size:3rem;
}
	
.title4{
	font-size:2.8rem;
}

.srv-desc{
	font-size:1.6rem;
}

.srv-btn{
	right: 1em;
	bottom: 1em;
}


a.srv-link{
	font-size: 1.7rem;
}

.service-tbn:hover a.srv-link{
	font-size:2.2rem;
}

/* 11.0 COURSES
 * -------------------------------------------------- */
.izpostavljeno-sredina{
	width: 70%;
	padding: 25px;
	border-radius: 25px;
}


.izpostavljeno-desno{
	width: 70%;
}
	
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	
/* 0.0 NAVIGACIJA
 * -------------------------------------------------- */
.header-navigation-wrapper{
	padding-right: 6em;
	margin-right: -6em;
}	

.hero {
    height: 75rem;
}

.hero-long-desc-container{
	width: 50%;
}
/* 4.0 FRONT PAGE - SPLOSNO
 * -------------------------------------------------- */	
	.first-row{
		padding-top: 0rem;
	}

/* 7.0 MIX
 * -------------------------------------------------- */


.title2{
	font-size: 3em;
}
.separator-left{
height: 8em;
}

/* 8.0 FOOTER
 * -------------------------------------------------- */
.footer-navigacija{
	width: 70%;
}
/* 9.0 OUR STORY
 * -------------------------------------------------- */
.story{
	min-height: 35em;
}

.vikt-desc{
	width:50%;
	top: 25%;
	left: 60%;
}
.mar-desc{
	width:50%;
	top: 60%;
	right: 10%;
}
.title3{
	font-size:3.5rem;
}

.title4{
	font-size:3rem;	
}
	
.srv-desc{
	font-size:1.8rem;
}

.srv-btn{
	right: 2em;
	bottom: 2em;
}


a.srv-link{
	font-size: 1.8rem;
}

.service-tbn:hover a.srv-link{
	font-size:2.5rem;
}
}

/* XL Large devices (large desktops, 2100px and up) */
@media (min-width: 2100px) {
	
/* 4.0 FRONT PAGE - SPLOSNO
 * -------------------------------------------------- */	
	.first-row{
		padding-top: 40rem;
	}
}