/* >> Main Layout
--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
html{height: 100%; margin: 0; padding: 0; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
/* width */
::-webkit-scrollbar { width:6px; }
/* Track */
::-webkit-scrollbar-track { background: darken($color-primary,50%); }
/* Handle */
::-webkit-scrollbar-thumb { background: darken($color-primary,20%);}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover { background: $color-primary; }

body{
  @include selectColor;
  @extend %stickyFooter;
  background-color: $color-site_bg; 
  -webkit-font-smoothing: antialiased;
  margin: 0; 
  padding: 0; 
  color: $color-baseText; 
  font-family: $baseFont; 
  line-height: 1.2;
  overflow-x: hidden;
  .pageWrapper{
    width: 100%; 
    max-width: 100%; 
    margin: 0 auto;
    overflow: hidden; 
    padding: 4.6rem 0 0 0;
  }

  .contentWrapper{width: 90%; max-width: 1600px; margin: 0 auto;
    &.contentWrapper--static{max-width: 1280px;}
  }
  &.home{
    header{
      background: rgba(0,175,237,0.85);
      @media #{$mq-iPad_land}{background: transparent;}
      &.sticky{background: rgba(0,175,237,0.85);}
    }
    .pageWrapper{padding: 0;}
  }
}

.titleWrapper{display: block; width: 100%;
  &.titleWrapper--bg{background-color: darken($color-section,6%);}
}

.pageTitle{  display: block;
  width: 100%;
  position: relative; 
  margin: 0 auto;
  padding: 1rem 0;
  max-width: 1280px;
  padding-left: 3rem;
  font-size: 1.6rem;
  line-height: 1;
  color: $color-baseText;
  @media #{$mq-tab_720}{font-size: 1.8rem;}
  @media #{$mq-iPad_land}{font-size: 2.5rem;}
  &.ctaTitle--white{color: white;
    &:before{background-color: $color-active;}
  }
  &.pageTitle--error{
    color: $color-primary; font-size: 5rem; margin-bottom: 1rem;
  }
  &.pageTitle--error-second{margin: 0 0 2rem; font-size: 18px; font-weight: normal; line-height: 1.2; text-align: center; letter-spacing: 0;
    &:after{display: none;}
  }
  &.pageTitle--stat{color: $color-title; width: 100%;}
}

.sectionTitle{
  display: block;
  width: 100%;
  position: relative; 
  margin: 0 auto 2rem;
  padding-left: 3rem;
  text-align: left; 
  font-family: $titleFont; 
  font-size: 1.5rem; 
  line-height: 1.2;
  font-weight: 500; 
  text-transform: none; 
  color: $color-title;
  @media #{$mq-iPad_land}{font-size: 1.5rem; }
  &:before{content: ''; display: block; position: absolute; width: 2rem; height: 3px; left: 0; top: calc(50% - 1.5px); background-color: $color-active;}
  &.text-white{color: white;}
}

.ctaTitle{
  display: block;
  width: 100%;
  position: relative; 
  margin: 0 auto 2rem;
  padding-left: 3rem;
  font-size: 2.2rem;
  line-height: 1;
  color: $color-active;
  @media #{$mq-tab_720}{font-size: 4rem;}
  @media #{$mq-iPad_land}{font-size: 6rem;}
  &:before{content: ''; display: block; position: absolute; width: 2rem; height: 3px; left: 0; top: calc(50% - 1.5px); background-color: $color-baseText;}
  &.ctaTitle--white{color: white;
    &:before{background-color: $color-active;}
  }
}

