/*pdding: top right bootom left*/
:root {
  --crna: #1A1D24;
  --siva: #9999A9;
  --sina: #28A0FC;
  --magenta: #B214A9;
  --teget: #4F52B0;
  --sinozelena: #133C55;
  --svetlozelena: #D9EBEC;
  --temnosina: #1A1B41;
  --gutter: 20px;
  height: 100%;
  outline-offset: -5px;
  
  align-items: center;
  justify-content: center;
 
}

body { 
	
  margin: 0; 
  display: grid;
  grid-template-rows: auto 1fr auto;
  font-family: 'Roboto', sans-serif;
	font-weight:100;
}

 h1, h2, h3, h4, h5, h6 {
font-family: 'Roboto', sans-serif;
}
 
 h1 {font-size: 44px;}

	p.normal {
	  font-weight: 200;
	}

	p.light {
	  font-weight: 100;
	}

	p.bold {
	  font-weight: 300;
	}
	p.centar {
  text-align: center;
	}

	p.levo {
	  text-align: left;
	}

	p.desno {
	  text-align: right;
	}

	p.justify {
	  text-align: justify;
	}

.container {

  max-width: 95%;
   margin:auto; 
    height: auto;
	
	
 }
 .osnova{
	
	  height: auto;

	padding-bottom:50px;
	display: block;
	
	text-align: center;
	color:#000000;
 }
header {

	width: 100%;
	margin: 0 auto;
}

 .podnatpis {
	
	text-align: center;
	color:#ffffff;

   /* background-color: var(--sina);*/
 }
   .naslov {
	margin-top:130px;
 
 }
    .naslov h3{
	color:#ffffff;
 
 }
    .krug {
	margin-top: 70px;
	
 }
    .znak{
	margin-top:5px;
	margin-bottom:5px;

 }
     .znak img{
filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));

 }
    .znak p {
	 color:#000000;
	font-family: 'Roboto', sans-serif;
	font-size: 0.9em;
	margin-top:0px;
	margin-bottom:0px;
 }
 
    .znak h1, h2, h3, h4, h5, h6 {
	color:#000000;
	font-family: 'Roboto', sans-serif;
	margin-top:0px;
	margin-bottom:0px;
 }
     .fokus_den {
	font-size: 1em;
	margin-top:35px;
	margin-bottom:35px;
 }

	.najava {
	margin-top:30px;
	color:#ffffff;
	 }
  
  
  .glaven_text{

	max-width: 90%;
   margin-top:18px;
   margin-left:auto; 
   margin-right:auto; 
    height: auto;  
  }
    .glaven_text h3{
	text-align: center;
	  
  }
  .text_podnaslovi {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: large;
	
	color: #B214A9;
	
	}
  .okvir_text {
	  font-family: 'Ubuntu', sans-serif;
	  max-width: 85%;
	  margin:auto;
	  background: rgba(255, 255, 255, 0.8);
	  border-radius:8px;
	  color: black;
	  padding:20px;
	  text-align: justify;
  }

  footer{
	min-height:50px; 
	margin-top:auto;
	vertical-align: text-bottom;
	text-align: center;
	color:#ffffff;
	  
  }
	footer span {
		  flex: 0; 
		align-self: flex-end;
	}
	
.grid-container {
  display: grid;
  grid-template-columns: 50% 50%;
   margin:10px auto auto auto;
	row-gap: 5px;
	
}
.grid-item {
  padding:15px ;
  font-size: 20px;
  text-align: center;
}

.grid-item  p {
	font-size: 1em;
	margin-top:5px;
	text-align:center;
	font-family: 'Ubuntu', sans-serif;
 /* text-shadow: 4px 4px 4px #aaa;*/
}	

.field-group {
		color:#000000;
		font-family: 'Roboto', sans-serif;
		padding:15px 0px 10px 0px;

		
	}
