body {
    font-family: 'Montserrat', Arial, Tahoma, Verdana;
    font-size: 16px;
   /* padding-top: 60px;*/
    padding-bottom: 60px
}
html {
      scroll-behavior: smooth;
}

 /*
 
@media (max-width:576px){
   body {
    background: gray;
   }
}

@media (min-width:576px){
   body {
    background: red; 
   }
 

}
@media (min-width:768px){
       body {
    background: orange;
   }
}
   
@media (min-width:992px){
       body {
    background: pink;
   }
  
}
@media (min-width:1200px){
       body {
    background: yellow;
   }
 

}
@media (min-width:1400px){
       body {
    background: blue;
   }
 
}
 
*/ 

.gdpr_logo_image {
      display: none;
}
 
 
@media (max-width:576px){
      #mobile-top-padding {
            padding-top: 50px;
      }
}

@media (min-width:576px){
      #mobile-top-padding {
            padding-top: 50px;
      }
 

}
@media (min-width:768px){
      #mobile-top-padding {
            padding-top: 50px;
      }
}
   
@media (min-width:992px){
      #mobile-top-padding {
            padding-top: 50px;
      }
  
}
@media (min-width:1200px){
      #mobile-top-padding {
            padding-top: 0px;
      }
 

}
 
 

.margin-zero {
      margin: 0 !important;
}
 

@header-size: 24px;
@header-size-2: 30px;



/***** GENERAL *****/
h1 {
      font-size: @header-size;
}
h2 {
      font-size: @header-size-2;
}

a {
      color: @color-purple;
      
}

.hide-noimportant {
      display: none;
}

.display-none {
      display: none;
}

a:hover {
      text-decoration: none;
}
.screen-reader-text {
      display: none;
}
.white-text {
      color: #fff;
}
 .content {
      padding: 290px 0 290px 0;
}      

@media (max-width:576px){
      .content {
            padding: 80px 0 50px 0;
      }
}

@media (min-width:576px){
      .content {
            padding: 80px 0 50px 0;
      }
 

}
@media (min-width:768px){
      .content {
            padding: 90px 0 90px 0;
      }
}

@media (min-width:992px){
       .content {
            padding: 290px 0 290px 0;
      }     
  
}



 .content-padding-bottom-lower {
      padding: 290px 0 50px 0;
}      

@media (max-width:576px){
      .content-padding-bottom-lower {
            padding: 30px 0 50px 0;
      }
}

@media (min-width:576px){
      .content-padding-bottom-lower {
            padding: 30px 0 50px 0;
      }
 

}
@media (min-width:768px){
      .content-padding-bottom-lower {
            padding: 80px 0 50px 0;
      }
}
@media (min-width:992px){
       .content-padding-bottom-lower {
            padding: 190px 0 50px 0;
      }     
  
}




.margin-bottom-ten {
      margin-bottom: 10px;
}

.color-blue {
      color: @color-blue;
}  
.color-orange {
      color: @color-orange;
}    
.color-gold {
      color: @color-gold;
}  
.color-green {
      color: @color-green;
}  

.color-losos {
      color: @color-losos ;
}  
.color-pink {
      color: @color-pink;
}  

.color-green2 {
      color: @color-green2;
}  
.color-yellow {
      color: @color-yellow;
}  

.padding-zero {
      padding: 0;
}

 .container-fluid {
      padding-left: 50px;
      padding-right: 50px;
 }





@color-purple: black;
@color-red: #e43d30;
@color-blue:  #00b5e6;
@color-orange: #ef4136;
@color-gold: #9f9470;
@color-green: #a6ce39;
@color-losos: #f79550;
@color-pink: #ef3f6d;
@color-green2: #00b26b;
@color-yellow: #ffc832;
@color-blue2: #03296A;
@color-purple: #413b61;


.va-middle {
      vertical-align: middle;
}
  
.display-flex-center {
      display: flex;
      align-items: center;
}

.to-down {
      position: absolute;
      display: block;
      width: 100%;
      text-align: center;
      animation: MoveUpDown 1s linear infinite;
      position: absolute;
      left: 0;
      bottom: 56px;
       
}

.position-relative {
      position: relative;
}

.padding-ten {
      padding: 10px;
}

.white-cover {
      background: white;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      position: absolute;
      opacity: 0.6;
}
.inner {
      position: relative; /* nektere bloky jsou prekryvany white-cover. Z toho duvodu je treba nastavit pro inner pozici relativ */
}

@media (max-width:576px){
 

      .to-down {
            display: none;
             
      }   
}

@media (min-width:576px){
 
      .to-down {
            bottom: 56px;
             
      }   
      .to-down {
            display: none;
             
      }         

 

}
@media (min-width:768px){
 
      .to-down {
            display: none;

             
      }   
}
   
