/* IMPORT FONTS FROM GOOGLE */
/* LOAD FONTS */
 @font-face {
     font-family: 'Josefin Sans';
     font-style: normal;
     font-weight: 700;
     src: url('/fonts/JosefinSans-Bold.ttf') format('truetype'), 
    /* Super Modern Browsers */
     url('/fonts/JosefinSans-Bold.woff2') format('woff2');
     font-display: swap;
}

 @font-face {
     font-family: 'Tilda Sans';
     font-style: normal;
     font-weight: 500;
     src: url('/fonts/tilda-sans_regular.ttf') format('truetype'), 
    /* Super Modern Browsers */
     url('/fonts/tilda-sans_regular.woff') format('woff'), 
    /* Pretty Modern Browsers */
     url('/fonts/tilda-sans_regular.woff2') format('woff2');
    /* Safari, Android, iOS */
    font-display: swap;
}

img { width: 100%;height:100%;}
*{box-sizing: border-box;}

html {scroll-behavior: smooth;
  /* min-height: calc(100svh - 6rem);
  mobile viewport bug fix
  min-height: -webkit-fill-available; */
   margin: 0; padding: 0; border: 0;
}
body {width: 100vw; font-size:16px;
  height: 100vh;
  margin: 0; padding: 0; border: 0;
    box-sizing: border-box;overflow-x: hidden;overflow-y: auto;
      text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


        [aria-hidden="true"] {
            display: none;
        }
  
        [aria-hidden="false"] {
            display: block;
        }
.noscroll {overflow: hidden;}
.scroll {overflow-y: scroll;}
/************************************************************* TYPOGRAPHIC STYLES **************************************************************/
 h1, h2, h3, h4, h5, h6, .menu__item {
     font-family: 'Josefin Sans', 'Gill Sans Nova', 'Gill Sans SemiBold', -apple-system, BlinkMacSystemFont, "Segoe UI",
 Helvetica, Arial, sans-serif,
 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    /* color: #00a88f;
     */
     text-transform: uppercase;
     font-weight: 700;
     /* text-align: center;
     vertical-align: baseline; */
     /* padding: calc(4vh + 2em) 0; viewport change in vw + font size */

}

/* html {
  font-size: 16px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 8 * ((100vw - 320px) / 880));
  }
}
@media screen and (min-width: 1200px) {
  html {
    font-size: 24px;
  }
} */
h1 {
  font-size: 2.0736rem;
}
h1 {
  font-size: 27.648px;
}
@media screen and (min-width: 320px) {
  h1 {
    font-size: calc(27.648px + 26.352 * ((100vw - 320px) / 880));
  }
}
@media screen and (min-width: 1200px) {
  h1 {
    font-size: 54px;
  }
}
h2 {
  font-size: 1.728rem;
}
h2 {
  font-size: 27.648px;
}
@media screen and (min-width: 320px) {
  h2 {
    font-size: calc(27.648px + 26.352 * ((100vw - 320px) / 880));
  }
}
@media screen and (min-width: 1200px) {
  h2 {
    font-size: 54px;
  }
}
h3 {
  font-size: 1.44rem;
}
h3 {
  font-size: 23.04px;
}
@media screen and (min-width: 320px) {
  h3 {
    font-size: calc(23.04px + 12.96 * ((100vw - 320px) / 880));
  }
}
@media screen and (min-width: 1200px) {
  h3 {
    font-size: 36px;
  }
}


p, a, li, address, .is-primary span {
font-family:'Tilda Sans' ,'LMSans10', 'Avenir Medium',  -apple-system, BlinkMacSystemFont, "Segoe UI",
 Helvetica, Arial, sans-serif,
 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: clamp(1.5rem, 0.741vw + 0.657rem, 1rem);
line-height: clamp(2rem, 1.519vw + 0.785rem, 2rem);
     color: #000000;
     font-weight: 500;
     padding: 0;
     margin: 0;
     vertical-align: baseline;
     word-break: break-all;
    /* Non standard for webkit */
     word-break: break-word;
     -webkit-hyphens: auto;
     -moz-hyphens: auto;
     -ms-hyphens: auto;
     hyphens: auto;
}
/* p, li, a {
     margin-top: calc((1.25rem - 1rem) + 1.25rem*2);
     margin-bottom: calc((1.25rem - 1rem) + 1.25rem*2);
} */
 @media screen and (min-width: 36rem) {
     p, li, a {

    }
}
 @media screen and (min-width: 72rem) {
     p, li, a {

    }
}
 ol, ul, li {
     list-style-type: none;
     /* margin: 0.898725rem 0; */
     padding: 0;
     margin: 0;
}

.dots li::before {
  content: "» ";
  font-size: 150%;
  line-height: inherit;
  font-weight: 700;
  color: #BB0000; /* or whatever color you prefer */
}

 a, a:active, a:link, a:visited {
     text-decoration: none;
     -webkit-text-decoration-color: ;
    /* Safari */
     text-decoration-color: inherit;
     cursor: pointer;
}
 a:hover {
     color: #fff;
     text-decoration: none;
}

 @media screen and (min-width: 36rem) {

    }
}
 @media screen and (min-width: 72rem) {

}

