/*
 Theme Name: Kolacici
 Author: Duka
 Version: 1.0
*/
/*pink #D3325F*/

/*white #C9C1AC*/



/*header*/


body {
   
    position: relative;
  
    padding: 0;
    margin: 0;
   background: url(images/glavna.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
 font-family: 'Hammersmith One', sans-serif;
    overflow-x: hidden;
    min-height: 100vh;
    padding-bottom: 60px;
}

.logo {
    font-family: 'Mr Dafoe', cursive;
      border-width:5px;  
    border-style:double;
    padding: 15px;
    transition: all  2s ease;
    border-radius: 25px;
}

.primary-color {
  color: #D3325F;
}


/*navbar*/

.navbar {
  background: #C9C1AC;
  padding: 20px 20px;
  transition: all 1s ease;
  

}

.navbar-background {
  padding: 5px 20px;
}

.navbar-brand {
  font-size: 30px;
}

.navbar-brand:hover {
  color:#6d1b32;
}

.nav-link {
  color: #D3325F;
  text-decoration: none;
  transition: all 2s ease;
  font-size: 25px;
  

}

.selected {
    color: #6d1b32;
    
}

.nav-link:hover {
  color: #6d1b32;
}

.nav-btn {
  background: transparent;
  color: #d3325f;
  border: 2px solid #d3325f;
  font-size: 23px;
  transition: all 2s ease-in-out;
}

.nav-btn:hover {
  color: #6d1b32;
  border: 2px solid #6d1b32;
  transform: rotate(10deg)
}

.toggler-btn {
  border: 2px solid #d3325f;
  padding: 5px;
  transition: 2s all ease-in-out;
}




.bar {
  width: 30px;
  height: 3px;
  margin: 5px;
  background: #d3325f;
  transition: all 0.5s ease;
}

.change .bar1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  transform: rotate(45deg) translate(-5px, -8px);
}

.header{
    height: 100vh;
    padding: 0px;
   

}
   
.curasellSize {
   height: 75vh;
    
  
}
   
.curasellSize2 {
  height: 75vh;
   
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  
   
}

   
body:not(.home) .footer{
    position: absolute;
    bottom: 0;
}

.info {
  background: #C9C1AC;
 
    padding: 0px;
}

.info h2 {
  word-spacing: 0.6rem
}

.info a {
  transition: all 1s ease-in-out;
}

.info a:hover {
  color: #6d1b32;

}
.banner h1 {
   font-size: 50px;
  color: #C9C1AC; 
 text-align: center;
  border-top: 6px dotted #C9C1AC;
  border-bottom: 6px dotted #C9C1AC;
    text-shadow: -3px -3px 0 #D3325F;
   display: flex;
   justify-content: center;
}
.bannerC {
    
    height: 100vh;
   color: #C9C1AC; 
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;

}

.main-btn {
  color: #D3325F;
  font-size: 2rem;
   
  border: 2px solid #D3325F;
  transition: all 1s ease-in-out;
   

}

.main-btn:hover {
 
 

  color: #6d1b32;
  background:  #C9C1AC;

}

/*meni*/

.item-container {
    position: relative; /*ako hocemo da postavimo cajld u sredini sa apsolut roditelj mora biti relatic*/
    overflow: hidden;
    background: linear-gradient(rgb(0,0,0),rgb(0,0,0));
    transition: all 2s ease;
   
}

.item-img{
    
    transition: all 2s ease;
}

.item-container:hover .item-img{
    transform: scale(1.2);
    opacity: 0.5;
}


.item-container:hover .item-link1 {
     background:  #C9C1AC;
  border: 2px solid #D3325F;
}


.item-link{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
     color: #D3325F;
    font-size: 2rem;
    border-top: 3px solid #D3325F;
    border-bottom: 3px solid #D3325F;
    transition: all 2s ease;
    opacity: 0;
}

.item-container:hover .item-link {
    opacity: 1;
}

.item-link:hover {
    border: 3px solid #6d1b32;
    background: #C9C1AC;
    color: #6d1b32;
    
}

.item-container:hover {
     outline: 10px solid #D3325F;
}

.static {
    border: 3px solid #D3325F;
  
   
}

.opis {
    color: #D3325F;
    background: #C9C1AC;
    border-radius: 25px;   
}

