/* set correct box model */
* {  box-sizing:border-box; padding:0; margin:0;  }
body { background-color: #fff;  font-family: Barlow, sans-serif;}
a { text-decoration: none; }

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.noto-sans-<uniquifier> {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/* HEADER */

.header { padding:1rem; background:transparent; text-align: center;  }

/* MENU */

/* Remove the navbar's default margin-bottom and rounded borders */ 
.navbar { margin-bottom: 0; border-radius: 0; background-color: transparent; border-top: 1px solid #f0f0f0;  border-bottom: 1px solid #f0f0f0; }
.navbar-nav { text-align: center !important; width: 100% !important; }
.navbar-nav>li { font-family: Barlow, sans-serif; font-size: 16px; font-weight: 500; font-stretch: normal; font-style: normal; text-decoration: none; color: #999; border-bottom-color: transparent; border-bottom-style: solid; text-transform: uppercase; width:33% }
.navbar-collapse>navbar-nav>li { width:100% !important;}
.navbar-nav>li a:hover { color: #2F58B1 !important; }
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>a, .navbar-nav>a { color: #2F58B1 !important; background: transparent !important; }

.list-group-horizontal .list-group-item { display: inline-block; }
.list-group-horizontal .list-group-item { background: transparent; margin-bottom: 0; margin-left:-24px; margin-right: 0; border-right-width: 0; border:0 !important; }
.list-group-horizontal .list-group-item a { font-family: Barlow, sans-serif; margin: 0; text-decoration: none; padding: 1em 1.5em 1em 1.5em; color: #333; background-color: #f0f0f0; text-transform:capitalize; font-size:16px; }
.list-group-horizontal .list-group-item:first-child { padding: 1em 1.5em 1em 0em; }
.list-group-horizontal .list-group-item:last-child { padding: 1em 0em 1em 1.5em; }

/* INTRO */

.jumbotron { background-color: #2F58B1; text-align:center; padding:10px 0 0 0; margin: 0; min-height:9 !important; }
.jumbotron h1 { font-family: Barlow, sans-serif; font-size: 16px; font-weight:200; font-stretch: normal; font-style: normal; color:#fff; text-transform: uppercase; margin:15% 0 15px 0; }
.jumbotron h2 { font-family: Barlow, sans-serif; font-size:45px; letter-spacing: -1px; font-weight:500; font-stretch: normal; font-style: normal; color:#fff; line-height:50px;}
.jumbotron a { font-family: Barlow, sans-serif; font-size:18px; font-weight:400; font-stretch: normal; font-style: normal; color:#fff; line-height:60px; text-transform: uppercase;}
.jumbotron a:hover { text-decoration: none; }
.jumbotron img { width:75%; text-align: center; margin: 0 0 50px 0;}

.jumbotron-content { background-color: transparent; text-align:center; padding:10px 0 0 0; margin: 0; min-height:9 !important; }
.jumbotron-content h1 { font-family: Barlow, sans-serif; font-size: 40px; font-weight:500; font-stretch: normal; font-style: normal; color:#333; text-transform: uppercase; margin:0 0 20px 0; }
.jumbotron-content h2 { font-family: Barlow, sans-serif; font-size:45px; letter-spacing: -1px; font-weight:500; font-stretch: normal; font-style: normal; color:#fff; line-height:50px;}
.jumbotron-content a { font-family: Barlow, sans-serif; font-size:18px; font-weight:400; font-stretch: normal; font-style: normal; color:#fff; line-height:60px; text-transform: uppercase;}
.jumbotron-content a:hover { text-decoration: none; }

/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}


/* MAIN */

.inner  { padding:5%; background-color:#fff; text-align:center; margin:20px; }
.inner img { width: 250px; margin:0 0 15px 0; }
.inner h4  { font-family: Barlow, sans-serif; font-size:30px; font-weight:300; font-stretch: normal; font-style: normal; color:#999; text-decoration:none !important; padding:15px 0 15px 0; }

    /* Set gray background color and 100% height */
    .sidenav {
      padding-top: 20px;
      background-color: #f1f1f1;
      height: 100%;
    }
    
    /* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }
    
    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height:auto;} 
    }



.top { width:100% !important; background-color: #fff; text-align:center; padding:10px 0 30px 0; margin: 0; min-height:400px; }
.top h2 { font-family: Barlow, sans-serif; font-size: 40px; font-weight:500; font-stretch: normal; font-style: normal; color:#333; text-transform: uppercase; margin:0 0 50px 0; }
.top h3 { font-family: Barlow, sans-serif; font-size:3vw; font-weight:700; font-stretch: normal; font-style: normal; color:#fff;}

#navcontainer ul { margin: 0; padding: 0; list-style-type: none; text-align: center;  }
#navcontainer ul li { display: inline;  }
#navcontainer ul li a { font-family: Barlow, sans-serif; margin: 0 10px 0 0; text-decoration: none; padding: 1em 2em 1em 2em; color: #333; background-color: #f0f0f0; }

.pictorial { width:90%; margin:0 5%; text-align:center;}

#content { width:70%; margin:5% 15% 5% 15%; text-align:left; font-family: Barlow, sans-serif; text-decoration: none; color: #333; }
#content h3 { font-family: Barlow, sans-serif; font-size: 40px; font-weight:500; font-stretch: normal; font-style: normal; color:#333; margin:0 0 30px 0; }
#content p { font-family: Barlow, sans-serif; font-size: 18px; line-height:1.6em; font-weight:300; font-stretch: normal; font-style: normal; color:#333; margin:0 0 20px 0; }



.btn-17,
.btn-17 *,
.btn-17 :after,
.btn-17 :before,
.btn-17:after,
.btn-17:before {
  border: 0 solid;
  box-sizing: border-box;
}

.btn-17 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #2F58B1;
  background-image: none;
  color: #fff !important;
  cursor: pointer;
  font-family: Barlow, sans-serif; 
  font-size: 125%;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}

.btn-17:disabled {
  cursor: default;
}

.btn-17:-moz-focusring {
  outline: auto;
}

.btn-17 svg {
  display: block;
  vertical-align: middle;
}

.btn-17 [hidden] {
  display: none;
}

.btn-17 {
  border-radius: 99rem;
  border-width: 2px;
  padding: 0.8rem 3rem;
  z-index: 0;
}

.btn-17,
.btn-17 .text-container {
  overflow: hidden;
  position: relative;
}

.btn-17 .text-container {
  display: block;
  mix-blend-mode: difference;
}

.btn-17 .text {
  display: block;
  position: relative;
}

.btn-17:hover .text {
  -webkit-animation: move-up-alternate 0.3s forwards;
  animation: move-up-alternate 0.3s forwards;
}
.btn-17 a {color:#fff}
.btn-17:hover a {color:#2F58B1}

@-webkit-keyframes move-up-alternate {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(80%);
  }

  51% {
    transform: translateY(-80%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes move-up-alternate {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(80%);
  }

  51% {
    transform: translateY(-80%);
  }

  to {
    transform: translateY(0);
  }
}

.btn-17:after,
.btn-17:before {
  --skew: 0.2;
  background: #dee7ff;
  content: "";
  display: block;
  height: 102%;
  left: calc(-50% - 50% * var(--skew));
  pointer-events: none;
  position: absolute;
  top: -104%;
  transform: skew(calc(150deg * var(--skew))) translateY(var(--progress, 0));
  transition: transform 0.2s ease;
  width: 100%;
}

.btn-17:after {
  --progress: 0%;
  left: calc(50% + 50% * var(--skew));
  top: 102%;
  z-index: -1;
}

.btn-17:hover:before {
  --progress: 100%;
}

.btn-17:hover:after {
  --progress: -102%;
}

/* stacked columns on mobile */
.holy-grail-floated-blocks .header {
    padding:0.5rem;
    background:transparent;
    text-align: center;
}
.holy-grail-floated-blocks .main-content {
    padding:1rem;
    background:#fff;
}
.holy-grail-floated-blocks .left-sidebar {
    padding:1rem;
    background:#dee7ff;
}
.holy-grail-floated-blocks .right-sidebar {
    padding:1rem;
    background:#dee7ff;
}
.holy-grail-floated-blocks .footer {
    padding:2rem;
    background:#5C5F66;
    color:#fff;
    text-align: center;
    font-family: Barlow, sans-serif;
    
}

/* tablet breakpoint */
@media (min-width:768px) {
    .holy-grail-floated-blocks .right-wrap {
        float:left;
        width:100%;
        background:#dee7ff;
    }
    .holy-grail-floated-blocks .main-wrap {
        float:left;
        width:100%;
        background:#dee7ff;
        position:relative;
        right:50%;
    }
    .holy-grail-floated-blocks .left-wrap {
        float:left;
        width:100%;
        position:relative;
        left:50%;
    }
    .holy-grail-floated-blocks .main-content {
        float:left;
        width:100%;
    }
    .holy-grail-floated-blocks .left-sidebar {
        clear:both;
        float:left;
        width:50%;
        background:none;
    }
    .holy-grail-floated-blocks .right-sidebar {
        width:50%;
        float:right;
        background:none;
    }
    .holy-grail-floated-blocks .footer {
        clear:both;
    }
}

/* desktop breakpoint */
@media (min-width:1024px) {
    .holy-grail-floated-blocks .main-wrap {
        right:33%;
        background:#dee7ff;
    }
    .holy-grail-floated-blocks .left-wrap {
        left:auto;
        right:33%;
        background:#dee7ff;
    }
    .holy-grail-floated-blocks .main-content {
        width:33%;
        left:100%;
        position:relative;
        left:100%;
        background:none;
    }
    .holy-grail-floated-blocks .left-sidebar {
        clear:none;
        width:33%;
        position:relative;
        left:33%;
    }
    .holy-grail-floated-blocks .right-sidebar {
        clear:none;
        width:33%;
        position:relative;
        left:66%;
    }
}

.navbar-inverse .navbar-toggle {
  background-color: #000;
}

@media(max-width:767px){

  .navbar-nav>li {
    width:100%;
  }
  
}