@media (min-width:992px){
 
      .to-down {
            bottom: -38px;
            display: block;

             
      }   
  
}
@media (min-width:1200px){
 
      .to-down {
            bottom: 32px;
             
      }   
 

}
@media (min-width:1400px){
 
      .to-down {
            bottom: 53px;
             
      }   
 
}

@keyframes MoveUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}


.large-logo {
      position: relative;
      a {
            position:relative;
            z-index: 1000;
      }

}

#preloader {
    position: fixed;
    text-align: center;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; /* change if the mask should have another color then white */
    z-index:99999; /* makes sure it stays on top */
}
#status {     
    position:relative;
     
    top:50%; /* centers the loading animation vertically one the screen */
     
    z-index:9999; /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    background-size: cover;
   
}


.more-info {
      font-weight: bold;
      min-width: 160px;
      display: inline-block;
      height: 28px;
      text-decoration: none;
      font-size: 14px;
      padding-left: 50px;
      padding-right: 10px;
      padding-top:3px;
}

.more-info-white {
      background: url('images/more-info-white.png?v=90') no-repeat left center;
      color: #fff;
      &:hover {            
            background: url('images/more-info-purple.png?v=90') no-repeat left center;
            color: #fff;
            transition: 0.1s;
        
      }
}


 


.more-info-white-text {
      background: url('images/more-info-white.png?v=90') no-repeat left center;
      color: #fff;
    

 
      &:hover {
            
            background: url('images/more-info-grey.png') no-repeat left center;
            color: @color-purple !important;
            transition: 0.1s;
        
      }
}



.more-info-grey {
      background: url('images/more-info-grey.png') no-repeat left center;
      color: #fff !important;
    

 
      &:hover {
            
            background: url('images/more-info-purple-text.png?v=90') no-repeat left center;
            color: #fff !important;
            transition: 0.1s;
        
      }
}




.more-info-purple-text2 {
      background: url('images/more-info-purple-text.png?v=90') no-repeat left center;
      color: @color-purple !important;
    

 
      &:hover {
            
            background: url('images/more-info-grey.png') no-repeat left center;

            color: #fff !important;
            transition: 0.3s ;
        
      }
}



.more-info-white-text2 {
      background: url('images/more-info-white.png?v=90') no-repeat left center;
      color: #fff;
      &:hover {            
            background: url('images/more-info-purple-text.png?v=90') no-repeat left center;
            color: @color-purple !important;
            transition: 0.1s;        
      }
}



.more-info-purple-text {
      background: url('images/more-info-purple-text.png?v=90') no-repeat left center;
      color: @color-purple !important;
    

 
      &:hover {
            color: #fff;
            background: url('images/more-info-purple.png?v=90') no-repeat left center;
            transition: 0.1s;
         
      }
}



.more-info-black-text {
      background: url('images/more-info-black-text.png?v=90') no-repeat left center;
      color: #000 !important;
    

 
      &:hover {
            color: #fff !important;
            background: url('images/more-info-purple.png?v=90') no-repeat left center;
            transition: 0.1s;
         
      }
}

  

.more-info-red-arrow {
      background: url('images/more-info-red-arrow.png?v=90') no-repeat right center;
      color: #fff !important;
      padding-left: 10px;
      padding-right: 50px;
    

 
      &:hover {
            color: #fff !important;
            background: url('images/more-info-red-arrow-hover.png?v=90') no-repeat right center;
            transition: 0.1s;
            padding-left: 10px;
            padding-right: 50px;            
         
      }
}

  
/***** HEADER  *****/
#header {
      position: relative;
      z-index: 3;
      margin-top: 60px;
}


 /***** SLIDER  *****/
#slider {

    
      position: relative;
      color: #3D375E;
      background: none;
      min-height: auto;
 
      span.red {
            color: @color-red;
      }
      span.number-old {
            border-radius: 50px;
            moz-border-radius: 50px;
            padding: 10px;
            background: #3D375E;
            color: #fff;

      }

}
 
@media (max-width:576px){
      .letters {
            display: none !important;
      }
     #slider {
             
            background: url('images/slider-no-desktop.png') no-repeat center left;
            min-height: 50px;
      }

}

@media (min-width:576px){
      .letters {
            font-size: 12px;
      }
     #slider {
             
            background: url('images/slider-no-desktop.png') no-repeat center center;
            min-height: 150px;            
      }      

}

@media (min-width:768px){
 
   .letters {
      font-size: 12px  ;
   }   
}
   
@media (min-width:992px){
 
   .letters {
      font-size: 17px  ;
   }
  
}
 
 

 /***** CONTACT *****/

