/* ============================================================================= Global Styles ========================================================================== */ article, aside, details, figcaption, figure, footer, header, .hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; }[hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; background: #25292a;} html, button, input, select, textarea { color: #343434; } body { margin: 0; font-size: 1em; line-height: 1.4; font-family: 'Open Sans', sans-serif; font-weight:400;} ::-moz-selection { background: #22cce7; color: #fff; text-shadow: none; } ::selection { background: #22cce7; color: #fff; text-shadow: none; } a { color: #22CCE7; text-decoration: none;}a:visited { color: #22CCE7; }a:hover { color: #3ED5F0; }a:focus { outline: thin dotted; }a:hover, a:active { outline: 0; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } dfn { font-style: italic; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 3em 0 4em; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } pre { white-space : pre-wrap; word-wrap : break-word; } small { font-size: 85%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } ul, ol { margin: 1em 0; padding: 0 0 0 40px; } dd { margin: 0 0 0 40px; } nav ul, nav ol { list-style : none none; margin : 0; padding : 0; } img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } form { margin: 0; } fieldset { border: 0; margin: 0; padding: 0; } label { cursor: pointer; } legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } button, input { line-height: normal; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } button[disabled], input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; resize: vertical; } textarea#comment{border: 2px solid #eee; border-radius: 6px; padding: 10px 20px;max-width: 100%;} input:valid, textarea:valid { } input:invalid, textarea:invalid { background-color: #f0dddd; } table { border-collapse: collapse; border-spacing: 0; } td { vertical-align: top; color: #6a6a6a; line-height: 1.6em;} .chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; } /* ============================================================================= Grid Styles ========================================================================== */ *, *:after, *:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .grid:after {content: "";display: table;clear: both;} [class*='col-'] {float: left;} [class*='col-'] {padding-right: 10px;} [class*='col-']:last-of-type {padding-right: 0;} /* Full */ .col-1-1 {width: 100%;} /* Halves */ .col-1-2 {width: 50%;} /* Thirds */ .col-1-3 {width: 33.33%;}.col-2-3 {width: 66.66%;} /* Quarters */ .col-1-4 {width: 25%;}.col-2-4 {width: 50%;}.col-3-4 {width:75%;} /* Fifths */ .col-1-5 {width:20%;}.col-2-5 {width:40%;}.col-3-5 {width:60%;}.col-4-5 {width:80%;} /* Sixths */ .col-1-6 {width:16.66%;}.col-2-6 {width:33.33%;}.col-3-6 {width:50%;}.col-4-6 {width:66.66%;}.col-5-6 {width:83.33%;} /* Sevenths */ .col-1-7 {width:14.28%;}.col-2-7 {width:28.57%;}.col-3-7 {width:42.85%;}.col-4-7 {width:57.14%;}.col-5-7 {width:71.42%;}.col-6-7 {width:85.71%;} /* Eighths */ .col-1-8 {width:12.5%;}.col-2-8 {width:25%;}.col-3-8 {width:37.5%;}.col-4-8 {width:50%;}.col-5-8 {width:62.5%;}.col-6-8 {width:75%;}.col-7-8 {width:87.5%;} @media screen and (min-width: 480px) and (max-width: 699px) { .col-1-1 {width: 100%;} .col-1-2 {width: 50%;margin-bottom: 10px;} .col-1-3, .col-2-3 {width : 100%; padding-right :0;margin-bottom : 10px;} .col-1-4, .col-2-4, .col-3-4 {width : 100%; padding-right :0;margin-bottom : 10px;} } @media screen and (min-width: 0px) and (max-width: 479px) { .col-1-1 {width: 100%;} .col-1-2 {width : 100%; padding-right :0;margin-bottom : 10px;} .col-1-3, .col-2-3 {width : 100%; padding-right :0;margin-bottom : 10px;} .col-1-4, .col-2-4, .col-3-4 {width : 100%; padding-right :0;margin-bottom : 10px;} .grid-pad{padding:0;} } /* ============================================================================= Non-Semantic Helper Classes ========================================================================== */ .hidden { display: none !important; visibility: hidden; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .vert-align {position: relative;top: 50%;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-o-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);} /* ============================================================================ Icon Styles ========================================================================== */ @font-face { font-family: "icons"; src:url("../fonts/smartpayroll.eot"); src:url("../fonts/smartpayroll.eot?#iefix") format("embedded-opentype"), url("../fonts/smartpayroll.woff") format("woff"), url("../fonts/smartpayroll.ttf") format("truetype"), url("../fonts/smartpayroll.svg#smartpayroll") format("svg"); font-weight: normal; font-style: normal; } .icon{font-family: "icons";} /* ============================================================================ Content / Typography ========================================================================== */ body{font-size: 100%;} .content .inner{margin : 0 auto; max-width : 1380px; padding : 60px 0; width : 90%;} #single-content {background :#fff;padding-top : 3em;position : relative;width : 100%;overflow : hidden;} .single-content-wrap {max-width : 960px;margin : 0 auto;} .single-content-wrap h3{margin-top : 1.8em;} .single-content-wrap h4{} .content .single-content-wrap ul, .content .single-content-wrap ol{margin : 20px 0 2em;} .page-template-page-success-php .content { text-align:center; } .single-content-wrap img{margin :10px 0 30px; max-width :100%; height :auto;} .single-content-wrap img.attachment-blog-larger{float :none;width : 100%;} .single-content-wrap img.size-full{} .content.big{background: #FFF;} .content.big .inner { } .content.big.white { background:#FFF; } .content.big .inner{padding : 80px 0 90px;max-width : 1422px;} .dark, .dark.content p, .dark.content h3{color: #fff;} .content h2{font-weight: 400;font-size: 300%;margin-bottom: 0.6em;line-height: 1.2em;position: relative;} .content h3 span{color: #22CCE7; border: 2px solid #22CCE7; width: 30px; height: 30px; display: inline-block; text-align: center; font-weight: 700; border-radius: 50px;margin-right: 5px;font-size: 95%;} .content h2 span.ticker-amount {color : #1ed3f4;} .content h3{font-weight: 700;margin-bottom: 0.6em;color: #434343;} .content h4{font-weight: 600;margin-bottom: 0.6em;font-size: 100%;} .content h5{font-weight: 400;color: #444;margin: 0;} .content p{margin : 0 0 1.6em;color : #6a6a6a;line-height : 1.6em;} p.subtle{font-size: 80%;} .hgroup{text-align: center;margin-bottom: 5.5em;} .content .hgroup p{font-size: 125%;margin: 0 auto 1.6em;max-width: 700px;position: relative;} .single-content-wrap li{margin : 0;color : #6a6a6a;line-height : 1.6em;} .single-content-wrap ol li { padding :0.3em 0; } .single-content-wrap ol {padding :0 0 0 24px; } .single-content-wrap p { line-height :1.8em; } .page-id-12 .single-content-wrap ul{padding : 1.5em 0 0 0;} .page-id-428 .single-content-wrap p em, #booky p em{font-style : normal;background : rgb(255, 255, 190);padding : 0 3px;} .content blockquote{font-size: 110%;font-style: italic;border-left: 3px solid #eee;padding-left: 20px;margin-left: -23px;} .content blockquote p{ color: #9C9C9C; line-height: 1.9em; } .content ul { list-style:none; padding:0; margin: 0 0;} .content ul li { padding: 0.5em 0 0.2em 20px; position: relative; line-height: 1.5em;} .content ul li:before { content : "k"; padding-right :10px; font-family : "icons"; font-size : 12px; color : #B1B0B0; position : absolute; left : 0; top : 0.7em;} /* pricing page fees styles */ .the-price-tile li {list-style-type : none;padding : 5px 0 5px 32px;position : relative;color : #6a6a6a;} .the-price-tile h4 { clear:both; } .the-price-tile li:before{content :'l';font-family : "icons";color : #1dcdf1;font-size : 110%;position : absolute;left : 0;top : 6px;} .the-price-tile {padding-right: 40px; margin-bottom: 22px;} .the-price-tile p.priceTitle{font-size: 120%;color: #6a6a6a;margin: 1em 0 0 0;} .the-price-tile p.priceAmount{color : #1dcdf1;font-size : 140%;margin-bottom : 0;border-bottom : 1px solid #DDDDDD;padding-bottom : 0.8em;} .the-price-tile p.priceAmount:nth-child(7){border-color:transparent;} .the-price-tile ul.clearfix{padding: 0;margin-bottom: 1.5em;} .the-price-tile h3{margin-top: 2.2em;} .the-price-tile h2:before{content:'o';font-family: 'icons';padding-right: 20px;color: #22CCE7;} .the-price-tile .col-1-3 { margin-bottom:2em; } .the-price-tile p.priceTitle { padding :0; font-size : 120%; color : #6A6A6A;margin : 1em 0 0 0; } .the-price-tile p.priceAmount { color : #1DCDF1; font-size : 125%; margin : 0; border-bottom : 1px solid #DDD; padding : 0 0 0.5em; } .the-price-tile p.priceAmount small { font-size:12px;} body.home .the-price-tile * { color:#FFF; /* float: none; */} body.home .priceTitle { color: #127989;} body.home .the-price-tile p.priceAmount { border-bottom: 1px solid #1ED3F4;} body.home .the-price-tile li:before { color:#FFF; } body.home .the-price-tile h2:before { color:#FFF; } .feeCalc {width: 50%;} table.numbering{margin: 30px 0 20px;} table.numbering td{padding-bottom: 13px;} table.numbering td.number{padding-right: 14px;} table.numbering td.number span{color: #8bc53f;border: 2px solid #8bc53f;width: 30px;height: 30px;display: block;text-align: center;font-weight: 700;border-radius: 50px;} h4 span.number{color: #8bc53f;border: 2px solid #8bc53f;width: 29px;height: 29px;display: inline-block;text-align: center;font-weight: 700;border-radius: 50px;margin-right: 4px;} table.team{border-top: 1px solid #cbcbcb; margin: 4em 0;} table.team tr {border-bottom: 1px solid #eee;} table.team td{padding: 4% 0 10px;} table.team td h3{margin: 0;} table.team td p{margin-top: 1em;} table.team td.teampic{padding-right: 4%;width: 24%;} table.team td.teampic img {margin-top:0;} table.team.second-table, table.team.first-table { border-top:none; margin:0; } .page-id-428 table.team.first-table table.team{margin-bottom:0;} .page-id-428 table.team.first-table tr, .page-id-428 table.team.second-table tr{border-bottom: none;} .page-id-428 table.team.second-table table.team tr{border-bottom: 1px solid #eee;} .page-id-428 table.team.first-table table.team, .page-id-428 table.team.second-table table.team{margin-top : 0;border-top : 0;} .page-id-428 table.team.first-table table.team td.teampic, .page-id-428 table.team.second-table table.team td.teampic{width:150px;} .page-id-428 table.team.first-table table.team span.icon, .page-id-428 table.team.second-table table.team span.icon{color: #00BEDB;font-size: 47px;padding-top: 15px;display: block;} .page-id-428 table.team.second-table h4{margin-top:0;} .page-id-428 #faqs .number-list.col-1-1{padding-left: 150px;} .single .single-content-wrap .col-1-1.sidebar ul{margin : 0;padding : 0;} .single .single-content-wrap .col-1-1.sidebar ul h3{} .single .single-content-wrap .col-1-1.sidebar ul ul{} .single .single-content-wrap .col-1-1.sidebar ul ul li{list-style-type : none;} @media screen and (max-width:1024px){ .single .single-content-wrap .col-1-1.sidebar{position : relative;width : 100%;border-radius : 4px;text-align : left;right : 0;} } @media screen and (max-width:700px){ body{font-size: 90%;} .content:first-of-type .inner, .content.big:first-of-type .inner{padding-top:50px;} .content .feature p{font-size: 90%;} .hgroup{margin-bottom: 4em;} } @media screen and (max-width:500px){ body{font-size: 80%;} .content .inner{padding: 30px 0;} .content.big .inner{padding-bottom: 80px;} .hgroup{text-align:left;margin-bottom: 2em;} .content h2{font-size: 220%;} table.team td{padding:20px 3px } .page-id-428 table.team.first-table table.team td{padding-bottom:0;} .page-id-428 table.team.first-table table.team td.teampic, .page-id-428 table.team.second-table table.team td.teampic{width: 20%;} .page-id-428 #faqs .number-list.col-1-1{padding-left:20%;} .page-id-428 table.team.first-table table.team span.icon, .page-id-428 table.team.second-table table.team span.icon{font-size: 200%;padding-top: 7px;} .page-id-12 .single-content-wrap ul{padding-top :0;} } /* ============================================================================ Buttons ========================================================================== */ a.button, input[type="submit"]{border: 2px solid;border-radius: 4px;display: inline-block;} .content a.button, input[type="submit"]{line-height: 48px;font-weight: 700;padding: 1px 34px;color: #22CCE7;border-color: #22CCE7;background: transparent;} .content a.button:hover{color: rgba(25, 190, 234, 0.7);border-color: rgba(25, 190, 234, 0.7);} .dark.content a.button, .dark form input[type="submit"]{color :#fff; background :transparent;margin-top : 25px; border : 2px #ffffff;padding : 1px 34px;} .dark.content a.button:hover, .dark form input[type="submit"]:hover{border-color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);} .dark.content a.button.small{margin : 0;border-color : #1ed3f4;line-height : 32px;font-size : 90%;padding : 1px 16px;} .dark.content a.button.small:hover{} .content a.button.small{margin : 0;border-color : #1ed3f4;line-height : 32px;font-size : 90%;padding : 1px 16px;} @media screen and (max-width:700px){ .content a.button{line-height : 40px;padding : 0 23px 1px;font-size : 100%;} } @media screen and (max-width:500px){ .content a.button{line-height : 34px; padding : 0 20px;font-size : 100%;} } /* ============================================================================ FancySelect ========================================================================== */ .fancy-select {position: relative;font-weight: bold;text-transform: uppercase;font-size: 13px;color: #46565D;display: inline-block;top: 17px;border: 0;} .fancy-select.disabled {opacity: 0.5;} .fancy-select select:focus + .trigger {} .fancy-select select:focus + .trigger.open {box-shadow: none;} .fancy-select .trigger {border-radius: 4px;cursor: pointer;padding: 10px 24px 9px 9px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;position: relative;background: #127989;color: #fff;width: 140px;transition: all 240ms ease-out;-webkit-transition: all 240ms ease-out;-moz-transition: all 240ms ease-out;-ms-transition: all 240ms ease-out;-o-transition: all 240ms ease-out;line-height: 2em;text-transform: initial;font-weight: 400;font-size: 125%;border: 0;} .page-id-12 .fancy-select .trigger, .page-id-12 .fancy-select .trigger.open{color: #343434; background: #e5e5e5;} .fancy-select .trigger:after {content: "";display: block;position: absolute;width: 0;height: 0;border: 5px solid transparent;border-top-color: #fff;top: 22px;right: 9px;} .page-id-12 .fancy-select .trigger:after{border-top-color: #343434;} .fancy-select .trigger.open {background : #116674;border : 0;color : #fff;box-shadow : none;} .fancy-select .trigger.open:after {border-top-color: #fff;} .fancy-select ul.options {list-style: none;margin: 0;position: absolute;top: 40px;left: 0;visibility: hidden;opacity: 0;z-index: 50;max-height: 200px;overflow: auto;background: #fff;border-radius: 4px;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);min-width: 200px;transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;-webkit-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;-moz-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;-ms-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;-o-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;padding: 0;} .fancy-select ul.options.open {visibility: visible;top: 51px;opacity: 1; /* have to use a non-visibility transition to prevent this iOS issue (bug?): */ /*http://stackoverflow.com/questions/10736478/css-animation-visibility-visible-works-on-chrome-and-safari-but-not-on-ios*/ transition: opacity 300ms ease-out, top 300ms ease-out;-webkit-transition: opacity 300ms ease-out, top 300ms ease-out;-moz-transition: opacity 300ms ease-out, top 300ms ease-out;-ms-transition: opacity 300ms ease-out, top 300ms ease-out;-o-transition: opacity 300ms ease-out, top 300ms ease-out;} .fancy-select ul.options.overflowing {top: auto;bottom: 40px;transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;-webkit-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;-moz-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;-ms-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;-o-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;} .fancy-select ul.options.overflowing.open {top: auto;bottom: 50px;transition: opacity 300ms ease-out, bottom 300ms ease-out;-webkit-transition: opacity 300ms ease-out, bottom 300ms ease-out;-moz-transition: opacity 300ms ease-out, bottom 300ms ease-out;-ms-transition: opacity 300ms ease-out, bottom 300ms ease-out;-o-transition: opacity 300ms ease-out, bottom 300ms ease-out;} .fancy-select ul.options li {padding: 8px 12px;color: #6a6a6a;cursor: pointer;white-space: nowrap;transition: all 150ms ease-out;-webkit-transition: all 150ms ease-out;-moz-transition: all 150ms ease-out;-ms-transition: all 150ms ease-out;-o-transition: all 150ms ease-out;text-transform: initial;font-weight: 400;line-height: 2em;} .fancy-select ul.options li.selected {background: rgba(43,134,134,0.3);color: rgba(255,255,255,0.75);} .fancy-select ul.options li.hover {color: #AFAFAF;} /* =========================================================================== Header styles ========================================================================== */ #header, .page.page-id-16 #header, .home.page #header, .page.page-id-10 #header, .page.page-id-14 #header{position: absolute;width: 100%;color: #fff;text-align: right;height: 87px;z-index: 20; border-top: 4px solid #1DCDF1;background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjM1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.35)), color-stop(100%,rgba(0,0,0,0))); background: -webkit-linear-gradient(top, rgba(0,0,0,0.35) 0%,rgba(0,0,0,0) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0.35) 0%,rgba(0,0,0,0) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0.35) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59000000', endColorstr='#00000000',GradientType=0 );} .page #header, .blog #header, .single #header{background:transparent;} /* logo */ #header h1{margin : 0;float : left;display : block;position : relative;top : -1px;left : 5%;} #header h1 a{color : transparent;font-size : 0;line-height : 0;text-indent : -9999px;background : url(../img/logo.svg) no-repeat;width : 240px;height : 86px;display : block;background-size : 240px;} .no-svg #header h1 a{background: url(../img/logo.png) no-repeat;background-size: 100%;} /* Nav */ #nav {display: inline-block;position: relative;top: 25px;} span.close.icon{display: none;} #nav ul li{float : left;padding : 0 16px;font-size : 90%;} #nav ul li a, .home.page #nav ul li a, .page-id-10.page #nav ul li a, .page-id-14.page #nav ul li a, .page-id-16.page #nav ul li a {color: white;} #nav ul li a:hover, .home.page #nav ul li a:hover, .page-id-10.page #nav ul li a:hover, .page-id-16.page #nav ul li a:hover {color: rgba(255, 255, 255, 0.7);} #nav ul li.current_page_item a, .home.page #nav ul li.current_page_item a, .page-id-10.page #nav ul li.current_page_item a, .page-id-16.page #nav ul li.current_page_item a {color: rgba(255, 255, 255, 0.55);} a.mobileNav{display: none;} .page #nav ul li a, .blog #nav ul li a, .single #nav ul li a{color: #777777;} .page #nav ul li a:hover, .blog #nav ul li a:hover, .single #nav ul li a:hover{color:#999;} .page #nav ul li.current_page_item a, .blog #nav ul li.current_page_item a, .single #nav ul li.current_page_item a{color: #24b7ce;} /* login */ .page a.login, .blog a.login, .single a.login{} .page a.login:hover, .blog a.login:hover, .single a.login:hover{} a.login, .home.page a.login, .page-id-10.page a.login, .page-id-16.page a.login{color : white;font-size : 90%;margin : 0 4px 0 20px;position : relative;top : 20px;padding : 0 17px 2px;line-height : 33px;background : #99CD0F; border : 0 white; } a.login.employee, .home.page a.login.employee, .page-id-10.page a.login.employee, .page-id-16.page a.login.employee{background : #27BBDA;margin-left : 0;margin-right : 20px;/* position: absolute !important; */} a.login .icon{padding-left: 4px;position: relative;top: 2px;} a.login:hover, .home.page a.login:hover, .page-id-10.page a.login:hover, .page-id-16.page a.login:hover{background: #8EB327;} a.login.employee:hover, .home.page a.login.employee:hover, .page-id-10.page a.login.employee:hover, .page-id-16.page a.login.employee:hover{background: rgba(39, 187, 218, 0.75);} ul.anchors { padding : 18px 0 0;text-align : center;font-size : 80%;max-width : 890px; margin : 20px auto !important;} ul.anchors li {list-style:none;display: inline-block; margin: 4px; padding: 0;} ul.anchors li:first-child a {} ul.anchors li:last-child a {} ul.anchors li a{color: #22CCE7; border: 2px solid #22cce7;padding: 8px 12px;display: block;border-radius: 5px;} ul.anchors li a:hover{border-color:rgba(34, 204, 231, 0.7); color:rgba(34, 204, 231, 0.7);} ul.anchors li:before { display:none; } @media screen and (min-width:1650px){ #header h1{left: 10%;} } @media screen and (max-width:1460px){ #nav ul li{ padding: 0 13px; } #nav ul li a{ font-size: 13px; } } @media screen and (max-width:1350px){ #nav {display : block;opacity :0.0; position : fixed;background : #22cce7;top : 0;width : 100%;text-align : center;z-index : 99;padding : 0;height : 100%;display : table; -webkit-transition : all 0.3s ease;-moz-transition : all 0.3s ease;-o-transition : all 0.3s ease;transition : all 0.3s ease;-webkit-transform : translate3d(0px, -100%, 0px); -moz-transform : translate3d(0px, -100%, 0px); -o-transform : translate3d(0px, -100%, 0px); -ms-transform : translate3d(0px, -100%, 0px); transform : translate3d(0px, -100%, 0px);} span.close.icon{display : block;position : absolute;right : 0;width : 35px;height : 35px;line-height : 34px;font-size : 19px;cursor : pointer;border-radius : 50px;top : 6px;right : 8px;color : #fff;border : 2px solid white;-webkit-user-select : none; -moz-user-select : none; -ms-user-select : none;} #nav.active{opacity:1.0;-webkit-transform: translate3d(0px, 0%, 0px); -moz-transform: translate3d(0px, 0%, 0px); -o-transform: translate3d(0px, 0%, 0px); -ms-transform: translate3d(0px, 0%, 0px); transform: translate3d(0px, 0%, 0px);} #nav ul{display: table; width: 100%; height: 100%;} #nav ul li{float: none;line-height: 42px;display: table-row;width: 100%;} #nav ul li a{font-size : 17px;display : table-cell;width : 100%;margin : 0;vertical-align : middle;border-bottom : 1px solid rgba(255, 255, 255, 0.17);/* font-weight: 900; */line-height : 10px;color : #fff;} #nav ul li.current_page_item a{color:#223747;} a.mobileNav{display: inline-block;color: #fff;padding-right: 28px;position: relative;top: 19px;text-transform: uppercase;font-size: 14px;} a.mobileNav span.hamburger{display: inline-block;position: relative;top: 9px;margin-left: 7px;-webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none;} a.mobileNav span.hamburger ul{margin :0; padding :0;} a.mobileNav span.hamburger li{list-style-type: none;width: 25px;height: 4px;background: #fff; margin-bottom: 4px;} .page #nav ul li a, .blog #nav ul li a, .single #nav ul li a{color:white;font-size: 14px;} .page #nav ul li a:hover, .blog #nav ul li a:hover, .single #nav ul li a:hover{color: rgba(255, 255, 255, 0.7);} .page #nav ul li.current_page_item a, .blog #nav ul li.current_page_item a{color: rgba(255, 255, 255, 0.7);} .page a.mobileNav, .blog a.mobileNav, .single a.mobileNav{color: #444;} .home a.mobileNav, .page-id-10 a.mobileNav, .page-id-14 a.mobileNav, .page-id-16 a.mobileNav{color:white;} .page a.mobileNav span.hamburger li, .blog a.mobileNav span.hamburger li, .single a.mobileNav span.hamburger li{background:#444;} .page.home a.mobileNav span.hamburger li, .page.page-id-10 a.mobileNav span.hamburger li, .page.page-id-16 a.mobileNav span.hamburger li, .page-id-14 a.mobileNav span.hamburger li{background:#fff;} } @media screen and (max-width:700px){ #header{height: 60px;z-index: 999;} #header h1{top: -1px;left: 14px;} #header h1 a{width: 125px;background-size: 100%;height: 51px;} a.mobileNav{font-size : 0;padding-right : 18px;top : 6px;margin-left : 9px;} a.mobileNav span.hamburger li{width: 23px;height: 2px;margin-bottom: 4px;} a.login{top : 10px !important;font-size : 100%;line-height : 19px;border : 0;margin : 0 !important;padding : 8px 12px;} } @media screen and (max-width:450px){ .page #nav ul li a{ font-size: 12px; } #header, .page.page-id-16 #header, .home.page #header, .page.page-id-10 #header, .page.page-id-14 #header{height: 87px;} a.login{position : absolute !important;left : 14px;top : 60px !important;padding : 0 13px 2px !important;line-height : 26px !important;} a.login.employee{position: absolute !important;left: 97px;} } /* ============================================================================ Hero section styles ========================================================================== */ #hero{background: url(../img/herobg1.jpg);min-height: 665px;background-size: cover;background-position: top center;position: relative;overflow: hidden;} #hero.productHero{overflow :visible;background : url(../img/herobg2.jpg);background-size : cover;overflow : visible;min-height : 0;position : relative;} #hero.productHero.open{overflow:hidden;} #hero.angelsHero{background: url(../img/herobg3.jpg);background-size: cover;} #hero:after{content :' '; display :block;width : 350px;height : 514px;background : url(../img/hero1.png);position : absolute;bottom : 0;right : 9%;} #hero.productHero:after{width: 819px;height: 671px;background: url(../img/imac-screenshot.png);z-index: 9;bottom: -67px;right: 140px;} #hero.angelsHero:after{background: transparent url(../img/angel.png) top right;width: 414px;} #hero .inner{margin : 0 auto;padding : 170px 0 0;width : 90%;position : relative;z-index : 2;height : 690px;} #hero.productHero .inner{z-index: 11;position: relative;} #hero.angelsHero .inner{} .hero_copy{color: #fff;max-width: 754px;width: 70%;} #hero.productHero .hero_copy{width: 50%;} #hero.angelsHero .hero_copy{} .hero_copy h2{font-size: 325%;line-height: 120%;margin-top: 0;} .hero_copy p{font-size: 125%;line-height: 165%;margin-bottom: 3em;font-weight: 200;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);} a.heroCTA{ background :#27BBDA; font-size : 22px;color : white;border : 0;font-weight : 700;line-height : 60px;padding : 0 28px 5px;margin-right : 33px;margin-bottom : 20px;} a.heroCTA:hover{ background: rgba(39, 187, 218, 0.75) !important; } body.page-template a.hreoCTA { } a.button[href*="get-smartpayroll/form"], a.button[href*="sign-up"]{ background: #92BB26 !Important; border: none !important; color: #FFF !important;} a.button[href*="get-smartpayroll/form"]:hover, a.button[href*="sign-up"]:hover { background:rgba(146, 184, 45, 0.75) !important; } #CTA a.button { background: #92BB26; border: 3px solid white !important; } #CTA a.button:hover { background:rgba(146, 184, 45, 0.75); } a.heroCTA:hover{background: rgba(146, 184, 45, 0.75);} a.heroCTA.watchDemo{padding : 0 21px 5px 25px;color : #fff;background : #27BBDA;height : 65px;line-height : 58px;} a.heroCTA.watchDemo:hover{background: rgba(39, 187, 218, 0.75);} a.heroCTA.watchDemo span.icon{position: relative;top: 3px;} a.heroLink{font-size: 22px;color: white;font-weight: 400;display: inline-block;} a.heroLink:hover{color: rgba(255,255,255,0.7);} a.heroLink .icon{font-size: 60%;padding-left: 5px;} a.video.icons{position: absolute;color: white;font-family: 'icons';font-size: 330%;border: 4px solid white;width: 80px;height: 80px;border-radius: 50px;text-align: center;line-height: 73px;padding-left: 4px;right: 363px;z-index: 11;bottom: 307px;} a.video.icons:hover{color: rgba(255, 255, 255, 0.75);border-color: rgba(255, 255, 255, 0.75);} /* video modal */ .modal.video{position :absolute;top : 0;z-index : 99999; padding : 30px 30px;width : 100%;height : 100%;background : rgba(36, 183, 206, 0.9); overflow : hidden;} .modal.video a.closemodal{position: absolute;background: #24b7ce;font-weight: normal; color: white; font-family: 'icons'; font-size: 290%; border: 4px solid white; width: 80px; height: 80px; border-radius: 50px; text-align: center; line-height: 73px; right: 40px; z-index: 11; top: 40px;text-transform: lowercase;} .video-content {margin : 0 auto;max-width : 800px;width : 90%;position : relative; top : 50%; -webkit-transform : translateY(-50%); -moz-transform : translateY(-50%); -o-transform : translateY(-50%); -ms-transform : translateY(-50%); transform : translateY(-50%);} .video-content iframe{max-width :100%;} #hero .overlay{background: rgba(0, 0, 0, 0.15);} /** * single touch page */ #single-touch-hero{ background: #f1f1f1 } #single-touch-hero .alignright{ float: right; } #single-touch-hero a.button { background: #92bb26 !Important; color: #ffffff; border-color: #ffffff; } #single-touch-hero .inner { max-width: 1422px; width: 90%; margin: 0 auto; padding-bottom: 0; } #single-touch-hero.content .hgroup p { max-width: none; text-align: left; } #single-touch-hero.content .hgroup p:first-of-type { padding-top: 100px; } #single-touch-hero h2{ font-weight: bold; margin-top: 50px; } .page-template-page-single-touch .side-bar { width:25%; float:right; text-align: center; padding: 0 80px; font-size: 14px; font-weight: bold; } .page-template-page-single-touch .side-bar img{ max-width: 100%; height: auto; } .page-template-page-single-touch .side-content { width:75%; float:right } .page-template-page-single-touch .side-content img{ max-width: 100%; height: auto; } .page-template-page-single-touch .side-content h2, .page-template-page-single-touch .content h2{ font-size: 30px; } .page-template-page-single-touch .side-content .calendar-icon{ display: inline-block; width: 20%; max-width: 100%; text-align: center; font-weight: bold; margin: 0 10px; font-size: 12px; vertical-align:top; } .page-template-page-single-touch .side-content .calendar-icon img { width: 100%; } .page-template-page-single-touch #footer-form{ background: white; padding: 50px 0; } .page-template-page-single-touch #footer-form .inner { background: #f1f1f1; padding: 20px 50px; box-shadow: 0 4px 8px 1px rgba(170, 170, 170, 0.4117647058823529) } .page-template-page-single-touch #footer-form .inner input[type=text], .page-template-page-single-touch #footer-form .inner input[type=tel], .page-template-page-single-touch #footer-form .inner input[type=email] { background: #ffffff; border: solid 2px #999999; padding: 10px; font-size: 20px; margin: 5px 0; max-width: 100%; } .page-template-page-single-touch #footer-form .inner input[type=submit], #_form_28_submit{ background: #92bb26 !Important; color: #ffffff; border: 2px solid #ffffff; border-radius: 4px; display: inline-block; line-height: 48px; font-weight: 700; padding: 1px 34px; margin-top: 15px; } ._form_28 ._form-title{ color: #6a6a6a; font-weight: bold; margin:10px 0; } ._form_28 label { color: #6a6a6a; line-height: 1.6em; } ._form_28 ._error-inner{ color: #ff0000a1 } ._form_28 ._form-content{ width:500px; max-width:100%; } ._form_28 input:not([type="submit"]){ width: 450px; max-width: 100%; } .page-template-page-single-touch #footer-form .inner img{ float: right; width: 350px; height: auto; } .page-template-page-single-touch #footer-form .inner:after{ content: ''; display:block; clear:both; } .hide-lg { display: none } @media screen and (max-width:1100px){ #single-touch-hero img{ max-width: 40%; height: auto; } #single-touch-hero.content .hgroup p:first-of-type { padding-top: 50px; } .page-template-page-single-touch .side-content { width: 100%; } .page-template-page-single-touch .side-bar { display:none; } .hide-lg { display: block } .hide-lg:after{ content: ''; display:block; clear:both; } } @media screen and (max-width:700px) { #single-touch-hero.content .hgroup p:first-of-type { padding-top: 0; } } @media screen and (max-width:560px) { .page-template-page-single-touch .side-content .calendar-icon{ width: 49%; margin:0 } } /** * END single touch page */ @media screen and (max-width:1700px){ #hero.productHero:after{right: 70px;} #hero.angelsHero:after{} a.video.icons{right: 299px;} } @media screen and (min-width:1650px){ #hero .inner{width: 80%;max-width: 1380px;} #hero.productHero .inner{height: auto;padding: 170px 0 180px;} #hero.angelsHero .inner{} #hero:after{right: 16%;} #hero.angelsHero:after{} } @media screen and (max-width:1400px){ #hero:after{right: 5%;} #hero.productHero:after{width: 740px;height: 606px;background-size: 100%;right: 40px;} #hero.angelsHero:after{} #hero .inner{height: auto;padding-bottom: 130px;} .hero_copy h2{font-size: 275%;line-height: 100%;} .hero_copy p{font-size: 110%;margin-bottom: 3.5em;} a.video.icons{bottom: 270px;right: 244px;} } @media screen and (max-width:1100px){ #hero:after{right: -50px;} #hero.productHero:after{width: 550px;background-size: contain;height: 451px;bottom: -61px;right: 25px;} #hero.angelsHero:after{} #hero .inner{padding-top: 140px;} #hero.productHero .inner{height : auto;padding : 153px 0 90px;z-index : 10;} #hero.angelsHero .inner{} .hero_copy{max-width: 64%;} #hero.productHero .hero_copy{width: 60%;max-width: 100%;} #hero.angelsHero .hero_copy{} a.video.icons{bottom: 180px;right: 160px;top: initial;} .modal.video a.closemodal{ width: 40px; height: 40px; font-size: 20px; line-height: 33px; } } @media screen and (max-width:700px){ #hero.angelsHero{min-height: 550px;} #hero .inner{height: auto;padding-top: 150px;} #hero.productHero .inner{padding: 90px 0 50px;} #hero.angelsHero .inner{padding: 120px 0 0;} #hero:after{right: -20%;} #hero.productHero:after{width: 400px;height: 328px;bottom: -37px;} #hero.angelsHero:after{} .hero_copy{max-width: 70%;width: 100%;} #hero.productHero .hero_copy{width: 80%;} #hero.angelsHero .hero_copy{} .hero_copy h2{font-size: 240%;line-height: 110%;} .hero_copy p{font-size: 100%;margin-bottom: 2.5em;} a.heroCTA, a.heroCTA.watchDemo{font-size: 120%;line-height: 50px;padding-bottom: 4px;margin-bottom: 12px;height: auto;} a.heroLink{display: block;font-size: 120%;} #hero:before{content:' ';display:block; width: 100%;height: 100%;position: absolute;z-index: 1;} a.video.icons{bottom: 126px;right: 115px;} } @media screen and (max-width:550px){ img.post-it { display:none; } } @media screen and (max-width:500px){ #hero, #hero.angelsHero{min-height: 320px;} #hero .inner{min-height : 0;padding-top : 160px;padding-bottom : 90px;} #hero.angelsHero .inner{padding-bottom: 80px;} .hero_copy{max-width: 80%;} .hero_copy h2{font-size: 160%;line-height: 130%;} .hero_copy p{font-size: 100%;margin-bottom: 2.5em;} a.heroCTA, a.heroCTA.watchDemo{font-size : 100%;line-height : 42px;padding : 0 20px;display : inline-block;margin-bottom : 11px;} a.heroLink{font-size: 100%;display: block;} #hero:after{width: 280px;background-size: 100%;height: 411px;right: -120px;} #hero.productHero:after{width: 190px;height: 156px;bottom: -17px;right: 12px;} #hero.angelsHero:after{width: 314px;background-size: 100%;bottom: -40px;} a.video.icons{bottom: 52px;right: 10px;display: block;} .modal.video{adding: 0px;} .video-content {} .modal.video a.closemodal{top: 10px;right: 10px;} } @media screen and (max-width:450px){ #hero.productHero .inner{ padding-top: 130px; } } /* ============================================================================ Booky / CTA ========================================================================== */ #booky{background: #fff;padding-top: 7px;text-align: center;} #CTA{background: #24b7ce; background: url(../img/patternOverlay.png) repeat-y top right, url(../img/pattern.png), #24b7ce; overflow: hidden;} #booky .inner, #CTA .inner{padding : 40px 0;position : relative;} #booky a.button{margin: 30px 0 5px;} #CTA a.button{position : absolute;right : 0;top : 28%;} #booky h3, #CTA h3{margin: 0 0 11px;} #CTA h2{display: inline-block;margin-right: 30px;margin-top: 25px;} #CTA p{display: inline-block;} @media screen and (min-width:1200px){ #booky h3, #CTA h3{font-size: 150%;margin: 0 0 11px;} #booky h3{ margin-bottom: 19px; } #booky p{font-size: 128%;margin-bottom: 0;} } @media screen and (max-width:960px){ #CTA{background:#24b7ce;} #CTA h2{display: block;} #CTA p{display: block;} } @media screen and (max-width:700px){ #booky, #CTA{height: auto;} #CTA{text-align:center;} #booky a.button, #CTA a.button{position: relative;top: initial;} #CTA h2{margin: 0;} #CTA p{margin: 0;} } @media screen and (max-width:500px){ #CTA{text-align:left;} #booky .inner, #CTA .inner{padding: 30px 0 35px;} } /* ============================================================================ Features ========================================================================== */ #features, .features{background: #f1f1f1 url(../img/featuresbg.jpg) no-repeat bottom left;position: relative;overflow: hidden;} #features:after, .features:after{content :' '; display :block; width :497px; height :635px;background : transparent url(../img/phone.png);position : absolute;bottom : 0;right : 54%;} #features .col-1-2, .features .col-1-2{float: right;padding-left: 30px;} .features .featureWrap.right .col-1-2{float : left;padding-right : 30px;padding-left : 0;text-align : right;} .featureWrap.right .col-1-2 .feature{margin-left: auto;text-align: left;} .feature{margin-bottom: 3em;max-width: 430px;} .features.multi:after{display: none;} .features.multi .featureWrap{position: relative; overflow: hidden;} .featureWrap.f1{background: #f1f1f1 url(../img/featuresbg.jpg) no-repeat bottom left;} .featureWrap.f1:after{content : ' '; display : block; width : 497px; height : 635px; background : transparent url(../img/phone-user.png); position : absolute; bottom : 0; right : 54%;} .featureWrap.f1.angel{background: #f1f1f1;} .featureWrap.f1.angel:after{background: url(../img/straya.png); width: 530px;height: 458px;bottom: 18%;} .featureWrap.f2{background: #fff url(../img/safari-bg.jpg) no-repeat bottom right;} .featureWrap.f2:after{content: ' '; display: block; width: 720px; height: 559px; background: transparent url(../img/ipad-payroll2.png) no-repeat; position: absolute; bottom: 6%; left: 54%;border-radius: 5px;background-size: 100%;} .featureWrap.f3{background: #F1F1F1 url(../img/mesh.png);} .featureWrap.f3:after{content: ' '; display: block; width: 455px; height: 408px; background: transparent url(../img/cluster.png) no-repeat; position: absolute; bottom: 21%; right: 54%;background-position: top center;} @media screen and (min-width:1400px){ #features .col-1-2, .features .col-1-2{min-height:500px} } @media screen and (max-width:1400px){ #features, .features{background-position-y: bottom;background-position-x: -140px;} .features .col-1-2{min-height: 510px;} .featureWrap.f3:after{} } @media screen and (max-width:1100px){ #features, .features{background: #f1f1f1 url(../img/featuresbg_small.jpg) no-repeat bottom left;} .featureWrap.f1{} .featureWrap.f3:after{ left: 5%; right: initial; width: 43%; background-size: 100%; } } @media screen and (max-width:700px){ #faqs .col-1-1{padding-right:0;} .features .col-1-2{min-height: 410px;} #features {background: #f1f1f1 url(../img/featuresbg_small.jpg) no-repeat bottom left;} .features{background:transparent;} .featureWrap.f1{background: #f1f1f1 url(../img/featuresbg_small.jpg) no-repeat bottom left;} .featureWrap.f2{background: #fff url(../img/safari-bgSmall.jpg) no-repeat bottom right;} .featureWrap.f3{} .featureWrap.f1.angel{background: #f1f1f1;} #features:after, .features:after, .featureWrap.f1:after, .featureWrap.f2:after, .featureWrap.f3:after{width: 430px;background-size: 100%;height: 549px;} .featureWrap.f2:after{height: 332px; bottom: 18%;} .featureWrap.f3:after{width: 205px; height: 181px; left: 9%;} .featureWrap.f1.angel:after{bottom: 9%;} .content.big:first-of-type .inner{ padding-top: 90px; } } @media screen and (max-width:550px){ .features .col-1-2{min-height : 0;padding-bottom : 40px;} .content.big .inner{padding-bottom: 40px;padding-top: 20px;} #features:after, .features:after, .featureWrap.f1:after, .featureWrap.f2:after, .featureWrap.f3:after{position: relative; right: -48px;width: 310px;height: 380px;margin-top: -70px;z-index: 1;} .featureWrap.f2:after{right : initial;left : 0;height : 180px;border-radius : 2px 2px 0 0;right : 0;margin : -70px auto 0;background : url(../img/ipad-payroll-small.png);background-size : 100%;width : 330px;} .featureWrap.f1.angel:after{background-size : 100%;width : 341px;bottom : 0;right : 0;height : 298px;background-repeat : no-repeat;margin-bottom : 30px;left : 0;margin : -80px auto 30px;} #features .col-1-2, .features .col-1-2{width : 100%; float : none;padding-left : 0;z-index : 2;position : relative;} .features .featureWrap.right .col-1-2{} .feature{margin-bottom: 2em;} .featureWrap.f3:after{width: 80%;height: 400px;} } @media screen and (max-width:380px){ .features .col-1-2{padding-bottom: 0;} #features:after, .features:after, .featureWrap.f1:after, .featureWrap.f2:after, .featureWrap.f3:after{width : 250px;right : 0;margin-top : 10px;height : 318px;} .featureWrap.f2:after{height: 148px;margin-top: -30px;} .featureWrap.f3:after{width: 205px;height: 220px;margin-top: 0;} .featureWrap.f1.angel:after{background-size : 100%;width : 261px;bottom : 0;right : 0;height : 227px;left : 0;margin-top : -30px;} } /* ============================================================================ Multi Form Page ========================================================================== */ ul.form-page-nav { margin: 5em auto 4em; background: #E7E7E7; border-radius:4px; overflow:hidden; height:48px; } ul.form-page-nav li { float :left; width :20%; text-align :center; padding : 13px 0 0 20px; color : #FFF; height :48px; position :relative; font-weight : 700; font-size : 15px;} ul.form-page-nav li:first-child { padding-left:10px; } ul.form-page-nav li:before, ul.form-page-nav li:after { content :""; width :0; height :0; top : -4px; right : -47px; display :block; border : 28px solid rgba(0, 0, 0, 0); pointer-events :none; border-left : 18px solid rgba(0, 0, 0, 0); border-left-color : #FFF; left : auto; position : absolute; padding : 0; z-index : 2;} ul.form-page-nav li:after { right: -44px; border-left-color: #E7E7E7; } ul.form-page-nav li.current:after { border-left-color: #1DCDF1; } ul.form-page-nav li.current { background: #1DCDF1; } @media screen and (max-width:1100px){ ul.form-page-nav li { font-size:0.8em; padding-top:15px } } @media screen and (max-width:800px){ ul.form-page-nav li { font-size:12px; padding: 15px 20px !important; border-right:2px solid #FFF; width:auto; } ul.form-page-nav li:last-child{ border:none !important; } ul.form-page-nav li:after, ul.form-page-nav li:before { display:none; } } @media screen and (max-width:700px){ ul.form-page-nav li { width:100%; border:none; border-bottom:2px solid; padding:10px !important; height:auto; } ul.form-page-nav { height:auto; margin: 1em 0 2em;} .infusion-submit input[type="submit"] { bottom: -97px !important; } } ul.form-page-nav li:last-child:before, ul.form-page-nav li:last-child:after { display:none; } .form-nav-actions { margin: 3em 0 2em; } .form-nav-actions a, .infusion-submit input[type="submit"] { background:#EEE; padding:10px 15px; display: block; float: left; margin-right: 10px; color: #FFF; border-radius: 4px; line-height: 48px; font-weight: 700; padding: 1px 22px; color: #22CCE7; border-color: #22CCE7; background: rgba(0, 0, 0, 0); border: 2px solid;} .form-nav-actions a:hover { color: rgba(25, 190, 234, 0.7); border-color: rgba(25, 190, 234, 0.7); } #single-content .form-nav-actions a.next, #single-content .infusion-submit input[type="submit"] { float :right; margin : 0; background : #99CD0F; border-color : #99CD0F; color : #FFF;} .form-nav-actions a.next:hover { background: #8EB327; border-color: #8EB327; color: #FFF;} .form-nav-actions a.cancel { background:transparent; } .form-nav-actions a.cancel:hover { color: #F05889; border-color: #F05889; } .form-nav-actions a[href="#hide"]{ display:none !important; } .form-nav-actions a.next { display:none !important; } body.page-id-567 .form-nav-actions a.next { display:block !important; } .content .form-step-content p { margin:0 0 0.8em 0; font-size:0.9em; } .content .form-step-content .grey-box { background: #F5F5F5; padding:1px 25px; float: right; border-radius: 4px; padding: 0 1.5em 10px!important;} .content .form-step-content hr { margin:1em 0 2em; } .content .form-step-content ul { margin-top:0.5em; } .infusion-submit { } .let-submit .infusion-submit { display:block !important; } .form-wrapper { margin-bottom: 3em; position: relative;} .form-wrapper .grid .col-1-2 { padding-right:1.5em; } .form-wrapper .grid .col-1-2:last-child { padding:0 0 0 1.5em; } .form-wrapper h1 { display:block; width:100%; margin:0; padding:1em 0 0; font-size: 1.2em; clear: both;} .form-wrapper h1:first-child { padding:0; border: none;} .form-wrapper h1:first-child:before { display:none; } .form-wrapper h1:before { content:""; display:block; width:100%; border-top:2px dashed #EEE; height:1em; } .form-wrapper select { font-size:14px !important; position: relative; top: -3px;} .hide-submit input[type="submit"]{ } .infusion-field { width: 100%; float:left; padding: 0.8em 0 0.5em; position: relative;} .infusion-field:nth-child(2n+1){ } .infusion-field label { padding: 0 10px 0.5em 0; display: block; font-size: 13px; font-weight: 700; color: #646464; float: left;} .infusion-field input[type="text"], .infusion-field textarea, .infusion-field input[type="email"] { padding: 5px 10px; width:100%; border:2px solid #EEE; box-shadow:none; outline:none !important; height: 40px; border-radius: 4px; color: #222; clear: both;} .infusion-field input[type="text"]:focus, .infusion-field textarea:focus, .infusion-field input[type="email"]:focus { border-color: #1DCDF1; box-shadow: 0 4px 10px #EEE;} #single-content .infusion-submit input[type="submit"] { margin : 1em 0 0; outline :none !important; padding : 0 20px; font-weight : 400; position : absolute; bottom : -101px; right : 0;} .infusion-submit input[type="submit"]:hover { opacity:0.8; } #help .infusion-submit input[type="submit"] {margin : 0;border-color : #1ed3f4;line-height : 32px;font-size : 90%;padding : 1px 16px; outline :none !important;} .infusion-field .field-content { font-size:12px; clear:both; padding: 1em 0 0; } .infusion-field .field-content p { margin:0 0 1em; } .infusion-field .field-content p:last-child { margin:0; } .infusion-field.required label span { color: #E95858; } .infusion-option { position:relative; display:block; width:100%; clear:none; float: left; margin-bottom: 0.3em;} .infusion-option label { float:left; display: inline-block; padding: 2px 0 0 20px; font-weight: 700; line-height: 1.3em;} .infusion-option input { float:left; display: inline-block;} .infusion-option input { margin: 3px 6px 0 0; position: absolute; left: 0;} .infusion-form.inline { width: 200%; position: relative; z-index: 9; /* background: #FFF; */} .infusion-form.inline .col-1-2 { width:100%; } .infusion-form.inline .infusion-submit { padding-top:38px; } .infusion-form.inline .infusion-field { max-width:30%; padding-right:10px; } table.team .infusion-form.inline{max-width:100%} table.team .infusion-form.inline .infusion-field{max-width: 190px;} table.team .infusion-submit input[type="submit"]{margin-top :0;line-height : 36px;position : relative;top : 6px;font-size : 13px;font-weight : 300;margin-bottom : 30px;} #free-trial .infusion-submit input[type="submit"] { position:relative; bottom: auto !important; float: none !important; margin: 0;} #free-trial h3 { border-top: 2px solid #EEE; margin: 2em 0 1em; padding: 2em 0 0 0; display: block; width: 100%;} #free-trial .infusion-submit { border-top: 2px solid #EEE; margin: 2em 0 1em; padding: 2em 0 0 0; display: block; width: 100%;} #free-trial h3:first-of-type { margin-top: 1em; } @media screen and (max-width:800px){ .form-wrapper .grid .col-1-2 { width:100%; padding:0 !important; } .form-wrapper h1 { padding: 1em 0 0 !important;} .form-wrapper h1:first-child:before { display:block; } .infusion-field { min-height:0; } .form-wrapper select { clear:both; top:0;} table.team .infusion-form.inline .infusion-field{width:100%;max-width:100%;} } @media screen and (max-width:550px){ , { padding:0 15px; border-width:1px !important; line-height:40px; margin-right:4px; } .form-nav-actions a, .infusion-submit input[type="submit"] { font-size:13px; } .form-wrapper select { width:100%; } .infusion-form.inline { width:100%; } .infusion-form.inline .infusion-field { width:100%; max-width:100%; display: block; float: none;} .infusion-form.inline .infusion-submit { padding: 0; margin: 1.2em 0;} } /* ============================================================================ Testimonials ========================================================================== */ #testimonial{background:white;} #testimonial .col-1-2, #testimonial .col-1-2 .testimonial{padding : 0 14px;position : relative;margin : 0 0 22px 0;} #testimonial .avatar{float: left;margin-right: 30px;overflow: hidden;} .testimonial span.arrow{height : 17px;background : transparent url(../img/arrows.gif);position : absolute;z-index : 1;left : 185px;display : block;top : 28px;box-shadow : 0 0 0 black;width : 10px;} #testimonial .te:last-child .avatar{float : right;margin-right : 0;margin-left : 30px;display : block;} #testimonial .avatar img{ width: 148px; height: auto; } #testimonial .quote{background: white;border: 3px solid #eee;border-radius: 9px;padding: 20px;position: relative;overflow: hidden;} #testimonial .col-1-2:last-child span.arrow{right: 185px;left: auto;background-position: -1px -11px;} #testimonial blockquote{color : #6a6a6a;margin : 0;font-size : 90%;line-height : 1.6em;margin-bottom : 1em;font-style : normal;border-left : 0;padding-left : 0;} #testimonial p.author{margin-bottom : 0;font-size : 80%;} .stats{} .statWrap{/* border: 3px solid #eee; */ border-radius: 9px;height: 390px;background: #F5F5F5;padding: 20px;} .stats img{max-height: 370px;margin-left: 30px;max-width: 100%;height: auto;margin: 0 auto;display: block; border-radius: 9px;display: none;} .statWrap span{text-align: center;} .statWrap span h3{margin : 0;font-size : 200%;font-weight : 400;color : #fff;line-height : 110%;/* border: 2px solid #1ed3f4; */width : 163px;border-radius : 7px;line-height : 55px;margin : 0 auto;padding-bottom : 3px;background : #1ed3f4;} .statWrap span p{font-size: 100%;padding-top: 10px;display: block;max-width: 450px;margin: 5px auto 37px;} @media screen and (max-width:1300px){ .stats img{margin: 36px auto 0;} } @media screen and (max-width:1100px){ #testimonial .col-1-2{width: 100%;margin-bottom: 62px;} #testimonial .col-1-2:last-child{margin-bottom:0;} .stats img{margin: 0 auto;} } @media screen and (max-width:700px){ .stats img{max-width: 390px;} } @media screen and (max-width:550px){ #testimonial .col-1-2{padding : 0;margin-bottom : 25px;} #testimonial .avatar{width: 70px;height: 70px;display: block;margin-right: 10px;} #testimonial span.arrow{display:none;} #testimonial .col-1-2:last-child .avatar{margin-left: 10px;} #testimonial .avatar img{width: 100%;} #testimonial .quote{padding: 10px;} .stats img{max-width: 250px;} } @media screen and (max-width:340px){ #testimonial .avatar{width:40px; height:40px;} .statWrap{} .statWrap span h3{/* font-size:400%; */} } /* ============================================================================ Counter ========================================================================== */ #counter{background: url(../img/ausidolla.jpg);background-size: cover;background-position: center;min-height: 390px;text-align: center;} #counter .inner{padding: 120px 0 82px;} #counter h2{color : #1ed3f4;margin-bottom : .45em;margin-top : 0;font-size : 540%;} #counter p{color: #F1F1F1;font-size: 100%;} @media screen and (max-width:1100px){ #counter h2{font-size: 430%;} } @media screen and (max-width:700px){ #counter{min-height: 0;} } @media screen and (max-width:550px){ #counter h2{font-size: 360%;} } @media screen and (max-width:380px){ #counter .inner{padding: 60px 0 40px;} #counter h2{font-size: 270%;} } /* ============================================================================ FAQs ========================================================================== */ #faqs { margin-top:-50px; position:relative; } #faqs .col-1-1{margin-bottom:30px;} #faqs .inner{padding : 0 0 80px;max-width : 960px; margin : 0 auto;} #faqs h2{margin-bottom:0.9em;} #faqs .col-1-1 > h4 {cursor :pointer; color : #00BEDB;padding : 20px 0 20px 43px;margin : 0 0;border-bottom : 1px solid #eee;font-weight : 600; position :relative;font-size : 110%;} #faqs .col-1-1 > h4.open{} #faqs .col-1-1 > h4:before{content :'+'; padding-right :20px;position : absolute;left : 0;margin-top : -4px;} #faqs .col-1-1 > h4.open:before{content:'-'} .answer{padding: 1em 1em 1em 35px;display: none;} .answer.open{display: block;} .answer p { line-height: 1.8em;margin-bottom: 0.5em;} .answer ul { color: #656565; } .page-id-20 #faqs h4:nth-child(2):before{content: '1'; border: 2px solid #00BEDB; width: 30px; height: 30px; border-radius: 30px; text-align: center; width: 30px; display: block; padding: 0;} .page-id-20 #faqs h4:nth-child(4):before{content: '2'; border: 2px solid #00BEDB; width: 30px; height: 30px; border-radius: 30px; text-align: center; width: 30px; display: block; padding: 0;} .page-id-20 #faqs h4:nth-child(6):before{content: '3'; border: 2px solid #00BEDB; width: 30px; height: 30px; border-radius: 30px; text-align: center; width: 30px; display: block; padding: 0;} #faqs .number-list.col-1-1 {} #faqs h4.count-1:before{content: '1' !important; border: 2px solid #00BEDB; width: 30px; height: 30px; border-radius: 30px; text-align: center; width: 30px; display: block; padding: 0;} #faqs h4.count-2:before{content: '2' !important; border: 2px solid #00BEDB; width: 30px; height: 30px; border-radius: 30px; text-align: center; width: 30px; display: block; padding: 0;} #faqs h4.count-3:before{content: '3' !important; border: 2px solid #00BEDB; width: 30px; height: 30px; border-radius: 30px; text-align: center; width: 30px; display: block; padding: 0;} #faqs.white { padding-top: 0; margin: -30px 0 0 0; position: relative; z-index: 1;} #faqs.white .inner { max-width:960px; padding-top: 30px; border-top: 1px solid #eee;} #faqs.white > h4 { border-bottom:1px solid #EEE; } #faqs.white ul { color: #6A6A6A; } .page-template-page-partner-program-2-php #faqs.white .inner { padding-top:0; } @media screen and (max-width:550px){ #faqs .inner{padding-bottom: 40px;padding-top: 20px;} #faqs .col-1-1{margin-bottom:1em;} .page-id-428 #faqs table.team.first-table h4, .page-id-428 #faqs table.team.second-table h4{padding : 0;font-weight : 600;font-size : 110%;} .page-id-428 #faqs table.team.first-table .number-list h4{font-weight: 600; padding: 10px 4% 10px 34px; font-size:100%} #faqs .col-1-1 > h4:before{ width: 24px; height: 24px; top: 12px; } .answer{padding:10px 4% 1px;} .answer p{margin-bottom:1em; line-height:1.6em;} .page-id-20 #faqs h4:before { border:1px solid !important; height:22px !Important; width:22px !important;} #faqs.white { margin:0; } } /* ============================================================================ Fees ========================================================================== */ #fees{background: #24b7ce;background: url(../img/patternOverlay.png) repeat-y top right, url(../img/pattern.png), #24b7ce;overflow: hidden;} .feeCalc{padding-left: 40px;} .feeCalc h2:before{content : 'b';font-family : 'icons';position : relative; left : 0; padding-right : 21px;} .page-id-12 .feeCalc h2:before{color: #22CCE7;} #fees .col-1-2:first-child h3{margin-top: 2.2em;} #fees .col-1-2:first-child h2:before{content :'o';font-family : 'icons';position : relative;left : 0;padding-right : 21px;} .feeCalc form{margin-top: -12px;} .feeCalc form ul{margin : 0 0 20px;padding : 0 0 26px;border-bottom : 1px solid #1ED3F4;} .page-id-12 .feeCalc form ul{border-color: #DDDDDD;} .feeCalc form li{list-style-type: none;font-size: 125%;line-height: 2.5em;padding: 0;} .feeCalc form li:before { display:none; } .feeCalc form br{border-bottom:1px solid #1ed3f4;width: 100%;display: block;background: #fff;height: 10px;} .feeCalc form label{margin-right: 30px;} .feeCalc form input{background : #127989;color : #fff;border : 0;padding : 10px;border-radius : 4px;} .page-id-12 .feeCalc form input{color: #343434;background: #e5e5e5;} .feeCalc form input[type="number"]{width: 70px;} .feeCalc form input[type="submit"]{border : 2px solid white;outline : 0;margin-top : 24px;margin-bottom : 14px;} .dark p.subtle{color: #7FE9FA;} #fees p{margin: 0;} .result {display:block;margin-top: 1em;margin-bottom: 1.2em;font-size: 120%;} .result .amount {font-size:1.6em;} .page-id-12 .result, .page-id-12 .result .amount {color: #1dcdf1;} @media screen and (max-width:1100px){ #fees .col-1-2, .page-id-12 .col-1-2{width : 100%;text-align : center;padding-left : 0; padding-bottom : 7%;text-align : left;padding-right : 0;} .page-id-12 #single-content .col-1-2:first-child{padding-right :0;} .page-id-12 #single-content .col-1-2:last-child{width :100%;} #fees .col-1-2:last-child, .page-id-12 .col-1-2:last-child{padding-bottom:0;} .feeCalc form ul{border :0;padding :0;} .page-id-12 #single-content .col-1-2:first-child ul.clearfix{padding :0;} .page-id-12 #single-content .col-1-2:first-child li:before{display :none; padding :0;} .page-id-12 #single-content .col-1-2:first-child li{padding-left :0;} } @media screen and (max-width:700px){ .feeCalc h2:before{/* font-size: 200%; *//* top: 10px; */} body.home .the-price-tile *{float:none;padding-right:0;} } @media screen and (max-width:550px){ .feeCalc form ul{margin-bottom: 0;} .feeCalc form label{display: block;margin: 10px 0 5px;} .feeCalc form .fancy-select{top: 0;} } /* ============================================================================ Partners ========================================================================== */ .header-table { border: none; font-weight: bold;} .header-table td { padding: 0.5em 1.2em; } .calc-table { width: 100%; margin: 1em 0 0; border: none; font-size: 0.8em;} .calc-table tr { border-bottom: 1px solid #EEE; background: none;} .calc-table td { padding: 1em 1.4em; margin: 0; } .header-row { background-color: rgb(36, 183, 206) !important; border: none !important; } .header-row td { color: rgb(255, 255, 255); font-weight: bold; border-right: 1px solid rgba(0, 0, 0, 0.04);} .calc-time { text-align: center; border: none; background: #EEE; padding: 0.5em; width: 40px; border-radius: 4px;} .calc-time:focus { background: #AAA; color: #FFF; outline:none !important; } .calc-daytime { width: 50px; margin:6px 0 0; display:inline-block; } .calc-table tr:last-child { border:none; } .header-row td:last-child { border:none; } #calc-wrapper { margin : 1em 0; box-shadow : 0 2px 12px rgba(170, 170, 170, 0.16); border-radius : 4px; border : 1px solid #E0E0E0; padding : 1em 0 0; overflow : hidden;} .calc-header { padding: 15px; } .button-calc { line-height: 1em !important; margin: 1em 4px; padding: 8px 12px !important; display: block; border-radius: 5px !important; font-weight: normal !important; outline: none !important;} .button-calc:hover { background-color: rgb(34, 204, 231) !important; border-color: rgb(34, 204, 231); color: rgb(255, 255, 255) !important; } .calc-error { background-color: #D23939 !important; border-color: #D23939; color: rgb(255, 255, 255); font-weight: bold; } .hours-error { color: #D23838; } .header-table input[type="text"] { background:#EEE; border:none !important; padding: 0.5em 0.8em; border-radius: 4px; outline: none !important; max-width: 100%;} #calc-wrapper .footer { font-size : 0.8em; border-top : 1px solid #EEE; position : relative; padding : 1em 0.8em 0; } #calc-wrapper .footer p { padding:0 0.4em 0 0; font-size:1.2em; } #total_all { padding-left:5px; } #calc-wrapper form .left{ width:50%; float:left; padding:0 0 0.5em; } #calc-wrapper form .right{ width:50%; float:left; text-align:right; padding:0 0 0.5em; } #calc-wrapper p.notes { padding: 1em; background: #F4F4F4; font-size: 13px; line-height: 1.3em; margin: 0;} #date_commencing { width:130px !important; } @media screen and (max-width:900px){ .mobile-container { width :100%; overflow-y :scroll; position :relative;} .calc-table { width: 720px; } /*.left { position:absolute; left:1em; padding: 0; bottom: 0;} .right { position:absolute; right:1em; bottom: 0;} */ .header-table tr, .header-table td { display:block; width: 100% !important; padding: 0 0.5em 0.5em;} .header-table td input { max-width:100%; width: 100% !important;} .header-table { width:100% } } @media screen and (max-width:600px){ #calc-wrapper form .right, #calc-wrapper form .left { width:100%; text-align:center; padding: 0 0.5em;} #calc-wrapper form a, #calc-wrapper form input { width:100%; margin: 6px 0; font-size:12px; } #calc-wrapper .footer p { font-size:14px; text-align: center !important; width:100%; margin: 0;} #calc-wrapper .footer { padding-bottom:1em; } } /* ============================================================================ Partners ========================================================================== */ #partners{background:#fff; text-align:left;} #partners .inner{padding: 57px 0 40px;} #partners .hgroup{margin-bottom: 3.5em;} #partners ul{padding : 20px 0;margin :0;} #partners ul h2{display : inline-block;font-size : 240%;margin : 0;min-width : 279px;} #partners ul li{list-style-type : none;display : inline-block;line-height : 0;vertical-align : middle;padding : 0 18px;margin-bottom : 25px;} #partners ul li a{text-indent : -9999px;font-size : 0;line-height : 0;color : transparent;display : block;background : transparent url(../img/logos.png);} #partners ul li:before { display:none; } #partners ul li:nth-child(2) a{width: 190px; height: 31px;background-position: 0 -19px;} #partners ul li:nth-child(3) a{ width: 117px; height: 37px;background-position: -701px -6px;} #partners ul li:nth-child(4) a{width: 93px; height: 36px;background-position: -869px -11px;} #partners ul li:nth-child(5) a{width: 131px; height: 25px;background-position: -1013px -16px;} #partners ul:nth-child(2) li:nth-child(2) a{width: 87px; height: 31px;background-position: -247px -15px;} #partners ul:nth-child(2) li:nth-child(3) a{background-position: -402px -12px; width: 128px; height: 36px;} #partners ul:nth-child(2) li:nth-child(4) a{background-position: -577px 0; width: 58px; height: 58px;} #partners ul:nth-child(2) li:nth-child(5) a{background-position: -1192px -10px; width: 158px; height: 34px;} #partners ul:nth-child(2) li:nth-child(6) a{background-position: -1396px -9px; width: 136px; height: 42px;} #partners ul:nth-child(2) li:nth-child(7) a{background-position: -1587px -7px; width: 106px; height: 43px;} #partners ul:nth-child(2) li:nth-child(8) a{background: transparent url(../img/cpa.gif) no-repeat;width: 97px;height: 43px;} @media screen and (max-width:1350px){ #partners ul h2{display: block;margin-bottom: 14px;} #partners ul li{ padding-left: 0; } } @media screen and (max-width:550px){ #partners .inner {padding: 30px 0 30px;} #partners .hgroup {text-align: center;} #partners ul li {margin-bottom: 15px;} #partners ul li:nth-child(2) a{ background-position: 0 -9px; background-size: 859px 29px; width: 95px; height: 16px; } #partners ul li:nth-child(3) a{ background-position: -350px -3px; background-size: 859px 29px; width: 59px; height: 19px; } #partners ul li:nth-child(4) a{ background-position: -434px -5px; background-size: 859px 29px; width: 47px; height: 18px; } #partners ul li:nth-child(5) a{ background-position: -506px -8px; background-size: 859px 29px; width: 66px; height: 13px; } #partners ul:nth-child(2) li:nth-child(2) a{ background-position: -123px -7px; background-size: 859px 29px; width: 44px; height: 16px; } #partners ul:nth-child(2) li:nth-child(3) a{ background-position: -201px -6px; background-size: 859px 29px; width: 59px; height: 18px; } #partners ul:nth-child(2) li:nth-child(4) a{ background-position: -288px 0; background-size: 859px 29px; width: 29px; height: 29px; } #partners ul:nth-child(2) li:nth-child(5) a{ background-position: -596px -5px; background-size: 859px 29px; width: 79px; height: 17px; } #partners ul:nth-child(2) li:nth-child(6) a{ background-position: -698px -4px; background-size: 859px 29px; width: 68px; height: 21px; } #partners ul:nth-child(2) li:nth-child(7) a{ background-position: -793px -3px; background-size: 859px 29px; width: 53px; height: 22px; } #partners ul:nth-child(2) li:nth-child(8) a{ background-size: 100%; width: 54px; height: 23px; } } /* ============================================================================ multicolumn / help ========================================================================== */ #help{background: #F7F7F7;} #multicol{background: white;} #help .col-1-4, .postPrevs .col-1-4, #multicol .col-1-4, #multicol .col-1-3{padding-right: 3%;} #multicol .col-1-4{margin-bottom: 40px;padding-right: 4%;} #multicol .col-1-4:nth-child(5), #multicol .col-1-4:nth-child(9), #multicol .col-1-4:nth-child(13){clear:both;} #help span.icon{color: #1ed3f4;font-size: 270%;display: block;} #multicol span.icon{color: #24b7ce;font-size: 270%;display: block;} .page-id-10 #multicol .col-1-4:nth-child(4) span.icon{color: #99CD0F;} #help h3, #multicol h3{margin-top: 3px;} #help .grid p, #multicol p{font-size: 89%;} #multicol p{color:#6a6a6a;margin: 10px 0;} #help .hgroup p, #multicol .hgroup p { font-size:125%; margin: 10px auto;} .smileyFingers{margin: 20px 0 0;} .smileyFingers img{margin: auto;display: block;max-width: 100%;} @media screen and (max-width:1100px){ #help, #multicol{} #help .col-1-4, #multicol .col-1-4{width: 50%;margin-bottom: 60px;} #multicol .col-1-4:nth-child(5), #multicol .col-1-4:nth-child(9), #multicol .col-1-4:nth-child(13){clear:none;} #help .col-1-4:nth-child(3){clear:both;} #multicol .col-1-4:nth-child(3), #multicol .col-1-4:nth-child(5), #multicol .col-1-4:nth-child(7), #multicol .col-1-4:nth-child(9), #multicol .col-1-4:nth-child(11), #multicol .col-1-4:nth-child(13){clear:both;} #help .col-1-4:nth-child(3), #help .col-1-4:nth-child(4){margin-bottom:0;} #multicol .col-1-4{margin-bottom: 30px;} } @media screen and (max-width:700px){ #help, #multicol{} #help .col-1-4, #multicol .col-1-4{padding-right: 30px;} } @media screen and (max-width:550px){ #help{/* background: #3d4547; */} #help .col-1-4, #multicol .col-1-4{width : 100%;padding-right : 0;margin-bottom : 30px !important;} #multicol span.icon{float: right;margin-left: 30px;} #help span.icon{float: right;margin-left: 30px;} } /* ============================================================================ Blog styling ========================================================================== */ .wp-post-image {float:right; margin:0 0 20px 20px;} #blog div.navigation {clear:both;} #blog.content{background: #fff;} #blog.content .inner{max-width: 1400px;padding-top: 100px;} #blog .post{padding : 0 1.5%;padding-bottom : 3%;} #blog .post:nth-child(5), #blog .post:nth-child(8), #blog .post:nth-child(11), #blog .post:nth-child(14){clear:both;} .content .single-content-wrap .hgroup{ margin-bottom: 40px; } .single .navigation.clearfix{margin-bottom:10px;} .single .navigation.clearfix a{font-size: 80%;padding-right: 11px;} .single .col-3-4{/* max-width: 650px; */} .col-1-4.sidebar{padding-top: 12px;} .col-1-4.sidebar ul{padding-left: 30px;padding-bottom: 15px;} .col-1-4.sidebar ul h3{font-weight: 600;border-bottom: 1px solid #E9E9E9;padding-bottom: 9px;font-size: 100%;} .col-1-4.sidebar ul li:before{ top: 1px;} .col-1-4.sidebar ul li { padding: 0 0 0 20px; margin-bottom: 0.3em;} .col-1-4.sidebar ul ul{padding : 0;margin : 0;list-style-type : none;} .postTile{background: #F5F5F5;} .postTile img.wp-post-image{float : none;margin : 0;max-width :100%; height :auto;} .postCopy{padding: 20px 5% 1px;} .postCopy h3{margin : 0 0 0.5em;font-size : 180%;} .postCopy h3 a{color: #434343;font-weight: 100;} .postCopy h4{font-size : 80%;margin : 0 0 1em;color : #AFAFAF;} .postCopy p{font-size: 90%;} .single .hgroup h4{font-size : 90%;margin-bottom : 0;color : #A0A0A0;} .single .singleThumb img{margin : 0 0 40px; width : 100%;height :auto;border-radius : 3px 3px 0 0;} h3#comments{margin-bottom: 1.5em;} .commentlist .vcard {font-size: 80%;} .commentlist .vcard img.photo {border-radius: 50%;} .commentlist .vcard img.avatar {margin: 0 7px 0 0;} .commentlist .commentmetadata {font-size: 70%;padding-left: 42px;margin-top: -11px;margin-bottom: 11px;} .commentlist .comment {border: 2px solid #eee;border-radius: 6px;padding: 20px 20px;position: relative;margin-bottom: 21px;} .commentlist .children {margin-top: 14px;} .commentlist {margin : 0;padding : 0;} .commentlist li {list-style-type: none;} .commentlist li ul {margin : 0;padding : 0;} .commentlist li ul.children li.comment-author-admin {margin: 0;} @media screen and (max-width:1100px){ #blog .post{width:50%} #blog .post:nth-child(5), #blog .post:nth-child(8), #blog .post:nth-child(11), #blog .post:nth-child(14){clear:none;} #blog .post:nth-child(4), #blog .post:nth-child(6), #blog .post:nth-child(8), #blog .post:nth-child(10){clear:both;} } @media screen and (max-width:700px){ .col-1-4.sidebar ul{padding:0;} } @media screen and (max-width:550px){ #blog .post{width:100%;} .commentlist .comment{padding:10px; border-width:1px; margin-bottom:5px; border-radius:3px;} .infusion-submit input[type="submit"] { position :relative; bottom :0 !important; right :auto !important; left :0 !important; float : left;} } /* ============================================================================ footer ========================================================================== */ #footer{background: #25292a;} #footer .inner{padding-bottom: 40px;} .postPrevs{/* border-bottom: 1px solid #3b3f40; */background: #424242;} .postPrevs .inner{} .postPrevs h2{margin-top: 20px;margin-bottom: 10px;} .postPrevs h2 span{color: #1ed3f4;} .postPrevs h3{} .postPrevs h3 a{} h4.postMeta{color: #7C7C7C;font-size: 11px;} #footer .postPrevs p{font-size: 89%; color: #CFCFCF;} .postPrevs p a{} a.read-more { padding-left:5px; } .quicklinks{text-align: center;padding: 39px 3%;border-bottom: 1px solid #3b3f40;} .quicklinks ul{margin :0; padding :0;} .quicklinks li{list-style-type: none;display: inline-block;padding: 7px 1.5%;} .quicklinks li:before { display:none; } .quicklinks li a{font-size: 90%;color: #fff;} .footerDetail a.logo{text-indent: -9999px;display: block;width: 160px;height: 66px;background: url(../img/footerLogo.svg);background-size: 160px;margin: 28px 53px 10px 36px;float: left;background-repeat: no-repeat;} .no-svg .footerDetail a.logo{background: url(../img/footerLogo.png);background-size: 160px;} .footerDetail span.footerNumber{float :right;line-height : 120px;padding : 0 30px;font-size : 24px;font-weight : 400;} #footer .footerDetail p{font-size: 11px;color: #717171;padding-top: 39px;} #footer .footerDetail p a.mogul{color: white;} #footer .footerDetail p.datacom{padding-top : 0;margin-top : -12px;font-size : 94%;margin-bottom : 0;} #footer .footerDetail p.datacom a{color: #FFFFFF;} #footer .links{float: right;} #footer .links a{width: 120px; height: 120px; display: block;float: left;line-height: 120px;text-align: center;border-left: 1px solid #3b3f40;color: #fff;font-size: 160%;} @media screen and (max-width:1100px){ .postPrevs .col-1-4{width: 50%;margin-bottom: 20px;} .postPrevs .col-1-4:nth-child(3){clear:both;} .postPrevs .col-1-4:nth-child(3), .postPrevs .col-1-4:nth-child(4){margin-bottom:0;} #footer .links{margin-left: 20px;} #footer .links a{width: 70px;} #footer .footerDetail p{padding-top: 10px;} .footerDetail span.footerNumber{padding-right : 0;font-size : 19px;float : none;line-height : 20px;padding-left : 0;padding-top : 29px;display : block;} #footer .footerDetail p.datacom{padding-bottom:10px;} } @media screen and (max-width:700px){ .postPrevs .col-1-4{padding-right: 20px;} #footer .footerDetail p{text-align: center;max-width: 90%;margin: 0 auto 30px;padding-top: 10px;} .footerDetail a.logo{float : none;margin : 0;clear : both;margin : 30px auto 0;} #footer .links{width: 100%;margin-bottom: 30px;border-bottom: 1px solid #3b3f40;} #footer .links a{width: 50%;height: 40px;line-height: 40px;font-size: 16px;border-bottom: 1px solid #3b3f40;} #footer .links a:last-of-type{border-bottom:0;} .footerDetail span.footerNumber{float : none;line-height : 42px;padding : 0;text-align : center;display : block;} } @media screen and (max-width:550px){ .postPrevs .col-1-4{width : 100%;margin-bottom : 0;padding-right : 0;} .footerDetail span.footerNumber{} } /* NZ website section*/ .madeinNZ{ border-radius: 9px; background: #F5F5F5 url(../img/nz.png) no-repeat scroll 34px center; padding: 42px 20px 20px 170px; min-height: 210px; display: block; margin: 0 auto; max-width: 530px; background-size: 90px;} .madeinNZ p a{font-weight: bold;} @media screen and (max-width:450px){ .madeinNZ{padding: 10px 20px 10px 83px;background: #F5F5F5 url(../img/nz.png) no-repeat scroll 19px center;background-size: 45px;min-height: 0;} } /* ============================================================================ Mogul Custom Modals - modal.js ========================================================================== */ .modal-is-open { overflow:hidden !important; } #the-modal { position :fixed; width :100%; height :100%; top :0; left :0; overflow : hidden; z-index : 9999999999999999999; } #the-modal .pageContent #the-modal { position:relative; height:auto; z-index:1; left:auto; top:auto; overflow:auto; } #the-modal .close { position:absolute; top:-15px; right:-15px; font-family: "icons"; background: #EE3A43; display:block; width:30px; height:30px; text-align:center; border-radius:100px; padding: 1px; color: #FFF; z-index:3; text-decoration: none; font-size: 20px;} #the-modal .close:hover, #the-modal .close:focus { background: #EE3A43; text-decoration:none; outline:none; } #the-modal .close-overlay { position :fixed; background :none; width :100%; height :100%; left :0; top :0; z-index :-1; } #the-modal.keyboard-open { height:300%; } #the-modal .modal-bkgd { background: url(../img/overlay-black.png); background: rgba(0, 0, 0, 0.6); width:100%; height:100%; position: absolute; top: 0; left: 0; z-index: 1;} #the-modal .modal-content { margin: 0; width: 100%; height: 100%; position: relative; z-index: 2; overflow: scroll;} #the-modal .modal-block { width: 100%; max-width: 800px; margin: 5% auto; position: relative;} #the-modal .modal-item { width: 100%; max-width: 100%; margin: 0 auto; display: none; padding: 0 10PX;} #the-modal .modal-item iframe { border-radius:4px; box-shadow:0 1px 100px rgba(0,0,0,0.6); } #the-modal .modal-item .ninja-forms-success-msg { display:none; } #the-modal .modal-item.video { padding:0; background:none; box-shadow:none; } #the-modal .modal-item iframe { width :100%; max-width :100%; border-radius :4px; box-shadow : 0 10px 100px #000; -moz-box-shadow : 0 10px 100px #000; -ms-box-shadow : 0 10px 100px #000; height : 420px;} @media screen and (min-width: 1000px) { #the-modal .modal-block{ margin-top:10%;} } @media screen and (max-width: 0900px) { #the-modal .modal-item iframe { height:400px; } #the-modal .modal-item{ padding: 10px; border-radius: 0; box-shadow:none; margin: 0;} .modal-block{ width: 98%; margin: 1%; padding-top: 45px;} .modal-bkgd{} #the-modal .close { top: 5px; right: auto; left: 10px;} } @media screen and (max-width: 0600px) { #the-modal .modal-item iframe { height:300px; } } @media screen and (max-width: 0400px) { #the-modal .modal-item iframe { height:200px; } } /* ============================================================================= Print Styles ========================================================================== */ @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {} @media print { * {background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ a, a:visited {text-decoration: underline; } a[href]:after {content: " (" attr(href) ")"; } abbr[title]:after {content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ pre, blockquote {border: 1px solid #999; page-break-inside: avoid; } thead {display: table-header-group;} tr, img {page-break-inside: avoid;} img {max-width: 100% !important;} @page {margin: 0.5cm;} p, h2, h3 {orphans: 3; widows: 3;} h2, h3 {page-break-after: avoid;} } .bluebox { background-color: #1DCDF1; padding: 20px; float: left; border-radius:10px; color:#fff; margin-top: 12px; } .bluebox h2, .bluebox h3, .bluebox p, .bluebox label { color:#fff;} .bluebox p {margin:0 0 5px;font-size:0.9em;} .bluebox .infusion-field {} .bluebox .infusion-field label {font-size:14px;} .bluebox h3 {margin-top:5px;} .bluebox .infusion-submit {display:block;float:right;width:100%;} .page-id-830 #single-content .infusion-submit input[type="submit"] { position: relative;bottom:inherit; } /* Landing Page Styles */ .page-template-page-landing-php #single-content { background : #FFF url(../img/safari-bg2.jpg) no-repeat bottom right; } .page-template-page-landing-php .single-content-wrap { max-width :680px; } .page-template-page-landing-php a[href*="pdf"]{ outline :none !important; display :inline-block; background : #92BB26; font-size : 22px; color : #FFF; border : 0; font-weight : 700; line-height : 1.4em; padding : 0.9em 1.2em 1em; margin : 2em 0; border-radius : 4px; overflow : hidden;} .page-template-page-landing-php a[href*="pdf"]:hover { background: #84A52B; } .page-template-page-landing-php a[href*="pdf"]:after { content:"M"; font-family:"icons"; font-weight:normal; padding-left:0.5em; position:relative; margin-right: -3px; float:right; } .page-template-page-landing-php .hgroup { padding:0; margin: 2em 0 4em;} @media screen and (max-width: 1000px){ .page-template-page-landing-php a[href*="pdf"]{ font-size:18px; } } @media screen and (max-width:750px){ .page-template-page-landing-php a[href*="pdf"]{ font-size:16px; } .page-template-page-landing-php #single-content { background-image :url(../img/safari-bgSmall.jpg); background-size : 120%;} .page-template-page-landing-php .hgroup { margin-bottom:2em; } } @media screen and (max-width:500px){ .page-template-page-landing-php a[href*="pdf"]{ position:relative; font-size:14px; padding: 1em 1.2em 0.9em; margin:1em 0;} .page-template-page-landing-php .single-content-wrap { text-align :left; } .page-template-page-landing-php .single-content-wrap * { text-align :inherit !important;; } }