/* VARIABLES AND SETTINGS  */
:root {
  /* colors */
  --primary-100: #8EA7EC;
  --primary-200: #6183E4;
  --primary-400: #3460DC;
  --primary-600: #1D4ED8;
  --primary-800: #173EAD;

  --secondary-100: #FBE7A3;
  --secondary-200: #F9DD7E;
  --secondary-400: #F7CE46;
  --secondary-600: #F7CE46;
  --secondary-800: #C6A538;

  --neutral-100: #F9F9F9;
  --neutral-200: #F4F4F4;
  --neutral-400: #DDDDDD;
  --neutral-600: #C4C4C4;
  --neutral-800: #ACACAC;

/*   --primary-color: #3C405B; */
  --primary-color: #333333; /* moja izmena */
/*   --secondary-color: #DF7A5D; */
  --secondary-color: #ffbb00; /* moja izmena */
  --accent-color: #82B29A;


  --white: #fff;
  --black: #000;
  --yellow: #ffc107;

  /* font-family */
  --main-font-family: komet, sans-serif;
  --secondary-font-family: komet, sans-serif;

  /* shadows */
  --shadow-xs: 0px 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0px 6px 12px rgba(0, 0, 0, 0.1);
  --shadow-md: 0px 8px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0px 10px 20px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0px 12px 24px rgba(51, 51, 51, 0.1);
}


/* DEFAULT SETTINGS  */


/* buttons */
.primary-button{
/*   background: var(--primary-color); */
/*   border-radius: 4px; */
  color: var(--white);
  display: inline-block;
/*   border: 1px solid var(--primary-color); */
	
	border: 2px solid var(--white);
	border-radius: 25px;
	padding: 11px 40px;
}
.primary-button:hover{
/*   background: var(--secondary-color); */
/*   color: var(--primary-color); */
	
	background: var(--yellow);
	color: var(--white);
}
.primary-button:active{
/*   background: var(--primary-color); */
	
	background: var(--yellow);
}

.secondary-button{
  background: var(--secondary-400);
  border-radius: 4px;
  color: var(--black);
  display: inline-block;
  border: 1px solid var(--secondary-400);
}
.secondary-button:hover{
  background: var(--secondary-600);
  color: var(--black);
}
.secondary-button:active{
  background: var(--secondary-800);
}

.ghost-button{
  background: transparent;
  border-radius: 4px;
  color: var(--primary-400);
  display: inline-block;
  border: 1px solid var(--primary-400);
}
.ghost-button:hover{
  background: var(--primary-600);
  color: var(--white);
}
.ghost-button:active{
  background: var(--primary-800);
}

.ghost-button-white{
  background: transparent;
  border-radius: 4px;
  color: var(--white);
  display: inline-block;
  border: 1px solid var(--white);
}
.ghost-button-white:hover{
  background: var(--primary-600);
  color: var(--white);
  border: 1px solid var(--primary-600);
}
.ghost-button-white:active{
  background: var(--primary-800);
}
  .btn{
/*     font-size: 18px; */
	font-size: 16px;
    font-weight: 500;
/*     font-weight: bold; */
/*     padding: 1rem 1.5rem; */
	padding: 11px 40px;
    margin: 0;
    margin-bottom: 12px;
    transition: all .2s;
    text-transform: uppercase; /* kopirano sa template-a */
	border-radius: 25px; /* kopirano sa template-a */
  }
@media screen and (min-width: 1024px){
  .btn{
    font-size: 1rem;
    font-weight: bold;
    padding: .75rem 1.25rem;
  }
}
.button-small{
  font-size: 14px;
  font-weight: bold;
  padding: .5rem 1rem;
}
.button-regular{
  font-size: 1rem;
  font-weight: bold;
  padding: .75rem 1.25rem;
}
.button-big{
  font-size: 18px;
  font-weight: bold;
  padding: 1rem 1.5rem;
}
.button-icon-right span {
    margin-left: 10px;
}
.button-icon-left span {
    margin-right: 10px;
}
.animated-arrow-button.icon-text {
    justify-content: space-between;
    display: flex;
    transition: all .2s;
}
.animated-arrow-button:hover .icon-text{
  color: var(--primary-600);
}
.animated-arrow-button .icon{
  transition: all .2s;
}
.image-w-button-item:hover .icon {
    transform: translate(5px, -5px);
}
/* /buttons */


/* img{
  max-width: 100%;
  object-fit: cover;
}
a{
  color: var(--secondary-color);
}
a:hover{
  color: var(--secondary-color);
} */

/* default wp aligning classes */
img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }