@import url("_fonts.css");
@import url("_forms.css");
@import url("_tables.css");
@import url("_football.css");

html, body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
}

body {
   position: relative;
    margin: 0;
    font-family: 'metropolis', Arial, sans-serif;
    font-size: 100%;
    color: #43464b;
    line-height: 1.4em;
    padding: 0;
    background-color: #117A65;
    height: 100%;
}

/* Tags
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {

}

h1 {
  line-height: 1.2em;
}

a {
    text-decoration: none;
    color: #00a3cc;
}

a:hover {
    color: #999999;
}

p {
    line-height: 1.4em;
}

p.emphasis {
    font-size: 125%;
    font-weight: 700;
    line-height: 1.5em;
    margin-bottom: 30px;
}

ul {
  margin: 20px 0;
}

li {
    line-height: 1.4em;
    margin-bottom: 10px;
}

img {
    max-width: 100%;
    height: auto;
}

.left {
	float: left;
}

.right {
	float: right;
}

.text-center {
	text-align: center;
}

table tr th.hide-on-mobile, table tr td.hide-on-mobile {
    display: table-cell;
}

/* Sections
   ========================================================================== */

#master-wrapper {
    position: relative;
    background-color: #ffffff;
	width: 100%;
	display: block;
    margin: 0;
}

.section {
    margin: 0;
    padding: 20px 0;
}

.section::after {
    content: "";
    display: block;
    clear: both;
}

.section.full-width {
    display: block;
    float: left;
    width: 100%;
    background-color: #ffffff;
}

.section.grey {
    background-color: #f2f2f2;
    color: #43464b;
}

.section.blue {
    background-color: #154360;
    color: #ffffff;
}

.section.red {
    background-color: #e60000;
    color: #ffffff;
}

.section.light-yellow {
    background-color: #ffeab8;
    color: #43464b;
}

.page-block {
    display: block;
    width: 100%;
    float: left;
    clear: both;
}

header {
    background-color: #117A65;
    color: #ffffff;
}

footer {
    color: #b8b6b4;
    background-color: #1c1f2a;
    webkit-box-shadow: inset 0px 1px 4px 0px rgb(0 0 0 / 10%);
    -moz-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0px 1px 4px 0px rgb(0 0 0 / 10%);
}

footer .content-section {
  margin-bottom: 0;
}

header a, footer a {
    color: #ffffff;
}

header a:hover, footer a:hover {
    color: #ffffff;
    -webkit-transition: color 250ms linear;
    -ms-transition: color 250ms linear;
    transition: color 250ms linear;
}

/* Main nav
   ========================================================================== */

nav#mainnav {
    position: relative;
    width: 95%;
    display: block;
    float: left;
    margin: 20px 0;
    padding: 0 2.5%;
    line-height: 20px;
    clear: both;
}

nav#mainnav a:hover {
  color: #ffffff;
}

nav#mainnav a.nav-toggle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
    font-size: 200%;
    color: #ffffff;
    z-index: 20;
}

nav#mainnav a.nav-toggle:hover {
  -webkit-transition: color 250ms linear;
  -ms-transition: color 250ms linear;
  transition: color 250ms linear;
}

a.navbar-brand {
    display: block;
    width: 70%;
    line-height: 1.2em;
    min-width: 200px;
    max-width: 300px;
    float: none;
    color: #ffffff;
    font-family: 'montserratbold';
    font-size: 24px;
    text-transform: uppercase;
    margin: 0 0 0 20%;
    text-align: left;
}

a.navbar-brand img#logo {
    width: 100%;
    height: auto;
}

a.navbar-brand h1.title {
    font-size: 400%;
    margin: 0;
}

nav#mainnav #nav-menu {
    margin: 0 auto;
    padding: 5px 0;
    text-align: center;
    position: absolute;
    width: 80%;
    height: 100%;
    line-height: 1.2em;
    top: 0;
    left: -80%;
}

nav#mainnav #nav-menu ul#sections,
nav#mainnav #nav-menu ul#call-to-action,
nav#mainnav #nav-menu ul#user-account,
nav#mainnav #nav-menu ul#social-icons {
    width: 100%;
    margin: 20px 0;
    font-size: 93.75%;
    text-transform: none;
    text-align: left;
}

nav#mainnav #nav-menu ul#sections {
    margin-top: 70px;
    background-color: #16A085;
}

nav#mainnav #nav-menu ul#sections li {

}

nav#mainnav #nav-menu ul#sections li:first-child {
  display: block;
}

.mobile-overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    top: 0;
    z-index: 10;
    cursor: pointer;
}

nav#mainnav #nav-menu::after {
    content: "";
    display: block;
    clear: both;
}

nav#mainnav ul {
    display: inline-block;
    padding: 0;
    margin: 0 auto;
}

nav#mainnav ul li {
    margin-bottom: 0;
}

nav#mainnav ul::after {
    content: "";
    display: block;
    clear: both;
}

nav#mainnav li.nav-item{
    display: block;
    position: relative;
    margin: 10px 10px;
}

nav#mainnav li.nav-item  > a.nav-link {
    display: block;
    padding: 5px 10px;
    font-size: 100%;
    line-height: 20px;
    text-transform: uppercase;
}

