/**
 *        Name: grid.css
 *
 *        T.O.C
 *
 *        =Base Grid
 *        =Large Display
 *        =Tablet (Portrait)
 *        =Mobile (Portrait and Landscape )
 *        =Portrait and landscape
 *        =Landscape
 *        =Align
 *        =Responsive Images and Embeds
 *        =Clearing
 *        =ResponsiveFormInputs
 *
 */


/* ==========================================================================
   =Base Grid
   ========================================================================== */

        .row {
                position: relative;
                width: 940px;
                margin: 0 auto;
        }

        .row .row {
                width: auto;
                margin: 0;
         }

        .span1,
        .span2,
        .span3,
        .span4,
        .span5,
        .span6,
        .span7,
        .span8,
        .span9,
        .span10,
        .span11,
        .span12 { float: left; }

        .span1 {
                width: 60px;
                margin-left: 20px;
        }

         .span1swa {
                width: 180px;
                margin-left: 10px;
                margin-right: 10px;
                background: #2255aa;
        }

        .span2 {
                width: 140px;
                margin-left: 20px;
        }

        .span3 {
                width: 220px;
                margin-left: 20px;
        }

        .span4 {
                width: 300px;
                margin-left: 20px;
        }

        .span5 {
                width: 380px;
                margin-left: 20px;
        }

        .span6 {
                width: 460px;
                margin-left: 20px;
        }

        .span7 {
                width: 540px;
                margin-left: 20px;
        }

        .span8 {
                width: 620px;
                margin-left: 20px;
        }

        .span9 {
                width: 700px;
                margin-left: 20px;
        }

        .span10 {
                width: 780px;
                margin-left: 20px;
        }

        .span11 {
                width: 860px;
                margin-left: 20px;
        }

        .span12 {
                width: 940px;
                margin-left: 20px;
        }

        .span1:first-child,
        .span1swa:first-child,
        .span2:first-child,
        .span3:first-child,
        .span4:first-child,
        .span5:first-child,
        .span6:first-child,
        .span7:first-child,
        .span8:first-child,
        .span9:first-child,
        .span10:first-child,
        .span11:first-child,
        .span12:first-child { margin-left: 0; }

        .visible-phone { display: none !important; }
        .visible-tablet { display: none !important; }
        .hidden-desktop { display: none !important; }
        .visible-desktop { display: inherit !important; }

/* ==========================================================================
   =Large Display
   ========================================================================== */

        @media (min-width: 1400px) {

                .row { width: 1170px; }

                .span1 {
                        width: 70px;
                        margin-left: 30px;
                }
                .span1swa {
                        width: 170px;
                        margin-left: 20px;
                        margin-right: 20px;
                }

                .span2 {
                        width: 170px;
                        margin-left: 30px;
                }

                .span3 {
                        width: 270px;
                        margin-left: 30px;
                }

                .span4 {
                        width: 370px;
                        margin-left: 30px;
                }

                .span5 {
                        width: 470px;
                        margin-left: 30px;
                }

                .span6 {
                        width: 570px;
                        margin-left: 30px;
                }

                .span7 {
                        width: 670px;
                        margin-left: 30px;
                }

                .span8 {
                        width: 770px;
                        margin-left: 30px;
                }

                .span9 {
                        width: 870px;
                        margin-left: 30px;
                }

                .span10 {
                        width: 970px;
                        margin-left: 30px;
                }

                .span11 {
                        width: 1070px;
                        margin-left: 30px;
                }

                .span12 {
                        width: 1170px;
                        margin-left: 30px;
                }

        }

