/*
  Running Squiz Matrix
  Developed by Squiz - http://www.squiz.net
  Squiz, Squiz Matrix, MySource, MySource Matrix and Squiz.net are registered Trademarks of Squiz Pty Ltd
  Page generated: 26 February 2020 16:52:33
*/


@charset "utf-8";
/* 2016 CSS Document */

/* html5reset.css */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
    font : 100%/1.4 Arial, helvetica, helve, sans-serif;
    background-color: #FFF;
}


article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display: block;
}

nav ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

/* change colours to suit your needs */
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

/* change colours to suit your needs */
mark {
    background-color: #ff9;
    color: #000; 
    font-style: italic;
    font-weight: bold;
}

del {
    text-decoration:  line-through;
}

abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}
#sq_news_contact {
    display: none;   
}
#subpage table {
    border: 1px solid #ccc;
}
#subpage td{
    padding: 5px;
}
#subpage td, #subpage th { border: 1px #ccc solid; }

h1 { font-size:2.2em; padding:0 0 .5em 0; }
h2 { font-size:1.5em; }

#wrapper #contentrightcolumn h6 {
    margin-bottom: 0;
}

/* change border colour to suit your needs */
hr {
    display: block;
    height: 1px;
    border: 0;   
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input, select {
    vertical-align: middle;
}

/*  2017 tabs for data presentation  ============================================================================= */

/* Style the tab */
div.tab {
    /* float: left; */
    overflow: hidden;
    /*border: 1px solid #ccc;*/
   /* background-color: #f1f1f1;*/
    /*width: 20%;
    min-height: 500px;*/
  /*  margin-top: 14px; */
}

div.top-tab {
    display: inline-block;
}

/* Style the buttons inside the tab */
div.tab button {
    /*display: block;*/
    background-color: inherit;
    float: left;
    color: black;
    padding: 10px; /*14px 16px;*/
    border: 1px solid #ccc;
    border-bottom: none;
    margin-top: 14px;
   /* width: 100%; */
    /*border: none;*/
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
}

div.top-tab button {
 
    background-color: inherit;
    float: left;
    color: black;
    padding: 10px; /*14px 16px;*/
    border: 1px solid #ccc;
    margin-right: 10px;
    margin-bottom: 10px;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-weight: bold;
}

/* Change background color of buttons on hover */
div.tab button:hover,
div.top-tab button:hover {
    background-color: #ddd;
}

/* Create an active/current "tab button" class */
div.tab button.active,
div.top-tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    padding: 2%; 
    border: 1px solid #ccc;
    overflow-x: auto; 
}

#subpage .tabcontent table {
    border: none;
}

#subpage .tabcontent table td {
    border: none;
}


/*  2016 homepage customisations  ============================================================================= */

.col ul {
    margin: 1em 0;
    padding: 0 0 0 13px;
    list-style-image: url("mysource_files/topfooter_arrow.jpg");
}
header {
    background: #fff;
    padding-bottom: 10px;
}
header .col {
    margin: 0; /*0 0 0 1.6%;*/
    padding: 0;
}
#logo {
    /*min-width: 240px;*/
    margin: 9px 0 0 0;
}
#tagline {
    display: none; /* hide for desktop display */
    float: right;
    text-align: right;
    margin: 4px 0 2px 0;
}
#tagline-full-screen {
    display: inline;
}
/* header span.print {
    background: url("https://www.onrsr.com.au/__data/assets/image/0008/13886/site_tools.png?v=0.1.1") 0px 0;
    margin-left: -40px; 
}
header .contrast {
    background: url("https://www.onrsr.com.au/__data/assets/image/0008/13886/site_tools.png?v=0.1.1") -29px 0;
    left: 29px; 
}
header .resizer {
    background-color: transparent;
    width: 56px; 
}
*/





/*#search-and-site-tools #sitetoolsbox {
    width: 100px;
}
#search-and-site-tools #sitetools {
    margin-left: -17px;
}*/