#contact {
      background: url('images/contact-background-white.jpg') no-repeat bottom right #fff;          
    
      color: @color-purple;
      min-height:750px !important;  
      a {
            color: @color-purple;
      }
  

}      

 /***** MAP *****/

#map {
      h3 {
            font-size: 15px;
      }
      table  td{
            border: 0 !important;
      }
      .map-container {
            position: relative;
            z-index: 2;
      }
      .content.light-mode {
            background: url('images/contact-background-light.png?v=8') no-repeat top left #fff;
            background-size: cover; 
            color: #000;
            min-height:750px !important;
            .social-image img {
                  background:  #000;
                  
            }
            a {
                  color: #000;
            } 
      }   

      .content.dark-mode {
            background: url('images/contact-background.jpg') no-repeat top left #000;
            background-size: cover; 
            color: #fff;
            min-height:750px !important;
            a {
                  color: #fff;
            } 
      }             

      ul {
            margin: 20px 0 20px 15px;
            padding: 0 0 0 0px;
      }  

      li {
            list-style-image: url('images/purple-arrow.png');
            margin: 10px 0;
            padding: 0 0 0 10px;

            a {
                 
               
            }
      }  
      li.active {
            list-style-image: url('images/red-arrow.png');

            a {
                  background: url('images/red-line.png') no-repeat right center;
                  padding-right: 150px;

            }
 
      }        
      li>a {
            cursor: pointer;
      }


}      





 /***** MEDIA *****/
#media {
      
      background: url('images/contact-background-white.jpg') no-repeat bottom right #fff;    

      .left-side {
            text-align: right;
      } 


      @media (max-width:576px){
            .left-side {
                  text-align: center;
            } 
      }

      @media (min-width:576px){
            .left-side {
                  text-align: center;
            } 
       

      }
      @media (min-width:768px){
            .left-side {
                  text-align: center;
            } 
      }
         
      @media (min-width:992px){
            .left-side {
                  text-align: right;
            } 
        
      }
      @media (min-width:1200px){
            .left-side {
                  text-align: right;
            } 
       

      }
      @media (min-width:1400px){
            .left-side {
                  text-align: right;
            } 
       
      }         

      .first-block {
            
       
            color: @color-purple;
            min-height:750px !important;
            
            a {
                  color: @color-purple;
            }            
      }
}    


/***** BREADCRUMP *****/
#breadcrump {
      position:relative;
       
      
      width: 100%;
      margin-top: 32px;
      .light a {
            color: #000;
      }
      .light {
            background: #fff;
            opacity: 0.95;
            color: #000;
            padding: 10px;
            a {
                  color: #000;
            }            
      }

      .dark {
            background: #000;
             
            padding: 10px;
            a {
                  color: #000;
            }            
      }   
}
a {
      text-decoration: underline;
}


 /***** PRINT RELEASES *****/
#print {

      background: url('images/print-background.png') no-repeat top left #000; 
 
      min-height:750px !important;
      color: #fff;

 
       

      .more {
            margin-bottom: -60px;
            margin-right: -31px;
      }


      a {
            color: #fff;
      }

      .additional  {
            padding-top: 100px;
      }
 
      .inner {
            border: 1px solid #a8a89e;
            padding: 30px 30px 30px 30px;
            margin-bottom: 50px;
            position: relative;
      
      }

      h1 {
            text-transform: uppercase;;
      } 
 
}        
/***** MEDAILON *****/
#medailon {

      background: url('images/print-background.png') no-repeat top left #000;  
      min-height:750px !important;
      color: #fff;
       .more {
            margin-bottom: -60px;
            margin-right: -31px;
      }


      a {
            color: #fff;
      }

      .additional  {
            padding-top: 100px;
      }
 
      .inner {
            border: 1px solid #a8a89e;
            padding: 30px 30px 30px 30px;
            margin-bottom: 50px;
            position: relative;
      
      }

      h1 {
            text-transform: uppercase;;
      } 
 
}        


 /***** LOGOS DOWNLOAD *****/
#logos {

      .show-content {
            background: url('images/download-ico.png') no-repeat left center;
            padding-left: 25px;
            background-size: 20px;
            text-decoration: none;
      }

      background: url('images/logos-background.png') no-repeat top left #fff; 
      background-size: content;
      min-height:750px !important;    


      a {
            color: @color-purple;
      }

      .additional  {
            padding-top: 100px;
      }
 
      .inner {
            
            padding: 0px 30px 0px 0;
            margin-bottom: 35px;
            position: relative;
            p {
                  margin: 0;
                  padding: 0;
            }
      }

      h1 {
            text-transform: uppercase;
            background: url('images/ico_download.svg') no-repeat left center;
            padding: 20px 20px 20px 50px;
            margin-bottom: 30px;

      }
      h3 {
            font-size: 18px;
            font-weight: 900;
      }

      .first-block {
           
      }
}        