/* ==========================================================================
   =Tablet (Portrait)
   ========================================================================== */

        @media (min-width: 768px) and (max-width: 979px) {

                .row { width: 705px; }

                .span1 {
                        width: 45px;
                        margin-left: 15px;
                }

                 .span1swa {
                        width: 175px;
                        margin-left: 10px;
                        margin-right: 10px;
                }

                .span2 {
                        width: 105px;
                        margin-left: 15px;
                }

                .span3 {
                        width: 165px;
                        margin-left: 15px;
                }

                .span4 {
                        width: 225px;
                        margin-left: 15px;
                }

                .span5 {
                        width: 285px;
                        margin-left: 15px;
                }

                .span6 {
                        width: 345px;
                        margin-left: 15px;
                }

                .span7 {
                        width: 405px;
                        margin-left: 15px;
                }

                .span8 {
                        width: 465px;
                        margin-left: 15px;
                }

                .span9 {
                        width: 525px;
                        margin-left: 15px;
                }

                .span10 {
                        width: 585px;
                        margin-left: 15px;
                }

                .span11 {
                        width: 645px;
                        margin-left: 15px;
                }

                .span12 {
                        width: 705px;
                        margin-left: 15px;
                }

                .hidden-desktop { display: inherit !important; }
                .visible-desktop { display: none !important; }
                .visible-tablet { display: inherit !important; }
                .hidden-tablet { display: none !important; }

        }

/* ==========================================================================
   =Mobile (Portrait and Landscape )
   ========================================================================== */

/* =Portrait and landscape
   ========================================================================== */

        @media (max-width: 767px) {

                .row { width: auto; }


                .row { padding: 0 20px; }

                .row .row {
                        width: auto;
                        padding: 0;
                        margin: 0;
                }

                .span1,
                .span1swa,
                .span2,
                .span3,
                .span4,
                .span5,
                .span6,
                .span7,
                .span8,
                .span9,
                .span10,
                .span11,
                .span12 {
                        float: none;
                        display: block;
                        width: 100%;
                        -webkit-box-sizing: border-box;
                           -moz-box-sizing: border-box;
                                        box-sizing: border-box;
                        margin-left: 0;
                }

                .hidden-desktop { display: inherit !important; }
                .visible-desktop { display: none !important; }
                .visible-phone { display: inherit !important; }
                .hidden-phone { display: none !important; }

        }

/* =Landscape
   ========================================================================== */

        @media only screen and (min-width: 480px) and (max-width: 767px) {

                .row { padding: 0 40px; }

        }

/* ==========================================================================
   =Align
   ========================================================================== */

        .float-left { float: left; }
        .float-right { float: right; }

/* ==========================================================================
   =Responsive Images and Embeds
   ========================================================================== */

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

        /**
          * 1. 16/9 ratio
          */

        .responsive-embed {
                position: relative;
                overflow: hidden;
                height: 0;
                padding: 0;
                padding-bottom: 56.25%; /* 1 */
                margin-bottom: 20px;
        }

        .responsive-embed iframe,
        .responsive-embed object,
        .responsive-embed embed {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
        }

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

        /**
          * Automatically Clear Fix rows
          */

        .row:after {
                visibility: hidden;
                display: block;
                font-size: 0;
                content: " ";
                clear: both;
                height: 0;
        }

        /**
          * Clear Fix hack
         * Usage:  add  class="fixed"  to div's that have floated elements in them
          */

        .fixed:after {
                visibility: hidden;
                display: block;
                font-size: 0;
                content: " ";
                clear: both;
                height: 0;
        }

        /**
          * Clear content
         * Usage:  <br class="clear">
          */

        .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
        }

/* ==========================================================================
   =ResponsiveFormInputs
   ========================================================================== */

        /**
         * 1. Reset float inherited from .span*
          * 2. Reset margin-left inherited from .span*
          */

        input.span1,
        textarea.span1,
        select.span1,
        input.span1swa,
        textarea.span1swa,
        select.span1swa,
        input.span2,
        textarea.span2,
        select.span2,
        input.span3,
        textarea.span3,
        select.span3,
        input.span4,
        textarea.span4,
        select.span4,
        input.span5,
        textarea.span5,
        select.span5,
        input.span6,
        textarea.span6,
        select.span6,
        input.span7,
        textarea.span7,
        select.span7,
        input.span8,
        textarea.span8,
        select.span8,
        input.span9,
        textarea.span9,
        select.span9,
        input.span10,
        textarea.span10,
        select.span10,
        input.span11,
        textarea.span11,
        select.span11,
        input.span12,
        textarea.span12,
        select.span12 {
                float: none;         /* 1 */
                margin-left: 0; /* 2 */
        }