/* //// //// Easing general purpose //// --------------------------------------------------------------*/ .easeOut { -webkit-transition-property: all; -webkit-transition-duration: 350ms; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition-property: all; -moz-transition-duration: 350ms; -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-property: all; transition-duration: 350ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } /* //// //// MAIN //// --------------------------------------------------------------*/ .genC1 { color: #2357e7!important;} .genC2 { color: #333333; } .genC3 { color: #f1f2f2 ;} .cWht { color: #fff ;} .cBlk { color: #000 ;} #fullWrp { margin: 0 auto; min-height: 100%; background: #fff; overflow: hidden; } .genTitle1 { color: #000; font-size: 3.6rem; margin: 0 auto 0.5em auto; line-height: 1.35em; } .genTitle2 { color: #000; font-size: 2.4rem; margin: 0 auto 0.7em auto; line-height: 1.35em; } @media all and (max-width: 480px) { .genTitle1 { font-size: 4.6rem; } .genTitle2 { font-size: 3.4rem; } } .disBtn { padding-right: 33px!important; cursor:default; } .disBtn:before { content: ' '; display:block; width: 20px; height: 20px; background:url(../images/loader.svg) no-repeat center center; background-size: 20px 20px; position: absolute; right: 10px; top: 50%; margin-top: -10px; } #quickQuoteCont .disBtn:before { background-image:url(../images/loader_white.svg);} /* Main Header --------------------------------------------------------------*/ @media all and (min-width: 905px) { .nav-hamburger{ display: none!important; } #mainHdr { padding: 2.6rem 0 ; position:fixed; top: 0; left: 0; width: 100%; z-index: 100; background:#fff; -webkit-transition-property: all; -webkit-transition-duration: 350ms; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition-property: all; -moz-transition-duration: 350ms; -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-property: all; transition-duration: 350ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); box-shadow: 0 -5px 9px 0 rgba(0,0,0,0.5); } .scrolling #mainHdr { padding: 1.6rem 0; } #mainLogo { display: block; float: left; width: 191px ; height: 48px ; position: absolute; left: 2rem; top: 0; } #mainLogo a { display:block; width: 100%; height: 100%; position:absolute; background: url(../images/main_logo_black.svg) no-repeat center center ; background-size: cover; text-indent: -8000px; white-space: nowrap; } #mainHdr .headerCtr { margin: 0 auto; padding: 0 2rem; max-width: 1126px; position: relative; } #mainNav { display: inline; } #mainNav .site-nav { margin-right: 70px; padding: 5px 0 5px; text-align: center; } #mainNav .site-nav li { display: inline; font-size: 11.5px; line-height: 38px; padding: 0px 13px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; } #mainNav .site-nav li:last-child { padding-right: 9px;} #mainNav .site-nav li.search { padding: 0 10px; } #mainNav .site-nav li a { color: #939598; position:relative; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; } #mainNav .site-nav li a:after { content: ' '; left: 50%; width: 0; position:absolute; bottom: 2px; height: 2px; background: #939598 ; display: block; -webkit-transition-property: all; -webkit-transition-duration: 350ms; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition-property: all; -moz-transition-duration: 350ms; -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-property: all; transition-duration: 350ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } #mainNav .site-nav li a.genC1:after { background: #2357e7 } #mainNav .site-nav li a:hover:after { left: 0; width: 100%; bottom: 2px; } #mainHdr + #mainContWrp { padding-top: 100px; -webkit-transition-property: padding; -webkit-transition-duration: 350ms; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition-property: padding; -moz-transition-duration: 350ms; -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-property: padding; transition-duration: 350ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } .scrolling #mainHdr + #mainContWrp { padding-top: 80px;} #mainHdr .rgt { position:absolute; right: 2rem; top: 5px ; float:right; white-space:nowrap; } #mainHdr .rgt a.tel { font-size: 11.5px; line-height: 38px; letter-spacing: 0.15em; color: #939598; font-weight: bold; margin-right: 30px; } } @media all and (min-width: 905px) and (max-width: 1040px) { #mainNav .site-nav { margin-right: 52px; } #mainNav .site-nav li { padding: 0 6px;} #mainHdr .rgt a.tel { margin-right: 12px;} } @media all and (min-width: 905px) and (max-width: 937px) { #mainNav .site-nav { margin-right: 48px; } #mainNav .site-nav li , #mainHdr .rgt a.tel { font-size: 11px; } } /* Main Header Mobile --------------------------------------------------------------*/ @media all and (max-width: 904px) { #mainHdr { padding: 10px 0 ; position:fixed; left: 0; right: 0; z-index:1000; background: #fff;} #mainHdr + #mainContWrp { padding-top: 58px; } #mainHdr .headerCtr { margin: 0 auto; padding: 0 2rem; max-width: 1126px; position: relative; height: 38px; } /*burger icon + animation*/ .nav-hamburger { background: transparent none repeat scroll 0 0; border: 0 none; cursor: pointer; display: block; height: 25px; margin-bottom: auto; margin-top: auto; outline: medium none; padding: 0; position: relative; transition: all 0.3s ease-in-out 0s; width: 32px; } .nav-hamburger::before, .nav-hamburger::after, .nav-hamburger span { background-color: #000000; transition: all 0.3s ease-in-out 0s; } .nav-hamburger::before, .nav-hamburger::after { content: ""; height: 2px; left: 0; position: absolute; top: 50%; transform-origin: 50% 50% 0; width: 100%; } .nav-hamburger span { height: 2px; left: 0; overflow: hidden; position: absolute; text-indent: 200%; top: 50%; width: 100%; cursor: pointer; } .nav-hamburger::before { transform: translate3d(0px, -11px, 0px); } .nav-hamburger::after { transform: translate3d(0px, 11px, 0px); } .menuOpen .nav-hamburger span { background-color: #000; opacity: 0; } .menuOpen .nav-hamburger::before { background-color: #000; transform: rotate3d(0, 0, 1, 45deg); } .menuOpen .nav-hamburger::after { background-color: #000; transform: rotate3d(0, 0, 1, -45deg); } .nav-hamburger { position: absolute; right: 2rem; top: 5px; z-index: 1001; cursor: pointer; } #mainNav .site-nav { display: block; top: 0; bottom: calc( -100vh + 48px); left: 0; right: 0; overflow-y: auto; position: absolute; padding: 0; font-family: "Play","Helvetica Neue", Arial, Helvetica, sans-serif; } #mainNav .site-nav ul, #site-menu .site-nav li { margin: 0; padding: 0; } #mainNav .site-nav ul ul { padding: 0; margin: 0; position:static; overflow:hidden; } #mainNav .site-nav li { padding: 0; display: block; text-align: left; } #mainNav .site-nav li a { background: #ffffff; display: block; padding: 11px 20px 11px 20px; color: #fff; font-size: 12px; line-height: 16px; -webkit-transition: 0ms ease-out all; transition: 0ms ease-out all; text-align: center; border-bottom: solid 1px #dedede; text-align: left; font-weight: bold; letter-spacing: 0.15em; } #mainNav .site-nav li a.active, #mainNav .site-nav li a:active { outline: none; color: #fff; background:#2357e7; } #mainNav .site-nav li a .count { display: none; } #mainNav .site-nav li a .ElmShowSmall { display: inline!important; } #mainNav .site-nav ul ul a { border-bottom: 0; padding-left: 30px;} /* open menu -----------------------------*/ #mainNav { background:#fff; display: block!important; max-width: 260px; top: 48px; box-shadow: 1000vh 900vh 0 1000vh #fff, 1000vh 900vh 20px 1000vh rgba(0,0,0, 0.4); position: absolute; right: auto; width: 100%; right: -320px; -webkit-transition: 300ms ease-out all; transition: 300ms ease-out all; z-index: 900; } .menuOpen #mainNav { -webkit-transform: translateX(-320px); transform: translateX(-320px); transform: translate3d(-320px, 0, 0); -webkit-transform: translate3d(-320px, 0, 0); } .menuOpen #mainNav ul li a { color: #939598; } /* logo -----------------------------*/ #mainLogo { display: block; float: left; width: 153px ; height: 38px ; position: absolute; left: 2rem; top: 0; } #mainLogo a { display:block; width: 100%; height: 100%; position:absolute; background: url(../images/main_logo_black.svg) no-repeat center center ; background-size: cover; text-indent: -8000px; white-space: nowrap; } #MainContent { padding-top: 55px; } #mainHdr .rgt a.tel { font-size: 11.5px; margin-right: 2rem; line-height: 38px; letter-spacing: 0.15em; color: #939598; font-weight: bold; } #mainHdr .rgt { position:absolute; right: 53px; margin-right: 2rem; } } @media all and (max-width: 640px) { #mainHdr .rgt { padding-top: 2px; } } @media all and (max-width: 540px) { #mainHdr .rgt a.tel { display: none; } #mainHdr .rgt { right: 44px; } } @media all and (max-width: 365px) { #mainHdr .rgt { display: none; } } /*end menu*/ /* Main Intro --------------------------------------------------------------*/ #mainIntro { position: relative; background: #fff url(../images/intros/main_intro.jpg) no-repeat center center; background-size: cover; padding: 275px 0 294px 0; text-align: center; color: #fff; } #mainIntro:after { position:absolute; content: ' '; position: absolute; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; display:block; background: rgba(0,0,0, 0.2); } #mainIntro .FrmCtr { position:relative; z-index:10; } #mainIntro .introTitle1 { font-size: 56px; line-height: 1.1em; margin-bottom: 0.8em; } @media all and (min-width: 1800px) { #mainIntro { background-image:url(../images/intros/main_intro_xl.jpg); } } @media all and (max-width: 1040px) { #mainIntro { padding: 22vh 0 0; padding-bottom: calc( 22vh + 8.2rem ); } } @media all and (max-width: 640px) { #mainIntro { padding: 22vh 0 0; padding-bottom: calc( 22vh + 8.2rem );} } @media all and (max-width: 480px) { #mainIntro .introTitle1 { font-size: 5.8rem } } /* Main Services --------------------------------------------------------------*/ #mainSvc { background:#f2f2f2;} #mainSvc .svcWrp { width: 100%; height: 0px; margin-bottom: -1px; } #mainSvc .itm { width: 33.33%; float : left; position: relative; z-index: 10; } #mainSvc .itmCont { margin: 0 auto; width: 91%; box-shadow: 0px 1.5rem 3rem rgba(0,0,0,0.17); -moz-box-shadow: 0px 1.5rem 3rem rrgba(0,0,0,0.17); -webkit-box-shadow: 0 1.5rem 3rem rgba(0,0,0,0.17); cursor: pointer; } #mainSvc .itmCont .top { color: #fff; background: #2357e8; padding: 0 3rem; line-height: 7.2rem; font-size: 2.1rem; font-weight: bold; letter-spacing: 0.015em; display: block; } #mainSvc .itmCont .arw { display: block; float: right; width: 5.5rem; height: 7.2rem; background:url(../images/main_arw_white.svg) no-repeat center center; background-size: 100% auto; opacity: .50; filter: alpha(opacity=50); -ms-filter: "alpha(opacity=50)"; -khtml-opacity: .50; -moz-opacity: .50; } #mainSvc .itmCont:hover .arw { opacity: 1; filter: alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; -khtml-opacity: 1; -moz-opacity: 1 } #mainSvc .itmCont p { background-color: #fff; padding: 1.13em 3rem 1.66em 3rem; display: block; font-size: 14px; line-height: 1.5em; } @media all and (min-width: 901px) { #mainSvc .itm { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } } @media all and (min-width: 900px) and (max-width: 1000px) { #mainSvc .itmCont .top { line-height: 6.2rem; font-size: 1.9rem} #mainSvc .itmCont .arw { height: 6.2rem;} #mainSvc .itmCont .top, #mainSvc .itmCont p { padding-right: 1.8rem; padding-left: 1.8rem} #mainSvc .itmCont p { padding-top: 0.8em; padding-bottom: 1.36em; font-size: 13.5px; } } @media all and (max-width: 900px) { #mainSvc .svcWrp { height: auto; margin: -8.2rem 0 4rem 0; padding-bottom: 4rem; } #mainSvc .itm { width: 100%; float: none; margin: 0 0 2rem 0;} #mainSvc .itmCont { width: 100%; max-width: 462px; } } @media all and (max-width: 480px) { #mainSvc .itmCont .top { font-size: 2.8rem; } #mainSvc .itmCont p { font-size: 2.5rem;} } /* Main Supported --------------------------------------------------------------*/ #mainSupp { background: #f2f2f2; padding: 0 0 8.2rem 0;} /* Main Legacy --------------------------------------------------------------*/ #mainLegacy { position:relative; margin-top: -1px; } #mainLegacy:before { content: ' ' ; display: block; position:absolute; left: 0; top: 0; width: 100%; padding-top: 230px; background: #f2f2f2; z-index: 1 ; } #mainLegacy .legacyCont { box-shadow: 0px 1.5rem 3rem rgba(0,0,0,0.17); -moz-box-shadow: 0px 1.5rem 3rem rrgba(0,0,0,0.17); -webkit-box-shadow: 0 1.5rem 3rem rgba(0,0,0,0.17); background: #fff; padding-bottom: 9px; } #mainLegacy .bg { background:url(../images/main_legacy.jpg) no-repeat left center; background-size: auto 100%; position: relative; z-index:10; } #mainLegacy .bg .rgt { background: #fff; width: 600px; float: right; padding: 0 6rem; height: 400px; } #mainLegacy .bg .rgt p:last-child { padding-bottom: 0; } @media all and (min-width: 781px) { #mainLegacy .bg .rgt .vCtr { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: relative; } } @media all and (max-width: 780px) { #mainLegacy .bg { background: none; } #mainLegacy .bg .rgt { float: none; width: 100%; padding: 3rem; height: auto; } } /* Legacy Bottom -----------------------------*/ #mainLegacyBtm { display: flex; flex-flow: row wrap; background: #939498; color: #fff; font-weight: bold; font-size: 2.4rem; padding: 4rem 0; } #mainLegacyBtm a { flex-grow: 1; position:relative; text-align:center; position: relative; color: #fff;} #mainLegacyBtm a:hover { color: #2357e7; } #mainLegacyBtm a:before { content: '/'; position:absolute; left: -1em; width: 2em; display:block; top: 0; color: #fff; } #mainLegacyBtm a:first-child:before { display: none; } @media all and (max-width: 780px) { #mainLegacyBtm { padding: 3rem 0; font-size: 2.2rem; } } /* Main Broker --------------------------------------------------------------*/ #mainBroker .bg { background: url(../images/main_bg_icon.svg) no-repeat center center; background-size: 62.22% auto; padding: 8.2rem 0 10rem 0; } /* Main Footer --------------------------------------------------------------*/ #mainFtr { background: #000; font-size: 13px; color: #949597; line-height: 1.4em; font-weight: 500; } #mainFtrTop { padding: 6rem 0; } #mainFtr .ftrLogoWrp { float: left; } #mainFtr .ftrLogo { background:url(../images/main_logo_white.svg) no-repeat center center; background-size: cover; width: 150px; height: 38px; margin-top: 6px; } #mainFtr .ftrLogoWrp p { padding: 1em 0 0 0; } #mainFtr .rgtWrp .title { color: #fff; font-size: 16px; line-height:1.6em; } #mainFtr .rgtWrp ul li { display:block; } #mainFtr .rgtWrp ul li a { color: #949597; } #mainFtr .rgtWrp ul li a:hover { color: #fff; } @media all and (min-width: 901px) { #mainFtr .rgtWrp { float: right; max-width: 740px; width: calc(100% - 258px) ; display: flex; flex-flow: row wrap;} #mainFtr .rgtWrp .col1, #mainFtr .rgtWrp .col2, #mainFtr .rgtWrp .col3, #mainFtr .rgtWrp .col4 { flex-grow: 1; max-width: 173px; width: 72px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 20px; } #mainFtr .rgtWrp .col1 { max-width: 34%; } #mainFtr .rgtWrp .col2 { max-width: 18%; } #mainFtr .rgtWrp .col3 { max-width: 219px; } #mainFtr .rgtWrp .col4 { padding-right: 0; max-width: 86px; } #mainFtr .rgtWrp .col1 p { max-width: 200px; padding-bottom: 1.4em;} #mainFtr .rgtWrp .col3 p { max-width: 170px; padding-bottom: 0;} } @media all and (max-width: 900px) { #mainFtrTop { padding: 6rem 0 4rem 0; overflow:hidden; } #mainFtrTop .ftrMidWrp { display: flex; justify-content: center; align-items: center; flex-direction: column-reverse; } #mainFtr .ftrLogo { margin: 0 auto; } #mainFtr .ftrLogoWrp { float: none; text-align: center; float: none; text-align: center; width: 100%; padding-top: 5rem; margin-top: 3rem; background: #111; box-shadow: 0 5rem 0 5rem #111; } #mainFtr .rgtWrp { width: 100%; text-align:left; } #mainFtr .rgtWrp .col1, #mainFtr .rgtWrp .col2, #mainFtr .rgtWrp .col3, #mainFtr .rgtWrp .col4 { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; padding: 0 2rem; padding-bottom: 3rem; } #mainFtr .rgtWrp .col1, #mainFtr .rgtWrp .col3 { width: 70%; } #mainFtr .rgtWrp .col3 { clear: left; } #mainFtr .rgtWrp .col2, #mainFtr .rgtWrp .col4 { width: 30% ;} #mainFtr .rgtWrp .col1 p { ; padding-bottom: 1.1em;} #mainFtr .rgtWrp .col3 p {padding-bottom: 0;} } @media all and (max-width: 410px) { #mainFtr .rgtWrp { display: flex; justify-content: space-between; flex-wrap: wrap; } #mainFtr .rgtWrp .col1, #mainFtr .rgtWrp .col3 { width: 100%; order: 1; } #mainFtr .rgtWrp .col3 { order: 2; } #mainFtr .rgtWrp .col2, #mainFtr .rgtWrp .col4 { width: 50%; order: 3} #mainFtr .rgtWrp .col4 { order: 4; } } /* Footer Bottom --------------------------------------------------------------*/ #mainFtrBtm { background: #fff; color: #939498; padding: 2rem 0; line-height: 1.6em; } #mainFtrBtm p { padding: 0; } #mainFtrBtm li { display:inline; } #mainFtrBtm a { color: #939498;} #mainFtrBtm a:hover { color: #75767B; text-decoration: underline; } #mainFtrBtm .lftCopy { float: left; } #mainFtrBtm .rgtSoc { float: right; white-space: nowrap; padding-top: 0.4em } #mainFtrBtm .rgtSoc li { display: inline; padding-left: 0.6em; } #mainFtrBtm .rgtSoc li img { vertical-align: top; display: inline; width: 2.4em; height: 2.4em; } @media all and (max-width: 430px) { #mainFtrBtm .lftCopy { float: none; } #mainFtrBtm .rgtSoc { float: none; } #mainFtrBtm .rgtSoc li { padding-left: 0; padding-right: 0.6em; } } /* //// //// Products & inner frame //// --------------------------------------------------------------*/ /* Main Intro --------------------------------------------------------------*/ .innerIntro { position: relative; background: #fff url(../images/intros/products_intro.jpg) no-repeat center center; background-size: 1800px auto; padding: 100px 0 155px 0; text-align: center; color: #fff; } .contactIntro { background-image: url(../images/intros/contact_intro.jpg) ; background-position: center -156px; padding:112px 0 166px 0 ; } .svcIntro { background-image: url(../images/intros/services_intro.jpg) ; background-position: center -36px; padding: 147px 0 200px 0;} .quoteIntro { background-image: url(../images/intros/quote_intro.jpg) ; background-position: center -231px; padding: 147px 0 200px 0;} .privIntro { background-image: url(../images/intros/privacy_intro.jpg) ; background-position: center -36px; padding: 147px 0 200px 0;} .termsIntro { background-image: url(../images/intros/terms_intro.jpg) ; background-position: center -36px; padding: 147px 0 200px 0 ;} .innerIntro:after { position:absolute; content: ' '; position: absolute; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; display:block; background: rgba(0,0,0, 0.2); } .innerIntro .crumb { position: absolute; left: 0; top: 0; text-align: center; background: rgba(0,0,0,0.5); font-size: 9.5px; letter-spacing: 0.3em; width: 100%; font-weight: 700; color: #fff; z-index: 30; padding: 1em 0; line-height: 1em; } .innerIntro .FrmCtr { position:relative; z-index:10; } .innerIntro .introTitle1 { font-size: 36px; line-height: 1.32em; margin: 0 auto 0.8em auto; } .innerIntro .introTitle2 { font-size: 36px; line-height: 1.32em; margin: 0 auto; } .innerIntro .introTitle2 + a { margin-top: 1.8rem ;} @media all and (min-width: 1800px) { .innerIntro { background-size: 2000px auto; } } @media all and (min-width: 2000px) { .innerIntro { background-image:url(../images/intros/products_intro_xl.jpg); background-size: 3000px auto; } .contactIntro { background-image: url(../images/intros/contact_intro_xl.jpg); background-position: center -429px; } .svcIntro { background-image: url(../images/intros/services_intro_xl.jpg) ; background-position: center -129px; } .quoteIntro { background-image: url(../images/intros/quote_intro_xl.jpg) ; background-position: center -329px; } .privIntro { background-image: url(../images/intros/privacy_intro_xl.jpg) ; background-position: center -129px; } .termsIntro { background-image: url(../images/intros/terms_intro_xl.jpg) ; background-position: center -129px; } } @media all and (min-width: 2800px) { .innerIntro { background-size: 4000px; } .contactIntro { background-position: center -192px; } .svcIntro { background-position: center -192px; } .quoteIntro { background-position: center -422px; } .privIntro { background-position: center -192px; } .termsIntro { background-position: center -192px; } } #productIntroBar { display: flex; flex-flow: row wrap; background: #fff; color: #000; font-weight: bold; font-size: 1.8rem; line-height: 1.35em; padding: 2rem 0; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; box-shadow: 0 0.4rem 1.4rem 0.2rem rgba(255,255,255,0.8); margin: 0 auto; max-width: 670px; margin-bottom: -0.08rem; } #productIntroBar a { flex-grow: 1; position: relative; text-align: center; position: relative; color: #000; } #productIntroBar a:hover { color: #2357e7;} #productIntroBar a:before { content: '/'; position:absolute; left: -1em; width: 2em; display:block; top: 0; color: #000; } #productIntroBar a:first-child:before { display: none; } @media all and (max-width: 640px) { .innerIntro { padding: 9rem 0 9rem 0; padding-top: calc(9rem + 28px); } .innerIntro .introTitle1 { font-size:4.4rem; } .innerIntro .introTitle2 { font-size:4.4rem; } } /* Main Product List --------------------------------------------------------------*/ #productLst { position: relative; top: -5.5rem; margin: 0 auto -5.5rem auto; overflow:hidden; } #productLst:after { content: ' '; position:absolute; left: 0; top: 5.5rem; width: 100%; height: 18rem; background: #f2f2f2; } #productLst .bg { background: #fff; position: relative; z-index: 30; padding: 0 6rem; } #productLst .bgCtr { max-width: 1050px; min-height: 400px; margin: 0 auto; } #productLst .title { font-size: 36px; position: relative; color: #000; padding-bottom: 1.8rem; } #productLst .title em { position:absolute; top: -3.5em; left: 0; display:block; width: 0; height :1px; } #productLst .title .num { position: absolute; left: -10.2rem; top: 0; font-family: "Lora", "Helvetica Neue", Arial, "Nimbus Sans L", "FreeSans"; font-weight: 400; width: 1.16em; display: block; text-align: right; top: 0.04em; } #productLst .cont { max-width: 688px; } #productLst .itm { position:relative; border-top: solid 1px #f2f2f2; padding: 6.5rem 0;} #productLst .itm:first-child { border-top: 0; } #productLst .itmLftImg .cont { float:right; } #productLst .itmRgtImg .cont { float:left; } #productLst .itmLftImg .cont .tmb { position:absolute; top: 15.6rem; left: -12rem; width: 32.8rem; } #productLst .itmRgtImg .cont .tmb { position:absolute ; top: 15.6rem; right: -12rem; width: 32.8rem; } #productLst .arw { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; width: 2.14em; height: 2em; background:url(../images/main_arw_blue.svg) no-repeat center center; background-size: 100% auto; vertical-align: top; margin-left: 0.4em; } @media all and (max-width: 1116px) { #productLst .title .num { left: -8.2rem; } #productLst .itmLftImg .cont { width: auto; float: none; margin-left: 24.7rem; } #productLst .itmRgtImg .cont { width: auto; float: none; margin-right: 24.7rem; } } @media all and (max-width: 920px) { #productLst .bg { padding: 0 4rem; } #productLst .cont .tmb { display:none; } #productLst .itmLftImg .cont { margin-left: 0; } #productLst .itmRgtImg .cont { margin-right: 0; } #productLst .title .num { left: -5rem; text-align: center; } #productLst .title em { top: -2em;} } @media all and (max-width: 640px) { #productLst { top: 0; margin: 0; } #productLst:after { display: none; } #productLst .title .num { position:relative; left: 0; display:inline; } #productLst .bg { padding: 0; } #productLst .itm { padding: 3rem 0;} #productLst .title { font-size: 4.4rem; line-height: 1.1em; } #productLst .arw { height: 1.8em; } } /* //// //// Quote //// --------------------------------------------------------------*/ #productLst #quoteForm { padding: 6rem 0 } #productLst #quoteForm .title { font-size: 24px; } #productLst #quoteForm p.intro { max-width: 430px; } #productLst #quoteForm .sep { height: 0; border-top: solid 1px #f2f2f2; overflow: hidden; margin: 2.3rem 1.3rem 2.3rem 1.3rem; } @media all and (max-width: 900px) { #productLst #quoteForm { padding: 4rem 0;} } @media all and (max-width: 640px) { #productLst #quoteForm { padding: 3rem 0;} } @media all and (max-width: 480px) { #productLst #quoteForm .title { font-size: 3.4rem; } #productLst #quoteForm p.intro { max-width: 430px; padding-bottom: 2rem;} } /* Form --------------------------------------------------------------*/ .rating { margin: 22px auto 0 auto; max-width: 745px; border-top: solid 1px #f2f2f2; padding: 23px 0; } .rating .lft { width: calc(100% - 186px); } .rating .lft p { display: flex; flex-flow: row wrap; padding: 0; } .rating .radlbl { font-weight: bold; color: #000; font-size: 14px; font-family: "Hurme", "Helvetica Neue", Arial, "Nimbus Sans L", "FreeSans"; display: inline; line-height: 20px; vertical-align:top; flex-grow: 1; } .rating .radlbl:last-child { width: 2em; white-space: nowrap; } .rating .full { width: 100%; } .rating .radlbl .rad { margin-right: 6px; } @media all and (min-width: 711px) { .rating .rgt { float: right; padding-top: 14px; position:relative; } .rating .rgt:after { content: ' '; display:block; position: absolute; right: 153px; top: 0; height: 70px; background: #f2f2f2; width: 1px; } } @media all and (max-width: 900px) { .rating { max-width:none; margin: 22px 1.3rem 0 1.3rem; } } @media all and (max-width: 710px) { .rating { border-top: 0; padding-top: 0 ; margin-top:0 ; } .rating .lft { width: 100%; } .rating span.radlbl { display:none; } .rating .radlbl:last-child { width: auto; } .rating .rgt { width: 100%; margin: 22px auto 0 auto; border-top: solid 1px #f2f2f2; padding: 23px 0 0 0; float:left; } } /* //// //// Contact //// --------------------------------------------------------------*/ #productLst #contactForm { padding: 6rem 0 } #productLst #contactForm .title { font-size: 24px; text-align:center; } #productLst #contactForm p.intro { max-width: 480px; margin: 0 auto; text-align: center; } #productLst #contactForm p.intro a { color: #333333; } #productLst #contactForm .sep { height: 0; border-top: solid 1px #f2f2f2; overflow: hidden; margin: 2.3rem 1.3rem 2.3rem 1.3rem; } #productLst #contactForm .btnWrp { text-align:center; padding-top: 1.7rem; clear: both; } @media all and (max-width: 900px) { #productLst #contactForm { padding: 4rem 0;} } @media all and (max-width: 640px) { #productLst #contactForm { padding: 3rem 0;} } /* //// //// Services //// --------------------------------------------------------------*/ #productLst #svcCont { padding: 6rem 0 } #svcConnect { padding: 6rem 0; margin: 0 -12.5rem;} #svcConnect .svcCoBg { padding:5.8rem 33% 5.8rem 0; background-size: 33% auto!important; background: #2357e7 url(../images/services_connect.jpg) right center no-repeat ; text-align: center; box-shadow: 0 0.4rem 1.4rem 0.4rem rgba(181, 181, 181,0.8); } #svcConnect .svcCoBg, #svcConnect .svcCoBg a { color: #fff; } #svcConnect .svcCoBg .lnkTxt { position: relative; font-weight: bold; font-size: 2.4rem; line-height: 2em; vertical-align: top; } #svcConnect .svcCoBg .lnkTxt .arw { background:url(../images/main_arw_white.svg) no-repeat center center; opacity: .50; filter: alpha(opacity=50); -ms-filter: "alpha(opacity=50)"; -khtml-opacity: .50; -moz-opacity: .50; } #svcConnect .svcCoBg .lnkTxt:hover .arw { opacity: 1; filter: alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; -khtml-opacity: 1; -moz-opacity: 1 } @media all and (max-width: 1210px) { #svcConnect { margin: 0 -8rem;} } @media all and (max-width: 900px) { #productLst #svcCont { padding: 4rem 0;} #svcConnect { padding: 4rem 0; margin: 0 -6rem;} #svcConnect .svcCoBg { padding:3.8rem 25% 3.8rem 0; background-size: 25% auto!important; } #svcConnect .svcCoBg .lnkTxt { font-size: 2.95vw; } } @media all and (max-width: 640px) { #productLst #svcCont { padding: 3rem 0;} #svcConnect { padding: 3.4rem 0; margin: 0 -3rem; } #svcConnect .svcCoBg { padding:2.8rem 25% 2.5rem 0; } #svcConnect .svcCoBg .lnkTxt { line-height: 1.7em; } } /* //// //// Privacy //// --------------------------------------------------------------*/ .priTbl { border-collapse: collapse; width: 100% } .priTbl td, .priTbl th { border: 0; padding: 1rem; box-sizing: border-box } .priTbl td { background: #f8f8f9; } .priTbl thead tr, .priTbl thead tr a { background: #555; color: #fff } .priTbl caption { text-align: left; width: 100%; font-size: 1.5rem; margin-top: 2rem; margin-bottom: 1rem } .priTbl tbody tr { background: #fff } .priTbl tbody tr a { color: #00505c } .priTbl--bordered thead { border: 1px solid #555 } .priTbl--bordered thead th { text-align: left; border-right: 1px solid transparent } .priTbl--bordered thead th:last-child { border-right: 0 } .priTbl--bordered tbody td, .priTbl--bordered tbody th { border: 1px solid #ddd } .priTbl--bordered tbody th { text-align: left; font-weight: 600!important } .priTbl--striped tbody tr:nth-child(2n) { background: #f0f0f0 } .priTbl--unstyled, .priTbl--unstyled>tr, .priTbl--unstyled>tr>td, .priTbl--unstyled>tr th { padding: 0!important; border: none!important; margin: 0!important; background-color: transparent!important } .priTbl--tile tbody tr td { width: 50% } .priTbl--tile tbody tr td:last-child { text-align: right } @media (max-width:991px) { .priTbl--tile tbody tr td { width: 100%; display: block; padding-top:.5rem; padding-bottom:.5rem } .priTbl--tile tbody tr td:first-child { padding-top: 1rem } .priTbl--tile tbody tr td:last-child { text-align: left; padding-top:.5rem; padding-bottom: 1rem } } .priTbl--card { table-layout: fixed; word-break: break-all } @media (max-width:1199px) { .priTbl--card thead { display: none } .priTbl--card tbody td, .priTbl--card tbody tr { display: block; background: #fff } .priTbl--card tbody tr { margin-bottom: 1rem } .priTbl--card tbody td:not(:last-child) { border-bottom: 0 } .priTbl--card tbody td:not(:first-child) { border-top: 0 } .priTbl--card tbody td .priTbl__cell--header { font-weight: 600 } .priTbl--card tbody td div { margin-bottom:.5rem; display: block; height: 100%; width: 100% } .priTbl--card tbody>tr>th { background: #555; color: #fff; display: block; font-weight: 300!important } .priTbl--card tbody>tr>th a { color: #fff } } .priTbl--icon-container { display: inline-flex; align-self: center; margin:0 .5rem }