@import url(foundation.min.css);

@import url(jquery.fancybox.css);

@import url(slick.css);



:root {

  --primary-color: #000000;

  --secondary-color: #598697;

  --third-color: #8ab700;

  --nav-fs: 2rem;

  --service-title-fs: 2.4rem;

  --welcome-title: 3.6rem;

  --about-fs: 2.2rem;

  --upper-distance: 10rem;

  --index-fs: 8rem;

  --about-us-fs: 2.2rem;

}



@font-face {

  font-family: "Verdana";

  src: url("../fonts/verdana.ttf") format("TrueType");

  font-weight: 400;

}



@font-face {

  font-family: "Verdana";

  src: url("../fonts/verdana-bold.ttf") format("TrueType");

  font-weight: 700;

}



html {

  font-size: 62.5%;

}



.contact__content.static-page__content {

  font-size: 14px;

  display: flex;

  flex-direction: row;

  border: 1px solid #dddddd;

  padding: 3rem;

}

.contact__content.static-page__content strong,

.contact__content.static-page__content p {

  font-size: 1.4rem;

}



h1.static-page__title.text-left {

  margin-top: 18rem;

  font-weight: 400;

  margin-bottom: 2rem;

}



.row-large h3 {

  margin-bottom: 1rem;

}



.contact__content.static-page__content strong {

  margin-left: 2rem;

}



article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

main,

nav,

section,

summary,

h1,

h2,

h3,

h4,

h5,

h6,

html,

body,

audio,

canvas,

video,

a,

small,

label,

legend,

button,

input,

textarea,

time,

.top-bar-section ul li > a {

  font-family: "Verdana";

  font-weight: normal;

}



.error > label > small {

  text-transform: none;

}



.button,

button {

  background-color: #257696;

}



.button:hover,

button:hover {

  background-color: #113644;

}



.top-bar-section li:last-child:not(.has-form) a.events:not(.button) {

  text-decoration: none !important;

  color: #ffffff !important;

  background-color: #333333 !important;

}



.top-bar-section li:last-child:not(.has-form) a:hover.events:not(.button) {

  background-color: #999999 !important;

}



.st_fblike_hcount {

  margin-right: 25px;

}



.st_pinterest_hcount {

  margin-left: 20px;

}



.contain-to-grid,

.top-bar,

.top-bar-section ul {

  font-size: 1rem;

  color: #666666 !important;

  background-color: transparent !important;

}



.top-bar-section {

  margin-top: 10px;

}



.top-bar-section .has-dropdown > a:after {

  border-color: #666666 transparent transparent transparent;

}



ul.dropdown {

  background-color: #cccccc !important;

}



.slider,

.slider img {

  width: 100%;

}



.row {

  max-width: 1200px;

}



[data-magellan-expedition="fixed"] {

  width: 1200px;

  max-width: 1200px;

  min-width: 1200px;

  margin: 0 auto;

}



.breadcrumbs {

  border: none;

  background: none;

  box-shadow: none;

}



.breadcrumbs a:not(.current):hover,

.breadcrumbs a:hover i {

  color: #a69c00;

}



div.breadcrumb {

  max-width: 1200px;

  margin: 0 auto 25px;

}



.breadcrumbs * {

  color: #333333;

}



.breadcrumbs *,

.breadcrumbs > .current {

  line-height: 28px;

  text-transform: capitalize;

  font-size: 1rem;

}



.captcha input {

  margin-top: 8px;

}



body {

  opacity: 1;

}



.site-header {

  position: fixed;

  top: 0;

  left: 0;

  z-index: 100;

  width: 100%;

  padding: 0;

  background-color: #ffffff;

  box-shadow: 0 1px 1px 0 rgba(208, 206, 206, 0.7);

  box-shadow: rgba(1, 2, 2, 0.35) 0px 6px 10px 0px;

}



.top-bar .toggle-topbar.menu-icon a::after {

  top: -3px;

  left: 5px;

}



.top-bar {

  height: 18rem;

  display: flex;

  align-items: center;

}



.top-bar-section {

  margin-top: 0;

}



.top-bar .toggle-topbar.menu-icon {

  top: 17px;

  /* an to header exei upsos 65px diaforetika anaprosarmogi */

  left: 15px;

  right: auto;

  margin-top: 0;

  padding: 0;

}



.top-bar .toggle-topbar.menu-icon a {

  height: 25px;

  margin-top: 0;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  margin-top: 0;

  margin-bottom: 40px;

}



p {

  margin-bottom: 20px;

}



.homepage main {

  padding-top: 18rem;

}



.innerpage main {

  padding-top: 180px;

}



.row--padding,

.columns,

.column {

  padding-left: 12px;

  padding-right: 12px;

}



.row--lg {

  max-width: 1744px;

}



.form-validation input {

  margin-top: 8px;

}



#submitform {

  margin-top: 10px;

  font-family: "Verdana";

  font-weight: 600 !important;

  background-color: var(--third-color);

  border-radius: 3px;

  font-size: 16px;

}



