/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/


/* Table of Contents
==================================================
    #Base 1280px Grid
    #960 Grid
    #Tablet (Portrait)
    #Mobile (Portrait)
    #Mobile (Landscape)
    #Clearing */

/* #Base - Flexible Column Widths
================================================== */
 
    /* Note: Design for a width of 1200px */
        .container                                  { width: 90%; max-width: 980px; margin: 0 auto; padding: 0;} /* width whatever you want - can even be fixed if you prefer*/
        .container .column,
        .container .columns                         { float: left; display: inline; margin-left: 0.78125%; margin-right: 0.78125%;  }
 		.row                                        { margin-bottom: 20px; }

        .column.alpha, .columns.alpha,
		.column.first, .columns.first               { margin-left: 0; margin-right: 0.78125%; }
        .column.omega, .columns.omega,
		.column.last, .columns.last                 { margin-right: 0; margin-left: 0.78125%; }
        
		.column.alpha.omega, .columns.alpha.omega,
		.column.first.last, .columns.first.last   { margin-left: 0; margin-right: 0; }
		
        .container .one.column,
        .container .one.columns                     { width: 4.6875%; }
        .container .two.columns                     { width: 10.9375%; }
        .container .three.columns                   { width: 17.1875%; }
        .container .four.columns                    { width: 23.4375%; }
        .container .five.columns                    { width: 29.6875%; }
        .container .six.columns                     { width: 35.9375%; }
        .container .seven.columns                   { width: 42.1875%; }
        .container .eight.columns                   { width: 48.4375%; }
        .container .nine.columns                    { width: 54.6875%; }
        .container .ten.columns                     { width: 60.9375%; }
        .container .eleven.columns                  { width: 67.1875%; }
        .container .twelve.columns                  { width: 73.4375%; }
        .container .thirteen.columns                { width: 79.6875%; }
        .container .fourteen.columns                { width: 85.9375%; }
        .container .fifteen.columns                 { width: 92.1875%; }
        .container .sixteen.columns                 { width: 98.4375%; }
 
        .container .one-third.column                { width: 31.7708%; }
        .container .two-thirds.column               { width: 65.1041%; }
		
        .container .one-half.column                 { width: 48.4375%; }
		
        .one-half.column.alpha,
		.one-half.column.first               		{ margin-left: 0; margin-right: 1.5625%; }
 		.one-half.column.omega,
		.one-half.column.last               		{ margin-right: 0; margin-left: 1.5625%; }
		
		.one-half.column.alpha.omega, 
		.one-half.column.first.last					{ margin-left: 0; margin-right: 0; }
        
 
        /* Offsets */
        .container .offset-by-one                   { padding-left: 6.25%; }
        .container .offset-by-two                   { padding-left: 12.5%; }
        .container .offset-by-three                 { padding-left: 18.75%; }
        .container .offset-by-four                  { padding-left: 25%; }
        .container .offset-by-five                  { padding-left: 31.25%; }
        .container .offset-by-six                   { padding-left: 37.5%; }
        .container .offset-by-seven                 { padding-left: 43.75%; }
        .container .offset-by-eight                 { padding-left: 50%; }
        .container .offset-by-nine                  { padding-left: 56.25%; }
        .container .offset-by-ten                   { padding-left: 62.5%; }
        .container .offset-by-eleven                { padding-left: 68.75%; }
        .container .offset-by-twelve                { padding-left: 75%; }
        .container .offset-by-thirteen              { padding-left: 81.25%; }
        .container .offset-by-fourteen              { padding-left: 87.5%; }
        .container .offset-by-fifteen               { padding-left: 93.75%; }

/* #Buttons - adapted from Pure http://purecss.io/start/
================================================== */


