* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    user-select: none;
}

body {
    font-family: 'Nunito', sans-serif;
}

p {
  text-align: justify;
}

nav {
    height: 50px;
    background: #063247;
    box-shadow: 0 3px 15px rgba(0,0,0,.4);
}

nav .wrapper {
    max-width: 1320px;
    margin: 0 auto;
}

nav .logo{
    color: white;
    font-size: 16px;
    font-weight: bold;
    line-height: 50px;
    padding-left: 10px;
}

nav ul{
    float: right;
    margin-right: 5px;
}
nav ul li{
    display: inline-block;
}
nav ul li a{
    color: white;
    display: block;
    padding: 0 10px;
    line-height: 50px;
    font-size: 16px;
    transition: .25s;
    text-emphasis: none;
    text-decoration: none;
}
nav ul li a:hover,
nav ul li a.active{
    color: #23dbdb;
}
nav ul ul{
    position: absolute;
    top: 50px;
    opacity: 0;
    visibility: hidden;
    list-style: none;
    z-index: 99;
}
nav ul li:hover > ul{
    top: 50px;
    opacity: 1;
    visibility: visible;
    transition: .3s linear;
}
nav ul ul li{
    width: 200px;
    display: list-item;
    position: relative;
    border: none;
    text-decoration: none;
    opacity: 0.8;
    background: #063247;
}
nav ul ul li a{
    line-height: 30px;
}

.navmenu {
    display: inline;
}

#menuToggle
{
  display: none;
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

@media only screen and (max-device-width: 767px) , (max-width: 700px) {
    #menuToggle {
        display: block;
    }


    nav .navmenu {
        position: absolute;
        width: 350px;
        top: 50px;
        right: 0px;
        margin: -100px 0 0 -50px;
        padding: 10px;
        padding-top: 25px;
        background: #ededed;
        list-style-type: none;
        -webkit-font-smoothing: antialiased;
        transform-origin: 0% 0%;
        transform: translate(0%, -120%);
        transition:transform 0.2s ease-in-out 0s;
        z-index: 99;
        box-shadow: 0 3px 15px rgba(0,0,0,.4);
    } 

    nav ul {
        float: none;
    }
    nav ul li{
        display: block;
        margin: 5px;
    }
    nav ul li a{
        color: #555;
        display: block;
        padding: 10px 10px;
        line-height: 30px;
        font-size: 12px;
        transition: .25s;
        text-emphasis: none;
        text-decoration: none;
    }
    nav ul ul {
        position: relative;
        left: 10px;
        top: 0px;
        opacity: 1;
        visibility: visible;
        list-style: none;
    }
    nav ul li:hover > ul{
        left: 10px;
        top: 0px;
        opacity: 1;
        visibility: visible;
        transition: .3s linear;
    }
    nav ul ul li{
        width: 250px;
        float: none;
        display: block;
        text-align: left;
        border: none;
        text-decoration: none;
        opacity: 0.8;
        background: none;
    }
    nav ul ul li a{
        line-height: 30px;
    }


    nav .navmenu.responsive
    {
        transform: translate(0%, 100px);
    }
}

form {
  display: inline;
}


/*
 * hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-16px, -17px);
  background: #555;
}

#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(-3px, 5px);
}

.label-field input {
    border: 1px solid #063247;
    display: inline-block;
    appearance: none;
    margin-left: 20px;
    margin-right: 5px;
    background: #fff;
    padding: 6px;
    -webkit-appearance: none;
    border-radius: 2px;
    width: 250px;
    outline: none;
}

.label-field {
    position: relative;
    font-size: 15px;
}

.label-field .placeholder {
    position: absolute;
    left: 32px;
    top: 2px;
    color: #555;
}

.label-field input:valid + .placeholder,
.label-field input:focus + .placeholder {
    font-size: 10px;
    top: 0px;
    transition: 100ms linear;
    transform: translateY(-16px);
    color: #111;
    background-color: #fff;
    border: solid;
    border-radius: 3px;
    border-width: 3px;
    border-color: #fff;
}





.footer {
    display: flex;
    flex-flow: row wrap;
    padding: 30px 30px 20px 30px;
    color: #fff;
    background-color: #063247;
}
  
.footer > * {
    flex:  1 100%;
}
  
.footer__logo {
    font-size: 25px;
}
  
.nav__title {
    font-size: 15px;
}
  
  .footer ul {
    list-style: none;
    padding-left: 0;
  }
  .footer li {
    line-height: 2em;
  }
  .footer a {
    text-decoration: none;
  }
  .footer__nav {
    display: flex;
    flex-flow: row wrap;
  }
  .footer__nav > * {
    flex: 1 50%;
    margin-right: 1.25em;
  }
  .nav__ul a {
    color: #ddd;
  }
  .nav__ul a:hover {
    color: #fff;
  }
  .nav__ul--extra {
    column-count: 2;
    column-gap: 1.25em;
  }
  .legal {
    display: flex;
    flex-wrap: wrap;
    color: #999;
  }
  .legal__links {
    display: flex;
    align-items: center;
  }
  
  @media screen and (min-width: 24.375em) {
    .legal .legal__links {
      margin-left: auto;
    }
  }
  
@media screen and (min-width: 40.375em) {
    .footer__nav > * {
        flex: 1;
    }
    .nav__item--extra {
        flex-grow: 2;
    }
    .footer__addr {
        flex: 1 0px;
    }
    .footer__nav {
        flex: 2 0px;
    }
}

  /* Style all font awesome icons */