.home-active li:first-of-type a {

  font-weight: 800;

  text-decoration: none;

}



ul.title-area #logo {

  display: inline-block;

}



.top-bar .name {

  height: initial;

}



/* Plain header links */

.top-bar-section li:not(.has-form) a:not(.button) {

  font-size: var(--nav-fs);

  color: #fff;

  background-color: transparent;

  position: relative;

  display: inline-block;

  position: relative;

}



.top-bar-section li:not(.has-form) a::after,

.top-bar-section li:not(.has-form) a::before {

  content: "";

  width: 10px;

  height: 3px;

  position: absolute;

  background-color: white;

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

  filter: opacity(0);

  transition: all 0.4s;

}



.top-bar-section li:not(.has-form) a::after {

  left: unset;

  right: 0;

}



.top-bar-section li:not(.has-form) a {

  font-weight: 700;

}



.top-bar-section li:not(.has-form):hover a::after,

.top-bar-section li:not(.has-form):hover a::before {

  filter: opacity(1);

}



/* No Dropdown Arrow */

.top-bar-section .has-dropdown > a {

  padding-right: 15px !important;

}



.top-bar-section .has-dropdown > a:after {

  display: none;

}



.top-bar-section ul li:hover:not(.has-form) > a,

.top-bar-section .dropdown li:not(.has-form) a:not(.button),

.top-bar-section li:not(.has-form) a:not(.button):hover,

.top-bar-section li.active:not(.has-form) a:not(.button),

.top-bar-section li.active:not(.has-form) a:not(.button):hover {

  color: #fff;

  background-color: transparent;

}



.top-bar-section .dropdown li:not(.has-form):hover > a:not(.button) {

  color: #f58220;

  background-color: #fff;

}



.top-bar-section ul {

  display: flex;

  gap: 41px;

}



.top-bar-section ul li {

  margin: 0;

}



.eshop a {

  display: flex;

  width: fit-content;

  margin-left: auto;

}



.top-bar {

  flex-wrap: wrap;

}



.outer-container {

  max-width: 154rem;

  padding: 0 1rem;

}



.top-bar .title-area {

  text-align: center;

}



.top-bar > .outer-container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin: 0 auto;

  width: 100%;

  padding-top: 5px;

}



.top-bar > .outer-container > * {

  flex-basis: 33.3%;

}



.socialMedia {

  display: flex;

  gap: 2rem;

}



.top-bar-section {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: var(--primary-color);

  padding-top: 2.5px;

  padding-bottom: 2.5px;

  align-self: end;

}



.eshop {

  font-size: var(--nav-fs);

}



.eshop a {

  color: white;

  display: flex;

}



.eshop a > div:first-of-type {

  align-content: center;

  background-color: #000000;

  padding: 0 1.8rem;

  border-top-left-radius: 1rem;

  border-bottom-left-radius: 1rem;

  height: 35px;

  align-self: center;

  line-height: 1;

  font-weight: 700;

  margin-left: auto;

}



.language {

  margin-left: 3.5rem;

}



.eshop.mobile,

.socialMedia.mobile {

  display: none;

}



/* ------- HERO ------- */

.hero-outer-container {

  width: 100%;

  height: clamp(50rem, 39.11vw, 75.1rem);

  position: relative;

  overflow-x: hidden;

  /* background-size: cover; */

}



.splash-icon {

  position: absolute;

  z-index: 0;

  top: 0;

  left: 0;

}



.welcome-txt {

  color: #000;

  font-size: var(--about-fs);

  max-width: clamp(43rem, 31.25vw, 60rem);

  align-self: center;

  position: absolute;

  top: clamp(2rem, 13.25vw, 26rem);

  line-height: 1.2;

  left: 55%;

}



.welcome-txt .moduleTitle {

  font-weight: 700;

  font-size: var(--welcome-title);

  line-height: 1.2;

  padding-bottom: 3.5rem;

}



.slick-slider {

  margin-bottom: 0;

}



.text-tshirt-container {

  width: 100%;

  display: flex;

  justify-content: space-between;

  margin: 0 auto;

  height: inherit;

  z-index: 1;

  position: relative;

}



.text-tshirt-container > div > img {

  height: -webkit-fill-available;

  object-fit: contain;

}



.welcome-txt a {

  color: black;

  width: fit-content;

  margin-top: 1.5rem;

  padding: 1rem 1.8rem;

  border: 3px solid black;

  border-radius: 2.5rem;

  position: relative;

  margin-right: auto;

  display: block;

  border: 3px solid black;

  /* Border color */

  border-radius: 30px;

  /* Rounded edges */

  text-align: center;

}



.site-header {

  background-color: black;

}



.site-header img {

  filter: invert(1);

}



