﻿* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

body > form {position: relative; top: 0; left: 0;}

/* Contains styles for making a site responsive */
.clsPhone { display: none; visibility: hidden; }
.clsNotPhone { display: block; visibility: visible; }
td.clsNotPhone {display: table-cell;}

.clsClearfix:after { content: " "; clear: both; float: none; display: block; }
.clsRow { max-width: none; margin: 0 -15px; width: calc(100% + 30px); display: flex; flex-wrap: wrap; }
.clsRow > .clsColumn { min-height: 1px; padding: 0 15px; flex-grow: 0; flex-shrink: 0; }
.clsRow > .clsColumn.clsOne { flex-basis: 8.333%; width: 8.333%; }
.clsRow > .clsColumn.clsTwo { flex-basis: 16.667%; width: 16.667%; }
.clsRow > .clsColumn.clsThree { flex-basis: 25%; width: 25%; }
.clsRow > .clsColumn.clsFour { flex-basis: 33.333%; width: 33.333%; }
.clsRow > .clsColumn.clsFive { flex-basis: 41.667%; width: 41.667%; }
.clsRow > .clsColumn.clsSix { flex-basis: 50%; width: 50%; }
.clsRow > .clsColumn.clsSeven { flex-basis: 58.333%; width: 58.333%; }
.clsRow > .clsColumn.clsEight { flex-basis: 66.667%; width: 66.667%; }
.clsRow > .clsColumn.clsNine { flex-basis: 75%; width: 75%; }
.clsRow > .clsColumn.clsTen { flex-basis: 83.333%; width: 83.333%; }
.clsRow > .clsColumn.clsEleven { flex-basis: 91.667%; width: 91.667%; }
.clsRow > .clsColumn.clsTwelve { flex-basis: 100%; width: 100%; float: none; border: none; }

.clsRow > .clsFloatRight {margin-left: auto;}

.clsRow > .clsColumn * { max-width: 100%; }

.clsFull { display: block; visibility: visible; }
.clsMobile { display: none; visibility: hidden; }

/* iPad screen resolution */
@media all and (max-width: 768px) {
    .clsFull { display: none; visibility: hidden; }
    .clsMobile { display: block; visibility: visible; }

    .clsRow > .clsColumn.clsOne { flex-basis: 12.5%; width: 12.5%; }
    .clsRow > .clsColumn.clsTwo { flex-basis: 25%; width: 25%; }
    .clsRow > .clsColumn.clsThree { flex-basis: 37.5%; width: 37.5%; }
    .clsRow > .clsColumn.clsFour { flex-basis: 50%; width: 50%; }
    .clsRow > .clsColumn.clsFive { flex-basis: 62.5%; width: 62.5%; }
    .clsRow > .clsColumn.clsSix { flex-basis: 75%; width: 75%; }
    .clsRow > .clsColumn.clsSeven { flex-basis: 87.5%; width: 87.5%; }
    .clsRow > .clsColumn.clsEight,
    .clsRow > .clsColumn.clsNine,
    .clsRow > .clsColumn.clsTen,
    .clsRow > .clsColumn.clsEleven,
    .clsRow > .clsColumn.clsTwelve { flex-basis: 100%; width: 100%; }

    .clsRow > .clsColumn.clsMobileOne { flex-basis: 12.5%; width: 12.5%; clear: none; }
    .clsRow > .clsColumn.clsMobileTwo { flex-basis: 25%; width: 25%; clear: none; }
    .clsRow > .clsColumn.clsMobileThree { flex-basis: 37.5%; width: 37.5%; clear: none; }
    .clsRow > .clsColumn.clsMobileFour { flex-basis: 50%; width: 50%; clear: none; }
    .clsRow > .clsColumn.clsMobileFive { flex-basis: 62.5%; width: 62.5%; float: left; clear: none; }
    .clsRow > .clsColumn.clsMobileSix { flex-basis: 75%; width: 75%; float: left; clear: none; }
    .clsRow > .clsColumn.clsMobileSeven { flex-basis: 87.5%; width: 87.5%; float: left; clear: none; }
    .clsRow > .clsColumn.clsMobileEight { flex-basis: 100%; width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }

    .clsRow > .clsColumn { margin-bottom: 16px; }
    .clsRow > .clsColumn:last-child { margin-bottom: 0; }
}

