/*============= RESETS =============*/

/*-- iPhone X Remove Gutters --*/
html {
   padding: env(safe-area-inset);
   
}
.container{
    max-width:1100px;
}



.title{
 margin-top: -50px;  
}
.container-fluid{
margin-left: 4rem;
margin-right: 4rem;   
}
/*-- Prevent Horizontal Scrolling & Font Style --*/
html, body {
    position:relative;
   overflow-x: hidden;
   font-family: 'Lato', sans-serif;
   color: #666666;
}

body {
    position:relative;
}

*{
  margin: 0;
  padding: 0;
}
.loader{
  position: fixed;
  top: 0;
  left: 0;
  background: black;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index:99999;
}

.disppear{
  animation: vanish 1s forwards;
}
@keyframes vanish {
  100%{
    opacity: 0;
    visibility: hidden;
  }
}


.text-virtuoz {

   color:#603912;
   background-image: linear-gradient(rgb(35,150,210) 28%, 
		rgb(157,216,230) 40%,
		rgb(18,189,219) 54%);
		-webkit-background-clip:text;
	-webkit-text-fill-color: transparent;
   text-shadow:none;
}

.text-virtuoz-dark {

   color:#603912;
   background-image: linear-gradient(rgb(0,0,0) 28%, 
		rgb(18,189,219) 40%,
		rgb(0,0,0) 54%);
		-webkit-background-clip:text;
	-webkit-text-fill-color: transparent;
   text-shadow:none;
}

h3.heading {
   text-transform: uppercase;
   font-weight: 700;
   font-size: 1.9rem;
   text-align: center;
   margin-bottom: 1.9rem;
   color:#505962;
}


h2.heading {
   text-transform: uppercase;
   font-weight: 500;
   font-size: 1.5rem;
   text-align: center;
   margin-bottom: 1.9rem;
   color:#505962;
   margin-top: -25px;
   margin-bottom: -25px;
}
.heading-underline {
   width: 3rem;
   height: .2rem;
   background-color:#12bddb;
   margin: 0 auto 2rem;
}

.heading-underline-about {
   width: 3rem;
   height: .2rem;
   background-color:#674288;
   margin: 0 auto 2rem;
}



.hidden-text{
   color: rgba(0, 0, 0, 0);
}

 

 a.box {
  color: black;
  text-decoration: none;
 
 }
 a.box:hover {
   color: black;
   text-decoration: none;
  }





 
  
/*============= NAVIGATION =============*/

.navbar-brand  img{

   height: 100px;

   position: absolute;

    left: 50.5%;

    margin-left: -55px !important;  /* 50% of your logo width */

    display: block;

    top: 10px;

}

.navbar-brand-text  img{

 max-height:50px;  

}

.navbar {

   padding: .7rem 1rem;

   text-transform: uppercase;

   font-weight: 700;

   letter-spacing: .1rem;

   font-size: .9rem;

   background: rgba(255, 255, 255);

   box-shadow: .1rem .1rem .8rem black;

}

.navbar-nav li {

   padding-right: .8rem;

}



.navbar-nav .nav-link {

   color: #666666;

   padding-top: .8rem;

  

}

.navbar-nav .nav-link.active,

.navbar-nav .nav-link:hover {

   color: #12bddb;

}

.custom-toggler-icon {

   color: #666666;

   font-size: 1.6rem;

}



.navbar.solid {

   background: white!important;

   transition: background-color 1s ease;

}



/*-- Remove Button Outline --*/
button:focus, a:focus {
   outline: 0;
   -webkit-appearance: none;
   box-shadow: none;
   transition: all .6s ease;
}
button, a, a.btn {
   transition: all .6s ease;
}

.nav-link img{
   
   height: 20px; 
}

/*============= LANDING PAGE ============= */

.landing {
   background-image: url('../img/pozadina_pocetna_1.jpg');
   height: 100vh;
   width: 100%;
   background-size: cover;
   background-position: center center;
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
   will-change: transform;
   display: table;
}


/*-- Landing Page Caption --*/
.caption {
    z-index: 1;
}

.caption h2 {
   font-size: 2rem;
}

.caption p{
   font-size: 1.1rem;
}

.landing img{
   margin:auto;
}

.caption ul {
   border: none; 
}

.caption h3 {
   font-size: 2.5rem;
   text-shadow: .1rem .1rem .5rem black;
   padding-bottom: 2rem;
}