/*
#search-and-site-tools #sitetools {
    margin-left: 122px;
}
#search-and-site-tools span.print {
    background: url("https://www.onrsr.com.au/__data/assets/image/0008/13886/site_tools.png?v=0.1.1") 0px 0;
    margin-left: -40px; 
}
#search-and-site-tools .contrast {
    background: url("https://www.onrsr.com.au/__data/assets/image/0008/13886/site_tools.png?v=0.1.1") -29px 0;
    left: 29px; 
}
#search-and-site-tools .resizer {
    background-color: transparent;
    width: 56px; 
}
#search-and-site-tools .resizer li {
    margin-right: 8px; 
}*/
.web-lead {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}
.web-lead-box {
     margin-left: 1.6%;
    background-color: rgba(238,175,0,0.9);
    padding-left: 4px;
    padding-right: 4px;
    min-width: 174px;
}
#menu-icon, #menu-label, #search-icon {
    display: none;
}
#menubar {
    /*margin-right: -4px;*/
    margin: -31px 0 0 0;
    /*background: url("https://www.onrsr.com.au/__data/assets/image/0007/13885/safe_railways_for_australia.gif?v=0.1.1") no-repeat right 48.5%;*/
    background-color: #fff;
    /*width: 100%;*/
    display: block;
    float: right;
    position: relative;
    z-index: 1;
}
#wrapper #safari-fix {
    height: 46px; /* overcomes a layout glitch in early versions of Safari */
}
#wrapper #breadcrumbsbox {
    width: 100%;
    margin-top: 0;
    /* height: 34px; */
    /*background-color: #e4e5e5;*/
    height: 46px;
    background: #e4e5e5 url(https://www.onrsr.com.au/__data/assets/image/0008/17675/web-subpage-header.jpg?v=0.1.1) no-repeat 0 0;
    background-size: 100% auto;
    padding-top: 150px;
}
#wrapper #breadcrumbs {
    font-size: 80%;
    padding-left: 1.5%;
    padding-top: 14px;
}

/*     LEVEL ONE  */
nav ul.dropdown {
    position: relative;
    list-style: none;
    margin: 0 0 0 -40px;
}
nav ul.dropdown img {
    margin-bottom: 6px;
}
nav ul.dropdown li {
    font-weight: bold;
    font-size: 0.80em;
    float: left;
    padding-left: 17px;
}
nav ul.dropdown li a {
    padding: 10px 0 2px 0; /*10px 6px 2px 6px;*/
    border-right: 0;
    /*margin-bottom: -14px;*/
    height: 28px;
    color: #333;
    font-weight: normal;
    font-size: 110%;
    border-top: 1px solid transparent; 
}
nav ul.dropdown li a:hover {
    background: transparent;
   /* border-top: 1px dotted #eeaf00; */
}
nav ul.dropdown li:last-child a {
    border-right: none;
}
nav ul.dropdown li:hover {
    opacity: 1.0;
    position: relative;
}
nav ul.dropdown li:hover > a {
    color: #eeaf00; 
    background-color: #fff;
}
nav .homebutton {
    padding-left: 0px;
}
/*     LEVEL TWO  */
nav ul.dropdown ul {
    width: 245px;
    visibility: hidden;
    position: absolute;
    list-style: none;
    margin-left: -40px;
    margin-top: 0px;
    z-index: 1;
}
nav ul.dropdown ul li {
    font-weight: bold;
    font-size: 1em;
    background: #000000;
    border-bottom: 1px dotted #808080;
    float: none;
    opacity: 1.0;
    padding-left: 15px;
}
nav ul.dropdown ul li:last-child {
    border-bottom: none;
}
nav ul.dropdown ul li a {
    margin-bottom: 0px;
    padding: 15px 0 0 15px;
    color: #fff;
    text-align: left;
    vertical-align: middle;
    border-right: none;
    display: block; 
    height: 32px;
}
nav ul.dropdown ul li a:hover {
    border-top: 1px solid transparent;
}
nav ul.dropdown ul li:hover > a {
    background-color: #000;
}


