/* 
Theme Name: Keras
Description: Keras Theme
Author: Giannis K.
Template: hello-elementor
Version: 0.0.1
Text Domain: keras
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
:root {
    --html-background: #f4f5f8;
    --html-padding: 10px;
    --btn-bg-color: transparent;
    --btn-bg-color--hover: #000;
    --btn-txt-color: #000;
    --btn-txt-color--hover: #fff;
    --btn-border-width: 1px;
    --btn-border-style: solid;
    --btn-border-color: #000;
    --btn-border-color--hover: #000;
    --btn-border-radius: 0;
    --btn-font-size: 14px;
    --btn-font-weight: 400;
    --btn-padding: .5rem 1rem;
    --btn-text-align: center;
    --btn-user-select: none;
    --btn-white-space: nowrap;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.inline {
	display: inline;
	text-indent: none;
}

@media (min-width: 768px) {
	.inline-m {
		display: inline;
		text-indent: none;
	}
}

@media (max-width: 1024px) {
	.inline-m-t {
		display: inline;
		text-indent: none;
	}
}

@media (min-width: 768px) {
	.inline-t-d {
		display: inline;
		text-indent: none;
	}
}
@media (min-width: 1024px) {
	.inline-d {
		display: inline;
		text-indent: none;
	}
}

.block {
	display: block;
	text-indent: none;
}

@media (min-width: 768px) {
	.block-m {
		display: block;
		text-indent: none;
	}
}

@media (max-width: 1024px) {
	.block-m-t {
		display: block;
		text-indent: none;
	}
}

@media (min-width: 768px) {
	.block-t-d {
		display: block;
		text-indent: none;
	}
}
@media (min-width: 1024px) {
	.block-d {
		display: block;
		text-indent: none;
	}
}


/* Reset */
[type=button], [type=submit], button {
  background-color: var(--btn-bg-color);
  color: var(--btn-txt-color);
  border-width: var(--btn-border-width);
  border-style: var(--btn-border-style);
  border-color: var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  display: inline-block;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  padding: var(--btn-padding);
  text-align: var(--btn-text-align);
  transition: all .3s;
  -webkit-user-select: var(--btn-user-select);
  -moz-user-select: var(--btn-user-select);
  user-select: var(--btn-user-select);
  white-space: var(--btn-white-space);
}

[type=button]:focus,
[type=button]:hover,
[type=submit]:focus,
[type=submit]:hover,
button:focus,
button:hover {
    background-color: var(--btn-bg-color--hover);
    color: var(--btn-txt-color--hover);
    border-color: var(--btn-border-color--hover);
    text-decoration: none;
}





/* PSWP */
.pswp div.pswp__bg {
  background-color: #fff;
}

.pswp__top-bar button.pswp__button {
  background: url('https://ns4utrainees.ondsl.gr/pages/keras/wp-content/themes/hello-theme-child-master/assets/images/ps-purple-skin.png') !important;
  background-size: 264px 88px;
}

.pswp button.pswp__button--arrow--left:before,
.pswp button.pswp__button--arrow--right:before {
  background: url('https://ns4utrainees.ondsl.gr/pages/keras/wp-content/themes/hello-theme-child-master/assets/images/ps-purple-skin.png');
}

.pswp button.pswp__button--arrow--left:before {
  left: 6px;
  background-position: -138px -44px !important;
}

.pswp button.pswp__button--arrow--right:before {
  right: 6px;
  background-position: -94px -44px !important;
}

.pswp button.pswp__button--zoom {
  display: none;
  background-position: -88px 0 !important;
}

.pswp button.pswp__button--share {
  background-position: -44px -44px !important;
}

.pswp button.pswp__button--close {
  background-position: 0 -44px !important;
}

div.pswp__counter {
  color: #000;
}

div.pswp__ui--fit .pswp__caption,
div.pswp__ui--fit .pswp__top-bar {
  background-color: #fff;
}

div.pswp__caption__center {
  color: #444;
}

/* // PSWP */


body.gutenberg-page .page-header .entry-title,
body.gutenberg-page .page-content {
  width: 100%;
  max-width: 100%;
}

body.gutenberg-page main {
  width: 100%;
  max-width: 96vw;
  margin-left: auto;
  margin-right: auto;
}


