@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,500,600,700');

/*////////////////////////////////////////////////// Global Style //////////////////////////////////////////////////*/
*, *:focus, *:hover { -webkit-box-shadow: none; box-shadow: none; }
html, body { font-family: 'Open Sans', sans-serif; font-size: 20px; margin: 0; padding: 0; height: 100% }
h1, h2, h3 { font-weight: bold; margin: 0; padding: 0; text-transform: uppercase; }
h1 { color: #b23b33; font-size: 103px; }
h2 { color: #b23b33; font-size: 35px; }
h3 { color: #fff; font-size: 26px; }
header { border-bottom: 1px solid #d1d1d1; left: 0; padding: 25px 15px 15px; position: absolute; right: 0; top: 0; z-index: 2; }
header a { color: #b23b33; font-weight: bold; }
header .logo { text-align: center; width: 100%; }
header .logo img { max-width: 350px; width: 100%; }
header .call-link { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
img { max-width: 100%; }
main { position: relative; z-index: 1; height: 100%; }
p { line-height: 1.7; }
.headerWrapper, .container { position: relative; }
.page-btn { color: #fff; display: block; font-size: 14px; font-weight: 500; height: 45px; line-height: 1; margin: 20px auto 0; padding: 15px 15px; text-transform: uppercase; -webkit-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; transition: all .25s ease-in-out; width: 150px; }
.call-link { font-size: 20px; }

/* Banner Section Style */
.banner-section { background-position: bottom; background-repeat: no-repeat; background-size: cover;padding-bottom: 45px; position: relative; height: 100%; }
.banner-section img { width: 100%; }
.bannerWrapper { position: relative; }
.bannerContent { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); padding: 105px 0; }
.bannerContent h1 { letter-spacing: .2em; }
.bannerContent h2 { letter-spacing: .55em; }
.bannerContent::before, .bannerContent::after { border: 10px solid #000; content: ''; display: block; height: 95px; left: 5px; position: absolute; right: 30px; }
.bannerContent::before { border-bottom: 0; top: 0; }
.bannerContent::after { border-top: 0; bottom: 0; }
.nextSection { bottom: 0px; color: #fff; position: absolute; text-align: center; width: 100%; }
.nextSection h1 { color: #fff; font-size: 48px; margin-bottom: 40px; }
i.fa.fa-angle-double-down { background-color: #b23b33; border-radius: 50%; font-size: 50px; height: 90px; line-height: 1; padding: 23px 20px; width: 90px; cursor: pointer;}

/* Box Section Style */
.boxWrapper, .boxContainer { padding: 45px 0; }
.box { overflow: hidden; position: relative; z-index: 1; }
.box::before {content: '';bottom: 50px;left: 0;position: absolute;right: 0;top: 50px;z-index: -1;}
.box1::before { background-color: #d3f6ff; }
.box1 .page-btn { background-color: #006E89; border: 1px solid #006E89; text-decoration: none; }
.box1 .page-btn:focus, .box1 .page-btn:hover { background-color: #fff; color: #006E89; }
.box1 h2 { color: #006E89; }
.box2::before { background-color: #f9d3d0; }
.box2 .page-btn { background-color: #B23B33; border: 1px solid #B23B33; text-decoration: none; }
.box2 .page-btn:focus, .box2 .page-btn:hover { background-color: #fff; color: #B23B33; }
.box2 h2 { color: #B23B33; }
.box3::before { background-color: #cde4c2; }
.box3 .page-btn { background-color: #659F4A; border: 1px solid #659F4A; text-decoration: none; }
.box3 .page-btn:focus, .box3 .page-btn:hover { background-color: #fff; color: #659F4A; }
.box3 h2 { color: #659F4A; }
.boxImage, .boxContent { display: inline-block; margin: 0 -2px; position: relative; vertical-align: middle; width: 57%; }
.boxContent { width: 37%; }
.boxImage { z-index: -1; }
.boxImage .boxImg { background-position: center; background-repeat: no-repeat; background-size: cover; padding-bottom: 60%; }
.boxHeading { background-color: #b23b33; right: 0; max-width: 50%; padding: 20px 30px; position: absolute; top: 100%; -webkit-transform: translate(20%, -300%) rotate(45deg); -ms-transform: translate(20%, -300%) rotate(45deg); transform: translate(20%, -300%) rotate(45deg); transform-origin: right bottom; text-align: center; width: 100%; z-index: 3; }
.boxContent { background-color: #fff; padding: 30px; text-align: center; z-index: 1; }
.boxContent p { letter-spacing: .1em; }
.boxLogo { margin-bottom: 25px; }
.boxContent h2 { margin-bottom: 20px; }
.boxContainer:nth-child(even) { direction: rtl; }
.boxContainer:nth-child(odd) .boxHeading { left: 0; right: auto; top: 25%; -wbkit-transform: translate(-30%, -33%) rotate(-45deg); -ms-transform: translate(-30%, -33%) rotate(-45deg); transform: translate(-30%, -33%) rotate(-45deg); transform-origin: center; }
.boxContainer:nth-child(odd) .boxContent { left: -50px; }
.boxContainer:nth-child(odd) .boxImage { right: 0; }
.boxContainer:nth-child(odd) .boxHeading { border-radius: 0; margin-right: 0; }
.boxContainer:nth-child(odd) .boxHeading::before, .boxContainer:nth-child(odd) .boxHeading::after { border-top-color: #630000; bottom: 0; }
.boxContainer:nth-child(odd) .boxHeading::before { border-width: 12px 0 0px 12px; }
.boxContainer:nth-child(odd) .boxHeading::after { border-width: 12px 12px 0 0px; }
.boxContainer:nth-child(even) .boxContent { direction: ltr; right: -50px; }
.boxContainer:nth-child(even) .boxImage { left: 0; }
.boxContainer:nth-child(even) .boxHeading { border-radius: 0; margin-left: 0; }
footer { /*background-color: #2a2a2a;*/ color: #fff; font-size: 15px; }
footer p, footer a { color: #fff; margin-bottom: 0; }
.firstFooter { padding: 50px 0; }
.flink { display: inline-block; margin: 0 -2px; vertical-align: middle; width: 33.33%; }
ul.slinks li { display: inline-block; }
ul.slinks li + li { margin-left: 20px; }
.secondFooter { border-top: 1px solid rgba(98, 98, 98, .5); padding: 30px 0; }

footer { display: table; table-layout: auto; width: 100%; }
.footerBox { display: table-cell; vertical-align: bottom; width: 50%; }
.footerInner {padding: 6.5% 0;}
.footerInner, .secondFooter { background-color: #00041d; }
.secondFooter { text-align: center; }
.footerInner div, .footerInner a { display: block; font-size: 24px; margin: 0 auto; /*max-width: 300px;*/ padding: 0 15px; /*text-align: left; width: 100%;*/ }
.footerInner a + a {margin-top: 2%;}
.footerInner .flink { display: table; table-layout: fixed; width: 100%; }
.footerInner .flink + .flink {margin-top: 6.5%;}
.footerInner .flink a { display: table-cell; }

@media only screen and (min-width: 1500px) {
	.container { width: 1500px; }
}
@media only screen and (max-width: 1499px) {
	html, body { font-size: 14px; }
	h2 { font-size: 25px; }
	h3 { font-size: 20px; }
	header .logo img { max-width: 275px; }
	.boxWrapper, .boxContainer { padding: 30px 0; }
	.boxLogo { margin-bottom: 20px; }
	.boxContent h2 { margin-bottom: 15px; }
	.box::before { bottom: 30px; top: 30px; }
	.boxHeading { max-width: 470px; padding: 15px 15px; }
	.boxContainer:nth-child(even) .boxHeading { margin-left: 0; top: 50%; -webkit-transform: translate(0%, 60%) rotate(45deg); -ms-transform: translate(0%, 60%) rotate(45deg); transform: translate(0%, 60%) rotate(45deg); }
	.boxContainer:nth-child(odd) .boxHeading { margin-right: 0; -webkit-transform: translate(-20%, 0%) rotate(-45deg); -ms-transform: translate(-20%, 0%) rotate(-45deg); transform: translate(-20%, 0%) rotate(-45deg); }
	.boxContent { padding: 15px; }
	.boxContainer:nth-child(odd) .boxContent { left: -6%; }
	.boxContainer:nth-child(odd) .boxImage { right: 0; }
	.boxContainer:nth-child(even) .boxImage { left: 0; }
	.footerInner { padding: 6% 0; }
	.firstFooter { padding: 25px 0; }
	.secondFooter { padding: 15px 0; }
	.footerInner div, .footerInner a { font-size: 20px; /*max-width: 200px;*/ }
	i.fa.fa-angle-double-down{font-size: 40px;  height: 70px;  line-height: 1;  padding: 20px 20px;  width: 70px;cursor: pointer;}
}
@media only screen and (max-width: 1199px) {
	html, body { font-size: 12px; }
	h2 { font-size: 20px; }
	h3 { font-size: 18px; }
	.page-btn { font-size: 12px; height: 30px; margin-top: 10px; padding: 8px 10px; width: 120px; }
	.boxContent h2 { margin-bottom: 10px; }
	.boxLogo { margin: 0 auto 10px; max-width: 200px; }
	.boxContainer:nth-child(odd) .boxHeading { -webkit-transform: translate(-25%, 0%) rotate(-45deg); -ms-transform: translate(-25%, 0%) rotate(-45deg); transform: translate(-25%, 0%) rotate(-45deg); }
	.boxContainer:nth-child(even) .boxHeading { -webkit-transform: translate(10%, 60%) rotate(45deg); -ms-transform: translate(10%, 60%) rotate(45deg); transform: translate(10%, 60%) rotate(45deg); }
	.box::before { bottom: 15px; top: 15px; }
	.boxContent { padding: 10px 5px; }
	.footerInner { padding: 6% 0; }
}
@media only screen and (max-width: 991px) {
	html, body { font-size: 13px; }
	h3 { font-size: 14px; }
	p { line-height: 1.3; }
	.nextSection { bottom: -20px; color: #fff; position: absolute; text-align: center; width: 100%; }
	.nextSection h1 { font-size: 32px; margin-bottom: 20px; }
	i.fa.fa-angle-double-down { font-size: 25px; height: 45px; padding: 13px 15px; width: 45px; }
	.boxWrapper, .boxContainer { padding: 20px 0; }
	.box::before { bottom: 0; top: 0; }
	.boxImage, .boxContent { width: 55%; }
	.boxContent { width: 45%; }
	.boxLogo { margin: 0 auto 10px; max-width: 150px; }
	.boxContent h2 { margin-bottom: 10px; }
	footer { font-size: 13px; }
	.footerInner { padding: 6% 0; }
	.footerInner div, .footerInner a { font-size: 16px; /*max-width: 150px;*/ }
	.footerInner .flink + .flink { margin-top: 4%; }

	.boxHeading { max-width: 340px; padding: 10px 10px; }
	.boxContainer:nth-child(even) .boxHeading { -webkit-transform: translate(15%, 75%) rotate(45deg); -ms-transform: translate(15%, 75%) rotate(45deg); transform: translate(15%, 75%) rotate(45deg); }
}
@media only screen and (max-width: 767px) {
	h3 { font-size: 12px; }
	header { padding: 10px 0px; }
	header .logo { text-align: left; }
	header .logo img { max-width: 125px; }
	.banner-section { margin-bottom: 15px; }
	.nextSection h1 { font-size: 24px; }
	i.fa.fa-angle-double-down { font-size: 18px; height: 40px; padding: 13px; width: 40px; }
	.box { margin: 0 auto; width: calc(100% - 30px); }
	.box::before { background-color: transparent; }
	.boxImage, .boxContent { width: 100%; }
	.boxContainer:nth-child(odd) .boxContent { left: 0; }
	.boxContainer:nth-child(even) .boxContent { right: 0; }
	.boxContainer:nth-child(odd) .boxHeading { right: 0; top: 0%; transform: translate(0%, -0%) rotate(-45deg); transform-origin: 210px 150px; }
	.boxContainer:nth-child(even) .boxHeading { right: 0; top: 0; transform: translate(0, 0) rotate(45deg); transform-origin: 190px 180px; }
	.footerBox { display: block; width: 100%; }
	.footerBox:first-child { display: table-footer-group; }

	.footerInner .flink a { display: block; }
	.footerInner .flink a + a { margin-top: 4%; }
    .banner-section {  background-position:top -2px center;  background-repeat: no-repeat;  background-size: cover; height: 305px;}
    .headerWrapper > div {
        font-size: 10px;
    }
}
@media only screen and (max-width: 400px) {
	h3 { font-size: 10px; }
	.boxContainer:nth-child(odd) .boxHeading { transform-origin: 155px 140px; }
	.boxContainer:nth-child(even) .boxHeading { transform-origin: 150px 150px; }
    .banner-section {
        height: 215px;
    }
}