/*import other CSS*/
@import url("jp_grid.css");
@import url("jp_fonts.css");


/*type*/

html {font-size: 1em;}

body {
	width: 100%;
	margin: 0px;
	padding: 0px;
	font-family: 'Source Sans Pro', arial, helvetica, sans-serif;
	font-weight: 200;
	line-height: 1.45;
	color: #151515;
	background-color: #fff;
}

p {margin-bottom: 1.3em;}

h1, h2, h3, h4 {
margin: 1.414em 0 0.5em;
font-weight: inherit;
line-height: 1.2;
}

h1 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 6.854em;
}

h2 {font-size: 4.236em;}

h3 {font-size: 2.618em;}

h4 {font-size: 1.618em;}

small, .font_small {font-size: 0.618em;}

blockquote {
	border: 1px solid #fff;
	margin: 0px auto;
	quotes: "\201C""\201D""\2018""\2019";
	color: #fff;
	display: block;
}
blockquote:before {
	color: #fff;
	content: open-quote;
	font-size: 4em;
	line-height: 0.1em;
	margin-right: 0.25em;
	vertical-align: -0.4em;
}

blockquote p {
	
	display: inline;
	font-size: 1.61em;
	font-weight: 500;
}
blockquote footer{
	text-align: right;
}

blockquote footer:before{
	content: "-";
}


/*general stuff*/

a{
	text-decoration: none;
	color: #222;
	transition:	color .2s linear;
}

a:hover{
	color: #999;
	transition:	color .2s linear;
	}


/*header*/
header{
	width: 100%;
	height: 100%;
	height: 100vh;
	/*
	height: calc(100vh - 0px);
	*/
	box-sizing: border-box;
	padding: 0px 0px 0px 0px;

}

#front_okvir{
	width: 100%;
	height: 100%;
		overflow: hidden;
		position: relative;
}

#logotip{
	width: 16.2%;
	min-width: 300px;
	height: auto;
	position: absolute;
	top: 100px;
	left: 100px;
	z-index: 5;
	font-size: 0;
	line-height: 0;
}

#logotip img{
	width: 100%;
}

.plezalnicenter{
	padding: 10px;
	background-color:#5ec233;
	text-align: center;
	font-size: 34px;
	font-weight: 600;
	width: 100%;
	display: block;
	box-sizing: border-box;
	line-height: 1em;
	margin-top: 15px;
}
.plezalnicenter:after{
	content: 'plezalni center';
	text-transform: uppercase;
}

header img.slika_ozadje{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
	object-position: 50% 50%;
	z-index: -1;
}


#front_napisi{
	position: absolute;
	right: 100px;
	bottom: 100px;
}

#front_okvir h1{
	
	display: inline;
	font-weight: 600;
	text-transform: uppercase;
	color: #fff;
	background-color: #151515;
	
	padding: 20px 30px;
	font-size: 60px;
	letter-spacing: .1em;
}

#front_okvir h1:before{
	content: '#';
}

.front_urnik {
	clear: both;
	display: inline-block;
	display: none;
	font-weight: 300;
	color: #fff;
	background-color: #151515;
	margin-top: 40px;
	margin-bottom: 0px;
	padding: 10px 20px;
	font-size: 20px;
	letter-spacing: .1em;
	text-align: center;
	float: right;
}

/*branding*/


	
#cookie_settings_link{
	cursor: pointer;
	color: #bbb;
	transition: color .2s ease;
}

#cookie_settings_link a:hover{
	color: #fff;
	transition: color .2s ease;
}

/*cookies popup*/
#cookies_popup{
position: fixed;
height: auto;
padding: 11px;
bottom: 22px;
right: 22px;
background: #ccc;
z-index: 506;
width: auto;
}


#cookies_buttons{
	display: block;
}

.cookies_unit{
	display: block;
}

.cookies_button{
	padding:11px 11px 9px 11px;
	background-color: #151515;
	color: #fff;
	display: inline-block;
	width: auto;
	cursor: pointer;
	transition: .2s ease;
	}

.cookies_button:hover{
	background-color: #333;
	transition: .2s ease;
}
	
#cookies_accept{
	border-bottom: 2px solid green;
}

#cookies_deny{
	border-bottom: 2px solid red;
}	

#cookies_text{
	margin-bottom:11px;
}


#cookie_small_print{
	font-size: .75em;
}



.notice_hide{
right: -500px !important;
transition: right .3s ease;
}

.notice_appear{
right: 11px;
transition: right .3s ease;
}


/*teksti*/

#aktivnosti{
	padding: 20px 20px 20px 20px ;
	display: grid;
	grid-gap: 20px;
	grid-template-columns: auto auto auto auto;
	/*transition: filter .2s linear*/;
}