.pa {
    padding: 10px 12px;
    margin: 2px;
    border-radius: 3px;
    align-items: center;
}
  
/* Add a hover effect if you want */
.pa:hover {
    opacity: 0.7;
}
  
/* Set a specific color for each brand */
.pa-facebook {
    background: #3B5998;
    color: white;
}
.pa-linkedin {
    background: #598aEE;
    color: white;
}
.pa-youtube {
    background: #cd5555;
    color: white;
}
.pa-github {
    background: #55ACEE;
    color: white;
}
.pa-btc {
    background: #ACAC93;
    color: white;
}
.pa-paypal {
    background: #99ACEE;
    color: white;
}
.pa-codepen {
  background: #999;
  color: white;
}
.pa-thingy {
  background: #9898ff;
  color: white;
}

.pa-view {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-size: cover;
  color: #fff;
  filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(90deg) brightness(100%) contrast(100%);
  background-image: url(../images/eye-outline.svg);
}

.pa-comment {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-size: cover;
  color: #fff;
  filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(90deg) brightness(100%) contrast(100%);
  background-image: url(../images/comment-multiple-outline.svg);
}

.pagestat {
  display: block;
  position: absolute;
  width: 120px;;
  right: 0px;
  top: 320px;
  text-align: center;
}
.pagestat p {
  text-align: center;
  color: #eee;
}

.btn {
    background-color: #063247;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: 1px solid #ddd;
    cursor: pointer;
    border-radius: 5px;
    margin: 10px;
}
  
.btn:hover {
    background-color: black;
}

.compact {
  padding: 4px 8px;
}

a {
  text-decoration: none;
}

.cont {
    max-width: 1080px;
    min-height: 10px;
    margin: 0 auto;
}