/***** FIELDS OF B  *****/
#fields-of-b {
     background: url('images/fields-of-b-background.png?v=1ě') no-repeat top center #000;
    
      background-size: cover;
      min-height: 950px;
      color: #fff;




      a {
            color: #fff;
      }

 
         
         

      .main-text {
            line-height: 27px;
            margin-top: 33px;
   
      }


      @media (max-width:576px){
            .box {
                  margin: 0 auto;                   
            }
            .box-padding {
                  display: none;                   
            }            

      }

      @media (min-width:576px){
            .box {
                  margin: 0 auto;                   
            }
            .box-padding {
                  display: none;                   
            }    
       

      }
      @media (min-width:768px){
            .box {
                  margin: 0 0;                   
            }
            .box-padding {
                  display: block;                   
            }                
   
      } 


      .boxes {     

            .boxes-padding {
                  margin-top: 0px;
            }


            .box-padding {
                  width: 2%;
            }                  

            .box-padding:first-child {
                  width: 0px;
            }
            .inner {
                  min-width: 242px;
            }     

            @media (max-width:576px){
               body {
                background: gray;
               }
          

            }

             
            @media (min-width:1400px){
                   body {
                        background: blue;
                  }

                  .boxes-padding {
                        margin-top: 50px;
                  }


                  .box-padding {
                        width: 2%;
                  }                  

                  .box-padding:first-child {
                        width: 9%;
                  }
                  .inner {
                        min-width: 242px;
                        /*width: 17%;*/
                        flex: 0 0 8.333333%
                  }
             
            }            



 
            .box-inner {               
                  font-size: 12px;    
                  margin-bottom: 30px;

                  .inner {
                        
                        background: url('images/fields-of-b-box.png') no-repeat center bottom;
                        height: 209px;
                        border-left: 2px solid #333434;
                        border-right: 2px solid #333434;
                        position: relative;
                        text-align: center;
                        display: table-cell; 
                        vertical-align: middle;
                        .absolute {
                              position: absolute;
                              left: 8px;
                              bottom: 6px;
                        }                        
                        &:hover {
                              background: url('images/fields-of-b-box-hover.png?v=1') no-repeat center 0px;
                               transition: 0.1s;

                              .more-info-white-text2 {
                                          
                                          background: url('images/more-info-purple-text.png?v=90') no-repeat left center;
                                          color: @color-purple;
                                          transition: 0.1s;        
                                    
                              }

                              .ico .normal {
                                    display: none;
                              }
                              .ico .hover {
                                    display: inline-block;
                                    margin-bottom: -100px;
                                      
                              }

                              h2 {
                                    color: #e43d30;
                                    top: 50px;
                                    font-size: 13px;
                              }

                  }  
                  h2 {
                        font-size: 13px;
                        position: absolute;
                        top: 0;
                        z-index: 1;
                        width: 100%;
                        padding: 5px;
                  }                
                        .ico {
                              z-index:2;
                              position: relative;
                               

                              p {
                                    margin-top: 30px;
                              }
                               
                              .hover {
                                    display: none;
                              }
                        }
                  }
            }
      }
}


 







/***** FIELDS OF B 2 *****/
#fields-of-b2 {
      background: url('images/print-background.png') no-repeat top left #fff; 
      background-size: cover;
      min-height:750px;
      color: #fff;

      a {
            color: #fff;
      }

      .main-text {
            line-height: 27px;
         
   
      }


      @media (max-width:576px){
            .box {
                  margin: 0 auto;                   
            }
            .box-padding {
                  display: none;                   
            }  
            .setPadding {
                  margin-top: 0px !important;
                  padding-top: 0 !important;
            }  
 

      }

      @media (min-width:576px){
            .box {
                  margin: 0 auto;                   
            }
            .box-padding {
                  display: none;                   
            }  

 
       

      }
      @media (min-width:768px){
            .box {
                  margin: 0 0;                   
            }
            .box-padding {
                  display: block;                   
            }                
   
      } 


      .boxes {     

            .boxes-padding {
                  margin-top: 0px;
            }


            .box-padding {
                  width: 2%;
            }                  

            .box-padding:first-child {
                  width: 0px;
            }
            .inner {
                  min-width: 242px;
            }     

            @media (max-width:576px){
     
          

            }

             
            @media (min-width:1400px){
      

                  .boxes-padding {
                        margin-top: 50px;
                  }


                  .box-padding {
                        width: 2%;
                  }                  

                  .box-padding:first-child {
                        width: 9%;
                  }
                  .inner {
                        min-width: 242px;
                        /*width: 17%;*/
                        flex: 0 0 8.333333%;
                  }
             
            }            



 
            .box-inner {               
                  font-size: 12px;    
                  margin-bottom: 30px;

                  .inner {
                        
                        background: url('images/fields-of-b-box.png') no-repeat center bottom;
                        height: 209px;
                        border-left: 3px solid #333434;
                        border-right: 3px solid #333434;
                        position: relative;
                        text-align: center;
                        display: table-cell; 


                        .ico {
                              margin-top: 30px;
                        }
                     
                       
                        &:hover {
                              background: url('images/fields-of-b-box-hover.png') no-repeat center bottom;
                               transition: 0.1s;

                              

                       
       

                  }  
                  h2 {
                        font-size: 13px;
                        position: absolute;
                        bottom: 32px;
                        z-index: 1;
                        width: 100%;
                        padding: 5px 10px;
                  }                
                        .ico {
                              z-index:2;
                              position: relative;
                               

         
                               
                  
                        }
                  }
            }
      }
}



