/* general class styles */
.rates-container {background-color: rgba(0,51,115,0.65); position: absolute; bottom: 60px; left: 25px; width: 350px; color: #fff; padding: 30px; box-sizing: border-box; text-shadow: 1px 1px #000; z-index: 1000;}
.rates-container .header {font-size: 27px; line-height: 27px; text-transform: uppercase; font-family: "Raleway", Arial, sans-serif; font-weight: 300; margin: 0 0 15px 0;}
.rates-container .rates {font-size: 14px; margin: 5px 0 15px 0;}
.rates-container .rates .header {font-size: inherit; line-height: inherit; text-transform: inherit;}
.rates-container .rates .column {width: 135px;}
.rates-container .rates .column-1 {float: left;}
.rates-container .rates .column-2 {float: right;}
.rates-container .rates .column .row {width: 135px; height: 20px; padding: 0; line-height: 20px;}
.rates-container .rates .column .row.header {border-bottom: 1px solid #8db0d8; margin: 0 0 5px 0;}
.rates-container .rates .column .row div:first-child {width: 60px; float: left;}
.rates-container .rates .column .row div:last-child {width: 65px; text-align: right; float: right;}
.rates-container .footer {font-size: 12px; text-align: center;}
.clear {width: 100%; height: 0; clear: both; float: none;}

/* header-container styles */
.header-container .slideshow-container {height: 485px; margin: 0; overflow: hidden; background-color: #eee;}
.header-container .slideshow-container .max-width {position: relative;}
.header-container .slideshow-container .inner {height: 100%;}
.header-container .slideshow-container .inner .wrapper {width: 2163px; height: 100%; float: right; position: relative; left: -50%; text-align: left;}
.header-container .slideshow-container .inner .wrapper .slideshow {width: 100%; height: 100%; position: relative; left: 50%;}
.header-container .slideshow-container .inner .wrapper #ctrlSlideshowElement {width: 100%; height: 100%; position: relative;}
.header-container .slideshow-container .inner .wrapper #divSlideshowNavigation {background-color: rgba(0,51,115,0.65); text-align: center; height: 36px; width: 100%; position: absolute; bottom: 0; z-index: 1000;}
.header-container .slideshow-container .inner .wrapper #divSlideshowNavigation ul {height: 36px; width: 200px; list-style-type: none; margin: 0 auto; padding: 0; display: inline; left: 50%; display: block; text-align: center;}
.header-container .slideshow-container .inner .wrapper #divSlideshowNavigation ul li {margin: 9px 6px; padding: 0; display: inline-block;}
.header-container .slideshow-container .inner .wrapper #divSlideshowNavigation ul li a {display: block; width: 16px; height: 16px; border: 2px solid #fff; border-radius: 8px;}
.header-container .slideshow-container .inner .wrapper #divSlideshowNavigation ul li a.clsCurrent {border-color: #de6540;}
.header-container .slideshow-container .inner .wrapper #divSlideshowSlides div {height: 100% !important; width: 100% !important;}
.header-container .slideshow-container .inner .wrapper #divSlideshowSlides div img {height: 100% !important; width: 100% !important;}

/* footer-container styles */
.footer-container {min-height: 854px;}

/* body-container styles */
.body-container h1 {color: #92a1b8; font-size: 45px; line-height: 45px; font-weight: 300;}
.body-container h2 {color: #3c6695; letter-spacing: -1px; font-size: 26px; line-height: 32px; font-weight: 400;}
.body-container .row-container {height: 100%; margin: 0 0 35px 0;}
.body-container .row-container .inner {height: 100%; position: relative;}
.body-container .row-container .inner .max-width {height: 100%; padding: 0; display: flex;}
.body-container .row-container .inner .max-width div {height: auto; padding-top: 20px; padding-bottom: 20px;}
.body-container .row-container.row-1 {margin-top: 5px;}
.body-container .row-container.row-1 .inner:before,
.body-container .row-container.row-1 .inner::before {content: ""; width: calc(((100% - 1110px) / 2) + 10px); height: 100%; background-color: #eee; position: absolute; left: 0; top: 0;}
.body-container .row-container.row-1 .inner .max-width div {min-height: 360px;}
.body-container .row-container.row-1 .inner .max-width .column-1 {background-color: #eee; text-align: right; text-shadow: 1px 1px #fff;}
.body-container .row-container.row-2 {background-color: #f6f6f6;}
.body-container .row-container.row-2 .inner:before,
.body-container .row-container.row-2 .inner::before {content: ""; width: calc(((100% - 1110px) / 2) + 10px); height: 100%; background-color: #f6f6f6; position: absolute; left: 0; top: 0;}
.body-container .row-container.row-2 .inner:after,
.body-container .row-container.row-2 .inner::after {content: ""; width: calc(((100% - 1110px) / 2) + 10px); height: 100%; background-color: #eee; position: absolute; right: 0; top: 0; overflow: hidden;}
.body-container .row-container.row-2 .inner .max-width div {min-height: 210px;}
.body-container .row-container.row-2 .inner .max-width .column-1 {background-color: #f6f6f6; text-align: right; font-size: 27px; line-height: 35px; color: #748eac;}
.body-container .row-container.row-2 .inner .max-width .column-2 {background-color: #eee; text-shadow: 1px 1px #fff;}
.body-container .row-container.row-3 .inner .max-width div {min-height: 385px;}
.body-container .row-container.row-3 .inner .max-width .column-2 {background-color: #eee;}

@media all and (max-width: 768px) {
    .rates-container {display: none !important;}

    .header-container .slideshow-container {height: 235px;}
    .header-container .slideshow-container .inner .wrapper {width: 1034px;}

    .body-container {font-size: 15px; line-height: 25px;}
    .body-container h1 {font-size: 35px; line-height: 35px;}
    .body-container h2 {font-size: 20px; line-height: 20px;letter-spacing: 0;}
    .body-container .row-container .inner .max-width div {padding-top: 10px; padding-bottom: 10px; margin: 0;}
    .body-container .row-container.row-2 .inner .max-width .column-1 {font-size: 22px; line-height: 25px;}
}

@media all and (max-width: 500px) {
    .body-container h1 {margin: 0;}
    .body-container .row-container {margin: 0;}
    .body-container .row-container .inner .max-width {display: block;}
    .body-container .row-container .inner .max-width div {min-height: 0 !important;}
    .body-container .row-container.row-1 .inner .max-width .column-1 {text-align: left;}
    .body-container .row-container.row-2 .inner .max-width .column-1 {text-align: left;}
}

@media all and (max-width: 414px) {
    .header-container .slideshow-container {height: 147px;}
    .header-container .slideshow-container .inner .wrapper {width: 647px;}
    .header-container .slideshow-container .inner .wrapper #divSlideshowNavigation {display: none;}

    .body-container .row-container .column {padding: 10px;}
}