.btn {
    /* Structure */
    display: inline-block;
    *display: inline; /*IE 6/7*/
    zoom: 1;
    line-height: normal;
    white-space: nowrap;
    vertical-align: baseline;
    text-align: center;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Firefox: Get rid of the inner focus border */
.btn::-moz-focus-inner {
    padding: 0;
    border: 0;
}

/*csslint outline-none:false*/
input.action,
.btn {
    font-family: inherit;
    font-size: 100%;
    *font-size: 90%; /*IE 6/7 - To reduce IE's oversized button text*/
    *overflow: visible; /*IE 6/7 - Because of IE's overly large left/right padding on buttons */
    padding: 0.5em 1em;
    color: #444; /* rgba not supported (IE 8) */
    color: rgba(0, 0, 0, 0.80); /* rgba supported */
    *color: #444; /* IE 6 & 7 */
    border: 1px solid #999;  /*IE 6/7/8*/
    border: none rgba(0, 0, 0, 0);  /*IE9 + everything else*/
    background-color: #E6E6E6;
    text-decoration: none;
    border-radius: 2px;
}

.btn-hover,
.btn:hover,
.btn:focus {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10)));
    background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
    background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10));
    background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
    background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
}
.btn:focus {
    outline: 0;
}
.btn-active,
.btn:active {
    box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
}

