/* fonts */

@font-face {
    font-family: 'CF Asty Std';
    src: url('../fonts/AstyCFStd-Medium.otf');
}

@font-face {
    font-family: 'CF Asty Std Thin';
    src: url('../fonts/AstyCFStd-Light.otf');
}

@font-face {
    font-family: 'CF Asty Std Black';
    src: url('../fonts/AstyCFStd-Black.woff');
}

/* slide */

.section-header-2, .section-header-1{
  color: #000;
  background: rgb(231,231,231);
  background: linear-gradient(180deg, rgba(231,231,231,1) 0%, rgba(204,204,204,1) 98%);
  padding: 106px 15px 58px 15px;
}

.section-header-1{
  background: #F2F2F2;
  padding: 50px 15px 35px 15px;
}

.align-middle{
  margin-top: auto;
  margin-bottom: auto;
}

.section-header-1 .section-header-inner,.section-header-2 .section-header-inner{
  margin: 0 auto !important;
}

.slider-container h5, .section-header-2 h5,.section-header-1 h5{
  font-family: 'CF Asty Std Black';
  font-size: 32px;
  line-height: 48px;
}

.slider-container h3, .section-header-2 h3, .section-header-1 h3{
  font-family: 'CF Asty Std';
  font-size: 32px;
  line-height: 38px;
}

.slider-container p, .section-header-2 p, .section-header-1 p{
  font-family: 'CF Asty Std Thin';
  font-size: 20px;
  line-height: 28px;
}

.second p, .second h3{
  width: 64%!important;
}

.carousel-caption{
  text-shadow: none;
}

.carousel-indicators li{
  margin-right: 5px;
  margin-left: 5px;
}
.d-none{
  display: block!important;
}

.second-slide{
  color: black;
}

.second-slide a, .slider_surface{
  background: #FAC51C;
  padding: 0.8em 2em;
  color: black;
  font-family: 'CF Asty Std';
  font-size: 16px;
}

.second-slide a:hover, .slider_surface:hover{
  background-color: #38353a;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.basic-logo{
  max-width: 27.5%;
  text-align: left;
  position: absolute;
  top: -40px;
  /* left: -10px; */
  display: block;
}

.basic-logo-surface{
  max-width: 30%;
  top: -44px;
  left: -10px;
  position: absolute;
}

.basic-logo img,.basic-logo-surface img{
  max-width: 100%;
}

.carousel-caption{
  color: black;
  top: 40%
}

.carousel-indicators li{
  border: 1px solid black;
}

.carousel-indicators .active{
  background-color: black
}

.carousel-caption-2{
  width: 20%;
  left: 44%;
  padding-bottom: 32px;
}

.carousel-caption-2 img{
  width: 60%;
}

.carousel-caption.second{
  top: 25%;
}

@media screen and (min-width: 768px){
  .carousel-caption.second{
    width: 60%!important;
  }
  .carousel-caption {
    width: 33%!important;
    right: 45%!important;
    left: 10%!important;
    padding-bottom: 5px!important;
  }

  .second .basic-logo, .basic-logo-surface{
    top: -90px!important;
    max-width: 20%!important;
    /* left: -12px!important; */
  }

  .basic-logo-surface{
    top: -44px!important;
    max-width: 15%!important;
    left: 0!important;
  }

  .carousel-caption-2{
    width: 20%!important;
    left: 44%!important;
    padding-bottom: 32px!important;
  }

  .carousel-caption-2 img{
    width: 60%!important;
  }
}


@media screen and (max-width: 3000px){

  .basic-logo{
    /* top: -70px;
    left: -18px; */
  }

  .second .basic-logo {
    top: -210px!important;
    max-width: 20%!important;
    /* left: -18px!important; */
  }
}

@media screen and (max-width: 2000px){
  .second .basic-logo {
      top: -140px!important;
      max-width: 20%;
  }
}

@media screen and (max-width: 1440px){
  .basic-logo {
      max-width: 35%!important;
  }
  .second .basic-logo {
      top: -90px!important;

      max-width: 20%!important;
      /* left: -10px!important; */

  }

  .second .basic-logo-surface{
    /* top: -50px!important;
    left: -17px!important; */

        /* top: -25px!important;
    max-width: 20%!important; */
    left: 0!important;
  }
}