/* arrow indicator */
.arrow-indicator svg {
  animation-name: upanddown;
  animation-duration: 0.8s;
  animation-fill-mode: none;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.arrow-indicator svg path {
  stroke: black;
  fill: transparent;
}

.arrow-indicator svg path:nth-child(2) {
  animation-name: upanddownarrow;
  animation-duration: 0.8s;
  animation-delay: 0.2s;
  animation-fill-mode: normal;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.arrow-indicator svg path:nth-child(3) {
  animation-name: upanddownarrowend;
  animation-delay: 0.2s;
  animation-duration: 0.8s;
  animation-fill-mode: normal;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes upanddown {
  from {
    transform: translateY(-10%);
  }
  to {
    transform: translateY(10%);
  }
}

@keyframes upanddownarrow {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(10%);
  }
}

@keyframes upanddownarrowend {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(12%);
  }
}
/* /arrow indicator */




.logos img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

div.elementor-slideshow--ui-hidden .elementor-slideshow__footer,
div.elementor-slideshow--ui-hidden .elementor-slideshow__header {
   opacity: 1;
}

div.elementor-lightbox .dialog-lightbox-close-button svg,
div.elementor-lightbox .elementor-swiper-button svg,
div.elementor-lightbox .elementor-slideshow__header>svg {
  fill: #000;
  color: #000;
  opacity: .6;
}

div.elementor-lightbox .dialog-lightbox-close-button:hover svg,
div.elementor-lightbox .elementor-swiper-button:hover svg {
  fill: #000;
  opacity: 1;
}

div.elementor-element .swiper .elementor-swiper-button svg,
div.elementor-element .swiper~.elementor-swiper-button svg,
div.elementor-lightbox .swiper .elementor-swiper-button svg,
div.elementor-lightbox .swiper~.elementor-swiper-button svg {
  fill: #000;
}
div.elementor-lightbox .elementor-slideshow__footer {
  color: #000;
}

div.elementor-element .swiper .elementor-swiper-button,
div.elementor-element .swiper~.elementor-swiper-button,
div.elementor-lightbox .swiper .elementor-swiper-button,
div.elementor-lightbox .swiper~.elementor-swiper-button {
  opacity: .4;
}

div.elementor-lightbox .swiper .swiper-pagination-fraction {
    color: #000000;
    width: -moz-max-content;
    width: max-content;
}

@media (min-width: 1024px) {
  .translate-down--80 {
    transform: translateY(80px);
  }
}

.main-content h2 {
  margin-top: 2.5rem;
  margin-bottom: 1.2rem;
}

.main-content h3 {
  margin-top: 2rem;
  margin-bottom: 1.2rem;
}

.main-content h4 {
  margin-top: 2rem;
  margin-bottom: 1.2rem;
}

/*
header .elementor-menu-toggle {
  margin: 0 !important;
  margin-left: auto !important;
}

@media (min-width: 768px) {
  header .elementor-widget-nav-menu {
    align-items: center;
  }
}
*/

@media only screen and (max-width: 767px) {
  .hfe-nav-menu__breakpoint-mobile .hfe-nav-menu__layout-horizontal,
  .hfe-nav-menu__breakpoint-mobile .hfe-nav-menu__layout-vertical {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .hfe-nav-menu__breakpoint-mobile .hfe-nav-menu__layout-horizontal.menu-is-active,
  .hfe-nav-menu__breakpoint-mobile .hfe-nav-menu__layout-vertical.menu-is-active {
    display: flex;
  }
}


main .bea-slider-parallax-1 .slider .parallax-slider .swiper-slide .better-bg-img { 
  background-color: #000;
  background-size: contain;
  background-position: center left;
}



@media (min-width: 1024px) {
	html[lang="el"] .karen-text {
	  font-size: 14.3px;
	}
}

div.swiper-pagination {
  z-index: 1 !important;
}

.links__no-underline a {
  text-decoration: none;
}


@media (max-width: 1024px) {
  .cta__slider-wrapper {
    pointer-events: none;
  }

  .cta__slider-wrapper a,
  .cta__slider-wrapper button,
  .cta__slider-wrapper .cta__slider-arrow {
    pointer-events: auto;
  }
}