:root {
        --primary-color: #f4b000;
      }

      .btn-warning {
        color: #212529;
        background-color: var(--primary-color)! important;
        border-color: var(--primary-color)! important;
      }
      
      /* Utils */
      .delay-5s {
        -webkit-animation-delay: 5s;
        animation-delay: 5s;
      }

      .delay-6s {
        -webkit-animation-delay: 6s;
        animation-delay: 6s;
      }

      .delay-7s {
        -webkit-animation-delay: 7s;
        animation-delay: 7s;
      }

      .delay-8s {
        -webkit-animation-delay: 8s;
        animation-delay: 8s;
      }

      .delay-9s {
        -webkit-animation-delay: 9s;
        animation-delay: 9s;
      }

      .delay-10s {
        -webkit-animation-delay: 10s;
        animation-delay: 10s;
      }

      .card.mw-100 {
        max-width: 100%! important;
      }

      /* Basic */
      body, html {
        font-family: Montserrat, sans-serif!important;  
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;        
        scroll-behavior: smooth;
        overflow-y: overlay;
        max-width: 100vw;
      }
      
      video {
        outline: 0px! important;
      }
      
      a:hover {
        text-decoration: none;
        cursor: pointer;
      }
      
      hr {
        background-color: var(--primary-color);        
      } 
      
      .btn-main {
        background-color: var(--primary-color);  
        color: white;
      }

      .popover-body {
        padding-bottom: 16px;
      }

      .popover.bs-popover-right .arrow {
        left: calc((.5rem + -4px) * -1)! important;
      }

      section {
        -webkit-overflow-scrolling: touch;
      }
      
      section .text-right li {
        margin-right: 10px;
      }   
      
      .section-hr {
        height: 2px;
        margin-top: -5px;
        max-width: 210px
      }
      
      .vertical-center {
        min-height: 100%;  
        min-height: 90vh; 
        display: flex;
        align-items: center;
      }
      
      nav {
        font-size: 20px;
        background-color: #2a2e37;
      }
      
      h1,
      span.title {
        font-size: 60px;
        font-family: Comfortaa;
      }
      
      .bg-dark {
        background-color: #343a40!important;
      }

      .bg-light-dark {
        background-color: #3c4147!important;
      }
      
      /* Navigation */     
      .dropdown-menu, .dropdown-item {
        transition: all 400ms;
      }
      
      nav img:not(.header-lang-img) {
        height: 32px;
        float: left;
        padding-right: 4px;
      }
      
      .navbar-brand {
        color: white! important;
        padding-left: 15px
      }
      
      .nav-link {
        color: white! important;
      }

      .cookie-btn {
        min-width: 140px;
      }

      .header-lang-img {
        max-height: 18px;
        margin-top: -0.2rem;
        padding-left: 0.3rem;
        padding-right: 0.3rem;
      }

      .dropdown-menu .header-lang-img {
        max-height: 21px;
        margin-top: 0;
        padding: 0;
        margin-right: 8px;
        -webkit-box-shadow: 0px 1px 8px 0px rgba(0,0,0,1);
        -moz-box-shadow: 0px 1px 8px 0px rgba(0,0,0,1);
        box-shadow: 0px 1px 8px 0px rgba(0,0,0,1);
      }
      
      .main-navbar {
        position: fixed;
        z-index: 999;
        top: 0px;
        width: 100vw;
      }
      
      .main-navbar i, .dropdown-toggle::after {
        color: var(--primary-color);   
      }
      
      .navbar-light .navbar-toggler {
        border-color: rgba(255, 255, 255, 0.9);
        color: white!important;
      }
      
      .navbar-light .navbar-toggler i {
        color: white! important;
      }
      
      .nav-system {
       color: var(--primary-color);
      }
      
      .speech-balloon {
        padding: 1rem;
        border-top-right-radius: 1rem;
        border-top-left-radius: 1rem;
      }

      /* Style */
      #main {
        margin-top: 58px;
        height: 100%! important;
        min-height: 952px;
        padding-top: 73px;        
        position: relative; 
        background-color: black;
        color: white;
        text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);      
      }
      
      #main::before {
        content: "";
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%; 
        -webkit-filter: brightness(0.30);
        filter: brightness(0.30);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;        
      }
      
      .arrow{
          position: absolute;
          top: 40%;
          left: 15%;
          transform: translate(-50%,-50%);
      }
      
      .arrow span{
          display: block;
          width: 19px;
          height: 19px;
          border-bottom: 2px solid var(--primary-color);
          border-right: 2px solid var(--primary-color);          
          margin: -10px;
          animation: animate 2s infinite;
          transform: rotate(45deg);
      }

      .face-photo {
        max-height: 14rem;
        border-radius: 10rem;
      }
      
      .arrow span:nth-child(2){
          animation-delay: -0.2s;
      }
      
      #video-section {
        padding-top:0px;
      }
      
      #video-section > .sub-title {
        background-color: #343a40!important;
        padding: 1rem;
        color: white;
      }
        #video-section > .sub-title .specialization-select {
          font-size: 1.3rem;
          height: 4rem;
        }
      
      .video {
        width:100%;
        height: 100%;
        margin: 0 auto;
      }
      
      .monitor {
        background-color: #222;
        height: 99.2%;
        width: 98%;
        padding: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 0px 0px 37px 3px rgba(255,255,255,0.89);
        -moz-box-shadow: 0px 0px 37px 3px rgba(255,255,255,0.89);
        box-shadow: 0px 0px 37px 3px rgba(255,255,255,0.89);
      }      
      
      .monitor-screen {
        width: 100%;
        height: 100%;
      }        
      
      @keyframes animate {
          0%{
              opacity: 0;
              transform: rotate(45deg) translate(-10px,-10px);
          }
          50%{
              opacity: 1;
          }
          100%{
              opacity: 0;
              transform: rotate(45deg) translate(5px,5px);
          }
      }
      
      @media only screen and (min-width: 1024px){
        #main::before {
          background-image: url("../img/office.jpg"); 
        }
      }
      
      @media only screen and (max-width: 1024px) {
        #main::before {
          background-image: url("../img/office-phone.jpg"); 
        }
        
        .arrow {
          transform: translate(0,0);
          left: 50%;
          margin-top: 4%;
        }
      }
      
      .main-description {
        padding-top: 52px;
        font-size: 23px;        
      }
      
      .main-button {
        margin-top: 45px;
      }
      
      .main-button .btn {
        margin-left: auto;
        margin-right: auto;
        font-size: 25px;
        padding: 25px;
        background-color: transparent! important;
        color: var(--primary-color);
        min-width: 360px
      }

      /* Title */
      .title-under {
        margin-top: 35px;        
      }
      
      .title-under h2 {
        font-size: 2.75rem!important;
        line-height: 2.75rem!important; 
      }
      
      .title-under hr {
        height: 2px;
        margin-top: 21px;
        max-width: 210px
      }

      /* Workshop modal */
      #workshop-modal .modal-body {
        background: #F9B000;
      }
      #workshop-modal section:nth-of-type(1)::before {
        background-image: url(../img/workshop/senior.jpg);
        content: "";
        position: absolute;
        top: -1px;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-filter: brightness(0.30);
        filter: brightness(0.30);
        background-position: top;
        background-repeat: no-repeat;
        background-size: 110%;
      }

      #workshop-modal .col-form-label {
        max-width: 100px;
      }

      #workshop-modal .paper:not(.no-rotate),
      #workshop-modal .paper-badge:not(.no-rotate) {
        -moz-transform: rotate(8deg);
        -webkit-transform: rotate(8deg);
        -o-transform: rotate(8deg);
        -ms-transform: rotate(8deg);
        transform: rotate(8deg);
      }

      #workshop-modal .paper-badge {
        z-index: 999;
        position: relative;
      }

      #workshop-modal .paper {
        background: #daaa06;
        color: black;
        border-radius: 30px;
        margin-top: -43px;
      }
        #workshop-modal .paper::before {
          content: "";
          position: absolute;
          background-color: black;
          width: 19px;
          height: 2px;
          left: 11px;
          top: 20px;
          z-index: 1;
          transform: rotate(327deg);
          -webkit-transform: rotate(327deg);
          -moz-transform: rotate(327deg);
          z-index: 1000;
        }

        #workshop-modal .paper li:before {
          content: unset! important;
        }

        #workshop-modal .paper li {
          padding-bottom: 0.1rem! important;
          font-size: 1.4rem! important;
        }

      @media only screen and (max-width: 390px) {
        #workshop-modal .modal-header > img {
          width: 174px! important;
        }
      }

      #workshop-modal section:nth-of-type(n+2) {
        -webkit-transform: skew(0deg, -3deg); 
        transform: skew(0deg, -3deg);
        z-index: 999;
        position: relative;
      }
      #workshop-modal section:last-of-type {
        -webkit-transform: skew(0deg, 0deg)! important; 
        transform: skew(0deg, 0deg)! important;
        z-index: 999;
        position: relative;
        background: #272727! important;
      }

        #workshop-modal section:nth-of-type(n+2) > div {
          -webkit-transform: skew(0deg, 3deg);
          transform: skew(0deg, 3deg);
        }

      #workshop-modal .paper li,
      #workshop-modal .time-info div:not(.time-info-header) {
        font-size: 1.3rem! important;
        color: white;
        margin-left: 1rem;
        min-width: 101px;
        padding: 1rem 0;
        text-align: center;
        text-shadow: 1px 1px 1px #343a40!important;
      }
      #workshop-modal .time-info div:not(.time-info-header).fancy-bg,
      #workshop-modal span:not(.time-info-header).fancy-bg {
          border: 1px solid var(--primary-color);
          background: rgb(255 193 7 / 85%);
        }

        #workshop-modal .time-info div:not(.time-info-header) span:not(.time-value) {
          width: 100%;
          text-align: center;
          display: block;
          font-size: 19px;
          margin-left: -12px;
        }
          #workshop-modal .time-info .fas {
            font-size: 1.2rem;
          }

        #workshop-modal .time-info div.time-info-header {
          background: #dc3545;
          border-color: #dc3545;
          width: calc(100% + 2rem + 2px);
          margin-top: -2rem;
          margin-left: calc(-1rem - 1px);
          height: 25px;
          border-top-left-radius: 0.4rem;
          border-top-right-radius: 0.4rem;
        }

      #workshop-modal #style-section {
        background: white;
        height: 4px;
        padding: 0;
        top: -27px;
        -webkit-box-shadow: -9px 13px 69px 11px rgba(255,255,255,1);
        -moz-box-shadow: -9px 13px 69px 11px rgba(255,255,255,1);
        box-shadow: 0px 3px 3px 0px rgba(255,255,255,0.8);
      }
      
      #workshop-modal .badge-section span {
        background: white;
        padding: 1rem;
        font-size: 1.3rem;
        margin-left: 1rem;
        margin-top: 14px;
        border-radius: 8px;
      }

      #workshop-modal #workshop-photos .row > div img,
      #workshop-modal #workshop-photos .row > div .badge {
        position: relative;
      }

      #workshop-modal #workshop-photos .row > div .badge {
        z-index: 999;
      }

      #workshop-modal #workshop-photos .row > div img {
        z-index: 998;
        padding: 1rem;
        background: white;
        border-radius: 15px;
      }
        #workshop-modal #workshop-photos .row > div .col-5::before {
          content: "";
          position: absolute;
          background-color: black;
          width: 15px;
          height: 2px;
          left: 31px;
          top: 17px;
          z-index: 1;
          transform: rotate(327deg);
          -webkit-transform: rotate(327deg);
          -moz-transform: rotate(327deg);
          z-index: 1000;
        }

        #workshop-modal #workshop-photos img {
          max-height: 250px;
        }

      #workshop-modal .google-calendar-ref {
        transition: all .2s ease-in-out;
      }
        #workshop-modal .google-calendar-ref:hover {
          transform: scale(1.1);
        }

      #workshop-modal section:nth-child(2) {
        position: relative!important;
        z-index: 999;
        display: block;
      }

      #workshop-modal section:nth-child(3) {
        background: #272727;
        margin-top: -2rem;
        z-index: 998;
      }
      
      #workshop-modal .fas.fa-user-alt {
        font-size: 2rem;
        padding: 1rem;
      }

      @media only screen and (min-width: 1199px) {
        #workshop-modal #main-body {
          min-height: 640px;
        }
      }

      @media only screen and (max-width: 1199px) {
        #workshop-modal #main-body {
          min-height: 530px;
        }

        #workshop-modal section:nth-of-type(1)::before {
          background-size: 120%! important;
        }

        #workshop-modal .paper li, #workshop-modal .time-info div:not(.time-info-header) {
          min-width: 68px;
        }

        #workshop-modal .paper li,
        #workshop-modal .time-info div:not(.time-info-header) {
          min-width: 68px! important;
        }

        #workshop-modal .google-calendar-text {
          font-size: 1.12rem! important;
        }
      }

      @media only screen and (max-width: 992px) {
        #specialization-carousel li::before {
          content: ""! important;
        }
        #workshop-modal .time-info div:not(.time-info-header) {
          font-size: 1rem;
          min-width: 90px;
          margin-left: 0.3rem;
        }

        #workshop-modal .time-info div:not(.time-info-header) span:not(.time-value) {
          font-size: 15px;
          margin-left: 13px;
        }

        #workshop-modal #main-body {
          min-height: 580px;
        }

        #google-calendar-ref span {
          font-size: 14px! important;
        }

        #workshop-modal section:nth-of-type(1)::before {
          background-size: 210%! important;
        }

        #workshop-modal .time-info {
          max-width: 380px! important;
        }
      }

      @media only screen and (max-width: 574px) {
        #main-body {
          min-height: 675px! important;
        }

        #workshop-modal section:nth-of-type(1)::before {
          background-size: cover! important;
          max-height: 200vh;
        }
      }

      /* Live demo */
      #live-demo .row:last-of-type{
        padding-top: 10px;
        padding-bottom: 25px;
      }
      
      #live-demo {
        padding-top: 0px
      }
      
      .live-demo-left, .live-demo-right, .live-demo-center {
        transition: all 400ms;
      }
      
      .live-demo-right.active, .live-demo-left.active, .live-demo-center.active {
        box-shadow: 0px 0px 87px 8px rgba(255,193,7,1);
        -webkit-box-shadow: 0px 0px 87px 8px rgba(255,193,7,1);
        -moz-box-shadow: 0px 0px 87px 8px rgba(255,193,7,1);
      }
      
      .card {
        margin-left: auto;
        margin-right: auto;
        width: 18rem;
      }
      
      .card-img-top {
        max-height: 189px! important;
      }
      
      .card-body {
        background-color: #343a40!important;
        color: white;
      }
      
      #price-list-cards .card {
        width: 100%! important;
        -webkit-box-shadow: 3px 4px 13px 0px rgba(50, 50, 50, 0.56);
        -moz-box-shadow: 3px 4px 13px 0px rgba(50, 50, 50, 0.56);
        box-shadow: 3px 4px 13px 0px rgba(50, 50, 50, 0.56);
        border: 0px! important;
      }
        #price-list-cards .input-group-text {
          background-color: var(--primary-color);          
        }
        #price-list-cards .card .card-text {
          text-align: center;
          min-height: 50px;
        }
        #price-list-cards .card .fa-hourglass {
          color: var(--primary-color);
        }
        
        #price-list-cards .first-card.card-body {
          background-color: #343a40!important;
          color: white! important;
        }
        
        #price-list-cards .card-body {
          background-color: white!important;
          color: black;        
        }
          #price-list-cards .card-body .card-title {            
            text-align: center;            
            text-shadow: 3px 1px 1px rgba(150, 150, 150, 1);         
          }
            #price-list-cards .card-body .card-subtitle {
              text-align: center;
              min-height: 40px;
              max-width: 196px;
              margin-left: auto;
              margin-right: auto;
            }
            
            #price-list-cards .card-body hr {
              width: 73%;              
            }
            
        #price-list-cards i.card-main-icon {
          color: #343a40!important;
          font-size: 43px;
        }
        #price-list-cards i.card-sub-icon {
          color: var(--primary-color);
          font-size: 16px;
          margin-left: -8px;
          margin-top: 28px;
          position: absolute;
        }
        
        #price-list-cards .custom-control.custom-switch {
          text-align: center;
        }
        
      #price-list-cards .mini-card {
        min-height: 107px! important;
        padding: 10px;
        padding-left: 0px;
        padding-right: 0px;
      }
      
      .joiner{
        padding: 25px;        
      }
      
      .joiner::after {
        content: "";
        width: 40%;        
        margin-top: -150px;
        margin-right: auto;       
        margin-left: auto;
        border-top: 3px solid rgba(0,0,0,.125);        
      }
      
      /* Mobile app */
      #mobile-app {
        color: white;        
      }
      
      #mobile-app .container {
        padding: 25px;
      }
      
      .app-icon {
        max-height: 100px;
        transition: all .2s ease-in-out;
      }
      
      .app-icon:hover {
        scale: 1.1;
      }
      
      .line-between {
        max-height: 20px;
        height: 35px;
        min-height: 10px!important;
        margin-top: 39px;
      }
      
      
      /* Price */      
      .body-content .price-non-active {
        text-decoration-line: line-through;
        color: rgba(0, 0, 0, 0.4);
      }
      
      .price-list {
        padding-top: 25px;
        padding-bottom: 45px;                  
        color: black;        
      } 
      
      .price-list h2 {
        font-size: 2.75rem!important;
        line-height: 2.75rem!important;
      }

      .price-list span.price {
        color: rgba(0, 0, 0, 0.6);
        font-size: 2rem;     
      }
      
      .price-list .main-text h1 {
        color: black;     
      }
      
      .price-list #price-list-info b {
        text-shadow: 1px 1px black;
      }
      
      .price-list h3 {
        font-size: 1.3rem;
        letter-spacing: 0.1rem;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.3);
        transition: all 400ms;
        animation-play-state: paused;
      }
                  
      #prices .col-md-3 {
        padding: 6px
      }
      
      .price-card {        
        width: 100%;
        border: none;
        border-radius: 1rem;
        transition: all 0.2s;
        box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
        background-color: white;
        padding-bottom: 15px; 
        background: rgba(252,207,70,1);
        background: -moz-linear-gradient(-45deg, rgba(252,207,70,1) 0%, rgba(252,207,70,1) 58%, rgba(241,231,103,1) 100%);
        background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(252,207,70,1)), color-stop(58%, rgba(252,207,70,1)), color-stop(100%, rgba(241,231,103,1)));
        background: -webkit-linear-gradient(-45deg, rgba(252,207,70,1) 0%, rgba(252,207,70,1) 58%, rgba(241,231,103,1) 100%);
        background: -o-linear-gradient(-45deg, rgba(252,207,70,1) 0%, rgba(252,207,70,1) 58%, rgba(241,231,103,1) 100%);
        background: -ms-linear-gradient(-45deg, rgba(252,207,70,1) 0%, rgba(252,207,70,1) 58%, rgba(241,231,103,1) 100%);
        background: linear-gradient(135deg, rgba(252,207,70,1) 0%, rgba(252,207,70,1) 58%, rgba(241,231,103,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fccf46', endColorstr='#f1e767', GradientType=1 );
        text-shadow: 1px 1px white;
      }

      .theme-background {
        background: rgba(252,207,70,1);
        background: -moz-linear-gradient(-45deg, rgba(252,207,70,1) 0%, rgba(252,207,70,1) 58%, rgba(241,231,103,1) 100%);
        background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(252,207,70,1)), color-stop(58%, rgba(252,207,70,1)), color-stop(100%, rgba(241,231,103,1)));
        background: -webkit-linear-gradient(-45deg, rgba(252,207,70,1) 0%, rgba(252,207,70,1) 58%, rgba(241,231,103,1) 100%);
        background: -o-linear-gradient(-45deg, rgba(252,207,70,1) 0%, rgba(252,207,70,1) 58%, rgba(241,231,103,1) 100%);
        background: -ms-linear-gradient(-45deg, rgba(252,207,70,1) 0%, rgba(252,207,70,1) 58%, rgba(241,231,103,1) 100%);
        background: linear-gradient(135deg, rgba(252,207,70,1) 0%, rgba(252,207,70,1) 58%, rgba(241,231,103,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fccf46', endColorstr='#f1e767', GradientType=1 );
      }
        .theme-text {
          color: #003B4A! important;
        }

        .theme-text .custom-control-input:checked~.custom-control-label::before {
          color: #fff;
          border-color: #003B4A;
          background-color: #003B4A;
      }
      
      .theme-reverse-background {
        background: #003B4A! important;
      }
      
      .price-card p {
        font-size: 1rem
      }

      .price-card:before {
        content: "";
        position: absolute;
        background-color: white;
        border-radius: 30px;  
        border:1px solid rgba(0,0,0,0.28);        
        width: 15px;
        height: 15px;
        left: 15px;
        top: 10px
      }
      
      .price-card-body i {
        color: black;
        position: absolute;
        color: rgba(0, 0, 0, 0.6);
        font-size: 1rem;
        font-weight: bold;
        margin-top: 2px;        
      }
      
      .price-card-header > .header-logo {
        min-height: 30px;
        padding: 12px;            
      }
      
      .price-card-body {
        min-height: 150px;
      }
      
      .price-card-body > .body-price {
        padding: 15px;
        padding-top: 0px ! important;
      }
      
      .price-card-body hr {
        background-color: transparent;
        border-top: 1px solid rgba(0,0,0,.1);
      }
            
      .price-card-body > .body-content p {
        margin-bottom: 1rem;
      }     
         
      .price-card-footer {
        padding: 20px;        
      }
      
      .price-card-footer .btn {
        color: white;
        min-width: 360px;
        font-size: 25px;
        margin-top: 25px
      }     

      .price-card:hover h3 {
        color:black! important;
        animation-play-state: running;
      }
      
      #price-list-info .btn {
        min-width: 230px;            
      }
      
      #price-list-info {
        padding-top: 13px;
        font-size: 21px;
      }
      
      #price-list-info a {
        color: var(--primary-color);
      }

      tbody tr > td:nth-child(4) {
        font-weight: bold;
      }
      /* Registration button */
      .registration-button {
        padding: 20px;
        color: white;
      }
      
      .registration-button .row {
        padding: 10px;
      }
      
      .registration-button .btn {
        padding: 10px;
        font-size: 18px;
      }
            
      /* Technology */
      section:nth-of-type(7){
        margin-top:0px;
        padding-top: 14px
      }
      
      #technology {
        margin-top: -15px;
        padding-top: 25px;
        padding-bottom: 15px;
      }
      
      #technology img {
        max-height: 125px
      } 
      
      #technology h3 {
        margin-top: 25px;
        color: white;
      }
      
      .carousel-inner > .item {
        -webkit-backface-visibility: visible;
        backface-visibility: visible;
      }
      
            
      /* Reference */ 
      #reference .carousel-item {
        min-height: 340px;
        padding-top: 0px;      
      }

      .reference-subtitle span {
        color: #5d5d5d;
      }
      
      .carousel-indicators li {
        background-color: #343a40;
        width: 10px;
        height: 10px;
        border-radius: 100%;
      }
      .carousel-indicators .active {
        background-color: var(--primary-color);
      }
      
      #reference {
        padding: 0px;        
      }
      
      #reference img {
        max-height: 300px! important;
        max-width: 300px! important;
        height: 90vh; 
        display: flex;
        align-items: center;
      }
      
      /* Contact form */
      #contact-form {
        padding-top: 0px;
      }

      /* Footer */
      footer > div {
        z-index: 600;
        position: relative;
      }

      .landing-footer {
        background-color: #343a40;
        color: white;
        padding-top: 19px;
        padding-bottom: 15px;
      }
      
      .landing-footer a {
        color: white;
      }
      
      .landing-footer li img {
        height: 23px;
        border: 1px solid #343a40;
        margin-top: -11px;        
      }
      
      .landing-footer a:hover {
        color: var(--primary-color);
      }
      
      .landing-footer ul, .landing-footer li {
        text-decoration: none;
        list-style:none;
        padding-left: 0px;
      }     
    
      .landing-footer hr {        
        max-width: 50px;
      }
      
      .hr-left {
        margin-left: 0px;
      }
      
      .hr-center {
        margin-left: auto;
        margin-right: auto;
      }
      
      .hr-right {
        margin-right: 0px;
      }

      .circle {
        position: absolute;
        z-index: 0;
        background: var(--primary-color);
        border-radius: 50%;
        box-shadow: 0.375em 0.375em 0 0 rgba(15, 28, 63, 0.125);
        height: 20em;
        width: 20em;
        margin-top: 3rem;
        margin-left: -4rem;
      }
      
      .social-icons {
        display: inline-block;
      }
      
      .social-icon {
        color: white;
        padding: 12px 5px 5px 12px;
        margin-right: 4px;
        width: 3.5rem;
        height: 3.5rem;
        display: inline-block;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        -moz-box-shadow: 0px 0px 2px white;
        -webkit-box-shadow: 0px 0px 2px white;
        box-shadow: 0px 0px 2px white;
        transition: transform .2s;
      }

      .social-icon i {
        transition: transform .2s;
      }

      .social-icon:hover {
        transform: scale(1.1);
      }

      @media only screen and (min-width: 767px) {
        #mobile-app .social-icon {
          width: 10.5rem! important;
          height: 3.5rem;
          border-radius: 10%! important;
        }

        #mobile-app .social-icon span,
        #mobile-app .social-icon i {
          float: left;
        }

        #mobile-app .social-icon span {
          margin-left: 12px;
          margin-top: 5px;
        }
      }

      .landing-footer .social-icon {
        padding: 14px 5px 5px 7px! important;
        width: 3rem;
        height: 3rem;
      }
      
      .social-icon:hover {
        -moz-box-shadow: 0px 0px 2px var(--primary-color);
        -webkit-box-shadow: 0px 0px 2px var(--primary-color);
        box-shadow: 0px 0px 2px var(--primary-color);
        color: var(--primary-color);
        cursor: pointer;
      }
      
      .social-icon i::before {
        margin-left: auto;
        margin-right: auto;
      }
      
      .landing-footer-down {
        background-color: #2c3e50;
        padding-top: 10px;
        color: gray;
        font-size: 21px;        
      }
      
      #reference-carousel {
        margin-bottom: 0rem;
        padding-bottom: 3rem;
      }
      
      /* Mobile style */      
      @media only screen and (max-width: 1200px) {
        .price-card-body h1 {
          font-size: 2.5em;
          margin-bottom: 0px;
        }
        
        .price-card-body p {
          margin-bottom: 0px;
        }
        
        .price-card-body .body-content p {
          line-height: 25px;
          min-height: 66px
        }
      }
      
      @media only screen and (min-width: 992px) {
        #technology {
          min-height: 175px! important;
        }
        
        #reference .carousel-inner {
          min-height: 328px! important;  
        }
      }
      
      @media only screen and (max-width: 992px) {
        h1 {
          font-size: 40px
        }
        
        .price-card-body h1 {
          font-size: 2em;
          margin-bottom: 0px;
        } 
        .price-card-body i {
          font-size: 15px
        }
        
        .navbar-nav.mr-auto, .dropdown-menu {
          text-align: center;
        }
        
        #log-in {
          margin-left: auto;
          margin-right: auto;
        }

        #main {
          margin-top: 57px;
          min-height: 992px;
        }
        
        #main .btn-warning {
          font-size: 15px;
          min-width: 238px
        }
        
        .joiner {
          padding: 0px! important;
        }
        
        .card {
          width: auto;
          max-width: 208px! important;
        }
        
        #price-list-cards .card {
          max-width: none! important;          
        }
        
        .price-list.card-body {
          height: 138px;
        }      
        
        .card-body > h5 {
          min-height: 48px;
        }
        
        #technology {
          height: 195px;
        }
        
        #technology img {
          padding: 10px
        }
        
        #video-section h3 {
          text-align: center
        }
        
        .monitor {
          height: 98%;
          width: 97%;
        }

        #conversion-modal .main-text {
          min-height: 84px;
        }

        #conversion-modal .important-image-section .row > div  {
          width: 100%! important;
          min-width: 100%;
          margin-left: 0rem;
        }

        /* References */
        #reference-carousel .container {
          width: 100%! important;
          max-width: 100%! important;
        }
        
        #carousel-stone img {
          margin-top: 64px! important;
          height: 62px! important;
          width: 212px! important;
        }

        #carousel-museum img {
          height: 180px! important;
        }

        #carousel-prague-city img {
          width: unset! important;
          height: 108px! important;
        }

        #carousel-theater img {
          height: 156px! important;
          margin-top: 28px! important;
        }

        #carousel-town-hall img {
          margin-top: 0px! important;
          height: 192px! important;
        }

        #carousel-vetcentrum img {
          margin-top: 0px! important;
          height: 192px! important;
        }

        #carousel-culture img {
          height: 84px! important;
          margin-top: 56px! important;
        }

        #carousel-sanabilis img {
          height: 64px! important;
          margin-top: 92px! important;
        }

        #carousel-wellnes-hotel img {
          margin-top: 96px! important;
        }

        #carousel-euphoria img {
          margin-top: 20px! important;
        }
      }

      @media only screen and (max-width: 574px) {
        #conversion-modal .important-image-section .row > div {
          margin-left: 0.5rem;
        }

        #conversion-modal .main-text {
          min-height: 124px;
        }
      }
      
      @media only screen and (max-width: 767px) {
        #references img {
          margin-top: 0px! important;
          padding-bottom: 1rem! important;
        }

        .title-under h2 {
          font-size: 2rem! important;  
        }
        
        .text-left {
          text-align: center! important;
        }
        
        .text-left h2, .text-right h2 {
          margin-top: 25px;
        }
        
        .hr-left, .hr-right {
          margin-left: auto;
          margin-right: auto;
        }
        
        #reference, #contact-form {
          text-align: center! important;
          padding-top: 0px;          
        }
        
        #reference img {
          max-height: 200px! important; 
        }
        
        #email-form {
          text-align: left;
        }
        
        #reference img {
          margin-left: auto;
          margin-right: auto;          
        }        
        .carousel-indicators {
          bottom: -35px
        }
        
        #main h1 {
          margin-top: 23px;
        }
        
        #main .btn {
          animation-play-state: paused;     
          min-width: 278px;
          margin-top:5px
        }       
        
        .side-info  ul li::before, #planning ul li::before,
        #evidence ul li::before, #advantages ul li::before,
        #accountancy ul li::before {
          display: none! important;
        }
          
        li {
          font-size: 21px;
          margin-top: .3rem;
        }
        
        #technology {
          text-align: center! important;
          height: 293px;
        }
        
        #technology .row {
          min-height: 224px! important; 
        }
        
        #technology img {
          margin-top: 17px;          
        }
        
        #reference-carousel {
          padding-top: 0px! important;
          padding-bottom: 0px! important;
        }
        
        #reference .carousel-inner {
          min-height: 444px! important;  
        }
        
        #reference .carousel-item .col-md-4 {
          height: 230px! important;
        }
        
        .carousel-indicators {
          display: none
        }
        
        #Cenik .table {
          font-size: 12px! important;
        }
        
        #Cenik .table td {
          padding: 0px;
          padding-top: 17px;
        } 
        
        .left-info-bar {
          display: none;
        }
        
        .side-info section {
          padding-top: 5px;
        }
        
        .card {
          width: 18rem;
        }
        
        .card-body {
          min-height: 0px;
        }
        
        .card-body > h5 {
          min-height: 0px;
        }
        .monitor {
          height: 98.2%;
        }
      }
      
      @media only screen and (max-width: 491px) {
        .monitor {
          height: 97.7%;
        }
      }
      
      @media only screen and (max-width: 333px) {
        .monitor {
          height: 96.2%;
        }
      }
      
      /* Sidebar */
      .left-info-bar {
        padding: 52px;
        padding-left: 20px;
        position: absolute;
        top: 0px;
        left: 0px;
        -moz-transform: rotate(340deg);
        -webkit-transform: rotate(340deg);
        -o-transform: rotate(340deg);
        -ms-transform: rotate(340deg);
        transform: rotate(340deg);
      }    

      .left-info-bar img {
        max-width: 252px;
      }

      .side-info h1:first-of-type,
      .side-info span.title:first-of-type {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
        font-size: 2rem;
      }

      @media (max-width: 960px) {
        #Reference .left-info-bar, 
        #EvidenceDochazky .left-info-bar,
        #PlanovaniSmen .left-info-bar {
          display: none;
        }     
      }
      
      .close-info {
        padding: 8px! important;
        margin-right: 25px;
        position: fixed;
        right: 15px;
        top: 15px;        
        font-weight: 700;
        line-height: 1;
        color: white! important;
        text-shadow: 0 1px 0 #fff;
        filter: alpha(opacity=20);
        opacity: 0.6;
        background-color: #dc3545! important;
        border-color: #ac2925! important;
        display: none;
        z-index:999;
      }
      
      .close-info:hover {
        opacity: 1;
      }
      
      .side-info {
        height: 100%; 
        width: 0px;
        position: fixed;
        top: 0; 
        background-color: rgba(255, 255, 255, 0.99);
        overflow-x: hidden;
        z-index: 999;
        transition: all 400ms;
      }
      
      .side-info .container-fluid {
        max-width: 1898px! important;
      }
      
      .side-info ul {
        list-style: none;
        padding: 0px;
      }

      .side-info .list-unstyled li::before, 
      #specialization-carousel ul li::before, #planning ul li::before,
      #evidence ul li::before, #advantages ul li::before,
      #accountancy ul li::before, #conversion-modal ul li::before,
      #workshop-modal ul li::before {
        content: "\2022";
        color: var(--primary-color);
        font-weight: bold;
        display: inline-block; 
        height: 35px;  
        font-size: 25px;        
      }

      #specialization-carousel ul li::before {
        padding: 5px;
      }

      #specialization-carousel {
        min-height: 1121px;
      }

      #conversion-modal section:last-of-type li::before {
        color: #c82333;
      }
      
      ul {
        padding-right: 0px;
      }
      
      .side-info section:last-of-type {
        padding-bottom: 35px;
      }
      
      .side-info .list-unstyled li::before {
        content: "";
      }
            
      .side-info .row {
        margin-top: 35px;
      }
        .side-info form#email-form2 .row {
          margin-top: unset! important;
        }
      
      #PlanovaniSmen {
        left: 0px;
      }
      
      #EvidenceDochazky {
        right: 0px;        
      }
      
      #Cenik {
        width: 100%;
        height: 0px;
      }
      
      /* Modals */
      .modal {
        z-index: 9999! important;
      }
      #modal-gdpr ul {
        display: list-item;
      }
      
      #modal-login .modal-dialog {
        max-width: 390px;
      }
      
      #modal-calculator .modal-dialog {
        max-width: 480px;        
      }
        #modal-calculator .modal-header {
          border-bottom: 0px;          
        }
        
        #modal-calculator .modal-body .fa-calculator,
        .calculator-icon .fa-calculator {
          text-shadow: 2.6px 2.5px rgba(0,0,0,0.45);
          font-size: 60px;          
        }
        
        #modal-calculator .modal-body .fa-cog,
        .calculator-icon .fa-cog {
          color: rgba(255,196,74,1);
          font-size: 37px;
          position: absolute;
          margin-top: 32px;
          margin-left: -22px;
          text-shadow: 0px 0px 3px black;       
        }
        
        #modal-calculator .modal-content {
          padding: 15px;
        }
        
        #modal-calculator select:required:invalid {
          color: gray;
        }
        #modal-calculator option[value=""][disabled] {
          display: none;
        }
        
        #modal-calculator .modal-body {
          margin-top: -38px;
        }
      
        #modal-login .modal-header {
          height: 10px;
          border-bottom: 0px;
        }
          #modal-login .modal-header > i {
            margin-left: 32%;
            padding: 20px;
            padding-top: 25px;
            height: 100px;
            width: 100px;
            background-color: var(--primary-color);
            border-radius: 50px;
            margin-top: -60px;
            font-size: 48px;
            color: #282828;
            position: absolute;
          }
          
        #modal-login .modal-body {
          padding-bottom: 0px;
        }
        
        #modal-login .modal-footer {
          opacity: 0.5;
          cursor: pointer;
        }
          #modal-login .modal-footer:hover {
            opacity: 1;
          }

        #calculator-result b {
          color: var(--primary-color)! important;
        }
          
        #Kalkulacka .card-input-sub-title {
          min-height: 37px;          
        }

        #Kalkulacka .shadow-box {
          box-shadow: 2px 4px 39px -2px rgba(0,0,0,0.75);
          -webkit-box-shadow: 2px 4px 39px -2px rgba(0,0,0,0.75);
          -moz-box-shadow: 2px 4px 39px -2px rgba(0,0,0,0.75);
          height: 100%;
        }
        
        #Kalkulacka .card input.form-control {
          border-right: 0px;
          background: white;
        }
          #Kalkulacka .card .input-group-append .input-group-text {
            background-color: white;
            padding-left: 1px;
            border-left: 0px;
          }

        #Kalkulacka .input-group-prepend-image {
          height: 38px;
          padding: 8px;
          padding-right: 27px;
          padding-left: 28px;
          border: 1px solid #ced4da;
          border-right: 0px;
        }
        
        .popover-body {
          text-align: center;          
        }

        #Kalkulacka .card-tiny-title {
          width: 100%;
          text-align: center;
          margin-top: -10px;
          margin-bottom: 10px;
          color: var(--primary-color);
          display: none;
        }
        
        #Kalkulacka i {
          cursor: pointer;
        }

        #Kalkulacka .mini-card i {
          cursor: auto;
        }
      
      .calculator-image-icon {
        max-height: 17px;
        padding-right: 4px;
        float: left;
        margin-left: 10px;          
      }
    
      /* Cookie bar */
      #cookie-bar {
        z-index: 998; /* menu has 999 */
        position: fixed;
        width: 100%;
        color: white;
        bottom: 0px;   
      }
        #cookie-background {
          width: 100vw;
          height: 100vh;
        }
      #cookie-bar img {
        height: auto;
        width: auto;
      }

      /* Conversion modal */
      #conversion-modal .modal-content {
        border: 0px;
        background: #F9B000;
      }

      #conversion-modal .monitor {
        -webkit-box-shadow: 0px 0px 20px 3px rgb(255 255 255 / 39%);
        -moz-box-shadow: 0px 0px 20px 3px rgb(255 255 255, 39%);
        box-shadow: 0px 0px 20px 3px rgb(255 255 255 / 39%);
      }

      #conversion-modal .main-button .btn {
        font-size: 16px;
        min-width: unset! important;
      }

      #conversion-modal h4 {
        font-weight: bold;
      }

      #conversion-modal .important-section, #conversion-modal .important-image-section {
        -webkit-transform: skew(0deg, -3deg); 
        transform: skew(0deg, -3deg);
        z-index: 999;
      }
        #conversion-modal .important-section .container, 
        #conversion-modal .important-image-section img {
          -webkit-transform: skew(0deg, 3deg);
          transform: skew(0deg, 3deg);
        }

        #conversion-modal .important-image-section {
          margin-top: -104px;
        }

        #conversion-modal .important-image-section img {
          padding: 1rem;
          margin-left: auto;
          margin-right: auto;
          -webkit-transform: skew(0deg, 359deg);
          transform: skew(0deg, 359deg);
        }

        #conversion-modal .important-image-section .reference-image {          
          background-color: white;
          border-radius: 30px;
          -webkit-transform: skew(0deg, 5deg);
          transform: skew(0deg, 5deg);
          min-width: 255px;
          min-height: 155px;
        }

        #conversion-modal .important-image-section .reference-image::before {
          content: "";
          position: absolute;
          background-color: black;
          width: 15px;
          height: 2px;
          left: 16px;
          top: 16px;
          z-index: 1;
          transform: rotate(327deg);
          -webkit-transform: rotate(327deg);
          -moz-transform: rotate(327deg);
        }

      #conversion-modal section:not(:nth-of-type(1)) {
        position: relative;
      }

      #conversion-modal section:nth-of-type(1)::before {
        background-image: url(../img/office.jpg);
        content: "";
        position: absolute;
        top: -1px;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-filter: brightness(0.30);
        filter: brightness(0.30);
        background-position: top;
        background-repeat: no-repeat;
        background-size: 100%;
      }
      
      img.conversion-image{
          cursor: pointer;
      }

      
      /* Animation */
      @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
      @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
      @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
            
      .spin {
        -webkit-animation:spin 1s linear infinite;
        -moz-animation:spin 1s linear infinite;
        animation:spin 1s linear infinite;          
      }
      
      @media (max-width: 1079px) {
        #calculator-navigator {
          display: block! important;
        }
          
      }
      
      @media (min-width: 970px) {
        #calculator-navigator .arrow {
          padding-top: 8px;
          left: 50%;            
        }        
      }
      
      @media (min-width: 1199.98px) {
        .navbar-collapse {
          max-width: 828px;
          margin-left: auto;
        }

        #Kalkulacka .card-tiny-title {
          display: block! important;
        }
        
        #Kalkulacka .form-control.text-right, #Kalkulacka .input-group-append {
          margin-left: auto;
          margin-right: auto;
        }
        
        #Kalkulacka .input-group-prepend i {
          display: block! important;
          cursor: unset;
          padding-left: 11px!important;
          padding-right: 11px! important;
        }

        #Kalkulacka .input-group-prepend .input-group-text {
          display: none! important;
        }

        #Kalkulacka .input-group-prepend-image {
          padding-right: 8px;
          padding-left: 8px;
        }

        #price-list-cards .card-body .card-subtitle {
          min-height: 58px;
        }
      }

      @media (max-width: 1199.98px) {
        #conversion-modal section:nth-of-type(1)::before {
          background-size: auto;
        }
      }

      @media (min-width: 1599.98px) { 
        #Kalkulacka .input-group-prepend i {
          display: none! important;
        }

        #Kalkulacka .input-group-prepend .input-group-text {
          display: block! important;
        }

        #Kalkulacka .input-group-prepend-image {
          padding-right: 27px;
          padding-left: 28px;
        }

        #price-list-cards .card-body .card-subtitle {
          min-height: 40px;
        }
      }
      
      @media (max-width: 768px) {
        .popover {
          display: none;
        }
        .popover .arrow {
          display: none;
        }     
      }
      
      @media (min-width: 1808px) {
        .calculator-card-header .input-group-prepend {
          display: block;
        }

        #Kalkulacka .card-tiny-title {
          display: none! important;
        }
        
        #Kalkulacka .input-group-prepend {
          display: block;
        } 
      }
      
      @media (max-width: 2084px) {
        #Kalkulacka .left-info-bar {
          display: none! important;          
        }        
      }