/************************************************************* HEADER **************************************************************/

header {
width: 100%;
height: auto;
	  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

nav {
	height: clamp(3rem, 1.481vw + 2.815rem, 4rem);
	width: 100vw;
	margin: 0;
	display: flex;
	align-items: last baseline;
	position: fixed;
	transform: translateZ(0); /* iOS safari issue */
	flex-direction: row;
	justify-content: space-between;
	background-color: #ffffff;
	z-index: 4;
	padding-top: clamp(0.5rem, 0.741vw + 0.452rem, 1rem);
	padding-left: 5vw;
	padding-right: 5vw;
	border-bottom: 1px solid #cccccc;
}

#logo {
	width: 50vw;
	height: clamp(0.7rem, 3.9vw + -0.434rem, 2rem);
	margin: 0;
	align-self: center;
}

#language {width: 25vw;padding: 0 0 0 12.5vw;height: clamp(0.7rem, 3.9vw + -0.434rem, 2.85rem);background-color: inherit;align-self: center;}

#language p {
 width: 100%;
 line-height: clamp(0.7rem, 3.9vw + -0.434rem, 2.85rem);
 text-align: center;
 margin: 0;
 padding: 0;
}

#toggle {
  position: absolute;
  width: 12.5vw;
  z-index: 1;
  opacity: 0;
  cursor: pointer;
  height: clamp(0.7rem, 3.9vw + -0.434rem, 2.85rem);
}

#toggle p::before{
    position: absolute;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  content: "";
  transform: rotate(180deg) scale(0.75);
}

#toggle:not(:checked) ~ #toggle p::before {
  transform: rotate(0deg) scale(0.75);
}

#toggle:checked ~ ul {
  visibility: hidden;
  opacity: 0;
}

#toggle:not(:checked) ~ ul {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}


#language ul {
  background: #ffffff;
  overflow: hidden;
  text-align: center;
  transition: all 0.2s ease-out;
  width: 12.5vw;
  margin: 1px auto 0 auto;
  border: 1px solid #cccccc;
  border-top: 1px solid #ffffff;
}
#language ul li {
  position: relative;
  line-height: 1.5;
  width: 100%;
  margin: 0.25rem 0 0.25rem 0;
  background: inherit;
}

#language ul li a {
display: block;
width: 100%;
}

#language ul li:hover,
#language ul li:hover a{
  background: #000000;
  color: #ffffff;
}

#hamburger_menu {width: 25vw;height: clamp(0.7rem, 3.9vw + -0.434rem, 2.85rem);display: flex;align-items: center;/* padding-left: 32px; */align-self: center;}

#menu__toggle {
  opacity: 0;
  width: 100%;
  height: 100%;
}

#menu__toggle:checked ~ .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked ~ .menu__btn > span::before {
  top: 0;
  transform: rotate(0);
}
#menu__toggle:checked ~ .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  visibility: visible;
  left: 0;
}

.menu__btn {
position: fixed;
	transform: translateZ(0); /* iOS safari issue */
height: 2rem;
width: 2rem;
cursor: pointer;
z-index: 1;
}

