/* v1.0.3 */
html, 
body, 
section,
.layout-canvas-g {
 font-family: 'Noto Sans',Verdana,Geneva,sans-serif;
 font-weight: 300;
 color: #333333;
 line-height:1.5em;
}
body {
 display: flex;
 flex-direction: column;
 height:100vh;
}
a {
 color: #09818E; text-decoration:none;
}
a:hover, 
a:focus, 
a:active {
 color: #075E68;
 text-decoration:underline;
}
.logo {
 background-color: #FFFFFF;
}
.logo img {
 max-width:210px;
 max-height: 50px;
 margin:18px 0;
}
.banner .hero {
  height: 250px;
  background-image: url(https://image.mc2.copeland.com/lib/fe8f13727261017d73/m/2/f960d23f-83e4-4c45-b3bd-a3ff79c28526.jpg);
  background-size: cover;
  background-position-y: -400px;
}
.banner .filter {
 display:table;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,.5);
}
.banner p {
 font-size: 18px;
 color:#FFFFFF;
}
#main {
 flex: 1 0 auto;
}
nav {
 background-color: #FFFEF5;
 box-shadow:0 1px 8px 0 rgba(0,0,0,.3);
}
.nav-pills a.nav-link {
 color: #333333;
 padding: 10px 20px;
 font-size: 18px;
}
.nav-pills a.nav-link:hover,
.nav-pills a.nav-link:focus,
.nav-pills a.nav-link:active {
 color: #0F3CFF;
 background-color: #F0F0F0;
}
.nav-pills .nav-link.active {
 color: #333333!important;
 background-color: #FFFFFF!important;
 border-radius: 0;
 cursor: default;
 border-bottom: 2px solid #0F3CFF;
}

h1, h2, h3 {
 font-weight: 300;
}
h1 {
 font-size:42px;
 color: #FFFFFF;
 margin:0;
 padding:0;
}

h2 {
 font-size:28px;
}

h3 { 
 font-size:22px
}

p {
 font-size:16px;line-height:20px;
}

.btn {
 width: 280px;
 height: 50px;
 line-height: 1.1429em;
 font-size: 14px;
 letter-spacing: .08em;
 font-weight: 600;
 text-transform: uppercase;
 padding: 0 25px;
 margin:54px 0;
 box-sizing: border-box;
 white-space: normal;
 background-color: #09818E;
 border: 1px solid #09818E;
 border-radius: 0;
 font-size: 14px;
 line-height: 1rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 1.12px;
 text-align: center;
 vertical-align: middle;
 color: #FFFFFF;
}

.btn>span {
 display: inline-block
}

.btn .text-wrapper {
 position: relative;
 display: table-cell;
 height: 48px;
 margin: 0 auto;
 text-align: center;
 vertical-align: middle
}


.btn.btn-arrow .text-wrapper {
 padding-right: 10px
}

.btn.btn-arrow .text-wrapper:after {
 content: "";
 display: block;
 width: 8px;
 height: 8px;
 margin-left: 6px;
 border-top: 2px solid #FFFFFF;
 border-right: 2px solid #FFFFFF;
 animation-duration: .25s;
 animation-fill-mode: both;
 transform: rotate(45deg);
 position: absolute;
 right: -3px;
 top: 20px
}

.btn.btn-arrow:hover .text-wrapper:after {
 animation-name: button-arrow
}

.btn:hover,
.btn:active,
.btn:focus {
 background-color:#075E68!important;
 border: 1px solid #075E68!important;
 color: #FEFEFE!important;
}

@keyframes button-arrow {
 0% {
  transform: rotate(45deg)
 }

 to {
  transform: translateX(5px) rotate(45deg)
 }
}
footer {
 flex-shrink: 0;
 background-color:#101010;
 text-align:center;
 margin:0;
 padding:2em;
}

footer img {
 margin: 0 auto 10px;
 color: #FFFEF5;
 width: 200px;
}
footer p {
 color: #FFFEF5;
 margin: 0 0 36px;
}

footer p:last-child {
 margin-bottom:0;
}

footer a {
 color: #FFFEF5!important;
}
input::placeholder,
input:disabled,
input:disabled + label {
 color:#ADB5BD!important;
}
.flex-fill {
 margin: 22px 18px 0;
}
.roles div {
 margin: 8px 18px 0;
}
.roles div {
 flex: 1 0 26%;
}
.roles .roles_select {
 margin: 22px 18px 0 0;
}
.custom-control-input {
 position: inherit;
 margin: 0 6px 0 -18px;
 border-color: #C0C0C0;
}

.custom-control-input:checked ~ .custom-control-label::before {
 background-color: transparent;
 color:#075E68;
 background-position: 50% 50%;
 background-size: 90%;
 border-color: #C0C0C0;
 background-repeat: no-repeat;
 background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDgnPjxwYXRoIGZpbGw9JyMwOTgxOEUnIGQ9J002LjU2NC43NWwtMy41OSAzLjYxMi0xLjUzOC0xLjU1TDAgNC4yNiAyLjk3NCA3LjI1IDggMi4xOTN6Jy8+PC9zdmc+')
}
.custom-control-input:focus ~ .custom-control-label::before,
.custom-control-input:active ~ .custom-control-label::before {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.15rem rgba(0, 170, 126, 0.25);
  background-color:transparent;
}


legend {
 font-size: 16px;
 font-weight: 300;
}
.processing_icon span {
 font-size:54px;
 margin: 36px 0 0;
}
.processing_icon .fa-spin {
 color:rgba(123, 155, 170, 0.4);
}
.processing_icon .final {
 color:#FFFFFF;
}
.modal-full {
 min-width: 100%;
 margin: 0;
}

#modal_processing {
 background-color: rgb(196 206 209 / 85%);
}

#modal_processing .modal-content {
 border: none;
 border-radius: 0;
 background-color: #0F3CFF;
 padding: 36px 0;
}

#modal_processing h2 {
 color:#FEFEFE;
 font-weight:600;
 font-size:16px;
 text-transform:uppercase;
 margin:0 0 18px;
}
#modal_processing p {
 color:#FEFEFE;
 font-size:22px;
}
@media screen and (max-width: 1980px) {
  .banner .hero {
    background-position-y: -310px;
  }
}
@media screen and (max-width: 1560px) {
  .banner .hero {
    background-size: auto 620px;
  }
}
@media screen and (max-width: 1280px) {
  .banner .hero {
    background-position-y: -200px;
    background-size: auto 500px;
  }
}
@media screen and (max-width: 960px) {
  .banner .hero {
    background-position-y: -160px;
    background-position-x: -30px;
    background-size: auto 450px;
  }
}
@media screen and (max-width: 800px) {
  .banner .hero {
    background-position-y: -120px;
    background-position-x: -60px;
    background-size: auto 380px;
  }
}
@media screen and (max-width: 600px) {
  .banner .hero {
    background-position-x: -160px;
  }
}
@media screen and (max-width: 540px) {
  .banner .hero {
    background-position-x: -200px;
  }
}
@media screen and (max-width: 440px) {
  .banner .hero {
    background-position-x: -300px;
  }
}
@media screen and (max-width: 380px) {
  .banner .hero {
    background-position-x: -400px;
  }
}