.eshop a > div:first-of-type {

  align-content: center;

  background-color: white;

  padding: 0 1.8rem;

  border-top-left-radius: 1rem;

  border-bottom-left-radius: 1rem;

  height: 35px;

  align-self: center;

  line-height: 1;

  font-weight: 700;

  margin-left: auto;

  color: black;

}



.welcome-txt a::before {

  content: "";

  position: absolute;

  top: -3px;

  left: 50%;

  width: 40px;

  height: 6px;

  background-color: white;

  transform: translateX(-50%);

}



.welcome-txt a::after {

  content: "";

  position: absolute;

  top: -3px;

  left: 43%;

  width: 23px;

  height: 20px;

  background-color: transparent;

  border: 3px solid black;

  border-left-color: transparent;

  border-radius: 50%;

  transform: translateX(-50%) rotate(23deg);

  border-bottom-color: transparent;

  border-right-color: transparent;

  z-index: 1;

}



/* SERVICES */

.services-outer-container {

  margin-top: calc(var(--upper-distance) - 3rem);

  margin-left: auto;

  margin-right: auto;

  width: 97vw;

}



.services-title {

  font-size: var(--welcome-title);

  color: #000;

  font-weight: 700;

  text-align: center;

}



.service figure {

  margin: 0;

  position: relative;

  border-radius: 2rem;

  background-color: var(--primary-color);

  transition: all 0.4s;

}



.service:hover figure {

  background-color: var(--third-color);

}



.service figure img {

  border-radius: 2rem;

  border: 3px solid var(--primary-color);

  transition: all 0.4s;

}



.service:hover figure img {

  border: 3px solid var(--third-color);

}



.service figure > div {

  position: absolute;

  top: -59px;

  left: 0;

  font-size: var(--index-fs);

  color: transparent;



  font-weight: 700;

  transition: all 0.4s;

  z-index: -1;

}



.innerpage .service figure > div {

  top: -86px;

}



.service:hover figure > div {

  color: var(--third-color);

  -webkit-text-stroke-color: var(--third-color);

}



.service > a {

  display: flex;

  flex-direction: column;

}



.service:nth-child(even) figure {

  text-align: right;

  width: fit-content;

  margin-left: auto;

}



.service .more {

  margin-bottom: 0;

  font-size: 18px;

  color: transparent;

  font-weight: 700;

  transition: all 0.4s;

}



.service:hover .more {

  color: white;

  -webkit-text-stroke: white;

}



.services-cotnainer {

  display: flex;

  justify-content: space-between;

  margin-top: 8.2rem;

  list-style-type: none;

}



.service:hover:nth-child(even) h4,

.service:hover h4 {

  color: var(--primary-color);

}



.service h4 {

  font-size: var(--service-title-fs);

  margin-top: 1rem;

  font-weight: 700;

  margin-bottom: 1rem;

  transition: all 0.4s;

  text-align: center;

  color: white;

  font-size: 1.7rem;

}



.slideshow-container .welcome-txt {

  display: none;

}



.service:hover figure > div {

  color: var(--primary-color);

}



.service figure > div.more {

  top: auto;

  bottom: 5rem;

  position: absolute;

  left: 50%;

  transform: translate(-50%);

  z-index: 1;

  margin-bottom: 0;

  display: block;

  background: transparent;

  width: 100%;

  bottom: 0;

  text-align: center;

  border-radius: 0 0 2rem 2rem;

  transition: all 0.4s;

  padding: 1rem;

}



.service:hover figure > div.more {

  background: black;

}



.service .more {

  font-size: 1.6rem;

  position: relative;

  width: fit-content;

}



.service .more::before {

  content: ">";

  position: absolute;

  right: 55px;

  top: 26px;

  transform: translateY(-50%);

  filter: opacity(0);

  transition: all 0.4s;

}



.service .more::before {

  content: ">";

  position: absolute;

  right: 55px;

  top: 20px;

}



.service:hover .more::before {

  filter: opacity(1);

}



/* ------- ABOUT ------- */



.about-us-outer-container {

  position: relative;

  margin-top: var(--upper-distance);

  height: 63.75vw;

  max-height: 1224px;

  background-image: url("../img/guernica.jpg");

  background-position: top right;

  background-size: cover;

  background-repeat: no-repeat;

}



.guernica-img {

  position: absolute;

  width: 100%;

  height: auto;

  max-width: 1920px;

  left: 50%;

  top: 0;

  transform: translateX(-50%);

  z-index: -1;

}



.about-us-txt-container {

  max-width: clamp(20rem, 32.813vw, 63rem);

  margin-left: clamp(2rem, 10.417vw, 20rem);

}



.about-us-txt-container h3 {

  font-size: clamp(3rem, 2.4vw, var(--welcome-title));

  color: black;

  font-weight: 700;

}



.about-us-txt {

  font-size: clamp(1.6rem, 1.35vw, var(--about-us-fs));

  line-height: 1.3;

}



.about-us-txt br {

  content: "";

  margin: 2rem;

  display: block;

}