/* LEVEL THREE */
nav ul.dropdown ul ul {
    left: 100%;
    top: 0;
}
nav ul.dropdown li:hover > ul {
    visibility: visible;
}
#search-and-site-tools {
    width: 97%;
    margin: -10px auto 0 auto;
}
#subpage #search-and-site-tools{
   /* margin-top: -58px; */
    position: relative; /* to cater to safari-fix */
    top: 2px; /* as above */
}

#search-and-site-tools #sitetoolsbox {
    width: 100px;
}
#search-and-site-tools #sitetools {
    margin-left: -17px;
}
#search-and-site-tools span.print {
    background: url("https://www.onrsr.com.au/__data/assets/image/0008/13886/site_tools.png?v=0.1.1") 0px 0;
    margin-left: -40px; /*-25px;*/
}
#search-and-site-tools .contrast {
    background: url("https://www.onrsr.com.au/__data/assets/image/0008/13886/site_tools.png?v=0.1.1") -29px 0;
    left: 29px; /*45px;*/
}
#search-and-site-tools .resizer {
    background-color: transparent;
    width: 56px; /*48px;*/
}
#search-and-site-tools .resizer li {
    margin-right: 8px; /*6px;*/
}


nav #searchinput {
    border: solid 1px #eeaf00;
    height: 25px;
}
nav .contentsearch .button {
    padding: 10px 0 10px 0;
}
nav .contentsearch .input {
    width: 180px;
}
nav .contentsearch {
    padding: 7px 0 0 0;
    margin-right: 0px;
}
#search {
    float: right;
    margin-left: 9px;
}
/* nav .col {
}
nav .span_1_of_8 {
    width: auto;
}
*/
.boxes .col {
    height: 100%;
    display: inline-block;
}
.boxes .highlight {
    /* background: url(https://www.onrsr.com.au/__data/assets/image/0012/14007/yellow-triangle.png?v=0.1.1) no-repeat; */
}
.boxes .highlight li,
.boxes .contact-details li {
    padding: 5px 0 5px 0;
}
/*.boxes .contact-details {
    background: rgba(238,175,0,0.2);
}*/
.boxes .contact-details p, .boxes .contact-details ul {
    margin-left: 3%;
    margin-top: 0;
    margin-right: 3%; 
}
/*.boxes .contact-details img {
    width: 100%;
    height: auto;
    max-width: 200px;
}*/
/*.boxes .contact-details a.office-map {
    display: inline-block;
    text-decoration: none;
    background: url(mysource_files/office-locations.png) no-repeat;
    background-size: 100% 200%;
}*/
/*.boxes .contact-details a.office-map:hover {
    background-position: 0 100%;
}*/

