html {
  font-size: 14px;
  line-height: 1.5;
}
body {
  background-color: #39424d;
  margin: 0;
  overflow: hidden;
  perspective: 1000px;
  font-size: 16px;
}
.site-wrap {
  transition: transform 0.6s cubic-bezier(0.1, 0, 0.1, 1);
}
.site-wrap.show-all {
  transform: rotateX(0deg) scale(0.33);
  
  
/* zatemnitev*/
}
.site-wrap.show-all .panel p,
.site-wrap.show-all .panel h2,
.site-wrap.show-all .panel__nav .menu-ico
 {
  display:none;
}
.site-wrap.show-all .panel:after,
.site-wrap.show-all .google-maps
 {
	opacity: 0;
}
.site-wrap.show-all .img-logo:after
 {
	opacity: 1;
}
.site-wrap.show-all .overmap-container {
	background: rgba(57, 66, 77, 0);
}
.site-wrap.show-all h1 {
	background: rgba(57, 66, 77, 0);
}



.panel-wrap {
  height: 100vh;
  width: 100vw;
}

.panel-wrap {
  perspective: 2000px;
  transition: transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.panel-wrap.animate--shrink,
.panel-wrap.animate--tilt,
.panel-wrap.animate--tilt2 {
  transition: transform 0.3s cubic-bezier(0.55, 0, 0.1, 1) 0.3s;
}
.panel {
  height: 100vh;
  width: 100vw;
  position: absolute;
  transition: transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  will-change: transform;
}

.panel:before {
  background-color: transparent;
  bottom: 0;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transition: background-color 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: 2;
}
.panel:after {
	content: "";
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: 90% 80% ;
	background-repeat: no-repeat;
	opacity: 1;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
	z-index: -1; 
}
/* image backgrounds */
.img-logo:after {
  background-image: url('../elements/avtoprenova_logo.svg');
  background-size: 30%;
  background-repeat: no-repeat center center fixed;
}
.img-messy:after {
  background-image: url('../elements/messy.jpg');
  background-repeat: no-repeat center center fixed;
}
.img-gun:after {
  background-image: url('../elements/gun.jpg');
  background-repeat: no-repeat center center fixed;
}
.img-komora:after {
  background-image: url('../elements/komora.jpg');
  background-repeat: no-repeat center center fixed;
}
.img-plocevinke:after {
  background-image: url('../elements/plocevinke.jpg');
  background-repeat: no-repeat center center fixed;
}
.img-zavarovalnice:after {
  background-image: url('../elements/zavarovalnice.jpg');
  background-repeat: no-repeat center center fixed;
}
.img-nadomestno:after {
  background-image: url('../elements/nadomestno.jpg');
  background-repeat: no-repeat center center fixed;
}
.img-paletke:after {
  background-image: url('../elements/paletke.jpg');
  background-repeat: no-repeat center center fixed;
}
.img-pistole:after {
  background-image: url('../elements/pistole.jpg');
  background-repeat: no-repeat center center fixed;
}
.show-all .panel:before {
  pointer-events: all;
}
.show-all .panel:hover:before {
  background-color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
}
.animate--shrink.animate .panel {
  transform: scale(0.9);
}
.animate--tilt.animate .panel {
  transform: scale(0.6) rotateY(-25deg);
}
.animate--tilt2.animate .panel {
  transform: scale(0.8) rotateX(25deg);
}


.panel[data-x-pos="-1"] {
  left: -100%;
}
.panel[data-x-pos="1"] {
  left: 100%;
}
.panel[data-y-pos="-1"] {
  top: 100%;
}
.panel[data-y-pos="1"] {
  top: -100%;
}

.panel__zoom {
  cursor: pointer;
  left: 50%;
  opacity: .2;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) translateY(-12vmin);
  transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  user-select: none;
  z-index: 99;
}
.panel__zoom:hover {
  opacity: 1;
}
.show-all .panel__zoom {
  pointer-events: none;
}
.panel__nav {
	font-size:3rem;
	cursor: pointer;
	opacity: .6;
	position: absolute;
	transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
	user-select: none;
	will-change: opacity;
	z-index:200;
  right: 1rem;
  top: 1rem;
}

.panel__nav:hover {
  opacity: 1;
}


/*Google map*/
.overmap-container {
	position: absolute;
	z-index:100;
	background: rgba(57, 66, 77, 0.0);
	width:40vw;
/*	height:100%; */
	overflow:visible;

}

.google-maps {
	position: relative;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden;
}
.google-maps iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}


/*text styles*/
h1, h2, p {
	color: white;
	}

h1 {
	font-size: 8vmin;
	text-align: left;
	text-transform: normal;
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	margin:0;
	padding: 10vmin 8vmin 1rem 10vmin;
	background: rgba(57, 66, 77, 0.8);
	width:45vw;
}

p {
	font-size: 2vmin;
	text-align: left;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	line-height: 2em;
	padding: 0rem 8vmin 5rem 10vmin;
	
	background: rgba(57, 66, 77, 0.8);
	width:45vw;	
	
	margin:0;
}

.strong{
	font-weight: 700;
	}
.link{
	text-decoration:underline;
	}
p.data{
	line-height: 1.4em;	
	padding-bottom:2rem
}
a {
	color: white;
}

/* burger icon */

.menu-ico {
  position: relative;
  padding-left: 1.5em;
  z-index:200;
}
.menu-ico:before {
  content: "";
  position: absolute;
  left: 0;
  top: .4em;
  width: 1em;
  height: 0.22em;
  background: black;
  box-shadow: 
    0 0.35em 0 0 black,
    0 0.7em 0 0 black;
}





/*non-desktop */
@media (max-width: 1024px) {
	body{
		overflow: scroll;
	}
	
	.panel-wrap {
		height: 100%;
		width: 100%;
	}	
	.panel__nav {
		display: none;
	}
	.panel {
		height: 100vh;
		width: 100vw;
		position: relative;
		border-top: 1px solid white;
	}

	.panel[data-x-pos="-1"] {
		left: auto;
		top: auto;
	}
	.panel[data-x-pos="1"] {
		left: auto;
		top: auto;
	}
	.panel[data-y-pos="-1"] {
		left: auto;
		top: auto;
	}
	.panel[data-y-pos="1"] {
		left: auto;
		top: auto;
	}	

.overmap-container {
	position: absolute;
	z-index:100;
	background: rgba(57, 66, 77, 0.0);
	width:40vw;

	overflow:visible;

}
h1, h2, p {
	color: white;
	background: rgba(57, 66, 77, 0.9);
	}
	h1 {
		font-size: 7vmin;
		text-align: left;
		text-transform: normal;
		font-family: 'Raleway', sans-serif;
		font-weight: 300;
		margin:0;
		padding: 5vmin 5vmin 0vmin 5vmin;
		width:45vw;

	}
	

	p {
		font-size: 4vmin;
		line-height: 1.6em;
		padding: 2vmin 5vmin 0vmin 5vmin;
		width:45vw;
		font-weight: 100;
		height:100%
	}  
    
 
  
}