.caption .btn{
   border: solid 2px white;
   border-width: medium;
   font-size: 1.1rem;
}


/*-- Bouncing Down Arrow --*/
.arrow {
   position: absolute;
   bottom: 0;
   width: 100%;
   animation: bounce 2s infinite;
   -webkit-animation: bounce 2s infinite;
}
.down-arrow .svg-inline--fa {
   color: #12bddb;
   font-size: 2.2rem;
  
}


/*============= FEATURE =============*/

.features{
    background:white;
  padding-top:50px; 
  padding-bottom:50px; 
}
.feature{
    
   
    margin-top:20px;
    
}

.feature .box{
    border-radius: 5px;
    box-shadow: 0 0 .8rem rgba(0, 0, 0, .075);
    color: black;
    border-top: .25rem solid rgb(18,189,219);
    
    position: relative;
    
   
   background-image: linear-gradient(rgb(0,0,0) 15%, 
		rgb(0,0,0) 10%,
		rgb(18,189,219) 54%);
	
 
}

.feature h3{
    
    font-size:1.2rem;
    margin-top:30px;
    color:white;
}
.feature p{
    margin-top:30px;
     margin-right:15px;
    margin-left:15px;
    
   padding-bottom:25px;
   color:black;
}

.ribbon {
    font-weight: 700;
    position: absolute;
    right: 38%;
    top: -2.2rem;
    
}

/*============= WEBSITE PRICING SECTION =============*/



.website-pricing{
    color:white;
    margin-top:0px;
  

}


 

.website-pricing-text h2 {

   text-transform: uppercase;

   font-weight: 700;

   font-size: 2rem;

   margin-bottom: 1.5rem;

   color:white;

}



.website-pricing-slider h2 {

   text-transform: uppercase;

   font-weight: 700;

   font-size: 2rem;

 

   margin-bottom: 1.5rem;

   color:white;

}



.website-pricing-text .btn{

   border: solid 2px #12bddb;

   border-width: medium;

   

   font-size: 1.1rem;

   color: #12bddb;

   

}




.website-pricing-underline {

      position: absolute;

   width: 3rem;

   height: .2rem;

   left:18px;

   background-color: #12bddb;

   

}

.website-pricing img {
  border-radius: 50%;
  
}




/*============= PRICING =============*/

.pricing-column {
    background-color: white;
    height: 100%;
    padding: 1.6rem;
    border-top: .25rem solid #6c757d;
    box-shadow: 0 0 .8rem rgba(0, 0, 0, .075);
    transition: transform .7s ease;
    position: relative;
    overflow: hidden;
}

.pricing-column:hover {
    transform: scale(1.1);
}

p.pricing-info {
    font-size: 1.1rem;
    font-weight: 500;
    color:#505962;
    margin-bottom: 10px;
}

p.pricing-desc {
    font-size: 1.1rem;
}

p.pricing-price {
    font-size: 2.5rem;
    font-weight: 700;
    color:#12bddb;
}

.pricing-column h3 {
    font-size: 1.4rem;
    color:#12bddb;
    font-weight: 500;
}






/*============= MARKETING ============= */

.marketing {
    background-image: url('../img/virtuoz-pozadina-marketing_6.jpg');
    height: auto;
    width: 100%;
    background-size: cover;
    background-position: center center;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    display: table;
    padding-bottom:40px;
}



.marketing .caption {
    z-index: 1;
}

.marketing .caption h3 {
    text-shadow:none;
    font-size: 2rem;
    padding-bottom:0px;
    color:white;
}

.marketing .caption p{
    font-size: 1.1rem;
}

.marketing img{
    max-height:250px;
    margin:auto;
}

.marketing .caption ul {
    border: none; 
}

.marketing .caption .btn{
    border: solid 2px #12bddb;
    border-width: medium;
    color:#12bddb;
    font-size: 1.1rem;
}



/*============= ABOUT SECTION =============*/



.about {
   background:white;
}



/*============= FOOTER SECTION =============*/

.footer {
   background: url('../img/footer/versa-pozadina_3') no-repeat;
   background-size: cover;
   color: white;
   
   /* background-color: #505962; */
}
.row.outer {
   background-color: rgba(57, 63, 70, .8);
   padding: 1rem 2rem 3rem;
}
.footer img {
   height: 4rem;
   margin: 1.5rem 0;
}
.footer a,
.footer .social  a {
   color: white;
   font-size: 1.5rem;
   margin-left:19px;
}
.footer.social  a:hover {
   color: #357EFC;
   
}
.footer-nav a:hover {
   color: #357EFC;
   text-decoration: none;
   
}
hr.socket {
   border-top: .2rem solid #666b71;
   width: 100%;
 }
 
 
 
 /*============= CONTACT SECTION =============*/

