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

.nfw-row { 
    position: relative; 
    width: 940px; 
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

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

.nfw-full-width-section { margin-bottom: 40px; }

/**
 * 1. Full width sections insert a .nfw-row directly into it so we made this hack to make it 100%
 */

.nfw-full-width-section > .nfw-row { width: 100%; /* 1 */ }

.nfw-full-width-section  .nfw-row .nfw-row { 
    width: 940px; 
    margin: 0 auto; 
}

.nfw-full-width-section  .nfw-row .nfw-row  .nfw-row{ width:auto; }	

/*  */

.nfw-span1, 
.nfw-span2, 
.nfw-span3, 
.nfw-span4, 
.nfw-span5, 
.nfw-span6, 
.nfw-span7, 
.nfw-span8, 
.nfw-span9, 
.nfw-span10, 
.nfw-span11, 
.nfw-span12 { 
    float: left; 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.nfw-span1 { 
    width: 6.382978723404255%;  
    margin-left: 2.127659574468085%; 
}

.nfw-span2 { 
    width: 14.893617021276595%; 
    margin-left: 2.127659574468085%; 
}

.nfw-span3 { 
    width: 23.404255319148934%; 
    margin-left: 2.127659574468085%; 
}

.nfw-span4 { 
    width: 31.914893617021278%;
    margin-left: 2.127659574468085%; 
}

.nfw-span5 { 
    width: 40.42553191489362%; 
    margin-left: 2.127659574468085%; 
}

.nfw-span6 { 
    width: 48.93617021276595%; 
    margin-left: 2.127659574468085%; 
}

.nfw-span7 { 
    width: 57.44680851063829%; 
    margin-left: 2.127659574468085%; 
}

.nfw-span8 { 
    width: 65.95744680851064%; 
    margin-left: 2.127659574468085%; 
}

.nfw-span9 { 
    width: 74.46808510638297%; 
    margin-left: 2.127659574468085%; 
}

.nfw-span10 { 
    width: 82.97872340425532%; 
    margin-left: 2.127659574468085%; 
}

.nfw-span11 { 
    width: 91.48936170212765%; 
    margin-left: 2.127659574468085%; 
}

.nfw-span12 { 
    width: 100%; 
    margin-left: 2.127659574468085%; 
}

.nfw-span1:first-child, 
.nfw-span2:first-child, 
.nfw-span3:first-child, 
.nfw-span4:first-child, 
.nfw-span5:first-child, 
.nfw-span6:first-child, 
.nfw-span7:first-child, 
.nfw-span8:first-child, 
.nfw-span9:first-child, 
.nfw-span10:first-child, 
.nfw-span11:first-child, 
.nfw-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) {

    /*
    .nfw-full-width-section  .nfw-row .nfw-row,
    .nfw-row { width: 1170px; }
    */

}

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

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

    .nfw-full-width-section  .nfw-row .nfw-row,
    .nfw-row { width: 705px; }

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

}

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

@media (max-width: 767px) {

    .nfw-full-width-section  .nfw-row .nfw-row,
    .nfw-row { width: auto; }

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

    .nfw-full-width-section  .nfw-row .nfw-row, 
    .nfw-row { padding: 0 20px; }

    .nfw-full-width-section  .nfw-row .nfw-row  .nfw-row , 
    .nfw-row .nfw-row { 
        width: auto; 
        padding: 0; 
        margin: 0; 
    }



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

}

/* ==========================================================================
   #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 nfw-rows
 */

.nfw-full-width-section:after,	
.nfw-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;
}