@font-face { 
    font-family: DMSans; 
    src: url('./library/fonts/DMSans-Regular.ttf') format("truetype"); 
    font-weight: normal; 
}
@font-face { 
    font-family: DMSans; 
    src: url('./library/fonts/DMSans-Medium.ttf') format("truetype"); 
    font-weight: 500; 
}
@font-face { 
    font-family: DMSans; 
    src: url('./library/fonts/DMSans-Bold.ttf') format("truetype"); 
    font-weight: 700; 
}
@font-face { 
    font-family: CGaramond; 
    src: url('./library/fonts/CormorantGaramond-Regular.ttf') format("truetype"); 
    font-weight: normal; 
}


:root {
  /*FONT SIZE*/
  --px12: 0.75rem;
  --px14: 0.875rem;
  --px15: 0.938rem;
  --px16: 1rem;
  --px17: 1.063rem;
  --px18: 1.125rem;
  --px19: 1.188rem;
  --px20: 1.25rem;
  --px21: 1.35rem;
  --px22: 1.375rem;
  --px23: 1.438rem;
  --px24: 1.5rem;
  --px25: 1.563rem;
  --px26: 1.625rem;
  --px27: 1.688rem;
  --px28: 1.75rem;
  --px30: 1.875rem;
  --px31: 1.938rem;
  --px32: 2rem;
  --px34: 2.125rem;
  --px35: 2.188rem;
  --px36: 2.25rem;
  --px37: 2.313rem;
  --px38: 2.375rem;
  --px40: 2.5rem;
  --px42: 2.625rem;
  --px45: 2.813rem;
  --px47: 2.938rem;
  --px48: 3rem;
  --px49: 3.063rem;
  --px50: 3.125rem;
  --px52: 3.25rem;
  --px55: 3.438rem;
  --px58: 3.625rem;
  --px60: 3.75rem;
  --px62: 3.875rem;
  --px65: 4.063rem;
  --px69: 4.313rem;
  --px72: 4.5rem;
  --px78: 4.875rem;
  --px83: 5.188rem;
  --px84: 5.25rem;
  --px85: 5.313rem;
  --px90: 5.625rem;
  --px92: 5.75rem;
  --px95: 5.938rem;
  --px100: 6.25rem;


  --CGaramond: "CGaramond";
  --DMSans: "DMSans";

  --BoxShadow: 0 1.375rem 1.875rem rgba(0,0,0,.16);
  

  /*COLOR*/
  --Black: #1D1C22;
  --Red: #FF4E4E;
  --Blue: #174164;
  --Orange: #CA5162;
  --DarkGray: #222D3B;
}

html { font-size: 0.8340vw; }

body { font-size:var(--px20); background-image: url('./images/body-bg.jpg'); background-size: cover; background-position: center; color: #fff; font-family: var(--DMSans); font-weight: normal; position: relative; }

.container { padding: 0 1.25rem; margin: 0 auto; }

strong { font-weight:700; }

.wrap { margin: 0 auto; max-width:90.188rem; }

img { max-width:100%; width:auto; display:block; }

a { text-decoration:none; transition: .5s; }

p { line-height:var(--px34); }



header#header { padding-top:2.581rem; }

header#header figure { margin: 0; max-width:21.375rem; }

section.main { font-size: var(--px20); padding: 4rem 0 0rem; }

section.main .text-block {  }

section.main h1 { font-size:var(--px84); line-height:var(--px83); font-family:var(--CGaramond); font-weight:normal; text-transform:uppercase; margin-bottom: 1.35rem; max-width: 36.563rem; position: relative; z-index: 100; }

section.main p { margin:0 0 0rem; max-width: 37.5rem;  margin-bottom: 2.1rem; position: relative; z-index: 100; }

section.main a { display:inline-block; font-size:var(--px20); line-height:var(--px26); font-weight:500; background-color: var(--Blue); color: #fff; border: .125rem solid #2D77A7; padding: .969rem 1.813rem; border-radius: 0.313rem; 
    position: relative; z-index: 100; }

section.main a:hover { background-color:#000; }

section.site-info { padding: 4.2rem 0 2.7rem; position: relative; z-index: 10; }

section.site-info .flex {  gap: 3rem 7.75rem; }

section.site-info .item {  }

section.site-info .item p { position:relative; padding-left:2.563rem; }

section.site-info .item p span { position:absolute; top:0.3rem; left:0; }

section.site-info .item p a { color:#fff; }

section.site-info .item p a:hover { color:#a3d3eb; }

.marker svg { width:1.125rem; }
.phone svg { width:1.419rem; }
.fax svg { width:1.469rem; }
.email svg { width: 1.569rem; }

#footer { font-size:var(--px20); padding: 2.7rem 0 0.938rem; background-color: #001A30; }

#footer p { line-height:var(--px34); margin-bottom: 2rem; }

#footer .flex { justify-content:space-between; }

#footer a { color:#fff; }

#footer a:hover { color:#A3D3EB; }

figure.atty-img { max-width:41.75rem; }

figure.atty-img img { margin:0;  }

main { position:relative; }

@media ( min-width: 992px ) { 

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

    body { min-height:100vh; }

    figure.atty-img { position:absolute; bottom:0rem; right:3.688rem; }

    main:after { content:''; display:block; width:100%;position:absolute; bottom:0; left:0; background-image:url('./images/transparent-blue-short.png'); background-size: cover; background-position: center bottom; 
    background-repeat: no-repeat; height: 24.625rem; }

}

@media ( min-width: 1960px ) {

  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;
    --px34: 2.325rem;
  }

}

@media ( max-width: 991px ) {

    html { font-size:16px; }

    header#header { padding-top: 5rem; }

    body { font-size:var(--px18); }

    section.main h1 { font-size:var(--px52); line-height:var(--px52); }

    section.site-info .item p span { position: relative; top: unset; display: block; }

    section.site-info { text-align:center; }

    section.site-info .item p { padding:0;  }

    section.site-info .item + .item { margin-top:2rem; }

    #footer { text-align:center; font-size:var(--px18); }

    section.main { font-size:var(--px18); }

    header#header figure { margin:0 auto; }

    figure.atty-img { margin: 0 auto 2rem; border-bottom: 0.2rem solid #001A30; }

    section.main { text-align:center; }

}

@media ( max-width: 399px ) { 

    section.main h1 { font-size:var(--px40); }

}