.razdelek{
	color: #fff;
	position: relative;
	text-align: center;
	min-height: 33vh;
	box-sizing: border-box;
	overflow: hidden;
	}


/*uvodni trening*/
.razdelek:first-child{
	 grid-column: 1 / 3;
 
  grid-row: 1 / 3;
}


	/*o sceni*/
.razdelek:nth-child(2){
	 grid-column: 3 / 5;
   grid-row: 1 / 2;
}
	/*samostojni obiski*/
.razdelek:nth-child(3){
	 grid-column: 3 / 5;
   grid-row: 2 / 3;
}

/*plezanjezapodjetja*/
.razdelek:nth-child(6){
	grid-column-start: 3;
grid-column-end: 5;
}


.slika_razdelka{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
	object-position: 50% 50%;
	z-index: -1;
	
	transition: transform .2s linear;
}

.razdelek_link{
	display: block;
	z-index: 4;
	width: 100%;
	height: 100%;
	position: absolute;
}

.razdelek_naslovje{
	display: block;
	position: absolute;
	bottom: 25px;
	right:25px;
	box-sizing: border-box;
	padding: 10px 15px 8px 15px;
	background:#151515;
	text-align: right;
	z-index: 2;
	cursor: pointer;
	max-width: 80%;
	transition: padding .2s linear, background .2s linear;
}

.razdelek:hover .razdelek_naslovje{
	
	/*
	background:#5ec233;
	transition: padding .2s linear, background .2s linear;
	*/
}

.razdelek:hover .slika_razdelka{
	
	transform: scale(1.05);
	transition: transform .2s linear;
	
}

/*
.razdelek h2:after{
	content: '›';
	font-family: arial, helvetica, sans-serif;
	vertical-align: top;
	padding-left: 0px;
	width: 0px;
	height: 0;
	overflow:hidden;
	font-size: 0;
	
		transition: font-size .2s linear, padding .2s linear;
}

.razdelek:hover .razdelek_naslovje h2:after{
	font-size: 1.2em;
		padding-left: 10px;
		transition: font-size .2s linear, padding .2s linear;
}
*/
.razdelek h2,
.razdelek h3{
	display: inline;
	font-weight: 600;
    z-index: 2;
    line-height: 1em;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #fff;
	box-sizing: border-box;
	margin: 0px auto 0px auto;
	transition: color .2s linear;
}

.razdelek:hover .razdelek_naslovje h2 {
	/*
	color: #151515;
	transition: color .2s linear;
	*/
}
	
.razdelek h2{
	font-size: 20px;
}
.razdelek h3{
	font-size: 22px;
}

.razdelek:after{
	position: absolute;
	top: 0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(255,255,255,.6);
background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.3) 100%);
background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 65%,rgba(0,0,0,0.3) 100%);
background: radial-gradient(ellipse at center,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 65%,rgba(0,0,0,0.3) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#4d000000',GradientType=1 );


	content:' ';
	z-index:1;
  pointer-events: none;
opacity: 0;
box-sizing: border-box;

	transition: opacity .2s ease;
}

.razdelek:hover:after{
	opacity: 1;
	transition: opacity .8s ease;
}

.vsebina_razdelka{
	
	display: block;
	height: 0px;
	overflow:hidden;
}

.infolink{
	position: absolute;
	top: 20px;
	left: -60px;
	background:#5ec233;
	color: #151515;
	z-index: 6;
	box-sizing: border-box;
	padding: 10px 15px 8px 15px;
	transition: left .2s linear,background-color .2s linear, color .2s linear;
	}
	
.vprasaj{
	
	font-weight: 400;
	line-height: 30px;
	font-size: 20px;
}
.vprasaj:after{
	content:'...';
}

.razdelek:hover .infolink{
	left: 0px;
	transition: left .2s linear,background-color .2s linear, color .2s linear;
}

.infolink:hover{
	cursor: pointer;
	background:#151515;
	cursor: pointer;
	color: #fff;
	transition: left .2s linear,background-color .2s linear, color .2s linear;
}

/*popup*/

#popup{
	position: fixed;
	width: 100%;
	height: 100%;
	height: 100vh;
	background: rgba(255,255,255,.0);
	z-index: 6;
	top: 0;
	left:0;
	overflow: auto;
	transition: top .2s linear;
}

#popup.popup_zaprt{
	top: 100%;
	transition: top .2s linear;
}

#popup_close{
	position: absolute;
	top: 0px;
	right: 0px;
	width: 40px;
	height: 40px;
	color: #151515;
	text-align: center;
	font-weight: bold;
	font-size: 25px;
	line-height: 40px;
	cursor: pointer;
	transition: background-color .2s linear, color .2s linear;
	
}

#popup_close:after{
	content: "×"
}

