/* ==========================================================================
   Author's custom styles
   ========================================================================== */
html, body {
    height:100%;
    width:100%;
}

body {
    /* font-family: 'Raleway', sans-serif; */
    /* background:#231f20;
    color: #fff; */
    /* padding-top:20px; */
    /* font-size: 17.5px; */
    background-color: #ffffff;
}

#totalLayout {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* height: 100vh; */
    background-color: #d6e3e5;
}
#totalLayoutLogin {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #d6e3e5;
}
.desktop {
    display: block;
    position: relative;
    overflow: hidden;
}
.mobile {
    display: none;
}
.southBay {
    position: absolute;
    bottom: -15px;
    right: -10px;
    width: 350px;
}
.topPart {
    background-color: #ffffff;
    position: absolute;
    width: 100%;
    top: 0;
    padding: 50px 0px 50px 0px;
}
.buttons-width {
    width: 60%;
}
.footer-container {
    position: absolute;
    bottom: 20px;
    width: 100%;
}
.footer-position {
    /* position: absolute;
    bottom: 20px;
    width: 100%; */
}

.footerLogos {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

.fg-logo {
    width: 120px;
}

.footerLogos .logo {
    margin: 24px 16px;
  }
  
  .raleway-bold {
    font-family: "raleway", sans-serif;
    font-weight: 700;
    font-style: normal;
    }
    
    .raleway-black {
    font-family: "raleway", sans-serif;
    font-weight: 900;
    font-style: normal;
    }

    .freight-big-pro-book {
        font-family: "freight-big-pro", serif;
        font-weight: 100;
        font-style: normal;
      }

    .acumin-pro-wide-light {
        font-family: "acumin-pro-wide", sans-serif;
        font-weight: 300;
        font-style: normal;
      }
      .acumin-pro-wide-medium {
        font-family: "acumin-pro-wide", sans-serif;
        font-weight: 500;
        font-style: normal;
        }
.black {
    color: #231f20;
  }
  .bg-img {
    background-image: url("../img/bg-sand.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
  }
  .dark-blue {
    color: #0b2340;
  }
  .teal {
    color: #7da7ae;
  } 
  .blue {
    background-color: #d6e3e5;
  }
  .blue-bg {
    background-color: #d6e3e5;
    position: relative;
    padding-bottom: 2rem;
  }
  .blue-bg-login {
    background-color: #d6e3e5;
    position: relative;
    padding-bottom: 12rem;
  }

  .projectLogoSeaton {
    width: 270px;
    position: absolute;
}
.sm-title {
    font-size: 15px;
    text-align: center;
    letter-spacing: .4rem;
}
.md-title {
    font-size: 17px;
    text-align: center;
    letter-spacing: .4rem;
}
.lg-title {
    font-family: "freight-big-pro", serif;
    font-size: 45px;
    line-height: 40px;
    font-weight: 100;
    font-style: normal;
    text-align: center;
}
.img-main {
    object-fit: cover;
}
.big-login {
    background-color: #7da7ae;
    font-size: 15px;
    font-family: "acumin-pro-wide", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #0b2340;
    letter-spacing: .4rem;
    padding: 5px 130px 10px 130px;
    text-align: center;
    position: absolute;
    bottom: -38px;
    /* top: 13vh; */
}
  .bigtitle {
    font-family: "freight-big-pro", serif;
    font-weight: 100;
    font-style: normal;
    font-size: 55px;
    padding: 40px 0px 10px 0px;
    color: #d62c3b;
}

  .bigtitle-login {
    font-family: "freight-big-pro", serif;
    font-weight: 100;
    font-style: normal;
    font-size: 50px;
    padding: 40px 0px 10px 0px;
    color: #0b2340;
    text-align: center;
}
  .smalltitle-login {
    font-family: "acumin-pro-wide", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 15px;
    padding: 0px 0px 60px 0px;
    color: #0b2340;
    text-align: center;
}

a:link, a:visited, a:hover, a:active {
    color:#fff;
    text-decoration: underline;
}

a:focus, a:hover {
    text-decoration:none;
}
h1{
    color: #cbc4bd;
    margin-top: 0px;
    line-height: 1;
    font-weight: 200 !important;
    letter-spacing: 3px;
}
@media screen and (min-width: 768px){
    h1{
        font-size: 65px;
    }
    .leftpaddingdesktop{
        padding-right: 30px;
    }
    #mainwrapper{
        margin-top: 120px;
    }
}
@media screen and (min-width: 769px) and (max-width: 1024px){
    h3{
        font-size: 27px !important;
    }
}
h3{
    color: #d62c3b;
    margin-top: 5px;
    margin-bottom: 0;
    font-size: 33px;
}
p {
    margin-bottom:15px;
}
@media screen and (max-width: 767px){
h1{
    font-size: 26px;
    text-align: center;
}
#toplogo{
    height: 140px;
}
h3{
    font-size: 24px;
}
p{
    text-align: center;
}
}




