@font-face {
  font-family: RedHatDisplay;
  src: url('./assets/fonts/RedHatDisplay-Light.ttf') format("truetype");
  font-weight: 300;
}
@font-face {
  font-family: RedHatDisplay;
  src: url('./assets/fonts/RedHatDisplay-Regular.ttf') format("truetype");
  font-weight: normal;
}
@font-face {
  font-family: RedHatDisplay;
  src: url('./assets/fonts/RedHatDisplay-Bold.ttf') format("truetype");
  font-weight: 700;
}

:root {
  /*FONT SIZE*/
  --px12: 0.75rem;
  --px14: 0.875rem;
  --px15: 0.938rem;
  --px16: 1rem;
  --px17: 1.063rem;
  --px18: 1.125rem;
  --px20: 1.25rem;
  --px21: 1.35rem;
  --px22: 1.375rem;
  --px23: 1.438rem;
  --px24: 1.5rem;
  --px25: 1.563rem;
  --px27: 1.688rem;
  --px30: 1.875rem;
  --px32: 2rem;
  --px34: 2.125rem;
  --px35: 2.188rem;
  --px36: 2.25rem;
  --px38: 2.375rem;
  --px40: 2.5rem;
  --px42: 2.625rem;
  --px45: 2.813rem;
  --px48: 3rem;
  --px50: 3.125rem;
  --px55: 3.438rem;
  --px60: 3.75rem;
  --px64: 4rem;
  --px65: 4.063rem;
  --px69: 4.313rem;
  --px72: 4.5rem;
  --px84: 5.25rem;
  --px90: 5.625rem;
  --px92: 5.75rem;
  --px95: 5.938rem;
  --px100: 6.25rem;


  --RedHatDisplay: "RedHatDisplay", sans-serif;
  
  

  /*COLOR*/
  --Black: #1D1C22;
  --Red: #9E3131;
  --RedHighlight: #C14545;
  --Blue: #001B33;
  --Orange: #CA5162;
}

html { font-size: 0.833333vw; scroll-behavior: smooth; }

body { padding: 0; margin: 0; font-size: var(--px18); font-family: var(--RedHatDisplay); font-weight: normal; color:#fff; background-image:url('assets/images/body.jpg'); background-size: cover; background-position: center; }

.bottom-flex { align-items:center; }

.contact-details { flex:1; border-top: 1px solid #66AFE3; justify-content:space-between; max-width: 56.625rem; }

.text-uppercase { text-transform:uppercase; }

strong,b { font-weight:700; }

img { object-fit:cover; object-position:center; max-width:100%; width:auto; height:auto; }

picture { display:block; }

#landing { padding: 5rem 0 3rem; }

.logo { margin:0 auto 29.5rem; max-width: 34.75rem; }

.logo a { display:block; }

.bottom-flex { gap: 0 11.5rem; }

.bottom-flex .text { max-width:30.625rem; }

.bottom-flex .text h1 { font-size:var(--px48); text-transform:uppercase; font-weight:300; line-height:1.4em; letter-spacing:.16em; }

.contact-details { padding: 2.125rem 0 0; }

.contact-details .div-block {  }

.contact-details .div-block p { line-height:1.713em; }

@media ( min-width: 992px ) {

	body { min-height: 100vh; }

	#landing {  }

	.container { margin: 0 auto; max-width: 120rem; }
	
	.wrap { margin: 0 auto; max-width: 99.5rem; }

	.flex { display:flex; flex-wrap: wrap; }

}


@media ( min-width: 1901px ) {

  html { font-size:16px; }

}

@media ( min-width: 992px ) and ( max-width: 1399px ) {

  :root {

    /*FONT SIZE*/
    --px12: 0.95rem;
    --px14: 1.075rem;
    --px15: 1.138rem;
    --px16: 1.2rem;
    --px17: 1.263rem;
    --px18: 1.325rem;
    --px20: 1.45rem;
    --px21: 1.55rem;
    --px22: 1.575rem;
    --px28: 1.95rem;
  }

}


@media ( max-width: 991px ) {

	html { font-size: 16px; }

	body { min-height: 100vh; text-shadow: 0 0 1rem rgbba(0,0,0,.5); }

	#landing { padding: 5rem 20px; }

	.logo { margin-bottom:6.5rem; }

	.bottom-flex .text h1 { letter-spacing: 0.03em; font-size: var(--px32); font-weight:normal; margin-bottom:2rem; }

	.bottom-flex { text-align:center; }

	.contact-details .div-block + .div-block { margin-top:2rem; }

}