/* Base Styles for AttackPattern Version: 1.0.0 Author: Stephen Scaff */ /* ================================================== II. BASE STYLES and resets ===================================================== */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {display: block;} audio,canvas,video { display: inline-block;} html{font-family: sans-serif;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;} html,body {font-size: 100%; } body { font-family: "proxima nova", proxima-nova "helvetica neue", helvetica, arial, sans-serif;font-weight: normal; font-style: normal; line-height: 1; color: #222222; position: relative; -webkit-font-smoothing: antialiased; margin: 0; font-size: 1.18750em; line-height: 1.78947em; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block;} /*--------------------------------------------------- Links ===================================================== */ a{ color: #33ADCC; text-decoration: none; line-height:inherit; -webkit-transition: color .6s ease-in; -moz-transition: color .6s ease-in; -o-transition: color .6s ease-in; transition: color .6s ease-in; } a:hover{color: #0c1d31;text-decoration: none;} a:active{color: #33adcc;text-decoration: none;} a:focus{color:#0c1d31;outline:0} p a,p a:visited{line-height:inherit} img a, a img, img {border: 0;} /*--------------------------------------------------- Positioning and Common Floats ===================================================== */ .left{float:left} .right{float:right} .text-left{text-align:left} .text-right{text-align:right} .text-center{text-align:center} .centering{margin: 0 auto;text-align: center;display: table;float: none;width: 100%;} .hide{display:none} .nudgeright{position: relative;right: -1.5em;;} /*--------------------------------------------------- Typography ====================================================== */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td{margin:0;padding:0;font-size:1.1rem;} p{font-family: "proxima nova", proxima-nova "helvetica neue", helvetica, arial, sans-serif; font-size:1.2rem;line-height:1.6;margin-bottom:17px;} p.lead{font-size:17.5px;line-height:1.6;margin-bottom:17px} p img.left,p img{margin:17px;margin-left:0} p img.right{margin:17px;margin-right:0} h1,h2,h3,h4,h5,h6{font-family:"proxima nova", proxima-nova "helvetica neue", helvetica, arial, sans-serif; font-weight: normal;text-rendering:optimizeLegibility;line-height:1.1;margin-bottom:.6em;margin-top:.3em} h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-size:60%;color:#888;line-height:0} h1 { font-size: 3em;} h2 { font-size:2.7em;} h3 { font-size:2em;} h4 { font-size:1.7em;} h5 { font-size:1em;} h6 { font-size:1em;} h1 { font-size: 6.63158em; line-height: 1.07937em; margin-top: 0.2698em; margin-bottom: 0.5397em; } h2 { font-size: 2.57895em; line-height: 1.38776em; margin-top: 1.3878em; margin-bottom: 0.6939em; } h3 { font-size: 1.63158em; line-height: 1.09677em; margin-top: 1.0968em; margin-bottom: 0.5em; } hr{border-top: 1px solid #999;border-bottom: 1px solid #fff;clear:both;margin:22px 0 21px;height:0} .subheader{line-height:1.3;color:#777;font-weight:300;margin-bottom:17px} sub, sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;} sup { top: -0.5em;} sub { bottom: -0.25em;} strong,b{font-weight:bold;line-height:inherit} em{color: #19374b;font-style:normal;font-weight:700;} ul,ol{font-size:1em;line-height:1.6;margin-bottom:1.2em;list-style-position:inside} blockquote,blockquote p{ line-height: 1.5; color: #444; font-size: 1.7em; font-style: oblique; background: #fff; padding: 1em 0 1em 1em; margin: 0 0 2em; border-left: 4px solid #0ab; text-shadow: -1px 1px 0px #FFF; } blockquote cite{display:block;font-size:13px;color:#555} blockquote cite:before{content:"\2014 \0020"} blockquote cite a,blockquote cite a:visited{color:#555} figcaption{color: #999; text-align: center;margin: 0.5em auto;} .bullet{font-size: 3em;} .biggie{font-size: 150%;} /*------------------------------------------------ Pseudo Selection ================================================== */ *::selection{background: #00aabb;color: white;text-shadow: none;} .highlight{background:#c33} ::-webkit-scrollbar {width: 10px;} /* this targets the default scrollbar (compulsory) */ ::-webkit-scrollbar-track {background-color: #aaa;} /* the new scrollbar will have a flat appearance with the set background color */ ::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, 0.9);} /* this will style the thumb, ignoring the track */ /* =================================================== Grid and Mobile ====================================================== */ .row { width:100%; max-width:1140px; max-width:81.5em; min-width:48.000em; margin:0 auto;padding: 0 0.625em;} .wider .row { width:100%; max-width:1140px; max-width:95%; min-width:48.000em; margin:0 auto;padding: 0 .5em;} .row.collapse .column,.row.collapse .columns { padding:0} .row .row { width:auto; max-width:none; min-width:0; margin:0 -0.625em !important} .row .row.collapse { margin:0 -0.625em} .row-inside{padding: 0 .5em;} .row.half-padding .columns{padding: 0 0.5em !important;} .column,.columns { float:left;min-height:1px;padding:0 1em; position:relative} .column.pad-half, .columns.pad-half { padding: 0 0.5em !important;} .column.centered,.columns.centered {margin: 0 auto;text-align: center;display: table;float: none;width: 100%;} .last{margin-right: 0 !important;padding-right: 0 !important;float: right;} [class*="column"]+[class*="column"]:last-child { float:right} [class*="column"]+[class*="column"].end { float:left} .row .one { width:8.333%} .row .two { width:16.667%} .row .three { width:25%} .row .four { width:33.333%} .row .five { width:41.667%} .row .six { width:50%} .row .seven { width:58.333%} .row .eight { width:66.667%} .row .nine { width:75%} .row .ten { width:83.333%} .row .eleven{ width:91.667%} .row .twelve{ width:100%} /*--------------------------------------------------- Offsets ====================================================== */ .row .offset-by-one{margin-left:8.333%} .row .offset-by-two{margin-left:16.667%} .row .offset-by-three{margin-left:25%} .row .offset-by-four{margin-left:33.333%} .row .offset-by-five{margin-left:41.667%} .row .offset-by-six{margin-left:50%} .row .offset-by-seven{margin-left:58.333%} .row .offset-by-eight{margin-left:66.667%} .row .offset-by-nine{margin-left:75%} .row .offset-by-ten{margin-left:83.333%} /*--------------------------------------------------- Reverse Source Order on Desktop ====================================================== */ .push-two { left:16.667%} .pull-two { right:16.667%} .push-three { left:25%} .pull-three { right:25%} .push-four { left:33.333%} .pull-four { right:33.333%} .push-five { left:41.667%} .pull-five { right:41.667%} .push-six { left:50%} .pull-six { right:50%} .push-seven { left:58.333%} .pull-seven { right:58.333%} .push-eight { left:66.667%} .pull-eight { right:66.667%} .push-nine { left:75%} .pull-nine { right:75%} .push-ten { left:83.333%} .pull-ten { right:83.333%} /*--------------------------------------------------- Responsive Images ====================================================== */ img,object,embed{max-width:100%;height:auto} img{-ms-interpolation-mode:bicubic, border: 0;} #map_canvas img,.map_canvas img{max-width:none!important} svg:not(:root) {overflow: hidden;} figure {margin: 0;} /*--------------------------------------------------- Clearings ====================================================== */ .row{*zoom:1} .row:before,.row:after{content:"";display:table} .row:after{clear:both} .clear{clear:both;padding: 30px 0;} /*---------------------------------------------------- Block Grids - for inline gridded elements ====================================================== */ .block-grid{display:block;overflow:hidden;padding:0} .block-grid>li{display:block;height:auto;float:left} .block-grid.two-up{margin:0 -15px} .block-grid.two-up>li{width:50%;padding:0 15px 15px} .block-grid.three-up{margin:0 -12px} .block-grid.three-up>li{width:33.33%;padding:0 12px 12px; } .block-grid.four-up{margin:0 -10px} .block-grid.four-up>li{width:25%;padding:0 10px 10px} .block-grid.five-up{margin:0 -8px} .block-grid.five-up>li{width:20%;padding:40px 8px 8px} .block-grid.six-up { margin: 0 -8px; } .block-grid.six-up > li { width: 16.66667%; padding: 0 8px 8px; } .block-grid.six-up > li:nth-child(6n+1) { clear: both; } .nopadding .block-grid > li{padding: 0 0px .13em !important;/*webkit fix*/margin:0 -1px 0 0px} .wider .block-grid{display:block;overflow:hidden;padding:0} .wider .blog-grid.four-up>li{width:25%;padding:0 10px 10px; } ul.link-list{margin:0 0 1.1em -1.8em;padding:0;list-style:none;overflow:hidden} ul.link-list li{list-style:none;float:left;margin-left:1.6em;display:block} ul.link-list li a{display:block} /*Just a floated block element */ .f-block {float: left;padding: 0 7% 0 0 !important;display: inline-block;} .multicol-2 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } #grid li{text-align: justify !important;} @media only screen and (max-width:91em){ .wider .block-grid.three-up{margin:0 -12px} .wider .block-grid.three-up>li{width:33%;padding:0 5px 12px} } @media only screen and (max-width:65em){ .wider .block-grid.four-up{margin:0 -15px} .wider .block-grid.four-up>li{width:50%;padding:0 5px 5px} } @media only screen and (max-width:32em){ .wider .block-grid.four-up>li{width:99%;padding:0 5px 0 10px} } @media only screen and (max-width:32em){ .block-grid.three-up{margin:0 15px} .block-grid.three-up>li{width:50%;padding:0 5px 5px} } /*--------------------------------------------------- Media Queries for Grid ====================================================== */ @media only screen and (max-width:79em){ h1 { font-size: 1.6em;} h2 { font-size:1.4em;} h3 { font-size:1.2em;} h4 { font-size:1.1em;} h5 { font-size:1em;} h6 { font-size:1em;} p, label, noinput{font-size: 1.1em;} } @media only screen and (max-width:48em){ body{-webkit-text-size-adjust:none;-ms-text-size-adjust:none;width:100%;min-width:0;margin-left:0;margin-right:0;padding-left:0;padding-right:0;} h1 { font-size: 1.6em;} h2 { font-size:1.4em;} h3 { font-size:1.2em;} h4 { font-size:1.1em;} h5 { font-size:1em;} h6 { font-size:1em;} .multicol-2 { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } /*---------------------------------------------------- Grid - Collapse and clear columns at break point ====================================================== */ .row{width:auto;min-width:0;margin: 0 auto;padding: 0 .2em;} .wider .row{width:auto;min-width:0;margin: 0 auto;padding: 0 .2em;} .column,.columns { width:auto!important;float:none; padding: 0 0.625em;} .column:last-child,.columns:last-child{float:none} [class*="column"]+[class*="column"]:last-child{float:none} .column:before,.columns:before,.column:after,.columns:after{content:"";display:table} .column:after,.columns:after{clear:both} .row .row{padding: 0 0.625em;} .row .row:before, .row .row:after { content: " "; display: table; } .row .row:after { clear: both; } .row .row.collapse { width: auto; margin: 0; max-width: none; *zoom: 1; } .row .row.collapse:before, .row .row.collapse:after { content: " "; display: table; } .row .row.collapse:after { clear: both; } /*---------------------------------------------------- Remove margins from offsets ====================================================== */ .no-left-margin,.offset-by-one,.offset-by-two,.offset-by-three,.offset-by-four,.offset-by-five,.offset-by-six,.offset-by-seven,.offset-by-eight,.offset-by-nine,.offset-by-ten{margin-left:0!important} .left-auto,.push-two,.push-three,.push-four,.push-five,.push-six,.push-seven,.push-eight,.push-nine,.push-ten{left:auto} .right-auto,.pull-two,.pull-three,.pull-four,.pull-five,.pull-six,.pull-seven,.pull-eight,.pull-nine,.pull-ten{right:auto} /*---------------------------------------------------- Mobile 4 Col Grid ====================================================== */ .row .mobile-one { width: 25% !important; float: left; padding: 0 15px; } .row .mobile-one:last-child { float: right; } .row .mobile-one.end { float: left; } .row.collapse .mobile-one { padding: 0; } .row .mobile-two { width: 50% !important; float: left; padding: 0 15px; height: 100%; overflow: visible;} .row .mobile-two:last-child { float: right; } .row .mobile-two.end { float: left; } .row.collapse .mobile-two { padding: 0; } .row .mobile-three { width: 75% !important; float: left; padding: 0 15px; } .row .mobile-three:last-child { float: right; } .row .mobile-three.end { float: left; } .row.collapse .mobile-three { padding: 0; } .row .mobile-four { width: 100% !important; float: left; padding: 0 15px; } .row .mobile-four:last-child { float: right; } .row .mobile-four.end { float: left; } .row.collapse .mobile-four { padding: 0; } .push-one-mobile { left: 25%; } .pull-one-mobile { right: 25%; } .push-two-mobile { left: 50%; } .pull-two-mobile { right: 50%; } .push-three-mobile { left: 75%; } .pull-three-mobile { right: 75%; } /*---------------------------------------------------- Block Grids ====================================================== */ .block-grid.mobile{margin-left:0} .block-grid.mobile>li{float:none;width:100%;margin-left:0} .block-grid.mobile-one-up > li { width: 100%; } .block-grid.mobile-two-up > li { width: 50%; } .block-grid.mobile-two-up > li:nth-child(2n+1) { clear: both; } .block-grid.mobile-three-up > li { width: 33.33333%; } .block-grid.mobile-three-up > li:nth-child(3n+1) { clear: both; } .block-grid.mobile-four-up > li { width: 25%; } .block-grid.mobile-four-up > li:nth-child(4n+1) { clear: both; } .block-grid.mobile-five-up > li { width: 20%; } .block-grid.mobile-five-up > li:nth-child(5n+1) { clear: both; } .block-grid.mobile-six-up > li { width: 16.66667%; } .block-grid.mobile-six-up > li:nth-child(6n+1) { clear: both; } } /*---------------------------------------------------- Visibility Classes ====================================================== */ .show-small,.show-medium,.hide-large,.show-xlarge{display:none!important} .hide-xlarge,.show-large,.hide-small,.hide-medium{display:block!important} @media only screen and (min-width:1441px){ .hide-small,.hide-medium,.hide-large,.show-xlarge{display:block!important} .show-small,.show-medium,.show-large,.hide-xlarge{display:none!important} } @media only screen and (max-width:1279px) and (min-width:768px){ .hide-small,.show-medium,.hide-large,.hide-xlarge{display:block!important} .show-small,.hide-medium,.show-large,.show-xlarge{display:none!important} } @media only screen and (max-width:48em){ .show-small,.hide-medium,.hide-large,.hide-xlarge{display:block!important} .hide-small,.show-medium,.show-large,.show-xlarge{display:none!important} } .show-for-landscape,.hide-for-portrait{display:block!important} .hide-for-landscape,.show-for-portrait{display:none!important} @media screen and (orientation:landscape){ .show-for-landscape,.hide-for-portrait{display:block!important} .hide-for-landscape,.show-for-portrait{display:none!important} } @media screen and (orientation:portrait){ .show-for-portrait,.hide-for-landscape{display:block!important} .hide-for-portrait,.show-for-landscape{display:none!important} } .show-touch{display:none!important} .hide-touch{display:block!important} .touch .show-touch{display:block!important} .touch .hide-touch{display:none!important} .label{padding:1px 4px 2px;font-size:12px;font-weight:bold;text-align:center;text-decoration:none;line-height:1;white-space:nowrap;display:inline;position:relative;bottom:1px;color:#fff;background:#c93f4c} /* ================================================== UI ELEMENTS ===================================================== */ /*---------------------------------------------------- Drop Down (for blog cats-sort) ---------------------------------------------------- */ .ddwrap { position: relative; width: 15em; font-weight: bold; border-radius: 0px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), inset 0 1px 0 white, 0 0 2px rgba(0, 0, 0, 0.2); text-shadow: 0 1px 0 #fff; line-height: 1; cursor: pointer; z-index: 9 !important; /* IE6-9 */ } .ddwrap:after { content: ""; width: 0; height: 0; position: absolute; right: 7%; top: 35%; border-width: 6px 6px 6px 0; border-color: transparent rgba(0, 0, 0, 0.5); border-style: solid; -webkit-transform: rotate(-90deg); } .ddwrap span, .ddwrap a { color: #00aabb; text-decoration: none; } .ddwrap span { display: block; padding: .9em 1em; width: 85%; border-right: 1px solid #acd7ec; box-shadow: 1px 0 0 rgba(255, 255, 255, 0.5); } .ddwrap .dd { font-size: 1em; line-height: 2; position: absolute; top: 100%; width: 100%; padding: 8px 10px; margin-top: 3%; background: rgba(255, 255, 255, 0.9); border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15); opacity: 0; transition: all .5s ease; display: block; z-index: 1 !important; list-style: none; } .ddwrap li:first-child{ border-top: none; } .ddwrap li:hover { padding-left: 3px !important; color: #00aabb; -webkit-transition: all .1s ease-in-out 0s; } .active .dd { opacity: 1; } /*---------------------------------------------------- @ < 38 em - Mobile =====================================================*/ @media only screen and (max-width:38em) { .ddwrap {width: 11em;} } /*---------------------------------------------------- Tabs ====================================================== */ .tabs { list-style: none; border-bottom: solid 1px #e6e6e6; display: block; height: 40px; padding: 0; margin-bottom: 20px; } .tabs.contained { margin-bottom: 0; margin-left: 0; } .tabs dt, .tabs li.section-title { color: #b3b3b3; cursor: default; display: block; float: left; font-size: 12px; height: 40px; line-height: 40px; padding: 0; padding-right: 9px; padding-left: 20px; font-weight: normal; width: auto; text-transform: uppercase; } .tabs dt:first-child, .tabs li.section-title:first-child { padding: 0; padding-right: 9px; } .tabs dd, .tabs li { display: block; float: left; padding: 0; margin: 0; } .tabs dd a, .tabs li a { color: #6f6f6f; display: block; font-size: 1em; height: 40px; line-height: 40px; padding: 0px 23.8px; } .tabs dd a:focus, .tabs li a:focus { font-weight: bold; color: #2ba6cb; } .tabs dd.active a, .tabs li.active a { cursor: default; color: #3c3c3c; background: #fff; border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; font-weight: bold; } .tabs dd:first-child, .tabs li:first-child { margin-left: 0; } .tabs.pill.two-up dd, .tabs.pill.two-up li, .tabs.pill.three-up dd, .tabs.pill.three-up li, .tabs.pill.four-up dd, .tabs.pill.four-up li, .tabs.pill.five-up dd, .tabs.pill.five-up li { margin-right: 0; } .tabs.two-up dt a, .tabs.two-up dd a, .tabs.two-up li a, .tabs.three-up dt a, .tabs.three-up dd a, .tabs.three-up li a, .tabs.four-up dt a, .tabs.four-up dd a, .tabs.four-up li a, .tabs.five-up dt a, .tabs.five-up dd a, .tabs.five-up li a { padding: 0 17px; text-align: center; overflow: hidden; } .tabs.two-up dt, .tabs.two-up dd, .tabs.two-up li { width: 50%; } .tabs.three-up dt, .tabs.three-up dd, .tabs.three-up li { width: 33.33%; } .tabs.four-up dt, .tabs.four-up dd, .tabs.four-up li { width: 25%; } .tabs.five-up dt, .tabs.five-up dd, .tabs.five-up li { width: 20%; } ul.tabs-content { display: block; margin: 0 0 20px; padding: 0; } ul.tabs-content > li { display: none; } ul.tabs-content > li.active { display: block; } ul.tabs-content.contained { padding: 0; } ul.tabs-content.contained > li { border: solid 0 #e6e6e6; border-width: 0 1px 1px 1px; padding: 20px; } .no-js ul.tabs-content > li { display: block; } /* ----------------------------------------------- Reveal Modals ================================================== */ /* Reveal Modals ================================================== */ .reveal-modal-bg { position: fixed; height: 100%; width: 100%; background: #000; background: rgba(0,0,0, 0.9); z-index: 998; display: none; top: 0; left: 0; } .reveal-modal { background: white; visibility: hidden; display: none; top: 150px !important; left: 50%; margin-left: -260px; width: 520px; position: fixed; z-index: 999; padding: 0px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); } .reveal-modal *:first-child { margin-top: 0; } .reveal-modal *:last-child { margin-bottom: 0; } .reveal-modal .close-reveal-modal { font-size: 22px; font-size: 2.2em; line-height: .5; position: absolute; top: 19px; right: 11px; color: rgba(255,255,255,.9); text-shadow: none !important; font-weight: bold; cursor: pointer; } .reveal-modal .close-reveal-modal:hover { color: #fff; } .reveal-modal.small { width: 30%; margin-left: -10%; } .reveal-modal.medium { width: 50%; margin-left: -23%; } .reveal-modal.large { width: 75%; margin-left: -35%; } .reveal-modal.expand { width: 90%; margin-left: -45%; } .reveal-modal .row { min-width: 0; padding: 0px; margin: 0px; width: 100%;} .reveal-modal p{padding-top: .7em;font-size: 2em; text-align: center;} .reveal-modal span.large{font-size: 1.4em; color: #000;padding-top: 1.9em;position:relative; top:.3em} .reveal-modal .link-list{display: table;margin: 0 auto;} .reveal-modal .button{min-width: 250px;min-height: 50px;padding: 1.1em 2.8em 1.2em;font-size: 1.1em;margin-top: -1em; } #modalheader{background: #273f75;padding: 1.6em;border-bottom: 2px groove white;} #modalfooter{background: #eee;padding: 0 1em;} #modalfooter li{font-size: .9em;} #contactModal{ background: #fefefe; text-shadow: -1px 1px 0 #fff; z-index: 9999;} #contactModal ul { padding: 2em 1em; line-height: 2.3em;} #contactModal li{ font-size: 1.3em; list-style-type: none;} #contactModal li a{color: #777;font-weight: 600;} #contactModal li a:hover{color: #639;} #contactModal h4{font-weight: 600; text-align: center; color: #fff; text-shadow: -1px 1px 0px rgba(0,0,0,0.2) !important; padding: .4em 0;} #contactModal .btn{ margin: .75em auto 1.2em; } /* Mobile */ @media only screen and (max-width: 48em) { .reveal-modal-bg { position: absolute; } .reveal-modal, .reveal-modal.small, .reveal-modal.medium, .reveal-modal.large, .reveal-modal.xlarge { width: 80%; top: 15px; left: 50%; margin-left: -40%; padding: 20px; height: auto; } } /*--------------------------------------------------- A bit of box shadow ===================================================== */ .boximg{ box-shadow: 0 1px 3px rgba(34,25,25,0.4); border: 0; } /*--------------------------------------------------- Flex Video ===================================================== */ .flex-video{position:relative;padding-top:25px;padding-bottom:67.5%;height:0;margin-bottom:16px;overflow:hidden} .flex-video.widescreen{padding-bottom:57.25%} .flex-video.vimeo{padding-top:0} .flex-video iframe,.flex-video object,.flex-video embed,.flex-video video{position:absolute;top:0;left:0;width:100%;height:100%} @media only screen and (max-device-width:800px),only screen and (device-width:1024px) and (device-height:600px),only screen and (width:1280px) and (orientation:landscape),only screen and (device-width:800px),only screen and (max-width:767px){ .flex-video{padding-top:0} } /*--------------------------------------------------- Form Styles ===================================================== */ /* Normalize form elements ---------------------------------------------------- */ button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; } button, input { line-height: normal; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } 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-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input[type=submit].button,button.button{-webkit-appearance:none} @media only screen and (max-width:767px){ .button{display:block} button.button,input[type="submit"].button{width:100%;padding-left:0;padding-right:0} } @-moz-document url-prefix(){ button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"]>input[type="button"]::-moz-focus-inner{border:0;padding:0} input[type="submit"].tiny.button{padding:3px 10px 4px} input[type="submit"].small.button{padding:5px 14px 6px} input[type="submit"].button,input[type=submit].medium.button{padding:8px 20px 9px} input[type="submit"].large.button{padding:13px 30px 14px} } /* Form Grid ---------------------------------------------------- */ form{margin:0 0 19.416px} .row form .row{margin:0 -6px} .row form .row .column,.row form .row .columns{padding:0 6px} .row form .row.collapse{margin:0} .row form .row.collapse .column,.row form .row.collapse .columns{padding:0} /* Labels ---------------------------------------------------- */ label{font-size:1em;color:#4d4d4d;cursor:pointer;display:block;font-weight:500;margin-bottom:3px} label.inline{line-height:2;margin:0 0 .9em 0} .prefix, .postfix { display: block; position: relative; z-index: 2; text-align: center; width: 100%; } a.button.prefix, a.button.postfix { padding-left: 0; padding-right: 0; text-align: center; } span.prefix, span.postfix { background: #f2f2f2; border: 1px solid #cccccc; } .prefix { left: 2px; -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; border-top-left-radius: 2px; -moz-border-radius-bottomleft: 2px; -webkit-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; overflow: hidden; } .postfix { right: 2px; -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; border-top-right-radius: 2px; -moz-border-radius-bottomright: 2px; -webkit-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; } /* Inputs ---------------------------------------------------- */ input[type="text"],input[type="password"],input[type="date"],input[type="datetime"],input[type="email"],input[type="number"],input[type="search"],input[type="tel"],input[type="time"],input[type="url"],textarea{border:1px solid #ccc;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);color:rgba(0,0,0,0.75);display:block;font-size:1em;margin:0 0 .9em 0;padding:.4em;height:52px;width:100%;-webkit-transition:all .15s linear;-moz-transition:all .15s linear;-o-transition:all .15s linear;transition:all .15s linear;color:#4b5056;font-family:arial,sans-serif;font-weight:500;width:100%;padding:7px 12px;border:1px solid #CCC;background:#f5fbfc url() center top repeat-x;outline:0;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0} input[type="text"].oversize,input[type="password"].oversize,input[type="date"].oversize,input[type="datetime"].oversize,input[type="email"].oversize,input[type="number"].oversize,input[type="search"].oversize,input[type="tel"].oversize,input[type="time"].oversize,input[type="url"].oversize,textarea.oversize{font-size:18px!important;font-size:1.8rem!important} input[type="text"]:focus,input[type="password"]:focus,input[type="date"]:focus,input[type="datetime"]:focus,input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="time"]:focus,input[type="url"]:focus,textarea:focus{background:#fafafa;outline:none!important;border-color:#b3b3b3} input[type="text"][disabled],input[type="password"][disabled],input[type="date"][disabled],input[type="datetime"][disabled],input[type="email"][disabled],input[type="number"][disabled],input[type="search"][disabled],input[type="tel"][disabled],input[type="time"][disabled],input[type="url"][disabled],textarea[disabled]{background-color:#ddd} input[type=text]:focus,input[type=email]:focus,input[type=password]:focus{outline:0;border:1px solid #92bbd2;background:#fafdfe;box-shadow:0 0 5px rgba(146,187,210,0.5);-moz-box-shadow:0 0 5px rgba(146,187,210,0.5);-webkit-box-shadow:0 0 5px rgba(146,187,210,0.5)} /* Text Area ---------------------------------------------------- */ textarea { overflow: auto; vertical-align: top; height:auto } /* Selects ---------------------------------------------------- */ select{width:100%} select{color:#666;font-weight:500;height:32px;width:100%;padding:5px 8px;border:1px solid #CCC;background:transparent;outline:none!important;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;-webkit-appearance:none;cursor:pointer} select:focus{outline:none!important;border:1px solid #92bbd2;box-shadow:0 0 5px rgba(146,187,210,0.5);-moz-box-shadow:0 0 5px rgba(146,187,210,0.5);-webkit-box-shadow:0 0 5px rgba(146,187,210,0.5)} select[disabled]{color:#a8a8a8} select,.ajax_form .select,.entry-content select,.mobileMenu{-webkit-appearance:none;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAANCAYAAAC+ct6XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjBBRUQ1QTQ1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjBBRUQ1QTU1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMEFFRDVBMjVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMEFFRDVBMzVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk5mU4QAAACUSURBVHjaYmRgYJD6////MwY6AyaGAQIspCieM2cOjKkIxCFA3A0TSElJoZ3FUCANxAeAWA6IOYG4iR5BjWwpCDQCcSnNgxoIVJCDFwnwA/FHWlp8EIpHSKoGgiggLkITewrEcbQO6mVAbAbE+VD+a3IsJTc7FQAxDxD7AbEzEF+jR1DDywtoCr9DbhwzDlRZDRBgACYqHJO9bkklAAAAAElFTkSuQmCC);background-position:center right;background-repeat:no-repeat} .safari select,.chrome select{padding-right:37px} /* Fieldsets ---------------------------------------------------- */ fieldset{border:solid 1px #ddd;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;padding:12px 12px 0;margin:18px 0} fieldset legend{font-weight:bold;background:white;padding:0 3px;margin:0 0 0 -3px} /* Errors ---------------------------------------------------- */ .error input,input.error{border-color:#c60f13;background-color:rgba(198,15,19,0.1)} .error label,label.error{color:#c60f13} .error small,small.error{display:block;padding:6px 4px;margin-top:-13px;margin-bottom:12px;background:#c60f13;color:#fff;font-size:12px;font-size:1.2rem;font-weight:bold;-moz-border-radius-bottomleft:2px;-webkit-border-bottom-left-radius:2px;border-bottom-left-radius:2px;-moz-border-radius-bottomright:2px;-webkit-border-bottom-right-radius:2px;border-bottom-right-radius:2px} /*--------------------------------------------------- Buttons ===================================================== */ /* Button - Flat Design -------------------------------------------------- */ .btn, button, input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button { color: #fff !important; font-size: 1em; text-decoration: none; text-align: center; vertical-align: middle; text-shadow: 0 1px 1px rgba(0,0,0, 0.25) !important; cursor: pointer; line-height: 20px; padding: 1em 1em 1em; margin:0; outline:0; *margin-left: .3em; display: inline-block; *display: inline; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; background-color: #8bb5ba; *background-color: #8bb5ba; *zoom: 1; -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0px -3px 0px rgba(0,0,0,0.6); -mox-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0px -3px 0px rgba(0,0,0,0.6); box-shadow:inset 0 1px 0 rgba(255,255,255,0.4), inset 0px -3px 0px rgba(0,0,0,0.5); transition:all 2s ease-in-out; } .btn:hover, .btn:focus { color: white; background: #0dc8db ; -webkit-transition: background 0.25s ease-in-out; -moz-transition: background 0.25s ease-in-out; -o-transition: background 0.25s ease-in-out; transition: background 0.25s ease-in-out; text-shadow: 0px 0px 10px #fff !important; background-repeat: repeat-x; *border: 0; *zoom: 1; } .btn:active, .btn.active { position: relative; top: 1px; position: relative; top: 2px; -webkit-box-shadow: 0px 2px 0px transparent; -mox-box-shadow: 0px 2px 0px transparent; box-shadow: 0px 2px 0px transparent; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .btn-blue{background: #33ADCC} .btn-blue:hover{background: #0dc8db !important} .btn-navy{background: #060d15;} .btn-navy:hover{background: #0c233d !important} .btn-outline {background: none; color: #8bb5ba;box-shadow: none;border: 1px solid #fff;border: 1px solid #; padding: 1em 2em .9em;transition:all 2s ease} .btn-outline:hover{background: rgba(0,170,187,0.3);border: 1px solid rgba(255,255,255,0.1);text-shadow: none;min-height: 3em;transition:all 2s ease-in-out} .btn-glossy{ background: rgba(147,171,183,0.6); text-shadow: -1px 1px 0px rgba(0,0,0,0.2); font-family: "lovelo_black", proxima-nova, helvetica, arial, sans-serif; box-shadow:inset 0 1px 0 rgba(255,255,255,0.4), 0px 2px 0px rgba(0,0,0,0.2) } /* Button - Size and Positioning -------------------------------------------------- */ .btn-supa{font-size: 1.7em !important;padding: 1.3em 3.5em} .btn-large{font-size:1.5em!important;padding:.8em 2.7em .8em;} .btn-med{font-size: 1.2em !important; padding: 1.1em 2.2em 1em;min-width: 9em !important;} .btn-small{font-size:1.2em!important;padding:.9em 2em .8em!important} .btn.full{width:100%;text-align:center;padding-left:0px !important;padding-right:0px !important} .btn.center{display: table;margin: 0 auto;text-align: center;} .btn-list{list-style: none;} .btn-list.centered{display: table;margin: 0 auto;} .btn-list li{display: inline-block;float: left;padding: 1em 1em 0 0;} /* .btn .btn-icon{ color: rgba(255,255,255,0.9); text-shadow: -1px 1px 0px rgba(0,0,0,0.1); position: relative; right: -1em; top: .1em; border-left: 2px groove #39b8c5; padding: .9em 0em .8em .8em; margin-right: -.6em; }*/ .has-icon { padding: .9em 1.8em 1.1em !important;} .btn-icon{ padding: .8em 0em .9em 1em;border-left: 2px groove #39b8c5;position: relative;right: -.6em;} .btn-outline .btn-icon{border-left: 1px solid rgba(0,170,187,0.7); } .btn:focus{-webkit-box-shadow:0 0 4px #c93f4c,0 1px 0 rgba(255,255,255,0.5) inset;-moz-box-shadow:0 0 4px #c93f4c,0 1px 0 rgba(255,255,255,0.5) inset;box-shadow:0 0 4px #c93f4c,0 1px 0 rgba(255,255,255,0.5) inset;color:white} .button.full-width{width:100%;text-align:center;padding-left:0px !important;padding-right:0px !important} .button.left-align{text-align:left;text-indent:12px} .button.disabled,.button[disabled]{opacity:.6;cursor:default;background:#c93f4c;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none} /* Don't use native buttons on iOS */ input[type=submit].button,button.button{-webkit-appearance:none} /* Correct FF button padding */ @-moz-document url-prefix(){button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"]>input[type="button"]::-moz-focus-inner{border:0;padding:0} input[type="submit"].tiny.button{padding:3px 10px 4px} input[type="submit"].small.button{padding:5px 14px 6px} input[type="submit"].button,input[type=submit].medium.button{padding:8px 20px 9px} input[type="submit"].large.button{padding:13px 30px 14px} } /*---------------------------------------------------- @ 48 em - Medium ----------------------------------------------------*/ @media only screen and (max-width:48em) { .btn-large{ padding: 1em 2em!important; font-size: 1.1em !important; -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0px -2px 0px rgba(0,0,0,0.6); -mox-box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0px -3px 0px rgba(0,0,0,0.6); box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), inset 0px -2px 0px rgba(0,0,0,0.6); } } /*--------------------------------------------------- Scroll Bar ===================================================== */ ::-webkit-scrollbar {width: 10px;} ::-webkit-scrollbar-track {background-color: #aaa;} scrollbar-arrow-color: #aaa; ::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, 0.9);} scrollbar-track-color: #aaa; .hide{ display: none; } /*=================================================== CSS3 ANIMATED SNAZZY SNAZ - fades, slides, grows, glows, heartbeats, rolls, flips ===================================================== */ /* Make those image hovers fade all sexy like --------------------------------------------------- */ .fadeimg { opacity: 1; -webkit-transition: opacity ease-out 500ms; -moz-transition: opacity ease-out 500ms; -o-transition: opacity ease-out 500ms; transition: opacity ease-out 500ms; } .fadeimg:hover { opacity: .4; -webkit-transition: opacity ease-in .8s; -moz-transition: opacity ease-in .8s; -o-transition: opacity ease-in .8s; transition: opacity ease-in .8s; } /* dark-in ------------------------------------------------- */ .dark-in{ -webkit-animation: dark-in ease-in-out 3.5s .2s 1 both; -moz-animation: dark-in ease-in-out 3.5s .2s 1 both; -ms-animation: dark-in ease-in-outt 3.5s .2s 1 both; -o-animation: dark-in ease-in-out 3.5s .2s 1 both; animation: dark-in ease-in-out 3.5s .2s 1 both; visibility: visible; backface-visibility: hidden; -webkit-transform-style: preserve-3d; } @-webkit-keyframes dark-in{0%{background: rgba(0,0,0,0.1);} 100%{background: rgba(0,0,0,0.8);}} @-moz-keyframes dark-in{0%{background: rgba(0,0,0,0.1);} 100%{background: rgba(0,0,0,0.8);}} @-o-keyframes dark-in{0%{background: rgba(0,0,0,0.1);} 100%{background: rgba(0,0,0,0.8);}} @keyframes dark-in{0%{background: rgba(0,0,0,0.1);} 100%{background: rgba(0,0,0,0.8);}} .dark-in-4{ -webkit-animation: dark-in-4 ease-in-out 15.5s 3.8s infinite both; -moz-animation: dark-in-4 ease-in-out 17.5s .2s infinite both; -ms-animation: dark-in-4 ease-in-outt 17.5s .2s infinite both; -o-animation: dark-in-4 ease-in-out 17.5s .2s infinite both; animation: dark-in-4 ease-in-out 17.5s .2s infinite both; visibility: visible; backface-visibility: hidden; -webkit-transform-style: preserve-3d; } @-webkit-keyframes dark-in-4{0%{background: rgba(0,0,0,0.3);} 60%{background: rgba(0,0,0,.8);}100%{background: rgba(0,0,0,0.3);} } @-moz-keyframes dark-in-4{0%{background: rgba(0,0,0,0.3);} 60%{background: rgba(0,0,0,.8);}100%{background: rgba(0,0,0,0.3);} } @-o-keyframes dark-in-4{0%{background: rgba(0,0,0,0.3);} 60%{background: rgba(0,0,0,.8);}100%{background: rgba(0,0,0,0.3);} } @keyframes dark-in-4{0%{background: rgba(0,0,0,0.3);} 60%{background: rgba(0,0,0,.8);}100%{background: rgba(0,0,0,0.3);} } /* fade-in ------------------------------------------------- */ .fade-in,#process-section.fade-up *{ -webkit-animation: fade-in ease-in-out 1.2s both; -moz-animation: fade-in ease-in-out 1.2s both; -ms-animation: fade-in ease-in-outt 1.2s both; -o-animation: fade-in ease-in-out 1.2s both; animation: fade-in ease-in-out 1.2s both; visibility: visible; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; } @-webkit-keyframes fade-in{0%{opacity:0;} 100%{opacity:1;}} @-moz-keyframes fade-in{0%{opacity:0} 100%{opacity:1}} @-o-keyframes fade-in{0%{opacity:0} 100%{opacity:1}} @keyframes fade-in{0%{opacity:0} 100%{opacity:1} } /* fade-in ------------------------------------------------- */ .fade-in-2{ -webkit-animation: fade-in ease-in-out 2s 1.5s both; -moz-animation: fade-in ease-in-out 2s 1.5s both; -ms-animation: fade-in ease-in-outt 2s 1s both; -o-animation: fade-in ease-in-out 2s 1s both; animation: fade-in ease-in-out 2s 1.5s both; visibility: visible; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; } .fade-in-3{ -webkit-animation: fade-in ease-in-out 2.5s 2.5s both; -moz-animation: fade-in ease-in-out 2.5s 2.5s both; -ms-animation: fade-in ease-in-out 2.5s 2.5s both; -o-animation: fade-in ease-in-out 2.5s 2.5s both; animation: fade-in ease-in-out 2.5s 2.5s both; visibility: visible; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; } .fade-in-4{ -webkit-animation: fade-up ease-in-out 2.5s 4s both; -moz-animation: fade-up ease-in-out 2.5 4s both; -ms-animation: fade-up ease-in-out 2.5 4s both; -o-animation: fade-up ease-in-out 2.5 4s both; animation: fade-up ease-in-out 2.5 4s both; visibility: visible; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; } /* fade-out ------------------------------------------------- */ .fade-out{ -webkit-animation: fade-out ease-in-out 1.5s .2s 1 both; -moz-animation: fade-out ease-in-out 1.5s .2s 1 both; -ms-animation: fade-out ease-in-outt 1.5s .2s 1 both; -o-animation: fade-out ease-in-out 1.5s .2s 1 both; animation: fade-out ease-in-out 1.5s .2s 1 both; visibility: visible; backface-visibility: hidden; } @-webkit-keyframes fade-out{100%{opacity:0} 0%{opacity:1}} @-moz-keyframes fade-out{100%{opacity:0} 0%{opacity:1}} @-o-keyframes fade-out{100%{opacity:0} 0%{opacity:1}} @keyframes fade-out{100%{opacity:0} 0%{opacity:1} } /* slide-up ------------------------------------------------- */ .slide-up{ -webkit-animation: slide-up ease-out .8s .5s 1 both; -moz-animation: slide-up ease-out .8s .5s 1 both; -ms-animation: slide-up ease-out .8s .5s 1 both; -o-animation: slide-up ease-out .8s .5s 1 both; animation: slide-up ease-out .8s .5s 1 both; visibility: visible; backface-visibility: hidden; } .slide-up .box, .moveFromBottom .box{ -webkit-animation: slide-up ease-out 1.5s .5s 1 both; -moz-animation: slide-up ease-out 1.5s .5s 1 both; -ms-animation: slide-up ease-out 1.5s .5s 1 both; -o-animation: slide-up ease-out 1.5s .5s 1 both; animation: slide-up ease-out 1.5s .5s 1 both; visibility: visible; backface-visibility: hidden; } @-webkit-keyframes slide-up { 0%{-webkit-transform:translateY(50%)} 100%{-webkit-transform:translateY(0)} } @-moz-keyframes slide-up { from { -moz-transform: translateY(50%); } to { -moz-transform: translateY(0%);} } @-ms-keyframes slide-up { from { -ms-transform: translateY(50%); } to {-ms-transform: translateY(0%); } } @-o-keyframes slide-up{ from { -ms-transform: translateY(50%); } to {-ms-transform: translateY(0%); } } @keyframes slide-up { 0% { -ms-transform: translateY(50%); } 100% {-ms-transform: translateY(0%); } } @media only screen and (min-width:48em){ /* fade-up ------------------------------------------------- */ .fade-up{ -webkit-animation: fade-up ease-out 1s 1.5s both; -moz-animation: fade-up ease-out 1s 1.5s both; -ms-animation: fade-up ease-out 1s 1.5s both; -o-animation: fade-up ease-out 1s 1.5s both; animation: fade-up ease-out 1s 1.5s both; visibility: visible; backface-visibility: hidden; } .fade-up-2{ -webkit-animation: fade-up ease-out 2s 1s both; -moz-animation: fade-up ease-out 2s 1s both; -ms-animation: fade-up ease-out 2s 1s both; -o-animation: fade-up ease-out 2s 1s both; animation: fade-up ease-out 2s 1s both; visibility: visible; backface-visibility: hidden; } @-webkit-keyframes fade-up{ 0%{filter:alpha(opacity=0);opacity:0;-webkit-transform:translateY(50%);-moz-transform:translateY(50%);-ms-transform:translateY(50%);-o-transform:translateY(50%);transform:translateY(50%);} 100%{filter:alpha(opacity=100);opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}} @-moz-keyframes fade-up{ 0%{filter:alpha(opacity=0);opacity:0;-webkit-transform:translateY(50%);-moz-transform:translateY(50%);-ms-transform:translateY(50%);-o-transform:translateY(50%);transform:translateY(50%)} 100%{filter:alpha(opacity=100);opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}} @-ms-keyframes fade-up{ 0%{filter:alpha(opacity=0);opacity:0;-webkit-transform:translateY(50%);-moz-transform:translateY(50%);-ms-transform:translateY(50%);-o-transform:translateY(50%);transform:translateY(50%)} 100%{filter:alpha(opacity=100);opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}} @keyframes fade-up{ 0%{filter:alpha(opacity=0);opacity:0;-webkit-transform:translateY(50%);-moz-transform:translateY(50%);-ms-transform:translateY(50%);-o-transform:translateY(50%);transform:translateY(50%)} 100%{filter:alpha(opacity=100);opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}} } /* fade-right ------------------------------------------------- */ .fade-right{ -webkit-animation: fade-right ease-out 1.1s 2.5s 1 both; -moz-animation: fade-right ease-out 1.1s .5s 1 both; -ms-animation: fade-right ease-out 1.1s .5s 1 both; -o-animation: fade-right ease-out 1.1s .5s 1 both; animation: fade-right ease-out 1.1s .5s 1 both; visibility: visible; backface-visibility: hidden; } @-webkit-keyframes fade-right{0%{opacity:0;-webkit-transform:translateX(-50%)} 100%{opacity:1;-webkit-transform:translateX(0)} } @-moz-keyframes fade-right{0%{opacity:0;-moz-transform:translateX(-50%)} 100%{opacity:1;-moz-transform:translateX(0)} } @-o-keyframes fade-right{0%{opacity:0;-o-transform:translateX(-50%)} 100%{opacity:1;-o-transform:translateX(0)} } @keyframes fade-right{0%{opacity:0;transform:translateX(-50%)} 100%{opacity:1;transform:translateX(0)} } /* fade-left ------------------------------------------------- */ .fade-left{ -webkit-animation: fade-left ease-out 1.1s 1.7s 1 both; -moz-animation: fade-left ease-out 1.1s .5s 1 both; -ms-animation: fade-left ease-out 1.1s .5s 1 both; -o-animation: fade-left ease-out 1.1s .5s 1 both; animation: fade-left ease-out 1.1s .5s 1 both; visibility: visible; backface-visibility: hidden; } @-webkit-keyframes fade-left{ 0%{opacity:0;-webkit-transform:translateX(50%)} 100%{opacity:1;-webkit-transform:translateX(0)} } @-moz-keyframes fade-left{ 0%{opacity:0;-moz-transform:translateX(50%)} 100%{opacity:1;-moz-transform:translateX(0)} } @-o-keyframes fade-left{ 0%{opacity:0;-o-transform:translateX(50%)} 100%{opacity:1;-o-transform:translateX(0)} } @keyframes fade-left{ 0%{opacity:0;transform:translateX(50%)} 100%{opacity:1;transform:translateX(0)} } /* grow ------------------------------------------------- */ .grow, .sect2.fade-up img, #process-section.fade-up img{ -webkit-animation: grow ease-out 1.1s 1.5s 1 both; -moz-animation: grow ease-out 1.1s .5s 1 both; -ms-animation: grow ease-out 1.1s .5s 1 both; -o-animation: grow ease-out 1.1s .5s 1 both; animation: grow ease-out 1.1s .5s 1 both; visibility: visible; backface-visibility: hidden; } .grow-3{ -webkit-animation: grow ease-out 1.5s 1.1s 1 both; -moz-animation: grow ease-out 1.1s .5s 1 both; -ms-animation: grow ease-out 1.1s .5s 1 both; -o-animation: grow ease-out 1.1s .5s 1 both; animation: grow ease-out 1.1s .5s 1 both; visibility: visible; backface-visibility: hidden; } @-webkit-keyframes grow { 0% {opacity: 0;-webkit-transform: scale(0.1);transform:scale(0.8);} 100% {opacity: 1;-webkit-transform: scale(1) translateY(0);transform: scale(1) translateY(0);}} @-moz-keyframes grow { 0% {opacity: 0;--moz-transform: scale(0.8);transform: scale(0.8);} 100% {-moz-transform: scale(1) translateY(0);transform: scale(1) translateY(0);}} @-ms-keyframes grow { 0% {filter: alpha(opacity=0);opacity: 0;-ms-transform: scale(0.8);transform: scale(0.8);} 100% {filter: alpha(opacity=100);opacity: 1;-ms-transform: scale(1) translateY(0);transform: scale(1) translateY(0);}} @keyframes grow { 0% {opacity: 0;transform: scale(0.8);} 100% {opacity: 1;transform: scale(1) translateY(0);}} /* grow-color ------------------------------------------------- */ .grow-color{ -webkit-animation: grow-color 900ms ease-in-out; -moz-animation: grow-color 900ms ease-in-out; -ms-animation: grow-color 900ms ease-in-out; animation: grow-color 900ms ease-in-out; visibility: visible; backface-visibility: hidden; } @-webkit-keyframes grow-color { 0% {background-color: #00aabb;filter: alpha(opacity=0);opacity: 0;-webkit-transform: scale(0.8);-moz-transform: scale(0.8);-ms-transform: scale(0.8);-o-transform: scale(0.8);transform:scale(0.8);} 100% {filter: alpha(opacity=100);opacity: 1;-webkit-transform: scale(1) translateY(0);-moz-transform: scale(1) translateY(0);-ms-transform: scale(1)translateY(0);-o-transform: scale(1) translateY(0);transform: scale(1) translateY(0);}} @-moz-keyframes grow-color { 0% {background-color: #00aabb; filter: alpha(opacity=0);opacity: 0;-webkit-transform: scale(0.8);-moz-transform: scale(0.8);-ms-transform: scale(0.8);-o-transform: scale(0.8);transform: scale(0.8);} 100% {filter: alpha(opacity=100);opacity: 1;-webkit-transform: scale(1) translateY(0);-moz-transform: scale(1) translateY(0);-ms-transform: scale(1) translateY(0);-o-transform:scale(1) translateY(0);transform: scale(1) translateY(0);}} @-ms-keyframes grow-color { 0% {background-color: #00aabb; filter: alpha(opacity=0);opacity: 0;-webkit-transform: scale(0.8);-moz-transform: scale(0.8);-ms-transform: scale(0.8);-o-transform: scale(0.8);transform: scale(0.8);} 100% {filter: alpha(opacity=100);opacity: 1;-webkit-transform: scale(1) translateY(0);-moz-transform: scale(1) translateY(0);-ms-transform: scale(1) translateY(0);-o-transform:scale(1) translateY(0);transform: scale(1) translateY(0);}} @keyframes grow-color { 0% {background-color: #00aabb; filter: alpha(opacity=0);opacity: 0;-webkit-transform: scale(0.8);-moz-transform: scale(0.8);-ms-transform: scale(0.8);-o-transform: scale(0.8);transform: scale(0.8);} 100% {filter: alpha(opacity=100);opacity: 1;-webkit-transform: scale(1) translateY(0);-moz-transform: scale(1) translateY(0);-ms-transform: scale(1) translateY(0);-o-transform: scale(1) translateY(0);transform: scale(1) translateY(0);}} /* glow ------------------------------------------------- */ .glow{ -webkit-animation: glow 5s infinite ease-in 1s; -moz-animation: grow 1500ms ease-in-out; -ms-animation: glow 5s infinite ease-in-out; animation: glow 5s infinite ease-in-out 1s; visibility: visible; backface-visibility: hidden; } @-webkit-keyframes glow { 0% {text-shadow: 0; } 50% {text-shadow: -1px 1px 1px rgba(255,255,255,0.9);} 100% {text-shadow: 0; } } @-moz-keyframes glow { 0% {text-shadow: 0; } 50% {text-shadow: -1px 1px 10px #fff;} 100% {text-shadow: 0; } } @-ms-keyframes glow { 0% {text-shadow: 0; } 50% {text-shadow: -1px 1px 10px #fff;} 100% {text-shadow: 0; } } @-webkit-keyframes glow { 0% {text-shadow: 0; } 50% {text-shadow: -1px 1px 20px #fff;} 100% {text-shadow: 0; } } .bg-glow{ -webkit-animation: bg-glow 5s infinite ease-in 2s; -moz-animation: bg-glow 1500ms ease-in-out; -ms-animation: bg-glow 5s infinite ease-in-out; animation: bg-glow 5s infinite ease-in-out 2s; visibility: visible; backface-visibility: hidden; } @-webkit-keyframes bg-glow { 0% {background: rgba(147,171,183,0.5);text-shadow: 0; } 50% {background: rgba(51,173,204,0.9);text-shadow: -1px 1px 1px rgba(255,255,255,0.9);} 100% {background: rgba(147,171,183,0.4);text-shadow: 0; } } @-moz-keyframes bg-glow { 0% {background: rgba(51,173,204,0.0);text-shadow: 0; } 50% {background: rgba(51,173,204,0.7);text-shadow: -1px 1px 1px rgba(255,255,255,0.9);} 100% {background: rgba(51,173,204,0.0);text-shadow: 0; } } @-ms-keyframes bg-glow { 0% {background: rgba(51,173,204,0.0);text-shadow: 0; } 50% {background: rgba(51,173,204,0.7);text-shadow: -1px 1px 1px rgba(255,255,255,0.9);} 100% {background: rgba(51,173,204,0.0);text-shadow: 0; } } @-webkit-keyframes bg-glow { 0% {background: rgba(147,171,183,0.5);text-shadow: 0; } 50% {background: rgba(51,173,204,0.9);text-shadow: -1px 1px 1px rgba(255,255,255,0.9);} 100% {background: rgba(147,171,183,0.9);text-shadow: 0; } } /* hearbeat ------------------------------------------------- */ .heartbeat,#social-section a:hover{ -webkit-animation: heartbeat 1s 2 ease-in-out; -moz-animation: heartbeat 1s 2 ease-in-out; -ms-animation: heartbeat 1s 2 ease-in-out; animation: heartbeat 1s 2 ease-in-out; visibility: visible; backface-visibility: hidden; } @-webkit-keyframes heartbeat{ 0%{-webkit-transform:scale(1)} 50%{-webkit-transform:scale(1.3);backface-visibility:hidden;transform:translateZ(0);-webkit-font-smoothing:subpixel-antialiased} 100%{-webkit-transform:scale(1)}} @-moz-keyframes heartbeat{ 0%{-moz-transform:scale(1)} 50%{-moz-transform:scale(1.3);backface-visibility:hidden;transform:translateZ(0);-webkit-font-smoothing:subpixel-antialiased} 100%{-moz-transform:scale(1)}} @-o-keyframes heartbeat{ 0%{-o-transform:scale(1)} 50%{-o-transform:scale(1.3);backface-visibility:hidden;transform:translateZ(0);-webkit-font-smoothing:subpixel-antialiased} 100%{-o-transform:scale(1)}} @keyframes heartbeat{ 0%{transform:scale(1)} 50%{transform:scale(1.3);backface-visibility:hidden;transform:translateZ(0);-webkit-font-smoothing:subpixel-antialiased} 100%{transform:scale(1);-webkit-font-smoothing:subpixel-antialiased}} /* roll-in ------------------------------------------------- */ .roll-in, #about-services-section.fade-up img, #features-section.fade-up img { -webkit-animation: roll-in ease-in-out 1.1s 1.5s 1 both; -moz-animation: roll-in ease-in-out 1.1s .5s 1 both; -ms-animation: roll-in ease-in-out 1.1s .5s 1 both; -o-animation: roll-in ease-in-out 1.1s .5s 1 both; animation: roll-in ease-in-out 1.1s .5s 1 both; visibility: visible; backface-visibility: hidden; } @-webkit-keyframes roll-in{ 0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-180deg)} 100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg)}} @-moz-keyframes roll-in{ 0%{opacity:0;-moz-transform:translateX(-100%) rotate(-180deg)} 100%{opacity:1;-moz-transform:translateX(0px) rotate(0deg)}} @-o-keyframes roll-in{ 0%{opacity:0;-o-transform:translateX(-100%) rotate(-180deg)} 100%{opacity:1;-o-transform:translateX(0px) rotate(0deg)}} @keyframes roll-in{ 0%{opacity:0;transform:translateX(-100%) rotate(-180deg)} 100%{opacity:1;transform:translateX(0px) rotate(0deg)}} .rollout{ -webkit-animation: roll-out ease-in-out 1.1s .5s 1 both; -moz-animation: roll-out ease-in-out 1.1s .5s 1 both; -ms-animation: roll-out ease-in-out 1.1s .5s 1 both; -o-animation: roll-out ease-in-out 1.1s .5s 1 both; animation: roll-out ease-in-out 1.1s .5s 1 both; visibility: visible; backface-visibility: hidden; } @-webkit-keyframes roll-out{ 0%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg)} 100%{opacity:0;-webkit-transform:translateX(100%) rotate(120deg)}} @-moz-keyframes roll-out{ 0%{opacity:1;-moz-transform:translateX(0px) rotate(0deg)} 100%{opacity:0;-moz-transform:translateX(100%) rotate(120deg)}} @-o-keyframes roll-out{ 0%{opacity:1;-o-transform:translateX(0px) rotate(0deg)} 100%{opacity:0;-o-transform:translateX(100%) rotate(120deg)}} @keyframes roll-out{ 0%{opacity:1;transform:translateX(0px) rotate(0deg)} 100%{opacity:0;transform:translateX(100%) rotate(120deg)}} .rollOut{-webkit-animation-name:rollOut;-moz-animation-name:rollOut;-o-animation-name:rollOut;animation-name:rollOut} /* flips ------------------------------------------------- */ .flip{ -webkit-animation: flip ease-out 1.1s .5s 1 both; -moz-animation: flip ease-out 1.1s .5s 1 both; -ms-animation: flip ease-out 1.1s .5s 1 both; -o-animation: flip ease-out 1.1s .5s 1 both; animation: flip ease-out 1.1s .5s 1 both; -webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d; -webkit-backface-visibility:visible!important;-moz-backface-visibility:visible!important;-moz-animation-name:flip;-o-backface-visibility:visible!important; } @-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out} 40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out} 50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in} 80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in} 100%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in} } @-moz-keyframes flip{0%{-moz-transform:perspective(400px) rotateY(0);-moz-animation-timing-function:ease-out} 40%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function:ease-out} 50%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in} 80%{-moz-transform:perspective(400px) rotateY(360deg) scale(.95);-moz-animation-timing-function:ease-in} 100%{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in} } @-o-keyframes flip{0%{-o-transform:perspective(400px) rotateY(0);-o-animation-timing-function:ease-out} 40%{-o-transform:perspective(400px) translateZ(150px) rotateY(170deg);-o-animation-timing-function:ease-out} 50%{-o-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-o-animation-timing-function:ease-in} 80%{-o-transform:perspective(400px) rotateY(360deg) scale(.95);-o-animation-timing-function:ease-in} 100%{-o-transform:perspective(400px) scale(1);-o-animation-timing-function:ease-in} } @keyframes flip{0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out} 40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out} 50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in} 80%{transform:perspective(400px) rotateY(360deg) scale(.95);animation-timing-function:ease-in} 100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in} } .flip-x, .sect3.fade-up img{ -webkit-animation: flip-x ease-out 1.1s .5s 1 both; -moz-animation: flip-x ease-out 1.1s .5s 1 both; -ms-animation: flip-x ease-out 1.1s .5s 1 both; -o-animation: flip ease-out 1.1s .5s 1 both; animation: flip-x ease-out 1.1s .5s 1 both; -webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d; -webkit-backface-visibility:visible!important;-moz-backface-visibility:visible!important;-moz-animation-name:flip;-o-backface-visibility:visible!important; } @-webkit-keyframes flip-x{0%{-webkit-transform:perspective(400px) rotateX(190deg);opacity:0} 50%{-webkit-transform:perspective(400px) rotateX(90deg)} 100%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1} } @-moz-keyframes flip-x{0%{-webkit-transform:perspective(400px) rotateX(190deg);opacity:0} 50%{-webkit-transform:perspective(400px) rotateX(90deg)} 100%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1} } @-o-keyframes flip-x{0%{-webkit-transform:perspective(400px) rotateX(190deg);opacity:0} 50%{-webkit-transform:perspective(400px) rotateX(90deg)} 100%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1} } @keyframes flip-x{0%{-webkit-transform:perspective(400px) rotateX(190deg);opacity:0} 50%{-webkit-transform:perspective(400px) rotateX(90deg)} 100%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1} }