/***** PEOPLE  *****/
#people {
      background: #000;
      background-size: cover;
      min-height:750px;
      color: #fff;
      padding-bottom: 50px;
      a {
            color: #fff;
            text-decoration: none;
            &:hover {
                  color: #fff;
            }
      }
       .carousel-limit {
             overflow: hidden;
             margin: 0 auto;
             width: 90%;
       }
       .low-line {
            line-height: 12px;
       }
      .more-info-white-text-people {
            background: url(images/more-info-white.png?v=90) no-repeat left center;
            background-size: 100%;
            min-width: 83px;
            font-size: 14px;
            line-height: 15px;
            padding-left: 20px;
            padding-top: 5px;                
      }
 
   
      .navigation {
            position: absolute;
            top: 36%;
            width:100%;
            z-index: 0;
            
            @media (max-width:576px){
                  z-index: 1000;
            }  

 
      }
 
      #slick.slick-initialized {
        display: block;
      }
      .slide {
             
      }

      #slick .slick-list {
        margin-left: -15px;
        margin-right: -15px;
      }

      #slick .slick-slide {
        padding-right: 15px;
        padding-left: 15px;
      }

      #slick .slick-slide:focus {
        outline: none;
        cursor: grab;
      }

      #slick .slick-arrow {
        position: absolute;
        width: 15px;
        height: 49px;
        top: 50%;
        background-color: transparent;
        border: none;
        -webkit-appearance: none;
        padding: 0;
        z-index: 100;
        transform: translateY(-50%);
        overflow: hidden;
        text-indent: 1000px;
      }

      #slick .slick-arrow:focus {
        outline: none;
      }

      #slick .slick-arrow:hover {
        cursor: pointer;
      }

      #slick .slick-prev {
            left: -30px;
            top: 40%;
            background: url('images/carousel-prev.svg') no-repeat center center;
            height: 58px;
            width: 28px;  
      }

      #slick .slick-next {
            right: -30px;
            top: 40%;
            background: url('images/carousel-next.svg') no-repeat center center;
            height: 58px;
            width: 28px;  
      }
      h2 {
            font-size: 19px;
            width:100%;
            text-align: center;
            margin-top: 10px;
            small {
                  font-size: 16px;
            }
      }
      .content {
            /*padding: 140px 0 0px 0;*/
            .boxes {
                  margin-top: 150px;
                  position: relative;
                  min-height: 470px;                  
                  margin: 150px 40px 0 40px;

                  @media (max-width:576px){
                        margin: 0;
                  }
            
                  .box {                   
                      
                        position: relative;
                        padding: 10px 2px;
                        font-size: 16px;   
                        min-height: 520px;
                        border: 1px solid transparent;      

                        img {
                              max-height: 300px;
                             
                        }               
 
                        &:hover {
                             border: 1px solid #fff; 
                             background:#656193;
                               -webkit-animation: show-border 3s infinite; /* Chrome, Safari, Opera */
                              animation: show-border 3s infinite;
                               

                              p {
                                    display: block;
                              }                             



                              h2 {
                                    color: #000;
                              }

                               img {
                                    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
                                    filter: grayscale(0%);                                  
                                    transition: 0.1s;                                     
                              }                          

                        }
                        .img-box {
                              
                              text-align: center;
                        }

                        @media (max-width:576px){                 
                              img {        
                                    top: 0px;
                                    height: auto;                                   
                              }            
                        }

              
                        @media (min-width:1400px){              

                      
                              img.director {         
                                    
                                    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
                                    filter: grayscale(0%);
                              }
                              img {    
                                    /* top: -70px;                                             
                                     margin-top: -35px;  
                                     */                                   
                              }
                         
                        }



                        img {
                             /* width: 204px;*/
                              display: inline-block;
                              margin: 0 auto;
                              -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
                              filter: grayscale(100%);
                              position: relative;
                              
                             
                             
                        }
                        img.director {
                              
                              -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
                              filter: grayscale(0%);
                         
                        }
                        p {
                              padding: 20px;
                              display: none;
                              -webkit-animation: fade 3s ; /* Chrome, Safari, Opera */
                              animation: fade 1s ;                              
                        }                        
                  }
            }
      } 

      @media (min-width: 992px) {       
            .content {
                padding-top: 150px;
                padding-bottom: 150px
            }       
      }   



      .cbox {
 
       }
       @media (max-width: 960px) { 
             .cbox {
                  flex: 0 0 100%;
                  max-width: 100%;
            }
       }
       .img-box {
          
       }
       .effect {
             animation: fadeLeft 2s; 
       }

        .effect2 {
             animation: fadeLeft2 2s; 
       }
       @keyframes fadeLeft {
       0% { 
            transform: translateX(33%)
            }
      }


       @keyframes fadeLeft2 {
        0% {
 
         transform: translateX(33%)
            }
      }  

 
 .box-mobile {                
                      
      position: relative;
      padding: 10px;
      font-size: 16px;    
      border: 1px solid transparent;   
      border: 1px solid #fff; 
      background:#656193;   
      } 
 .people-mobile {
      .more-info-white-text-people {
            background: none;
            background-size: 0;
            max-width: 100%;
            font-size: 10px;
            padding-left: 0px;
            padding-top: 0px;    
            margin-bottom: 10px;               
            display: inline-block;
      }                                              
      }
      
}







