@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Calibri Light', sans-serif;
} 


body{
   background-color:  #E6E6E6;
   height: 100%;
   /*font-family: 'Calibri Light', sans-serif;*/
}


div.galleryOkvir {
  float: left;
  width: 410px; 
}

div.galleryOkvir img {
  height:250px;
  width: 400px;
  cursor: pointer; 
  border: 1px solid black; 
}



div.gallery {
  float: left;
  width: 410px;
}

div.gallery img {
  height:250px;
  width: 400px;
  cursor: pointer; 
  /*border: 1px solid #E6E6E6;*/	 
}


/**/
.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

html {
  /*font-family: "Calibri Light", sans-serif;*/
  height: 100%;
}

/**/
calibri {
  color: #393537;	
  font-size: 16px;
  font-family: 'Calibri Bold', sans-serif;
  font-weight: bold;
}

.sidebar{
  margin: 0;
  width: 25%; /*350px;*/
  background-color: #42404D; /*#1f1f26;*/
  height: 100%;
  overflow: auto;
  position: fixed; 
  padding: 30px 70px;  /*PRVA: koliko od zgornjega roba dol - slika DRUGA:koliko od roba je meni*/
  font-family: 'Calibri Light', sans-serif;
}


.sidebar povezava{
  color: #a18fb3;
  display: block;
  font-size: 16px;
  padding-top: 0px;
  padding: 0px 35px;  /*PRVA: koliko od zgornjega roba dol DRUGA:koliko od roba je zacetek zapisa v meniju*/
  /*font-family: 'Calibri Light', sans-serif;*/

}

.sidebar ul li{
  padding: 10px;
  list-style-type:none;
}    

.sidebar ul li a{
  color: #a18fb3;
  display: block;
  font-size: 18px;
  padding-top: 0px;
  /*font-family: 'Calibri Light', sans-serif;*/
}

.sidebar ul li a .fa{              
  position: left;
  left: 12px;
  color: lighten($color-dark, 16);		
}



.sidebar a.active {
  background-color: #04AA6D;
  color: white;
}

.sidebar a:link {
  text-decoration: none;
}

.sidebar a:visited {
  text-decoration: none;
}

.sidebar a:hover {
  text-decoration: none;
}

.sidebar a:active {
  text-decoration: none;
}

.sidebar .social_mediaIkone { 
  padding: 80px 40px;
  padding-bottom: 5px;
}

.sidebar .social_mediaIkone a img{
	width:15%; height=15%;
}		

.main_content{
  margin-left:  25%;  /*200px;  konec: desna stran menija - začetek: leva stran besedila*/  
  height: auto;
  width: auto;
  /*font-family: 'Calibri Light', sans-serif;*/
  background: #E6E6E6;
}

.main_content .header{
  padding: 0px;
  background: #E6E6E6; /*#f3f5f9;*/
  color: #a18fb3;
  border-bottom: 1px solid #E6E6E6;
  /*font-family: 'Calibri Light', sans-serif;*/
}

.main_content .info{
  margin-left:  5%; 
  margin: 20px;
  color: #717171;
  line-height: 25px;
  /*font-family: 'Calibri Light', sans-serif;*/
}

.main_content .info div{
  font-size: 20px;
  margin-bottom: 30px; /*20*/
  /*font-family: 'Calibri Light', sans-serif;*/
}

.main_content .info .naslov {
  color: #393537;	
  font-size: 44px;
  margin-bottom: 30px; /*20*/
  margin-left:  5%;
  font-family: 'Calibri Bold', sans-serif;
  line-height: 1.4;
  font-weight: bold;
}

.main_content .info  ul li {
  color: #393537;
  font-size: 24px;
  margin-bottom: 0px; 
  margin-left:  7%;
  text-align: left;
  font-family: 'Calibri Light', sans-serif;
}

.main_content .info .besedilo {
  color: #393537;
  font-size: 24px;
  margin-bottom: 30px; 
  margin-left:  5%;
  text-align: justify;
  text-justify: inter-word;
  font-family: 'Calibri Light', sans-serif;
}

.main_content .row_1 .col-4 .deli_1 
{
	 width:150px; 
	 border: 1px; 
	 border-style: solid none solid none; 
	 font-size: 18px; 
	 margin-top: -100px;  /*margin-top: 90%; nastavikje bo DELI pozicioniran!!!*/
}