.about-us-txt-container .welcome-txt {

  position: static;

}



.about-us-txt-container .welcome-txt a {

  color: #000;

  font-weight: 700;

  border: 3px solid black;

  margin-top: 3rem;

  position: relative;

  left: -20px;

  font-size: clamp(18px, 1.15vw, var(--about-fs));

}



.about-us-txt-container .welcome-txt a::after {

  border: 3px solid black;

  border-left-color: transparent;

  border-bottom-color: transparent;

  border-right-color: transparent;

}



/* ------- STATIC PAGE ------- */

.static-page__title {

  text-align: center;

  font-size: var(--welcome-title);

  font-weight: 700;

  line-height: 1;

  margin-top: 2rem;

}



.static-page__content,

.static-page__content p,

.static-page__content li,

.static-page__content * {

  font-size: var(--about-fs);

}



.slider,

.slider img {

  width: 100%;

  min-height: 35rem;

  object-fit: cover;

}



.slideshow-container {

  margin: 2rem auto 0;

}



#slider_1 .slick-dots li {

  list-style-type: none;

  filter: opacity(0.6);



  button {

    font-size: 0;

    padding: 0.6rem 4.25rem;

    border-radius: 3rem;

    margin: 0;

    background-color: var(--third-color);

  }

}



#slider_1 .slick-dots li.slick-active {

  filter: opacity(1);

}



#slider_1 .slick-dots {

  margin: 4rem 0 0;

  display: flex;

  gap: 1.4rem;

}



/* ------- CATEGORY PAGE ------- */



/* ------- FOOTER ------- */

footer {

  margin-top: var(--upper-distance);
    position: relative;
    z-index: 1;
}



.footer-icons {

  position: relative;

  width: fit-content;

  margin: 0 auto;

  top: 78px;

  z-index: -1;

}



.footer-top {

  position: relative;

}



.footer-top::before {

  content: "";

  bottom: 0;

  left: 0;

  position: absolute;

  background-image: url("../img/background-left-footer.png");

  background-size: cover;

  background-repeat: no-repeat;

  width: clamp(40rem, 38.18vw, 733px);

  height: clamp(38rem, 36.25vw, 696px);

  z-index: -1;

}



.footer-top::after {

  content: "";

  bottom: 0;

  right: 0;

  position: absolute;

  background-image: url("../img/background-right-footer.png");

  background-size: cover;

  background-repeat: no-repeat;

  width: clamp(40rem, 33.65vw, 646px);

  height: clamp(33.6rem, 28.28vw, 543px);

  z-index: -2;

}



.footer-logo {

  position: absolute;

  left: 50%;

  top: 57%;

  transform: translate(-50%, -50%);

}



.site-footer__copyrights {

  margin-top: 15px;

}



.site-footer__copyrights,

.site-footer__copyrights a {

  font-size: 16px;

  color: #fff;

}



.site-footer__logo {

  text-align: right;

}



.footer-bottom {

  background-color: var(--primary-color);

  padding-top: 7.5rem;

  padding-bottom: 7rem;

}



.footer-details {

  display: flex;

  max-width: 154rem;

  padding: 0 1rem;

  justify-content: space-between;

  margin: 0 auto;

}



.footer-box {

  width: fit-content;

}



.footer-box h4 {

  color: white;

  font-size: var(--about-us-fs);

  font-weight: 700;

  margin-bottom: 2.5rem;

}



.footer-box ul {

  margin-left: 0;

}



.footer-box li a,

.footer-box li {

  font-size: var(--service-title-fs);

  color: white;

  list-style-type: none;

  line-height: 1.4;

}



.footer-socialMedia img {

  filter: invert(1);

  width: 23px;

  height: 23px;

  margin-right: 15px;

  margin-bottom: 10px;

}



.footer-socialMedia a {

  color: white;

  font-size: var(--about-fs);

  display: flex;

  align-items: baseline;

}



.site-url-container {

  max-width: 154rem;

  margin: 0 auto;

  padding: 0 1rem;

  width: 100%;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  margin-top: 2.5rem;

}



.site-url,

.site-url a {

  color: white;

  font-size: var(--about-fs);

}



/* innerpage */

.services-innerpage {

  max-width: 154rem;

  padding: 0 1rem;

}



.pagination {

  margin: 2rem 0 0 !important;

  display: -webkit-box !important;

  display: -ms-flexbox !important;

  display: flex !important;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

}



ul.pagination li.current a,

ul.pagination li.current a:hover,

ul.pagination li.current a:focus {

  background: var(--third-color);

}



ul.pagination li a {

  padding: 0.5rem 1rem;

  font-size: 1.4rem;

}



ul.pagination li:hover a,

ul.pagination li a:focus {

  background: var(--primary-color);

  color: white;

}



#contact {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  gap: 5rem;

  margin-top: 5rem;

}



#contact iframe {

  height: 816px;

}