/***** VALUES  *****/
#values {
      background: url('images/values-background.jpg') no-repeat;
      background-size: cover;
      min-height:750px;
      padding-bottom: 50px;
      font-size: 20px;

      img {
            width: 120px;
      }      


      .left-side {
             padding-top: 83px;
             font-size: 23px;
             font-weight: bold;
      }

      a {
            text-decoration: none;
      }

      h1.our-values-title {
            margin-top: 0
      }

      .content {
           /* padding: 60px 0 0px 0; */
      }

      h1 {
            margin-top:70px
      }



      .boxes {   
            padding: 0;
            .box {
                  margin-top: 10px;
                  margin-bottom: 30px;

                  .inner {                      

  
                        h2 {
                             
                              color: #656193;
                              border-bottom: 10px solid #656193;
                              padding-right: 20px;
                              display: inline-block;
                              margin-bottom: 30px
                                                     
                        }                
                              .descr {
                                    z-index:2;
                                    position: relative;
                                   
                                     
                                   
                              }
                        }

                        .inner:before {

                                --g: #000, #0000 1deg 179deg,#000 180deg;
                                --mask:
                                  conic-gradient(from 45deg at bottom 50px right 50px,var(--g)) 100% 100%/100% 100% no-repeat;      
                                -webkit-mask: var(--mask);
                                        mask: var(--mask);                         
                              }
                  }
      }
      @media (min-width:768px){
            .boxes {
                  padding: 60px 20px 0 40px;
            }
      }  

}









/***** NEWS *****/
#news {
      background: #d9d8d6 url('images/news-background.jpg') no-repeat bottom;
      background-size: cover;
      min-height:750px;
 
      .news-image {
          height: 308px;
          background: #656193;
          vertical-align: middle;
          display: flex;
          align-items: center;
          img {
            display: block;
            margin: 0 auto;
          }
      }

     .inner {

        a {
            text-decoration: none;
            color: #fff;
        }
      }
      .news-content {
            padding: 0 20px;
      }
      .news-block {
            background-color: #41395f;
            padding: 10px;             
            color: #fff;
            min-height: 700px;
            margin-top: 20px;



            &:hover {
                  background: #656193;
                  color: #000;
                  transition: 0.1s;


                  .logo {
                       
                  }
                  .hover {
                        display: inline-block;
                  }
                  .normal {
                        display: none;
                  }
                  .more-info-white {
                        background: url('images/more-info-purple.png?v=1') no-repeat left center;
                  }
            }
      }
      h1 {
            display: inline;
            color: #000;
            font-weight: 900;
            margin-right: 30px;
      }
      h2 {
             
            font-size: 24px;
            font-weight: 900;

      }

      .margin {
            display: inline-block;
            
            vertical-align: middle;
            margin-top: -7px;
            
      }

      .logo {
            max-height: 30px;
            margin: 10px 0;
            
      }
      .hover {
            display: none;
      }
 }


/***** SINGLE *****/