.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;
  top: 1rem;
  width: 100%;
  height: 2px;

  background-color: #000000;

  transition-duration: .5s;
}
.menu__btn > span::before {
  content: '';
  top: -8px;
}
.menu__btn > span::after {
  content: '';
  top: 8px;
}

.menu__box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top:0;
  left: -100vw;
  overflow-x: hidden;
    overflow-y: auto;
  min-width: 300px;
  max-width: 30vw;
  height: 100vh;
 margin: clamp(3rem - 2px, 1.481vw + 2.815rem - 2px, 4rem - 2px) 0 24px 0;
  padding: 0 0 54px 0;

  list-style: none;
  background-color: #ffffff;
  border-right: 3px solid #cccccc;
  border-top: 1px solid #ffffff;
  transition-duration: .5s;
}

.menu__box::-webkit-scrollbar { width: 0 !important }
.menu__box {overflow: -moz-scrollbars-none; -webkit-scrollbar;
-ms-overflow-style: none; }
.menu__box::-webkit-scrollbar {
  width: 0px;
}

.menu__box li p {
   text-align: center;
   margin: 0 auto;
}

.menu__item {
  display: block;
  padding: 2px 3.125vw 1px 3.25vw;

  text-decoration: none;
}
.menu__item:hover, .menu__box li p a:hover {
  background-color: #000000;
  color:#ffffff;
}

.menu__box li a {
font-size: 16px;
line-height: 1.5;
}


/* ================= ARROW ==================== */

#menu__toggle:checked ~ .down-arrow {
  position: absolute;
  top: calc(20vh - 80px);
  left: calc(20% - 14px);
  width: 0;
  height: 30px;
  border: 2px solid;
  border-radius: 2px;
  animation: jumpInfinite 1.5s 2;
  animation-delay: 450ms;
  z-index: 4;
  opacity:0;
}

.down-arrow {
opacity:0;
}

.down-arrow:after {
  content: " ";
  position: absolute;
  top: 12px;
  left: -10px;
  width: 16px;
  height: 16px;
  border-bottom: 3px solid;
  border-right: 3px solid;
  border-radius: 3px;
  transform: rotateZ(45deg);
}

@keyframes jumpInfinite {
  0% {
    margin-top: 0;
    opacity:0;
  }
  50% {
    margin-top: 20px;
        opacity:1;
          color: tomato;
  }
  100% {
    margin-top: 0;
    opacity: 0;
  }
}

 .social {
  align-self: flex-end;
  order: 2;
     width: 50%;
     margin: 0 auto;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-align-items: center;
     -ms-align-items: center;
     align-items: center;
     justify-content: space-evenly;
}
 .social a {
     max-width: 65px;
     margin: 0 auto;
     display: inline-block;
}
 .social a img {
    width: 2vw;
    max-width: 65px;
    min-width: 48px;
    height: auto;
    padding: 10px;
}

#menu_footer {
     width: 90%;
     margin: 0 auto 6rem auto;
  align-self: flex-end;
  order: 1;
  }

.modal {
    position: fixed;
    transform: translateZ(0); /* iOS safari issue */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    background-color: #ffffff;
    background-image: url(/media/minerva.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: right;
  background-attachment: fixed;
    overscroll-behavior: none;
      touch-action: none;
      margin: 0;
      padding: 0;
      border: 0;
      width: 100vw;
      height: 100vh;
}

.modal-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
  max-width: 80vw;
  margin: 54px auto 108px auto;
    max-height: calc(80vh - constant(safe-area-inset-bottom)); /* Fallback for older iOS versions */
    max-height: calc(80vh - env(safe-area-inset-bottom)); /* Latest syntax for modern iOS versions */
	background-color: #fff;
	display: flex;
	flex-direction: column;
	border: 1px solid #dddddd;
	animation: fadeIn 2s;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.modal-container-header {
	background-color: #000000;
	padding: 16px 32px;
	border-bottom: 1px solid #ddd;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.modal-container-title {
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: 1;
	font-weight: 700;
	font-size: 1.125;
	color: #ffffff;
	svg {
		width: 32px;
		height: 32px;
		color: #750550;
	}
}

.modal-container-body {
	padding: 24px 32px 51px;
	overflow-y: scroll;
}

.rtf {
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-weight: 700;
	}

	h1 {
		font-size: 1.5rem;
		line-height: 1.125;
	}

	h2 {
		font-size: 1.25rem;
		line-height: 1.25;
	}

	h3 {
		font-size: 1rem;
		line-height: 1.5;
	}

	& > * + * {
		margin-top: 1em;
	}

	& > * + :is(h1, h2, h3) {
		margin-top: 2em;
	}

	& > :is(h1, h2, h3) + * {
		margin-top: 0.75em;
	}

	ul,
	ol {
		margin-left: 20px;
		list-style-position: inside;
	}

	ol {
		list-style: numeric;
	}

	ul {
		list-style: disc;
	}
}

