/* ==========================================================================
   Large > 960px - 12 columns
   ========================================================================== */

@media (min-width: 961px) {
    .container {
        width: 1260px;
        margin: 0 auto;
    }
}


/* ==========================================================================
   960px - 12 columns
   ========================================================================== */

@media (max-width: 960px) {
    .container {
        width: 960px;
        margin: 0 auto;
    }
}


/* Global */
[class*="grid-"] {
    float: left;
    display: inline;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

[class*="grid-"] img:not(.odyssey-banner) {
    max-width: 100%;
    width: auto;
    margin: 0 auto;
}

.responsiveMenu {
    display: none;
    margin: 3px auto;
}

.group:before, .group:after {
    content: "";
    display: table;
    line-height: 0;
}

.group:after {
    clear: both;
}

/* Nested elements */
.alpha {
    margin-left: 0px;
}

.omega {
    margin-right: 0px;
}

/* Grids */
.group .grid-1 {
    width: 8.333333%;
}

.group .grid-2 {
    width: 16.666666%;
}

.group .grid-3 {
    width: 25%;
}

.group .grid-4 {
    width: 33.333333%;
}

.group .grid-5 {
    width: 41.666666%;
}

.group .grid-6 {
    width: 50%;
}

.group .grid-7 {
    width: 58.333333%;
}

.group .grid-8 {
    width: 66.666666%;
}

.group .grid-9 {
    width: 75%;
}

.group .grid-10 {
    width: 83.333333%;
}

.group .grid-11 {
    width: 91.666666%;
}

.group .grid-12 {
    width: 100%;
}

/* Offset Extra Space */
.group .offset-1 {
    padding-left: 8.333333%;
}

.group .offset-2 {
    padding-left: 16.666666%;
}

.group .offset-3 {
    padding-left: 24%;
}

.group .offset-4 {
    padding-left: 33.333333%;
}

.group .offset-5 {
    padding-left: 41.666666%;
}

.group .offset-6 {
    padding-left: 50%;
}

.group .offset-7 {
    padding-left: 58.333333%;
}

.group .offset-8 {
    padding-left: 66.666666%;
}

.group .offset-9 {
    padding-left: 75%;
}

.group .offset-10 {
    padding-left: 83.333333%;
}

.group .offset-11 {
    padding-left: 91.666666%;
}


/* ==========================================================================
   768px - 12 columns - 20px gutter 
   ========================================================================== */

@media (min-width: 768px) and (max-width: 959px) {
    
    /* Container */
    .container {
        width: auto;
        max-width: 959px;
        margin: 0 auto;
        padding: 0 10px;
    }
    
    /* Global */
    [class*="grid-"] {
        float: left;
        display: inline;
        margin-left: 0;
        margin-right: 0;
    }
    
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media only screen and (max-width: 767px) {
    
    /* Container */
    .container {
        width: auto;
        padding: 0 10px;
    }
    
    /* Global */
    [class*="grid-"] {
        display: block;
        margin-left: 0px;
        margin-right: 0px;
    }
    
    /* Grids */
    .group .grid-1,
    .group .grid-2,
    .group .grid-3,
    .group .grid-4,
    .group .grid-5,
    .group .grid-6,
    .group .grid-7,
    .group .grid-8,
    .group .grid-9,
    .group .grid-10,
    .group .grid-11,
    .group .grid-12 {
        width: 100%;
    }
    
    /* Offset Extra Space */
    .group .offset-1,
    .group .offset-2,
    .group .offset-3,
    .group .offset-4,
    .group .offset-5,
    .group .offset-6,
    .group .offset-7,
    .group .offset-8,
    .group .offset-9,
    .group .offset-10,
    .group .offset-11 {
        padding-left: 0;
    }
    
}