/* Theme Name: Via Financial Group Author: Hello Developers Author URI: https://hello-developers.com/ Version: 1.0 */ /* , ▐▓⌐ ,▄▄ «╫▓^▐▓▌m²< ▓▌ Γ ▓▌ Γ╒▓▌ ▓▌╓▓Γ4▀,▓▓ ,«─Ç▓▄ ,▄▄ƒ ▓█`,.},ε ▓▓ ▓▓ ▄ ▄▓▓█▀ ,.═─^` ,▄▄▓▓▓█` Γ ▓▓ ▓▓ ▓ ▄▓▓ ▓▓ ▓▓.".▓▓. ,.m²^ ,▄▄▄▓▓█▀▀▌▐ ▐▓` ƒ ▓▓ ▐▓ ╚ #▓▓ ▐▓▄▄▓ ▓█▀"`Γ,▄▄▄▓▓█▀▀▀▌▐▄ ▓▓,▓▀╒▓▌. ╒ , ╒▓▀,▄▄▄▓▓▓█▀▓▓.▓▓▄▓▓▓█▀▀,. ▄É╒▓`▄▓▓ ▄▓▀██ ,, {▓ ,. ╒`▐▓▌ ▓▌ z▀` ▄▄▄▓▓▓ ▐▓ ▄▄ ▓▓ ▄█ ▓▓ ▓.▓▓▀`╓▓▀ ▀▀╓▓▀ ╒` ▄▄ ▐▄Γ╒▓▓ ▓▓ ƒ ▓▓▀Γ,└▄ `╓▓▀▄█.▓▓Γ/▀,▓█╦ ,▄▓█▓▓▀ └ ▓▌ ╙█▓ ▓▓ ╓▓▓▓▓▀▓╫▓ , ▓▓`▐▀ ▓▓Γ ▓▌╒▀,▓█Æ ,▄▓▀ `▀▀`└ ▀█ ╒ ▄▓.▄▓ ▄µ ▓▌▐▄ ╓▓▀ ▀╓█▓ƒ ▓▓^╗▄▓▀/ ▓▓Γ. ╒.╓█ ▓▓`▓▀╓▓█▌▐▓Γ╒▓▀╕,▄▄▓▓▀█▀ .▄▓▓ `╓▀ ▓▓▀ `²▀▓▄▌▐▌ ▓▓ └`└ ,Γ ,▓█ ^φ▓▓█▀ [ ▓▓ ,┘,▄▄▓▓▓█▀ │▄▓▓ ▀▀▀`. .. */ /* Import CSS reset and Hello Libary */ @import url('./style-hello.css'); /* FONTS */ /* @import must be at top of file, otherwise CSS will not work */ @import url("//hello.myfonts.net/count/34240c"); @font-face {font-family: 'PlantinTitlingMTStd';src: url('../fonts/34240C_0_0.eot');src: url('../fonts/34240C_0_0.eot?#iefix') format('embedded-opentype'),url('../fonts/34240C_0_0.woff2') format('woff2'),url('../fonts/34240C_0_0.woff') format('woff'),url('../fonts/34240C_0_0.ttf') format('truetype');} @font-face {font-family: 'PlantinInfantMTStd-BoldIt';src: url('../fonts/34240C_1_0.eot');src: url('../fonts/34240C_1_0.eot?#iefix') format('embedded-opentype'),url('../fonts/34240C_1_0.woff2') format('woff2'),url('../fonts/34240C_1_0.woff') format('woff'),url('../fonts/34240C_1_0.ttf') format('truetype');} @font-face {font-family: 'PlantinInfantMTStd-Italic';src: url('../fonts/34240C_2_0.eot');src: url('../fonts/34240C_2_0.eot?#iefix') format('embedded-opentype'),url('../fonts/34240C_2_0.woff2') format('woff2'),url('../fonts/34240C_2_0.woff') format('woff'),url('../fonts/34240C_2_0.ttf') format('truetype');} @font-face {font-family: 'PlantinMTStd-Bold';src: url('../fonts/34240C_3_0.eot');src: url('../fonts/34240C_3_0.eot?#iefix') format('embedded-opentype'),url('../fonts/34240C_3_0.woff2') format('woff2'),url('../fonts/34240C_3_0.woff') format('woff'),url('../fonts/34240C_3_0.ttf') format('truetype');} @font-face {font-family: 'PlantinMTStd-BoldItalic';src: url('../fonts/34240C_4_0.eot');src: url('../fonts/34240C_4_0.eot?#iefix') format('embedded-opentype'),url('../fonts/34240C_4_0.woff2') format('woff2'),url('../fonts/34240C_4_0.woff') format('woff'),url('../fonts/34240C_4_0.ttf') format('truetype');} @font-face {font-family: 'PlantinMTStd-Italic';src: url('../fonts/34240C_5_0.eot');src: url('../fonts/34240C_5_0.eot?#iefix') format('embedded-opentype'),url('../fonts/34240C_5_0.woff2') format('woff2'),url('../fonts/34240C_5_0.woff') format('woff'),url('../fonts/34240C_5_0.ttf') format('truetype');} @font-face {font-family: 'PlantinMTStd-Light';src: url('../fonts/34240C_6_0.eot');src: url('../fonts/34240C_6_0.eot?#iefix') format('embedded-opentype'),url('../fonts/34240C_6_0.woff2') format('woff2'),url('../fonts/34240C_6_0.woff') format('woff'),url('../fonts/34240C_6_0.ttf') format('truetype');} @font-face {font-family: 'PlantinStd-BoldCondensed';src: url('../fonts/34240C_7_0.eot');src: url('../fonts/34240C_7_0.eot?#iefix') format('embedded-opentype'),url('../fonts/34240C_7_0.woff2') format('woff2'),url('../fonts/34240C_7_0.woff') format('woff'),url('../fonts/34240C_7_0.ttf') format('truetype');} @font-face {font-family: 'PlantinHeadMTStd-LigCn';src: url('../fonts/34240C_8_0.eot');src: url('../fonts/34240C_8_0.eot?#iefix') format('embedded-opentype'),url('../fonts/34240C_8_0.woff2') format('woff2'),url('../fonts/34240C_8_0.woff') format('woff'),url('../fonts/34240C_8_0.ttf') format('truetype');} @font-face {font-family: 'PlantinHeadineMTStd-BoldCn';src: url('../fonts/34240C_9_0.eot');src: url('../fonts/34240C_9_0.eot?#iefix') format('embedded-opentype'),url('../fonts/34240C_9_0.woff2') format('woff2'),url('../fonts/34240C_9_0.woff') format('woff'),url('../fonts/34240C_9_0.ttf') format('truetype');} @font-face {font-family: 'PlantinHeadlineMTStd-MdCn';src: url('../fonts/34240C_A_0.eot');src: url('../fonts/34240C_A_0.eot?#iefix') format('embedded-opentype'),url('../fonts/34240C_A_0.woff2') format('woff2'),url('../fonts/34240C_A_0.woff') format('woff'),url('../fonts/34240C_A_0.ttf') format('truetype');} @font-face {font-family: 'PlantinMTStd-LightItalic';src: url('../fonts/34240C_B_0.eot');src: url('../fonts/34240C_B_0.eot?#iefix') format('embedded-opentype'),url('../fonts/34240C_B_0.woff2') format('woff2'),url('../fonts/34240C_B_0.woff') format('woff'),url('../fonts/34240C_B_0.ttf') format('truetype');} @font-face {font-family: 'PlantinMTStd-Semibold';src: url('../fonts/34240C_C_0.eot');src: url('../fonts/34240C_C_0.eot?#iefix') format('embedded-opentype'),url('../fonts/34240C_C_0.woff2') format('woff2'),url('../fonts/34240C_C_0.woff') format('woff'),url('../fonts/34240C_C_0.ttf') format('truetype');} @font-face {font-family: 'PlantinInfantMTStd';src: url('../fonts/34240C_D_0.eot');src: url('../fonts/34240C_D_0.eot?#iefix') format('embedded-opentype'),url('../fonts/34240C_D_0.woff2') format('woff2'),url('../fonts/34240C_D_0.woff') format('woff'),url('../fonts/34240C_D_0.ttf') format('truetype');} @font-face {font-family: 'PlantinInfantMTStd-Bold';src: url('../fonts/34240C_E_0.eot');src: url('../fonts/34240C_E_0.eot?#iefix') format('embedded-opentype'),url('../fonts/34240C_E_0.woff2') format('woff2'),url('../fonts/34240C_E_0.woff') format('woff'),url('../fonts/34240C_E_0.ttf') format('truetype');} @font-face {font-family: 'PlantinMTStd-Regular';src: url('../fonts/34240C_F_0.eot');src: url('../fonts/34240C_F_0.eot?#iefix') format('embedded-opentype'),url('../fonts/34240C_F_0.woff2') format('woff2'),url('../fonts/34240C_F_0.woff') format('woff'),url('../fonts/34240C_F_0.ttf') format('truetype');} @font-face {font-family: 'PlantinMTStd-SemiboldIt';src: url('../fonts/34240C_10_0.eot');src: url('../fonts/34240C_10_0.eot?#iefix') format('embedded-opentype'),url('../fonts/34240C_10_0.woff2') format('woff2'),url('../fonts/34240C_10_0.woff') format('woff'),url('../fonts/34240C_10_0.ttf') format('truetype');} /* GENERAL */ body, html { font-family: PlantinMTStd-Regular, Times, serif; font-size: 16px; line-height: 1.25; color: #000; } /* TEXT */ h1, h2, h3, h4, h5, h6 { font-weight: normal; font-family: PlantinMTStd-Semibold; } h1, h2, h3 { font-size: 28px; margin: 0 0 0.8em 0; } h2 { text-align: center; } h4 { font-size: 20px; font-family: PlantinMTStd-Regular, Times, serif; } h5 { font-size: 16px; margin: 0; } p, ul, ol, li { margin: 0 0 1.25em; } ul { list-style-type: disc; list-style-position: outside; margin-left: 1.25em; } ul li { margin-bottom: 0; } ol { counter-reset: section; list-style-type: none; list-style-position: outside; margin-left: 1.25em; } ol li { position: relative; padding-left: 1.25em; } ol li:before { counter-increment: section; content: counters(section, ".") ". "; position: absolute; left: -1.25em;; } ol[type="a"] { counter-reset: list; margin-top: 1.25em; margin-left: -1.25em;; } ol[type="a"] li { list-style: none; position: relative; margin-bottom: 0; } ol[type="a"] li:before { counter-increment: list; content: "(" counter(list, lower-alpha) ") "; position: absolute; left: -1.25em;; } strong { font-weight: normal; font-family: PlantinMTStd-Semibold; } a { text-decoration: none; color: inherit; } a:hover, a:active { text-decoration: underline; } a.backtotop { font-family: 'Nunito Sans', sans-serif; display: inline-block; padding-right: 60px; position: relative; font-size: 15px; line-height: 2.2; letter-spacing: 1px; background-repeat: no-repeat; background-size: contain; text-transform: uppercase; background-image: url(../images/icon-up-white.png); background-position: right center; } span.toggle { width: 30px; height: 30px; background: transparent url(../images/icon-down-black.png) no-repeat center center; background-size: contain; margin: 0 40px 0 0; cursor: pointer; -webkit-transition: all 0.5s; /* Safari */ transition: all 0.5s; } span.toggle.open { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);} .button { display: inline-block; border: 1px solid #262F41; border-radius: 100px; text-transform: uppercase; background-color: transparent; font-family: 'Nunito Sans', sans-serif; font-size: 12px; line-height: 1; letter-spacing: 0.5px; font-weight: bold; padding: 8px 26px; width: auto; min-width: 124px; cursor: pointer; } .button:hover, .button:active { color: #fff; background-color: #AFD79B; border-color: #AFD79B; text-decoration: none; } .light-text { color: #fff; } .light-text span.toggle { background-image: url(../images/icon-down-white.png); } .light-text .button { border: 1px solid #fff; } .light-text .button:hover, .light-text .button:active { background-color: #fff; color: #000; } /* STRUCTURE */ .account { width: 960px; max-width: 90%; position: relative; z-index: 2; padding-bottom: 40px; } .budget { width: 633px; max-width: 90%; } .image { height: 100%; background-color: #f1f1f1; z-index: 1; } .border-bottom { border-bottom: 1px solid #D8D8D8; margin-bottom: 35px; } .nopadding { padding: 0; } .boxshadow { -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15); -moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15); box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15); } /* HEADER */ header { height: 60px; width: 100%; background-color: #fff; z-index: 100 !important; } header .account { padding: 0; } #logo { font-size: 16px; line-height: 60px; letter-spacing: -0.1px; font-family: PlantinMTStd-Regular, Times, serif; margin: 0; } #logo a { text-decoration: none !important; } nav { font-family: 'Nunito Sans', sans-serif; position: relative; } #highlight { height: 5px; width: 55px; background-color: #AFD79B; position: absolute; bottom: 0; left: 0; -webkit-transition: all ease-in-out 0.2s; /* Safari */ transition: all ease-in-out 0.2s; display: none; } #navigation { margin: 0; list-style-type: none; position: relative; } #navigation li { float: left; display: inline-block; position: relative; font-size: 10px; line-height: 1; } #navigation > li { margin-right: 12px; text-transform: uppercase; height: 60px; } #navigation > li a { display: block; text-decoration: none; padding: 28px 10px; } #navigation > li.active a { font-weight: bold; } #navigation > li span { padding: 28px 50px 21px 32px; display: block; position: relative; white-space: nowrap; cursor: pointer; } #navigation > li i.fa { position: absolute; right: 30px; top: 23px; cursor: pointer; -webkit-transition: all 0.5s; /* Safari */ transition: all 0.5s; } #navigation ul.submenu { position: absolute; top: 100%; left: 0; margin: 0; width: 100%; background-color: #fff; display: none; z-index: 101; } #navigation ul.submenu li { text-transform: none; border-top: 1px solid #ececec; width: 100%; display: inline-block; } #navigation ul.submenu li:first-child { border: 0; } #navigation ul.submenu li.active { background-color: #AFD79B !important; color: #fff; } #navigation ul.submenu li a { padding: 16px 0 16px 15px; } #navigation li.logins { border: 0; margin: 0; } #navigation li.logins ul.submenu { background-color: #656D7E; } #navigation li.logins ul.submenu li { background-color: #656D7E; border-color: #fff; } #top { margin-top: 59px; padding-top: 30px; } #top.banner { background: #f1f1f1 url(../images/opening.jpg) no-repeat center center; background-size: cover; } #top.banner .account { height: 400px; } #top.banner img.br { margin: 0 33px 123px 0; } #about { overflow: visible; } #key-message { padding-top: 37px; margin-top: -100px; margin-bottom: 40px; background-color: #fff; } #journeys h2 { margin-bottom: 0; } #journeys p { font-size: 18px; margin: 0; } .journey { position: relative; background-color: #F5F5F5; min-height: 485px; margin-bottom: 20px; } .journey .text { width: 327px; max-width: 100%; padding-top: 36px; } .journey .image { background-size: cover; background-position: center center; } .image img { margin: 0 30px 43px 0; } .journey a { margin-top: 1.5em; } #personal .image { background-image: url(../images/personal.jpg); } #family .image { background-image: url(../images/family.jpg); } #business .image { background-image: url(../images/business.jpg); } #partnership .image { background-image: url(../images/partnership.jpg); } #team { padding-top: 20px; } #team .person { width: 23.5%; position: relative; margin: 0 2% 0 0; } #team .person.right { margin: 0; } #team .person i.fa { line-height: .9; } #team h5 { font-family: PlantinMTStd-Regular, Times, serif; margin-top: 12px; } .pager { font-size: 24px; line-height: 1; padding: 5px 0 30px 0; } .cycle-pager { display: inline-block; margin: 0 12px; } .cycle-pager span { margin: 5px 2px; background-color: #000; width: 5px; height: 5px; text-indent: -10px; display: inline-block; border: 1px solid #000; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; cursor: pointer; overflow: hidden; position: relative; line-height: 5px; } .pager .fa { cursor: pointer; line-height: 1; } .cycle-pager .cycle-pager-active { background-color: #fff; } #services { padding: 38px 0 10px; } .service { padding: 40px 0 0 0; } .service h3 { margin: 12px 0 2px 0; } .service .text { position: relative; overflow: hidden; max-width: 390px; letter-spacing: 0.5px; margin-top: 75px; -webkit-transition: max-height 0.2s; /* Safari */ transition: max-height 0.2s; } .service .fa-ellipsis-h { font-size: 20px; bottom: 30px; cursor: pointer; } #planning h4, #planning .fa-ellipsis-h { color: #656D7E; } #investment h4, #investment .fa-ellipsis-h { color: #294D56; } #finance h4, #finance .fa-ellipsis-h { color: #1F7973; } #insurance h4, #insurance .fa-ellipsis-h { color: #6E957B; } #management h4, #management .fa-ellipsis-h { color: #9CA679; } #management .button:hover, #management .button:active { background-color: #fff; border-color: #fff; color: #000; } .planning-primary { background-color: #262F41; } .planning-secondary { background-color: #557B84; } .finance-primary { background-color: #43ADA5; } .insurance-primary { background-color: #AFD79B; } .management-primary { background-color: #D8E2B6; } #testimonials { padding-top: 35px; } #testimonials h2 { margin-bottom: 1.2em; } .testimonial { padding: 0 150px; } #start h2 { margin-bottom: 1.2em; } #start .button { margin-top: 20px; } /* #locations p { margin: 0; } */ #contact h2 { margin-bottom: 20px; } #contact .one_half.left { padding-right: 10px; } #contact .one_half.right { padding-left: 10px; } #contact form { padding-top: 5px; } input[type="text"], input[type="email"], textarea { background-color: #f5f5f5; display: block; width: 100%; border: 0; margin: 0 0.625em 0.625em 0; outline: 0; padding: 1em 1.25em; font-family: 'Nunito Sans', sans-serif; font-size: 16px; line-height: 1.25; height: 1.25; color: #000; } textarea { height: 11em; } #response p { color: #ff9600; } footer .account { padding: 25px 0 55px; font-family: 'Nunito Sans', sans-serif; } footer p { font-size: 12px; line-height: 1.7; margin: 0.83em 0 1.7em; } footer ul { list-style-type: none; margin-left: 0; } footer li { text-transform: uppercase; line-height: 2.45; } footer li a:hover, footer li a:active, footer li.active a { text-decoration: underline; } .copyright { font-size: 14px; margin: 1em 0; } /* MOBILE */ .mobile-nav { padding: 0; width: 35px; height: 28px; position: absolute; right: 5%; top: 0; bottom: 0; margin: auto; z-index: 1000; } .patty, .patty:before, .patty:after { background-color: #000; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 4px; -webkit-transition: all .5s; /* Safari */ transition: all .5s; } .patty { margin-top: 12px; } .patty:before { content: ' '; top: -12px; } .patty:after { content: ' '; top: 12px; } .close .patty { background-color: transparent; } .close .patty:before { top: 0 !important; background-color: #fff; -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari */ transform: rotate(45deg); } .close .patty:after { top: 0 !important; right: 0; background-color: #fff; -ms-transform: rotate(-45deg); /* IE 9 */ -webkit-transform: rotate(-45deg); /* Safari */ transform: rotate(-45deg); } /* Media Queries */ @media only screen and (max-width: 840px) { #key-message { padding: 20px; } .journey .image { display: none; } .journey { min-height: 0; } .service h4 { position: absolute; top: 0; right: 0; } .testimonial { padding: 0; } #contact .one_half { padding-right: 0; } .team.line { max-width: 450px; margin: 0 auto; width: 80vw; } #team .person { margin: 0; } footer { padding-bottom: 20px; } .mobile-left { float: left; } .service .text { max-width: 100%; margin: 0; } header .account { max-width: 100%; } nav { float: none; display: block; width: 100%; left: 0; right: 0; position: absolute; } #logo { margin-left: 5%; } #navigation { display: none; height: auto; border: 0; width: 100%; float: none; clear: both; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100vh; background-color: #0D1628; z-index: 1000; } #navigation li { float: none; clear: both; display: block; padding: 0; border-color: #000; font-size: 15px; } #navigation li a, #navigation li span { color: #fff; padding: 20px !important; display: block; } #navigation li i.fa { top: 15px; } #highlight { display: none !important; } #contact .one_half { padding: 0 !important; } }