.modal-container-footer {
	padding: 20px 32px;
	display: flex;
	margin:0;
	flex-direction: row;
	align-items: center;
justify-content: space-between;
	border-top: 1px solid #ddd;
	gap: 12px;
	position: relative;
	&:after {
		content: "";
		display: block;
		position: absolute;
		top: -51px;
		left: 24px;
		right: 24px;
		height: 50px;
		flex-shrink: 0;
		background-image: linear-gradient(to top, rgba(#fff, 0.75), transparent);
		/* pointer-events: none; */
	}
}

.modal-container-footer a:hover {color: #cccccc;}
.button {
	cursor: pointer;
	transition: 0.15s ease;

	&.is-ghost {
		&:hover,
		&:focus {
			background-color: #dfdad7;
		}
	}
}
.hover_button:hover {
			background-color:#860000; /* #4a0433 */
		}

.is-primary span {
	padding: 6px 20px;
	color: #ffffff;
	background-color:#BB0000; /* #750550 */
	border: 0;
	font-weight: 600;
	cursor: pointer;
	transition: 0.15s ease;
	display: inline-block;
}

#decline {
display: none;
	 }

#decline:checked+.modal {
display: none;
opacity:0;
}

#landing {
  width: 100%;
  height: auto;
  overflow: hidden;
  display: grid;
  grid-template-columns: 10vw 20vw 20vw 20vw 20vw 10vw;
  grid-template-rows: 12.5vh 12.5vh 12.5vh 12.5vh 12.5vh 12.5vh 12.5vh 12.5vh 12.5vh 12.5vh 12.5vh 12.5vh;
}

#guillemets {
grid-area: 1 / 1 / span 5 / span 2;
z-index: 1;
}

#guillemets img {

}

#globus {
overflow: hidden;
grid-area: 1 / 3 / span 12 / span 4;
z-index: 2;
}

#globus img {position: relative;top: -34%;width: 135%;height: 135%;margin: 0 auto 0 0;}

#landing-text {
width: auto;
grid-area: 6 / 2 / span 2 / span 3;
margin: 32px auto auto 0;
background-color: #ffffff;
vertical-align: baseline;
text-align: left;
z-index: 3;
}


#landing-text h3 {
font-size: clamp(0.7rem, 3.9vw + -0.434rem, 2.85rem);
display: inline-block;
line-height: 1;
margin: 0;
padding: 0;
}

#landing-text h1 {
font-size: clamp(1.125rem, 5.35vw + -0.434rem, 4.5rem);
line-height: 1; 
margin: 0;
padding: 0;
}


/* ================ CONTENT STYLING ================== */

/* COBB RED PANTONE #BB0000 */
.red {color:#BB0000}

.blackpanel {
width: 100%;
height:37.5vh;
margin: 12.5vh 0 0 0;
color: #ffffff;
background-color: #000000;
font-style: uppercase;
grid-area: 9 / 1 / span 2 / span 7;
z-index: 1;
}

#the_hub {
margin-top: 0;
}

.blackpanel h2 {
margin:0 10vw;
padding: 64px 0 0 0;
}

