html {
	text-align: center;
	font-size: 16px;
}

body {
	background-color: rgba(255,224,182,0.35 /*0.17*/);
	font-size: 100%; 											/* 1em - 10px */
	line-height: 1.6875em;
}

/*
html, body {
	margin: 0;
	padding: 0;
}
*/


/*** HEADER ***/


header {
	display: inline-block;
	width: 100%;
	height: auto;
	margin: 2em auto auto auto;
}

#logo {
	width: 70%;
	height: auto;
}

#logo:hover {
	-webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
	/*filter: url(shadow.svg#drop-shadow);*/
}

/*** END HEADER ***/


#list, #nav li, .nazaj {
	-webkit-transition: all .3s ease-in-out;					/*** tranzicije ***/
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}


/*** NAVIGATION ***/


.list {
	border: 1px solid #c3791e;
	border: 1px solid rgba(129,80,20,0.37);
	background-color: #fff;
	
	-webkit-box-shadow: 0px 5px 20px #ccc;						/*** sence v okvirju menija ***/	
	-moz-box-shadow: 0px 5px 20px #ccc;
	-o-box-shadow: 0px 5px 20px #ccc;
	box-shadow: 0px 5px 20px #ccc;
}

#list {
	width: 100%; /*80%*/
	height: auto;												/*** bela ruletka se prilagodi izbiri ***/	
	margin: 2em auto 0 auto;
	padding-top: 1.7em;
	padding-bottom: 1.7em;
	
	text-transform: uppercase;
	
	-webkit-text-shadow: 1px 1px rgba(205,205,205,0.67);
	-moz-text-shadow: 1px 1px rgba(205,205,205,0.67);
	-o-text-shadow: 1px 1px rgba(205,205,205,0.67);
	text-shadow: 1px 1px rgba(205,205,205,0.67);			
	
	-webkit-border-radius: 7px 7px 0 0;							/*** robovi v okvirju menija ***/	
	-moz-border-radius: 7px 7px 0 0;
	-o-border-radius: 7px 7px 0 0;
	border-radius: 7px 7px 0 0;
}

#nav {
	padding: 1.5em;
}

#nav li {
	border: 3px solid white;
	cursor: context-menu;
	display: inline-block;										/*** RULETKA ***/

	background-color: rgba(252,189,155,0.93);

	font: 1.2em Raleway, sans-serif, Verdana;
	font-weight: 100;	

	color: #63635c;												/*** barva teksta seznama menija ***/
	text-shadow: 1px 1px 1px #fff;								/*** bele sence v tekstu seznama menija ***/
	
	width: 7em;
	margin: 0.5em;
	padding: 1em;

	-webkit-border-radius: 7px;									/*** robovi v seznamu menija ***/
	-moz-border-radius: 7px;
	-o-border-radius: 7px;
	border-radius: 7px;
	
	-webkit-box-shadow: 3px 3px 5px rgba(183,180,180,0.74);		/*** sence v seznamu menija ***/
	-moz-box-shadow: 3px 3px 5px rgba(183,180,180,0.74);		
	-o-box-shadow: 3px 3px 5px rgba(183,180,180,0.74);
	box-shadow: 3px 3px 5px rgba(183,180,180,0.74);
}

#nav li:hover, .active {
	color: #dc692e;
	background-color: rgba(252,189,155,0.43);
	cursor: pointer;
	
	-webkit-transform: scale(1.1,1.1);
	-moz-transform: scale(1.1,1.1);
	-o-transform: scale(1.1,1.1);
	transform: scale(1.1,1.1);	
}

/*** END NAVIGATION ***/

/*** JEDRO VSEGA ***/


#okvir {
	width: 80%;
	height: auto;
	margin: 2em auto 4em auto;
	display: inline-block;
}

#okvir div {
	padding-bottom: 4em;
}


/*** end JEDRO VSEGA ***/


/*-------------------------------------------------------------------------------------------------------------------

													VSEBINA
			
--------------------------------------------------------------------------------------------------------------------*/


.hidden {
	display: inline-block;
}

.besedilo li, #slikanica, .cenik, #map, .vizitka-front, .vizitka-back{
	-webkit-box-shadow: 0px 5px 20px #ccc;
	-moz-box-shadow: 0px 5px 20px #ccc;
	-o-box-shadow: 0px 5px 20px #ccc;
	box-shadow: 0px 5px 20px #ccc;
}