@media screen and (max-width: 1330px){
  .carousel-caption {
    /* padding-bottom: 170px;
    width: 65%; */
    width: 50%!important;
    right: 45%!important;
    left: 10%!important;
    bottom: 10%!important;
    padding-bottom: 5px!important;
  }

  .carousel-caption-2 {
    width: 20%!important;
    left: 62%!important;
    bottom: 20px!important;
    padding-bottom: 32px!important;
}

  .w-100 {
      width: auto!important;
  }
.slider-container h5{
  font-size: 24px;
  line-height: 20px;
}

.slider-container h3{
  font-size: 30px;
  line-height: 30px;
}

.slider-container p{
  font-size: 16px;
    line-height: 16px;
}


.slider-container a{
  font-size:14px;
  line-height: 14px;
}

}


@media screen and (max-width: 1295px){
  .basic-logo{
    max-width: 33%!important;
    /* left: -13px!important; */
  }
  .second .basic-logo{
    top: -70%!important;
    max-width: 27.5%!important;
    left: -2.5%!important;
  }

}

@media screen and (max-width: 1180px){

}

@media screen and (max-width: 1024px){
  .second p , .second h3{
    width: 100%!important;
}

}

@media screen and (max-width: 920px){
  .second p , .second h3{
    width: 100%!important;
}
  .second .basic-logo {
      top: -70%!important;
      max-width: 27.5%!important;
      left: -1.5%!important;
  }

}

@media screen and (max-width: 780px){
  .second p , .second h3{
    width: 100%!important;
}

  .basic-logo {
    max-width: 50%!important;
    left: 0px!important;
  }

  .second .basic-logo, .basic-logo-surface {
    top: -70%!important;
    max-width: 40%!important;
    left: -2.5%!important;
}

.basic-logo-surface{
  top: 10%!important;
}

}

@media screen and (max-width: 768px){
  .second p , .second h3{
    width: 100%!important;
}
  .carousel-caption {
    width: 60%!important;
    padding-bottom: 140px!important;;
  }

  .carousel-caption-2{
    padding-bottom: 32px!important;;
    left: 40%!important;
    width: 20%!important;
  }

  .carousel-caption-2 img{
    width: 100%!important;
  }

  .carousel-caption.second {
    padding-bottom: 40px!important;
  }

  .basic-logo, .basic-logo-surface{
    max-width: 50%!important;
    top: -18%!important;
    left: 0px!important;
  }

  .carousel-caption.second .basic-logo{
    max-width: 50%!important;
    top: -45%!important;
    left: -18px!important;
  }

}

@media screen and (max-width: 540px){
  .second p , .second h3{
    width: 100%!important;
}
  .carousel-caption {
    width: 85%!important;
    padding-bottom: 130px!important;
  }

  .carousel-caption-2{
    width: 30%!important;
    padding-bottom: 20px!important;
    left: 34%!important;
  }
}

@media screen and (max-width: 530px){
  .second p , .second h3{
    width: 100%!important;
}

  .carousel-caption .basic-logo, .basic-logo-surface {
    max-width: 43.8%!important;
    top: -50px!important;
  }

  .carousel-caption {
    width: 80%!important;
    padding-bottom: 160px!important;;
  }


  .carousel-caption-2{
    width: 32%!important;
    padding-bottom: 32px!important;
    left: 34%!important;
  }

  .carousel-caption-2 img{
    width: 100%!important;
  }

  .carousel-caption.second {
    width: 70%!important;
    padding-bottom: 40px!important;
  }

  .carousel-caption.second .basic-logo, .basic-logo-surface{
    max-width: 50%!important;
      /* top: -90px!important; */
      left: -12px!important;
  }

}

@media screen and (max-width: 400px){
  .second p , .second h3{
    width: 100%!important;
}
  .basic-logo{
    top: -50px;
  }
  .carousel-caption {
    padding-bottom: 100px;
    width: 80%!important;
  }

  .carousel-caption.second{
    padding-bottom: 15px!important;
    width: 70%!important;
  }

  .carousel-caption.second .basic-logo, .basic-logo-surface{
    max-width: 50%;
  }

  .carousel-caption-2{
    width: 38%!important;
    padding-bottom: 32px;
    left: 34%!important;
  }

  .carousel-caption-2 img{
    width: 100%;
  }
}

@media screen and (max-width: 330px){
  .second p , .second h3{
    width: 100%!important;
}
  .slider-container h5{
    font-size: 16px!important;
    line-height: 10px!important;
  }

  .slider-container h3{
    font-size: 20px!important;
    line-height: 25px!important;
  }

  .slider-container p{
    font-size: 14px!important;
    line-height: 16px!important;
  }
}


