@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
@import url('https://fonts.googleapis.com/css2?family=Pattaya&display=swap');

html, body{
  height: 100%;
  width: 100%;
  background-color: #92faec;
  font-family: "Poppins", sans-serif;
  color: #2f2f2f;
}
h1, h2, p{
  margin:5px;
}
p{
  font-size: 1.2rem;
}
.navbar{
  padding: .8rem;
}
.navbar-brand img{
  width: 80px;
  height: auto;
}
.navbar-nav li{
  padding-right: 20px;
}
.nav-link{
  font-size: 1.1rem !important;
}
.carousel-inner img{   /* was just width 100%, height 100%  */
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 98%;
}
.carousel-caption{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.carousel-caption h1{
  font-family: "Pattaya";
  font-size: 500%;
  text-shadow: 2px 2px 10px #000; /*-- Ypx vertical, Xpx horizontal, Mpx wide, color --*/
}
.carousel-caption h3{
  font-family: "Pattaya";
  top: 0%;
  transform: translateY(+300%);
  font-size: 200%;
  text-shadow: 2px 2px 10px #000; /*-- Ypx vertical, Xpx horizontal, Mpx wide, color --*/
}
.carousel-caption a:link{
  color: #fff;
}
.carousel-caption a:hover{
  text-decoration: underline;
  color: #fff;
}

.font-tablecontent{
  font-size: 1.1rem;
  font-weight: normal;
}
/* Table Boarder Formatting*/
table.table-bordered{
  border:1px solid grey;
}
table.table-bordered > thead > tr > th{
  border:1px solid grey;
}
table.table-bordered > tbody > tr > td{
  border:1px solid grey;
}
.reports{
  margin: 0;
  padding: 0;
}


/*---Media Queries --*/
@media (max-width: 992px) {

}

@media (max-width: 768px) {
  .navbar{
    padding: .5rem;  }
  p{
    font-size: .8rem;  }

  .carousel-caption{
    position: absolute;
    top: 45%;
    font-family: "Pattaya";  }

  .carousel-caption h1{
    font-size: 300%;
    text-shadow: 2px 2px 10px #000;  }/*-- Ypx vertical, Xpx horizontal, Mpx wide, color --*/

  .carousel-caption h3{
    font-size: 150%;
    transform: translateY(100%);
    text-shadow: 2px 2px 10px #000;  }/*-- Ypx vertical, Xpx horizontal, Mpx wide, color --*/

}

@media (max-width: 576px) {
  .navbar-brand img{
    width: 70px;
    height: auto;
  }
  .carousel-caption h1{
   font-family: "Pattaya";
   font-size: 200%;
   text-shadow: 2px 2px 10px #000; /*-- Ypx vertical, Xpx horizontal, Mpx wide, color --*/
  }
  .carousel-indicators{
   display:none;
 }
 .tablecontent h2{
   font-size: 100% !important;
 }
 .ifrm-weather>h3{
   font-size: 1.1rem;
 }
 .font-tablecontent{
   font-size: .8rem;
 }
}


/*---Firefox Bug Fix --*/
.carousel-item {
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
/*--- Fixed Background Image --*/
figure {
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0!important;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#fixed {
  background-image: url('img/mac.png');
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
    padding: 1rem;
}





/*
100% of device width is 12 columns - the content will shrink
or expand depending on the number of columns allocated to them

Extra small (xs) devices (portrait phones, less than 576px) 
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/