#contentarea a[href^="tel:"] {
  text-decoration: none;
}
#subpage #contentarea h1 {
    margin-bottom: -30px;
}
#contentarea .boxes {
    margin-top: 3px; 
}
#contentarea .boxes .col {
   /* border-top: 1px dotted #eeaf00;
    padding: 1em 0; */
    padding: 0;
    text-align: left;
}
#contentarea .boxes h4 {
    /*margin: 0.5em 0 -4px 0; */

    font-size: 110%;
}
#contentarea .boxes .highlight h4 {
    margin: 0 0 -4px 0;
    padding-left: 3%;
    background: rgb(167, 168, 171);
    color: rgb(238, 238, 238);
    padding-right: 3%;
    padding-top: 4px;
    padding-bottom: 5px;
   /* min-height: 45px; */
}
#contentarea .boxes .contact-details h4 {
    margin: 0;
    padding-top: 5px;
    padding-left: 3%;
    padding-right: 3%;
    min-height: 45px;
}
#contentarea #contentrightcolumn {
    width: 656px;
}
#contentarea #contentleftcolumn {
    margin-top: 18px;
}
#contentarea #contentnavhead {
    background: none;
    margin-left: 0; /*-13px;*/
}
#contentarea #contentnavheadicon {
    padding-top: 28px;
}
#contentarea #contentnavheadtext {
    color: rgb(238, 238, 238);
    padding-top: 10px;
    font-weight: bold;
}
#contentarea #contentnav ul {
    list-style-image: none;
}
#contentarea #contentnav a {
    text-decoration: none;
}
#contentarea #contentnavheadbox {
   /* background: url(https://www.onrsr.com.au/__data/assets/image/0012/14007/yellow-triangle.png?v=0.1.1) no-repeat;
    border-top: 1px dotted #eeaf00; */
    background-color: rgb(167, 168, 171);
    width: 237px;
    height: 40px;
}
#contentarea .menu li a {
    padding-left: 4px;
}
#section-index-toggle {
    display: none;
}
#yellow-white-stripe {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
footer {
    width: 100%;
    font-size: 90%;
}
footer .white-bg {
    text-align: center;
    background: #fff;
}
footer .white-bg a {
    text-decoration: none;
}
footer .black-bg {
    text-align: center;
    background: rgb(167, 168, 171); /*#000;*/
    color: #fff;
}
footer .black-bg a {
    color: #fff;
    text-decoration: none;
}
footer .col {
    padding: 0;
    text-align: left;
}
footer ul {
    list-style-type: none;
    overflow: hidden;
    display: inline-block;
    padding: 0 1.5% 0 1.5%;
    margin: 3px 0 0 0;
}
footer .col ul {
    padding: 0;
    margin: 0 0 -6px 0;
    list-style-image: none;
}
footer p {
    margin: 0;
}
footer a {
    color: #666;
}
footer a:hover {
   color: #974807;
}
footer li {
    background: url(https://www.onrsr.com.au/__data/assets/image/0008/14003/yellow-divider.png?v=0.1.1) no-repeat right center;
    padding-right: 12px;
    margin-right: 6px;
    float: left;
}
footer li.last, footer li:last-child {
    background: none;
}
#wrapper {
    max-width: 956px;
    margin: 4px auto 0 auto;
    background: #f4f4f4;
    overflow: visible; 
}
/*#subpage #wrapper {
    background: #f4f4f4 url(https://www.onrsr.com.au/__data/assets/image/0008/17675/web-subpage-header.jpg?v=0.1.1) no-repeat 0 152px;
    background-size: 100% auto;
}*/
#wrapper #contentarea {
    width: 97%;
    padding: 1px 0 0 0;
    margin: 0 auto;
}
#contentarea {
    background-color: transparent;
}
#contentarea #contentareanonav {
    /*width: 840px;*/
    width: 97%;
    padding: 1% 1.5% 1.5% 1.5%;
}
.mobile-only,
.narrow-mobile-only {
    display: none;
}
/*  SECTIONS  ============================================================================= */

.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}
/*  GROUPING  ============================================================================= */


.group:before, .group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
/*  GRID COLUMN SETUP   ==================================================================== */

.col {
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
}
.col:first-child {
    margin-left: 0;
} /* all browsers except IE6 and lower */





/*  COLLAPSE MENU AT 955 PIXELS */

@media only screen and (max-width: 955px) {
header {
    padding-bottom: 0;
}
#logo {
    margin-left: 1.5%;
    margin-bottom: 0;
}
#menu-label {
    width: 50%;
    background: #fff;
    display: inline-block;
    margin-right: 1.5%;
    margin-top: 51px;
    margin-bottom: 9px;
    float: right;
}
#menu-label a{
    float: right;
    margin-right: 0;
    color: #333;
    font-size: 90%;
    text-decoration: none;
}
/*#menu-label a:hover {
    color: #eeaf00;
}*/
#menu-label img {
    margin-bottom: 2px;
}
#tagline {
    display: inline; /* display on smaller devices */
    margin-right: 1.5%;
    min-width: 200px;
}
#tagline-full-screen {
    display: none;
}
#menubar {
    display: none; /* default to hidden */
    background: #fff;
    margin: 0;
    width: 100%;
}