.text-white{color: white;}
.text-uppercase{text-transform: uppercase;}
.display-1{display: block; font-size: 1.6rem; line-height: 1.3; font-weight: 800; color: #000;
  @media #{$mq-iPad_land}{font-size: 2rem;}
  @media #{$mq-pc_1280}{font-size: 3rem;}
}
.display-2{display: block; font-size: 1.3rem; line-height: 1.4; font-weight: 800; color: #000;
  @media #{$mq-iPad_land}{font-size: 1.5rem;}
  @media #{$mq-pc_1280}{font-size: 2rem;}
}
.display-3{display: block; font-size: 1.6rem; line-height: 1.4; font-weight: 300; color: #000;
  @media #{$mq-iPad_land}{font-size: 2.1rem;}
  @media #{$mq-pc_1280}{font-size: 3.5rem}
}
.display-4{display: block; font-size: 1.6rem; line-height: 1.4; font-weight: 600; color: #000;}
.display-5{display: block; font-size: 1.6rem; line-height: 1.3; font-weight: 500; color: #000;}
.display-6{display: block; font-size: 1.4rem; line-height: 1.3; font-weight: 500; color: #000;}

.mt-1{margin-top: 1rem!important;}
.mt-2{margin-top: 2rem!important;}
.mt-3{margin-top: 3rem!important;}
.mt-4{margin-top: 4rem!important;}
.mt-5{margin-top: 5rem!important;}
.mb-1{margin-bottom: 1rem!important}
.mb-2{margin-bottom: 2rem!important}
.mb-3{margin-bottom: 3rem!important}
.mb-4{margin-bottom: 4rem!important}
.mb-5{margin-bottom: 5rem!important}

.pt-1{padding-top: 1rem!important;}
.pt-2{padding-top: 2rem!important;}
.pt-3{padding-top: 3rem!important;}
.pt-4{padding-top: 4rem!important;}
.pt-5{padding-top: 5rem!important;}
.pb-1{padding-bottom: 1rem!important;}
.pb-2{padding-bottom: 2rem!important;}
.pb-3{padding-bottom: 3rem!important;}
.pb-4{padding-bottom: 4rem!important;}
.pb-5{padding-bottom: 5rem!important;}

.text-white{color: white;}

/*Button style*/
.buttonWrapper{@extend %flexBox; justify-content: flex-start; align-items: center;
  &.buttonwrapper--pageEnd{padding-bottom: 6rem;}
  &.buttonWrapper--center{justify-content: center;}
  &.buttonWrapper--end{justify-content: flex-end;}
  &.buttonWrapper--back{justify-content: center; padding: 2rem; background-color: $color-section;}
  &.buttonWrapper--spacerBottom{padding: 0 0 2rem; background: transparent;}
  &.buttonWrapper--btnGroup{
    .btn{margin: 0 1rem;
      @media #{$mq-iPad_land}{ min-width: 250px;}
    }
  }
  &.m-tb{margin: 2rem auto;
    @media #{$mq-iPad_land}{margin: 3rem auto;}
  }
}

.btn{
  @include transition; 
  display: inline-block; 
  font-size: 14px; 
  font-family: $baseFont; 
  font-weight: 500; 
  text-align: center; 
  text-transform: none;  
  color: $color-title; 
  background-color: transparent; 
  padding: 12px 1.25rem 13px 3.5rem; 
  cursor: pointer; 
  outline: none; 
  -webkit-appearance: none; 
  -moz-appearance: none; 
  appearance: none;
  border-radius: 100px;
  &:hover{
    background-color: $color-title; color: #fff;
    padding: 12px 2.5rem 13px 1.25rem;
     &:before{
      top: 2px;
      left: initial;
      right: 0;
      border: none;
      background-image: url("../images/easydent/arrow-right-white.svg");
    }
  }
  &:before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 40px;
    height: 40px;
    border: 1px solid $color-border;
    background-image: url("../images/easydent/arrow-right.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px 16px;
    border-radius: 100%;
  }
}
.btn--white{
  color: #fff;
  &:before{
    border: 1px solid #fff;
    background-image: url("../images/easydent/arrow-right-white.svg");
  }
  &:hover{background-color: $color-primary; color: #fff;}
}

.btn--back{ 
  &:before{transform: rotate(-180deg);}
}

.btn--submit{
  padding: 0 1.25rem 0 3rem;
  margin-top: 1rem;
  input{
    display: inline-block; 
    font-size: 14px; 
    font-family: $baseFont; 
    font-weight: 500; 
    text-align: center; 
    text-transform: none;  
    color: $color-title; 
    background-color: transparent !important;
    border: none !important;
    cursor: pointer;
  }
  &:hover{
    padding: 0 2.5rem 0 1.25rem;
    input{
      color: #fff;
    }
  }
}

/*Response*/
.response-block{
  @extend %flexBox; 
  align-items: center; 
  justify-content: center; 
  width: 100%; 
  overflow: hidden; 
  padding: 5rem 0 5rem;
  background-color: $color-section;
  @media #{$mq-iPad_land}{padding: 7rem 2rem 7rem}
  .textBox{
    display: block; 
    width: 90%; 
    max-width: 520px; 
    align-self: center; 
    padding: 1rem; 
    margin: 3rem auto 0; 
    text-align: center; 
    background-color: #fff;
    border-radius: 12px;
    @media #{$mq-iPad_land}{margin: 4rem auto 0;}
  }
  .pageTitle--response{ 
    width: 100%; 
    margin: 0 auto 1rem; 
    padding: 0; 
    font-size: 2.4rem; 
    text-align: center; 
    line-height: 1em; 
    color: $color-baseText;
    @media #{$mq-iPad_land}{font-size: 3rem;}
    &:after{display: none;}
  }
  .pageTitle--error-second{ 
    margin: 0 auto 20px; 
    padding: 0; 
    font-size: 17px; 
    line-height: 1.2em; 
    color: $color-baseText; 
    text-align: center;
    &:before{display: none;}
  }
  .response__icon{
    @extend %flexBox; 
    align-items: center; 
    justify-content: center; 
    width: 64px; 
    height: 64px; 
    margin: 0 auto 1rem; 
    background-color: rgba($color-primary, 0.9); 
    padding: 0.35rem; 
    border-radius: $radius-round; 
    overflow: hidden;
    &.response__icon--error{background-color: $color-error;}
    img{width: 100%;}
  }
}

/*Main Slider*/
#homeSilder{
  max-width: 100%; margin: 0 0 0 auto;
  .slick-track{ padding: 2rem 0 6rem; transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
    @media #{$mq-tab_720}{padding: 2rem 0 6.5rem;}
  }
  .slider__item{ height: 75vh;
    @media #{$mq-tab_720}{height: auto;}
  }
  .slider__img{ @extend %flexBox;  @include shadow-depthLarge; max-width: 90%; height: 100%; margin: 0 0 0 auto;position: relative; background-color: $color-darkBlue; overflow: hidden;
    z-index: 1;
    @media #{$mq-tab_720}{max-width: 84%; height: auto; }
    img{
      width: 100%; object-fit: cover;
      transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
    }
  }
  .slider__caption{position: absolute; padding: 0.75rem; left: 4%; top: 30%; max-width: 90%; background-color: white; z-index: 5;
    transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
    @media #{$mq-tab_720}{padding: 2rem 2rem 1rem 2rem; left: 8%; top: 30%; max-width: 720px;}
    p{font-size: 1rem; font-weight: 500; margin: 1rem auto;
      @media #{$mq-tab_720}{font-size: 1.5rem;}
    }
  }
  .sliderTitle{
    display: block; 
    width: 100%; 
    font-size: 1.4rem; 
    font-weight: 800; 
    color: $color-darkBlue;
    @media #{$mq-tab_720}{font-size: 2.2rem;}
    @media #{$mq-iPad_land}{font-size: 2.75rem;}
  }
  .slick-dots{
    bottom: 8rem; margin: 0 0 0 auto; padding: 0 3rem; text-align: right;
  }
  .slick-prev,.slick-next{top: auto; left: auto; bottom: -2rem; width: 36px; height: 36px; opacity: 1;
    @media #{$mq-iPad_land}{width: 50px; height: 50px;}
  }
  .slick-prev{right: 8rem;}
  .slick-next{ right: 3rem;}
}
  .zoomImage{
    .slider__item{
      .slider__img{overflow: hidden; z-index: 10;
        img{
          transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
          transform: scale(1);
        }
      }
      .slider__caption{position: absolute; padding: 0.75rem; left: 4%; top: 40%; max-width: 90%; background-color: white; z-index: 5;
        transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
        @media #{$mq-tab_720}{padding: 2rem; left: 8%; top: 40%; max-width: 720px;}
        transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
        transform-origin: 50% 50% 0px;
        backface-visibility: visible;
        transform: translate3d(-80px, 0px, 0px);
        opacity: 0;
      }
      &.slick-active {
        .slider__img{
          img{transform: scale(1.2); }
        }
        .slider__caption{
          transform-origin: 50% 50% 0px;
          backface-visibility: visible;
          transform: translate3d(0px, 0px, 0px);
          opacity: 1;
        }
      }

  }
}



/*PAGE Hero*/
.pageHero{display: block; width: 100%;

  &.pageHero--map{ height: 65vh;
    &:before{display: none;}
  }
}
.pageHero__img{ 
  @extend %flexBox; 
  height: 40vh;
  background-color: $color-section; 
  overflow: hidden;
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  @media #{$mq-iPad_land}{height: 50vh;}

  &:before{
    content: ''; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    opacity: 0.5;
    background: $color-darkBlue;
    transition: all 0.5s cubic-bezier(0.7, 0, 0.3,1);
  }
  &:hover{
    &:before{
      opacity: 0.1;
    }
  }
  img{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.pageHero--map_footer{
  padding-top: 0;
  @extend %flexBox; height: 70vh; min-height: 520px; background-color: $color-section; overflow: hidden;
  &:before{content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.5;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  }
  img{object-fit: cover;}
}

.maps-container{display: block; width: 100%;}
#map {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100%;
  img{margin: inherit;}
  .leaflet-popup-content-wrapper{
    background-color: white;
    border-radius: 5px;
    text-align: center;
    .leaflet-popup-content{
      padding: 0.35rem; 
      margin: 0; 
      min-width: 320px; 
      font-style: normal;
      font-family: $baseFont; 
      letter-spacing: 0;
      a{
        font-family: $baseFont;
        font-size: 12px;
        font-weight: 400;
        color: $color-secondary;
        text-transform: uppercase;
      }
      img{
        position: relative;
        margin: 0 0 0.35rem; 
        border-radius: $radius; 
        overflow: hidden;
        height: 180px;
        object-fit: initial;
      }
    }
  }
  .leaflet-top, .leaflet-bottom{z-index: 998;}
  .leaflet-popup-tip{
    background: white;
  }
  .leaflet-popup-close-button{
    position: absolute;
    display: block;
    width: 24px;
    height: 24px;
    top: -10px;
    right: -10px;
    color: $color-baseText;
    background-color: white;
    border-radius: $radius-round;
    span{font-weight: 600;}
  }
  iframe{
    width: 100%;
    height: 100%;
  }
}

/*SECTIONS page*/
.section{

  .sidebarLayout{
    @extend %flexBox;
    justify-content: space-between;
    .sidebar{
      width: 100%;
      margin-bottom: 2rem;
      @media #{$mq-iPad_port}{width: 40%; margin-bottom: 0;}
      @media #{$mq-iPad_land}{width: 30%;}
      .title{
        font-size: 36px;
        font-weight: 400;
        line-height: 1.1;
        color: $color-title;
        padding: 1rem 0;        
        @media #{$mq-iPad_port}{font-size: 42px;}
        @media #{$mq-iPad_land}{font-size: 48px;}
      }
      .text{
        font-size: 12px;
        line-height: 1.5;
        color: $color-gray-dark;
        margin-bottom: 1.5rem;
      }
      .box{
        background-color: $color-section;
        display: flex;
        flex-direction: column;
        @media #{$mq-slide-spec-sm}{flex-direction: row;}
        @media #{$mq-iPad_port}{flex-direction: column;}
        img{
          width: 100%;
          @media #{$mq-slide-spec-sm}{width: 50%;}
          @media #{$mq-iPad_port}{width: 100%;}
        }
        .box-container{
          width: 100%;
          padding: 2rem 1.5rem;
          @media #{$mq-slide-spec-sm}{width: 50%;}
          @media #{$mq-iPad_port}{width: 100%;}
          .box-title{
            font-size: 12px;
            font-weight: 500;
            color: $color-gray;
            text-transform: uppercase;
            margin-bottom: 0.75rem;
          }
          .box-text{
            font-size: 12px;
            color: $color-gray-dark;
            line-height: 1.5;
            margin-bottom: 1rem;
            a{
              color: $color-gray-dark; 
              &:hover{text-decoration: underline;}
            }
          }
        }
      }
      .sidebar-menubox{
        background-color: $color-section;
        padding: 2rem;
        margin-top: 2rem;
        .num{
            font-size: 12px;
            font-weight: 500;
            text-transform: uppercase;
            color: $color-gray-dark;
            margin-bottom: 1rem;
        }
        .title{
            font-size: 24px;
            font-weight: 500;
            line-height: 1.2;
            color: $color-title;
            padding: 0;
        }
        .text{
            font-size: 12px;
            line-height: 1.5;
            color: $color-gray;
            margin: 2rem 0;
        }
        .sidebar-menu{
          a{
              display: block;
              font-size: 14px;
              line-height: 2;
              color: $color-gray;
              transition: 0.3s;
              &:hover{color: $color-primary;}
          }
          .selected{color: $color-primary;}
        }
      }
    }
    .article{
      width: 100%;
      font-size: 14px;
      line-height: 1.5;
      color: #000;
      .article-title{
        font-size: 36px;
        font-weight: 500;
        line-height: 1;
        color: $color-title;
        margin-bottom: 2rem;
        @media #{$mq-iPad_port}{font-size: 48px;}
        @media #{$mq-iPad_land}{font-size: 56px;}
      }
      .article-text p{margin-bottom: 1rem;}
      @media #{$mq-iPad_port}{width: 55%;}     
      @media #{$mq-iPad_land}{width: 60%;}      
      .blog-related{
        margin-top: 3rem;
        .related-title{
          font-size: 12px;
          font-weight: 600;
          color: $color-title;
          margin-bottom: 1.5rem;
        }
        .related-box{
          background-color: $color-section;
          .box-inner{
            padding: 1.5rem 2rem;
            .box-title{
              font-size: 18px;
              font-weight: 500;
              line-height: 1.2;
              color: $color-primary;
              margin-bottom: 1.5rem;
            }
            .box-text{
              font-size: 14px;
              line-height: 1.5;
              color: $color-gray;
            }
            .btn{margin-top: 1.5rem;}
          }
        }
      }
    }
    &.noSidebar{
      .article{width: 100%;}
    }
  }

  &.section--slider{
    display: block;
    position: relative;
    padding: 6rem 0 0;
    background-color: $color-primary;
    background-image: url("../images/slider-bg.png"); background-repeat: no-repeat; background-position: center center; background-size: cover;
    &:before{content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 1;
      background: rgb(0,175,237);
      background: linear-gradient(0deg, rgba(0,175,237,1) 0%, rgba(0,175,237,0.9) 100%);
    }
  }

  &.section--static{
    background-color: $color-gray-light; overflow: hidden; padding: 2rem 0;
    .statText{ display: block; position: relative; max-width: 1600px; padding: 2rem; margin: 2rem auto; background-color: white;
      @media #{$mq-iPad_land}{padding: 2rem 3rem;}
    }
    .statText-noBg{
      &::before{
        display: none;
      }
    }
    &.section--static_alt{
      padding-top: 0;
    }
    &.section--static_title{
      padding-right: 2rem;
    }
    &.section--static--nobg{
      background-color: transparent;
      .statText{
        padding: 1rem 1rem 2rem 1rem;
      }
    }
    &.section--static-technology{padding: 0;
      
    }
  }

  .shadow-stat{
    @include shadow-depthStatText;
  }

  &.section--download{
    padding: 2rem 0 1rem 0;
  }
  
  &.section--gallery{padding: 2rem 0 0;
    .slick-next{right: 2rem;}
    .slick-prev{left: 2rem;}
    .slick-prev,.slick-next{top: 50%}
    @media #{$mq-iPad_land}{padding: 2rem 0 0;}
    .video--icon{
      padding: 2rem 0;
      text-align: center;
      a{
        display: inline-block;
        img{
          width: 80px;
          max-width: 80px;
        }
      }
    }
  }
  &.section--videoGallery{padding: 2rem 0 0; background-color: darken($color-section,3%);
    .slick-next{right: 2rem;}
    .slick-prev{left: 2rem;}
    .slick-prev,.slick-next{top: 50%}
    @media #{$mq-iPad_land}{padding: 2rem 0 0;}
  }
  &.section--split{@extend %flexBox; justify-content: space-between; align-items: stretch; padding: 0; background-color: $color-section;
    .split__wrapper{ width: 100%;
      @media #{$mq-iPad_land}{width: 50%;}
      &.split__wrapper--bg{background-color: $color-primary;
        background-image: url("../images/cta-bg.svg");
        background-size: 450px 450px;
        background-repeat: no-repeat;
        background-position: left 50px;
      }
      .split__content{ width: 90%;
        @media #{$mq-iPad_land}{width: 100%; max-width: 800px;}
        .statText{padding: 1.5rem; margin: 1.5rem 0; background-color: white;
          @media #{$mq-iPad_land}{padding: 3rem; margin: 3rem 0;}
        }
      }

      &:nth-child(1){ 
        .split__content{ margin: 0 auto;
          @media #{$mq-iPad_land}{margin: 0 0 0 auto;}
        }
      }
      &:nth-child(2){ 
        .split__content{ margin: 0 auto;
          @media #{$mq-iPad_land}{margin: 0 auto 0 0;}
        }
      }

    }
    &.secton--split_alt{
      .split__wrapper{
        width: 100%;
        background-position: center center;
        background-size: cover;
        .split__content{margin: 0 auto;}
      }
    }
  }
}

/* >> StaticPage
--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

.staticGallery{padding: 0.125rem 0; margin-top: 2rem;
  .staticImage{@extend %flexBox; margin: 0.125rem;
    img{object-fit: cover;}
  }
}

.videoGallery{padding: 0.125rem 0; margin-top: 2rem;
  .videoItem{@extend %flexBox; margin: 0.125rem;
    img{object-fit: cover;}
  }
  .slick-track{margin: auto;}
}

/*404 Error*/
.error-404{
  @extend %flexBox; 
  align-items: center; 
  justify-content: center; 
  height: 100%; 
  padding: 4rem 0 4rem;
  @media #{$mq-iPad_land}{padding: 6rem 0 6rem;}
  .errorWrapper{
    padding: 2rem; 
    background-color: $color-section;
  }
  .textBox{
    display: block; 
    position: relative; 
    width: 90%; 
    max-width: 520px; 
    align-self: center; 
    padding: 2rem; 
    text-align: center; 
    background-color: rgba($color-active, .12); 
    background-image: url("../images/error.png"); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: contain;
    &:before{
      content:''; 
      display: block; 
      position: absolute; 
      width: 100%; 
      height: 100%; 
      top: 0; 
      left: 0; 
      background-color: $color-active; 
      opacity: 0.7;
    }
  }
    .pageTitle--error{ 
      width: 100%; 
      margin: 0 auto 1rem; 
      padding-left: 0;
      font-size: 6rem; 
      text-align: center; 
      line-height: 1em;
      padding: 0;
      @media #{$mq-iPad_land}{font-size: 8rem;}
      &:before{display: none;}
    }
    .pageTitle--error-second{ 
      margin: 0 auto 40px; 
      padding: 0;
      padding-left: 0;
      font-size: 17px; 
      line-height: 1.2em; 
      color: $color-title; 
      &:before{display: none;}
    }
  }

  /**/
  .career-submit{
    @extend %flexBox; 
    align-items: center; 
    justify-content: center; 
    height: 100%; 
    padding: 2rem 0;
    background: rgb(0,175,237);
  background: linear-gradient(90deg, rgba(0,175,237,1) 0%, rgba(0,37,51,1) 100%);
    @media #{$mq-iPad_land}{padding: 6rem 0 6rem;}
    .careerWrapper{padding: 2rem; background-color: white; @include shadow-depthStatText;}
    .textBox{display: block; position: relative; width: 90%; max-width: 520px; align-self: center; padding: 2rem; text-align: center; background-color: rgba($color-active, .12); background-image: url("../images/error.png"); background-repeat: no-repeat; background-position: center center; background-size: contain;
      &:before{content:''; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: $color-active; opacity: 0.7;}
    }
      .pageTitle--career{ 
        width: 100%; 
        margin: 0 auto 1rem; 
        padding-left: 0;
        font-size: 2rem; 
        text-align: center; 
        line-height: 1em;
        color: $color-active;
        @media #{$mq-iPad_land}{font-size: 3rem;}
        &:before{display: none;}
      }
      .pageTitle--career-second{ 
        margin: 0 auto 40px; 
        padding: 0;
        padding-left: 0;
        font-size: 17px; 
        line-height: 1.2em; 
        color: $color-title; 
        &:before{display: none;}
      }
    }

  /*FORM - custom radio*/

  .radio-item [type="radio"] {
    display: none;
  }
  .radio-item + .radio-item {
    margin-top: 15px;
  }
  .radio-item label {
    display: block;
    padding: 12px 12px 12px 60px;
    background: lighten($color-darkBlue,20%);
    color:white;
    border: 2px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 500;
    min-width: 250px;
    position: relative;
    transition: 0.4s ease-in-out 0s;
  }
  .radio-item label:after,
  .radio-item label:before {
    content: "";
    position: absolute;
    border-radius: 50%;
  }
  .radio-item label:after {
    height: 19px;
    width: 19px;
    border: 2px solid $color-primary;
    background-color: lighten($color-darkBlue, 16%);
    left: 19px;
    top: calc(50% - 12px);
  }
  .radio-item label:before {
    background-color: $color-darkBlue;
    background-image: url("../images/icons/svg-quiz-check.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 11px 11px;
    height: 20px;
    width: 20px;
    left: 20px;
    top: calc(50% - 10px);
    transform: scale(5);
    opacity: 0;
    visibility: hidden;
    transition: 0.4s ease-in-out 0s;
  }
  .radio-item [type="radio"]:checked ~ label {
    border-color: $color-primary;
    background-color: $color-primary;
  }
  .radio-item [type="radio"]:checked ~ label::before {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }
  .radio-item [type="radio"]:checked ~ label::after {
    opacity: 0;
    visibility: hidden;
  }
  .competition__block {
    position: relative;
    bottom: 0;
    right: 0;
    z-index: 15;
  
    a {
      display: block;
    }
  
    .competition__img {
      width: 100px;
      padding-top: 20px;
      margin: 0 0 0 auto;
  
      @media #{$mq-tab} {
        width: 140px;
      }
  
      @media #{$mq-iPad_land} {
        width: 160px;
      }
  
      @media #{$mq-pc_1600} {
        width: 220px;
      }
    }
  
    .showHide {
      position: absolute;
      display: block;
      width: 24px;
      height: 24px;
      top: -1rem;
      right: 2rem;
      background-color: $color-gray-dark;
      background-image: url("../images/icons/chevron-up.svg");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 12px 12px;
      cursor: pointer;
      transform: rotate(180deg);
      opacity: 0.5;
  
      &.hide {
        top: -2rem;
        transform: rotate(0deg);
      }
  
      &:hover {
        opacity: 1;
      }
    }
  
    @media #{$mq-pc_1280} {
      position: fixed;
    }
  }


/*Regisztráció rejtett captcha*/
.captcha-box {height: 25px;left: -200px;position: fixed;top: -50px;width: 100px;}
.statText{@extend %statText; }
.baseForms{@extend %statText; @extend %baseForm;}

/*Float backToTop button*/
.fixed-action-btn{ 
  position: fixed; 
  right: 0.75rem; 
  bottom: 0.75rem; 
  margin-bottom: 0; 
  z-index: 99; 
  transition: all 0.5s ease;
  &.move{
    @media #{$mq-iPad_land}{right:1.5rem; bottom: 3rem;}
  }
}

.btn-floating.btn-large{ width: 44px; height: 44px;}

.btn-floating{ 
  display: block; 
  color: #fff; 
  position: relative;
  overflow: hidden; 
  z-index: 1; 
  width: 44px; 
  height: 44px; 
  line-height: 44px; 
  padding: 0; 
  transition: .3s; 
  cursor: pointer; 
  opacity: 0.75; 
  background-image: url("../images/easydent/arrow-right.svg"); 
  background-repeat: no-repeat;
  background-position: center center; 
  background-size: 18px 18px;
  border-radius: 100px;
  border: 1px solid $color-border;
  background-color: #fff;
  transform: rotate(-90deg);
  &:hover{
    opacity: 1;
    background-color: $color-primary;
    border-color: $color-primary;
    background-image: url("../images/easydent/arrow-right-white.svg"); 
  }
}
.scale-transition.scale-out{ -webkit-transform: scale(0); transform: scale(0); transition: -webkit-transform .2s !important; transition: transform .2s, -webkit-transform .2s !important; }


/* >> Cookie bar style
--------------------------------------------*/
#cookie-bar{@extend %flexBox; align-items: center; justify-content: center;  position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(51, 51, 51, 0.9); color: white; z-index: 10000000; padding: 10px 25px;
  .m-statText{ display: block; font-size: 15px; color: $color-baseText; line-height: 1.2; padding-right: 0;}
  .m-statText a{display: inline-block; width: auto; font-weight: 600; text-decoration: underline; color: $color-primary;
    &:hover{color: $color-active;}
  }
  .cookieButtonWrapper{display: block; text-align: center; margin-top: 1rem;}
  .jqs-enable { 
    display: inline-block; 
    margin: 0 1rem 0.5rem; 
    cursor: pointer; 
    color: #ffffff; 
    font-weight: 500;
    text-transform: uppercase; 
    font-size: 14px; 
    text-decoration: none; 
    background: $color-success; 
    padding: 0.75rem 1.5rem;
    transition: 0.3s;
  }
  .jqs-enable:hover{background-color: lighten($color-success, 10%);}
  .jqs-disable { 
    display: inline-block; 
    margin: 0 1rem 0.75rem; 
    cursor: pointer; 
    color: #ffffff; 
    font-weight: 500;
    text-transform: uppercase; 
    font-size: 14px; 
    text-decoration: none; 
    background: $color-title; 
    padding: 0.75rem 1.5rem;
    transition: 0.3s;
  }
  .jqs-disable:hover{background-color: $color-error;}
  .cookieWrapper{@include shadow-depthImg; display: block; width: 95%; max-width: 560px; margin: 0 auto; padding: 1rem; border-radius: $radius; background-color: white;
    @media #{$mq-iPad_land}{ padding: 2rem;}
  }
  &.bottom{height: auto; top: auto; bottom: 0; padding: 0;
    .cookieWrapper{@extend %flexBox; align-items: center; justify-content: center; flex-wrap: wrap;  width: 100%; max-width: 100%; padding: 1rem; border-radius: 0;
      @media #{$mq-iPad_land}{flex-wrap: nowrap;}
      .cookieButtonWrapper{@extend %flexBox; align-items: center; justify-content:center; margin: 1rem auto 0; max-width: 340px;
        @media #{$mq-iPad_land}{margin: 0; }
      }
    }
  }
}