﻿* { -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; }

.clsClearfix:after { content: " "; clear: both; float: none; display: block; }
.clsRow { padding: 0 2%; }
.clsRow > .clsColumn { float: left; min-height: 1px; padding: 0 1%; }
.clsRow > .clsColumn.clsOne { width: 8.333%; }
.clsRow > .clsColumn.clsTwo { width: 16.667%; }
.clsRow > .clsColumn.clsThree { width: 25%; }
.clsRow > .clsColumn.clsFour { width: 33.333%; }
.clsRow > .clsColumn.clsFive { width: 41.667%; }
.clsRow > .clsColumn.clsSix { width: 50%; }
.clsRow > .clsColumn.clsSeven { width: 58.333%; }
.clsRow > .clsColumn.clsEight { width: 66.667%; }
.clsRow > .clsColumn.clsNine { width: 75%; }
.clsRow > .clsColumn.clsTen { width: 83.333%; }
.clsRow > .clsColumn.clsEleven { width: 91.667%; }
.clsRow > .clsColumn.clsTwelve { width: 100%; float: none; border: none; }

.clsRow > .clsFloatRight {float: right;}

.clsRow > .clsColumn * { max-width: 100%; }
.clsRow > .clsColumn .clsRow {
    max-width: none;
    margin: 0 -2%;
    padding: 0;
}
.clsRow > .clsColumn .clsRow > .clsColumn {
    padding: 0 2%;
}

.clsMaxWidth {
    width: 1000px;
    max-width: 100%;
    padding: 0;
    margin: 0 auto;
}

.clsFull { display: block; visibility: visible; }
.clsMobile { display: none; visibility: hidden; }

.clsNav { width: 96%; margin: 0px 2%; height: 41px; padding: 11px; line-height: 19px; border-radius: 4px; border: 1px solid #675f4d; background: #ffffff; }

.clsMobileMenu {position: fixed; left: 0; top: 0; z-index: 0; overflow-y: scroll;}
.clsMobileMenu .clsDropdownHandler {cursor: pointer; position: relative;}
.clsMobileMenu .clsDropdownHandler::after {content: "+"; position: absolute; right: 10px; top: 0; color: #ffffff;}
.clsMobileMenu .clsDropdownHandler.clsExpanded::after {content: "-";}
.clsMobileMenu .clsDropdownHandler ul {display: none;}
.clsMobileMenu .clsDropdownHandler.clsExpanded ul {display: block;}
.clsMainArea {position: relative; left: 0; top: 0; z-index: 100; transition: left cubic-bezier(0,0,0,1) 0.25s;}

.clsOpened {left: 75% !important;}

/* iPad screen resolution */
@media all and (max-width: 768px) {
    .clsFull { display: none; visibility: hidden; }
    .clsMobile { display: block; visibility: visible; }

    .clsRow > .clsColumn.clsOne { width: 12.5%; }
    .clsRow > .clsColumn.clsTwo { width: 25%; }
    .clsRow > .clsColumn.clsThree { width: 37.5%; }
    .clsRow > .clsColumn.clsFour { width: 50%; }
    .clsRow > .clsColumn.clsFive { width: 62.5%; }
    .clsRow > .clsColumn.clsSix { width: 75%; }
    .clsRow > .clsColumn.clsSeven { width: 87.5%; }
    .clsRow > .clsColumn.clsEight { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsNine { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsTen { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsEleven { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsTwelve { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }

    .clsRow > .clsColumn.clsMobileOne { width: 12.5%; float: left; clear: none; }
    .clsRow > .clsColumn.clsMobileTwo { width: 25%; float: left; clear: none; }
    .clsRow > .clsColumn.clsMobileThree { width: 37.5%; float: left; clear: none; }
    .clsRow > .clsColumn.clsMobileFour { width: 50%; float: left; clear: none; }
    .clsRow > .clsColumn.clsMobileFive { width: 62.5%; float: left; clear: none; }
    .clsRow > .clsColumn.clsMobileSix { width: 75%; float: left; clear: none; }
    .clsRow > .clsColumn.clsMobileSeven { width: 87.5%; float: left; clear: none; }
    .clsRow > .clsColumn.clsMobileEight { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    
    .clsRow > .clsFloatRight.clsMobileOne, 
    .clsRow > .clsFloatRight.clsMobileTwo, 
    .clsRow > .clsFloatRight.clsMobileThree, 
    .clsRow > .clsFloatRight.clsMobileFour, 
    .clsRow > .clsFloatRight.clsMobileFive, 
    .clsRow > .clsFloatRight.clsMobileSix, 
    .clsRow > .clsFloatRight.clsMobileSeven {float: right;}

    .clsRow > .clsColumn { margin-bottom: 16px; }
    .clsRow > .clsColumn:last-child { margin-bottom: 0; }
}

/* iPhone screen resolution */
@media all and (max-width: 668px) {
    .clsRow > .clsColumn { margin-bottom: 16px; padding: 0 4%; }
    .clsRow > .clsColumn:last-child { margin-bottom: 0; }

    .clsRow > .clsColumn.clsOne { width: 25%; }
    .clsRow > .clsColumn.clsTwo { width: 50%; }
    .clsRow > .clsColumn.clsThree { width: 75%; }
    .clsRow > .clsColumn.clsFour { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsFive { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsSix { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsSeven { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsEight { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsNine { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsTen { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsEleven { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsTwelve { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsThirteen { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsFourteen { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsFifteen { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsSixteen { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }

    .clsRow > .clsColumn.clsMobileOne { width: 25%; clear: none; }
    .clsRow > .clsColumn.clsMobileTwo { width: 50%; clear: none; }
    .clsRow > .clsColumn.clsMobileThree { width: 75%; clear: none; }
    .clsRow > .clsColumn.clsMobileFour { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsMobileFive { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsMobileSix { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsMobileSeven { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsMobileEight { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsMobileNine { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsMobileTen { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsMobileEleven { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsMobileTwelve { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsMobileThirteen { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsMobileFourteen { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsMobileFifteen { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }
    .clsRow > .clsColumn.clsMobileSixteen { width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none; }

    .clsRow > .clsColumn.clsPhoneOne {width: 25%; clear: none; float: left; padding: 0 1%;}
    .clsRow > .clsColumn.clsPhoneTwo {width: 50%; clear: none; float: left; padding: 0 1%;}
    .clsRow > .clsColumn.clsPhoneThree {width: 75%; clear: none; float: left; padding: 0 1%;}
    .clsRow > .clsColumn.clsPhoneFour {width: 100%; margin-left: 0; margin-right: 0; float: none; clear: both; border: none;}
    
    .clsRow > .clsFloatRight.clsPhoneOne {width: 25%; clear: none; float: right; padding: 0 1%;}
    .clsRow > .clsFloatRight.clsPhoneTwo {width: 50%; clear: none; float: right; padding: 0 1%;}
    .clsRow > .clsFloatRight.clsPhoneThree {width: 75%; clear: none; float: right; padding: 0 1%;}

    .clsRow > .clsColumn * { max-width: 100%; }

    .clsMaxWidth { width: 960px; max-width: 100%; margin: 0 auto; }
    .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; }
}