#single { 
      color: #fff;
      background: url('images/holding-numbers-background.png') no-repeat center center;
      background-size: cover;
      margin-top: 50px;
      color: #000;
    
 
}      



/***** ARCHIVE *****/

#archive { 
      color: #fff;
      background: url('images/holding-numbers-background.png') no-repeat center center;
      background-size: cover;
      margin-top: 50px;
      color: #000;
    
 
}      

/***** FIELD *****/

#field { 
      color: #fff;
      background: #000;
      margin-top: 50px;
      .links {
            position: relative;
            z-index: 2;
      }
      @keyframes fadeIn {
            0%{
                  opacity:0;transform:scale3d(.8,.8,.8)
            }
            100%{
                  opacity:1
            }
      }

 


      .fade {
            opacity:1;
            animation: fade 8s;
      }



      .box_number_1, .box_number_2, .box_number_3, .box_number_4 {
             
            animation: fadeIn 0.9s  linear;            
      }
    
      .active  .box_number_1 {
            opacity:1;
            animation: fadeIn 1s  linear; 
                 
      }

      .active  .box_number_2 {
            opacity:1;
            animation: fadeIn 1.1s  linear; 
                 
      }

      .active  .box_number_3 {
            opacity:1;
            animation: fadeIn 1.2s  linear;
                 
      }

      .active  .box_number_4 {
            opacity:1;
            animation: fadeIn 1.3s  linear;  
                 
      }      

      .carousel-control-next-icon {
            background: url('images/carousel-next.svg') no-repeat center center;
            height: 58px;
            width: 28px;
      }

      .carousel-control-prev-icon {
            background: url('images/carousel-prev.svg') no-repeat center center;
            height: 58px;
            width: 28px;
      }      

      .links {
            position: absolute;
         
            z-index: 2;
            bottom: 30px;
            margin-left: 30px;
      }

      .links td {
            padding: 5px 10px;
      }
 

      .links img {
            
            max-width: 20px;
            margin: 0 10px;
       
      }

           
            .left-side {
         
                  display: flex;
                 align-items: self-end;  
                   
            }  


            #field-traficon {
      
                  img.main {
                        position: relative;
                        z-index: 1;
                        top: 0;
                        left: 0;
                      
                  }
             }   
            #field-remy {
                  .left-side {
                        background: url('images/obory-remy.jpg') no-repeat left top;
                        background-size: contain;                   
                  }  
             }      

            #field-eaq {
                  .left-side {
                        background: url('images/obory-eaq.jpg') no-repeat left top;
                        background-size: contain;                  
                  }  
             }    
            #field-ngretail {
                  .left-side {
                        background: url('images/obory-ngretail.jpg') no-repeat left top;
                        background-size: contain;                 
                  }  
             }    

            #field-krouzky {
                  .left-side {
                        background: url('images/obory-krouzky.jpg') no-repeat left top;
                        background-size: contain;                
                  }  
             }                                                    


            .right-side {

                  display:flex; 
                  align-items: center;

                  .numbers {
                        margin-top: 20px;
                  }

                  .inner {
                        padding: 50px 20px;
                        font-size: 16px;
                  }  

                  @media (min-width:992px){
                        .inner {
                              .box {
                              font-size: 12px;
                               }
                        }   
                  }                     
                                 

                  @media (max-width:576px){
                        .left-side {
                              min-height: auto;
                                          
                        }
                        .inner {
                              padding: 20px 0;
                        }                     

                  }
                  .box {
                        border: 1px solid white;
                        padding: 20px 2px 0 2px;
                        text-align: center;
                        margin-bottom: 10px;

                        .ico {
                              background: #252730;
                              padding: 14px 0;
                               
                        }



                        .number {
                              font-size: 30px;
                              line-height: 32px;
                              margin-bottom: 20px;
                              small {
                                    font-size: 20px;
                                    line-height: 22px;
                                    display: block;
                              }
                        }
                        @media (min-width:1400px){
                              .number {
      
                                    font-size: 50px;
                                    line-height: 52px;
                                    margin-bottom: 20px;
                                    small {
                                          font-size: 30px;
                                          line-height: 32px;
                                          display: block;
                                    }
                              } 
                        }                        
                  }
            }                  
      
}



/***** NUMBERS *****/