#popup_close:hover{
	background:#151515;
	color: #fff;
	transition: background-color .2s linear, color .2s linear;
}

#popup_text_okrog{
	max-width: 800px;
	box-sizing: border-box;
	padding: 60px;
	margin: 40px auto;
	background: #fff;
	position: relative;
}

#popup_text:before{
	display: block;
	content: '#gremoplezat';
	color:#5ec233;
	border-bottom:2px solid #5ec233;
	font-weight: 700;
	font-size: 30px;
	text-align: right;
	letter-spacing: .05em;
	text-transform: uppercase;
}

#popup_text{
	font-size: 20px;
}

#popup_text h2{
	margin-top: 50px;
	margin-bottom:40px;
	font-weight: 700;
	font-size: 45px;
}
#popup_text h3{
	margin-top: 40px;
	font-weight: 500;
	font-size: 30px;
}

#popup_text p:last-child{
	margin-bottom: 0px;
}

#popup_text a{
	color: #5ec233;
}

#popup_akcija {
	text-align: right;
}

#popup_akcija a{
	display: inline-block;
	margin: 40px 0px 0px auto;
	padding: 10px 15px;
	color: #151515;
	background-color:#5ec233;
	font-weight:600;
		transition: background-color .2s linear, color .2s linear;
	font-size: 25px;
}

#popup_akcija a:hover{
	color: #fff;
	background-color:#151515;
		transition: background-color .2s linear, color .2s linear;
}
#popup_akcija a:after{
	content: '›';
	font-family: arial, helvetica, sans-serif;
	vertical-align: top;
	font-size: 30px;
	line-height:33px;
	padding-left: 5px;
}
.megla{
	filter: blur(2px);
	/*
	transition: filter .2s linear;
	*/
}

/*spodaj*/

#povezave_spodaj{
	padding: 0px 20px 20px 20px ;
	display: grid;
	grid-gap:20px;
	grid-template-columns: repeat(4, 1fr);
	/*transition: filter .2s linear;*/
	box-sizing: border-box;
}

.razdelek_spodaj{
	text-align: center;
	color: #151515;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	
}

.razdelek_spodaj img{
	width: 100%;
	height: auto;
}

.razdelek_spodaj a.velikapovezava{
	display: flex;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height: 100%;
	box-sizing: border-box;
	font-size: 26px;
	padding: 0 10px;
	font-weight: 600;
	display: flex;
  align-items: center;
  justify-content: center;
  border: 5px solid  #5ec233;
}

.razdelek_spodaj a:hover{
	color:#5ec233;
}

#slogan{
	
	background: #151515;
	color: #5ec233;
	
	font-size: 25px;
}

#slogan_vsebina{
	height: 100%;
	display: flex;
  align-items: center;
  justify-content: center;
	font-size: 26px;
  padding: 20px 25px;
  box-sizing: border-box;
}

#scena_logotip{
	font-size: 0px;
	line-height: 0px;
	background: #5ec233;
	display: flex;
  align-items: center;
  justify-content: center;
}

.sloga_okrog{
	display: block;
}

.pgu{
	font-weight: 600;
	text-align: center;
	display: block;
	font-size: 25px;
	clear: both;
	text-transform: uppercase;

	padding-bottom: 0px;
}

.pgu p{	margin-bottom: 10px; margin-top: 0px;}
.kfh p{	margin-top: 0px; margin-bottom: 0px}

.kfh{
	display: block;
	clear: both;
	margin-top: 0px;
}

.jp{
	
}

/*footer links*/

#footer_links{
	text-align: center;
	padding: 80px 20px 80px 20px;
}

#footer_links ul{
	listy-style-type: none;
	padding-left: 0;
}


#footer_links ul li{
	display: inline-block;
}

.footer_link{
	text-transform: uppercase;
	font-weight: 600;
	font-size: 26px;
}
.footer_link a:hover{
	color: #5ec233;
}

.footer_link:after{
	content:'|';
	padding: 0px 20px;
}
.footer_link:last-child:after{
	content:'';
	padding: 0px 0px;
}

/*foter_credits*/
#footer_credits{
	text-align: center;
	padding: 0 20px 20px 20px;}
.footer_credit{
	color: #bebebe;
}
.footer_credit a{
	color: #bebebe;
}

.footer_credit a:hover{
	color:  #5ec233;
}

.footer_credit:after{
	content:'|';
	padding: 0px 10px;
}
.footer_credit:last-child:after{
	content:'';
	padding: 0px 0px;
}



#janezpolc {
    background-image: url('../img/jp_logo.png');
    background-image: url('../svg/jp_logo.svg');
    background-size: cover;
    background-repeat: no-repeat;
	background-position: 50% 50%;
	display: inline-block;
	width: 20px;
    height: 20px;
	font-size: 0px;
	margin-top: -2px;
	  filter: grayscale(100%);
	vertical-align: middle;
	opacity: .4;
}