#one h2, .left h2 {
color: #BB0000;
  margin: 0;
  padding: 0;
  font-size: clamp(2rem, 7.39vw + 0.088rem, 6rem);
}

#head_hub {
	margin: 0 10vw 0 10vw;
z-index: 2;
}

#head_hub h2 {
background-color: #ffffff;
margin:0;
padding:0;
}


.head_text {
width: 60vw;
display: flex;
	flex-direction: row;
margin: 0 10vw 0 30vw;
	align-items: flex-end;
}

.head {
display: flex;
	flex-direction: row;
	margin: 12.5vh 10vw 0 10vw;
	align-items: flex-start;
}

.head .dots {
display: flex;
flex-direction: row;
margin: 12.5vh 10vw 0 10vw;
justify-content: space-evenly;
}

.red_nmb {
font-weight: 700;
color: #BB0000;
position: relative;
left: 0;
margin: 0.5rem 2vw 0 0;
font-family: monospace;
display: flex;
justify-content: flex-end;
}

.red_link {
color: #BB0000;
position: relative;
left: 0;
padding: 0 2vw 0 0;
display: flex;
justify-content: flex-end;
}

.left {
width: 20vw;
order: 1;
}

.right {
width: 60vw;
order: 2;
}

.fifty {
max-width: 48vw;
display: flex;
align-items: flex-start;
flex: 1;
justify-content: space-between;
}

.split {
justify-content: flex-start;
}

.text {
width: 60vw;
height: auto;
flex-direction: column;/* padding-left: 10vw; */
}

.text p {

}

.blacklink {
display: inline-block;
width: 192px;
height: auto;
padding: 3px 12px 1px 12px;
background-color: #000000;
text-align: center;
vertical-align: middle;
margin: 4.1vh auto 8.4vh 0;
     font-family: 'Josefin Sans';
color: #ffffff;
     text-transform: uppercase;
     font-size: 80%;
line-height: 2;
align-self: flex-end;
}

#section-1, #section-2, #section-3, #section-4, #section-5, #section-6, #section-7, #section-8, #section-9, #section-10 
{
width: 100%;
position: relative;
top: -6.25vh;
/* display: none; /* screen resder issue */
visibility: hidden; /* screen reader issue */
}

    .scroll-to-top {
    display: inline-block;
	position: fixed;
	transform: translateZ(0); /* iOS safari issue */
      width: auto;
      height: auto;
      bottom: 4.2vh;
      right: 5vw;
padding: 3px 12px 1px 12px;
      background-color: #000000;
      color: #fff;
      cursor: pointer;
           font-size: 80%;
                text-transform: uppercase;
                line-height: 2;
                vertical-align: middle;
                text-align: center;
    }

footer {
display: flex;
flex-direction: column;
align-items: center;
justify-content:space-evenly;
background-color: #000000;
padding: 4.2vh 10vw;
margin: 12.5vh auto 0 auto;
}

footer p, footer a {
color: #ffffff;
}

/************************************************************* RWD BEAKPOINTS **************************************************************/

/* Extra small devices (phones) in portrait */
@media (max-width: 575.98px) and (orientation: portrait) {
  /* CSS rules for extra small devices in portrait */
}

/* Extra small devices (phones) in landscape */
@media (max-width: 575.98px) and (orientation: landscape) {
  /* CSS rules for extra small devices in landscape */
}

/* Small devices (tablets) in portrait */
@media (min-width: 576px) and (max-width: 767.98px) and (orientation: portrait) {
  /* CSS rules for small devices in portrait */
}

/* Small devices (tablets) in landscape */
@media (min-width: 576px) and (max-width: 767.98px) and (orientation: landscape) {
  /* CSS rules for small devices in landscape */
}

/* Medium devices (laptops, small desktops) in portrait */
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {
  /* CSS rules for medium devices in portrait */
}

/* Medium devices (laptops, small desktops) in landscape */
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: landscape) {
  /* CSS rules for medium devices in landscape */
}

/* Large devices (desktops) in portrait */
@media (min-width: 992px) and (max-width: 1199.98px) and (orientation: portrait) {
  /* CSS rules for large devices in portrait */
}

