html {
  scroll-padding-top: 5rem;
}

/* GLOBAL STYLES */

.link{
  text-decoration:none;
  text-underline:none;
  border-bottom:2px dotted #28a745;
}

.link:hover{
  color: #28a745 !important;
  transition: color 0.5s ease;
}

body {
  background: #EEEEEE;
  background: linear-gradient(180deg, rgba(238, 238, 238, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(238, 238, 238, 1) 100%);
}

.btn{
  padding:10px 15px 7px 15px !important;
}

.navbar, .card{
  box-shadow:0 0.125rem 0.25rem rgba(0, 0, 0, 0.1) !important;
}

.navbar-brand img{
  height:30px;
  width:auto;
}

.navbar-nav{
  margin-left: auto;
}

.navbar-nav .btn{
  margin-right:10px;
}

.navbar-nav .nav-link{
  color:#000000;
  font-size:18px;
}

.navbar-nav .btn{
  font-size: 20px;
}

.navbar-nav .nav-link.active{
  color:#17a2b8;
}

.navbar.bg-light {
  border-color: #07406b;
}

.card-header{
  background-color:#ffffff;
}

/* COLORS */

.navy{color:#07406b;}
.blue{color:#17a2b8;}
.red{color:#dc3546;}
.green{color:#28a745;}
.yellow{color:#fec106;}

h1, h2, h4{
  color:#07406b;
}

hr {
  border-top: 2px solid #fec106;
  opacity:1 !important;
}

/* HERO / CONTENT /
-------------------------------------------------- */

.pagetop{
  margin-top:120px;
}

.hello{
  z-index:100;
  position:absolute;
  width:100%;
  margin-left:-13px;
  overflow:hidden;
}

.hello img{
  width: 90%;
  height:auto;
}

.hello .row{
  width:80vw;
  padding-top:5px;
  margin-left:auto;
  margin-right:auto;
}

.hello h1, .hello h2, .hello h4{
  color:#ffffff;
  text-shadow:2px 2px 3px rgba(0,0,0,0.3);
}

canvas{ 
   width:auto;
   height:auto;
   background-color:transparent;
   position: relative;
   top:0;
   margin-left:-11px;
   z-index:1000 !important;
}

.hero{
    margin-top:60px;
    height:85vh;
    background:linear-gradient(-70deg, rgba(7,64,107,0) 0%, rgba(23,162,184,0.2) 25%, rgba(7,64,107,0.7) 75%, rgba(7,64,107,0.9) 100%),
    url("../img/hero.png") no-repeat;
    background-position:center center;
    background-size:cover;
    color:#ffffff;
    background-color:#eee;
    top: 0px; 
    left: 0px; 
    z-index:-1;
    overflow:hidden;
}

.contactlogo img{
  width:50%;
  height:auto;
}

.downbutton{
  padding:8px 0px 2px 0px;
  height:55px;
  text-align:center;
  background-color:#07406b;
}

.downbutton a, .downbutton a:hover{
  color:#ffffff;
  text-decoration: none;
}

.divider {
  margin: 0 0; /* Space out the Bootstrap <hr> more */
  height:50px;
}

.principle{
  text-align: center;
  border-radius:50%;
  /*border:2px solid #000;*/
  width:150px;
  height:150px;
  overflow:hidden;
  margin-left:auto;
  margin-right:auto;
  box-shadow:0 0.125rem 0.25rem rgba(0, 0, 0, 0.1) !important;
}

.principle img{
  width:100%;
  height:auto;
}

.header{
  width:80%;
  text-align: center;
  margin:auto;
}

.featurette_img{
  text-align:center;
}
.featurette_img img{
  width:100%;
  height:auto;
  border-radius:0.375rem;
  box-shadow:0 0.125rem 0.25rem rgba(0, 0, 0, 0.1) !important;
}

iframe{
  border-radius:0.375rem;
  box-shadow:0 0.125rem 0.25rem rgba(0, 0, 0, 0.1) !important;
}

/* FOOTER */

.footer{
    background:linear-gradient(-70deg, rgba(7,64,107,0) 0%, rgba(23,162,184,0.2) 25%, rgba(7,64,107,0.8) 75%, rgba(7,64,107,1) 100%),
    url("../img/footer.png") no-repeat;
    background-position:center center;
    background-size:cover;
    padding:50px 50px 35px 50px;
    color:#ffffff;
    background-color:#eee;
    top: 0px; 
    left: 0px; 
}

.footer p{
  font-size:18px;
  text-shadow:2px 2px 3px rgba(0,0,0,0.3);
}

.footerlink{
  color:#ffffff;
  text-decoration:none;
  border-bottom:2px dotted #ffffff;
  transition: border-bottom 1s ease, color 1s ease;
}

.footerlink:hover{
  color: #ffffff;
  border-bottom:2px solid #008256;
  text-decoration:none;
}

.footerLogo{
  text-align:right;
}

.footerLogo img{
  width:250px;
  height:auto;
}

.footer blockquote a, .footer cite{
  color:#ffffff;
  text-shadow:2px 2px 3px rgba(0,0,0,0.3);
}

.footer blockquote a, .footer blockquote a:hover{
  text-decoration:none;
}