/* Table of Content
==================================================
	#Font-Face
	#Site Styles
	#Media Queries */

/* #Font-Face
================================================== */


/* #Site Styles
================================================== */

/* ### general ### */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { font-family: MyriadProRegular, sans-serif; font-size: 16px; color: #2b2b2c; }
body { background: #fff; }
input, select, textarea { font-family: MyriadProRegular, sans-serif; font-size: 16px; color: #2b2b2c; }
img { border: 0; display: block; }
ul, li { list-style: none; }
:focus { outline: none; }

/* ### global classes ### */
.clear { clear: both; visibility: hidden; line-height: 0; height: 0; }
.center { margin: 0 auto; position: relative; max-width: 1340px; }
.centered { padding-right: calc((100% - 1340px) / 2); padding-left: calc((100% - 1340px) / 2); }
.button { display: inline-block; padding: 15px 25px; border-radius: 25px; background: #1693d1; color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; margin: 0 20px 20px 0; }

/* ### wrapper ### */
#wrapper { position: relative; display: block; width: 100%; min-height: 100%; overflow-x: hidden; }

/* ### main container ### */
#mainCntr { width: 100%; }

/* ### header container ### */
#headerCntr { position: relative; width: 100%; z-index: 100; }
#headerCntr .top { overflow: hidden; padding-top: 40px; padding-bottom: 40px; }
#headerCntr .logo { float: left; }
#headerCntr .logo img { max-width: 100%; }
#headerCntr .right { float: right; font-weight: 600; color: #243979; margin-top: 20px; }
#headerCntr .right p { font-size: 16px; margin-bottom: 10px; }
#headerCntr .phone a { font-size: 26px; text-decoration: none; color: #243979; }
#headerCntr .phone { text-align: right; float: left; }
#headerCntr .social { text-align: right; float: left; margin-left: 75px; }
#headerCntr .social ul { list-style: none; display: inline-block; }
#headerCntr .social li { float: left; margin-left: 5px; }
#headerCntr .social li a { display: block; }
#headerCntr .mobileMenu { display: none; cursor: pointer; z-index: 15; width: 35px; height: 40px; position: relative; transition: 0.2s; overflow: hidden; float: right; }
#headerCntr .mobileMenu span { display: block; height: 4px; text-indent: -9999px; border-radius: 5px; background: none; position: absolute; top: 50%; right: 20%; left: 20%; transition: 0.2s; }
#headerCntr .mobileMenu span:before,
#headerCntr .mobileMenu span:after { display: block; width: 100%; height: 4px; content: ''; border-radius: 5px; background-color: #1693d1; transition-duration: 0.2s,0.2s; position: absolute; left: 0; }
#headerCntr .mobileMenu span:before { top: -5px; }
#headerCntr .mobileMenu span:after { bottom: -5px; }
.mm-opened #headerCntr .mobileMenu span { background: none; }
.mm-opened #headerCntr .mobileMenu.is-active span:before,
.mm-opened #headerCntr .mobileMenu.is-active span:after { transition-delay: 0s, 0.2s; }
.mm-opened #headerCntr .mobileMenu span:before { top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.mm-opened #headerCntr .mobileMenu span:after { bottom: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

	/* ### menu box ### */
	.menuBox:not(.mm-menu) { background: #1693d1; height: 60px; box-shadow: inset 0px 10px 15px rgba(0,0,0,0.1); }	.menuBox:not(.mm-menu) ul { overflow: hidden; width: auto; }
	.menuBox:not(.mm-menu) ul li { float: left; font-size: 18px; font-weight: 600; position: relative; }
	.menuBox:not(.mm-menu) ul li:after { content: ''; height: 60px; border-right: 1px solid rgba(255,255,255,0.1); position: absolute; top: 0; right: 0; }
	.menuBox:not(.mm-menu) ul li:first-child:before { content: ''; height: 60px; border-right: 1px solid rgba(255,255,255,0.1); position: absolute; top: 0; left: 0; }
	.menuBox:not(.mm-menu) ul li a { display: block; padding: 20px 25px 30px 25px; color: #fff; text-decoration: none; }
	.menuBox:not(.mm-menu) ul li a:hover, .menuBox:not(.mm-menu) ul li.is-active a { background: #243979; }

/* ### content container ### */
#contentCntr { width: 100%; }

	/* ### banner box ### */
	.bannerBox { width: 100%; height: 400px; background: url(../img/banner.jpg) no-repeat center; background-size: cover; position: relative; }
	.bannerBox p { position: absolute; bottom: -25px; right: 0; background: #243979; font-size: 24px; color: #fff; padding: 35px; padding-right: 95px; }
	.bannerBox p:before { content: ''; background: #243979; height: 100%; position: absolute; left: 100%; top: 0; z-index: 0; width: 5000px; }
	.bannerBox .center { height: 100%; position: relative; }
	.bannerBoxSub { width: 100%; height: 200px; background: url(../img/bannersub.jpg) no-repeat center; background-size: cover; position: relative; }
	.bannerBoxSub p { position: absolute; bottom: -25px; right: 0; background: #243979; font-size: 24px; color: #fff; padding: 35px; padding-right: 95px; }
	.bannerBoxSub p:before { content: ''; background: #243979; height: 100%; position: absolute; left: 100%; top: 0; z-index: 0; width: 5000px; }
	.bannerBoxSub .center { height: 100%; position: relative; }

	/* ### welcome box ### */
	.welcomeBox { padding-top: 100px; padding-bottom: 100px; position: relative; }
	.welcomeBox .text { position: relative; z-index: 1; }
	.welcomeBox .man { position: absolute; bottom: 0; right: -50px; z-index: 0; }
	.welcomeBox .family { position: absolute; bottom: 0; right: -50px; z-index: 0; }
	.welcomeBox h1 { font-size: 36px; color: #243979; margin-bottom: 50px; font-weight: normal; }
	.welcomeBox p { line-height: 27px; margin-bottom: 30px; }
	.welcomeBox p a { color: #1693d1; text-decoration: none; }
	.welcomeBox p a:hover { color: #1693d1; text-decoration: underline; }
	.welcomeBox .grid { overflow: hidden; padding-top: 20px; padding-bottom: 60px; }
	.welcomeBox .grid li { float: left; width: 200px; margin-right: 25px; margin-top: 25px; position: relative; padding-bottom: 40px; background: #1693d1; }
	.welcomeBox .grid li img { width: 100%; }
	.welcomeBox .grid li:after { position: absolute; bottom: 40px; left: 0; z-index: 0; height: calc(100% - 40px); width: 100%; content: ''; background: linear-gradient(to bottom, rgba(125,185,232,0) 0%,rgba(22,147,209,1) 100%); }
	.welcomeBox .details { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 1; padding: 20px; padding-bottom: 10px; }
	.welcomeBox .icons { float: right; }
	.welcomeBox .icons a { display: block; margin-bottom: 8px; }
	.welcomeBox .details span { float: left; color: #fff; font-weight: 600; font-size: 16px; line-height: 24px; }

/* ### footer container ### */
#footerCntr { overflow: hidden; width: 100%; }
#footerCntr .top { background: #aaaaaa; padding-top: 70px; padding-bottom: 70px; overflow: hidden; }
#footerCntr .left { float: left; }
#footerCntr .right { float: right; text-align: right; }
#footerCntr .right ul { display: inline-block; }
#footerCntr .right li { float: left; margin-left: 5px; }
#footerCntr .top p { font-weight: 600; color: #fff; margin-bottom: 10px; }
#footerCntr address { color: #fff; }
#footerCntr address span { font-size: 16px; line-height: 27px; font-style: normal; float: left; width: 250px; }
#footerCntr address a { color: #fff; text-decoration: none; }
#footerCntr address a:hover { text-decoration: underline; }
#footerCntr .bottom { background: #fff; padding-top: 25px; padding-bottom: 25px; overflow: hidden; }
#footerCntr .bottom p { color: #aaaaaa; font-size: 14px; float: left; }
#footerCntr .bottom p a { color: #aaaaaa; text-decoration: none; }
#footerCntr .bottom p a:hover { text-decoration: underline; }
#footerCntr .bottom p:last-of-type { float: right; }

.mm-menu { background: #1693d1; top: 120px; }
.mm-menu.mm-offcanvas.mm-bottom, .mm-menu.mm-offcanvas.mm-top { height: calc(100% - 120px); }
.mm-panel.mm-hasnavbar .mm-navbar { display: none; }
.mm-panels > .mm-panel.mm-hasnavbar { padding-top: 0; }
.mm-menu li { font-size: 16px; font-weight: 600; }
.mm-menu li a { color: #fff; padding: 20px 25px; }
.mm-listview > li:not(.mm-divider):after { left: 0; width: 60px; border-color: rgba(255,255,255,0.1); }

.welcomeBox 	p { max-width:75%; }
.welcomeBox 	p.full-width { max-width:100% !important; }

/* #Media Queries
================================================== */
@media only screen and (max-width: 1339px) {
.centered, .center { padding-left: 70px; padding-right: 70px; }
}

@media only screen and (max-width: 1199px) {
	.centered, .center { padding-left: 60px; padding-right: 60px; }
	.menuBox:not(.mm-menu) ul li { font-size: 16px; }
	.menuBox:not(.mm-menu) ul li a { padding-left: 20px; padding-right: 20px; }
	.welcomeBox p { width: 65%; }
}

@media only screen and (max-width: 979px) {
	.centered, .center { padding-left: 40px; padding-right: 40px; }
	#headerCntr .social { margin-left: 35px; }
	#headerCntr .right p { font-size: 15px; }
	.menuBox:not(.mm-menu) ul li a span { display: none; }
	.bannerBox { height: 320px; }
	.bannerBoxSub { height: 160px; }
	.welcomeBox { background-position: right -100px bottom; }
	#footerCntr address span { width: 200px; }
	#footerCntr .bottom p { font-size: 13px; }
	#headerCntr .right p { font-size: 14px; }
	#headerCntr .phone a { font-size: 24px; }
	.welcomeBox 	p.full-width-tablet { max-width:100% !important; width:100%; }
	.welcomeBox 	p { max-width:70%; }
}

@media only screen and (max-width: 767px) {
	.centered, .center { padding-left: 30px; padding-right: 30px; }
	#headerCntr .right { display: none; }
	.menuBox:not(.mm-menu) { display: none; }
	#headerCntr .mobileMenu { display: block; margin: 10px -10px 0 0; }
	#headerCntr .logo img { width: 160px; }
	#headerCntr .top { padding-top: 25px; padding-bottom: 25px; }
	.bannerBox p { font-size: 20px; right: auto; left: 20px; padding: 25px; }
	.bannerBoxSub p { font-size: 20px; right: auto; left: 20px; padding: 25px; }
	.welcomeBox h1 { font-size: 28px; margin-bottom: 20px; }
	.welcomeBox { padding-top: 80px; }
	.welcomeBox p { width: 100%; }
	.welcomeBox .grid li { margin-bottom: 25px; }
	#footerCntr .left { width: 100%; float: none; overflow: hidden; margin-bottom: 25px; }
	#footerCntr .right { width: 100%; float: none; text-align: left; }
	#footerCntr .top { padding-top: 35px; padding-bottom: 35px; }
	#footerCntr .bottom p { text-align: center; float: none; width: 100%; margin-bottom: 20px; }
	#footerCntr .bottom p:last-of-type { margin-bottom: 0; }
	.button span { display: none; }
	.welcomeBox .man { right: -100px; }
	.welcomeBox .family { width: 140%; right: -90px; }
}

@media only screen and (max-width: 479px) {
	.bannerBox { background-position: left -250px center; }
	.bannerBoxSub { background-position: left -250px center; }
	.welcomeBox h1 { font-size: 25px; }
	.welcomeBox .grid li { width: 100%; margin-right: 0; padding-bottom: 0; }
	.welcomeBox .grid li:after { bottom: 0; }
	.welcomeBox .grid { padding-bottom: 30px; }
	.button { width: 100%; margin-right: 0; text-align: center; }
	.welcomeBox { padding-bottom: 400px; }
	#footerCntr .bottom p { line-height: 30px; }
	#footerCntr .bottom p span { display: none; }	
	.welcomeBox 	p { max-width:100%; }
}