.btn[disabled],
.btn-disabled,
.btn-disabled:hover,
.btn-disabled:focus,
.btn-disabled:active {
    border: none;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    filter: alpha(opacity=40);
    -khtml-opacity: 0.40;
    -moz-opacity: 0.40;
    opacity: 0.40;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-hidden {
    display: none;
}

/* Firefox: Get rid of the inner focus border */
.btn::-moz-focus-inner{
    padding: 0;
    border: 0;
}

.btn-primary,
.btn-selected,
a.btn-primary,
a.btn-selected {
    background-color: #0094e1;
    color: #fff;
}


.btn-success, .btn-error, .btn-warning, .btn-secondary {
    color: white;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.btn-success {
    background: none repeat scroll 0 0 rgb(28, 184, 65);
}
.btn-error {
    background: none repeat scroll 0 0 rgb(202, 60, 60);
}
.btn-warning {
    background: none repeat scroll 0 0 rgb(223, 117, 20);
}
.btn-secondary {
    background: none repeat scroll 0 0 rgb(66, 184, 221);
}

/* #Form layout - adapted from Pure http://purecss.io/start/
================================================== */
.form input[type="text"],
.form input[type="password"],
.form input[type="email"],
.form input[type="url"],
.form input[type="date"],
.form input[type="month"],
.form input[type="time"],
.form input[type="datetime"],
.form input[type="datetime-local"],
.form input[type="week"],
.form input[type="number"],
.form input[type="search"],
.form input[type="tel"],
.form input[type="color"],
.form select,
.form textarea {
    padding: 0.5em 0.6em;
    display: inline-block;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px #ddd;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.form input:not([type]) {
    padding: 0.5em 0.6em;
    display: inline-block;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px #ddd;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */
/* May be able to remove this tweak as color inputs become more standardized across browsers. */
.form input[type="color"] {
    padding: 0.2em 0.5em;
}


.form input[type="text"]:focus,
.form input[type="password"]:focus,
.form input[type="email"]:focus,
.form input[type="url"]:focus,
.form input[type="date"]:focus,
.form input[type="month"]:focus,
.form input[type="time"]:focus,
.form input[type="datetime"]:focus,
.form input[type="datetime-local"]:focus,
.form input[type="week"]:focus,
.form input[type="number"]:focus,
.form input[type="search"]:focus,
.form input[type="tel"]:focus,
.form input[type="color"]:focus,
.form select:focus,
.form textarea:focus {
    outline: 0;
    outline: thin dotted \9; /* IE6-9 */
    border-color: #129FEA;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.form input:not([type]):focus {
    outline: 0;
    outline: thin dotted \9; /* IE6-9 */
    border-color: #129FEA;
}

.form input[type="file"]:focus,
.form input[type="radio"]:focus,
.form input[type="checkbox"]:focus {
    outline: thin dotted #333;
    outline: 1px auto #129FEA;
}
.form .checkbox,
.form .radio {
    margin: 0.5em 0;
    display: block;
}

.form input[type="text"][disabled],
.form input[type="password"][disabled],
.form input[type="email"][disabled],
.form input[type="url"][disabled],
.form input[type="date"][disabled],
.form input[type="month"][disabled],
.form input[type="time"][disabled],
.form input[type="datetime"][disabled],
.form input[type="datetime-local"][disabled],
.form input[type="week"][disabled],
.form input[type="number"][disabled],
.form input[type="search"][disabled],
.form input[type="tel"][disabled],
.form input[type="color"][disabled],
.form select[disabled],
.form textarea[disabled] {
    cursor: not-allowed;
    background-color: #eaeded;
    color: #cad2d3;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.form input:not([type])[disabled] {
    cursor: not-allowed;
    background-color: #eaeded;
    color: #cad2d3;
}
.form input[readonly],
.form select[readonly],
.form textarea[readonly] {
    background: #eee; /* menu hover bg color */
    color: #777; /* menu text color */
    border-color: #ccc;
}

.form input:focus:invalid,
.form textarea:focus:invalid,
.form select:focus:invalid {
    color: #b94a48;
    border-color: #ee5f5b;
}
.form input:focus:invalid:focus,
.form textarea:focus:invalid:focus,
.form select:focus:invalid:focus {
    border-color: #e9322d;
}
.form input[type="file"]:focus:invalid:focus,
.form input[type="radio"]:focus:invalid:focus,
.form input[type="checkbox"]:focus:invalid:focus {
    outline-color: #e9322d;
}
.form select {
    border: 1px solid #ccc;
    background-color: white;
}
.form select[multiple] {
    height: auto;
}
.form label {
    margin: 0.5em 0 0.2em;
}
.form fieldset {
    margin: 0;
    padding: 0.35em 0 0.75em;
    border: 0;
}
.form legend {
    display: block;
    width: 100%;
    padding: 0.3em 0;
    margin-bottom: 0.3em;
    color: #333;
    border-bottom: 1px solid #e5e5e5;
}

.form-stacked input[type="text"],
.form-stacked input[type="password"],
.form-stacked input[type="email"],
.form-stacked input[type="url"],
.form-stacked input[type="date"],
.form-stacked input[type="month"],
.form-stacked input[type="time"],
.form-stacked input[type="datetime"],
.form-stacked input[type="datetime-local"],
.form-stacked input[type="week"],
.form-stacked input[type="number"],
.form-stacked input[type="search"],
.form-stacked input[type="tel"],
.form-stacked input[type="color"],
.form-stacked select,
.form-stacked label,
.form-stacked textarea {
    display: block;
    margin: 0.25em 0;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.form-stacked input:not([type]) {
    display: block;
    margin: 0.25em 0;
}
.form-aligned input,
.form-aligned textarea,
.form-aligned select,
.form-message-inline,
.form-stacked label {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: middle;
}
.form-aligned textarea {
    vertical-align: top;
}

/* Aligned Forms */
.form-aligned .control-group {
    margin-bottom: 0.5em;
}
.form-aligned .control-group label {
    text-align: right;
    display: inline-block;
    vertical-align: middle;
    width: 10em;
    margin: 0 1em 0 0;
}
.form-aligned .controls {
    margin: 1.5em 0 0 10em;
}

/* Rounded Inputs */
.form input.input-rounded,
.form .input-rounded {
    border-radius: 2em;
    padding: 0.5em 1em;
}

/* Grouped Inputs */
.form .group fieldset {
    margin-bottom: 10px;
}
.form .group input {
    display: block;
    padding: 10px;
    margin: 0;
    border-radius: 0;
    position: relative;
    top: -1px;
}
.form .group input:focus {
    z-index: 2;
}
.form .group input:first-child {
    top: 1px;
    border-radius: 4px 4px 0 0;
}
.form .group input:last-child {
    top: -2px;
    border-radius: 0 0 4px 4px;
}
.form .group button {
    margin: 0.35em 0;
}

.form .input-1 {
    width: 100%;
}
.form .input-2-3 {
    width: 66%;
}
.form .input-1-2 {
    width: 50%;
}
.form .input-1-3 {
    width: 33%;
}
.form .input-1-4 {
    width: 25%;
}

/* Inline help for forms */
.form-message-inline {
    display: inline-block;
    padding-left: 0.3em;
    color: #666;
    vertical-align: middle;
    font-size: 0.875em;
}

/* Block help for forms */
.form-message {
    display: block;
    color: #666;
    font-size: 0.875em;
}


/* ============================================================
  COMMON
============================================================ */
.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}

.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ============================================================
  SWITCH 1 - ROUND
============================================================ */
input.cmn-toggle-round + label {
  padding: 2px;
  width: 80px;
  height: 40px;
  background-color: #dddddd;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
  border-radius: 40px;
}
input.cmn-toggle-round + label:before, 
input.cmn-toggle-round + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
input.cmn-toggle-round + label:before {
  right: 1px;
  background-color: #f1f1f1;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
  border-radius: 40px;
  -webkit-transition: background 0.4s;
  -moz-transition: background 0.4s;
  -o-transition: background 0.4s;
  transition: background 0.4s;
}
input.cmn-toggle-round + label:after {
  width: 38px;
  background-color: #fff;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  -webkit-transition: margin 0.4s;
  -moz-transition: margin 0.4s;
  -o-transition: margin 0.4s;
  transition: margin 0.4s;
}
input.cmn-toggle-round:checked + label:before {
  background-color: #8ce196;
}
input.cmn-toggle-round:checked + label:after {
  margin-left: 40px;
}

/* ============================================================
  SWITCH 2 - ROUND FLAT
============================================================ */
input.cmn-toggle-round-flat + label {
  padding: 2px;
  width: 120px;
  height: 60px;
  background-color: #dddddd;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  -ms-border-radius: 60px;
  -o-border-radius: 60px;
  border-radius: 60px;
  -webkit-transition: background 0.4s;
  -moz-transition: background 0.4s;
  -o-transition: background 0.4s;
  transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:before, input.cmn-toggle-round-flat + label:after {
  display: block;
  position: absolute;
  content: "";
}
input.cmn-toggle-round-flat + label:before {
  top: 2px;
  left: 2px;
  bottom: 2px;
  right: 2px;
  background-color: #fff;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  -ms-border-radius: 60px;
  -o-border-radius: 60px;
  border-radius: 60px;
  -webkit-transition: background 0.4s;
  -moz-transition: background 0.4s;
  -o-transition: background 0.4s;
  transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:after {
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: 52px;
  background-color: #dddddd;
  -webkit-border-radius: 52px;
  -moz-border-radius: 52px;
  -ms-border-radius: 52px;
  -o-border-radius: 52px;
  border-radius: 52px;
  -webkit-transition: margin 0.4s, background 0.4s;
  -moz-transition: margin 0.4s, background 0.4s;
  -o-transition: margin 0.4s, background 0.4s;
  transition: margin 0.4s, background 0.4s;
}
input.cmn-toggle-round-flat:checked + label {
  background-color: #8ce196;
}
input.cmn-toggle-round-flat:checked + label:after {
  margin-left: 60px;
  background-color: #8ce196;
}

/* ============================================================
  SWITCH 3 - YES NO
============================================================ */

input.cmn-toggle-yes-no + label {
  padding: 2px;
  width: 80px;
  height: 30px;
}
input.cmn-toggle-yes-no + label:before, input.cmn-toggle-yes-no + label:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  color: #fff;
  font-family: "Cambo", serif;
  font-size: 18px;
  text-align: center;
  line-height: 34px;
}
input.cmn-toggle-yes-no + label:before {
  background-color: #dddddd;
  content: attr(data-off);
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  transition: transform 0.5s;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}



input.cmn-toggle-yes-no + label:after {
  background-color: #8ce196;
  content: attr(data-on);
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}



input.cmn-toggle-yes-no:checked + label:before {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
input.cmn-toggle-yes-no:checked + label:after {
  -webkit-transform: rotateY(0);
  -moz-transform: rotateY(0);
  -ms-transform: rotateY(0);
  -o-transform: rotateY(0);
  transform: rotateY(0);
}

/* ============================================================
  SWITCH 3 - YES NO
============================================================ */

input.cmn-toggle-radio + label {
  padding: 2px;
  width: 80px;
  height: 30px;
}
input.cmn-toggle-radio + label:before, 
input.cmn-toggle-radio + label:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  color: #fff;
  font-family: "Cambo", serif;
  font-size: 18px;
  text-align: center;
  line-height: 34px;
}
input.cmn-toggle-radio + label:before {
  background-color: #dddddd;
  content: attr(data-off);
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  transition: transform 0.5s;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}



input.cmn-toggle-radio + label:after {
  background-color: #0094e1;
  content: attr(data-on);
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}



input.cmn-toggle-radio:checked + label:before {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
input.cmn-toggle-radio:checked + label:after {
  -webkit-transform: rotateY(0);
  -moz-transform: rotateY(0);
  -ms-transform: rotateY(0);
  -o-transform: rotateY(0);
  transform: rotateY(0);
}


@media only screen and (max-width : 480px) {
    .form button[type="submit"] {
        margin: 0.7em 0 0;
    }

    .form input:not([type]),
    .form input[type="text"],
    .form input[type="password"],
    .form input[type="email"],
    .form input[type="url"],
    .form input[type="date"],
    .form input[type="month"],
    .form input[type="time"],
    .form input[type="datetime"],
    .form input[type="datetime-local"],
    .form input[type="week"],
    .form input[type="number"],
    .form input[type="search"],
    .form input[type="tel"],
    .form input[type="color"],
    .form label {
        margin-bottom: 0.3em;
        display: block;
    }

    .group input:not([type]),
    .group input[type="text"],
    .group input[type="password"],
    .group input[type="email"],
    .group input[type="url"],
    .group input[type="date"],
    .group input[type="month"],
    .group input[type="time"],
    .group input[type="datetime"],
    .group input[type="datetime-local"],
    .group input[type="week"],
    .group input[type="number"],
    .group input[type="search"],
    .group input[type="tel"],
    .group input[type="color"] {
        margin-bottom: 0;
    }

    .form-aligned .control-group label {
        margin-bottom: 0.3em;
        text-align: left;
        display: block;
        width: 100%;
    }

    .form-aligned .controls {
        margin: 1.5em 0 0 0;
    }

    .form-message-inline,
    .form-message {
        display: block;
        font-size: 0.75em;
        /* Increased bottom padding to make it group with its related input element. */
        padding: 0.2em 0 0.8em;
    }
}


    @media only screen and (min-width: 960px)  {
		 .container 	{ min-width: 950px; }
	}
/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .container                                  { width: 748px; }

    }


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
        .container { width: 90%; }
        .container .columns,
        .container .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column,
        .container .one-half.column,
 		.container .one-half.column               		  { width: 100%; }
		
        .one-half.column.alpha,
		.one-half.column.first,
 		.one-half.column.omega,
		.one-half.column.last               		{ margin: 0;  }

        /* Offsets */
        .container .offset-by-one,
        .container .offset-by-two,
        .container .offset-by-three,
        .container .offset-by-four,
        .container .offset-by-five,
        .container .offset-by-six,
        .container .offset-by-seven,
        .container .offset-by-eight,
        .container .offset-by-nine,
        .container .offset-by-ten,
        .container .offset-by-eleven,
        .container .offset-by-twelve,
        .container .offset-by-thirteen,
        .container .offset-by-fourteen,
        .container .offset-by-fifteen { padding-left: 0; }

    }



/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }