/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/UyBMtLsHKBKXelqf4x7VRQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v11/ObQr5XYcoH0WBoUxiaYK3_Y6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v11/H2DMvhDLycM56KNuAtbJYA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

:root {
  --blue:#007898; /* blue */
  --purple:#922254; /* purple */
  --paleblue:#98bbc1; /* pale blue */
  --pink:#9a689b; /* pink */
  --green:#a7bd02; /* green */
  --darkblue:#323944; /* dark blue */
};


.group:after {
  content: "";
  display: table;
  clear: both;
}

* {
    padding:0;
    margin:0;
    box-sizing: border-box;
}

.wrap {
  clear:both;
  position:relative;
  width:1080px;
  max-width:100%;
  padding:0 20px;
  margin:0 auto;
}

#burger,
#mobnav {
  display:none;
}

body {
    font-size:62.5%;
    font-family: 'Lato', sans-serif;
    background-color:#eaedf2;
    color:inherit;
}

h1, h2, h3, h4, h5 ,h6 {
  font-family: 'Raleway', sans-serif;
  font-weight: normal;
}

header {
    width:100%;
    background-color:#fff;
    float:left;
    clear:left;
    margin-bottom:1.2em;
}

  .blueline {
    background-color:var(--blue);
    width:100%;
    height:4px;
  }
      
      .blue {
        background-color:var(--blue);
      }
      
      .purple {
        background-color:var(--purple);
      }
      
      .paleblue {
        background-color:var(--paleblue);
      }
      
      .pink {
        background-color:var(--pink);
      }
      
      .green {
        background-color:var(--green);
      }
      
      .darkblue {
        background-color:var(--darkblue);
      }

    nav {
      float:left;
      clear:left;
      width:100%;
    }
  
      nav ul {
        list-style: none;
        float:left;
        width:100%;
        text-align: center;
      }
      
        #mainnav {
          display:table;
          border-radius: 0.5em;
          overflow: hidden;
        }
      
        #mainnav li {
          float:none;
          display:table-cell;
        }
        
          #mainnav li a {
            float:left;
            color:#fff;
            text-decoration: none;
            font-size:1.6em;
            padding:1em;
            position: relative;
            z-index: 12;
            width:100%;
          }
          
            #mainnav > li:nth-of-type(4n+1) > a {
              background-color:var(--purple);
            }
            
              #mainnav > li:nth-of-type(4n+1) a:hover {
                background-color:#a33465; /* purple hover */
              }
            
            #mainnav > li:nth-of-type(4n+2) > a {
              background-color:var(--paleblue);
            }
            
              #mainnav > li:nth-of-type(4n+2) a:hover {
                background-color:#b4cfd4; /* pale blue hover */
              }
            
            #mainnav > li:nth-of-type(4n+3) > a {
              background-color:var(--pink);
            }
            
              #mainnav > li:nth-of-type(4n+3) a:hover {
                background-color:#ab7bac; /* pink hover */
              }
            
            #mainnav > li:nth-of-type(4n) > a {
              background-color:var(--green);
            }
            
              #mainnav > li:nth-of-type(4n) a:hover {
                background-color:#bcd024; /* green hover */
              }
    
    #mainnav .subnav {
      position:absolute;
      padding-top:5.1em;
      width:auto;
      display:none;
    }
    
      #mainnav .subnav li {
        float:left;
        clear:left;
        width:100%;
      }
    
        #mainnav .subnav li a {
          float:left;
          text-align: left;
          width:100%;
        }
      
        .subnav li a {
          background-color:var(--darkblue);
          padding:0.8em 1em;
          position: relative;
          z-index:10;
          font-size:1.4em;
          border-bottom:1px solid var(--paleblue);
        }
        
          .subnav li a:hover {
            background-color:#3b4758; /* dark blue hover */
          }
        
        #mainnav li:hover > ul {
          display:block;
        }

    #logo {
      clear:both;
      display:block;
      margin:3em auto;
      width:382px;
      max-width:90%;
    }
  
    #logo img {
        max-width:100%;
        display:block;
    }

.align_left {
  float:left;
}

.align_right {
  float:right;
}

.align_center {
  text-align: center;
}

img.align_left {
  margin:0.5em 1em 1em 0;
}

img.align_right {
  margin:0.5em 0 1em 1em;
}

img.align_center {
  display:block;
  margin-left:auto;
  margin-right:auto;
}

.fcw {
  float:left;
  clear:left;
  width:100%;
}

.fl {
    float:left;
}

.fr {
    float:right;
}

.cl {
    clear:left;
}

.cb {
    clear:both;
}

.mr {
  margin-right:1.2em;
}

.ml {
  margin-left:1.2em;
}

.mb {
  margin-bottom:1.2em;
}

.w1 {
    width:calc((99.9% - (11 * 1.2em)) / 12);
  }
.w2 {
  width:calc(((99.9% - (11 * 1.2em)) / 12 * 2) + (1.2em));
}
.w3 {
  width:calc(((99.9% - (11 * 1.2em)) / 12 * 3) + (1.2em * 2));
}
.w4 {
  width:calc(((99.9% - (11 * 1.2em)) / 12 * 4) + (1.2em * 3));
}
.w5 {
  width:calc(((99.9% - (11 * 1.2em)) / 12 * 5) + (1.2em * 4));
}
.w6 {
  width:calc(((99.9% - (11 * 1.2em)) / 12 * 6) + (1.2em * 5)); 
}
.w7 {
  width:calc(((99.9% - (11 * 1.2em)) / 12 * 7) + (1.2em * 6)); 
}
.w8 {
  width:calc(((99.9% - (11 * 1.2em)) / 12 * 8) + (1.2em * 7)); 
}
.w9 {
  width:calc(((99.9% - (11 * 1.2em)) / 12 * 9) + (1.2em * 8)); 
}
.w10 {
  width:calc(((99.9% - (11 * 1.2em)) / 12 * 10) + (1.2em * 9)); 
}
.w11 {
  width:calc(((99.9% - (11 * 1.2em)) / 12 * 11) + (1.2em * 10)); 
}

.fullwidth {
  width:100%;
}

.box {
  text-decoration:none;
  color:#fff;
  padding:4%;
  border-radius:0.5em;
}

  .box > h2 {
    font-size:2.4em;
    margin-bottom:1em;
  }
  
a.pink:hover {
  background-color:#ab7bac; /* pink hover */
}

a.purple:hover {
  background-color:#a33465; /* purple hover */
}

a.paleblue:hover {
  background-color:#b4cfd4; /* pale blue hover */
}

a.blue:hover {
  background-color:#2893b0; /* blue hover */
}

p a,
li a{
  color:var(--paleblue);
}

iframe {
  max-width:100%;
  margin-bottom:2em;
}
  
footer {
  float:left;
  width:100%;
  clear:both;
  padding:2em;
  text-align: center;
  margin:1.2em 0;
  border-radius:0.5em;
}

  footer p {
    float:right;
    color:#fff;
    font-size:1.6em;
    margin-left:2em;
    margin-top:0.3em;
  }
  
    footer p span {
      color:var(--green);
      font-weight:bold;
    }
  
  .social-icons {
    float:left;
  }
  
    .social-icons a {
      float:left;
      width:30px;
      margin-right:1em;
    }
    
      .social-icons a img {
        width:100%;
        display:block;
      }

.sponsor {
  margin-bottom:1.2em;
  float:left;
  clear:left;
  width:100%;
}

  .sponsor img {
    width:100%;
    border-radius:0.5em;
  }

.affiliates {
  /* background-color:var(--blue);
  padding:2em;
  border-radius:0.5em; */
}

  .affiliates h4 {
    font-size:1.6em;
    margin-bottom:0.5em;
  }

  .affiliates a {
    display:block;
    margin-bottom:0.5em;
    background-color:#fff;
    border-radius:0.5em;
    overflow:hidden;
  }

    .affiliates a img {
      width:100%;
      display:block;
      transition: 0.25s ease-out;
    }

    .affiliates a:last-of-type {
      margin-bottom:0;
    }

    .affiliates a:hover img {
      opacity:0.8;
    }
    
@media screen and (max-width:799px) {

}

@media screen and (max-width:549px) {
  
  .wrap {
    padding:0 10px;
  }
  
  #burger,
  #mobnav{
    display:block;
  }
  
  #mainnav {
    display:none;
  }
  
  #burger {
    width:32px;
    display:block;
    margin:1em auto;
  }
  
    #burger img {
      max-width:100%;
      display:block;
    }
  
  .word {
    font-size: 1.4em;
  }
  
  #mobnav li,
  #mobnav li a{
    float:left;
    clear:left;
    width:100%;
    position:relative;
  }
  
  #mobnav .subnav li a{
    text-align: center;
    background-color:#222;
  }
  
    #mobnav li a {
      font-size:1.6em;
      text-decoration: none;
      border-bottom:1px solid var(--paleblue);
      padding:0.8em 1em;
    }
    
    #mobnav li a.tri {
      position:absolute;
      right:0;
      top:0;
      width:43px;
      padding:1em;
      border:none;
    }
    
      .tri img {
        max-width:100%;
        display:block;
      }
}

@media screen and (max-width:349px) {
  .fourwords {
    flex-wrap:wrap;
  }
  
    .word {
      width:50%;
    }
}