#contentarea #contentnav {
    display: none;
}
#section-index-toggle {
    display: inline;
    float: right;
    color: #333;
    margin-right: 16px;
    margin-top: -24px;
    font-size: 12px;
}
/* Hide the #section-index-toggle menu buttons on the contact page, as no subpages exist */
#section-id-909 {
    display: none;
}
#section-index-toggle img {
    width: 25px;
    height: 25px;
    margin-top: -4px;
    margin-left: 2px;
}
#contentarea #section-index-toggle a {
    color: rgb(238, 238, 238);
    text-decoration: none;
}
/*#contentarea #section-index-toggle a:hover {
    color: #eeaf00;
}*/


/*   MOBILE  LEVEL ONE  */
nav ul.dropdown {
    position: relative;
    list-style: none;
    margin-left: -40px;
}
nav ul.dropdown img {
    margin-bottom: 6px;
}
nav ul.dropdown li {
    font-weight: bold;
    font-size: 0.80em;
    float: none;
    margin-left: 1.5%;
    width: 47.25%;
    display: inline-block;
    border-top: 1px dotted #eeaf00;
    padding-left: 0;
}
nav ul.dropdown li a {
    padding: 10px 4px 2px 4px;
    border-right: 0;
    margin-bottom: -3px;
    color: #333;
    font-weight: normal;
    border-top: 1px solid transparent; 
}
nav ul.dropdown li a:hover {
    background: transparent;
    border-top: 1px dotted #eeaf00;
}
nav ul.dropdown li:last-child a {
    border-right: none;
}
nav ul.dropdown li:hover {
    opacity: 1.0;
    position: relative;
}
nav .homebutton {
    padding-left: 0px;
}
/*   MOBILE  LEVEL TWO  */
nav ul.dropdown ul {
display: none;
    width: 250px;
    visibility: hidden;
    position: absolute;
    list-style: none;
    margin-left: -40px;
    margin-top: 0px;
    z-index: 1;
}
nav ul.dropdown ul li {
    font-weight: bold;
    font-size: 1em;
    background: #000000;
    border-bottom: 1px dotted #808080;
    float: none;
    opacity: 1.0;
    padding-left: 20px;
}
nav ul.dropdown ul li:last-child {
    border-bottom: none;
}
nav ul.dropdown ul li a {
    margin-bottom: 0px;
    padding: 23px 0 0 15px;
    color: #fff;
    text-align: left;
    vertical-align: middle;
    border-right: none;
    display: block; 
}
nav ul.dropdown ul li a:hover {
    border-top: 1px solid transparent; 
}

/* MOBILE LEVEL THREE */
nav ul.dropdown ul ul {
    left: 100%;
    top: 0;
}
nav ul.dropdown li:hover > ul {
    visibility: visible;
}

/* handle contentpage columns at lower screen widths */

.menu li {
    font-weight: bold;
    font-size: 0.80em;
    float: none;
    width: 100%; /*49%;*/
    display: inline-block;
    border-top: 1px dotted #eeaf00;
    vertical-align: top;
}
.menu li a {
    padding: 10px 4px 2px 4px;
    border-right: 0;
    margin-bottom: -3px;
    color: #333;
    font-weight: normal;
    border-top: 1px solid transparent; 
}
.menu li a:hover {
    background: transparent;
    border-top: 1px dotted #eeaf00;
}
.menu li ul {
    /* display: none; */
    /*position: relative;
    left: 10%;*/
    width: 100%;
}
.menu li ul li {
    background: #e9e7e2;
}
.menu li ul li a {
    margin-left: 4%;
}
#contentarea #contentrightcolumn {
    width: 100%;
}
#contentarea #contentleftcolumn {
    width: 100%;
    margin-top: 0;
}
#contentarea #contentareanonav {
    width: 100%;
    margin-top: 0;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}