.comment{
    position: relative;
    bottom: 5.5rem;
    margin-bottom: 0!important;
}

.c1 {
    background: #02f760;
}
.c2 {
    background: #b3ff02;
}
.c3 {
   background: #eeff00;
}
.c4 {
    background: #ffbf00;
}
.c5 {
   background: #ff7700;
}
.c6 {
    background: #ff5400;
}
.c7 {
    background: #ff3700;
}
.c8 {
    background: #ff1d00;
}
.c9 {
    background: #d10000;
}
.c10 {
    background: #6d1b32;
}

#comment {
    width: 100%;
    border: 3px solid #D3325F;
    border-radius: 25px ; 
}
#submit {
    color: #D3325F;
    background: #C9C1AC;
    border: 3px solid #D3325F;
    border-radius: 25px ;
    transition: all 2s ease;
}
#submit:hover {
    color:#C9C1AC;
    background:  #D3325F;
}

.ikona{
    border: 3px solid #D3325F;
    color:#D3325F;
    
}

.ikona1 {
    border: 3px solid #D3325F;
    color:#C9C1AC;
}
.comments-rating {
	border: none;
	padding: 0;
	margin-left: 0;
}

.comments-rating label {
	display: inline-block;
}

.comment-respond{
    width: 80%;
}

.comment-respond .rating-container > .star-cb-clear + label, .comment-respond .rating-container > input + label:before {
	text-indent: 9999px;
    
}

.comment-respond .rating-container > input + label {
	text-indent: -9999px;
    
}

.my-card {
    border-radius: 25px;  
	color: #D3325F;
  font-size: 2rem;
   background:  #C9C1AC;
  border: 2px solid #D3325F;
    transition: all 2s ease;
    overflow: hidden;
	
}  

.img-card {
	border-bottom: 7px inset #D3325F;
     transition: all 2s ease;
   border-top-right-radius: 25px;
    border-top-left-radius: 25px;
}

.card-link {
    border: 2px solid #D3325F;
    color: #D3325F;
     text-decoration: none;
    transition: all 2s ease;
    max-width: 100%;
  
    display: flex;
    justify-content: center;
   flex-wrap: wrap;
    
}

.my-card .btn{
    white-space: normal;
}

.my-card:hover .picture{
	  transform: scale(1.1);
  }

.my-card1 {
  width: 300px;
    
	color: #D3325F;
  font-size: 2rem;
   background:  #C9C1AC;
  border: 2px solid #D3325F;
    transition: all 2s ease;
	
}  

.img-card1 {
    
	border-bottom: 7px inset #D3325F;
     transition: all 2s ease;
  
}

.card-link1 {
    border: 2px solid #D3325F;
    color: #D3325F;
     text-decoration: none;
    transition: all 2s ease;
    max-width: 100%;
  
    display: flex;
    justify-content: center;
   flex-wrap: wrap;
    
}





.height {
    height: 100%;
  
}

.social-link {
    color: #D3325F;
     transition: all 2s ease;
}

.social-link:hover {
    color: #6d1b32;
     border-radius: 25px; 
}

.card-link:hover {
     color:  rgb(201, 193, 172);
   
    background: #D3325F;
}

button:focus {
    outline: none;
   
}
/*----kuvarica*/

#kuvarica {
  background:rgba(201, 193, 172, 0.7);
  
    
}

.current-project-photo {
  position: relative;
  min-height: 50vh;
   
}

.current-project {
  width: 50%;
  height: 50%;
  position: absolute;
  transition: all 2s ease-in-out;
  
}

.current-project:hover {
  z-index: 10;
  transform: scale(1.1);
}

.current-project-1 {
  top: 0;
  left: 10%;
  transform: rotate(-15deg);
  z-index: 20;
}



.current-project-2 {
  top: 0;
  left: 46%;
  transform: rotate(8deg);
  z-index: 30;
}

.current-project-3 {
  top: 40%;
  left: 3%;
  transform: rotate(-5deg);
}

.current-project-4 {
  top: 41%;
  left: 40%;
  transform: rotate(38deg);
    
}

.current-project:hover {
  transform: scale(1.1);
  z-index: 50;
}