.field-group input[type=text] {
	  
  padding:8px 50px 8px 50px;
  border:0px solid rgba(0,0,0,0.3);
  border-radius:8px;
  box-shadow:0 0 15px 4px rgba(0,0,0,0.1);	
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

.field-group *{
 font-family: 'Roboto', sans-serif;
 font-size: 1.1em;
 padding:8px 8px 8px 8px; 
 border-radius:8px;
 text-align: center;
 
}
.field-group select {
margin-top:4px;	
 margin-left:4px;
 margin-right:4px;
background-color: #ffffff;
  border:0px solid rgba(0,0,0,0.3);
  
box-shadow:0 0 15px 4px rgba(0,0,0,0.1);


}	
.field-group label {
font-size: 0.9em;
 font-family: 'Ubuntu', sans-serif;

}		
.field-group #data,.field-group #vreme {
  border:0px solid rgba(0,0,0,0.3);
  border-radius:8px;
  
  box-shadow:0 0 15px 4px rgba(0,0,0,0.1);	
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

.form-submit-button {
border:0px;	
border-radius:8px;
background-color: #B214A9;
color: #ffffff;
padding:9px 100px 9px 100px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}


.arrow {
	padding-top:20px;
	padding-left:10px;
	float: left;
}

.linkovi_global{
	margin: auto;
	
}
.clip {	
  clip-path: url(#clip);
}

.clip:hover {
  opacity: 0.5;
}

 .krug-link2 {
position: relative;
margin: auto;
  shape-outside: circle(50%);
clip-path: circle(3rem at 3rem 3rem);

}
.linkovi {
	margin-top:25px;
	width: 33.3%;
	height: 115px;
	float: left;
	
}
.linkovi h3 {
	font-family: 'Montserrat', sans-serif;
}
.prsten {
	margin: auto;
	
  position: relative;
margin-bottom: 10px;
  width: 45px;
  height: 45px;
  overflow: hidden;
  border: 2px solid white;
  border-radius: 50%;
 box-shadow:0 0 10px 2px rgba(50, 50, 0, 0.4);
 
}

 .krug-link {
  position: absolute;
  box-sizing:border-box;
   left: 1.5%;
  top: 1.5%;
   min-height: 45px;
  height: 45px;
  width: 45px;
  min-width: 50px;
  shape-outside: circle(50%);
clip-path: circle(1.4rem at 1.4rem 1.4rem);

}
.a{background: #4F52B0;}
.b{background: #D9EBEC;}
.c{ background: #B214A9;}

.nav-scroll {
  
    overflow: auto;
	 font-size: 0.8em;
    white-space: nowrap;
    position: relative;
	 box-shadow:0 0 10px 2px rgba(50, 50, 0, 0.2);
	border-radius: 4px;
}
.nav-scroll a {
    display: inline-block;
    text-align: center;
    padding: 14px 5px 14px 13px;
    text-decoration: none;
	
 font-family: 'Ubuntu', sans-serif;
}
.nav-scroll div:nth-child(1){
	
 
 
}
.nav-scroll div:nth-child(3) {
	

  
}
.no-scrollbar {
 
  margin-bottom: 0;
  padding-bottom: 0;
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}							


.link_bez{
text-decoration: none;
color:#000;

}

.link_bez:hover {
  opacity: 0.5;
  
}
.active {
  color:#4F52B0;
  
}
.wrapper {
    font-family: 'Montserrat', sans-serif;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
	margin-bottom: 14px;
	
}


.percentage-bar {
    background: #ccc;
    
    height: 13px;
    margin-left: 10%;
    margin-right: auto;
   border-radius: 25px;
  
    transition: 0.4s linear;
    -moz-transition: 0.4s linear;
    -ms-transition: 0.4s linear;
    -o-transition: 0.4s linear;
    -webkit-transition: 0.4s linear;
    transition-property: width, background-color;
    -moz-transition-property: width, background-color;
    -ms-transition-property: width, background-color;
    -o-transition-property: width, background-color;
    -webkit-transition-property: width, background-color;
    width: 20%;
	 float:left;
	
}

.title {
     margin-left: 11%;
    
    font-size: 18px;
	 text-align: center;
    width: 19%;
	float:left;
}

.title span {
    
   color: #000000;

   
}
.title span {
    
   color: #000000;

   
}
.title h4 {
    
   color: #B214A9;

   
}
.bar {
    height: 13px;
    width: 0px;
	border-radius: 25px;
}

.percent {
    color: #ffffff;
    color: rgba(0, 0, 0, 0.4);
    font-size: 20px;
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 10px;
    top: 0;
}
.slick-list a:link { text-decoration: none;
				color:#000000;	}
.slick-list a:visited { text-decoration: none; 
						color:#000000;}
.slick-list a:hover { text-decoration: none; color:#000000;}
.slick-list a:active { text-decoration: none; color:#000000;}

.text_znak {
	text-align: center;
	 font-size: 40px;
	  font-family: 'Ubuntu', sans-serif;  
  }
  

  
.text_data{
	text-align: center;
	 font-size: 15px;
	     font-family: 'HelveticaNeueThin', 'HelveticaNeue-Thin', 'Helvetica', sans-serif;
		 color:#9999A9;
  }
section.percentage-bar:first-child div.title { background: #dd2828; }
section.percentage-bar:first-child div.bar { background: #B214A9; }

section.percentage-bar:nth-child(2) div.title { background: #3498db; }
section.percentage-bar:nth-child(2) div.bar { background:  #B214A9; }

section.percentage-bar:last-child div.title { background: #2ecc71; }
section.percentage-bar:last-child div.bar { background: #B214A9; }

.drugi_znaci {
	
	width: 428 px;
	height:400 px;
	background: url('../images/sozvezdija/01.svg');
}


/*******************************************/

/* Ne pogolemi od 414px *za mojot/
@media screen and (max-width: 414px) {


		h1 {font-size: 42px;}
	 .podnatpis{
		
	/*background-color: var(--magenta);*/
	 }
	  .naslov{
		margin-top:120px;

	 }
		 .krug{
		margin-top:50px;

	 }
	.osnova img {
	   max-width: 97%;
		justify-content: space-around;
			}
	  
	  
	  .najava{
	margin-top:20px;
	 }
	 .field-group *{
 
 font-size: 1em;

 padding:8px 5px 8px 5px;


}
	 .field-group input[type=text] {
	 padding:8px 30px 8px 30px;
	 

	}
.form-submit-button {

padding:9px 100px 9px 100px;
}
	
	 .grid-item {
  padding:5px ;
  
}


 .krug-link {
	left: 2.1%;


}


	.arrow {
		padding-top:40px;
	}
.nav-scroll a {
  
	 font-size: 2em;

}
	/* kraj */
}

/* Ne pogolemi od 375 */
@media screen and (max-width: 375px) {

	 h1 {font-size: 40px;}
 .podnatpis{
	
	/*background-color: var(--teget);*/
 }
    .naslov{
	margin-top:110px;

 }
     .krug{
	margin-top:30px;

 }
  .osnova img {
   max-width: 95%;
    justify-content: space-around;
		}
 	.najava{
	margin-top:10px;
 }
 	 .field-group *{
 
 font-size: 0.9em;

 padding:8px 4px 8px 4px;


}
 
 .field-group input[type=text] {
 padding:8px 35px 8px 35px;
 

}

.form-submit-button {

padding:9px 100px 9px 100px;
}

	 .grid-item {
  padding:7px ;
  
}
 .krug-link {
	left: 1.5%;


}

.arrow {
	padding-top:40px;
	padding-left:25px;
	
}

.linkovi h3{
	font-size: 1.1em;
}
	
.link_bez{

 font-size: 0.95em;
}
.nav-scroll a {
  
	 font-size: 1.9em;

}
.title {
     margin-left: 11%;
  
    font-size: 18px;
	
    width: 19%;
	float:left;
}



}

/* Ne pogolemi od 360 */
@media screen and (max-width: 360px) {

	 h1 {font-size: 38px;}
 .podnatpis{
	
	/*background-color: var(--svetlozelena);*/
 }
    .naslov{
	margin-top:100px;

 }
     .krug{
	margin-top:20px;

 }
.osnova img {
   max-width: 92%;
    justify-content: space-around;
		}
.najava{
	padding-top:90px;
 }
 	 .grid-item {
  padding:5px ;
  
}
.grid-item  p {
	font-size: 0.9em;
	margin-top:4px;
	text-align:center;

}
  .field-group  {

 font-size: 0.8em;
padding:0px 0px 10px 0px;
}

.arrow {
	padding-top:35px;
	padding-left:20px;
	
}
 .field-group input[type=text] {

 font-size: 1.2em;

}
.field-group *{
 
 font-size: 1.2em;

 
}

.prsten{
  width: 40px;
  height: 40px;
}

 .krug-link {

	left: 2%;

  shape-outside: circle(40%);
clip-path: circle(1.2rem at 1.2rem 1.2rem);

}


.linkovi h3{
	font-size: 1em;
}



.link_bez{

 font-size: 0.9em;
}

.nav-scroll a {
  
	 font-size: 1.7em;

}
.title {
     margin-left: 11%;
  
    font-size: 17px;
	
    width: 19%;
	float:left;
}
 /* kraj */ 
}