#contentarea #contentnavhead {
    margin: 6px 0 0 0;
    background: none;
}
#contentarea #contentnavheadbox {
    width: 100%;
}
#contentarea #contentnav {
    width: 100%;
    margin: 0;
    border-bottom: 1px dotted #333;
}
#contentarea .menu {
    width: 100%;
}
#contentarea .menu li a {
    text-decoration: none;
    background: none;
    border-bottom: none;
    padding-left: 4px;
    padding-right: 8px;
}
#wrapper #safari-fix {
    height: auto;
}
#subpage #breadcrumbsbox{
    padding-top: 15%;
    margin-bottom: 8px;
    height: auto;
    min-height: 30px;
    display: inline-block;
}
#wrapper #breadcrumbs {
    padding-top: 8px;
    padding-bottom: 4px;
}
#contentarea #contentnavheadicon {
    padding-top: 16px;
}
#contentarea #contentnavheadtext {
    padding-top: 5px;
    font-size: 22px;
}
#subpage #search-and-site-tools{
    margin-top: -10px;
    position: static;
}
#contentarea .labelholder input,
#contentarea .labelholder textarea {
    width: 70%;
}

.mobile-only {
    display: inherit;
}
.twitter-timeline{
    display: none !important;
}

}




/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) {
.col {
    margin: 1% 0 1% 0%;
}
nav .contentsearch .button {
    float: left;
}
nav .contentsearch {
    float: left;
}
#logo {
    width: 50%;
    margin-top: 3px;
}
#logo img {
    width: 120px; /*87px;*/
    height: 50px; /*41px;*/
}
#tagline img {
    width: 99px;
    height: 9px;
}
#tagline {
    margin-top: 0;
}
#menu-icon {
    display: inline;
    float: right;
    margin: 3px 1.5% 0 0;
}
#search-icon {
    width: 29px;
    height: 29px;
    display: inline;
    float: right;
    margin: 4px 0 0 4px;
}
#search-icon img {
    width: 100%;
    height: 100%;
}
#menu-label {
    display: none;
}
#search {
    display: none; /* hide search bar on mobile */
}
#section-menu-text {
    display: none;
}
#contentarea .boxes h4 {
    margin: 0.5em 0 -4px 0;
    font-size: 150%;
}
#contentarea .boxes li {
    font-size: 120%;
}
#contentarea .boxes a {
    text-decoration: none;
}
#subpage #wrapper {
    background-position: 0 111px;
}
#contentarea .labelholder input,
#contentarea .labelholder textarea {
    width: 99%;
}
#contentarea-subpage,
#contentarea #contentareanonav {
    font-size: 110%;
}
.hide-on-mobile {
    display: none !important;
}
.narrow-mobile-only {
    display: inherit;
}

}




/*  GRID OF TWO   ============================================================================= */


.span_2_of_2 {
    width: 100%;
}

.span_1_of_2 {
    width: 49.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .span_2_of_2 {
        width: 100%; 
    }
    .span_1_of_2 {
        width: 100%; 
    }
}




/*  GRID OF THREE   ============================================================================= */

    
.span_3_of_3 {
    width: 100%; 
}

.span_2_of_3 {
    width: 66.13%; 
}

.span_1_of_3 {
    width: 32.26%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .span_3_of_3 {
        width: 100%; 
    }
    .span_2_of_3 {
        width: 100%; 
    }
    .span_1_of_3 {
        width: 100%;
    }
}




/*  GRID OF FOUR   ============================================================================= */

    
.span_4_of_4 {
    width: 100%; 
}

.span_3_of_4 {
    width: 74.6%; 
}

.span_2_of_4 {
    width: 49.2%; 
}

.span_1_of_4 {
    width: 23.8%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .span_4_of_4 {
        width: 100%; 
    }
    .span_3_of_4 {
        width: 100%; 
    }
    .span_2_of_4 {
        width: 100%; 
    }
    .span_1_of_4 {
        width: 100%; 
    }
}




/*  GRID OF FIVE   ============================================================================= */

    
.span_5_of_5 {
    width: 100%;
}

.span_4_of_5 {
      width: 79.68%; 
}

.span_3_of_5 {
      width: 59.36%; 
}

.span_2_of_5 {
      width: 39.04%;
}