.main_content .row_1 .col-4 .deli_1 a img{
	width: 20%; 
	height: 20%;
	margin-bottom: 0px;
	margin-top: 2px;
}
.main_content .row_1 .col-4 .deli_1 a:link {
  text-decoration: none;
}

.main_content .row_1 .col-4 .deli_12 
{
	 width:150px; 
	 border: 1px; 
	 border-style: solid none solid none; 
	 font-size: 18px; 
	 margin-top: 5px;  /*margin-top: 90%; nastavikje bo DELI pozicioniran!!!*/
}

.main_content .row_1 .col-4 .deli_2
{
	margin-left:  1%; 
	margin-top: -500px;  /*margin-top: 90%; nastavikje bo DELI pozicioniran!!!*/		  
}

.main_content .row_1 .col-4 .deli_3
{
	margin-left:  1%; 
	margin-top: -650px;  /*margin-top: 90%; nastavikje bo DELI pozicioniran!!!*/		  
}
		
.main_content .info .besediloLevo {
  color: #393537;
  font-size: 24px;
  margin-bottom: 30px; /*20*/
  margin-left:  5%;
  text-align: right;
  /*text-justify: inter-word;*/
  font-family: 'Calibri Light', sans-serif;
}


.main_content .info .besediloDesno  {
  color: #393537;
  font-size: 16px;
  margin-bottom: 1px; 
  margin-left:  10%;
  text-align: left;
  font-family: 'Calibri Light', sans-serif;
}
.main_content .info .besediloMalo {
  color: #393537;
  font-size: 18px;
  margin-bottom: 30px; 
  margin-left:  5%;
  font-family: 'Calibri Light', sans-serif;
}


/*KONTAKT*/
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  font-family: 'Calibri Light', sans-serif;
  font-size: 20px;
  width:600px;
}

/*gumb Poslji*/
input[type=submit] {
  background-color: #42404D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Calibri Light', sans-serif;
  width: 100px;
  height: 50px;
  font-size: 20px;
}

input[type=email], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  font-family: 'Calibri Light', sans-serif;
  font-size: 20px;
  width:600px;
}

input[type=submit]:hover {
  background-color: black;
}




/*KONTAKTNI OBRAZEC*/
.container {
  display: grid;
  
  float: left; 
  background: #E6E6E6;
  font-family: 'Calibri Light', sans-serif; 
  color: #393537; 
  font-size:24px; 
  text-align: left; 
  
  margin-left:  5%;
  
}


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