#janezpolc:hover {
		  filter: grayscale(0%);
	opacity: 1;
	transition: opacity .2s linear, filter .2s linear;
}


@media screen and (max-width: 1300px) {
	
	#aktivnosti{
		grid-template-columns: auto auto auto;
	}
	
	/*uvodni trening*/
	.razdelek:first-child{
		 grid-column: 1 / 5;
	 
	  grid-row: 1 / 2;
	}


		/*o sceni*/
	.razdelek:nth-child(2){
		 grid-column: 1 / 3;
	   grid-row: 2 / 3;
	}
		/*samostojni obiski*/
	.razdelek:nth-child(3){
		 grid-column: 3 / 5;
	    grid-row: 2 / 3;
	}

	
}

@media screen and (max-width: 1000px) {
	#front_napisi {
		right: auto;
		left: 100px;
	}
	
	.front_urnik{
		float: left;
	}
}


@media screen and (max-width: 800px) {
	
	#logotip {
    width: 16.2%;
    min-width: 200px;
	}
	
	.plezalnicenter {
		font-size: 20px;
	}
	
	#front_okvir h1 {
		padding: 10px 20px;
		font-size: 40px;
	}
	
	#aktivnosti{
		grid-template-columns: auto auto;
	}
	
	.razdelek:nth-child(1){
		 grid-column: 1 / 3;
	   grid-row: 1 / 2;
	}
	
	.razdelek:nth-child(2){
		 grid-column: 1 / 3;
	   grid-row: 2 / 3;
	}
		/*samostojni obiski*/
	.razdelek:nth-child(3){
		 grid-column: 1 / 3;
	    grid-row: 3 / 4;
	}
	
	.razdelek:nth-child(4){
		 grid-column: 1 / 2;
	   grid-row: 4 / 5;
	}
		/*samostojni obiski*/
	.razdelek:nth-child(5){
		 grid-column: 2 / 3;
	    grid-row: 4 / 5;
	}
	.razdelek:nth-child(6){
		 grid-column: 2 / 2;
	   grid-row: 5 / 6;
	grid-column-start: 1;
grid-column-end: 3;
}
	
		/*samostojni obiski*/
	.razdelek:nth-child(7){
		 grid-column: 2 / 3;
	    grid-row: 5 / 6;
	}
	
	

	
	.razdelek_spodaj{
		height: auto;
		min-height: 150px;
	}
	
	#povezave_spodaj {
   
    grid-gap: 20px;
    grid-template-columns: auto auto;

}
	
}

@media screen and (max-width: 750px) {
	#footer_links {
		padding: 20px 20px;
	}
	#footer_links ul li {
		display: block;
	}
		
	.footer_link::after {

		content: '';
		padding: 0px 0px;

	}

	#popup_text_okrog {
		padding: 60px 40px 40px 40px;
		margin: 0px auto;
	 }
	 
	 #popup_close {
	   
		width: 60px;
		height: 60px;
		
	}
	#popup_close::after {
		font-size: 40px;
		line-height: 60px;
	}
}

/*mobile*/
@media screen and (max-width: 670px) {
	
	body{
		font-size: .9em;
	}
	/*header*/
}


@media screen and (max-width: 600px) {
	#logotip {
   
    width: 250px;
    height: auto;
    position: absolute;
    top: 100px;
    left: 50%;
    z-index: 5;
    font-size: 0;
    line-height: 0;
	margin-left: -125px;
	}
	
	.plezalnicenter {
		font-size: 20px;
	}
	
	#front_napisi {
		
		left: 50%;
    transform: translate(-50%, 0);
	}
	#popup_text_okrog {
    padding: 60px 20px 20px 20px;
    margin: 0px auto;
 }
}


@media screen and (max-width: 500px) {
	#logotip {
		top: 20px;
		width: 150px;
		min-width: 150px;
		margin-left: -75px;
		left: 50%;
		
	}
	
	.plezalnicenter {
    font-size: 16px;
}	
	#front_napisi{
		bottom: 40px;
	}

	#front_okvir h1 {
		padding: 10px 20px;
		font-size: 30px;
	}
	
	#aktivnosti,
	#povezave_spodaj{
		grid-template-columns: auto ;
	}
	
	.razdelek:nth-child(1),
	.razdelek:nth-child(2),
	.razdelek:nth-child(3),
	.razdelek:nth-child(4),
	.razdelek:nth-child(5),
	.razdelek:nth-child(6),
	.razdelek:nth-child(7),
	.razdelek_spodaj{
		grid-column: auto;
	   grid-row: auto;
	}
	
}