/*------------------------------------------------     1     -------------------------------------------------------*/


.besedilo {
	width: 100%;
	text-align: justify;
	font: 1em noto sans, sans-serif;
	line-height: 1.75em;
	list-style-type: none;
	text-transform: none;
	padding: 0;
	margin: 0;
}

.besedilo li {
	display: inline-block;	
	padding: 2em;
	margin: 2em;

	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-o-border-radius: 7px;
	border-radius: 7px;	
}

.besedilo li span {
	font-weight: bold;
}

.levi {
	background-color: rgba(148,201,227,0.85);
	float: left;
}

.levi, .desni {
	width: 75%;
	
	-webkit-text-shadow: 1px 1px white;
	-moz-text-shadow: 1px 1px white;
	-o-text-shadow: 1px 1px white;
	text-shadow: 1px 1px white;	
}

.desni {
	background-color: rgba(255,123,171,0.55);
	float: right;
}
/*
.vmesni {
	background-color: rgba(39,156,98,0.74);
	#94e300
}
*/
.koncni {
	background-color: rgb(255,123,171);
	color: #fff;
	
	-webkit-text-shadow: 1px 1px black;
	-moz-text-shadow: 1px 1px black;
	-o-text-shadow: 1px 1px black;
	text-shadow: 1px 1px black;	
}


/*------------------------------------------------     2     -------------------------------------------------------*/


#slikanica {
	margin: 0;
	padding: 0;
}

.slikanica{
    width: 50%;
    float:left;
	margin: 0;
	padding: 0;
}

.slikanica img {
    width: 100%;
	display: block;
	margin: 0;
	padding: 0;
}

.slikanica-zadnja img {
    width: 100%;
	margin: 0;
	padding: 0;
}

/*------------------------------------------------     3     -------------------------------------------------------*/


.cenik {
	width: 100%;
	height: auto;
}


/*------------------------------------------------     4     -------------------------------------------------------*/


#qr-gps {
	width: 35em;
	height: auto;
}


#map {
	/*display: hide;*/
	width: 100%;
	height: 30em;
	border: 0;
	overflow: hidden;

	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-o-border-radius: 7px;
	border-radius: 7px;
}


/*------------------------------------------------     5     -------------------------------------------------------*/


.vizitka-front, .vizitka-back {
	width: 100%;
}

.flip {
	-webkit-perspective: 800;
	-moz-perspective: 800;
	-o-perspective: 800;
	perspective: 800;
	
	width: 40em;
	height: 22em;
	position: relative;
	margin: 2em auto 2em auto;
	
	/*border: 1px solid black;*/
}

.flip .card.flipped {
	-webkit-transform: rotatex(-180deg);
	-moz-transform: rotatex(-180deg);
	-o-transform: rotatex(-180deg);
	transform: rotatex(-180deg);
}

.flip .card {
	width: 100%;
	height: 100%;
	
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

.flip .card .face {
	width: 100%;
	height: 85%;
	position: absolute;
	
	-webkit-backface-visibility: hidden ;
	-moz-backface-visibility: hidden ;
	-o-backface-visibility: hidden ;
	backface-visibility: hidden ;	
	
	z-index: 2;
}

.flip .card .back {
	position: absolute;
	z-index: 1;
    cursor: pointer;
}

.flip .card .front {
	-webkit-transform: rotatex(-180deg);
	-moz-transform: rotatex(-180deg);
	-o-transform: rotatex(-180deg);
	transform: rotatex(-180deg);
	
    cursor: pointer;
}


/*-------------------------------------------------------------------------------------------------------------------

													end VSEBINA
			
--------------------------------------------------------------------------------------------------------------------*/


#ime {
	width: 55%;
}

#ime:hover {
	cursor: pointer;
} 

/*-------------------------------------------------------------------------------------------------------------------

												  SPODNJI SEGMENT
			
--------------------------------------------------------------------------------------------------------------------*/


/*------------------------------------------------    flip     -----------------------------------------------------*/