.footer {
   background: url('../img/contact_1.jpg') no-repeat;
   background-size: cover;
   color: white;
   /* background-color: #505962; */
}
.row.outer {
   background-color: rgba(57, 63, 70, .85);
   padding: 1rem 2rem 3rem;
}
.footer img {
   height: 2rem;
   margin: 1.5rem 0;
}
.footer a,
.footer ul.social li a {
   color: white;
}
.footer ul.social li a:hover {
   color: #1EBBA3;
}
.footer h3 {
   text-transform: uppercase;
   margin: 1.5rem 0;
}

/*--- Contact Form --*/
.form-group {
   margin-bottom: 1.3rem;
}
.form-control {
   background-color: #53595f;
   border-radius: 0;
   border: .15rem solid #666b71;
   color: white!important;
   font-size: 1.1rem;
}
.form-control:focus {
   background-color: #53595f;
   border: .15rem solid #666b71;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
   color: #b2b5b8!important;
}
hr.socket {
   border-top: .2rem solid #666b71;
   width: 100%;
}


 /*--- DETAILS PAGE--*/
#details{
   margin-top: 7rem; 
   margin-bottom: 2rem;
   color:#505962;   
}
#title-heading {
  
   background-color: rgba(0, 0, 0, 0.1)!important;
   width: 100%;
   height:3.5rem ;
   background-size: cover;
   margin-top: 7rem;
   border-bottom: 4px solid #357EFC;
 }
 #title-heading .row {
   width: 100%!important;
   padding: 1rem 2rem 2rem;
 }

 h1.title-heading {
   font-size: 1.9rem;
   font-weight: 700;
   text-transform: uppercase;
  
  margin-top: -10px;
   color:#505962;
 }
 .title-heading-underline {
   width: 5rem;
   height: .2rem;
   background-color: #357EFC;
   
 }
 
 
 #details img {
    float: left;
    width:  100px;
    height: 300px;
    object-fit: cover;
}

#details #title-heading{
  margin-top: 0px;
  
   height: auto;
  
     
}

#details #title-heading .row {
   width: 100%!important;
   padding: 1rem 1rem 0rem;
 }

#details h3.title-heading{
  font-weight: 500;
  color:#505962;
     
}


#details h1.title-heading{
   text-transform: uppercase;
   font-weight: 500;
   color:#505962;
  
      
 }
#details  .details-info {
 
   
   font-size: 1.2rem;
   

}
#details  .details-info p {
   margin-top: 1rem;
   padding-right: 1.2rem;
}
#details  .details-info a:hover {
    text-decoration: none;  
}




.description{
   margin-top:0px;
   
}

#details  h3.heading {
   margin-top: 20px; 
}







/*============= SALE SECTION =============*/

/*--- Sale carousel--*/


.fixed {
   position: relative;
   width: 100%;

}
.fixed-light {
   background-image: url('../img/code.jpg');
   position: fixed;
   height: 100%;
   width: 100%;
   background-size: cover;
   background-position: center center;
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
   will-change: transform;
   z-index: -1;
   top: 0;
   left: 0;
   display: table;
}


.light {
   background-color: rgba(0, 0, 0, .90);
   padding: 5rem 0;
   z-index: 1000;
}

.fixed-wrap {
   clip: rect(0, auto, auto, 0);
   position: absolute;
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
   z-index: -9999;
}

.owl-stage {
   display: flex;
}
.card {
   height: 100%;
   border-radius: 0;
   text-align: center;
   margin: 0 0rem;
   border: .1rem solid rgba(0, 0, 0, .075);
   box-shadow: 0 0 .8rem rgba(0, 0, 0, .075);
   transition: transform .4s ease;
   color:#505962;

}

.card img {
    float: left;
    width:  100px;
    height: 200px;
    object-fit: cover;
}

.card-body h4{
   text-transform: uppercase;
   color:#505962;

}

.card:hover {
   transform: scale(.95);
}
button.owl-dot.active span,
button.owl-dot:hover span {
   background: #357EFC!important;
}