/* The hero image */
.hero-img {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)), url('../images/indianapolis.jpeg');;
    min-height: 400px;
  
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
  
  /* Place text in the middle of the image */
  .hero-txt {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    max-width: 500px;
  }







  .band {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-gap: 4px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  @media (min-width: 25em) {
    .band {
      grid-template-columns: 1;
    }
  }
  @media (min-width: 30em) {
    .band {
      grid-template-columns: 1fr;
    }
  }
  @media (min-width: 60em) {
    .band {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  
  .card {
    background: white;
    text-decoration: none;
    color: #444;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    min-height: 100%;
    position: relative;
    top: 0;
    -webkit-transition: all .1s ease-in;
    transition: all .1s ease-in;
  }
  .card .menu-content {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  .card .menu-content::before, .card .menu-content::after {
    content: '';
    display: table;
  }
  .card .menu-content::after {
    clear: both;
  }
  .card .menu-content li {
    display: inline-block;
  }
  .card .menu-content a {
    color: #fff;
  }
  .card .menu-content span {
    position: absolute;
    left: 50%;
    top: 0;
    font-size: 10px;
    font-weight: 200;
    font-family: 'Open Sans';
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
  .card .wrapper {
    background-color: #fff;
    min-height: 440px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3), 0 5px 2px rgba(0, 0, 0, 0.2);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .card .wrapper:hover .data {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .card .data {
    position: absolute;
    bottom: 0;
    width: 100%;
    -webkit-transform: translateY(calc(70px + 1em));
            transform: translateY(calc(70px + 1em));
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
  }
  .card h1 {
    font-size: 18px;
  }
  .card .data .content {
    padding: 1em;
    position: relative;
    z-index: 1;
  }
  .card .author {
    font-size: 12px;
  }
  .card .title {
    margin-top: 10px;
  }
  .card .text {
    height: 70px;
    margin: 0;
  }

  .card .wrapper:hover .menu-content {
    -webkit-transform: translateY(-60px);
            transform: translateY(-60px);
  }
  
  .postcontent .date {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #063247;
    color: #fff;
    padding: 0.8em;
  }
  .postcontent .date span {
    display: block;
    text-align: center;
  }
  .postcontent .date .day {
    font-weight: 700;
    font-size: 24px;
    text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.18);
  }
  .postcontent .date .month {
    text-transform: uppercase;
  }
  .postcontent .date .month,
  .postcontent .date .year {
    font-size: 12px;
  }
  .postcontent .content {
    background-color: #fff;
    box-shadow: 0 5px 30px 10px rgba(0, 0, 0, 0.3);
  }
  .postcontent .title a {
    color: #555;
    text-decoration: none;
  }

  .postcontent .menu-content {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .postcontent .menu-content li {
    width: 50%;
    float: left;
    background-color: #063247;
    height: 60px;
    position: relative;
  }
  .postcontent .menu-content p,
  .postcontent .menu-content a {
    color: #111;
    position: absolute;
    top: 50%;
    left: 40%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    font-size: 24px;
  }
  .postcontent .menu-content span {
    top: 3px;
    left: 60px;
    font-size: 20px;
    
  }
  
  @media (min-width: 60em) {
    .item-1,
    .item-4 {
      grid-column: 1 / span 2;
    }
    .item-1 h1,
    .item-4 h1 {
      font-size: 20px;
    }
  }






  .center {
    text-align: center;
  }





  
  .pagination {
    display: inline-block;
    padding: 15px;
  }
  
  .pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
    margin: 4px 4px;
  }
  
  .pagination a.active {
    background-color: #063247;
    color: white;
    border: 1px solid #ddd;
  }

  .pagination a:hover:not(.active) {
      background-color: #ddd;
    }






    .select-card {
        display: -webkit-box;
        display: block;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
                flex-direction: column;
        margin: 0rem auto;
        box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);
        margin-bottom: 1.6%;
        background: #fff;
        line-height: 1.4;
        border-radius: 5px;
        overflow: visible;
        z-index: 0;
        -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                    flex-direction: row;
        max-width: 1100px;
        min-height: 60px;
    }
    
    .select-card h2 {
      margin: 15px;
    }

    .select-card h3 {
      margin: 15px;
    }

    .select-card h4 {
      margin: 15px;
    }

    .select-card p {
      margin: 10px;
    }
      
    .select-card .btn:hover {
        background-color: black;
    }
    
    .select-card .subls ul {
        list-style-type: none;
        margin: 10px;
      }
      
      .select-card .subls ul li {
        display: block;
        justify-content: center;
        border: 1px solid #ddd;
        margin-top: -1px; /* Prevent double borders */
        background-color: #f6f6f6;
        padding: 12px;
        padding-right: 35px;
        text-decoration: none;
        font-size: 18px;
        color: black;
        position: relative;
      }
      
      .select-card .subls  ul li:hover {
        background-color: #eee;
      }
    
      .select-card .subls  ul li.selected {
        background-color: #063247;
        color: #eee;
      }
      
      .select-card  .close {
        cursor: pointer;
        position: absolute;
        top: 50%;
        right: 0%;
        padding: 12px 16px;
        transform: translate(0%, -50%);
      }
      
      .select-card  .close:hover {background: #bbb;}








      .radiogroup {
        border: 1px solid black;
        padding: 5px;
        display: flexbox;
        margin: 15px;
      }
      
      .radiogroup .placeholder {
        position: relative;
        left: 0px;
        top: -20px;
        color: #555;
        font-size: 12px;
        padding: 3px;
        background-color: #fff;
        border: 1px solid black;
        border-radius: 3px;
      }
      
      .radiogroup input {
        display: none;
      }
      
      .radiogroup label {
        display: block;
        padding: 5px;
        margin: 0;
        font-size: 10px;
        background-color: #eee;
        color: #555;
        border: 1px solid #ddd;
      }

      .radiogroup label:hover {
        background-color: #ddd;
      }
      
      .radiogroup label span {
        padding: 0;
      }
      
      .radiogroup input:checked + label {
        background-color: #063247;
        color: #eee;
      }


      .contgroup {
        /*border: 1px solid black;*/
        padding: 0;
        padding-top: 25px;
        display: block;
        margin: 0;
      }
      




      .sel-internal {
        display: inline-block;
        padding-right: 5px;
        padding-top: 11px;
        text-align: center;
    }
    
    .selectgroup {
        position: relative;
        display: inline-block;
        width: 330px;
    }
    
    .selectitem {
        display: block;
        font-size: 10px;
        padding: 3px;
        color: black;
        text-align: left;
    }
    .selectitem:hover {
        background-color: #ddd;
    }
    
    .option {
        display: none;
    }
    
    .ddbutton {
        display: flex;
        justify-content: space-between;
        border: 1px solid #555;
        width: 100%;
        height: 35px;
        background-color: #fff;
        border-radius: 0;
        padding: 12px 3px;
        margin: 1px;
    }
    
    .ddbutton:focus {
      border: 1px solid #555;
      outline: 0;
      border-radius: 1px;
    }
    
    .ddbutton span {
        font-size: 10px;
    }
    
    .dropdown {
        display: float;
        border: 1px solid #000;
        border-top: none;
        font-size: 2.3rem;
        position: absolute;
        left: 1px;
        top: 32px;
        width: 100%;
        background-color: #fff;
        box-sizing: border-box;
        z-index: 999;
    }
    
    .scrollable-content::-webkit-scrollbar {
        width: 10px;
    }
      
    .scrollable-content::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
      
    .scrollable-content::-webkit-scrollbar-thumb {
        background: #888;
    }
      
    .scrollable-content::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    
    .scrollable-content {
        max-height: 250px;
        overflow-y: auto;
    }
    
    .dropdown button {
        display: inline-block;
        width: 30%;
        padding: 5px;
        border: 0;
        margin: 2px;
        background-color: #063247;
        color: #ddd;
    }
    
    .dropdown .active {
        background-color: #aaa;
    }
    
    .dropdown .search {
        display: inline-block;
        width: 100%;
        border: 1px solid #aaa;
        background-color: #fff;
        padding: 3px;
    }
    
    .arrow {
        border: solid black;
        border-width: 0 2px 2px 0;
        padding: 4px;
        transform: rotate(45deg) translate(-5px, 0);
    }
    
    .hidden {
        display: none;
    }
      

    .ivalue input {
        border: none;
        display: inline-block;
        appearance: none;
        margin-left: 4px;
        margin-right: 4px;
        background: #fff;
        padding: 8px;
        -webkit-appearance: none;
        border-radius: 1px;
        border: 1px solid #555;
        width: 75px;
        outline: none;
        -moz-appearance: textfield;
    }
    .ivalue input:disabled {
        background: #ddd;
    }
    .ivalue {
        position: relative;
        display: inline-block;
        font-size: 12px;
        margin-top: 4px;
        margin-bottom: 4px;
    }

    .wide input {
        width: 100px;
    }
    
    .ivalue .placeholder {
        position: absolute;
        padding: 2px 5px;
        color: #555;
        font-size: 8px;
        top: -7px;
        left: 6px;
        color: #111;
        background-color: #fff;
        border-radius: 2px;
        border: 1px solid #555;
    }


    .blog-card {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
                flex-direction: column;
        margin: 1rem auto;
        margin-bottom: 1.6%;
        background: #fff;
        line-height: 1.4;
        border-radius: 0;
        border-bottom: 1px solid #ddd;
        overflow: hidden;
        z-index: 0;
        -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
                  flex-direction: row;
      }
      .blog-card a {
        color: inherit;
      }
      .blog-card a:hover {
        color: #063247;
      }
      .blog-card:hover .photo {
        -webkit-transform: scale(1.3) rotate(3deg);
                transform: scale(1.3) rotate(3deg);
      }
      .blog-card .meta {
        position: relative;
        z-index: 0;
        height: 200px;
      }
      .blog-card .photo {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-size: cover;
        background-position: center;
        -webkit-transition: -webkit-transform .2s;
        transition: -webkit-transform .2s;
        transition: transform .2s;
        transition: transform .2s, -webkit-transform .2s;
      }
      .blog-card .details,
      .blog-card .details ul {
        margin: auto;
        padding: 0;
        list-style: none;
      }
      .blog-card .details {
        position: absolute;
        top: 0;
        bottom: 0;
        left: -100%;
        margin: auto;
        -webkit-transition: left .2s;
        transition: left .2s;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        padding: 10px;
        width: 100%;
        font-size: .9rem;
      }
      .blog-card .details a {
        -webkit-text-decoration: dotted underline;
                text-decoration: dotted underline;
      }
      .blog-card .details ul li {
        display: inline-block;
      }
      .blog-card .details .tags ul:before {
        font-family: FontAwesome;
        content: "\f02b";
        margin-right: 10px;
      }
      .blog-card .details .tags li {
        margin-right: 2px;
      }
      .blog-card .details .tags li:first-child {
        margin-left: -4px;
      }
      .blog-card .description {
        padding: 1rem;
        background: #fff;
        position: relative;
        z-index: 1;
        flex-basis: 60%;
      }
      .blog-card .description h1,
      .blog-card .description h2 {
        font-family: Poppins, sans-serif;
      }
      .blog-card .description h1 {
        line-height: 1;
        margin: 0;
        margin-left: 75px;
        font-size: 1.7rem;
      }
      .blog-card .description h2 {
        font-size: 1rem;
        font-weight: 300;
        text-transform: uppercase;
        color: #a2a2a2;
        margin-top: 5px;
      }

      .blog-card p {
        position: relative;
        margin: 1rem 0 0;
      }
      .blog-card p:first-of-type {
        margin-top: 1.25rem;
      }
      .blog-card p:first-of-type:before {
        content: "";
        position: absolute;
        height: 5px;
        background: #063247;
        width: 35px;
        top: -0.75rem;
        border-radius: 3px;
      }
      .blog-card:hover .details {
        left: 0%;
      }

    .blog-card .meta {
        flex-basis: 40%;
        height: auto;
    }

    .blog-card .description:before {
        -webkit-transform: skewX(-3deg);
                transform: skewX(-3deg);
        content: "";
        background: #fff;
        width: 30px;
        position: absolute;
        left: -10px;
        top: 0;
        bottom: 0;
        z-index: -1;
    }
    .blog-card.alt {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
                flex-direction: row-reverse;
    }
    .blog-card.alt .description:before {
        left: inherit;
        right: -10px;
        -webkit-transform: skew(3deg);
                transform: skew(3deg);
    }
    .blog-card.alt .details {
        padding-left: 25px;
    }


    .toggle-control {
        display: inline-block;
        position: relative;
        padding-left: 100px;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 12px;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
      }
      .toggle-control input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
      }
      .toggle-control input:checked ~ .control {
        background-color: #063247;
        border: #ccc 1px solid;
      }
      .toggle-control input:checked ~ .control:after {
        left: 25px;
      }
      .toggle-control .control {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 50px;
        border-radius: 25px;
        background-color: darkgray;
        transition: background-color 0.15s ease-in;
      }
      .toggle-control .control:after {
        content: "";
        position: absolute;
        left: 5px;
        top: 2px;
        width: 20px;
        height: 20px;
        border-radius: 25px;
        background: white;
        transition: left 0.15s ease-in;
      }

      .contentwrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2px;
      }
      
      @media (min-width: 900px) {
        .contentwrapper {
          grid-template-columns: repeat(6, 1fr);
          gap: 2px;
        }
      
        .full {
          grid-column: span 6;
        }
        .half {
          grid-column: span 3 ;
        }
        .quarter {
          grid-column:  span 3;
        }
        .third {
          grid-column: span 3;
        }
        .threeq {
          grid-column: span 6;
        }
        .twothird {
            grid-column: span 6;
        }
      
      }
      
      @media (min-width: 1000px) {
        .contentwrapper {
          grid-template-columns: repeat(12, 1fr);
          gap: 5px;
        }
      
        .full {
          grid-column: span 12;
        }
        .half {
          grid-column: span 6 ;
        }
        .quarter {
          grid-column: span 3;
        }
        .third {
          grid-column: span 4;
        }
        .threeq {
            grid-column: span 9;
        }
        .twothird {
            grid-column: span 8;
        }
      }
      
      .contentwrapper .full,
      .contentwrapper .half,
      .contentwrapper .quarter,
      .contentwrapper .third,
      .contentwrapper .threeq,
      .contentwrapper .twothird {
        border: 1px solid #ddd;
        display: inline-block;
        flex-direction: column;
        padding: 3px;
        padding-top: 5px;
        text-align: center;
        margin: 5px;
      }

      .contentwrapper .header {
        position: relative;
        display: block;
        padding: 2px;
        color: #555;
        font-size: 12px;
        top: 0px;
        left: 2px;
        transform: translate(2px, -20px);
        color: #111;
        background-color: #fff;
        border: solid;
        border-radius: 3px;
        border: 1px solid #000;
    }



    table {  
        color: #333;
        font-family: Helvetica, Arial, sans-serif;
        border-collapse: 
        collapse; border-spacing: 0; 
        width:100%;
    }
    
    td, th {  
        border: 1px solid transparent; /* No more visible border */
        height: 30px; 
        padding: 3px 10px 0 10px;
        transition: all 0.3s;  /* Simple transition for hover effect */
        white-space: nowrap;
        background: #FEFEFE;
    }
    
    th {  
        background: #DFDFDF;  /* Darken header a bit */
        font-weight: bold;
    }
    
    td {  
        background: #FAFAFA;
        text-align: center;
    }
    


    .progress {
        background: #ddd;
        justify-content: flex-start;
        border-radius: 10px;
        align-items: center;
        position: relative;
        padding: 0 5px;
        display: flex;
        height: 40px;
      }
      
      .progress-value {
        animation: load 3s normal forwards;
        box-shadow: 0 10px 40px -10px #fff;
        border-radius: 10px;
        background: #063247;
        height: 30px;
        width: 0;
        color: #ddd;
        padding-top: 5px;
      }

.one-one-ar {
    height: 0;
    padding-top: 100%;
    overflow: hidden;
    position: relative;
}

.ar-inside {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }




 
.carousel i {
    position: relative;
    display: block;
    width: 90%;
    height: 400px;
    overflow: hidden;
    border-radius: 5px;
    background-color: #333;
  }
  
  .carousel   i:before, i:after {
    content: '⥪';
    position: absolute;
    top: 50%;
    left: 1rem;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    background: #063247;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
  }
  
  .carousel   i:after {
    content: '⥭';
    left: auto;
    right: 1rem;
  }
  
  /* I haven't found a way for IE and Edge to let me style inputs that way */
  .carousel   input {
    appearance: none;
    -ms-appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
  
    transform: translateX(100%);
    transition: transform ease-in-out 400ms;
    z-index: 1;
  }
  
  .carousel   input:focus {
    outline: none;
  }
  
  .carousel   input:after {
    content: attr(title);
    position: absolute;
    top: 1rem;
    left: 1rem;
    background-color: rgba(0,0,0,0.4);
    color: white;
    padding: .5rem;
    font-size: 1rem;
    border-radius: 5px;
  }
  
  .carousel   input:not(checked):before {
    content: '';
    position: absolute;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    top: 50%;
    left: calc(-100% + 1rem);
  }
  
  .carousel   input:checked:before {
    display: none;
    left: 1rem;
  }
  
  .carousel  input:checked {
    transform: translateX(0);
    z-index: 0;
    box-shadow: -5px 10px 20px -15px rgba(0,0,0,1);
  }
  
  .carousel  input:checked + input:before {
    left: -3rem;
  }
  
  .carousel   input:checked + input ~ input:before {
    display: none;
  }







  .masonry-list {
    margin: 40px;
    position: relative;
    width: 90%;
    text-align: center;
  }
  .masonry-list li {
    height: 250px;
    display: inline-block;
    overflow: hidden;
    padding: 0 1px 1px 0;
    width: 250px;
  }
  .masonry-list li:focus a::after, .masonry-list li:hover a::after {
    opacity: 1;
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .masonry-list li:focus .tile-primary-content img, .masonry-list li:hover .tile-primary-content img {
    -moz-transform: scale3d(1.2, 1.2, 0);
    -webkit-transform: scale3d(1.2, 1.2, 0);
    transform: scale3d(1.2, 1.2, 0);
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -moz-transition: -moz-transform 15000ms cubic-bezier(0, 0, 0.8, 0.9);
    -o-transition: -o-transform 15000ms cubic-bezier(0, 0, 0.8, 0.9);
    -webkit-transition: -webkit-transform 15000ms cubic-bezier(0, 0, 0.8, 0.9);
    transition: transform 15000ms cubic-bezier(0, 0, 0.8, 0.9);
  }
  .masonry-list li:focus p,
  .masonry-list li:focus h2,
  .masonry-list li:focus .tile-secondary-content, .masonry-list li:hover p,
  .masonry-list li:hover h2,
  .masonry-list li:hover .tile-secondary-content {
    opacity: 1;
  }
  .masonry-list li a::after {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkY1ODk4MTY1MDNBQTExRTNBN0U2RjUyQkFDMTgxQjI1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkY1ODk4MTY2MDNBQTExRTNBN0U2RjUyQkFDMTgxQjI1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjU4OTgxNjMwM0FBMTFFM0E3RTZGNTJCQUMxODFCMjUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjU4OTgxNjQwM0FBMTFFM0E3RTZGNTJCQUMxODFCMjUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6XrhZfAAAAiUlEQVR42qzT0QmAIBQFUJP8aYh2ah0XaYZogtzGJfrsdQUpi6z3tAtXUfHgjw0RqRiNbqogOs4GnVBbgii8xKAznbHhdZKGoUMdXWOlSDWULgK0lED3DS7UJ+f+SeZAnwgHYiFfEBt5g0RIDhqlSA46EM38HSs6oO7psM1c6lEv/cVV+QXZBRgAnat44PE4W1oAAAAASUVORK5CYII=");
    bottom: 20px;
    content: '';
    display: block;
    height: 17px;
    opacity: 0;
    position: absolute;
    right: 20px;
    width: 17px;
    -moz-transform: translate3d(-10px, -10px, 0);
    -webkit-transform: translate3d(-10px, -10px, 0);
    transform: translate3d(-10px, -10px, 0);
    -moz-transition: all 150ms ease-out;
    -o-transition: all 150ms ease-out;
    -webkit-transition: all 150ms ease-out;
    transition: all 150ms ease-out;
  }
  .masonry-list li.tile-job:focus .tile-primary-content p, .masonry-list li.tile-job:hover .tile-primary-content p, .masonry-list li.tile-facebook:focus .tile-primary-content p, .masonry-list li.tile-facebook:hover .tile-primary-content p, .masonry-list li.tile-twitter:focus .tile-primary-content p, .masonry-list li.tile-twitter:hover .tile-primary-content p {
    -moz-transform: translate3d(150%, 0, 0);
    -webkit-transform: translate3d(150%, 0, 0);
    transform: translate3d(150%, 0, 0);
    -moz-transition: -moz-transform 300ms cubic-bezier(0, 0, 0.4, 1);
    -o-transition: -o-transform 300ms cubic-bezier(0, 0, 0.4, 1);
    -webkit-transition: -webkit-transform 300ms cubic-bezier(0, 0, 0.4, 1);
    transition: transform 300ms cubic-bezier(0, 0, 0.4, 1);
  }
  .masonry-list li.tile-job:focus .tile-secondary-content p, .masonry-list li.tile-job:hover .tile-secondary-content p, .masonry-list li.tile-facebook:focus .tile-secondary-content p, .masonry-list li.tile-facebook:hover .tile-secondary-content p, .masonry-list li.tile-twitter:focus .tile-secondary-content p, .masonry-list li.tile-twitter:hover .tile-secondary-content p {
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -moz-transition: -moz-transform 300ms cubic-bezier(0, 0, 0.4, 1) 150ms;
    -o-transition: -o-transform 300ms cubic-bezier(0, 0, 0.4, 1) 150ms;
    -webkit-transition: -webkit-transform 300ms cubic-bezier(0, 0, 0.4, 1);
    transition: transform 300ms cubic-bezier(0, 0, 0.4, 1) 150ms;
  }
  .masonry-list li.tile-job .tile-primary-content p, .masonry-list li.tile-facebook .tile-primary-content p, .masonry-list li.tile-twitter .tile-primary-content p {
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -moz-transition: -moz-transform 300ms cubic-bezier(0, 0, 0.4, 1) 150ms;
    -o-transition: -o-transform 300ms cubic-bezier(0, 0, 0.4, 1) 150ms;
    -webkit-transition: -webkit-transform 300ms cubic-bezier(0, 0, 0.4, 1);
    transition: transform 300ms cubic-bezier(0, 0, 0.4, 1) 150ms;
  }
  .masonry-list li.tile-job .tile-secondary-content p, .masonry-list li.tile-facebook .tile-secondary-content p, .masonry-list li.tile-twitter .tile-secondary-content p {
    opacity: 1;
    -moz-transform: translate3d(-150%, 0, 0);
    -webkit-transform: translate3d(-150%, 0, 0);
    transform: translate3d(-150%, 0, 0);
    -moz-transition: -moz-transform 300ms cubic-bezier(0, 0, 0.4, 1);
    -o-transition: -o-transform 300ms cubic-bezier(0, 0, 0.4, 1);
    -webkit-transition: -webkit-transform 300ms cubic-bezier(0, 0, 0.4, 1);
    transition: transform 300ms cubic-bezier(0, 0, 0.4, 1);
  }
  .masonry-list li.tile-job .tile-primary-content {
    background-color: #71964f;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

  .masonry-list li.tile-twitter .tile-primary-content {
    background-color: #00afe0;
  }
  .masonry-list li.tile-case .tile-primary-content, .masonry-list li.tile-client .tile-primary-content, .masonry-list li.tile-person .tile-primary-content {
    padding: 0;
  }



  .masonry-list a,
  .masonry-list button {
    color: white;
    display: block;
    height: 100%;
    position: relative;
    width: 100%;
  }
  .masonry-list .tile-primary-content,
  .masonry-list .tile-secondary-content {
    bottom: 0;
    left: 0;
    overflow: hidden;
    padding: 20px;
    position: absolute;
    right: 0;
    top: 0;
  }

  .masonry-list .tile-secondary-content {
    opacity: 0;
    -moz-transition: opacity 250ms ease-out;
    -o-transition: opacity 250ms ease-out;
    -webkit-transition: opacity 250ms ease-out;
    transition: opacity 250ms ease-out;
  }
  .masonry-list .tile-secondary-content p,
  .masonry-list .tile-secondary-content h2 {
    opacity: 0;
    -moz-transition: opacity 200ms ease-in 100ms;
    -o-transition: opacity 200ms ease-in 100ms;
    -webkit-transition: opacity 200ms ease-in;
    transition: opacity 200ms ease-in 100ms;
  }
  .masonry-list p,
  .masonry-list h2 {
    text-transform: uppercase;
  }
  .masonry-list h2 {
    font-size: 12px;
    margin: 0;
    position: absolute;
  }
  .masonry-list p {
    font-size: 28px;
    font-weight: 200;
    line-height: 1.1em;
    margin: 1em 0 0;
  }
  
  .masonry-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }





  ol.gradient-list {
    counter-reset: gradient-counter;
    list-style: none;
    margin: 8px 0;
    padding-left: 1rem;
  }
  ol.gradient-list > li {
    background: white;
    border-radius: 0 0.5rem 0.5rem 0.5rem;
    counter-increment: gradient-counter;
    margin-top: 0.2rem;
    min-height: 1rem;
    padding: 0.2rem 0.2rem 0.2rem 2.3rem;
    position: relative;
  }
  ol.gradient-list > li::before, ol.gradient-list > li::after {
    background: linear-gradient(135deg, #063247 80%, #063247 100%);
    border-radius: 0.3rem 0.3rem 0 0.3rem;
    content: "";
    height: 1.5rem;
    left: -0.2rem;
    overflow: hidden;
    position: absolute;
    top: -0.2rem;
    width: 1.5rem;
  }
  ol.gradient-list > li::before {
    align-items: flex-end;
    content: counter(gradient-counter);
    color: #eee;
    display: flex;
    font: 300 1.5em/1 "Montserrat";
    justify-content: flex-end;
    padding: 0.125em 0.35em 0.125em 0;
    z-index: 1;
  }
  ol.gradient-list > li:before {
    background: linear-gradient(135deg, #063247 0%, rgba(253, 220, 50, 0.2) 100%);
  }

  ol.gradient-list > li + li {
    margin-top: 0.4rem;
  }





  .block-letter{
    font-family: 'Open Sans';
    font-weight: 900;
    text-transform: uppercase;
    font-size: 32px;
    color: #444;
    display: inline-block;
    background: linear-gradient(135deg, #ccc 80%, #eee 100%);
    color: #E96363;
    text-align: center;
    margin: 5px;
    padding: 20px;
    line-height: 50px;
  }

  .wrong {
    background: linear-gradient(135deg, #ccc 80%, #ff0013 100%);
  }

  #cover-spin {
    position:fixed;
    width:100%;
    left:0;right:0;top:0;bottom:0;
    background-color: rgba(255,255,255,0.7);
    z-index:9999;
    display:none;
}

@-webkit-keyframes spin {
	from {-webkit-transform:rotate(0deg);}
	to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

#cover-spin::after {
    content:'';
    display:block;
    position:absolute;
    left:48%;top:40%;
    width:40px;height:40px;
    border-style:solid;
    border-color:black;
    border-top-color:transparent;
    border-width: 4px;
    border-radius:50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}