/*
.flip {
	-webkit-perspective: 800;
	-moz-perspective: 800;
	-ms-perspective: 800;
	-o-perspective: 800;
	perspective: 800;
	
	width: 400px;
	height: 200px;
	position: relative;
	margin: 50px auto;
}

.flip .card.flipped {
	-webkit-transform: rotatex(-180deg);
	-moz-transform: rotatex(-180deg);
	-ms-transform: rotatex(-180deg);
	-o-transform: rotatex(-180deg);
	transform: rotatex(-180deg);
}

.flip .card {
	width: 100%;
	height: 100%;
	
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-ms-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

.flip .card .face {
	width: 100%;
	height: 100%;
	position: absolute;
	
	-webkit-backface-visibility: hidden ;
	-moz-backface-visibility: hidden ;
	-ms-backface-visibility: hidden ;
	-o-backface-visibility: hidden ;
	backface-visibility: hidden ;	
	
	z-index: 2;
	font-family: Georgia;
	font-size: 3em;
	text-align: center;
	line-height: 200px;
}

.flip .card .front {
	position: absolute;
	z-index: 1;
    background: black;
    color: white;
    cursor: pointer;
}

.flip .card .back {
	-webkit-transform: rotatex(-180deg);
	-moz-transform: rotatex(-180deg);
	-ms-transform: rotatex(-180deg);
	-o-transform: rotatex(-180deg);
	transform: rotatex(-180deg);
	
    background: blue;
    background: white;
    color: black;
    cursor: pointer;
}

*/
/*--------------------------------------------     spodnji kvadratki     --------------------------------------------------*/

@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot?ps3cd0');
	src:url('../fonts/icomoon.eot?#iefixps3cd0') format('embedded-opentype'),
		url('../fonts/icomoon.woff?ps3cd0') format('woff'),
		url('../fonts/icomoon.ttf?ps3cd0') format('truetype'),
		url('../fonts/icomoon.svg?ps3cd0#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-googleplus:before {
	content: "\e600";
}
.icon-facebook:before {
	content: "\e601";
}
.icon-twitter:before {
	content: "\e602";
}

#social {
	margin: 3em auto 3em auto;
	width: 100%;
	height: auto;
}

.social {
	padding: 0em;
	margin: 4em 8em 4em 8em;
}

.social a {
	list-style-type: none;
	display: inline;	
	/*width: 8em;
	height: 8em;*/
}

.google {
	float: left;
	color: red;
}

#google, #facebook, #twitter {	
	width: 125px;
	height: 125px;

	text-decoration: none;
	display: inline-block;
	border: 0 solid white;
}

.twitter {
	float: right;
}

.social-invisible {
	visibility: hidden;
}

.google:hover, .facebook:hover, .twitter:hover {
	color: white;
}

#zadnji {
	margin: 2em auto 0em auto;
	width: 100%;
	height: auto;
	background-color: #FFCC33;	
	font: 3em sans-serif;
	color: white;
	text-shadow: 1px 1px 1px black ;
	
	-webkit-border-radius: 0 0 7px 7px;
	-moz-border-radius: 0 0 7px 7px;
	-o-border-radius: 0 0 7px 7px;
	border-radius: 0 0 7px 7px;
}

#zadnji:hover {
	background-color: #FFFF7A;
}

.zadnji {
	margin: 2em auto 2em auto;
}


/*--------------------------------------------     back to top     --------------------------------------------------*/


.nazaj {
	height: 15em;
	width: 15em;
	margin: 12em auto 2em auto;
	background-color: #F17BA9;					/* pink	#F17BA9		blue   #4db8d6*/
	box-shadow: 0 0 0 5px #F17BA9;
	border-radius: 50%;
}
    
.nazaj:hover {
    cursor: pointer; 
    
    -webkit-animation:bounceOut .6s linear;
    -moz-animation:bounceOut .4s linear;
}