.span_1_of_5 {
      width: 18.72%;
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .span_5_of_5 {
        width: 100%; 
    }
    .span_4_of_5 {
        width: 100%; 
    }
    .span_3_of_5 {
        width: 100%; 
    }
    .span_2_of_5 {
        width: 100%; 
    }
    .span_1_of_5 {
        width: 100%; 
    }
}





/*  GRID OF SIX   ============================================================================= */


.span_6_of_6 {
    width: 100%;
}

.span_5_of_6 {
      width: 83.06%;
}

.span_4_of_6 {
      width: 66.13%;
}

.span_3_of_6 {
      width: 49.2%;
}

.span_2_of_6 {
      width: 32.26%;
}

.span_1_of_6 {
      width: 15.33%;
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .span_6_of_6 {
        width: 100%; 
    }
    .span_5_of_6 {
        width: 100%; 
    }
    .span_4_of_6 {
        width: 100%; 
    }
    .span_3_of_6 {
        width: 100%; 
    }
    .span_2_of_6 {
        width: 100%; 
    }
    .span_1_of_6 {
        width: 100%; 
    }
}




/*  GRID OF SEVEN   ============================================================================= */


.span_7_of_7 {
    width: 100%;
}

.span_6_of_7 {
    width: 85.48%;
}

.span_5_of_7 {
      width: 70.97%;
}

.span_4_of_7 {
      width: 56.45%;
}

.span_3_of_7 {
      width: 41.94%;
}

.span_2_of_7 {
      width: 27.42%;
}

.span_1_of_7 {
      width: 12.91%;
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .span_7_of_7 {
        width: 100%; 
    }
    .span_6_of_7 {
        width: 100%; 
    }
    .span_5_of_7 {
        width: 100%; 
    }
    .span_4_of_7 {
        width: 100%; 
    }
    .span_3_of_7 {
        width: 100%; 
    }
    .span_2_of_7 {
        width: 100%; 
    }
    .span_1_of_7 {
        width: 100%; 
    }
}




/*  GRID OF EIGHT   ============================================================================= */

    
.span_8_of_8 {
    width: 100%;
}

.span_7_of_8 {
    width: 87.3%; 
}

.span_6_of_8 {
    width: 74.6%; 
}

.span_5_of_8 {
    width: 61.9%; 
}

.span_4_of_8 {
    width: 49.2%; 
}

.span_3_of_8 {
    width: 36.5%;
}

.span_2_of_8 {
    width: 23.8%; 
}

.span_1_of_8 {
    width: 11.1%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .span_8_of_8 {
        width: 100%; 
    }
    .span_7_of_8 {
        width: 100%; 
    }
    .span_6_of_8 {
        width: 100%; 
    }
    .span_5_of_8 {
        width: 100%; 
    }
    .span_4_of_8 {
        width: 100%; 
    }
    .span_3_of_8 {
        width: 100%; 
    }
    .span_2_of_8 {
        width: 100%; 
    }
    .span_1_of_8 {
        width: 100%; 
    }
}




/*  GRID OF NINE   ============================================================================= */


.span_9_of_9 {
    width: 100%;
}

.span_8_of_9 {
    width: 88.71%;
}

.span_7_of_9 {
    width: 77.42%; 
}

.span_6_of_9 {
    width: 66.13%; 
}

.span_5_of_9 {
    width: 54.84%; 
}

.span_4_of_9 {
    width: 43.55%; 
}

.span_3_of_9 {
    width: 32.26%;
}

.span_2_of_9 {
    width: 20.97%; 
}

.span_1_of_9 {
    width: 9.68%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .span_9_of_9 {
        width: 100%; 
    }
    .span_8_of_9 {
        width: 100%; 
    }
    .span_7_of_9 {
        width: 100%; 
    }
    .span_6_of_9 {
        width: 100%; 
    }
    .span_5_of_9 {
        width: 100%; 
    }
    .span_4_of_9 {
        width: 100%; 
    }
    .span_3_of_9 {
        width: 100%; 
    }
    .span_2_of_9 {
        width: 100%; 
    }
    .span_1_of_9 {
        width: 100%; 
    }
}




/*  GRID OF TEN   ============================================================================= */