.intro-container h2,.surface-container h2, .surface-container-accessories h2{
  font-family: 'CF Asty Std';
  font-size: 62px;
  font-style: normal;
  font-weight: 500;
  line-height: 68px;
}

.surface-container-accessories h2{
  font-size: 48px;
}
.microsoft_logo{
  width: 65%;
}

.surface-container .play_btn{
  text-align: center;
}

.surface-container .carousel-indicators{
  bottom: -50px;
}

.intro-container p, .surface-container p, .surface-container-accessories p{
  font-family: 'CF Asty Std';
  font-size: 24px;
  line-height: 26px;
}

.intro-container .light, .surface-container .light, .surface-container-accessories .light{
  font-family: 'CF Asty Std Thin';
  font-size: 20px;
  line-height: 31.2px;
}

.learn-more{
  background: #f5f5f5;
  padding-top: 2em;
  padding-bottom: 3em!important;
}

.learn-more p,.learn-more-surface p{
  font-family: 'CF Asty Std';
  font-size: 24px;
  line-height: 31px;
}

.learn-more-text{
  font-family: 'CF Asty Std';
  font-size: 20px;
  line-height: 26px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.learn-more-link{
  color: #0067B8;
  font-family: 'CF Asty Std Thin';
  font-size: 16px;
  line-height: 21px;
  cursor: pointer;
}

.learn-more-link::after{
  content: "\e259";
  font-family: 'Glyphicons Halflings';
  font-size: 11px;
  margin-top: 3px;
  margin-left: 3px;
  display: block;
  position: relative;
  transition: all 200ms ease-in-out;
  top: 0;
}

.learn-more-link:hover.learn-more-link::after{
  top: 4px;
}

.blue-btn{
  padding: 14px 30px;
  font-family: 'CF Asty Std';
  font-size: 20px;
  line-height: 21px;
  color: white;
  background: #0067B8;
  margin-top: 5rem;
  transition: all .2s ease-in-out;
  border: 2px solid transparent;
}
.blue-btn:hover{
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
  border: 2px solid white;
  color: white;
  text-decoration: none;
  cursor: pointer;
}

.row-btn{
  margin-top: 5em!important;
  margin-bottom: 3em!important;
}

.unbold{
  font-family: 'CF Asty Std Thin'!important;
}

.home-use-more span.glyphicon,.education-use-more span.glyphicon,.business-use-more span.glyphicon{
  font-size: 24px;
}

.home-use p,.education-use h3, .business-use p{
  font-family: 'CF Asty Std';
  font-size: 32px;
  line-height: 42px;
}

.education-use p,.education-use h5{
  font-family: 'CF Asty Std Thin';
  font-size: 16px;
  line-height: 21px;
}

.education-use h5{
  font-family: 'CF Asty Std';
}

.edu-details h2{
  font-family: 'CF Asty Std';
  font-size: 24px;
  line-height: 31px;
  letter-spacing: 0em;
  text-align: left;
}

.edu-details p{
  font-family: 'CF Asty Std Thin';
  font-size: 16px;
  line-height: 21px;
  letter-spacing: 0em;
  text-align: left;
}

.mobile-edu{
  display: none;
}

@media screen and (max-width: 992px){
  .mobile-edu{
    display: block;
  }

  .desktop-edu{
    display: none;
  }

  .home-use-mobile, .business-use-mobile{
    display: block;
  }

  .owl-carousel .owl-item {
    float: left;
    /* max-height: 500px;
    overflow-y: scroll; */
  }
  .home-use-desktop, .business-use-desktop{
    display: none;
  }
}

@media screen and (min-width: 993px){
  .mobile-edu{
    display: none;
  }

  .desktop-edu{
    display: block;
  }
  .home-use-mobile,.business-use-mobile{
    display: none;
  }
  .home-use-desktop, .business-use-desktop{
    display: block;
  }
}

/* surface-container */
.surface-container{
  padding-top: 2em!important;
  padding-bottom: 4em!important;
  /* margin-bottom: 6em!important; */
  background: #F5F5F5;
}

.surface-elements{
  position: relative;
  text-align: center;
  color: white;
}
.surface-elements-text{
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.surface-elements-text h3{
  font-family: 'CF Asty Std';
  font-size: 18px;
  line-height: 26px;
  margin-bottom: 0;
}

.surface-elements-text a{
  font-family: 'CF Asty Std Thin';
  color: white;
  font-size:14px;
  line-height:20.8px
}

.surface-elements-text a::after{
  content: "\e092";
  font-family: 'Glyphicons Halflings';
  font-size: 11px;
  margin-top: 3px;
  margin-left: 3px;
  display: inline-block;
  position: relative;
  transition: all 200ms ease-in-out;
  right: -4px;
  top:1px;
}


.learn-more-surface{
  background: #E5F2FC;
  padding-top: 2em;
  padding-bottom: 3em!important;
  margin-bottom: 6em!important;
}

.good-job h2{
  font-family: 'CF Asty Std';
  font-size: 32px;
  line-height: 42px;
}

.good-job p{
  font-family: 'CF Asty Std Thin';
  font-size: 16px;
  line-height: 21px;
}


/* form */

.form-area{
  background: #444444;
}

.form-area h2{
  font-family: CF Asty Std;
  font-size: 32px;
  line-height: 42px;
  color: white;
}

.form-area p{
  font-family: 'CF Asty Std Thin';
  font-size: 16px;
  line-height: 21px;
  color: white;
}

.form .form-group .form-control,.form .form-group .form-select{
  height: calc(1.5em + 1.6rem + 10px);
}
.form .form-group .form-select{
  width: 100%;
}
.form-control{
  border-radius: 0px;
}
.form-select{
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
}

.form input,.form .form-group .form-select{
  font-family: 'CF Asty Std Thin';
}

option[value=""][disabled] {
display: none;
}


/* video config */

.video-box{
  position: relative;
}

.video-box{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video-box iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video_overlays {
  position: absolute;
  width: 100%;
  height: 100%;
  min-height: 40px;
  background-color: black;
  z-index: 300000;
  bottom: 1px;
  left: 0px;
  text-align: center;
  pointer-events: none;
}

.play_btn {
  position: absolute;
  width: 100%;
  display: block;
  /* min-height: 40px; */
  z-index: 300000;
  bottom: 46.5%;
  left: 0%;
  margin: 0 auto;

}
.play_btn img{
  width: 4%;
}

.play_btn,.video_overlays{
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

/* oikiaki xrisi table */
.home-table .table-striped>tbody>tr:nth-of-type(odd), .business-table .table-striped>tbody>tr:nth-of-type(odd){
  background: #E5F2FC;
}

.home-table .table>tbody>tr>td, .business-table .table>tbody>tr>td{
  vertical-align: middle;
  width: 25%;
  border: 6px solid white;
  color: black;
  font-family: 'CF Asty Std';
}

.business-table .table>tbody>tr>td{
  width: 20%;
}

.office-no{
  vertical-align: top!important;
}

.home-table h3, .business-table h3{
  font-size: 20px;
  line-height: 26px;
  text-align: center;
  min-height: 90px;
  max-height: 120px;
}
.home-table h3 span, .business-table h3 span{
  font-size: 12px;
  line-height: 15.6px;
  text-align: center;
}

.home-table .longer-text, .business-table .longer-text{
  font-size: 19px;
}

.home-table h1, .business-table h1{
  font-size: 38px;
  line-height: 49px;
  letter-spacing: 0em;
  text-align: center;
  margin-top: 1em;
}

.home-table p, .business-table p{
  font-family: 'CF Asty Std Thin';
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  min-height: 150px;
  max-height: 300px;
  margin-top: 2.5em;
}

.business-table p{
  min-height: 24em;
  max-height: 33em;
}

.business-table .basic-title{
  position: relative;
  cursor: pointer;
}

.business-table .basic-title span{
  color: #000;
  font-size: 24px;
  font-weight: 900;
  position: absolute;
  margin: 0;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  min-width: 0;
  padding: 6px 0 8px 0;
  cursor: pointer;
}

.business-table .basic-title h6{
  padding-left: 20px;
  font-size: 15px;
}

.basic-info-more{
  text-align: left;
  font-size: 13px;
  font-family: 'CF Asty Std Thin'!important;
}

.basic-info-more span div{
  font-size: 15px
}

.de-business-1,.de-business-2,.de-business-3,.de-business-4,.de-business-5,.de-business-6,.de-business-7,.de-business-8,.de-business-9,.de-business-10{
  display: none;
}

.business-table .basic-title .glyphicon-plus:before,.active-all .glyphicon-plus:before{
    content: "\002b";
}
.business-table .basic-title.active .glyphicon-plus:before,.active-all.active .glyphicon-plus:before{
  content: "\2212";
}

.home-table h4, .business-table h4{
  font-size: 16px;
  line-height: 21px;
  text-align: center;
}

.home-table a, .business-table a{
  background: #FAC51C;
  padding: 0.8em 2em;
  color: black;
  font-family: 'CF Asty Std';
  font-size: 16px;
}


.home-table a::after{
  content: none;
}

.home-table a:hover, .business-table a:hover{
  background-color: #38353a;
    color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.microsoft-products{
  width: 100%;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: start;
  justify-content: start;
  padding: 0;
  min-height: 220px;
}

.microsoft-products >li {
    display: inline-block;
    min-width: 60px;
    width: 25%;
    padding: 0 10px;
    margin-bottom: 15px;
    text-align: center;
  }

  .microsoft-products >li img{
    width: 100%;
    display: inline-block;
    line-height: 0;
  }

  .microsoft-products  li>span {
    display: block;
    font-size: 12px;
    width: 75px;
    margin-top: 5px;
    font-family: 'CF Asty Std Thin';
    height: 20px;
    text-align: inherit;
    margin-left: -15px;
}

.office-no ul li, .business-use ul li{
  list-style: none;
}

.office-no ul{
  padding: 0;
}

.office-no .microsoft-products {
  justify-content: center;
  display: block;
}
.office-no-h4{
  margin-top: 2.5em;
}

.basic-info{
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  font-family: 'CF Asty Std Thin'!important;
}

strong{
  font-family: 'CF Asty Std'!important;
}

.basic-info span{
  font-family: 'CF Asty Std Thin'!important;
  display: block;
}

.basic-info div{
  font-size: 22px;
}

.basic-title{
  font-size: 15px;
  line-height: 21px;
}
.basic-title span{
  font-family: 'CF Asty Std Thin'!important;
  font-size: 13px;
}

/* responsive table */

.home-use-mobile .home-table .table>tbody>tr>td, .business-use-mobile .business-table .table>tbody>tr>td{
  border: transparent;
  /* text-align: left; */
}

.home-use-mobile .home-table h3,.business-use-mobile .business-table h3{
  min-height: 0;
  max-height: 120px;
}

.home-use-mobile .microsoft-products, .home-use-mobile .home-table p, .business-use-mobile .microsoft-products, .business-use-mobile .business-table p{
  min-height: 0;
}

.home-use-mobile .basic-title, .business-use-mobile .basic-title{
  text-align: left;
}

.home-use-mobile .microsoft-products li>span, .business-use-mobile .microsoft-products li>span{
    margin: 0 auto;
}

.more-info{
  position: relative;
}

.more-info span{
  color: #000;
  font-size: 16px;
  font-weight: 900;
  position: absolute;
  margin: 0;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  min-width: 0;
  padding: 6px 0 8px 0;
}

.more-info h6{
  padding-left: 30px;
  font-size: 14px;
  font-family: 'CF Asty Std Thin';
}

.active-all,.active-all span{
  cursor: pointer;
  color: #0067B8;
}

.second, .more-row {
  display: none;
}


.active-all h6{
  font-family: 'CF Asty Std'!important;
}

.ok-no{
  color: #a2a0a0b5!important;
}

.business-table h1 span{
  font-size: 18px;
  line-height: 18.6px;
  text-align: center;
  display: block;
}

.fpa-info{
  font-family: 'CF Asty Std Thin';
    font-size: 16px;
    line-height: 21px;
    text-align: center;
}

#carousel .item{
  cursor:grab;
  cursor:-webkit-grab;
}

.owl-carousel{
  margin-top: 5em;
  position: relative;
}

.customNavigation{
  align-items: center;
}

.customNavigation .carousel-info{
  font-family: 'CF Asty Std Thin';
  font-size: 16px;
  line-height: 21px;
  letter-spacing: 0em;
  text-align: center;

}

.customNavigation .prev{
  float: left;
  padding: 0;
}
.customNavigation .next{
  float: right;
  padding: 0;
}
.customNavigation a{
  background: none;
  color: #0067B8;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.customNavigation a:hover{
  box-shadow: none;
  border: none;
  color: #0067B8;
  text-decoration: none;
  cursor: pointer;
}

.owl-controls{
  position: absolute;
  top: 0;
  /* left: 40.5%; */
  margin: 0 auto;
  margin-top: -50px!important;
  margin-bottom: 20px!important;
  width: 100%;
}
.owl-theme .owl-controls .owl-page span{
  width: 16px;
  height: 16px;
  background: white;
  border: 1px solid #3ba4c3;
}
.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span{
  background: #0067B8;
}

.small-details{
  font-size: 12px;
  font-family: 'CF Asty Std Thin';
}