@viewport {
    width: device-width;
}

@-ms-viewport {
    width: device-width;
}

/*--------------Body and structure---------------------*/

@font-face {
    font-family: 'ChunkFiveRegular';
    src: url("fonts/Chunkfive-webfont.634e8faebe2d.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

html, body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    line-height: 1.5em;
    color: #333;
}

p {
    padding: 5px 0;
    text-align: justify;
}

strong {
    font-weight: bold;
}

a {
    outline: 0;
}

a, .logo:hover {
    text-decoration: none;
    color: #20b2aa;
}

.logo:hover {
    color: white;
}

a:hover {
    text-decoration: underline;
    color: #20a2aa;
    background-color: none;
}

h2 {
    color: #20b2aa;
    font-weight: bold;
    font-size: 1.5em;
    padding: 30px 0 10px 0;    
}

h3 {
    color: #222;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    padding-top: 20px;
}

/*--------------Sections----------------------*/

.main {
    margin: 0 auto;
    display: block;
}

.section {
    border-top: #babdb6 solid 4px;
    margin-top: 20px;
}

.fixed-container {
    width: 100%;
    position: fixed;
    right: 0px;
}

#home {
    padding-top: 80px;
}

/*----------------Navigation------------------*/

.nav-container {
    background-color: #20b2aa;
    width: 100%;  
}

.nav {
    margin: 0 auto;
    padding: 30px 10px 10px 0px; 
    color: white;  
}

.nav li {
    display: inline-block;
    padding: 0 15px;
    line-height: 0px
}

.nav a {
    color: white;
}

.navbar .container {
    width: auto;
    max-width: 960px;
}

.navbar .nav > li > a {
    color: white;
    text-shadow: 0 0 0;
}

.navbar .nav > li > a:hover {
    text-decoration: underline;
    color: white;
    background-color: #20b2aa;
}

.navbar .btn-navbar {
    color: #20b2aa;
    background-color: white;
    background-image: none;
    border-color: white;
    margin-top: 25px;
}

.navbar .btn-navbar .icon-bar {
    background-color: #20b2aa;
}
.navbar .btn-navbar:hover, .navbar .btn-navbar:active, .navbar .btn-navbar.active, .navbar .btn-navbar.disabled, .navbar .btn-navbar[disabled] {
    color: #20b2aa;
    background-color: white;
}

.navbar .btn-navbar:hover .icon-bar, .navbar .btn-navbar:active .icon-bar, .navbar .btn-navbar.active .icon-bar, .navbar .btn-navbar.disabled .icon-bar, .navbar .btn-navbar[disabled]  .icon-bar {
    background-color: #20b2aa;
}

.navbar .brand {
    color: white;
    padding-left: 0;
    font-family: 'ChunkFiveRegular';
    font-size: 1.5em;
    text-shadow: 0 0 0;
    display: inline-block;
    padding: 30px 30px 20px 30px;
}

/*-----------------Links and images-----------------*/

.learn-more {
    float: right;
    color: #20b2aa;
    padding-top: 20px;
}

.view-participants {
    cursor: pointer;
}

.top-intro {
    font-size: 1.5em;
    line-height: 1.5em;
}

.intro-img {
    float: right;
}

.organizations li {
    list-style: none;
}

.org-name {
    font-weight: bold;
    padding-top: 10px;
}

#sponsors img {
    padding-top: 30px;
}

/*-------------Footer-----------------------*/

.footer {
    padding: 30px 0px 0px 0px;
    margin: 0 auto;
}

.footer ul{
    margin: 0 auto;
}

.footer-links {
    padding: 20px 10px 10px 20px;
    color: #333;
    max-width: 960px;
}

.footer-art {
    background: url("img/footer-balloons.971f4a9625ec.png") no-repeat bottom right; 
    height: 160px;
}

.footer-grass {
    background: url("img/footer-grass.3a2d2d2f8f0f.png");
    height: 39px;
}

.footer-wrapper {
    background-color: #d1d8cd;
}

.cc-description {
    font-size: 11px;
}

/*------------------Laptops&larger screens---------------------------*/

@media (min-width: 979px) {
    .footer-art {
        background: url("img/footer-balloons.971f4a9625ec.png") no-repeat bottom; 
    }    
}

/*------------------Tablets--------------------------*/

@media (max-width: 767px) {
    
    .footer{
        margin-left: -20px;
        margin-right: -20px;
    }
    
    .nav {
        padding: 20px 10px 10px 0px;
    }
    
    .nav-collapse .nav {
        padding-bottom: 0;
        margin-bottom: 0;
        margin-top: -20px;
    }
    
    .nav li {
        padding: 20px 10px;
        display: block;
        width: 100%;
        border-top: 1px solid #fff;
    }
}

/*-------------------small tablet---------------------------*/

@media (min-width: 479px) and (max-width: 767px) {
    .span6, .span4, .span9 {
        width: 45%;
        margin: 10px;
        display: inline-block;
    }
}

/*----------------SmartPhones----------------------*/

/*------------Navigation-------------------*/

@media (max-width: 479px) {
    
    .navbar .brand {
        padding: 20px;
        width: 200px;
    }
    
    .navbar .btn-navbar {
        margin-top: 25px;
        margin-right: 10px;
    }

    .nav-collapse .nav {
        padding-bottom: 0;
        margin-bottom: 0;
        margin-top: -20px;
    }

    .nav li {
        padding: 20px 10px;
        display: block;
        width: 100%;
        border-top: 1px solid #fff;
    }

    .span6, .span4, .span9 {
        width: auto;
        margin: 20px auto;
        display: block;
    }
}

/*----------------------Smallphones------------------------*/

@media (max-width: 290px) {
    
    #home {
        padding-top: 140px;
    }
}