@-webkit-keyframes bounceOut {
    0%{ box-shadow: 0 0 0 4px #F17BA9; opacity:1;}
    25%{ box-shadow: 0 0 0 1px #F17BA9; opacity:1;}
    50%{ box-shadow: 0 0 0 7px #F17BA9; opacity:1;}
    75%{ box-shadow: 0 0 0 4px #F17BA9; opacity:1;}
    100%{ box-shadow: 0 0 0 5px #F17BA9; opacity:1;}
}

@-moz-keyframes bounceOut {
    0%{ box-shadow: 0 0 0 4px #F17BA9; opacity:1;}
    25%{ box-shadow: 0 0 0 1px #F17BA9; opacity:1;}
    50%{ box-shadow: 0 0 0 7px #F17BA9; opacity:1;}
    75%{ box-shadow: 0 0 0 4px #F17BA9; opacity:1;}
    100%{ box-shadow: 0 0 0 5px #F17BA9; opacity:1;}
}

/*codepen.io/seraphzz/pen/wHGDz*/
/*-------------------------------------------------------------------------------------------------------------------

												 end SPODNJI SEGMENT
			
--------------------------------------------------------------------------------------------------------------------*/


/*------------------------------------------------    avtor     -----------------------------------------------------*/


.avtor {
	position: absolute;
	right: 0;
	
	opacity: 0.4;
	
	font: 0.6em Noto Sans;
	color: grey;
	text-shadow: 1px 1px 1px #fff;
}

.avtor img {
	width: 5em;
	height: auto;
}

.avtor:hover {
	opacity: 1;
}


/*-------------------------------------------------------------------------------------------------------------------

													RIBBON
			
--------------------------------------------------------------------------------------------------------------------*/


.wrapper {
  position: relative;
}

.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -31px;
  right: -3px;
}

.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45); 
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}


/*-------------------------------------------------------------------------------------------------------------------

		MEDIA QUERIES		MEDIA QUERIES		MEDIA QUERIES		MEDIA QUERIES		MEDIA QUERIES
			
--------------------------------------------------------------------------------------------------------------------*/


/* Landscape phones and down */
@media (max-width: 680px){/*480*/
html, body {pading: 0; margin: 0}

	#logo {
		width: 95%;
		height: auto;
	}
	
	#nav li {
		border: 6px solid white;
		display: inline-block;
	
		font-size: 1.6em;	

		width: 6em;
		margin: 0.5em;
		padding: 1.25em;
	}
	
	#okvir {
		width: 100%;
		height: auto;
		display: block;
	}

	.besedilo {
		font-size: 1.25em;
		line-height: 1.5;
	}

	.besedilo li {
		padding: 2em;
		margin: 1em;
		/*border: 3px solid black;*/		
	}
	
	.levi, .desni {
		float: none;
		width: auto;	
	}

	.slikanica {
		width: 100%;
		float: none;
	}

	#qr-gps {
		width: 100%;
	}

	#map {
		width: 100%;
		height: 20em;
	}
		
	#ime {
		width: 75%;
	}	

	.social {
		margin: 4em 4em 4em 4em;
	}

	.back-to-top img {
		width: 15em;
		opacity: 1;
	}

}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
	html, body {pading: 0; margin: 0}

	#logo {
		width: 95%;
		height: auto;
	}
	
	#nav li {
		border: 6px solid white;
		display: inline-block;
	
		font-size: 1.6em;	

		width: 6em;
		margin: 0.5em;
		padding: 1.25em;
	}
	
	#okvir {
		width: 100%;
		height: auto;
		display: block;
	}

	.besedilo {
		font-size: 1.25em;
		line-height: 1.5;
	}

	.besedilo li {
		padding: 2em;
		margin: 1em;
		/*border: 3px solid black;*/		
	}
	
	.levi, .desni {
		float: none;
		width: auto;	
	}

	.slikanica {
		width: 100%;
		float: none;
	}
	
	#qr-gps {
		width: 55%;
	}

	#map {
		width: 100%;
		height: 20em;
	}
		
	#ime {
		width: 75%;
	}	

	.back-to-top img {
		width: 15em;
		opacity: 1;
	}

}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 1070px) {/*979px*/
	html, body {pading: 0; margin: 0}
	
	#logo {
		width: 95%;
		height: auto;
	}
	
	#nav li {
		border: 6px solid white;
		display: inline-block;
	
		font-size: 1.6em;	

		width: 6em;
		margin: 0.5em;
		padding: 1.25em;
	}
	
	#okvir {
		width: 100%;
		height: auto;
		display: block;
	}

	.besedilo {
		font-size: 1.2em;
	}
	
	.levi, .desni {
		width: 70%;	
	}

	#qr-gps {
		width: 55%;
	}

	#map {
		width: 100%;
		height: 35em;
	}
	
	#ime {
		width: 32em;
	}

	.back-to-top img {
		width: 20em;
		opacity: 1;
	}

}

/* Large desktop 
@media (min-width: 1200px) {



}
*/