nav#mainnav li.nav-item  > a.nav-link:hover {
   color: #ffffff;
}

nav#mainnav li.nav-item.current-item  > a.nav-link {
   color: #ffffff;
   text-decoration: underline;
   text-underline-offset: .4em;
}

nav#mainnav li.nav-item > ul {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    list-style: none;
}

nav#mainnav li.nav-item > ul > li.nav-item > a.nav-link {
    padding: 5px 10px;
    background-color: #000000;
}

nav#mainnav ul#user-account, nav#mainnav ul#social-icons {
    font-size: 112.50%;
}

nav#mainnav ul#nav-search {
    float: right;
    line-height: 30px;
    display: none;
}

nav#mainnav form {
    margin: 2px 0;
}

nav#mainnav form input {
    width: 240px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border:1px solid #bebebe;
    padding: 7px;
    height: 36px;
    margin:0px;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
}

nav#mainnav form button {
    background-color: #00a3cc;
    height: 36px;
    padding: 8px 15px;
    border: none;
    color: #fff;
}

/* Footer nav
   ========================================================================== */

   #footer-nav-menu {
       display: block;
       width: 100%;
       float: left;
       text-align: center;
       font-size: 75%;
       text-transform: uppercase;
   }

   #footer-nav-menu ul {
       display: inline-block;
       list-style: none;
       margin: 0 auto;
       padding: 0;
   }

   #footer-nav-menu ul li.nav-item {
       display: block;
       position: relative;
       float: left;
   }

   #footer-nav-menu ul li.nav-item  > a.nav-link {
       padding: 5px 5px;
   }

   #footer-nav-menu ul li.nav-item.current-item  > a.nav-link {
      color: #ffffff;
      text-decoration: underline;
      text-underline-offset: .2em;
   }

.copyright {
    float: left;
    width: 90%;
    padding: 0 5%;
    font-size: 75%;
    text-align:  center;
}

.copyright p {
    margin: 20px 0;
    font-size: 100%;
    line-height: 1.3em
}

ul#footer-nav {
    width: 90%;
    padding: 0 5%;
    display: block;
    float: none;
    margin: 20px 0;
}

ul#footer-nav li.nav-item {
    float: left;
    display: block;
    border-right: 1px solid #666666;
    line-height: 1.3em
}

ul#footer-nav li.nav-item:last-child {
    border-right: none;
}

ul#footer-nav li.nav-item  > a.nav-link {
    padding: 2px 10px;
    font-size: 87.50%;
}

.container {
    width: 100%;
}

.container::after {
    content: "";
    display: block;
    clear: both;
}

.page-content {
	font-family: 'metropolis', Arial, sans-serif;
	font-size: 100%;
}

.breadcrumbs {
    display: block;
    margin: 25px 0 0 0;
    padding: 5%;
    width: 90%;
    float: left;
    clear: both;
}

.content-section {
    display: block;
	  margin: 0 0 25px 0;
    padding: 20px 2.5%;
    width: 95%;
    float: left;
    clear: both;
}

/* Homepage
   ========================================================================== */

h1.greeting {
    font-family: 'metropolis', Arial, sans-serif;
    font-size: 262.50%;
    font-weight: 900;
    line-height: 1.3em;
    margin-bottom: 30px;
}

.greeting span {
    color: #e74c3c;
}

p.intro {
    font-family: 'metropolis', Arial, sans-serif;
    font-size: 150%;
    font-weight: 700;
    line-height: 1.3em;
    margin-bottom: 10px;
}

/* Navigation Blocks
   ========================================================================== */

#page-navigation-blocks {
    width: 100%;
    display: block;
}

#page-navigation-blocks .page-navigation-blocks-row a.navigation-block {
    width: 90%;
    min-height: 200px;
    padding: 20px 5%;
    display: block;
    float: left;
    margin: 0;
    background-color: #ffffff;
    color: #666666;
    text-align: center;
    border-radius:  5px;
}

#page-navigation-blocks .page-navigation-blocks-row a.navigation-block:hover {
    
}

#page-navigation-blocks .page-navigation-blocks-row a.navigation-block span.navigation-block-image img {
	width: 100%;
    min-height: 200px;
}

#page-navigation-blocks .page-navigation-blocks-row a.navigation-block span.navigation-block-content {
    position: relative;
    top: 0;
}

#page-navigation-blocks .page-navigation-blocks-row a.navigation-block:hover span.navigation-block-content {
    
}

#page-navigation-blocks .page-navigation-blocks-row a.navigation-block span {
    display: block;
    min-height: 60px;
    margin-bottom: 20px;
}

#page-navigation-blocks .page-navigation-blocks-row a.navigation-block i {
    font-size: 262.50%;
}

/* About Section
   ========================================================================== */

img#avatar {
    display: block;
    width: 100%;
    height: auto;
    max-width: 512px;
    float: none;
    margin: 30px auto;
}

/* columns
   ========================================================================== */

.column-6 {
    width: 100%;
    display: block;
    float: none;
    padding: 0;
}

/* Widgets */

iframe {
    width: 100%;
}

/* Sections
   ========================================================================== */