/* load fonts in here  */

@font-face {
  font-family: "CalibreWeb-Regular";
  src: url("../fonts/Calibre/CalibreWeb-Regular.eot"),
  url("../fonts/Calibre/CalibreWeb-Regular.woff") format("woff"),
  url("../fonts/Calibre/CalibreWeb-Regular.otf") format("opentype");

}

@font-face {
  font-family: "Cambon-ExtraBold";
  src: url("../fonts/Cambon/Cambon-ExtraBold.eot"),
  url("../fonts/Cambon/Cambon-ExtraBold.woff") format("woff"),
    url("../fonts/Cambon/Cambon-ExtraBold.woff2") format("woff2"),
  url("../fonts/Cambon/Cambon-ExtraBold.otf") format("opentype");

}


/* made using https://type-scale.com/ */


/***************************************** setting the base size */

html {
  font-size: 12px;
  -webkit-font-smoothing: subpixel-antialiased;
}

@media only screen and (min-width: 996px) {
        html {font-size: 14px;}
}
/*
@media only screen and (min-width: 1200px) {
        html {font-size: 16px;}
}
*/

/*************************************** type styles */

body {
  background-color: #002579;
  font-family: "CalibreWeb-Regular"; 
  font-weight: 400;
  line-height: 1.45;
  color: white;
  
}

h1, h2, h3, h4, h5 {
  font-family: "Cambon-ExtraBold"; 
  margin: 0em 0 1.2em 0;
  line-height: 1.15;
  font-weight: 600;
}

h1 {font-size: 1.8rem;}
h2 {font-size: 1.6rem;}
h3 {font-size: 1.4rem;}
h4 {font-size: 1.2rem;}
h5 {font-size: 1rem; line-height: 1.45;}
h6 {font-size: 0.7rem;}
p {font-size: 1.25rem; margin-bottom: 1.25em; color: #e6edfc;}
.intro { line-height: 1.45;  }
small, .text_small {font-size: 0.75em;}
.jumbo {font-size: 3em; margin-top: 50px; margin-bottom: 100px;}


@media only screen and (min-width: 768px) {
        h1 {font-size: 3rem; margin-top: 0;}
        h2 {font-size: 2.4rem;}
        h3 {font-size: 2.0rem;}
        h4 {font-size: 1.6rem;}
        h5 {font-size: 1rem; }
        h6 {font-size: 0.7rem;}
        p {font-size: 1.3rem;}
        .intro { line-height: 1.45; }
        small, .text_small {font-size: 0.75em;}
        .jumbo {font-size: 8em; margin-top: 10%;}
}


@media only screen and (min-width: 996px) {
        h1 {font-size: 3rem; margin-top: 0;}
        h2 {font-size: 2.4rem;}
        h3 {font-size: 2.0rem;}
        h4 {font-size: 1.6rem;}
        h5 {font-size: 1rem; }
        h6 {font-size: 0.7rem;}
        p {font-size: 1.3rem;}
        .intro { line-height: 1.45; }
        small, .text_small {font-size: 0.75em;}
        .jumbo {font-size: 10em; margin-top: 10%;}
}


@media only screen and (min-width: 1280px) {
        h1 {font-size: 4.5rem; margin-top: 0;}
        .jumbo {font-size: 16em;margin-top: 0%; margin-bottom: 0;}
}


p a:link, p a:visited, p a:active,
li a:link, li a:visited, li a:active,
h4 a:link, h4 a:visited, h4 a:active, 
h2 a:link, h2 a:visited, h2 a:active,
h1 a:link, h1 a:visited, h1 a:active
{
  text-decoration: none;
  transition: all 0.5s ease;
  color: white;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid rgba(255, 231, 63, 0.5 );
  background-color: none;
}

 p a:hover, li a:hover, h4 a:hover, h2 a:hover, h1 a:hover 

 {
  border-bottom: 1px solid transparent;
}


.btn {
    text-align: left;
    width: 100%;
    border-radius: 0px;
    border-top: 1px solid rgba(255,231,63,0.5);
  }

.btn h4 {
  margin: 1.2rem 0 0 0;
}

.btn-link {
    transition: color 0.5s ease;
    text-decoration: none;
}

 .btn-link:hover, .btn-link:active, .btn-link:focus {
    text-decoration: none; 
}


 .btn-link:hover {
    color:  white; 
}