/* iPhone screen resolution */
@media all and (max-width: 668px) {
    .clsRow > .clsColumn.clsOne { flex-basis: 25%; width: 25%; }
    .clsRow > .clsColumn.clsTwo { flex-basis: 50%; width: 50%; }
    .clsRow > .clsColumn.clsThree { flex-basis: 75%; width: 75%; }
    .clsRow > .clsColumn.clsFour,
    .clsRow > .clsColumn.clsFive,
    .clsRow > .clsColumn.clsSix,
    .clsRow > .clsColumn.clsSeven,
    .clsRow > .clsColumn.clsEight,
    .clsRow > .clsColumn.clsNine,
    .clsRow > .clsColumn.clsTen,
    .clsRow > .clsColumn.clsEleven,
    .clsRow > .clsColumn.clsTwelve { flex-basis: 100%; width: 100%; }

    .clsRow > .clsColumn.clsMobileOne { flex-basis: 25%; width: 25%; }
    .clsRow > .clsColumn.clsMobileTwo { flex-basis: 50%; width: 50%; }
    .clsRow > .clsColumn.clsMobileThree { flex-basis: 75%; width: 75%; }
    .clsRow > .clsColumn.clsMobileFour,
    .clsRow > .clsColumn.clsMobileFive,
    .clsRow > .clsColumn.clsMobileSix,
    .clsRow > .clsColumn.clsMobileSeven,
    .clsRow > .clsColumn.clsMobileEight,
    .clsRow > .clsColumn.clsMobileNine,
    .clsRow > .clsColumn.clsMobileTen,
    .clsRow > .clsColumn.clsMobileEleven,
    .clsRow > .clsColumn.clsMobileTwelve { flex-basis: 100%; width: 100%; }

    .clsRow > .clsColumn.clsPhoneOne {flex-basis: 25%; width: 25%;}
    .clsRow > .clsColumn.clsPhoneTwo {flex-basis: 50%; width: 50%;}
    .clsRow > .clsColumn.clsPhoneThree {flex-basis: 75%; width: 75%;}
    .clsRow > .clsColumn.clsPhoneFour {flex-basis: 100%; width: 100%;}

    .clsRow > .clsColumn * { max-width: 100%; }
    .clsPhone { display: block; visibility: visible; }
    .clsNotPhone { display: none !important; visibility: hidden; }

    table.responsiveTable, 
    table.responsiveTable > thead,
    table.responsiveTable > tbody, 
    table.responsiveTable > tbody > th, 
    table.responsiveTable > tbody > tr,
    table.responsiveTable > tbody > tr > td  { display: block; width: auto !important; height: auto !important; }
    table.responsiveTable.clsFullTable, 
    table.responsiveTable > thead.clsFullTable,
    table.responsiveTable > tbody.clsFullTable, 
    table.responsiveTable > tbody > th.clsFullTable, 
    table.responsiveTable > tbody > tr > td.clsFullTable, 
    table.responsiveTable > tbody > tr.clsFullTable { display: none; }
    table.responsiveTable tr { border: 1px solid #ccc; }
    table.responsiveTable td.resizeMobile { padding-left: 50%; overflow: hidden; height: 45px; }
    table.responsiveTable td.resizeMobile:before { position: absolute; left: 12px; width: 45%; padding-right: 10px; content: attr(data-title); font-weight: bold; }
    table.responsiveTable td { border: none; border-bottom: 1px solid #eeeeee; position: relative; }
}