ul.social {
   list-style: none;
   padding: 0;
   margin: 0;
   font-size: 1.5rem;
}
ul.social li {
   display: inline;
   padding-right: .8rem;
}


ul.social li a {
   color: #1EBBA3;
   transition: all .2s ease;
}
ul.social li a:hover {
   color: #505962;
}


.sale-btn{
   z-index: 1;
  
   width: 100%;
   max-width: 100%;
}

.sale-btn .btn-lg {
   border-width: medium;
   padding: .8rem 1.5rem;
   font-size: 1.1rem;
}


/*============= ABOUT US Contact =============*/

.map-container {
   overflow: hidden;
   position: relative;
   width:100%;
  
}

.map-container::after {
   padding-top: 56.25%;
   display: block;
   content: '';
}

.map-container iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   padding-right: 20px;
   padding-left: 20px;
   padding-bottom: 50px;
}



/*============= MEDIA QUERIES =============*/

/* Devices under 992px (lg) */
@media (max-width: 991.98px) {
    
    
    
    
    
  .caption h2 {

      font-size: 1.8rem;

   }

   .caption h3 {

      font-size: 2.2rem;

      padding-bottom: 1.7rem;

   }

   .caption .btn-lg {

      padding: .7rem 1.2rem;

      font-size: 1rem;

   }
   
   
    .caption h2 {

      font-size: 1.8rem;

   }
   
   /*============= Website Pricing section =============*/
   
    .website-pricing-text .btn{
        padding: .5rem 1rem;
        font-size: 1rem;
    }
    
 /*============= Marketing section =============*/
 
   .marketing .caption h3 {
        font-size: 2.2rem;
        padding-bottom: 1.7rem;
    }

   .marketing .caption .btn-lg {
        padding: .7rem 1.2rem;
        font-size: 1rem;
    }

    .marketing .sale-btn .btn-lg {
        padding: .7rem 1.2rem;
        font-size: 1rem;
    }

   #details h3.title-heading{
      
      font-size: 1.5rem;
         
    }

    .card h4{
      font-size: 1.3rem;
   }
   .card h5{
      font-size: 1.1rem;
   }
  
   
   
}

/* Devices under 768px (md) */
@media (max-width: 767.98px) {
    
    
    
    .navbar-brand  img{

    height: 80px;

   

    left: 52%;

    margin-left: -45px !important;  /* 50% of your logo width */

  

 

}
.navbar-brand-text  img{

 max-height:40px;  

}
    
    
    .caption h2 {

      font-size: 1.5rem;

      letter-spacing: .15rem;

      padding-bottom: .5rem;

    

   }

   .caption h3 {

      font-size: 1.7rem;

      padding-bottom: 1.2rem;

   }

   .caption .btn-lg {

      padding: .6rem 1.1rem;

   }

   .caption {

      margin-top: 80px;

      margin-bottom: 20px;

   }
   .landing-elements{

      

      text-align: center;

   }

  .landing img{

      max-height:380px;
      margin-bottom:100px;

   }
   
   .landing{
        background-image: url('../img/virtuoz-pozadina-mob_3.jpg');   
       
   }
   
 /*============= Website Pricing section =============*/   
   
.row-website-pricing{
    display: flex;
    flex-flow: row wrap;
}

.website-pricing-slider{
    order:1;
}

.website-pricing-text{
    order:2;
    text-align:center;
}

.website-pricing-slider h2 {
     text-align: center;
}

.website-pricing-underline {
    margin: 0 auto 0rem;
    position:relative;
    left:0;
}
   
   
   /*============= Marketing section =============*/
   
    .marketing .caption h3 {
        font-size: 1.5rem;
       
        padding-bottom: .5rem;
        
    }

   .marketing .caption h3 {
        font-size: 1.7rem;
       
    }

   .marketing .caption .btn-lg {
        padding: .6rem 1.1rem;
    }

    .marketing .caption {
        margin-top: 0px;
        margin-bottom: 20px;
    }

    .marketing img{
        max-height:200px;
        margin-bottom:100px;
    }
   
    .marketing{
        background-image: url('../img/virtuoz-pozadina-marketing-mob_9.jpg');   
    }
   
   .text-dark h3{
        margin-top:50px;
   }
   
   .jumb {

   margin-top:-100px;

   }


   .sale-btn .btn-lg {

    padding: .6rem 1.1rem;

  }

   

   .landing-elements{

      text-align: center;

   }
   
   .down-arrow .svg-inline--fa {
   color: #383838;
   font-size: 2rem;
  
}


 
   
  
   h1.title-heading {
      font-size: 1.7rem;
      font-weight: 500;
   }

    #details h3.title-heading{
      
      font-size: 1.7rem;
         
    }

    .navbar-brand img {
      height: 80px;
   }

    
   
   
}

