@font-face {
  font-family: 'Fugue';
  src: url('../fonts/fugue_regular-webfont.eot'); /* IE9 Compat Modes */
  src: url('../fonts/fugue_regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/fugue_regular-webfont.woff') format('woff'), /* Modern browsers */
       url('../fonts/fugue_regular-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/fugue_regular-webfont.svg#Fugue') format('svg'); /* Legacy iOS */
  font-weight: normal;
  font-style: normal;
}

body, html {
  background-color:black;
  margin: 0;
  padding: 0;
  font-family: 'Fugue', sans-serif;
  color: white;
  height: 100%;
}


.center-slogan.ar,.services.ar {
  font-family: 'Noto Sans Arabic', sans-serif;
  font-size:1.54vw;
  margin-bottom:0px;
}

.zh {
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 500; /* Medium */
}
a {
  color: white;
  text-decoration: none;
}
p { line-height:120%; }
.hero {
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index:1;
}

.header { height: 500px; }
.overlay {
  background-color: rgba(0, 0, 0, 0.0);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0vw 2vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.left-logo h1 {
  font-size: 4vw;
  margin: 12px 0px 8px 0px;
  font-weight:normal;
  letter-spacing:1px;
}
#logosvg {
    margin: 3vw 0vw 0.4vw 0.6vw;
    width: 27vw;
}
.center-slogan {
  max-width: 21vw;
  text-align: left;
  flex: 1;
  margin-left: 20.1%;
  margin-top:2.8vw;
}
.center-slogan.ar, .center-slogan.zh {
  margin-left: 15.1%;
  margin-top:2.6vw; /*1.6vw;*/
}
.center-slogan:has(.ar) {
 text-align: right;
 }
.services-lang-row,.center-slogan, .right-contact {
  font-size: 1.32vw;
  font-weight:lighter;
}
.services-lang-row.ar,.center-slogan.ar {
  font-size: 1.4vw;
}
.right-contact {
  text-align: left;
  padding-left:0;
  padding-right:2.5vw;
  margin-top:2.8vw;
}
.right-contact.ar, .right-contact.zh {
  padding-left:0;
}

.divider {
  border-bottom: 0.22vw solid white;
  margin: 0.5vw 1.2vw 0.3vw 0.7vw;
}
.lang-switcher { padding-top:0vw; padding-right:2.8vw; }
.right-contact a,.lang-switcher,.lang-switcher a { font-family: 'Fugue', sans-serif !important; font-size: 1.32vw;}
.right-contact a:hover, .lang-switcher a:hover {text-decoration:underline; }
.services-lang-row {
  padding-top:0.3vw;
  display: flex;
  justify-content: space-between;
}
.services-lang-row.ar,.services-lang-row.zh { padding-top:1px; }

html[lang="ar"] .services-lang-row .services { width: 27vw;   text-align: right; }

.services {
  font-style: normal;
  padding-left:0.66vw;
}

 .services-lang-row .services.zh {
   padding:0.3vw 0 0 0.8vw;
 }
.lang-switcher a {
  margin-right: 0.35vw;
  opacity: 0.8;
}

.lang-switcher a.active {
  text-decoration: underline;
  opacity: 1;
}

.footer-bottom {
  display: flex;
  justify-content: center;
  padding: 0px;
  position: absolute;
  margin: auto;
  width: 200px;
  left: calc(50% - 100px);
  bottom: 20px;
}

.footer-bottom .social a {
  margin: 0 0.5vw;
  font-size: 2.4vw;
}

/* slide */
.slideshow-background {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0; /*-1*/
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.slideshow-background img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  z-index:1;
}

.slideshow-background img.active {
  opacity: 1;
  z-index: 2;
}



/* mobils */

@media (max-width: 1024px) {

  .right-contact { padding:0px; margin-top: 10px; }
  .footer-bottom { bottom:19vw !important; }
  .lang-switcher {  bottom:16vw !important; }
  body.is-safari .footer-bottom { bottom:21vh !important; }
  body.is-safari .lang-switcher { bottom: 14vh !important; }
  .header {
    display: flex;
    flex-direction: column;
  }
  .header-top {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #logosvg {
  margin: 5.5vw 0vw 0vw 1vw;
  width: 63.7vw;
  }

  .left-logo, .center-slogan, .right-contact {
    width: 100%;
    text-align: left;
    margin-bottom: 0.5vw;
    padding-bottom: 3.5vw;
  }

  .left-logo h1 {
    font-size: 3.5vw;
    margin: 0 0 0.5vw 0;
  }

  .overlay {
  padding: 3vw 4vw;
  }

  .services-lang-row,.left-logo,.right-contact { border-bottom: 0.5vw solid #fff;  }
  .right-contact     { border-top: 0.5vw solid #fff; }
 
  .center-slogan, .center-slogan p,  .right-contact, .services-lang-row {
  font-size: 1.7vw;
  text-align: left
}

.footer-bottom .social a {
  margin: 0 0.5vw;
  font-size: 7vw;
}
 
  .center-slogan {
    max-width: 100%;
    padding:0.6vw 0 1.5vw 0;
    margin:0;
  }

  p { margin:0; line-height:121%}

  .right-contact {
    min-width: 200px;
        padding:1.3vw 0 2.7vw 0;
  }

    .divider {
    display:none;
    margin: 1vw 0;
  }

  .services-lang-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.6vw 0 1.4vw 0;
  }

  .lang-switcher {
    position:absolute;
    bottom:6vw !important;
    left:calc(50% - 26vw);
  }

  .lang-switcher a {
    margin: 0 0.6vw 0 0;
    display: inline-block;
    opacity: 0.8;
  }

  .lang-switcher a.active {
    text-decoration: underline;
    opacity: 1;
  }

  /* arab xines */
  .center-slogan.ar, .center-slogan.zh {
        margin-left: 0;
  }
   .lang-switcher.ar {
   /* bottom:2vw;*/
  }
  html[lang="ar"] .slogan, html[lang="ar"] .services-lang-row .services, html[lang="ar"] .right-contact {
  width: 100%;
  text-align: right;
  }

  .center-slogan.ar { 
	padding:0px;
  }

  .right-contact.ar {
 	padding:0;
  }
 
  .services-lang-row.ar { 
   padding:0 0 5px 0;
 }
  .services-lang-row.zh {
   padding:5px 0 10px 0;
 }

  .ca,.right-contact a { font-size:5.8vw !important;}
  .en, .es, .fr, .right-contact a { font-size:6.42vw !important; }
  .ar, .zh { font-size:6.5vw !important }
  .right-contact.ar { font-size: 6vw !important; padding:1.3vw 0vw 2vw 0vw}

 .footer-bottom,  .lang-switcher, .lang-switcher a { font-family: 'Fugue', sans-serif !important; font-size:6.5vw;padding:0px }
}


@media screen and (min-width: 744px) and (max-width: 1024px) and (orientation: portrait) {
  /* Estils només per iPads en vertical */
/*  .lang-switcher { top:56px; left:auto;right:10px; }
  .footer-bottom { bottom:20px; }*/
  .services-lang-row,.left-logo,.right-contact { border-bottom: 0.3vw solid #fff;  }
  .right-contact     { border-top: 0.3vw solid #fff; }

}


@media screen and  (min-width:1300px)  {
.footer-bottom { left:inherit; }
.footer-bottom.ar { right:24vw; top:10.2vw }
.footer-bottom {
    width: 7vw;
    right: 38.5vw;
    top: 10vw;
}
 .footer-bottom.zh {
    right: 40.8vw;
  }
.footer-bottom .social a {
  margin: 0 0.5vw;
  font-size: 1.4vw;
}

}