.text-my {
    font-family: 'Mr Dafoe', cursive; 
    color: #D3325F;
    font-size: 35px;
}

.review-item {
  background: rgba(201, 193, 172, 0.7);
  
}
.border {
    height: 15px;
    background:  #C9C1AC;
}

.primary-color-link {
    color: #D3325F;
    
  transition: all 2s ease;
    border-bottom: 2px solid #d3325f;
}
.primary-color-link:hover {
    color: #6d1b32;
    border-bottom: 2px solid  #d3325f;
    text-decoration: none;
     
}

.prosek {
    color: #D3325F;
    font-size: 35px;
}

.slider {
     -webkit-appearance: none; 
    appearance: none;
    width: 75%;
    border-radius: 25px;
    height: 25px;
  
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}


.slider::-webkit-slider-thumb {
    -webkit-appearance: none; 
    appearance: none;
    width: 25px; 
    height: 25px; 
    background: #D3325F; 
    cursor: pointer; 
    border-radius: 25px;
    border: 2px solid  #d3325f;
   
}

.slider::-moz-range-thumb {
    width: 25px; 
    height: 25px; 
    background: #D3325F; 
    cursor: pointer; 
    border-radius: 25px;
    
}

.slider:focus {
    -webkit-appearance: none;
    outline: none;
}

 .opis1 {
   
    color: #D3325F;
    background: #C9C1AC;
    border-radius: 25px; 
     transition: all 2s ease-in-out; 
}   
    
 .opis1:hover {
    color: #6d1b32;
     transform: scale(1.1);
}

 .opis2 {
    color: #6d1b32;
     transform: scale(1.1);
}

.opis3 {
      color: #D3325F;
    background: #C9C1AC;
    border-radius: 25px; 
    height: 30px;
   align-content: center;
   padding: 0;
    margin: 10px;
}

.ocena2{
    color: #D3325F;
}

.rating-container > span:checked ~ i:before,
.rating-container > i + i:hover ~ i:before,
.rating-container > i + i:hover:before {
	content: "\f155";
	color: #e52;
	text-shadow: 0 0 1px #333;
}

.meni{ 
     color: #D3325F;
  text-shadow: -3px -3px 0 #C9C1AC;
    
    } 
.slajder {
    display: flex;
    justify-content: center;
    margin-left: 15px;
     border-radius: 25px; 
    background: white;
    box-sizing: border-box;
    width: 30px;
    border: 2px solid  #d3325f;
}
  


h2 {
    font-size: 20px;
}

@media all and (max-device-width: 720px){
    .main-title{
        font-size: 2rem;
        text-align: center;
    }
    h2 {
        font-size: 18px;
    }
}

@media all and (max-device-width: 640px){
    h2 {
        font-size: 16px;
    }
}

@media all and (max-device-width: 320px){
    h2 {
        font-size: 15px;
    }
}
    
h1 {
    font-size: 25px;
}

@media all and (max-device-width: 720px){
    h1 {
        font-size: 22px;
    }
}

@media all and (max-device-width: 640px){
    h1 {
        font-size: 19px;
    }
}

@media all and (max-device-width: 320px){
    h1 {
        font-size: 15px;
    }
}
    
  h4 {
    font-size: 20px;
}

@media all and (max-device-width: 720px){
    h4 {
        font-size: 16px;
    }
}

@media all and (max-device-width: 640px){
    h4 {
        font-size: 14px;
    }
}

@media all and (max-device-width: 320px){
    h4 {
        font-size: 10px;
    }
}  
    
  h3 {
    font-size: 20px;
}

@media all and (max-device-width: 720px){
    h3 {
        font-size: 20px;
    }
}

@media all and (max-device-width: 640px){
    h3{
        font-size: 20px;
    }
}

@media all and (max-device-width: 320px){
    h3 {
        font-size: 15px;
    }
}  
   
.ocena1 {
    font-size: 60px;
     color: white;
}

@media all and (max-device-width: 720px){
.ocena1 {
        font-size: 40px;
     color: white;
    }
}

@media all and (max-device-width: 640px){
.ocena1{
        font-size: 30px;
     color: white;
    }
}

@media all and (max-device-width: 320px){
.ocena1{
        font-size: 20px;
     color: white;
    }
}