/* Devices under 576px (sm) */
@media (max-width: 575.98px) {
    
    
    /* NAVIGATION */
    
    
.navbar-brand  img{

    height: 80px;

   

    left: 52%;

    margin-left: -45px !important;  /* 50% of your logo width */

  

 

}
   
  .navbar-brand-text  img{

 max-height:30px;  

} 
    .caption h2 {

      font-size: 1.2rem;

      letter-spacing: .1rem;

      padding-bottom: .4rem;

    

   }

  
   .caption p {

      font-size: 0.9rem;

     

   }
   .caption .btn-lg {

      padding: .4rem 0.9rem;
      font-size: 0.9rem;

   }

   .caption h3{

      font-size: 1.2rem;

      padding-bottom: 1rem;

   }
   
   .landing img{

      max-height:350px;

      

   }
   
    /*============= FEATURES section =============*/ 
   .feature{
      margin-top:30px; 
    }
    
    
    .features{
       position:relative;
      top:-80px; 
    }
    .feature p{
    margin-top:20px;
     margin-right:10px;
    margin-left:10px;
    font-size:0.9rem;
   padding-bottom:20px;
   
}
.ribbon {
   
    right: 39.8%;
   
    
}
   
   /*============= Website Pricing section =============*/ 
   
   .website-pricing-content{
        margin-top:0px; 
        
    }
   
    .website-pricing-content img{
        margin-top:20px; 
        margin-bottom:10px; 
    }
   
   .website-pricing-text .btn{
        padding: .4rem .9rem;
        font-size: .9rem;
    }
    
    .website-pricing-text h2 {
        text-transform: uppercase;
        font-weight: 500;
        font-size: 1.4rem;
        text-align: center;
        margin-bottom: 1.2rem;
    }

    .website-pricing-slider h2 {
        text-transform: uppercase;
        font-weight: 500;
        font-size: 1.4rem;
        text-align: center;
        margin-bottom: 1.2rem;
        margin-top: 1.2rem;
    }

   .short-text-website-pricing{
        font-size: 0.9rem;
        text-align: center;
        margin-top: 0;
    }
    
    .website-pricing-underline {
        margin: 0 auto 0rem;
        position:relative;
        left:0;
    }
   
   
   .heading-text-pricing{
        margin-top:30px;
   }
   .about-text{
        margin-top:30px;
   }
   
 .description{
    margin-top: -50px;
   font-size: 0.9rem; 
 }
   h3.heading {
     
      font-weight: 600;
      font-size: 1.5rem;
      
      margin-bottom: 1.5rem;
   }

   h2.heading {
      margin-top: -20px;
      margin-bottom: 20px;
      font-weight: 400;
      font-size: 1.2rem;
   }

   .heading-underline {
 
      margin: 0 auto 0rem;
   }

   #sale-carousel{
      padding: 3rem 0;
   }

  

   .custom-toggler-icon {
      
      font-size: 1.3rem;
   }

   .sale-category-column h3 {
   
      font-size: 1.1rem;
      
   }
   
   .sale-category-column p {
      font-size: 0.9rem;
    
      
   }
   .card{
   scale(1.3);
   }

   .card h4{
      font-size: 1.1rem;
   }
   .card h5{
      font-size: 1rem;
   }
   .card p{
      font-size: 0.9rem;
   }
   .card p.price{
      font-size: 1.1rem;
   }

   .card p.size{
      font-size: 1.1rem;
   }

   #cities h5{
      font-size: 1.1rem;
   }
   #cities p{
      font-size: 0.9rem;
   }
   h1.title-heading {
      font-size: 1.4rem;
      font-weight: 600;
      margin-top: -4px;
     
    }
    #details h3.title-heading{
      
      font-size: 1.4rem;
      font-weight: 400;   
    }

    #title-heading {
  
      margin-top: 5rem;
    }

    #details  h3.heading {
      margin-top: 68px; 
   }

   .title{
      margin-bottom: 50px;
        
     }
     
  
    

   
}


/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/