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

/* ==========================================================================
   #Base Grid
   ========================================================================== */
    #header-top h2{
        margin-bottom: 0 !important;
    }


   .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; 
}

.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, 
.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; 
    }
    
    .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; 
    }
    
    .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 )
========================================================================== */

@media (max-width: 767px) {
    
    .row { width: auto; }
    
    .span1,
    .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; }
    
}

/* ==========================================================================
#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.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 */
}