/*RAZLICNI EKRANI*/
@media screen and (max-width: 1024px) {
	  .sidebar {
		width: 100%;
		height: auto;
		position: relative;
		font-family: 'Calibri Light', sans-serif;
	  }
	  .sidebar a {
		  float: left;
	  }
	  .sidebar povezava{
		  color: #a18fb3;
		  display: block;
		  font-size: 16px;
		  padding-top: 0px;
		  padding: 0px 20px;  /*PRVA: koliko od zgornjega roba dol DRUGA:koliko od roba je zacetek zapisa v meniju*/
	  }

		.sidebar ul li{
		  padding: 10px;
		  list-style-type:none;
		}    

		.sidebar ul li a{
		  color: #a18fb3;
		  display: block;
		  font-size: 16px;
		  padding-top: 0px;
		}
		
		/* zmanjša logo na mobitelih
		.sidebar img{
		  width:70%; height=70%;
		}*/
		
		.sidebar .social_mediaIkone {
		  /*padding: 30px;*/
		  float: left;
		  display: flex;
		 /* align-items: center; /* Responsible for aligning the content in the center vertically */
		}
		.sidebar .social_mediaIkone a img{
			width:35%; height=35%;
	    }		
		
	  div.main_content {
		  margin-left: 0;
		  text-align: left; 
	  }
	  
	  .main_content .info .naslov {
		  color: #393537;	
		  font-size: 26px;
		  margin-bottom: 30px; 
		  margin-left:  5%;
		  font-family: 'Calibri Bold', sans-serif;
		  line-height: 1.4;
		  font-weight: bold;
		  
		}

		.main_content .info  ul li {
		  color: #393537;
		  font-size: 16px;
		  margin-bottom: 0px; 
		  margin-left:  7%;
		  text-align: left;
		  font-family: 'Calibri Light', sans-serif;
		}

		.main_content .info .besedilo {
		  color: #393537;
		  font-size: 16px;
		  margin-bottom: 30px; 
		  margin-left:  5%;
		  text-align: justify;
		  text-justify: inter-word;
		  font-family: 'Calibri Light', sans-serif;
		}
		
			
		.main_content .row_1 .col-4 .deli_1
		{
			margin-left:  10%; width:150px; border: 1px; border-style: solid none solid none; font-size: 16px; margin-top: -5%; 
		}
		
		.main_content .row_1 .col-4 .deli_12 
		{
			margin-left:  10%; width:150px; border: 1px; border-style: solid none solid none; font-size: 16px; margin-top: 5%; 
	
		} 
		.main_content .row_1 .col-4 .deli_2
		{
		  margin-left: 10%; 
		  margin-top: 1%;	
		}
	
	    .main_content .row_1 .col-4 .deli_3
		{
		  margin-left: 1%; /* margin-left: 10%; */
		  margin-top: 1%;	
		}
		
		.main_content .row .col-4  
		{  margin-left:  10%;
		   
		}
		
		.main_content .row_1 .col-4 .deli_1 a img{
			width: 20%; 
			height: 20%;
			margin-bottom: 0px;
			margin-top: 2px;
		}
		.main_content .row_1 .col-4 .deli_1 a:link {
		  text-decoration: none;
		}

		
		/*KONTAKT*/
		input[type=text], select, textarea {
		  width: 100%;
		  padding: 12px;
		  border: 1px solid #ccc;
		  border-radius: 4px;
		  box-sizing: border-box;
		  margin-top: 6px;
		  margin-bottom: 16px;
		  resize: vertical;
		  font-family: 'Calibri Light', sans-serif;
		  font-size: 16px;
		  width: 300px;
		}

		/*gumb Poslji*/
		input[type=submit] {
		  background-color: #42404D;
		  color: white;
		  padding: 12px 20px;
		  border: none;
		  border-radius: 4px;
		  cursor: pointer;
		  font-family: 'Calibri Light', sans-serif;
		  width: 100px;
		  height: 50px;
		  font-size: 16px;
		}

		input[type=email], select, textarea {
		  width: 100%;
		  padding: 12px;
		  border: 1px solid #ccc;
		  border-radius: 4px;
		  box-sizing: border-box;
		  margin-top: 6px;
		  margin-bottom: 16px;
		  resize: vertical;
		  font-family: 'Calibri Light', sans-serif;
		  font-size: 16px;
		  width:300px;
		}
		
		/*KONTAKTNI OBRAZEC*/
		.container {
		  display: grid;
		  float: left; 
		  background: #E6E6E6;
		  font-family: 'Calibri Light', sans-serif; 
		  color: #393537; 
		  font-size:16px; 
		  text-align: left; 
		  margin-left:  5%;
		  width:600px;
		  
		}
		
		div.gallery {
		  border: 1px none #E6E6E6; /*border: 5px none #E6E6E6;*/
		  float: left;
		  width: 250px;
		}

		div.gallery img {
		  height:200px;
		  width: 250px;
		  cursor: pointer; 
		  border: 10px solid  #E6E6E6;
		}
		
		div.galleryOkvir {
		  float: left;
		  width: 250px; 
		}

		div.galleryOkvir img {
		  height:200px;
		  width: 250px;
		  cursor: pointer; 
		  border: 1px solid black; 
		}




		.main_content  .show{
			z-index: 999;
			display: none;
		}
		.main_content .show .overlay{
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,.66);
			position: absolute;
			top: 0;
			left: 0;
		}
		.main_content .show .img-show{
			width: 600px;
			height: 400px;
			background: #FFF;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			overflow: hidden
		}
		.main_content .img-show span{
			position: absolute;
			top: 10px;
			right: 10px;
			z-index: 99;
			cursor: pointer;
		}
		.main_content .img-show img{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}




}




/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
	  .col-1 {width: 8.33%;}
	  .col-2 {width: 16.66%;}
	  .col-3 {width: 25%;}
	  .col-4 {width: 33.33%;}
	  .col-5 {width: 41.66%;}
	  .col-6 {width: 50%;}
	  .col-7 {width: 58.33%;}
	  .col-8 {width: 66.66%;}
	  .col-9 {width: 75%;}
	  .col-10 {width: 83.33%;}
	  .col-11 {width: 91.66%;}
	  .col-12 {width: 100%;} 
}