#contact form {

  background-color: #f5f5f5;

  max-width: 65rem;

  width: 100%;

  padding: 5rem 0;

  margin: 0;



  label {

    margin-top: 1rem;

    font-size: 16px;

    margin-bottom: 5px;

  }



  label:before {

    content: "* ";

    color: #f00;

    font-weight: bold;

  }

}



h3 {

  margin-bottom: 2rem;

  font-size: 21px;

}



h1.static-page__title.text-left {

  margin-top: 5rem;

  font-weight: 700;

  margin-bottom: 3rem;
font-size: var(--welcome-title);
}



.row-large {

  max-width: 132rem;

  margin: auto;

  padding-left: 1rem;

  padding-right: 1rem;

}



.col-sm-3:nth-child(2) {

  margin-left: 7rem;

}



.contact-content .row a {

  color: black;

  line-height: 2;

  font-size: 2rem;

}



.panel > :last-child {

  margin-bottom: 0;

  display: flex;

  justify-content: center;

}



.contact-content .row {

  margin-left: 0rem;

  display: flex;

  justify-content: space-between;

  width: 100%;

  margin: 0;

  max-width: 100%;

  justify-content: center;

}



.contact-content .row {

  margin-left: 0rem;

}



.panel {

  margin-bottom: 20px;

  background-color: #fff;

  border-radius: 4px;

  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);

  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);

}



.panel-body {

  padding: 15px;

}



.col-sm-3 {

  width: 25%;

  float: left;

  text-align: left;

  line-height: 2;

}



.col-sm-3 strong {

  font-size: 22px;

  text-transform: capitalize;

}



#contact form .row {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

}



#contact form .row > * {

  width: 90%;

}



#contact form .row select {

  font-size: 20px;

  height: 4.2rem;

  font-family: "Verdana";

  background-color: #fff;

  color: #6d6d6d;

}



#contact form .row input,

#contact form .row textarea {

  width: 100%;

  padding: 2rem 1rem;

  font-size: 20px;

}



#contact form .row textarea {

  padding: 0.5rem 1rem;

}



[data-abide] .error small.error,

[data-abide] span.error,

[data-abide] small.error {

  font-size: 1.6rem;

}



.breadcrumbs {

  margin-top: 2rem;

  padding: 0;

}



.breadcrumbs a:not(.current):hover {

  color: var(--third-color) !important;

}



.breadcrumb *,

.breadcrumbs > .current {

  font-size: 16px;

}



.breadcrumb .fa-home {

  color: var(--third-color);

}



.alert-box.warning,

.alert-box.success {

  font-size: 1.8rem;

}



.close {

  opacity: 1 !important;

  right: 0rem !important;

  cursor: pointer;

}



#contact .alert-box.success {

  width: -webkit-fit-content;

  width: -moz-fit-content;

  width: fit-content;

  margin: 2rem auto 0;

  padding-left: 3rem;

  padding-right: 3rem;

}



#contact .alert-box .close {

  font-size: 1.6rem;

  -webkit-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

  padding: 8px 6px 8px;

  line-height: 0;

  position: absolute;

  top: 50%;

  right: 0.25rem;

  opacity: 1;

  margin: 0;

  transform: translateY(-50%);

}



.main__image img {

  width: 100%;

  object-fit: cover;

  max-height: 50rem;

}



