/* Site Specific CSS Styles */
/*
 * UTMB "Modern Web" Media Queries
 * Mobile First - Start with everything below 768px (48em)
 * 768px (48em) - Desktop/Tablet and up
 * 980px (61.25em) - Desktop - *Where UTMB nav changes - @mgcooper
 * 1280px (80em) - Desktop Large
 * 1440px (90em) - Desktop X-Large
*/

/* color: #ea2839 !important;  Red */
/* color: #616365 !important;  Gray */
/* color: #3d7edb !important;  Blue */
/* color: #ffc40d !important;  Yellow */
/* color: #ec7a08 !important;  Orange */
/* color: #4e7c8c !important;  Teal */
/* color: #879637 !important;  Green */

/* "Mobile First" (default) - Styles for screens that are smaller than 768px (48em) 
.hello-world { 
    color: green; 
}*/

/* Tablet and up (Sass: $small-screen: 768px;) 
	Styles for screens that are at least 768px (ie 48em) 
@media only screen and (min-width: 48em) {
    .hello-world { 
        color: blue; 
    }
}*/

/* Desktop and up (Sass: $sweetspot-screen: 980px;)
	Styles for screens that are at least 980px (61.25em) 
@media only screen and (min-width: 61.25em) {
    .hello-world { 
        color: red; 
    }
}*/


html,
body {
    background: #fff;
}

a {
    color: #3d7edb;
    text-decoration: none;
}
a:hover {
    color: #ec7a08;
    text-decoration: underline;
}

h1 {
    color: #ddd;
    margin: 40px 0 0 0;
    padding: 0;
    font-size: 1.2125em;
    font-weight: bold;
}

h2 {
    color: #ea2839;
    color: #ec7a08;
    margin: 0 0 20px;
    padding: 0;
    font-weight: bold;
    font-size: 1.7125em;
}
h2 i {
    margin-right: 3px;
}

p {
    font-size: .9em;
}

article {
    text-align: center;
    padding: 20px 20px 60px;
}
@media only screen and (min-width: 48em) {
    article {
        text-align: center;
        padding: 60px 60px 100px;
    }
}

a.branding {
   margin: 0 auto;
   max-width: 270px;
   display: block;
}

#search {
    margin: 0 auto;
    position: static;
}
@media only screen and (max-width: 61.25em) {
    #search {
        background: transparent !important;
        margin: 0 auto !important;
        position: static !important;
        display: block !important;
        overflow: visible !important;
        height: auto !important;
    }
    .search-section {
        background: transparent !important;
    }
    #search h3 {
        display: none !important;
    }
}

footer {
     text-align: center;
     color: #bbb;
}
.foot {
    /*max-width: 100% !important;*/
}
footer a {
    color: #bbb;
}
footer a:hover {
    color: #3d7edb;
}

.footer-links {
   font-size: .75em; 
}
@media only screen and (min-width: 48em) {
    .footer-links {
       font-size: .85em; 
    }
}

.footer-addy {
    font-size: .75em;
}

.footer-copy {
    font-size: .75em;
    padding-top: 20px;
}


/* sticky footer */
@media only screen and (min-width: 48em) {
    html, body {
      height: 100%;
    }
    article {
      min-height: 100%;
      /* equal to footer height */
      margin-bottom: -90px; 
    }
    article:after {
      content: "";
      display: block;
    }
    footer, article:after {
      /* .push must be the same height as footer */
      height: 90px; 
    }
    footer {
      background: #eee;
    }
    .footer-copy {
        font-size: .75em;
        padding-top: 0;
    }
}