.span_10_of_10 {
    width: 100%;
}

.span_9_of_10 {
    width: 89.84%;
}

.span_8_of_10 {
    width: 79.68%;
}

.span_7_of_10 {
    width: 69.52%; 
}

.span_6_of_10 {
    width: 59.36%; 
}

.span_5_of_10 {
    width: 49.2%; 
}

.span_4_of_10 {
    width: 39.04%; 
}

.span_3_of_10 {
    width: 28.88%;
}

.span_2_of_10 {
    width: 18.72%; 
}

.span_1_of_10 {
    width: 8.56%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .span_10_of_10 {
        width: 100%; 
    }
    .span_9_of_10 {
        width: 100%; 
    }
    .span_8_of_10 {
        width: 100%; 
    }
    .span_7_of_10 {
        width: 100%; 
    }
    .span_6_of_10 {
        width: 100%; 
    }
    .span_5_of_10 {
        width: 100%; 
    }
    .span_4_of_10 {
        width: 100%; 
    }
    .span_3_of_10 {
        width: 100%; 
    }
    .span_2_of_10 {
        width: 100%; 
    }
    .span_1_of_10 {
        width: 100%; 
    }
}





/*  GRID OF ELEVEN   ============================================================================= */

.span_11_of_11 {
    width: 100%;
}

.span_10_of_11 {
    width: 90.76%;
}

.span_9_of_11 {
    width: 81.52%;
}

.span_8_of_11 {
    width: 72.29%;
}

.span_7_of_11 {
    width: 63.05%; 
}

.span_6_of_11 {
    width: 53.81%; 
}

.span_5_of_11 {
    width: 44.58%; 
}

.span_4_of_11 {
    width: 35.34%; 
}

.span_3_of_11 {
    width: 26.1%;
}

.span_2_of_11 {
    width: 16.87%; 
}

.span_1_of_11 {
    width: 7.63%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .span_11_of_11 {
        width: 100%; 
    }
    .span_10_of_11 {
        width: 100%; 
    }
    .span_9_of_11 {
        width: 100%; 
    }
    .span_8_of_11 {
        width: 100%; 
    }
    .span_7_of_11 {
        width: 100%; 
    }
    .span_6_of_11 {
        width: 100%; 
    }
    .span_5_of_11 {
        width: 100%; 
    }
    .span_4_of_11 {
        width: 100%; 
    }
    .span_3_of_11 {
        width: 100%; 
    }
    .span_2_of_11 {
        width: 100%; 
    }
    .span_1_of_11 {
        width: 100%; 
    }
}




/*  GRID OF TWELVE   ============================================================================= */

.span_12_of_12 {
    width: 100%;
}

.span_11_of_12 {
    width: 91.53%;
}

.span_10_of_12 {
    width: 83.06%;
}

.span_9_of_12 {
    width: 74.6%;
}

.span_8_of_12 {
    width: 66.13%;
}

.span_7_of_12 {
    width: 57.66%; 
}

.span_6_of_12 {
    width: 49.2%; 
}

.span_5_of_12 {
    width: 40.73%; 
}

.span_4_of_12 {
    width: 32.26%; 
}

.span_3_of_12 {
    width: 23.8%;
}

.span_2_of_12 {
    width: 15.33%; 
}

.span_1_of_12 {
    width: 6.86%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .span_12_of_12 {
        width: 100%; 
    }
    .span_11_of_12 {
        width: 100%; 
    }
    .span_10_of_12 {
        width: 100%; 
    }
    .span_9_of_12 {
        width: 100%; 
    }
    .span_8_of_12 {
        width: 100%; 
    }
    .span_7_of_12 {
        width: 100%; 
    }
    .span_6_of_12 {
        width: 100%; 
    }
    .span_5_of_12 {
        width: 100%; 
    }
    .span_4_of_12 {
        width: 100%; 
    }
    .span_3_of_12 {
        width: 100%; 
    }
    .span_2_of_12 {
        width: 100%; 
    }
    .span_1_of_12 {
        width: 100%; 
    }
}