.article__container .static-page__title {

  margin-bottom: 3rem;

  margin-top: 0rem;

}



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

  :root {

    --nav-fs: 1.8rem;

    --service-title-fs: 1.8rem;

    --welcome-title: 3rem;

    --about-fs: 1.8rem;

    --upper-distance: 7rem;

    --about-us-fs: 1.8rem;

  }



  .welcome-txt {

    top: 3rem;

  }



  .welcome-txt .moduleTitle {

    padding-bottom: 1.5rem;

  }



  #contact iframe {

    width: 470px;

  }



  #contact form {

    max-width: 50rem;

  }



  .service h4 {

    font-size: 1.6rem;

  }



  .services-cotnainer {

    flex-wrap: wrap;

    width: 54rem;

    margin-left: auto;

    margin-right: auto;

    gap: 2rem;

    width: 100%;

  }



  .service {

    flex-basis: calc(25% - 2rem);

  }



  .footer-details .footer-box:nth-child(4) {

    width: 50%;

  }



  .footer-details {

    flex-wrap: wrap;

  }



  .about-us-outer-container {

    background-image: unset;

    margin-left: auto;

    margin-right: auto;

    height: auto;

  }



  .slideshow-container {

    margin-top: var(--upper-distance);

  }



  .about-us-txt-container {

    margin-left: auto;

    margin-right: auto;

    max-width: 62rem;

    width: 100%;

  }



  .top-bar-section ul {

    gap: 15px;

  }



  .language {

    margin-left: 1.5rem;

  }



  .footer-top::before {

    width: clamp(20rem, 38.18vw, 733px);

    height: clamp(18rem, 36.25vw, 696px);

  }



  .footer-top::after {

    width: clamp(30rem, 33.65vw, 646px);

    height: clamp(23.6rem, 28.28vw, 543px);

  }



  .service .more::before {

    right: 10px;

  }

}



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

  :root {

    --welcome-title: 2.2rem;

    --nav-fs: 1.6rem;

    --service-title-fs: 1.6rem;

    --about-fs: 1.6rem;

    --upper-distance: 5rem;

  }



  .welcome-txt {

    left: 45%;

  }



  .contact-content .row {

    display: flex;

    flex-direction: column;

    gap: 2rem;

  }



  .col-sm-3:nth-child(2) {

    margin-left: 0rem;

  }



  .panel > :last-child {

    padding: 0;

  }



  .service {

    flex-basis: calc(50% - 2rem);

  }



  [class*="block-grid-"] {

    max-width: 660px;

    /* αλλαγή ανάλογα με το μέγεθος του thumb */

    margin: auto;

  }



  .text-tshirt-container > div > img {

    width: 30rem;

  }



  .text-tshirt-container {

    flex-direction: column;

    align-items: center;

  }



  .hero-outer-container {

    height: auto;

  }



  .hero-outer-container .welcome-txt a {

    margin-left: auto;

  }



  .footer-icons {

    top: 45px;

  }



  .top-bar-section ul {

    gap: 5px;

  }



  .language {

    margin-left: 0.5rem;

  }



  .services-cotnainer {

    max-width: 61rem;

  }



  .service .more::before {

    right: 49px;

  }



  #contact {

    -webkit-box-orient: vertical;

    -webkit-box-direction: reverse;

    -ms-flex-direction: column-reverse;

    flex-direction: column-reverse;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

  }



  #contact iframe,

  #contact form {

    max-width: unset;

    width: 60rem;

  }



  .col-sm-3 {

    width: 100%;

  }



  .welcome-txt {

    left: 45%;

  }



  h1.static-page__title.text-left {

    margin-top: 0rem;

  }

}



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

  :root {

    --upper-distance: 3rem;

    --service-title-fs: 1.8rem;

    --about-us-fs: 2rem;

    --about-fs: 1.6rem;

    --welcome-title: 2rem;

  }



  .service .more::before {

    display: none;

  }



  .col-sm-3 strong {

    font-size: 19px;

  }



  .contact-content .row a {

    color: black;

    line-height: 2;

    font-size: 1.7rem;

  }



  .about-us-txt-container .welcome-txt a {

    margin-top: 1rem;

  }



  .breadcrumb-title h1 {

    margin-top: 0.3rem;

    font-size: 18px;

  }



  .row-large {

    padding-top: 3rem;

  }



  .breadcrumb {

    padding-left: 1rem;

    padding-right: 1rem;

  }



  .innerpage main {

    padding-top: 80px;

  }



  .slider,

  .slider img {

    width: 100%;

    min-height: unset;

    object-fit: contain;

  }



  .welcome-txt {

    position: unset;

    width: 100%;

    max-width: 100%;

    padding-left: 1rem;

    padding-right: 1rem;

    padding-top: 3rem;

  }



  .contact-content .row {

    gap: 1rem;

  }



  .about-us-txt-container .welcome-txt a {

    left: -10px;

  }



  .panel > :last-child {

    margin-bottom: 0;

    padding: 0;

  }



  .services-cotnainer {

    width: 100%;

    margin-top: 0;

  }



  .services-title {

    margin-bottom: 2rem;

  }



  h1.static-page__title.text-left {

    margin-top: 0;

  }



  .st_linkedin_hcount {

    display: none;

  }



  [class*="block-grid-"] {

    max-width: 330px;

    /* αλλαγή ανάλογα με το μέγεθος του thumb */

    margin: auto;

  }



  .breadcrumbs *,

  .breadcrumbs > .current {

    font-size: 15px;

  }



  .top-bar-section {

    float: none !important;

  }



  .top-bar .toggle-topbar.menu-icon a {

    color: #000000;

    margin-top: 10px;

  }



  .top-bar .toggle-topbar.menu-icon a {

    position: relative;

    width: 2.4rem;

    padding-right: 0;

    height: auto;

  }



  /* .top-bar .toggle-topbar.menu-icon a::after {

    box-shadow: 0 10px 0 1px #000000, 0 16px 0 1px #000000, 0 22px 0 1px #000000;

  } */



  .top-bar .toggle-topbar.menu-icon a::after {

    display: none !important;

  }



  .top-bar .toggle-topbar.menu-icon a span {

    display: block;

    width: 100%;

    border-radius: 3px;

    height: 0.3rem;

    background: var(--third-color);

    -webkit-transition: all 0.3s;

    -o-transition: all 0.3s;

    transition: all 0.3s;

    position: relative;

  }



  .top-bar .toggle-topbar.menu-icon a span + span {

    margin-top: 0.3rem;

  }



  .top-bar.expanded .toggle-topbar.menu-icon a span:nth-child(1) {

    -webkit-animation: ease 0.7s top forwards;

    animation: ease 0.7s top forwards;

  }



  .top-bar .toggle-topbar.menu-icon a span:nth-child(1) {

    -webkit-animation: ease 0.7s top-2 forwards;

    animation: ease 0.7s top-2 forwards;

  }



  .top-bar.expanded .toggle-topbar.menu-icon a span:nth-child(2) {

    -webkit-animation: ease 0.7s scaled forwards;

    animation: ease 0.7s scaled forwards;

  }



  .top-bar .toggle-topbar.menu-icon a span:nth-child(2) {

    -webkit-animation: ease 0.7s scaled-2 forwards;

    animation: ease 0.7s scaled-2 forwards;

  }



  .top-bar.expanded .toggle-topbar.menu-icon a span:nth-child(3) {

    -webkit-animation: ease 0.7s bottom forwards;

    animation: ease 0.7s bottom forwards;

  }



  .top-bar .toggle-topbar.menu-icon a span:nth-child(3) {

    -webkit-animation: ease 0.7s bottom-2 forwards;

    animation: ease 0.7s bottom-2 forwards;

  }



  @-webkit-keyframes top {

    0% {

      top: 0;

      -webkit-transform: rotate(0);

      transform: rotate(0);

    }



    50% {

      top: 0.5rem;

      -webkit-transform: rotate(0);

      transform: rotate(0);

    }



    100% {

      top: 0.5rem;

      -webkit-transform: rotate(45deg);

      transform: rotate(45deg);

    }

  }



  @keyframes top {

    0% {

      top: 0;

      -webkit-transform: rotate(0);

      transform: rotate(0);

    }



    50% {

      top: 0.5rem;

      -webkit-transform: rotate(0);

      transform: rotate(0);

    }



    100% {

      top: 0.5rem;

      -webkit-transform: rotate(45deg);

      transform: rotate(45deg);

    }

  }



  @-webkit-keyframes top-2 {

    0% {

      top: 0.5rem;

      -webkit-transform: rotate(45deg);

      transform: rotate(45deg);

    }



    50% {

      top: 0.5rem;

      -webkit-transform: rotate(0deg);

      transform: rotate(0deg);

    }



    100% {

      top: 0;

      -webkit-transform: rotate(0deg);

      transform: rotate(0deg);

    }

  }



  @keyframes top-2 {

    0% {

      top: 0.5rem;

      -webkit-transform: rotate(45deg);

      transform: rotate(45deg);

    }



    50% {

      top: 0.5rem;

      -webkit-transform: rotate(0deg);

      transform: rotate(0deg);

    }



    100% {

      top: 0;

      -webkit-transform: rotate(0deg);

      transform: rotate(0deg);

    }

  }



  @-webkit-keyframes bottom {

    0% {

      bottom: 0;

      -webkit-transform: rotate(0);

      transform: rotate(0);

    }



    50% {

      bottom: 0.7rem;

      -webkit-transform: rotate(0);

      transform: rotate(0);

    }



    100% {

      bottom: 0.7rem;

      -webkit-transform: rotate(135deg);

      transform: rotate(135deg);

    }

  }



  @keyframes bottom {

    0% {

      bottom: 0;

      -webkit-transform: rotate(0);

      transform: rotate(0);

    }



    50% {

      bottom: 0.7rem;

      -webkit-transform: rotate(0);

      transform: rotate(0);

    }



    100% {

      bottom: 0.7rem;

      -webkit-transform: rotate(135deg);

      transform: rotate(135deg);

    }

  }



  @-webkit-keyframes bottom-2 {

    0% {

      bottom: 0.7rem;

      -webkit-transform: rotate(135deg);

      transform: rotate(135deg);

    }



    50% {

      bottom: 0.7rem;

      -webkit-transform: rotate(0);

      transform: rotate(0);

    }



    100% {

      bottom: 0;

      -webkit-transform: rotate(0);

      transform: rotate(0);

    }

  }



  @keyframes bottom-2 {

    0% {

      bottom: 0.7rem;

      -webkit-transform: rotate(135deg);

      transform: rotate(135deg);

    }



    50% {

      bottom: 0.7rem;

      -webkit-transform: rotate(0);

      transform: rotate(0);

    }



    100% {

      bottom: 0;

      -webkit-transform: rotate(0);

      transform: rotate(0);

    }

  }



  @-webkit-keyframes scaled {

    50% {

      -webkit-transform: scale(0);

      transform: scale(0);

    }



    100% {

      -webkit-transform: scale(0);

      transform: scale(0);

    }

  }



  @keyframes scaled {

    50% {

      -webkit-transform: scale(0);

      transform: scale(0);

    }



    100% {

      -webkit-transform: scale(0);

      transform: scale(0);

    }

  }



  @-webkit-keyframes scaled-2 {

    0% {

      -webkit-transform: scale(0);

      transform: scale(0);

    }



    50% {

      -webkit-transform: scale(0);

      transform: scale(0);

    }



    100% {

      -webkit-transform: scale(1);

      transform: scale(1);

    }

  }



  @keyframes scaled-2 {

    0% {

      -webkit-transform: scale(0);

      transform: scale(0);

    }



    50% {

      -webkit-transform: scale(0);

      transform: scale(0);

    }



    100% {

      -webkit-transform: scale(1);

      transform: scale(1);

    }

  }



  .overlay {

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.7);

    z-index: 2;

  }



  .top-bar.expanded .title-area {

    background: transparent;

  }



  .top-bar-section li:not(.has-form) a:not(.button) {

    text-align: center;

  }



  .top-bar {

    height: 65px;

  }



  ul.dropdown {

    background: transparent !important;

  }



  .services-cotnainer {

    max-width: 30rem;

    flex-direction: column;

  }



  .about-us-txt-container {

    max-width: 90vw;

  }



  .about-us-outer-container {

    margin-top: 0;

  }



  .about-us-txt-container h3 {

    font-size: clamp(2rem, 2.4vw, var(--welcome-title));

  }



  .footer-details {

    flex-direction: column;

    align-items: center;

    justify-content: center;

  }



  .footer-box {

    text-align: center;

  }



  .footer-details .footer-box:nth-child(4) {

    width: fit-content;

  }



  .footer-box li a,

  .footer-box li {

    line-height: 1.4;

  }



  .footer-box ul {

    margin-bottom: 0;

  }



  .footer-box h4 {

    margin: 1.5rem auto 0.5rem;

  }



  .footer-bottom {

    padding-top: 3rem;

    padding-bottom: 4rem;

  }



  .footer-socialMedia a {

    align-items: anchor-center;

    justify-content: center;

  }



  .about-us-txt {

    line-height: 1.2;

  }



  #slider_1 .slick-dots {

    gap: 5px;

  }



  .services-outer-container {

    margin-top: 1rem;

    margin-bottom: var(--upper-distance);

  }



  .welcome-txt .moduleTitle {

    padding-bottom: 1.5rem;

  }



  .footer-icons {

    top: 50%;

  }



  .footer-logo {

    top: 64%;

  }



  .footer-logo img {

    width: 12rem;

  }



  .eshop,

  .socialMedia {

    display: none;

  }



  .eshop.mobile,

  .socialMedia.mobile {

    display: block;

  }



  .top-bar .title-area {

    position: static;

  }



  .top-bar > .outer-container {

    position: relative;

  }



  .top-bar .toggle-topbar.menu-icon {

    right: 15px;

    left: unset;

    top: 50%;

    transform: translateY(-50%);

  }



  .top-bar-section ul {

    flex-direction: column;

    align-items: center;

    justify-content: center;

  }



  .top-bar-section ul li > a {

    padding: 10px 15px;

  }



  .top-bar-section li:not(.has-form) a:not(.button) {

    width: fit-content;

  }



  .top-bar-section ul li {

    width: fit-content;

  }



  .top-bar-section {

    flex-direction: column;

    align-items: center;

    justify-content: center;

  }



  .socialMedia img {

    filter: invert(1);

  }



  .socialMedia.mobile {

    display: flex;

    gap: 1rem;

    margin: 2rem auto;

  }



  .top-bar-section {

    padding: 2rem 0 4rem;

  }



  .language {

    margin-left: unset;

  }



  .top-bar {

    height: 80px;

  }



  .top-bar .name {

    width: fit-content;

  }



  .site-url-container {

    margin-top: 2.5rem;

    flex-direction: column;

    align-items: center;

    gap: 3rem;

  }



  .imonline-logo {

    max-width: 10rem;

  }



  #logo img {

    width: 10.8rem;

  }



  .homepage main {

    padding-top: 8rem;

  }



  .footer-socialMedia img {

    margin-bottom: 0px;

  }



  .footer-socialMedia {

    display: flex;

    flex-direction: column;

    gap: 1rem;

  }



  .top-bar > .outer-container {

    margin-bottom: 2rem;

  }



  .footer-top > div {

    padding-top: 2rem;

  }



  #contact {

    padding: 0 2rem;

  }



  #contact form {

    label {

      font-size: 1.8rem;

    }

  }



  #contact form .row select {

    font-size: 1.8rem;

  }

	.top-bar-section ul {
	margin: 0 !important;
	}

  #contact form .row input,

  #contact form .row textarea {

    font-size: 1.8rem;

  }



  #contact iframe,

  #contact form {

    max-width: 60rem;

    width: 100%;

  }



  #contact form {

    padding: 2rem 0;

  }



  #contact iframe {

    height: 400px;

  }



  .footer-top::after {

    width: clamp(12rem, 33.65vw, 646px);

    height: clamp(9.6rem, 28.28vw, 543px);

  }

}