/* ==========================================================================
   Input Placeholder
   ========================================================================== */

input[type="text"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder {
    color:#7da7ae;  
    text-align:center;
    font-family: "acumin-pro-wide", sans-serif;
    font-weight: 500;
    font-style: normal;
}
input[type="text"]::-moz-placeholder, input[type="password"]::-moz-placeholder {
    color:#7da7ae;  
    text-align:center;
    font-family: "acumin-pro-wide", sans-serif;
    font-weight: 500;
    font-style: normal;
}
input[type="text"]:-moz-placeholder, input[type="password"]:-moz-placeholder {   /* Older versions of Firefox */
    color:#7da7ae; 
    text-align:center;
    font-family: "acumin-pro-wide", sans-serif;
    font-weight: 500;
    font-style: normal;
}
input[type="text"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder { 
    color:#7da7ae;  
    text-align:center;
    font-family: "acumin-pro-wide", sans-serif;
    font-weight: 500;
    font-style: normal;
}

input[type="text"], input[type="submit"], input[type="password"], input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color:#FFF !important;
    color:#0b2340;
    font-size:12px;
    border:0;
    text-align:center;
    /* border:1px solid #CCC; */
    font-weight:bold;
    text-align:center;    
    font-family: "acumin-pro-wide", sans-serif;
    font-weight: 500;
    font-style: normal;
    box-shadow: 2px 2px rgb(0 0 0 / 0.1);
}

input[type="submit"] {
    padding:4px 40px;
    background: #edd883 !important;
    color: #0b2340;
    text-align:center;
    border:none;
    font-weight:400;
    border-radius: 0;
    height: 40px;
    font-family: "acumin-pro-wide", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.form-container {
    width: 400px;
}

.form-control{
    border-radius: 0;
    height: 40px;
}

/* .centered{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
} */

.btn-blue {
    background-color: #231f20;
    color: #fff;
    font-weight: 700;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    text-decoration: none;
    padding: 15px;
    display: block;
    font-size: 18px;
}
    .logo-container {
        /* position: absolute;
        top: 0;
        left: 0; */
        /* height: 20vh; */
        /* width: 50%; */
    }

          .projectLogoFieldgate {
              width: 460px;
          }
          .bg-white {
            background-color: #ffffff;
          }
          .projectLogoIndex {
              width: 360px;
          }
  
          .buttonLink {
              display: flex;
              flex-flow: row wrap;
              padding-bottom: 1.2rem;
          }
          .buttonLinkIndex {
              display: flex;
              flex-direction: column;
              /* flex-flow: row wrap;
              padding-bottom: 1.2rem; */
          }
  
          .buttonLinkThree {
              display: flex;
              flex-flow: row wrap;
              padding-bottom: 1.2rem;
          }
          
          /* input.worksheet[type="submit"] {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin: 28px 1.5% 10px 1.5%;
            padding: 10px;
            color: #ffffff;
            text-align: center;
            text-decoration: none;
            transition: all 0.25s;
            height: 100%;
            max-height: 50px;
            font-size: 14px;
            letter-spacing: 1.5px;
            width: 98%;
        } */

        /* input.worksheet[type="submit"] {
            background-color: #d62c3b !important;
            color: white;
          } */

          .buttonLink a:link, a:visited, a:hover, a:active {
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              margin: 5px 1.5% 22px 1.5%;
              padding: 10px;
              color: #ffffff;
              text-align: center;
              text-decoration: none;
              background-color: #231f20;
              transition: all 0.25s;
              height: 100%;
              max-height: 50px;
              font-size: 15px;
              letter-spacing: 1.5px;
              width: 47%;
          }
          .buttonMail a:link, a:visited, a:hover, a:active {
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              margin: 28px 1.5% 10px 1.5%;
              padding: 10px;
              color: #ffffff;
              text-align: center;
              text-decoration: none;
              transition: all 0.25s;
              height: 100%;
              max-height: 50px;
              font-size: 14px;
              letter-spacing: 1.5px;
              width: 100%;
          }
        
          .buttonMail a:link, .buttonMail a:visited, .buttonMail a:hover, .buttonMail a:active {
            background-color: #d62c3b;
            color: white;
          }

          .buttonLinkIndex a:link, a:visited, a:hover, a:active {
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              margin: 5px 0 20px 0;
              padding: 10px;
              color: #0b2340;
              text-align: center;
              text-decoration: none;
              background-color: #edd883;
              transition: all 0.25s;
              height: 100%;
              max-height: 50px;
              font-size: 14px;
              letter-spacing: 1.5px;
              width: 100%;
              box-shadow: 2px 2px rgb(0 0 0 / 0.1);
          }
          
          .buttonLinkThree a:link, a:visited, a:hover, a:active {
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              margin: 5px 1.5% 22px 1.5%;
              padding: 10px;
              color: #0b2340;
              text-align: center;
              text-decoration: none;
              background-color: #edd883;
              transition: all 0.25s;
              height: 100%;
              max-height: 50px;
              font-size: 15px;
              letter-spacing: 1.5px;
              width: 30%;
          }

  
          .brandon-grotesque-med {
              font-family: brandon-grotesque, sans-serif;
              font-weight: 500;
              font-style: normal;
          }

              
          @media screen and (max-width:1000px) {
              .bigtitle {
                font-size: 45px;
              }
              .bigtitle-login {
                font-size: 45px;
              }
          }
          @media screen and (max-width:768px) {
            html, body {
                height:unset;
            }
            .big-login {
                padding: 5px 0px 10px 0px;
                width: 100%;
            }
            .buttons-width {
                width: 80%;
            }
            .bg-img {
                display: none;
            }
            .sm-title {
                font-size: 15px;
                padding-top: 50px;
            }

            .md-title {
                font-size: 16px;
                line-height: 18px;
            }

            .lg-title {
                font-size: 30px;
                line-height: 32px;
            }
            .desktop {
                display: none;
            }
            .mobile {
                display: block;
            }
            .logo-container {
                /* position: relative;
                height: 15vh;
                width: 100%; */
            }
            .projectLogoIndex {
                width: 260px;
            }
            .topPad {
                height: 50px;
            }
            .footer-container {
                /* bottom: -30px; */
            }
            /* .footer-position {
                bottom: -130px;
            } */
            .fg-logo {
                width: 100px;
            }
            .projectLogoFieldgate {
                padding-top: 10px;
            }
            .topPart {
                position: relative
            }
            #totalLayout {
                height: auto;
            }
            #totalLayoutLogin {
                height: auto;
            }
              .buttonLink a:link, a:visited, a:hover, a:active {
                  width: 48%;
                  margin: 5px 1% 5px 1%;
              }
              .buttonLinkIndex a:link, a:visited, a:hover, a:active {
                  width: 100%;
                  margin: 5px 0 5px 0;
              }
              .bigtitle {
                font-size: 45px;
              }
              .bigtitle-login {
                font-size: 45px;
              }
          }
  
          @media screen and (max-width:550px) {
            .footerLogos .logo {
                margin: 15px 16px;
                padding-top: 50px;
              }
              .blue-bg {
                  padding-bottom: 2rem;
                  height: unset;
              }
              .topPad {
                  height: 50px;
              }
  
              .buttonMail a:link, a:visited, a:hover, a:active {
                  width: 98%;
                  margin: 20px 1% 5px 1%;
                  max-height: 40px;
                  font-size: 12px;
              }
              .buttonLinkIndex a:link, a:visited, a:hover, a:active {
                  width: 100%;
                  margin: 5px 0 5px 0;
                  max-height: 40px;
                  font-size: 12px;
              }
              .buttonLink a:link, a:visited, a:hover, a:active {
                  width: 98%;
                  margin: 5px 1% 5px 1%;
                  max-height: 40px;
                  font-size: 12px;
              }
              .buttonLinkThree a:link, a:visited, a:hover, a:active {
                  width: 98%;
                  margin: 5px 1% 5px 1%;
                  max-height: 40px;
                  font-size: 12px;
              }
  
              .projectLogoFieldgate {
                width: 260px;
              }
  
              .bigtitle {
                font-size: 24px;
                  padding: 2rem 0 1rem 0rem;
              }
              .bigtitle-login {
                font-size: 30px;
                  padding: 8rem 0 1rem 0rem;
                  text-align: center;
                  line-height: 29px;
              }
              .smalltitle-login {
                font-size: 14px;
                  text-align: center;
              }
  
              .buttonLink {
                  display: flex;
                  flex-flow: row wrap;
                  padding-bottom: 0.3rem;
  
              }
              .buttonLinkIndex {
                  display: flex;
                  flex-flow: row wrap;
                  padding-bottom: 0.3rem;
  
              }
              .buttonLinkThree {
                  display: flex;
                  flex-flow: row wrap;
                  padding-bottom: 0.3rem;
  
              }
  
              .buttonLink a {
                  height: unset;
              }
              .buttonLinkIndex a {
                  height: unset;
              }
          }