#numbers { 
      color: @color-blue2;
      background: #000;
 
      background: url('images/holding-numbers-background.png') no-repeat center center;
      background-size: cover;

            .left-side {
         
                  display: flex;
                 align-items: self-end;  
                   
            }  

            .right-side {

                  display:flex; 
                  align-items: center;

                  .numbers {
                        margin-top: 60px;
                  }

                  .inner {
                        padding: 0 20px 50px 20px;
                        font-size: 16px;
                        width:100%;
                  }  

                  @media (min-width:992px){
                        .inner {
                              .box {
                                     font-size: 12px;
                               }
                        }   
                  }                     
                                 

                  @media (max-width:576px){
                        .left-side {
                              min-height: auto;
                                          
                        }
                        .inner {
                              padding: 20px 0;
                        }                     

                  }
                  .box {
                        border-left: 1px solid #676497;
                        border-right: 1px solid #676497;
                        border-bottom: 1px solid #676497;
                        padding: 20px 0px 0 0px;
                        text-align: center;
                        margin-bottom: 10px;

                        .ico {
                              background: #CCCBDE;
                              padding: 14px 0;
                               
                        }



                        .number {
                              font-size: 30px;
                              line-height: 32px;
                              margin-bottom: 20px;
                              small {
                                    font-size: 20px;
                                    line-height: 22px;
                                    display: block;
                              }
                        }
                        @media (min-width:1400px){
                              .number {
      
                                    font-size: 50px;
                                    line-height: 52px;
                                    margin-bottom: 20px;
                                    small {
                                          font-size: 30px;
                                          line-height: 32px;
                                          display: block;
                                    }
                              } 
                        }                        
                  }
            }                  
      
}


/***** FOOTER *****/
#footer {
      padding-top: 60px;
      border-top: 1px solid @color-purple;
      font-size: 16px;

      .logo-footer {
            display: block;
            margin-bottom: 20px;
      }

      .content {
            margin: 0 auto;
            text-align: center;
            padding: 0;

            div {
                  display: inline-block;
            }
            .logo {
                  width: 168px;
                  display: inline-block;
            }
            ul {
                  margin: 0;
                  padding: 0;
                  display: inline-block;

                  li {
                        margin: 0;
                        padding: 0 36px;
                        display: inline-block;

                        a {
                              color: #000;
                              &:hover {
                                    color: @color-red;
                              }

                        }

                  }
            }
      }
}


.gallery-item {
      img {
            vertical-align: middle;
            border-style: none;
            display: inline-block;
            float: left;
            width: 200px;
            height: 150px;
            float: left;
            border: 2px solid transparent;
      }
}
/***** POPUP  *****/     

#popup {
      color: #fff;
      background: black;
      /*overflow-x: hidden;  */
      overflow: hidden;
      padding: 0;
       @media (max-width:768px){
          overflow-y: visible;  
       }

      @media (min-width:768px){
            #main {

                  display: flex;
                  height: 100vh;
                  align-items: center;
            }
      }

      a {
            text-decoration: none;
            color: #fff;
      }
      .inner {
            font-family: Nunito;
            font-weight: 100;
            padding: 20px;
      }

      .left-side {
            background: #000 url('images/popup-left-side-bg.png') no-repeat;
            background-size: cover;
            order: 1;
            height: 100vh;
            @media (max-width:768px){
                 display: none
            }            
                  h1 {
                        font-size: 32px;
                  }

                  h2 {
                        font-size: 25px;
               
                  }
                  p {
                        font-size: 19px;
                        margin-bottom: 0px;
                  }
      }      
      .right-side {
            order: 2;
            height: 100vh;
     
            .description {
                  min-height: 200px;
            }
            .inner {
                  display: inline-flex;
                  align-items: center;
                  height:100%;
             @media (max-width:768px){
                       align-items: baseline;
                  
                  }                  

                  .n2-ss-item-image-content img {
                        width: 300px;
                        max-width: 100%;
                  }
            }
            background: #000 url('images/popup-right-side-bg.png') no-repeat;
            background-size: cover;
                  h2 {
                        font-size: 32px;
                        font-weight: normal;
                  }
                  p {
                        font-size: 19px;
                        margin-bottom: 30px;
                  }
      } 
      .navigations {
            text-align: center;
            position: relative;
            margin: 0 auto;


            a {
                  position: relative;
                  width: auto;
                  display: inline-block;
                  margin: 0 40px;
            }

            .carousel-control-next-icon {
                  background: url('images/carousel-next.svg') no-repeat center center;
                  height: 58px;
                  width: 28px;
                  top: 0;
                  position: relative;
                @media (max-width:768px){
                              top: -3px;
                        
                        }                    
            }

            .carousel-control-prev-icon {
                  background: url('images/carousel-prev.svg') no-repeat center center;
                  height: 58px;
                  width: 28px;
                  position: relative;
                 
                            
            }    
      }  
      img.person-image {
            border-radius: 129px;
          

      }    
      @media (max-width:576px){ 
            img.person-image {
                  border-radius: 129px;
                   
                  max-height: 300px;

            }
      } 
}