/* Large devices (desktops) in landscape */
@media (min-width: 992px) and (max-width: 1199.98px) and (orientation: landscape) {
  /* CSS rules for large devices in landscape */
}

/* Extra large devices (large desktops) in portrait */
@media (min-width: 1200px) and (orientation: portrait) {
  /* CSS rules for extra large devices in portrait */
}

/* Extra large devices (large desktops) in landscape */
@media (min-width: 1200px) and (orientation: landscape) {
  /* CSS rules for extra large devices in landscape */
}

/* PHABLET */

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

.modal-container {
  max-width: 80vw;
  margin: 54px auto 108px auto;
  padding: 0;
    max-height: calc(80vh - constant(safe-area-inset-bottom)); /* Fallback for older iOS versions */
    max-height: calc(80vh - env(safe-area-inset-bottom)); /* Latest syntax for modern iOS versions */
	background-color: #fff;
	display: flex;
	flex-direction: column;
	border: 1px solid #dddddd;
	animation: fadeIn 2s;
	position: relative;
}

.modal-container-footer {
flex-direction: column;
}

#language {
width: 25vw;
padding: 0;
}

#logo {
width: 50vw;
}

#hamburger_menu {
width: 25vw;
}

#landing {
  width: 100%;
  height: auto;
  overflow: hidden;
  grid-template-rows: 20vh 20vh 20vh;
}

.menu__box {
min-width: 100vw;
max-width: 100vw;
}

.menu__box a {
font-size: clamp(3rem);
line-height: clamp(4.5rem);
  background-color: #ffffff;
  color: #000000;
}

.menu__item, .menu__item:hover {
  background-color: #000000;
  color: #ffffff;
}

#guillemets {
grid-area: 1 / 1 / span 2 / span 2;
z-index: 1;
}

#guillemets img {
width: 100%;
height: 31vh;
}

#globus {
overflow: hidden;
grid-area: 1 / 3 / span 3 / span 4;
z-index: 2;
}

#globus img {

}

#landing-text {
position: relative;
top: 15vh;
width: auto;
height: clamp(1.775rem, 9.443vw + -0.434rem, 7.438rem);
grid-area: 2 / 2 / span 1 / span 3;
margin: 0 auto;
padding:0.2rem 0.1rem;
background-color: #ffffff;
vertical-align: baseline;
text-align: left;
z-index: 3;
}

.head_text {
margin: 0 auto;
width: 70vw;
}

.blackpaner {

}

.blackpanel h2 {
float: none;
width: 70vw;
margin:0 auto;
padding: 64px 0 0 0;
}

.head {
flex-wrap: wrap;
    width: 70vw;
    margin: 12.5vh auto 0 auto;
    flex-direction: column;
}

.fifty, .left, .right {
display: flex;
justify-content: flex-start;
    flex-direction: column;
}

.red_link {
left: 0;
width: auto;
justify-content: flex-start;
}

.text {
width:70vw;
height: auto;
padding: 0;
flex-direction: column;

}

#head_hub, .diss {display: none;}
}

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

}

@media screen and (max-height: 420px) {
.modal-container { max-height: 280px;margin: 24px auto 108px auto;}
.modal-container-footer {flex-direction: row;}

#landing {
grid-template-rows: 33vh 33vh 33vh;
}

#globus {
    overflow: hidden;
    grid-area: 1 / 3 / span 3 / span 4;
    z-index: 2;
}

#globus img {
    position: relative;
    top: -60%;
    left: -15%;
    width: 200%;
    height: 200%;
    margin: 0 auto 0 0;

#guillemets img {width: auto; height: auto;}

#landing-text {
grid-area: 3 / 2 / span 1 / span 3;
top: 0;
}

}
@media screen and (max-width: 768px) and (min-height: 640px) {

#landing{
  grid-template-rows: 25vh 25vh;
}
}

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

}

    /* MOBILE PORTRAIT */
@media screen and (max-width: 450px) and (min-height: 800px) {

#landing {
  width: 100%;
  height: auto;
  overflow: hidden;
  grid-template-rows: 15vh 20vh 15vh;
}

}
+41 79 815 5967
Rhea