Last active
August 29, 2015 14:01
-
-
Save stephenscaff/6736c564ca3e66404ff7 to your computer and use it in GitHub Desktop.
Updates Styles for chefn - 5-15 1:34pm
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*---------------------------------------------- | |
| --Vendor Prefix | |
| ----------------------------------------------- */ | |
| /*---------------------------------------------- | |
| --Transition | |
| ----------------------------------------------- */ | |
| /*---------------------------------------------- | |
| --Translate | |
| ----------------------------------------------- */ | |
| /*---------------------------------------------- | |
| --3D Engine | |
| ----------------------------------------------- */ | |
| /*---------------------------------------------- | |
| --Keyframes | |
| ----------------------------------------------- */ | |
| /*---------------------------------------------- | |
| --Base Defaults | |
| ----------------------------------------------- */ | |
| /*---------------------------------------------- | |
| --Fonts | |
| ----------------------------------------------- */ | |
| /*---------------------------------------------- | |
| --Colors | |
| ----------------------------------------------- */ | |
| /*pink */ | |
| /*dark purple - body */ | |
| /*turqoise */ | |
| /* Yellow */ | |
| /*---------------------------------------------- | |
| --Form | |
| ----------------------------------------------- */ | |
| /*---------------------------------------------- | |
| --Grid | |
| ----------------------------------------------- */ | |
| /* Row Container */ | |
| /* Columns Grid */ | |
| /* MQs Min-Width */ | |
| /*! normalize.css v2.1.3 | MIT License | git.io/normalize */ | |
| article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { | |
| display: block; } | |
| audio, canvas, video { | |
| display: inline-block; } | |
| audio:not([controls]) { | |
| display: none; | |
| height: 0; } | |
| [hidden], template { | |
| display: none; } | |
| html { | |
| font-family: sans-serif; | |
| -ms-text-size-adjust: 100%; | |
| -webkit-text-size-adjust: 100%; } | |
| body { | |
| margin: 0; } | |
| a { | |
| background: 0 0; } | |
| a:focus { | |
| outline: thin dotted; } | |
| a:active, a:hover { | |
| outline: 0; } | |
| h1 { | |
| font-size: 2em; | |
| margin: .67em 0; } | |
| abbr[title] { | |
| border-bottom: 1px dotted; } | |
| b, strong { | |
| font-weight: 600; } | |
| dfn { | |
| font-style: italic; } | |
| hr { | |
| -moz-box-sizing: content-box; | |
| box-sizing: content-box; | |
| height: 0; } | |
| mark { | |
| background: #ff0; | |
| color: #000; } | |
| code, kbd, pre, samp { | |
| font-family: monospace,serif; | |
| font-size: 1em; } | |
| pre { | |
| white-space: pre-wrap; } | |
| q { | |
| quotes: "\201C" "\201D" "\2018" "\2019"; } | |
| small { | |
| font-size: 80%; } | |
| sub, sup { | |
| font-size: 75%; | |
| line-height: 0; | |
| position: relative; | |
| vertical-align: baseline; } | |
| sup { | |
| top: -.5em; } | |
| sub { | |
| bottom: -.25em; } | |
| img, a img { | |
| border: 0; } | |
| svg:not(:root) { | |
| overflow: hidden; } | |
| figure { | |
| margin: 0; } | |
| fieldset { | |
| border: 1px solid silver; | |
| margin: 0 2px; | |
| padding: .35em .625em .75em; } | |
| legend { | |
| border: 0; | |
| padding: 0; } | |
| 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=checkbox], input[type=radio] { | |
| box-sizing: border-box; | |
| padding: 0; } | |
| 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; } | |
| textarea { | |
| overflow: auto; | |
| vertical-align: top; } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; } | |
| /*---------------------------------------------- | |
| --Setup | |
| ----------------------------------------------- */ | |
| *, *:before, *:after { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| html { | |
| font-size: 100%; | |
| overflow-y: scroll; | |
| overflow-x: hidden; | |
| width: 100%; | |
| -webkit-text-size-adjust: 100%; } | |
| /*---------------------------------------------- | |
| --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; } | |
| img.full-center { | |
| width: 100%; | |
| margin: 0 auto; | |
| display: block; } | |
| figure img, figure, img.respond { | |
| max-width: 100%; | |
| width: 100%; | |
| height: auto; } | |
| /*---------------------------------------------- | |
| --Flexible Video | |
| ----------------------------------------------- */ | |
| .flex-vid { | |
| position: relative; | |
| padding-top: 25px; | |
| padding-bottom: 67.5%; | |
| height: 0; | |
| margin-bottom: 1.2em; } | |
| overflow:hidden | |
| .flex-vid.widescreen { | |
| padding-bottom: 57.25%; } | |
| .flex-vid.vimeo { | |
| padding-top: 0; | |
| padding-bottom: 56.5%; } | |
| .flex-vid.gmaps { | |
| margin-bottom: 0; } | |
| .flex-vid iframe, | |
| .flex-vid object, | |
| .flex-vid embed, | |
| .flex-vid 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-vid { | |
| padding-top: 0; } } | |
| /*---------------------------------------------- | |
| --Dividers | |
| ----------------------------------------------- */ | |
| hr { | |
| border: solid #ddd; | |
| border-width: 1px 0 0; | |
| clear: both; | |
| margin: 1.5em 0; | |
| height: 0; } | |
| hr.sep { | |
| display: block; | |
| width: 40%; | |
| margin: 1em auto; | |
| border: 1px solid #f5426c; } | |
| hr.sep-thin { | |
| display: block; | |
| width: 60%; | |
| margin: 0.6em auto; | |
| border-top: 1px solid #f5426c; } | |
| hr.sep-thick { | |
| display: block; | |
| width: 40%; | |
| margin: 2em auto 3em; | |
| border: 2px solid #f5426c; } | |
| hr.sep-left { | |
| margin: .7em 0; | |
| width: 40%; | |
| display: block; | |
| border: 1px solid #f5426c; } | |
| hr.sep-thin-left { | |
| margin: .7em 0; | |
| width: 40%; | |
| display: block; | |
| border-top: 1px solid #f5426c; } | |
| .hr-dotted { | |
| color: #820063; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| line-height: 1; | |
| margin: -1em 0 0; } | |
| /*---------------------------------------------- | |
| --Links | |
| ----------------------------------------------- */ | |
| a { | |
| color: #f5426c; | |
| text-decoration: none; | |
| line-height: inherit; | |
| -webkit-transitio: color 0.6s ease-in; | |
| -moz-transition: color 0.6s ease-in; | |
| -ms-transition: color 0.6s ease-in; | |
| -o-transition: color 0.6s ease-in; | |
| transition: color 0.6s ease-in; } | |
| a:hover { | |
| color: #960829; | |
| -webkit-transitio: color 0.6s ease-out; | |
| -moz-transition: color 0.6s ease-out; | |
| -ms-transition: color 0.6s ease-out; | |
| -o-transition: color 0.6s ease-out; | |
| transition: color 0.6s ease-out; } | |
| a:active { | |
| color: #f5426c; } | |
| a.invert, .invert a { | |
| color: #820063; } | |
| a.invert:hover, .invert a:hover { | |
| color: #f5426c; } | |
| a.secondary { | |
| color: #820063; } | |
| a.secondary:hover { | |
| color: black; } | |
| a.secondary:active { | |
| color: #820063; } | |
| /*---------------------------------------------- | |
| --Color Classes | |
| ----------------------------------------------- */ | |
| .color-alpha { | |
| color: #f5426c; } | |
| .color-beta { | |
| color: #820063; } | |
| .color-delta { | |
| color: #25c9d2; } | |
| .color-zeta { | |
| color: #f2c907; } | |
| .bg-alpha { | |
| background-color: #f5426c; } | |
| .bg-beta { | |
| background-color: #820063; } | |
| .bg-delta { | |
| background-color: #25c9d2 !important; | |
| color: rgba(255, 255, 255, 0.8); } | |
| .bg-zeta { | |
| background-color: #f2c907 !important; } | |
| .bg-grey { | |
| background-color: #f2f2f2 !important; } | |
| .bg-dark { | |
| background-color: rgba(0, 0, 0, 0.9); } | |
| .bg-white { | |
| background-color: #fff !important; } | |
| .bg-darken { | |
| background: rgba(0, 0, 0, 0.1); } | |
| /*---------------------------------------------- | |
| --Sect - Light & Dark Themes | |
| ----------------------------------------------- */ | |
| .sect-light h1, .sect-light h2, .sect-light h3, .sect-light h4 { | |
| color: #820063; } | |
| .sect-light p { | |
| color: #586b72; } | |
| .sect-dark *, | |
| .bg-delta * { | |
| color: #fff; } | |
| /*---------------------------------------------- | |
| --Selection | |
| ----------------------------------------------- */ | |
| *::selection { | |
| background: #f5426c; | |
| color: white; | |
| text-shadow: none; } | |
| .highlight { | |
| background: #f5426c; } | |
| /*---------------------------------------------- | |
| --Typography | |
| ----------------------------------------------- */ | |
| body { | |
| font-family: "Gotham SSm A", "Gotham SSm B", gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| color: #586b72; | |
| background: rgba(255, 255, 255, 0.8); | |
| position: relative; | |
| overflow-x: hidden; | |
| width: 100%; | |
| font-weight: 400; | |
| font-style: normal; | |
| line-height: 1.6; | |
| -ms-text-size-adjust: 100%; | |
| -webkit-text-size-adjust: 100%; | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; } | |
| /*---------------------------------------------- | |
| --Fluid body sizing | |
| ----------------------------------------------- */ | |
| body { | |
| font-size: 100%; } | |
| @media (min-width: 32em) { | |
| body { | |
| font-size: 100%; } } | |
| @media (min-width: 54em) { | |
| body { | |
| font-size: 105%; } } | |
| @media (min-width: 72em) { | |
| body { | |
| font-size: 110%; } } | |
| @media (min-width: 75em) { | |
| body { | |
| font-size: 115%; } } | |
| @media (min-width: 80em) { | |
| body { | |
| font-size: 120%; } } | |
| @media (min-width: 85em) { | |
| body { | |
| font-size: 125%; } } | |
| @media (min-width: 90em) { | |
| body { | |
| font-size: 130%; } } | |
| @media (min-width: 110em) { | |
| body { | |
| font-size: 135%; } } | |
| /*---------------------------------------------- | |
| --Headers | |
| ----------------------------------------------- */ | |
| h1, h2, h3, h4, h5, h6 { | |
| font-weight: 600; | |
| text-rendering: optimizeLegibility; | |
| line-height: 1.3; } | |
| h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { | |
| font-size: 60%; | |
| line-height: 0; } | |
| h1 { | |
| font-size: 2.15em; | |
| margin: 0.6em 0; } | |
| @media (min-width: 54em) { | |
| h1 { | |
| font-size: 2.25em; } } | |
| @media (min-width: 72em) { | |
| h1 { | |
| font-size: 2.55em; } } | |
| h2 { | |
| font-size: 1.65em; | |
| margin: 1.1em 0 .6em; } | |
| @media (min-width: 54em) { | |
| h2 { | |
| font-size: 2.1em; } } | |
| h3 { | |
| font-size: 1.35em; | |
| margin: 1em 0 .3em; | |
| color: #25c9d2; } | |
| @media (min-width: 54em) { | |
| h3 { | |
| font-size: 1.65em; } } | |
| h4 { | |
| font-size: 1.2em; | |
| margin: .75em 0 0.3em; } | |
| h1, h2, h3, h4 { | |
| font-family: "Gotham SSm A", "Gotham SSm B", gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; } | |
| p { | |
| margin: 0 0 .75em; } | |
| p, small, em { | |
| font-family: "Gotham SSm A", "Gotham SSm B", gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| color: #820063; } | |
| p, ul { | |
| padding: 0.1em 0 .2em; } | |
| .big { | |
| font-size: 105%; } | |
| @media (min-width: 32em) { | |
| .big { | |
| font-size: 130%; } } | |
| .bigger { | |
| font-size: 115%; } | |
| @media (min-width: 32em) { | |
| .bigger { | |
| font-size: 140%; } } | |
| .biggest { | |
| font-size: 125%; } | |
| @media (min-width: 32em) { | |
| .biggest { | |
| font-size: 150%; } } | |
| @media (min-width: 54em) { | |
| .biggest { | |
| font-size: 170%; } } | |
| @media (min-width: 72em) { | |
| .biggest { | |
| font-size: 200%; } } | |
| /*---------------------------------------------- | |
| --Misc | |
| ----------------------------------------------- */ | |
| .font-weight4 { | |
| font-weight: 400; } | |
| .font-weight6 { | |
| font-weight: 600; } | |
| .subheader { | |
| font-size: 145%; | |
| line-height: 1; | |
| font-weight: 400; | |
| margin: .6em 0 -.1em; } | |
| .preheader { | |
| font-size: 75%; | |
| line-height: 1; | |
| color: #f5426c; | |
| margin: 0; | |
| padding: 0; } | |
| @media (min-width: 54em) { | |
| .preheader { | |
| font-size: 75%; } } | |
| em { | |
| font-style: italic; | |
| font-weight: 600; | |
| color: #999; } | |
| .caps { | |
| text-transform: uppercase; | |
| font-weight: 600; } | |
| /*--------------------------------------------------- | |
| Lists | |
| --------------------------------------------------- */ | |
| ul { | |
| list-style-position: outside; } | |
| ul li { | |
| list-style: none; } | |
| ul.list-vert { | |
| padding: 0 !important; } | |
| ol, ul, dl { | |
| line-height: 1.6; } | |
| dl, dd { | |
| margin: 0; | |
| padding: 0; } | |
| .blog ol li { | |
| padding-bottom: 0.5em; } | |
| .blog ol { | |
| counter-reset: li; } | |
| .blog ol > li { | |
| position: relative; | |
| margin-left: -.5em; | |
| list-style: none; } | |
| .blog ol > li:before { | |
| content: counter(li); | |
| counter-increment: li; | |
| position: absolute; | |
| top: -.03em; | |
| left: -1.2em; | |
| width: 1em; | |
| font-weight: 700; | |
| color: #f5426c; } | |
| /*---------------------------------------------- | |
| --Circular Icons | |
| -----------------------------------------------*/ | |
| .list-icons li { | |
| display: inline; | |
| padding: 0 3%; } | |
| .list-icons li img { | |
| max-width: 5em; } | |
| .circle-icons li { | |
| padding: 0 .1em; } | |
| .circle-icons [class*="icon-"] { | |
| text-align: center; | |
| color: #FFF; | |
| background: #CCC; | |
| height: 2em; | |
| width: 2em; | |
| border-radius: 100%; | |
| line-height: 1em; | |
| padding: 0.6em; | |
| margin: .2em 0; | |
| display: inline-block; | |
| font-size: 1.2em; } | |
| .circle-icons .icon-facebook:hover { | |
| background: #415e9e; } | |
| .circle-icons .icon-twitter:hover { | |
| background: #28aae1; } | |
| .circle-icons .icon-pinterest:hover { | |
| background: #cc2127; } | |
| .circle-icons .icon-mail:hover { | |
| background: #f5426c; } | |
| /*---------------------------------------------- | |
| --Arrow Link | |
| ----------------------------------------------- */ | |
| .arrowlink:after, .link-arrow:after { | |
| content: "→"; } | |
| /*--------------------------------------------------- | |
| Quotes | |
| --------------------------------------------------- */ | |
| blockquote cite { | |
| display: block; | |
| font-size: 2em; | |
| color: #555; } | |
| blockquote cite:before { | |
| content: "\2014 \0020"; } | |
| blockquote cite a, blockquote cite a:visited { | |
| color: #555; } | |
| q, blockquote { | |
| font-family: "Gotham SSm A", "Gotham SSm B", gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| text-align: left; | |
| padding: .5em 1em; | |
| margin: 1em auto; | |
| line-height: inherit; | |
| letter-spacing: inherit; | |
| border-left: 2px solid rgba(0, 0, 0, 0.1); | |
| font-size: 110%; | |
| font-style: italic; | |
| color: rgba(0, 0, 0, 0.7); } | |
| q.text-center, blockquote.text-center { | |
| border: 0; } | |
| @media (min-width: 54em) { | |
| q, blockquote { | |
| font-size: 130%; | |
| border-left: 5px solid rgba(0, 0, 0, 0.1); } } | |
| q, blockquote { | |
| quotes: "“" "”" "‘" "’"; } | |
| /*---------------------------------------------- | |
| --Micro Clearfix - also added to row class | |
| ----------------------------------------------- */ | |
| .cf, .row { | |
| *zoom: 1; } | |
| .cf:before, .cf:after, .row:before, .row:after { | |
| content: ""; | |
| display: table; } | |
| .cf:after, .row:after { | |
| clear: both; } | |
| /*---------------------------------------------- | |
| --Row Class | |
| ----------------------------------------------- */ | |
| .row { | |
| width: 98%; | |
| max-width: 60em; | |
| margin-left: auto; | |
| margin-right: auto; | |
| /* Go Almost Full Width */ | |
| /* Go Full Width */ } | |
| @media (min-width: 54em) { | |
| .row { | |
| width: 90%; } } | |
| @media (min-width: 72em) { | |
| .row { | |
| max-width: 56em; | |
| width: 85%; } } | |
| .xl .row { | |
| max-width: 95%; | |
| width: 95%; } | |
| .xxl .row { | |
| max-width: 98%; | |
| width: 98%; } | |
| .row.xxxl { | |
| width: 100%; | |
| max-width: 100%; } | |
| .row.g-full { | |
| padding: 0 0.5em; } | |
| /* For Nesting Columns */ | |
| .row .row { | |
| width: auto; | |
| max-width: none; | |
| min-width: 0; | |
| margin: -0.5em; } | |
| @media (min-width: 54em) { | |
| .row .row { | |
| width: auto; | |
| max-width: none; | |
| min-width: 0; | |
| margin: -0.5em; } } | |
| /*---------------------------------------------- | |
| --Columns | |
| ----------------------------------------------- */ | |
| .cols { | |
| float: left; | |
| min-height: 1px; | |
| padding: 0 0.5em; | |
| position: relative; | |
| width: 100%; } | |
| @media only screen and (min-width: 32em) { | |
| .cols { | |
| padding: 0 2em; } } | |
| @media only screen and (min-width: 54em) { | |
| .cols { | |
| padding: 0 0.5em; } } | |
| .half-pad .row { | |
| padding: 0 0.25em; } | |
| .half-pad .row .cols { | |
| padding: 0 0.25em; } | |
| .row.nopad .cols { | |
| padding: 0; } | |
| .row .row.nopad { | |
| margin: 0-0 0.5em; } | |
| @media only screen and (min-width: 54em) { | |
| [class*="cols"] + [class*="cols"]:last-child { | |
| float: right; } | |
| .cols.stayleft { | |
| float: left !important; } } | |
| ul.cols { | |
| padding-left: 1em; | |
| padding-right: 8%; | |
| margin-bottom: 0; } | |
| @media only screen and (min-width: 54em) { | |
| ul.cols { | |
| padding-right: 0; } } | |
| /*---------------------------------------------- | |
| --Grid: xtra small (also for non collapsing columns) | |
| ----------------------------------------------- */ | |
| .xsm-3, .row .xsm-3 { | |
| width: 25%; } | |
| .xsm-6, .row .xsm-6 { | |
| width: 50%; } | |
| .xsm-4, .row .xsm-4 { | |
| width: 33.33333%; } | |
| .xsm-8, .row .xsm-8 { | |
| width: 66.66667%; } | |
| @media only screen and (min-width: 32em) { | |
| /*---------------------------------------------- | |
| --Grid: small | |
| ----------------------------------------------- */ | |
| .sm-6, .row .sm-6 { | |
| width: 50%; } | |
| .sm-4, .row .sm-4 { | |
| width: 33.33333%; } | |
| .sm-3, .row .sm-3 { | |
| width: 25%; } | |
| .sm-8, .row .sm-8 { | |
| width: 66.66667%; } } | |
| @media only screen and (min-width: 54em) { | |
| /*---------------------------------------------- | |
| --Grid: main | |
| ----------------------------------------------- */ | |
| .g-1, .row .g-1 { | |
| width: 8.33333%; } | |
| .g-2, .row .g-2 { | |
| width: 16.66667%; } | |
| .g-3, .row .g-3 { | |
| width: 25%; } | |
| .g-4, .row .g-4 { | |
| width: 33.33333%; } | |
| .g-5, .row .g-5 { | |
| width: 41.66667%; } | |
| .g-6, .row .g-6 { | |
| width: 50%; } | |
| .g-7, .row .g-7 { | |
| width: 58.33333%; } | |
| .g-8, .row .g-8 { | |
| width: 66.66667%; } | |
| .g-9, .row .g-9 { | |
| width: 75%; } | |
| .g-10, .row .g-10 { | |
| width: 83.33333%; } | |
| .g-11, .row .g-11 { | |
| width: 91.66667%; } | |
| .g-12, .row .g-12 { | |
| width: 100%; } | |
| /*---------------------------------------------- | |
| --Offsets | |
| ----------------------------------------------- */ | |
| .row .offset1 { | |
| margin-left: 8.33333%; } | |
| .row .offset2 { | |
| margin-left: 16.66667%; } | |
| .row .offset3 { | |
| margin-left: 25%; } | |
| .row .offset4 { | |
| margin-left: 33.33333%; } | |
| .row .offset5 { | |
| margin-left: 41.66667%; } | |
| .row .offset6 { | |
| margin-left: 50%; } | |
| .row .offset7 { | |
| margin-left: 58.33333%; } | |
| .row .offset8 { | |
| margin-left: 66.66667%; } | |
| .row .offset9 { | |
| margin-left: 75%; } | |
| .row .offset10 { | |
| margin-left: 83.33333%; } | |
| .source-reverse { | |
| float: right !important; } | |
| .push-right { | |
| position: relative; | |
| right: -50%; } | |
| .pull-left { | |
| position: relative; | |
| left: -50%; } | |
| .pull-9 { | |
| right: 75%; } | |
| .push-3 { | |
| left: 25%; } } | |
| @media only screen and (min-width: 54em) and (max-width: 72em) { | |
| .row.foldy .g-3 { | |
| width: 50% !important; } } | |
| img.g-img-2 { | |
| width: 100%; | |
| margin: 0; | |
| padding: 0; | |
| float: left; } | |
| @media only screen and (min-width: 54em) { | |
| img.g-img-2 { | |
| width: 50%; } } | |
| /*--------------------------------------------- | |
| --Containerless Grid | |
| ----------------------------------------------- */ | |
| .block-wrap { | |
| display: table; | |
| width: 100%; | |
| float: left; | |
| background: #fff; | |
| background-color: #25c9d2; } | |
| .block-wrap h2 { | |
| margin: 0.2em 0 0; } | |
| .block-half { | |
| text-align: left; | |
| width: 100%; | |
| display: block; | |
| vertical-align: middle; | |
| text-align: center; | |
| padding: 6.5em 0; } | |
| @media only screen and (min-width: 54em) { | |
| .block-half { | |
| width: 50% !important; | |
| display: table-cell !important; | |
| padding: 5% 0 5%; } } | |
| .block-half.block-text { | |
| padding: 1em 0.5em 2em; | |
| text-align: left; | |
| background-color: #fff; } | |
| @media only screen and (min-width: 54em) { | |
| .block-half.block-text { | |
| padding: 2em 0.5em; } } | |
| @media only screen and (min-width: 80em) { | |
| .block-half.block-text { | |
| padding: 2em 1em; } } | |
| .block-half.block-text article, .block-half.block-text div { | |
| margin: 0 auto; | |
| max-width: 92%; } | |
| .block-half.block-image { | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-size: 180%; | |
| background-color: #25c9d2; | |
| position: relative; | |
| text-align: center; | |
| opacity: 1; } | |
| @media only screen and (min-width: 32em) { | |
| .block-half.block-image { | |
| background-size: cover; } } | |
| .block-third { | |
| text-align: left; | |
| width: 100%; | |
| display: block; | |
| vertical-align: middle; | |
| text-align: center; | |
| padding: 7.5em 0; } | |
| @media only screen and (min-width: 54em) { | |
| .block-third { | |
| width: 33.33% !important; | |
| display: table-cell !important; | |
| padding: 12% 0; } } | |
| .block-third.block-text { | |
| padding: 1em 0.5em 2em; | |
| text-align: left; | |
| background-color: #fff; } | |
| @media only screen and (min-width: 54em) { | |
| .block-third.block-text { | |
| padding: 2em 0.5em; } } | |
| @media only screen and (min-width: 80em) { | |
| .block-third.block-text { | |
| padding: 3em 1em; } } | |
| .block-third.block-text article, .block-third.block-text div { | |
| margin: 0 auto; | |
| max-width: 92%; } | |
| .block-third.block-image { | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-size: 180%; | |
| background-color: #25c9d2; | |
| position: relative; | |
| text-align: center; | |
| opacity: 1; } | |
| @media only screen and (min-width: 32em) { | |
| .block-third.block-image { | |
| background-size: cover; } } | |
| /*--------------------------------------------- | |
| Form Grid | |
| ----------------------------------------------- */ | |
| @media only screen and (max-width: 54em) { | |
| form .cols, | |
| form .row.full { | |
| width: 100%; } } | |
| form .row { | |
| width: 95%; } | |
| @media (min-width: 54em) { | |
| form .row { | |
| width: 90%; } } | |
| form .cols { | |
| padding: 0 0.5em; } | |
| /*--------------------------------------------- | |
| Grid Blocks | |
| ----------------------------------------------- */ | |
| @media only screen { | |
| [class*="g-block-"] { | |
| display: block; | |
| padding: 0; | |
| margin: 0; | |
| *zoom: 1; } | |
| [class*="g-block-"]:before, [class*="g-block-"]:after { | |
| content: " "; | |
| display: table; } | |
| [class*="g-block-"]:after { | |
| clear: both; } | |
| [class*="g-block-"] > li { | |
| display: inline; | |
| height: auto; | |
| float: left; | |
| padding: 0 0.5em 1.25em; } | |
| .half-pad [class*="g-block-"] > li { | |
| padding: 0 0.25em 1.25em; } | |
| .g-block-1 > li { | |
| width: 100%; } | |
| .g-block-2 > li { | |
| width: 50%; } | |
| .g-block-3 > li { | |
| width: 33.33333%; } | |
| .g-block-4 > li { | |
| width: 25%; } | |
| .g-block-1 > li:nth-of-type(n), | |
| .g-block-2 > li:nth-of-type(n), | |
| .g-block-3 > li:nth-of-type(n), | |
| .g-block-4 > li:nth-of-type(n) { | |
| clear: none; } | |
| .g-block-1 > li:nth-of-type(1n+1), | |
| .g-block-2 > li:nth-of-type(2n+1), | |
| .g-block-3 > li:nth-of-type(3n+1), | |
| .g-block-4 > li:nth-of-type(4n+1) { | |
| clear: both; } } | |
| /*--------------------------------------------- | |
| Grid Blocks - Med | |
| ----------------------------------------------- */ | |
| @media only screen and (min-width: 54em) { | |
| .med-g-block-1 > li { | |
| width: 100%; } | |
| .med-g-block-2 > li { | |
| width: 50%; } | |
| .med-g-block-3 > li { | |
| width: 33.33333%; } | |
| .med-g-block-4 > li { | |
| width: 25%; } | |
| .med-g-block-5 > li { | |
| width: 20%; } | |
| .med-g-block-6 > li { | |
| width: 16.66667%; } | |
| .med-g-block-7 > li { | |
| width: 14.28571%; } | |
| .med-g-block-8 > li { | |
| width: 12.5%; } | |
| .med-g-block-1 > li:nth-of-type(n), | |
| .med-g-block-2 > li:nth-of-type(n), | |
| .med-g-block-3 > li:nth-of-type(n), | |
| .med-g-block-4 > li:nth-of-type(n), | |
| .med-g-block-5 > li:nth-of-type(n), | |
| .med-g-block-6 > li:nth-of-type(n), | |
| .med-g-block-7 > li:nth-of-type(n), | |
| .med-g-block-8 > li:nth-of-type(n) { | |
| clear: none; } | |
| .med-g-block-1 > li:nth-of-type(1n+1), | |
| .med-g-block-2 > li:nth-of-type(2n+1), | |
| .med-g-block-3 > li:nth-of-type(3n+1), | |
| .med-g-block-4 > li:nth-of-type(4n+1), | |
| .med-g-block-5 > li:nth-of-type(5n+1), | |
| .med-g-block-6 > li:nth-of-type(6n+1), | |
| .med-g-block-7 > li:nth-of-type(7n+1), | |
| .med-g-block-8 > li:nth-of-type(8n+1) { | |
| clear: both; } } | |
| /*--------------------------------------------- | |
| Grid Blocks - Large | |
| ----------------------------------------------- */ | |
| @media only screen and (min-width: 72em) { | |
| .lg-g-block-1 > li { | |
| width: 100%; } | |
| .lg-g-block-2 > li { | |
| width: 50%; } | |
| .lg-g-block-3 > li { | |
| width: 33.33333%; } | |
| .lg-g-block-4 > li { | |
| width: 25%; } | |
| .lg-g-block-5 > li { | |
| width: 20%; } | |
| .lg-g-block-6 > li { | |
| width: 16.66667%; } | |
| .lg-g-block-7 > li { | |
| width: 14.28571%; } | |
| .lg-g-block-8 > li { | |
| width: 12.5%; } | |
| .lg-g-block-1 > li:nth-of-type(n), | |
| .lg-g-block-2 > li:nth-of-type(n), | |
| .lg-g-block-3 > li:nth-of-type(n), | |
| .lg-g-block-4 > li:nth-of-type(n), | |
| .lg-g-block-5 > li:nth-of-type(n), | |
| .lg-g-block-6 > li:nth-of-type(n), | |
| .lg-g-block-7 > li:nth-of-type(n), | |
| .lg-g-block-8 > li:nth-of-type(n) { | |
| clear: none; } | |
| .lg-g-block-1 > li:nth-of-type(1n+1), | |
| .lg-g-block-2 > li:nth-of-type(2n+1), | |
| .lg-g-block-3 > li:nth-of-type(3n+1), | |
| .lg-g-block-4 > li:nth-of-type(4n+1), | |
| .lg-g-block-5 > li:nth-of-type(5n+1), | |
| .lg-g-block-6 > li:nth-of-type(6n+1), | |
| .lg-g-block-7 > li:nth-of-type(7n+1), | |
| .lg-g-block-8 > li:nth-of-type(8n+1) { | |
| clear: both; } } | |
| /*---------------------------------------------- | |
| --Positioning | |
| ----------------------------------------------- */ | |
| .left { | |
| float: left; } | |
| .right { | |
| float: right; } | |
| .text-left { | |
| text-align: left; } | |
| .text-right { | |
| text-align: right; } | |
| .text-center { | |
| text-align: center; } | |
| .cols.centered, .centered { | |
| float: none; | |
| margin: 0 auto; | |
| display: block; } | |
| .center-all, | |
| .center-all g-full.cols { | |
| text-align: center; | |
| margin: 0 auto; | |
| display: block; | |
| float: none; } | |
| /*---------------------------------------------- | |
| --Vertical Center | |
| ----------------------------------------------- */ | |
| .v-center { | |
| display: table; | |
| width: 100%; } | |
| .v-center > div { | |
| display: table-cell; | |
| vertical-align: middle; | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| float: none; | |
| padding: 7% 0; } | |
| .v-center.row > *, .v-center.row > * { | |
| display: block; | |
| vertical-align: baseline; } | |
| .v-center.lesspad > div { | |
| padding: 6% 0; } | |
| /*---------------------------------------------- | |
| --Inline Lists | |
| ----------------------------------------------- */ | |
| .inline-list { | |
| margin: 0 auto 1.0625em auto; | |
| margin-left: -1.375em; | |
| margin-right: 0; | |
| padding: 0; | |
| list-style: none; | |
| overflow: hidden; } | |
| .inline-list > li { | |
| list-style: none; | |
| float: left; | |
| margin-left: 1.375em; | |
| display: block; } | |
| .inline-list > li > * { | |
| display: block; } | |
| /*---------------------------------------------- | |
| --Link Lists | |
| ----------------------------------------------- */ | |
| ul.link-list { | |
| margin: 0 0 1em -1em; | |
| padding: 0; | |
| list-style: none; } | |
| ul.link-list overflow:hidden | |
| li { | |
| list-style: none; | |
| float: left; | |
| margin-left: 1em; | |
| display: block; } | |
| ul.link-list li a { | |
| display: block; } | |
| /*For vertical link lists*/ | |
| ul.vert-list { | |
| list-style: none; | |
| line-height: 2; | |
| padding: 0; } | |
| ul.vert-list li { | |
| list-style: none; } | |
| /*---------------------------------------------- | |
| --Stop line breaks Turncate | |
| ----------------------------------------------- */ | |
| .turncate { | |
| max-width: 95%; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; } | |
| .nomargin { | |
| margin: 0; } | |
| .center-to-left { | |
| max-width: 10em; | |
| display: block; | |
| margin: 0 auto; } | |
| @media (min-width: 54em) { | |
| .center-to-left { | |
| float: left; | |
| margin-right: 1em; } } | |
| /*---------------------------------------------- | |
| -Visibilities | |
| ----------------------------------------------- */ | |
| .show-small { | |
| display: block; } | |
| @media (min-width: 32em) { | |
| .show-small { | |
| display: none; } } | |
| .hide-small { | |
| display: none; } | |
| @media (min-width: 32em) { | |
| .hide-small { | |
| display: block; } } | |
| @media (max-width: 32em) { | |
| .small-hero { | |
| display: block; | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-size: 100%; | |
| width: 100%; | |
| text-align: center; | |
| padding: 5.5em 0 !important; } } | |
| @media (min-width: 32em) { | |
| .small-hero { | |
| display: none; } } | |
| @media (max-width: 32em) { | |
| .small-nobg { | |
| background-image: none !important; } } | |
| /*---------------------------------------------- | |
| --L to R Scroll on mobile | |
| ----------------------------------------------- */ | |
| @media (max-width: 22em) { | |
| .scroller { | |
| overflow-x: scroll; } } | |
| /*---------------------------------------------- | |
| --Forms | |
| ----------------------------------------------- */ | |
| form { | |
| margin: 0; } | |
| fieldset { | |
| border: 0; | |
| padding: 0; } | |
| textarea { | |
| overflow: auto; | |
| vertical-align: top; | |
| width: 95%; } | |
| legend { | |
| margin-left: -.75em; } | |
| button, input, select, textarea { | |
| vertical-align: baseline; | |
| vertical-align: middle; } | |
| /* IE7 and older */ | |
| button, input { | |
| line-height: normal; | |
| overflow: visible; } | |
| button, input[type="button"], input[type="reset"], input[type="submit"] { | |
| cursor: pointer; | |
| -webkit-appearance: button; } | |
| input[type="checkbox"], input[type="radio"] { | |
| box-sizing: border-box; } | |
| 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 { | |
| -webkit-appearance: none; } | |
| button::-moz-focus-inner, | |
| .btn::-moz-focus-inner, | |
| input::-moz-focus-inner { | |
| border: 0; | |
| padding: 0; } | |
| input:focus, | |
| select:focus, | |
| textarea:focus, | |
| button:focus, | |
| .btn:focus { | |
| outline: none; } | |
| button, .btn, input, select, textarea { | |
| margin: 0; | |
| font-size: 100%; | |
| vertical-align: middle; } | |
| button, .btn, input { | |
| overflow: visible; | |
| line-height: normal; } | |
| button::-moz-focus-inner, input::-moz-focus-inner { | |
| padding: 0; | |
| border: 0; } | |
| button, html input[type="button"], input[type="reset"], input[type="submit"] { | |
| cursor: pointer; | |
| -webkit-appearance: button; } | |
| label { | |
| font-family: "Gotham SSm A", "Gotham SSm B", gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| font-size: 1.2em; | |
| display: inline; | |
| margin-top: 1em; } | |
| label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] { | |
| cursor: pointer; } | |
| /*---------------------------------------------- | |
| --Placeholders | |
| ----------------------------------------------- */ | |
| ::-webkit-input-placeholder { | |
| color: #cdcdcd; } | |
| :-moz-placeholder { | |
| /* Firefox 18- */ | |
| color: #cdcdcd; } | |
| ::-moz-placeholder { | |
| /* Firefox 19+ */ | |
| color: #cdcdcd; } | |
| :-ms-input-placeholder { | |
| color: #cdcdcd; } | |
| /*---------------------------------------------- | |
| --Inputs - all | |
| ----------------------------------------------- */ | |
| input, textarea, select { | |
| font-family: "Gotham SSm A", "Gotham SSm B", gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| font-size: 75%; | |
| background: white; | |
| color: rgba(0, 0, 0, 0.9); | |
| border: 2px solid #cdcdcd; | |
| outline: 0; | |
| padding: 0.7em .4em 0.55em; | |
| margin: .3em 0; | |
| display: block; | |
| width: 100% !important; | |
| display: block !important; | |
| float: none !important; | |
| font-weight: 400; | |
| -webkit-appearance: none; | |
| -webkit-border-radius: 4px; | |
| -ms-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| -o-border-radius: 4px; | |
| border-radius: 4px; | |
| -webkit-box-shadow: none; | |
| -ms-box-shadow: none; | |
| -moz-box-shadow: none; | |
| -o-box-shadow: none; | |
| box-shadow: none; | |
| -webkit-transitio: all 0.25s ease-in; | |
| -moz-transition: all 0.25s ease-in; | |
| -ms-transition: all 0.25s ease-in; | |
| -o-transition: all 0.25s ease-in; | |
| transition: all 0.25s ease-in; } | |
| input:focus, textarea:focus, select:focus { | |
| border-color: #f5426c; | |
| -webkit-transitio: all 0.25s ease-in; | |
| -moz-transition: all 0.25s ease-in; | |
| -ms-transition: all 0.25s ease-in; | |
| -o-transition: all 0.25s ease-in; | |
| transition: all 0.25s ease-in; } | |
| textarea { | |
| min-height: 7em; } | |
| /*---------------------------------------------- | |
| --Selects | |
| ----------------------------------------------- */ | |
| select, .select { | |
| -webkit-appearance: none; | |
| background-image: url(data:images/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAICAYAAADuv08kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI3NTA0QTJBMkMyNDExRTM4RUFFODVGREE5OEU3OUJGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjI3NTA0QTJCMkMyNDExRTM4RUFFODVGREE5OEU3OUJGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Mjc1MDRBMjgyQzI0MTFFMzhFQUU4NUZEQTk4RTc5QkYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Mjc1MDRBMjkyQzI0MTFFMzhFQUU4NUZEQTk4RTc5QkYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5mQh3qAAAAmklEQVR42mIMDQ1lAIJUII5gIB2sAOLZIMaqVatI0sgEpecA8SYSLd0M1UcWgFn8H4gnA/FeIvWB1E2C6qPIYhD4B8RdQHyMgJ7jUHX/GCgATGj8P0DcAsTncai/AMTNUHUM1LQYBH4CcT0QX0cTvwHEdVB5BlpYDAJfgbgGiO9D+SC6GirOQEuLQeADEFcC8Wko/YGBigAgwADvoiJcc4TFQAAAAABJRU5ErkJggg==); | |
| background-position: right center; | |
| background-repeat: no-repeat; | |
| background-size: 1.8em; | |
| color: #cdcdcd; | |
| cursor: pointer; } | |
| select[disabled] { | |
| color: #a8a8a8; } | |
| .safari select, | |
| .chrome select { | |
| padding-right: 37px; } | |
| form .btn, | |
| form button, button, | |
| input[type="submit"] { | |
| width: auto !important; } | |
| /*---------------------------------------------- | |
| --Checkboxes | |
| -----------------------------------------------*/ | |
| input[type="checkbox"] { | |
| -webkit-appearance: checkbox !important; | |
| margin-right: .75em !important; } | |
| input[type="checkbox"] + label { | |
| display: inline-block; | |
| margin-left: 0.3em; | |
| margin-right: 0.6rem; | |
| margin-bottom: 0; | |
| vertical-align: baseline; | |
| width: auto !important; | |
| display: inline !important; } | |
| input[type="file"], input[type="checkbox"] { | |
| margin: 0 0 0.75em 0; | |
| vertical-align: baseline; | |
| width: auto !important; | |
| display: inline !important; } | |
| /*---------------------------------------------- | |
| --upload | |
| -----------------------------------------------*/ | |
| .file-wrapper { | |
| cursor: pointer; | |
| display: table; | |
| overflow: hidden; | |
| position: relative; | |
| margin: 0 auto 1em; | |
| border: 2px solid; | |
| border-radius: 4px; | |
| box-shadow: -2px 3px 0px #FFF; | |
| padding: 4em 1em; | |
| text-align: center; | |
| background: rgba(255, 255, 255, 0.1); } | |
| .file-wrapper input { | |
| cursor: pointer; | |
| font-size: 100px; | |
| height: 100%; | |
| filter: alpha(opacity=1); | |
| -moz-opacity: 0.01; | |
| opacity: 0.01; | |
| position: absolute; | |
| right: 0; | |
| top: 0; } | |
| .file-wrapper .button { | |
| background: #79130e; | |
| -moz-border-radius: 5px; | |
| -webkit-border-radius: 5px; | |
| border-radius: 5px; | |
| color: #fff; | |
| cursor: pointer; | |
| display: inline-block; | |
| font-size: 11px; | |
| font-weight: bold; | |
| margin-right: 5px; | |
| padding: 4px 18px; | |
| text-transform: uppercase; } | |
| /*---------------------------------------------- | |
| --Form Layouts | |
| -----------------------------------------------*/ | |
| div.sect-form { | |
| max-width: 95%; | |
| margin: 0 auto; | |
| display: block; | |
| text-align: left; } | |
| @media only screen and (min-width: 54em) { | |
| div.sect-form { | |
| max-width: 60%; } } | |
| .sect-form input, .sect-form textarea { | |
| border-width: 1px; | |
| margin: 0 0 1.5em; } | |
| .sect-form input { | |
| padding: 1em .4em 0.85em; } | |
| .sect-form label { | |
| font-weight: 600; } | |
| ul.form-list { | |
| width: 100%; | |
| margin-left: 2%; } | |
| @media only screen and (min-width: 54em) { | |
| ul.form-list { | |
| width: 100%; | |
| margin-left: 10%; } } | |
| ul.form-list li { | |
| float: left; | |
| width: 45%; } | |
| @media only screen and (min-width: 54em) { | |
| ul.form-list li { | |
| width: 33%; } } | |
| @media only screen and (min-width: 72em) { | |
| ul.form-list li { | |
| width: 20%; } } | |
| .legal { | |
| font-size: 80%; | |
| line-height: 1; } | |
| .req { | |
| color: #c54b0f; } | |
| input, textarea { | |
| color: #999 !important; } | |
| ::-webkit-input-placeholder { | |
| color: #999; } | |
| :-moz-placeholder { | |
| /* Firefox 18- */ | |
| color: #999; } | |
| ::-moz-placeholder { | |
| /* Firefox 19+ */ | |
| color: #999; } | |
| :-ms-input-placeholder { | |
| color: #999; } | |
| /*---------------------------------------------- | |
| --Andrew's Chckbox Styles | |
| Requires a label structre | |
| -----------------------------------------------*/ | |
| /* Base for label styling */ | |
| [type="checkbox"]:not(:checked), | |
| [type="checkbox"]:checked { | |
| position: absolute; | |
| left: -9999px; } | |
| [type="checkbox"]:not(:checked) + label, | |
| [type="checkbox"]:checked + label { | |
| position: relative; | |
| padding-left: 1em; | |
| cursor: pointer; } | |
| /* Base for label styling */ | |
| [type="checkbox"]:not(:checked), | |
| [type="checkbox"]:checked { | |
| position: absolute; | |
| left: -9999px; } | |
| [type="checkbox"]:not(:checked) + label, | |
| [type="checkbox"]:checked + label { | |
| position: relative; | |
| padding-left: 1.4em; | |
| cursor: pointer; | |
| font-size: .85em; } | |
| /* checkbox aspect */ | |
| [type="checkbox"]:not(:checked) + label:before, | |
| [type="checkbox"]:checked + label:before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 1em; | |
| height: 1em; | |
| border: 1px solid #820063; | |
| background: #fff; | |
| border-radius: 3px; | |
| box-shadow: -1.5px 1.5px 0px #820063; } | |
| /* checked mark aspect */ | |
| [type="checkbox"]:not(:checked) + label:after, | |
| [type="checkbox"]:checked + label:after { | |
| content: '✔'; | |
| position: absolute; | |
| top: 0; | |
| left: 2px; | |
| font-size: .9em; | |
| color: #820063; | |
| transition: all .2s; } | |
| /* checked mark aspect changes */ | |
| [type="checkbox"]:not(:checked) + label:after { | |
| opacity: 0; | |
| transform: scale(0); } | |
| [type="checkbox"]:checked + label:after { | |
| opacity: 1; | |
| transform: scale(1); } | |
| /* disabled checkbox */ | |
| [type="checkbox"]:disabled:not(:checked) + label:before, | |
| [type="checkbox"]:disabled:checked + label:before { | |
| box-shadow: none; | |
| border-color: #bbb; | |
| background-color: #ddd; } | |
| [type="checkbox"]:disabled:checked + label:after { | |
| color: #999; } | |
| [type="checkbox"]:disabled + label { | |
| color: #aaa; } | |
| /* accessibility | |
| [type="checkbox"]:checked:focus + label:before, | |
| [type="checkbox"]:not(:checked):focus + label:before { | |
| border: 1px dotted $color-beta; } | |
| */ | |
| /*---------------------------------------------- | |
| --Tables | |
| ----------------------------------------------- */ | |
| table { | |
| max-width: 100%; | |
| background-color: white; | |
| border-collapse: collapse; | |
| border-spacing: 0; } | |
| .table { | |
| width: 100%; | |
| max-width: 100%; | |
| margin-bottom: 1.6; } | |
| .table th, | |
| .table td { | |
| padding: 0.5em; | |
| vertical-align: top; | |
| line-height: 1.6; | |
| text-align: left; | |
| border-top: 1px solid #f2f2f2; } | |
| .table th { | |
| font-weight: bold; } | |
| .table thead th { | |
| vertical-align: bottom; } | |
| .table colgroup + thead tr:first-child th, | |
| .table colgroup + thead tr:first-child td, | |
| .table thead:first-child tr:first-child th, | |
| .table thead:first-child tr:first-child td { | |
| border-top: 0; } | |
| .table tbody + tbody { | |
| border-top: 2px solid; } | |
| .table tbody tr:hover td, | |
| .table tbody tr:hover th { | |
| background-color: #f87292; | |
| -webkit-transitio: background-color 0.6s ease-in; | |
| -moz-transition: background-color 0.6s ease-in; | |
| -ms-transition: background-color 0.6s ease-in; | |
| -o-transition: background-color 0.6s ease-in; | |
| transition: background-color 0.6s ease-in; } | |
| table.striped tr:nth-child(2n+2) { | |
| background-color: #f2f2f2; | |
| -webkit-transitio: background-color 0.6s ease-in; | |
| -moz-transition: background-color 0.6s ease-in; | |
| -ms-transition: background-color 0.6s ease-in; | |
| -o-transition: background-color 0.6s ease-in; | |
| transition: background-color 0.6s ease-in; } | |
| /*---------------------------------------------- | |
| --Buttons | |
| ----------------------------------------------- */ | |
| .btn, .button, button { | |
| color: white; | |
| background-color: #f5426c; | |
| font-family: "Gotham SSm A", "Gotham SSm B", gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| text-align: center; | |
| text-transform: uppercase; | |
| display: inline-block; | |
| margin: .1em 0 1em; | |
| padding: 0.5em 1.5em 0.45em; | |
| text-decoration: none; | |
| width: auto; | |
| font-size: 90%; | |
| line-height: 1.6; | |
| -webkit-border-radius: 4px; | |
| -ms-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| -o-border-radius: 4px; | |
| border-radius: 4px; | |
| -webkit-transitio: all 0.25s ease-in; | |
| -moz-transition: all 0.25s ease-in; | |
| -ms-transition: all 0.25s ease-in; | |
| -o-transition: all 0.25s ease-in; | |
| transition: all 0.25s ease-in; | |
| /*---------------------------------------------- | |
| --Btn Colors | |
| ----------------------------------------------- */ | |
| /*---------------------------------------------- | |
| --Button Sizes | |
| ----------------------------------------------- */ | |
| /*---------------------------------------------- | |
| --Almost Flat Button | |
| ----------------------------------------------- */ } | |
| .btn:hover, .button:hover, button:hover { | |
| background-color: #f87292; | |
| color: white; | |
| -webkit-transitio: all 0.25s ease-in; | |
| -moz-transition: all 0.25s ease-in; | |
| -ms-transition: all 0.25s ease-in; | |
| -o-transition: all 0.25s ease-in; | |
| transition: all 0.25s ease-in; | |
| box-shadow: none; | |
| cursor: pointer; } | |
| .btn:active, .button:active, button:active { | |
| background-color: #f5426c; | |
| box-shadow: 0 !important; | |
| position: relative; | |
| top: 2px; | |
| -webkit-transitio: background-color 0.2s linear; | |
| -moz-transition: background-color 0.2s linear; | |
| -ms-transition: background-color 0.2s linear; | |
| -o-transition: background-color 0.2s linear; | |
| transition: background-color 0.2s linear; | |
| -webkit-box-shadow: none; | |
| -ms-box-shadow: none; | |
| -moz-box-shadow: none; | |
| -o-box-shadow: none; | |
| box-shadow: none; } | |
| .btn.btn-alpha, .button.btn-alpha, button.btn-alpha { | |
| background-color: #f5426c; } | |
| .btn.btn-alpha:hover, .button.btn-alpha:hover, button.btn-alpha:hover { | |
| background-color: #f87292; } | |
| .btn.btn-alpha:active, .button.btn-alpha:active, button.btn-alpha:active { | |
| background-color: #f42a59; } | |
| .btn.btn-beta, .button.btn-beta, button.btn-beta { | |
| background-color: #820063; } | |
| .btn.btn-beta:hover, .button.btn-beta:hover, button.btn-beta:hover { | |
| background-color: #b5008a; } | |
| .btn.btn-beta:active, .button.btn-beta:active, button.btn-beta:active { | |
| background-color: #690050; } | |
| .btn.btn-alert, .button.btn-alert, button.btn-alert { | |
| background-color: #e74c3c; } | |
| .btn.btn-alert:hover, .button.btn-alert:hover, button.btn-alert:hover { | |
| background-color: #e74c3c; } | |
| .btn.btn-alert:active, .button.btn-alert:active, button.btn-alert:active { | |
| background-color: #e43725; } | |
| .btn.btn-grey, .button.btn-grey, button.btn-grey { | |
| background-color: #cdcdcd; | |
| color: rgba(0, 0, 0, 0.9); } | |
| .btn.btn-grey:hover, .button.btn-grey:hover, button.btn-grey:hover { | |
| background-color: #f5426c; } | |
| .btn.btn-grey:active, .button.btn-grey:active, button.btn-grey:active { | |
| background-color: #e43725; } | |
| .btn.btn-large, .button.btn-large, button.btn-large { | |
| font-size: 107%; | |
| padding: 0.4em 2.75em; } | |
| .btn.btn-med, .button.btn-med, button.btn-med { | |
| font-size: 90%; } | |
| .btn.btn-small, .button.btn-small, button.btn-small { | |
| font-size: 80%; } | |
| .btn.btn-full, .button.btn-full, button.btn-full { | |
| width: 100%; } | |
| .btn.btn-block, .button.btn-block, button.btn-block { | |
| min-width: 12em; } | |
| .btn.btn-radius, .button.btn-radius, button.btn-radius { | |
| border-radius: 2em; | |
| background: #fff; | |
| /*@include prefix(box-shadow, -3px 3px 0px 0px #F5426C);*/ } | |
| .btn.btn-radius, .button.btn-radius, button.btn-radius { | |
| background: #fff; | |
| border: 3px solid #f5426c; | |
| color: #f5426c; | |
| display: inline-block; | |
| /*@include prefix(box-shadow, -3px 3px 0px 0px #F5426C);*/ } | |
| .btn.btn-alpha, .button.btn-alpha, button.btn-alpha { | |
| border-color: #f5426c; | |
| color: #f5426c; } | |
| .btn.btn-alpha:hover, .button.btn-alpha:hover, button.btn-alpha:hover { | |
| border-color: #f5426c !important; | |
| background: #f5426c !important; | |
| color: rgba(255, 255, 255, 0.75) !important; | |
| box-shadow: none !important; } | |
| .btn.btn-beta, .button.btn-beta, button.btn-beta { | |
| border-color: #820063; | |
| color: #820063; | |
| /*@include prefix(box-shadow, -3px 3px 0px 0px $color-beta);*/ } | |
| .btn.btn-beta:hover, .button.btn-beta:hover, button.btn-beta:hover { | |
| color: #fff !important; | |
| border-color: #820063; | |
| background-color: #820063; } | |
| .btn.btn-white, .button.btn-white, button.btn-white { | |
| border-color: white; | |
| color: #f5426c; | |
| font-size: 90%; | |
| font-weight: 600; | |
| box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); } | |
| .btn.btn-white:hover, .button.btn-white:hover, button.btn-white:hover { | |
| border-color: #f5426c; | |
| background: #f5426c; | |
| color: rgba(255, 255, 255, 0.75); } | |
| .btn.btn-clear, .button.btn-clear, button.btn-clear { | |
| border-color: #fff; | |
| background: transparent; | |
| color: #fff; } | |
| .btn.btn-clear:hover, .button.btn-clear:hover, button.btn-clear:hover { | |
| border-color: #fff; | |
| background: #fff; | |
| color: #f5426c; } | |
| .btn.btn-clear:active, .button.btn-clear:active, button.btn-clear:active { | |
| border-color: #f21246; | |
| background: #f21246; | |
| color: rgba(255, 255, 255, 0.75); } | |
| nav .btn { | |
| font-size: .6em; | |
| padding: .45em 1em .3em; | |
| font-weight: 600; } | |
| .box { | |
| background: white; | |
| padding: 0 0 1em; | |
| line-height: 1.5; | |
| -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); | |
| -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); | |
| -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); | |
| -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } | |
| .box h3, .box h4 { | |
| margin: .8em 0 .5em; | |
| line-height: 1.4; } | |
| .box p { | |
| font-size: 85%; | |
| margin: 0; } | |
| .box .meta { | |
| font-size: 75%; | |
| padding: .4em 0 .1em; } | |
| .box img { | |
| width: 100%; | |
| margin: 0 auto; | |
| display: block; } | |
| .box .box-inner { | |
| padding: 0em 1em .5em; | |
| clear: right; } | |
| .box .box-inner-2 { | |
| padding: 0em 1.5em .5em; | |
| clear: right; } | |
| .box.stacked { | |
| border-top: 1px solid #cdcdcd; | |
| box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 0 -1px white, 0 4px 1px 0px rgba(0, 0, 0, 0.19), 0 8px 0 -2px white, 0 8px 2px -1px rgba(0, 0, 0, 0.17); } | |
| /*------------------------------------------------ | |
| Section Titles | |
| ------------------------------------------------ */ | |
| .sect-title { | |
| text-align: center; | |
| margin-bottom: 2em; } | |
| .sect-title h2 { | |
| text-align: center; | |
| margin: 0.25em 0 0.1em; | |
| text-transform: uppercase; | |
| font-weight: 600; | |
| color: #FFF; | |
| text-shadow: -3px 2px 0 rgba(130, 0, 99, 0.2); } | |
| .sect-title.title-light { | |
| text-align: center; | |
| margin-bottom: 2em; } | |
| .sect-title.title-light h2 { | |
| text-align: center; | |
| margin: 0.25em 0 0.1em; | |
| text-transform: uppercase; | |
| font-weight: 600; | |
| color: #820063; | |
| text-shadow: -3px 2px 0 rgba(130, 0, 99, 0.2); } | |
| /* | |
| Target All | |
| [class*="fade-in-"]{} | |
| */ | |
| /*---------------------------------------------- | |
| --Fade Images | |
| ----------------------------------------------- */ | |
| .fade-img, | |
| #logo { | |
| opacity: 1; | |
| -webkit-transitio: opacity 3s ease-out; | |
| -moz-transition: opacity 3s ease-out; | |
| -ms-transition: opacity 3s ease-out; | |
| -o-transition: opacity 3s ease-out; | |
| transition: opacity 3s ease-out; } | |
| .fade-img:hover, | |
| #logo:hover { | |
| opacity: .5; | |
| -webkit-transitio: opacity 3s ease-out; | |
| -moz-transition: opacity 3s ease-out; | |
| -ms-transition: opacity 3s ease-out; | |
| -o-transition: opacity 3s ease-out; | |
| transition: opacity 3s ease-out; } | |
| /*---------------------------------------------- | |
| --Hovers | |
| ----------------------------------------------- */ | |
| header nav ul > li img:hover, | |
| .list-social li img:hover, | |
| .list-icons li span:hover { | |
| -webkit-animation: heartbeat 1.5s 0 4 both; | |
| -moz-animation: heartbeat 1.5s 0 4 both; | |
| -o-animation: heartbeat 1.5s 0 4 both; | |
| animation: heartbeat 1.5s 0 4 both; | |
| backface-visibility: hidden; | |
| -webkit-font-smoothing: subpixel-antialiased; } | |
| /*---------------------------------------------- | |
| --fade in | |
| ----------------------------------------------- */ | |
| .fade-in { | |
| -webkit-animation: fade-in 2.75s ease-in both; | |
| -moz-animation: fade-in 2.75s ease-in both; | |
| -o-animation: fade-in 2.75s ease-in both; | |
| animation: fade-in 2.75s ease-in both; | |
| -webkit-backface-visibility: hidden; | |
| -webkit-transform: translateZ(3d); | |
| -moz-transform: translateZ(3d); | |
| -ms-transform: translateZ(3d); | |
| -o-transform: translateZ(3d); | |
| transform: translateZ(3d); } | |
| .fade-in-2 { | |
| -webkit-animation: fade-in 2s ease-in both; | |
| -moz-animation: fade-in 2s ease-in both; | |
| -o-animation: fade-in 2s ease-in both; | |
| animation: fade-in 2s ease-in both; | |
| -webkit-backface-visibility: hidden; | |
| -webkit-transform: translateZ(3d); | |
| -moz-transform: translateZ(3d); | |
| -ms-transform: translateZ(3d); | |
| -o-transform: translateZ(3d); | |
| transform: translateZ(3d); } | |
| .fade-in-3 { | |
| -webkit-animation: fade-in 3s ease both; | |
| -moz-animation: fade-in 3s ease both; | |
| -o-animation: fade-in 3s ease both; | |
| animation: fade-in 3s ease both; | |
| -webkit-backface-visibility: hidden; | |
| -webkit-transform: translateZ(3d); | |
| -moz-transform: translateZ(3d); | |
| -ms-transform: translateZ(3d); | |
| -o-transform: translateZ(3d); | |
| transform: translateZ(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 up | |
| ----------------------------------------------- */ | |
| .fade-up { | |
| -webkit-animation: fade-up 1s .4s ease-out both; | |
| -moz-animation: fade-up 1s .4s ease-out both; | |
| -o-animation: fade-up 1s .4s ease-out both; | |
| animation: fade-up 1s .4s ease-out both; | |
| visibility: visible; | |
| -webkit-backface-visibility: hidden; | |
| -webkit-transform: translateZ(3d); | |
| -moz-transform: translateZ(3d); | |
| -ms-transform: translateZ(3d); | |
| -o-transform: translateZ(3d); | |
| transform: translateZ(3d); } | |
| @-webkit-keyframes fade-up { | |
| 0% { | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| -webkit-transform: translateY(50%); } | |
| 100% { | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| -webkit-transform: translateY(0); } } | |
| @-moz-keyframes fade-up { | |
| 0% { | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| -webkit-transform: translateY(50%); } | |
| 100% { | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| -webkit-transform: translateY(0); } } | |
| @-o-keyframes fade-up { | |
| 0% { | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| -webkit-transform: translateY(50%); } | |
| 100% { | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| -webkit-transform: translateY(0); } } | |
| @keyframes fade-up { | |
| 0% { | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| -webkit-transform: translateY(50%); } | |
| 100% { | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| -webkit-transform: translateY(0); } } | |
| /*---------------------------------------------- | |
| --move up | |
| ----------------------------------------------- */ | |
| .move-up { | |
| -webkit-animation: heartbeat 1.5s 0 4 both; | |
| -moz-animation: heartbeat 1.5s 0 4 both; | |
| -o-animation: heartbeat 1.5s 0 4 both; | |
| animation: heartbeat 1.5s 0 4 both; | |
| visibility: visible; | |
| -webkit-backface-visibility: hidden; | |
| -webkit-transform: translateZ(0); } | |
| @-webkit-keyframes move-up { | |
| from { | |
| bottom: -10%; } | |
| to { | |
| bottom: 0; } } | |
| @-moz-keyframes move-up { | |
| from { | |
| bottom: -10%; } | |
| to { | |
| bottom: 0; } } | |
| @-o-keyframes move-up { | |
| from { | |
| bottom: -10%; } | |
| to { | |
| bottom: 0; } } | |
| @keyframes move-up { | |
| from { | |
| bottom: -10%; } | |
| to { | |
| bottom: 0; } } | |
| .move-down, js-open { | |
| -webkit-animation: move-down 1.5s 0 both; | |
| -moz-animation: move-down 1.5s 0 both; | |
| -o-animation: move-down 1.5s 0 both; | |
| animation: move-down 1.5s 0 both; | |
| visibility: visible; | |
| -webkit-backface-visibility: hidden; | |
| -webkit-transform: translateZ(0); } | |
| @-webkit-keyframes move-down { | |
| from { | |
| top: -200px; } | |
| to { | |
| top: 0; } } | |
| @-moz-keyframes move-down { | |
| from { | |
| top: -200px; } | |
| to { | |
| top: 0; } } | |
| @-o-keyframes move-down { | |
| from { | |
| top: -200px; } | |
| to { | |
| top: 0; } } | |
| @keyframes move-down { | |
| from { | |
| top: -200px; } | |
| to { | |
| top: 0; } } | |
| /*---------------------------------------------- | |
| --Fade Right | |
| ----------------------------------------------- */ | |
| .fade-right { | |
| -webkit-animation: fade-right ease-in 1.1s .5s 1 both; | |
| -moz-animation: fade-right ease-in 1.1s .5s 1 both; | |
| -o-animation: fade-right ease-in 1.1s .5s 1 both; | |
| animation: fade-right ease-in 1.1s .5s 1 both; | |
| visibility: visible; | |
| -webkit-backface-visibility: hidden; | |
| -webkit-transform: translateZ(3d); | |
| -moz-transform: translateZ(3d); | |
| -ms-transform: translateZ(3d); | |
| -o-transform: translateZ(3d); | |
| transform: translateZ(3d); } | |
| @-webkit-keyframes fade-right { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateX(-400px); } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: translateX(0); } } | |
| @-moz-keyframes fade-right { | |
| 0% { | |
| opacity: 0; | |
| -moz-transform: translateX(-400px); } | |
| 100% { | |
| opacity: 1; | |
| -moz-transform: translateX(0); } } | |
| @-o-keyframes fade-right { | |
| 0% { | |
| opacity: 0; | |
| -o-transform: translateX(-400px); } | |
| 100% { | |
| opacity: 1; | |
| -o-transform: translateX(0); } } | |
| @keyframes fade-right { | |
| 0% { | |
| opacity: 0; | |
| transform: translateX(-400px); } | |
| 100% { | |
| opacity: 1; | |
| transform: translateX(0); } } | |
| /*---------------------------------------------- | |
| --Fade Left | |
| ----------------------------------------------- */ | |
| .fade-left { | |
| -webkit-animation: fade-left ease-in 1.1s both; | |
| -moz-animation: fade-left ease-in 1.1s both; | |
| -o-animation: fade-left ease-in 1.1s both; | |
| animation: fade-left ease-in 1.1s both; | |
| visibility: visible; | |
| -webkit-backface-visibility: hidden; | |
| -webkit-transform: translateZ(3d); | |
| -moz-transform: translateZ(3d); | |
| -ms-transform: translateZ(3d); | |
| -o-transform: translateZ(3d); | |
| transform: translateZ(3d); } | |
| @-webkit-keyframes fade-left { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateX(400px); } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: translateX(0); } } | |
| @-moz-keyframes fade-left { | |
| 0% { | |
| opacity: 0; | |
| -moz-transform: translateX(400px); } | |
| 100% { | |
| opacity: 1; | |
| -moz-transform: translateX(0); } } | |
| @-o-keyframes fade-left { | |
| 0% { | |
| opacity: 0; | |
| -o-transform: translateX(400px); } | |
| 100% { | |
| opacity: 1; | |
| -o-transform: translateX(0); } } | |
| @keyframes fade-left { | |
| 0% { | |
| opacity: 0; | |
| transform: translateX(400px); } | |
| 100% { | |
| opacity: 1; | |
| transform: translateX(0); } } | |
| /*---------------------------------------------- | |
| --Heart Beat | |
| ----------------------------------------------- */ | |
| .heartbeat { | |
| -webkit-animation: heartbeat 1.5s 0 4 both; | |
| -moz-animation: heartbeat 1.5s 0 4 both; | |
| -o-animation: heartbeat 1.5s 0 4 both; | |
| animation: heartbeat 1.5s 0 4 both; | |
| visibility: visible; | |
| -webkit-backface-visibility: hidden; } | |
| @-webkit-keyframes heartbeat { | |
| 0% { | |
| -webkit-transform: scale(1); | |
| -moz-transform: scale(1); | |
| -ms-transform: scale(1); | |
| -o-transform: scale(1); | |
| transform: scale(1); } | |
| 50% { | |
| -webkit-transform: scale(1.4); | |
| -moz-transform: scale(1.4); | |
| -ms-transform: scale(1.4); | |
| -o-transform: scale(1.4); | |
| transform: scale(1.4); } } | |
| @-moz-keyframes heartbeat { | |
| 0% { | |
| -webkit-transform: scale(1); | |
| -moz-transform: scale(1); | |
| -ms-transform: scale(1); | |
| -o-transform: scale(1); | |
| transform: scale(1); } | |
| 50% { | |
| -webkit-transform: scale(1.4); | |
| -moz-transform: scale(1.4); | |
| -ms-transform: scale(1.4); | |
| -o-transform: scale(1.4); | |
| transform: scale(1.4); } } | |
| @-o-keyframes heartbeat { | |
| 0% { | |
| -webkit-transform: scale(1); | |
| -moz-transform: scale(1); | |
| -ms-transform: scale(1); | |
| -o-transform: scale(1); | |
| transform: scale(1); } | |
| 50% { | |
| -webkit-transform: scale(1.4); | |
| -moz-transform: scale(1.4); | |
| -ms-transform: scale(1.4); | |
| -o-transform: scale(1.4); | |
| transform: scale(1.4); } } | |
| @keyframes heartbeat { | |
| 0% { | |
| -webkit-transform: scale(1); | |
| -moz-transform: scale(1); | |
| -ms-transform: scale(1); | |
| -o-transform: scale(1); | |
| transform: scale(1); } | |
| 50% { | |
| -webkit-transform: scale(1.4); | |
| -moz-transform: scale(1.4); | |
| -ms-transform: scale(1.4); | |
| -o-transform: scale(1.4); | |
| transform: scale(1.4); } } | |
| /*---------------------------------------------- | |
| --Grow | |
| ----------------------------------------------- */ | |
| .grow { | |
| -webkit-animation: grow 1.5s 0 4 both; | |
| -moz-animation: grow 1.5s 0 4 both; | |
| -o-animation: grow 1.5s 0 4 both; | |
| animation: grow 1.5s 0 4 both; | |
| visibility: visible; | |
| -webkit-backface-visibility: hidden; } | |
| @-webkit-keyframes grow { | |
| 0% { | |
| 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); | |
| -moz-transform: scale(1); | |
| -ms-transform: scale(1); | |
| -o-transform: scale(1); | |
| transform: scale(1); } } | |
| @-moz-keyframes grow { | |
| 0% { | |
| 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); | |
| -moz-transform: scale(1); | |
| -ms-transform: scale(1); | |
| -o-transform: scale(1); | |
| transform: scale(1); } } | |
| @-o-keyframes grow { | |
| 0% { | |
| 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); | |
| -moz-transform: scale(1); | |
| -ms-transform: scale(1); | |
| -o-transform: scale(1); | |
| transform: scale(1); } } | |
| @keyframes grow { | |
| 0% { | |
| 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); | |
| -moz-transform: scale(1); | |
| -ms-transform: scale(1); | |
| -o-transform: scale(1); | |
| transform: scale(1); } } | |
| /*---------------------------------------------- | |
| Timings | |
| ----------------------------------------------- */ | |
| .delay1 { | |
| -webkit-animation-delay: 0.1s; | |
| -moz-animation-delay: 0.1s; | |
| animation-delay: 0.1s; } | |
| .delay2 { | |
| -webkit-animation-delay: 0.2s; | |
| -moz-animation-delay: 0.2s; | |
| animation-delay: 0.2s; } | |
| .delay3 { | |
| -webkit-animation-delay: 0.3s; | |
| -moz-animation-delay: 0.3s; | |
| animation-delay: 0.3s; } | |
| .delay4 { | |
| -webkit-animation-delay: 0.4s; | |
| -moz-animation-delay: 0.4s; | |
| animation-delay: 0.4s; } | |
| .delay5 { | |
| -webkit-animation-delay: 0.5s; | |
| -moz-animation-delay: 0.5s; | |
| animation-delay: 0.5s; } | |
| .delay6 { | |
| -webkit-animation-delay: 0.6s; | |
| -moz-animation-delay: 0.6s; | |
| animation-delay: 0.6s; } | |
| .delay1s { | |
| -webkit-animation-delay: 1s; | |
| -moz-animation-delay: 1s; | |
| animation-delay: 1s; } | |
| .delay1-2 { | |
| -webkit-animation-delay: 1.2s; | |
| -moz-animation-delay: 1.2s; | |
| animation-delay: 1.2s; } | |
| .delay1-5 { | |
| -webkit-animation-delay: 1.5s; | |
| -moz-animation-delay: 1.5s; | |
| animation-delay: 1.5s; } | |
| /*---------------------------------------------- | |
| --Scroll To Top | |
| ----------------------------------------------- */ | |
| .scroll_to_top { | |
| width: 3.5em; | |
| height: 3.5em; | |
| padding: .7em; | |
| line-height: 1; | |
| text-align: center; | |
| color: #fff !Important; | |
| background: #820063; | |
| text-shadow: -1px 1px 0px rgba(0, 0, 0, 0.1); | |
| text-decoration: none; | |
| position: fixed; | |
| z-index: 9999 !important; | |
| bottom: 75px; | |
| right: 40px; | |
| border-radius: 100%; | |
| display: none; } | |
| @media (max-width: 32em) { | |
| .scroll_to_top { | |
| display: none !important; } } | |
| /*---------------------------------------------- | |
| --Animations for Slider. | |
| TODO: Clean up and remove unused. | |
| ----------------------------------------------- */ | |
| .flex-active-slide .effect, .tada { | |
| -webkit-animation-duration: 1s; | |
| animation-duration: 1s; | |
| -webkit-animation-fill-mode: both; | |
| animation-fill-mode: both; } | |
| .flex-active-slide .effect.hinge { | |
| -webkit-animation-duration: 2s; | |
| animation-duration: 2s; } | |
| @-webkit-keyframes bounce { | |
| 0%,100%,20%,50%,80% { | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); } | |
| 40% { | |
| -webkit-transform: translateY(-30px); | |
| transform: translateY(-30px); } | |
| 60% { | |
| -webkit-transform: translateY(-15px); | |
| transform: translateY(-15px); } } | |
| @keyframes bounce { | |
| 0%,100%,20%,50%,80% { | |
| -webkit-transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| transform: translateY(0); } | |
| 40% { | |
| -webkit-transform: translateY(-30px); | |
| -ms-transform: translateY(-30px); | |
| transform: translateY(-30px); } | |
| 60% { | |
| -webkit-transform: translateY(-15px); | |
| -ms-transform: translateY(-15px); | |
| transform: translateY(-15px); } } | |
| .flex-active-slide .bounce { | |
| -webkit-animation-name: bounce; | |
| animation-name: bounce; } | |
| @-webkit-keyframes flash { | |
| 0%,100%,50% { | |
| opacity: 1; } | |
| 25%,75% { | |
| opacity: 0; } } | |
| @keyframes flash { | |
| 0%,100%,50% { | |
| opacity: 1; } | |
| 25%,75% { | |
| opacity: 0; } } | |
| .flex-active-slide .flash { | |
| -webkit-animation-name: flash; | |
| animation-name: flash; } | |
| @-webkit-keyframes pulse { | |
| 0% { | |
| -webkit-transform: scale(1); | |
| transform: scale(1); } | |
| 50% { | |
| -webkit-transform: scale(1.1); | |
| transform: scale(1.1); } | |
| 100% { | |
| -webkit-transform: scale(1); | |
| transform: scale(1); } } | |
| @keyframes pulse { | |
| 0% { | |
| -webkit-transform: scale(1); | |
| -ms-transform: scale(1); | |
| transform: scale(1); } | |
| 50% { | |
| -webkit-transform: scale(1.1); | |
| -ms-transform: scale(1.1); | |
| transform: scale(1.1); } | |
| 100% { | |
| -webkit-transform: scale(1); | |
| -ms-transform: scale(1); | |
| transform: scale(1); } } | |
| .flex-active-slide .pulse { | |
| -webkit-animation-name: pulse; | |
| animation-name: pulse; } | |
| @-webkit-keyframes rubberBand { | |
| 0% { | |
| -webkit-transform: scale(1); | |
| transform: scale(1); } | |
| 30% { | |
| -webkit-transform: scaleX(1.25) scaleY(0.75); | |
| transform: scaleX(1.25) scaleY(0.75); } | |
| 40% { | |
| -webkit-transform: scaleX(0.75) scaleY(1.25); | |
| transform: scaleX(0.75) scaleY(1.25); } | |
| 60% { | |
| -webkit-transform: scaleX(1.15) scaleY(0.85); | |
| transform: scaleX(1.15) scaleY(0.85); } | |
| 100% { | |
| -webkit-transform: scale(1); | |
| transform: scale(1); } } | |
| @keyframes rubberBand { | |
| 0% { | |
| -webkit-transform: scale(1); | |
| -ms-transform: scale(1); | |
| transform: scale(1); } | |
| 30% { | |
| -webkit-transform: scaleX(1.25) scaleY(0.75); | |
| -ms-transform: scaleX(1.25) scaleY(0.75); | |
| transform: scaleX(1.25) scaleY(0.75); } | |
| 40% { | |
| -webkit-transform: scaleX(0.75) scaleY(1.25); | |
| -ms-transform: scaleX(0.75) scaleY(1.25); | |
| transform: scaleX(0.75) scaleY(1.25); } | |
| 60% { | |
| -webkit-transform: scaleX(1.15) scaleY(0.85); | |
| -ms-transform: scaleX(1.15) scaleY(0.85); | |
| transform: scaleX(1.15) scaleY(0.85); } | |
| 100% { | |
| -webkit-transform: scale(1); | |
| -ms-transform: scale(1); | |
| transform: scale(1); } } | |
| .flex-active-slide .rubberBand { | |
| -webkit-animation-name: rubberBand; | |
| animation-name: rubberBand; } | |
| @-webkit-keyframes shake { | |
| 0%,100% { | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); } | |
| 10%,30%,50%,70%,90% { | |
| -webkit-transform: translateX(-10px); | |
| transform: translateX(-10px); } | |
| 20%,40%,60%,80% { | |
| -webkit-transform: translateX(10px); | |
| transform: translateX(10px); } } | |
| @keyframes shake { | |
| 0%,100% { | |
| -webkit-transform: translateX(0); | |
| -ms-transform: translateX(0); | |
| transform: translateX(0); } | |
| 10%,30%,50%,70%,90% { | |
| -webkit-transform: translateX(-10px); | |
| -ms-transform: translateX(-10px); | |
| transform: translateX(-10px); } | |
| 20%,40%,60%,80% { | |
| -webkit-transform: translateX(10px); | |
| -ms-transform: translateX(10px); | |
| transform: translateX(10px); } } | |
| .flex-active-slide .shake { | |
| -webkit-animation-name: shake; | |
| animation-name: shake; } | |
| @-webkit-keyframes swing { | |
| 20% { | |
| -webkit-transform: rotate(15deg); | |
| transform: rotate(15deg); } | |
| 40% { | |
| -webkit-transform: rotate(-10deg); | |
| transform: rotate(-10deg); } | |
| 60% { | |
| -webkit-transform: rotate(5deg); | |
| transform: rotate(5deg); } | |
| 80% { | |
| -webkit-transform: rotate(-5deg); | |
| transform: rotate(-5deg); } | |
| 100% { | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); } } | |
| @keyframes swing { | |
| 20% { | |
| -webkit-transform: rotate(15deg); | |
| -ms-transform: rotate(15deg); | |
| transform: rotate(15deg); } | |
| 40% { | |
| -webkit-transform: rotate(-10deg); | |
| -ms-transform: rotate(-10deg); | |
| transform: rotate(-10deg); } | |
| 60% { | |
| -webkit-transform: rotate(5deg); | |
| -ms-transform: rotate(5deg); | |
| transform: rotate(5deg); } | |
| 80% { | |
| -webkit-transform: rotate(-5deg); | |
| -ms-transform: rotate(-5deg); | |
| transform: rotate(-5deg); } | |
| 100% { | |
| -webkit-transform: rotate(0deg); | |
| -ms-transform: rotate(0deg); | |
| transform: rotate(0deg); } } | |
| .flex-active-slide .swing { | |
| -webkit-transform-origin: top center; | |
| -ms-transform-origin: top center; | |
| transform-origin: top center; | |
| -webkit-animation-name: swing; | |
| animation-name: swing; } | |
| @-webkit-keyframes tada { | |
| 0% { | |
| -webkit-transform: scale(1); | |
| transform: scale(1); } | |
| 10%,20% { | |
| -webkit-transform: scale(0.9) rotate(-3deg); | |
| transform: scale(0.9) rotate(-3deg); } | |
| 30%,50%,70%,90% { | |
| -webkit-transform: scale(1.1) rotate(3deg); | |
| transform: scale(1.1) rotate(3deg); } | |
| 40%,60%,80% { | |
| -webkit-transform: scale(1.1) rotate(-3deg); | |
| transform: scale(1.1) rotate(-3deg); } | |
| 100% { | |
| -webkit-transform: scale(1) rotate(0); | |
| transform: scale(1) rotate(0); } } | |
| @keyframes tada { | |
| 0% { | |
| -webkit-transform: scale(1); | |
| -ms-transform: scale(1); | |
| transform: scale(1); } | |
| 10%,20% { | |
| -webkit-transform: scale(0.9) rotate(-3deg); | |
| -ms-transform: scale(0.9) rotate(-3deg); | |
| transform: scale(0.9) rotate(-3deg); } | |
| 30%,50%,70%,90% { | |
| -webkit-transform: scale(1.1) rotate(3deg); | |
| -ms-transform: scale(1.1) rotate(3deg); | |
| transform: scale(1.1) rotate(3deg); } | |
| 40%,60%,80% { | |
| -webkit-transform: scale(1.1) rotate(-3deg); | |
| -ms-transform: scale(1.1) rotate(-3deg); | |
| transform: scale(1.1) rotate(-3deg); } | |
| 100% { | |
| -webkit-transform: scale(1) rotate(0); | |
| -ms-transform: scale(1) rotate(0); | |
| transform: scale(1) rotate(0); } } | |
| .flex-active-slide .tada, .tada { | |
| -webkit-animation-name: tada; | |
| animation-name: tada; } | |
| @-webkit-keyframes wobble { | |
| 0% { | |
| -webkit-transform: translateX(0%); | |
| transform: translateX(0%); } | |
| 15% { | |
| -webkit-transform: translateX(-25%) rotate(-5deg); | |
| transform: translateX(-25%) rotate(-5deg); } | |
| 30% { | |
| -webkit-transform: translateX(20%) rotate(3deg); | |
| transform: translateX(20%) rotate(3deg); } | |
| 45% { | |
| -webkit-transform: translateX(-15%) rotate(-3deg); | |
| transform: translateX(-15%) rotate(-3deg); } | |
| 60% { | |
| -webkit-transform: translateX(10%) rotate(2deg); | |
| transform: translateX(10%) rotate(2deg); } | |
| 75% { | |
| -webkit-transform: translateX(-5%) rotate(-1deg); | |
| transform: translateX(-5%) rotate(-1deg); } | |
| 100% { | |
| -webkit-transform: translateX(0%); | |
| transform: translateX(0%); } } | |
| @keyframes wobble { | |
| 0% { | |
| -webkit-transform: translateX(0%); | |
| -ms-transform: translateX(0%); | |
| transform: translateX(0%); } | |
| 15% { | |
| -webkit-transform: translateX(-25%) rotate(-5deg); | |
| -ms-transform: translateX(-25%) rotate(-5deg); | |
| transform: translateX(-25%) rotate(-5deg); } | |
| 30% { | |
| -webkit-transform: translateX(20%) rotate(3deg); | |
| -ms-transform: translateX(20%) rotate(3deg); | |
| transform: translateX(20%) rotate(3deg); } | |
| 45% { | |
| -webkit-transform: translateX(-15%) rotate(-3deg); | |
| -ms-transform: translateX(-15%) rotate(-3deg); | |
| transform: translateX(-15%) rotate(-3deg); } | |
| 60% { | |
| -webkit-transform: translateX(10%) rotate(2deg); | |
| -ms-transform: translateX(10%) rotate(2deg); | |
| transform: translateX(10%) rotate(2deg); } | |
| 75% { | |
| -webkit-transform: translateX(-5%) rotate(-1deg); | |
| -ms-transform: translateX(-5%) rotate(-1deg); | |
| transform: translateX(-5%) rotate(-1deg); } | |
| 100% { | |
| -webkit-transform: translateX(0%); | |
| -ms-transform: translateX(0%); | |
| transform: translateX(0%); } } | |
| .flex-active-slide .wobble { | |
| -webkit-animation-name: wobble; | |
| animation-name: wobble; } | |
| @-webkit-keyframes bounceIn { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: scale(0.3); | |
| transform: scale(0.3); } | |
| 50% { | |
| opacity: 1; | |
| -webkit-transform: scale(1.05); | |
| transform: scale(1.05); } | |
| 70% { | |
| -webkit-transform: scale(0.9); | |
| transform: scale(0.9); } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: scale(1); | |
| transform: scale(1); } } | |
| @keyframes bounceIn { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: scale(0.3); | |
| -ms-transform: scale(0.3); | |
| transform: scale(0.3); } | |
| 50% { | |
| opacity: 1; | |
| -webkit-transform: scale(1.05); | |
| -ms-transform: scale(1.05); | |
| transform: scale(1.05); } | |
| 70% { | |
| -webkit-transform: scale(0.9); | |
| -ms-transform: scale(0.9); | |
| transform: scale(0.9); } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: scale(1); | |
| -ms-transform: scale(1); | |
| transform: scale(1); } } | |
| .flex-active-slide .bounceIn { | |
| -webkit-animation-name: bounceIn; | |
| animation-name: bounceIn; } | |
| @-webkit-keyframes bounceInDown { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateY(-2000px); | |
| transform: translateY(-2000px); } | |
| 60% { | |
| opacity: 1; | |
| -webkit-transform: translateY(30px); | |
| transform: translateY(30px); } | |
| 80% { | |
| -webkit-transform: translateY(-10px); | |
| transform: translateY(-10px); } | |
| 100% { | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); } } | |
| @keyframes bounceInDown { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateY(-2000px); | |
| -ms-transform: translateY(-2000px); | |
| transform: translateY(-2000px); } | |
| 60% { | |
| opacity: 1; | |
| -webkit-transform: translateY(30px); | |
| -ms-transform: translateY(30px); | |
| transform: translateY(30px); } | |
| 80% { | |
| -webkit-transform: translateY(-10px); | |
| -ms-transform: translateY(-10px); | |
| transform: translateY(-10px); } | |
| 100% { | |
| -webkit-transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| transform: translateY(0); } } | |
| .flex-active-slide .bounceInDown { | |
| -webkit-animation-name: bounceInDown; | |
| animation-name: bounceInDown; } | |
| @-webkit-keyframes bounceInLeft { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateX(-2000px); | |
| transform: translateX(-2000px); } | |
| 60% { | |
| opacity: 1; | |
| -webkit-transform: translateX(30px); | |
| transform: translateX(30px); } | |
| 80% { | |
| -webkit-transform: translateX(-10px); | |
| transform: translateX(-10px); } | |
| 100% { | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); } } | |
| @keyframes bounceInLeft { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateX(-2000px); | |
| -ms-transform: translateX(-2000px); | |
| transform: translateX(-2000px); } | |
| 60% { | |
| opacity: 1; | |
| -webkit-transform: translateX(30px); | |
| -ms-transform: translateX(30px); | |
| transform: translateX(30px); } | |
| 80% { | |
| -webkit-transform: translateX(-10px); | |
| -ms-transform: translateX(-10px); | |
| transform: translateX(-10px); } | |
| 100% { | |
| -webkit-transform: translateX(0); | |
| -ms-transform: translateX(0); | |
| transform: translateX(0); } } | |
| .flex-active-slide .bounceInLeft { | |
| -webkit-animation-name: bounceInLeft; | |
| animation-name: bounceInLeft; } | |
| @-webkit-keyframes bounceInRight { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateX(2000px); | |
| transform: translateX(2000px); } | |
| 60% { | |
| opacity: 1; | |
| -webkit-transform: translateX(-30px); | |
| transform: translateX(-30px); } | |
| 80% { | |
| -webkit-transform: translateX(10px); | |
| transform: translateX(10px); } | |
| 100% { | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); } } | |
| @keyframes bounceInRight { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateX(2000px); | |
| -ms-transform: translateX(2000px); | |
| transform: translateX(2000px); } | |
| 60% { | |
| opacity: 1; | |
| -webkit-transform: translateX(-30px); | |
| -ms-transform: translateX(-30px); | |
| transform: translateX(-30px); } | |
| 80% { | |
| -webkit-transform: translateX(10px); | |
| -ms-transform: translateX(10px); | |
| transform: translateX(10px); } | |
| 100% { | |
| -webkit-transform: translateX(0); | |
| -ms-transform: translateX(0); | |
| transform: translateX(0); } } | |
| .flex-active-slide .bounceInRight { | |
| -webkit-animation-name: bounceInRight; | |
| animation-name: bounceInRight; } | |
| @-webkit-keyframes bounceInUp { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateY(2000px); | |
| transform: translateY(2000px); } | |
| 60% { | |
| opacity: 1; | |
| -webkit-transform: translateY(-30px); | |
| transform: translateY(-30px); } | |
| 80% { | |
| -webkit-transform: translateY(10px); | |
| transform: translateY(10px); } | |
| 100% { | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); } } | |
| @keyframes bounceInUp { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateY(2000px); | |
| -ms-transform: translateY(2000px); | |
| transform: translateY(2000px); } | |
| 60% { | |
| opacity: 1; | |
| -webkit-transform: translateY(-30px); | |
| -ms-transform: translateY(-30px); | |
| transform: translateY(-30px); } | |
| 80% { | |
| -webkit-transform: translateY(10px); | |
| -ms-transform: translateY(10px); | |
| transform: translateY(10px); } | |
| 100% { | |
| -webkit-transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| transform: translateY(0); } } | |
| .flex-active-slide .fadeIn { | |
| -webkit-animation-name: fadeIn; | |
| animation-name: fadeIn; } | |
| @-webkit-keyframes fadeInDown { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateY(-20px); | |
| transform: translateY(-20px); } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); } } | |
| @keyframes fadeInDown { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateY(-20px); | |
| -ms-transform: translateY(-20px); | |
| transform: translateY(-20px); } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| transform: translateY(0); } } | |
| .flex-active-slide .fadeInDown { | |
| -webkit-animation-name: fadeInDown; | |
| animation-name: fadeInDown; } | |
| @-webkit-keyframes fadeInDownBig { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateY(-2000px); | |
| transform: translateY(-2000px); } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); } } | |
| @keyframes fadeInDownBig { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateY(-2000px); | |
| -ms-transform: translateY(-2000px); | |
| transform: translateY(-2000px); } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| transform: translateY(0); } } | |
| .flex-active-slide .fadeInDownBig { | |
| -webkit-animation-name: fadeInDownBig; | |
| animation-name: fadeInDownBig; } | |
| @-webkit-keyframes fadeInLeft { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateX(-20px); | |
| transform: translateX(-20px); } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); } } | |
| @keyframes fadeInLeft { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateX(-20px); | |
| -ms-transform: translateX(-20px); | |
| transform: translateX(-20px); } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: translateX(0); | |
| -ms-transform: translateX(0); | |
| transform: translateX(0); } } | |
| .flex-active-slide .fadeInLeft, .fadeInLeft { | |
| -webkit-animation-name: fadeInLeft; | |
| animation-name: fadeInLeft; } | |
| @-webkit-keyframes fadeInLeftBig { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateX(-2000px); | |
| transform: translateX(-2000px); } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); } } | |
| @keyframes fadeInLeftBig { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateX(-2000px); | |
| -ms-transform: translateX(-2000px); | |
| transform: translateX(-2000px); } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: translateX(0); | |
| -ms-transform: translateX(0); | |
| transform: translateX(0); } } | |
| .flex-active-slide .fadeInLeftBig { | |
| -webkit-animation-name: fadeInLeftBig; | |
| animation-name: fadeInLeftBig; } | |
| @-webkit-keyframes fadeInRight { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateX(20px); | |
| transform: translateX(20px); } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); } } | |
| @keyframes fadeInRight { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateX(20px); | |
| -ms-transform: translateX(20px); | |
| transform: translateX(20px); } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: translateX(0); | |
| -ms-transform: translateX(0); | |
| transform: translateX(0); } } | |
| .flex-active-slide .fadeInRight { | |
| -webkit-animation-name: fadeInRight; | |
| animation-name: fadeInRight; } | |
| @-webkit-keyframes fadeInRightBig { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateX(2000px); | |
| transform: translateX(2000px); } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); } } | |
| @keyframes fadeInRightBig { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateX(2000px); | |
| -ms-transform: translateX(2000px); | |
| transform: translateX(2000px); } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: translateX(0); | |
| -ms-transform: translateX(0); | |
| transform: translateX(0); } } | |
| .flex-active-slide .fadeInRightBig { | |
| -webkit-animation-name: fadeInRightBig; | |
| animation-name: fadeInRightBig; } | |
| @-webkit-keyframes fadeInUp { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateY(20px); | |
| transform: translateY(20px); } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); } } | |
| @keyframes fadeInUp { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateY(20px); | |
| -ms-transform: translateY(20px); | |
| transform: translateY(20px); } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| transform: translateY(0); } } | |
| .flex-active-slide .fadeInUp { | |
| -webkit-animation-name: fadeInUp; | |
| animation-name: fadeInUp; } | |
| @-webkit-keyframes fadeInUpBig { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateY(2000px); | |
| transform: translateY(2000px); } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); } } | |
| @keyframes fadeInUpBig { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: translateY(2000px); | |
| -ms-transform: translateY(2000px); | |
| transform: translateY(2000px); } | |
| 100% { | |
| opacity: 1; | |
| -webkit-transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| transform: translateY(0); } } | |
| .flex-active-slide .fadeInUpBig { | |
| -webkit-animation-name: fadeInUpBig; | |
| animation-name: fadeInUpBig; } | |
| @-webkit-keyframes rotateIn { | |
| 0% { | |
| -webkit-transform-origin: center center; | |
| transform-origin: center center; | |
| -webkit-transform: rotate(-200deg); | |
| transform: rotate(-200deg); | |
| opacity: 0; } | |
| 100% { | |
| -webkit-transform-origin: center center; | |
| transform-origin: center center; | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| opacity: 1; } } | |
| @keyframes rotateIn { | |
| 0% { | |
| -webkit-transform-origin: center center; | |
| -ms-transform-origin: center center; | |
| transform-origin: center center; | |
| -webkit-transform: rotate(-200deg); | |
| -ms-transform: rotate(-200deg); | |
| transform: rotate(-200deg); | |
| opacity: 0; } | |
| 100% { | |
| -webkit-transform-origin: center center; | |
| -ms-transform-origin: center center; | |
| transform-origin: center center; | |
| -webkit-transform: rotate(0); | |
| -ms-transform: rotate(0); | |
| transform: rotate(0); | |
| opacity: 1; } } | |
| .flex-active-slide .rotateIn { | |
| -webkit-animation-name: rotateIn; | |
| animation-name: rotateIn; } | |
| @-webkit-keyframes rotateInDownLeft { | |
| 0% { | |
| -webkit-transform-origin: left bottom; | |
| transform-origin: left bottom; | |
| -webkit-transform: rotate(-90deg); | |
| transform: rotate(-90deg); | |
| opacity: 0; } | |
| 100% { | |
| -webkit-transform-origin: left bottom; | |
| transform-origin: left bottom; | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| opacity: 1; } } | |
| @keyframes rotateInDownLeft { | |
| 0% { | |
| -webkit-transform-origin: left bottom; | |
| -ms-transform-origin: left bottom; | |
| transform-origin: left bottom; | |
| -webkit-transform: rotate(-90deg); | |
| -ms-transform: rotate(-90deg); | |
| transform: rotate(-90deg); | |
| opacity: 0; } | |
| 100% { | |
| -webkit-transform-origin: left bottom; | |
| -ms-transform-origin: left bottom; | |
| transform-origin: left bottom; | |
| -webkit-transform: rotate(0); | |
| -ms-transform: rotate(0); | |
| transform: rotate(0); | |
| opacity: 1; } } | |
| /*---------------------------------------------- | |
| --Flex Slider | |
| ----------------------------------------------- */ | |
| .flexslider { | |
| margin: 0; | |
| padding: 0; } | |
| .flexslider .slides > li { | |
| display: none; | |
| -webkit-backface-visibility: hidden; } | |
| /* Hide the slides before the JS is loaded. Avoids image jumping */ | |
| .flexslider .slides img { | |
| width: 100%; | |
| display: block; } | |
| .flex-control-thumbs img { | |
| cursor: pointer; } | |
| .flex-pauseplay span { | |
| text-transform: capitalize; } | |
| /* Clearfix for the .slides element */ | |
| .slides:after { | |
| content: "\0020"; | |
| display: block; | |
| clear: both; | |
| visibility: hidden; | |
| line-height: 0; | |
| height: 0; } | |
| html[xmlns] .slides { | |
| display: block; } | |
| * html .slides { | |
| height: 1%; } | |
| /* No JavaScript Fallback */ | |
| /* If you are not using another script, such as Modernizr, make sure you | |
| * include js that eliminates this class on page load */ | |
| .no-js .slides > li:first-child { | |
| display: block; } | |
| /* FlexSlider Default Theme | |
| *********************************/ | |
| .flexslider { | |
| overflow: hidden; | |
| position: relative; | |
| z-index: 2; } | |
| .flex-viewport { | |
| max-height: 2000px; | |
| -webkit-transition: all 1s ease; | |
| -moz-transition: all 1s ease; | |
| -o-transition: all 1s ease; | |
| transition: all 1s ease; } | |
| .loading .flex-viewport { | |
| max-height: 300px; } | |
| /*---------------------------------------------- | |
| --Slider Global | |
| ----------------------------------------------- */ | |
| .flexslider .slides { | |
| zoom: 1; } | |
| .flexslider ul { | |
| margin: 0; | |
| padding: 0; } | |
| control-nav { | |
| margin: 1em 0 0; } | |
| .flex-direction-nav { | |
| display: none; } | |
| ol.flex-control-nav.flex-control-paging { | |
| display: block; | |
| margin: 0 auto; | |
| text-align: center; } | |
| .flex-control-nav li { | |
| display: inline; | |
| margin: 0 7px; } | |
| .flex-control-nav li a { | |
| background: #820063; | |
| display: inline-block; | |
| overflow: hidden; | |
| width: 10px; | |
| height: 0; | |
| padding-top: 10px; | |
| text-align: center; | |
| -webkit-border-radius: 300px; | |
| border-radius: 300px; | |
| -moz-background-clip: padding; | |
| -webkit-background-clip: padding-box; | |
| background-clip: padding-box; } | |
| .flex-control-nav li:hover a, .flex-control-nav li a.flex-active { | |
| background-color: #293F67; } | |
| ul.slides.bg-grey { | |
| background: #E4E4E4; } | |
| /*---------------------------------------------- | |
| --Testimonial Slider | |
| ----------------------------------------------- */ | |
| .testimonial-slider { | |
| padding: 2em 0; | |
| max-width: 100%; } | |
| @media (min-width: 54em) { | |
| .testimonial-slider { | |
| max-width: 75%; | |
| margin: 0 auto; } } | |
| .testimonial-slider img { | |
| max-width: 16em; | |
| margin: 0 auto; } | |
| .flex-control-paging li:hover { | |
| cursor: pointer; } | |
| /*---------------------------------------------- | |
| --Slides | |
| ----------------------------------------------- */ | |
| #sect-slider-alt .flexslider { | |
| max-height: 22em; } | |
| @media (min-width: 54em) { | |
| #sect-slider-alt .flexslider { | |
| max-height: 18em; } } | |
| .flexslider .container { | |
| position: relative; | |
| max-height: 22em; } | |
| @media (min-width: 54em) { | |
| .flexslider .container { | |
| max-height: 15em; } } | |
| /*---------------------------------------------- | |
| --Slide1 | |
| ----------------------------------------------- */ | |
| .slide1 .slider-spoons { | |
| position: absolute; | |
| z-index: 30; | |
| left: 0; | |
| top: 17em; | |
| width: 68%; | |
| text-transform: uppercase; | |
| font-weight: 900; | |
| color: #2C3E50; } | |
| .slide1 div.slider-spoon-top { | |
| position: absolute; | |
| width: 149%; | |
| left: -7em; } | |
| @media (min-width: 54em) { | |
| .slide1 div.slider-spoon-top { | |
| width: 75%; | |
| left: -10em; } } | |
| .slide1 div.slider-spoon-bottom { | |
| position: absolute; | |
| width: 149%; | |
| left: -1em; | |
| bottom: -22em; } | |
| @media (min-width: 54em) { | |
| .slide1 div.slider-spoon-bottom { | |
| width: 70%; | |
| left: 6em; | |
| bottom: -19em; } } | |
| @media (min-width: 72em) { | |
| .slide1 div.slider-spoon-bottom { | |
| left: 7em; } } | |
| .slide1 div.bg-circle { | |
| position: absolute; | |
| text-align: center; | |
| background: #FFF; | |
| border-radius: 100%; | |
| height: 15em; | |
| width: 15em; | |
| padding: 4em 1em; | |
| border: 11px solid #DDD; | |
| left: 50%; | |
| margin-left: -7em; | |
| top: 4em; } | |
| @media (min-width: 54em) { | |
| .slide1 div.bg-circle { | |
| left: 33em; | |
| margin-left: 0; | |
| top: 1em; } } | |
| .slide1 .caption-title p { | |
| color: #25C9D2; | |
| font-size: 1.1em; | |
| font-weight: 600; | |
| margin: 0; | |
| padding: 0; } | |
| .slide1 .caption-body p { | |
| font-size: 80%; } | |
| .slide1 a { | |
| position: relative; | |
| top: -.8em; | |
| text-transform: uppercase; | |
| font-size: .8em; | |
| font-weight: 600; } | |
| .slide1 img.icon-player { | |
| float: right; | |
| position: relative; | |
| top: .3em; | |
| right: 3.2em; | |
| max-width: 1.3em; } | |
| /*---------------------------------------------- | |
| --Slide2 | |
| ----------------------------------------------- */ | |
| .slide2 .left { | |
| width: 100%; | |
| float: none; } | |
| @media (min-width: 54em) { | |
| .slide2 .left { | |
| width: 50%; | |
| float: left; | |
| margin-top: 1em; } } | |
| .slide2 .right { | |
| width: 100%; | |
| float: none; } | |
| @media (min-width: 54em) { | |
| .slide2 .right { | |
| width: 50%; | |
| float: right; } } | |
| .slide2 .slider-left-bucket { | |
| max-width: 18em; | |
| position: relative; | |
| top: 2em; | |
| left: 5em; | |
| z-index: 3; | |
| display: none; } | |
| @media (min-width: 54em) { | |
| .slide2 .slider-left-bucket { | |
| display: block; } } | |
| .slide2 .slide2-caption-title { | |
| font-size: 1.4em; | |
| position: relative; | |
| top: 0.3em; | |
| color: #25C9D2 !important; | |
| font-weight: 600; | |
| z-index: 7; | |
| text-align: center; } | |
| @media (min-width: 54em) { | |
| .slide2 .slide2-caption-title { | |
| top: 0.5em; } } | |
| .slide2 .slide2-caption-title p { | |
| color: #25C9D2 !important; } | |
| .slide2 .slide2-caption-body { | |
| font-size: 80%; | |
| position: relative; | |
| top: -1em; | |
| z-index: 7; | |
| text-align: center; } | |
| @media (min-width: 54em) { | |
| .slide2 .slide2-caption-body { | |
| top: 0em; } } | |
| .slide2 .slider-right-vid { | |
| position: relative; | |
| max-width: 34em; | |
| right: 0em; | |
| top: -1em; | |
| z-index: 3; } | |
| @media (min-width: 54em) { | |
| .slide2 .slider-right-vid { | |
| right: 0; | |
| top: 0; } } | |
| /*---------------------------------------------- | |
| --Slide3 | |
| ----------------------------------------------- */ | |
| .slide3 { | |
| height: 31em; | |
| background-image: url(../images/FeatureSlider_Eggs.jpg); | |
| background-repeat: repeat-x; | |
| background-size: 100%; | |
| background-position: 50% 0; | |
| background-color: #999; } | |
| .slide3 h5 { | |
| color: #fff; } | |
| @media (min-width: 54em) { | |
| .slide3 h5 { | |
| font-size: 1.2em; } } | |
| .slide3 .slide3-caption-copy { | |
| position: relative; | |
| top: 1em; | |
| top: 7em; | |
| color: #fff; } | |
| @media (min-width: 54em) { | |
| .slide3 .slide3-caption-copy { | |
| top: 1em; } } | |
| li .slide3-caption-copy p { | |
| color: #FFF !important; | |
| width: 100%; | |
| font-size: 81%; } | |
| @media (min-width: 54em) { | |
| li .slide3-caption-copy p { | |
| width: 49%; | |
| float: left; | |
| padding-right: 1em; } } | |
| .slide3-caption-copy p:last-child { | |
| display: none; } | |
| @media (min-width: 54em) { | |
| .slide3-caption-copy p:last-child { | |
| display: block; } } | |
| /*---------------------------------------------- | |
| --Slider Nav | |
| ----------------------------------------------- */ | |
| .js-flex-nav li.flex-active a { | |
| color: #25c9d2; } | |
| .js-flex-nav li.flex-active { | |
| position: relative; | |
| color: #FFF; } | |
| .js-flex-nav li.flex-active::after { | |
| content: ""; | |
| position: absolute; | |
| right: 46%; | |
| bottom: -15px; | |
| border-style: solid; | |
| border-color: #213b6e rgba(0, 0, 0, 0); | |
| display: block; | |
| width: 0; | |
| border-left: 15px solid rgba(0, 0, 0, 0); | |
| border-right: 14px solid rgba(0, 0, 0, 0); | |
| border-top: 15px solid #fff; | |
| border-bottom: 0; } | |
| .slider-navbar { | |
| background: #FFF; | |
| padding: 1.3em 0 0; | |
| position: relative; | |
| z-index: 8; } | |
| .slider-navbar a { | |
| text-transform: uppercase; | |
| font-size: 70%; | |
| font-weight: 600; } | |
| .flex-control-nav li a:hover { | |
| opacity: 0.6; } | |
| .flex-control-nav li a.flex-active { | |
| box-shadow: 0 0 0 10px #e74c3c inset; | |
| cursor: default; } | |
| .flex-control-nav li a.flex-active:hover { | |
| opacity: 1; } | |
| /*--------------------------------------------------- | |
| ToolTips | |
| ===================================================== */ | |
| .has-tip, .icon-question-circle { | |
| font-weight: 400 !important; | |
| color: white; } | |
| .has-tip:hover, .icon-question-circle:hover { | |
| color: rgba(255, 255, 255, 0.4); } | |
| .tooltip { | |
| display: none; | |
| background: rgba(255, 255, 255, 0.8); | |
| position: absolute; | |
| color: #333; | |
| font-size: 1rem; | |
| padding: .75em; | |
| z-index: 999; | |
| box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); | |
| -webkit-border-radiuswebkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| border-radius: 4px; | |
| line-height: 1.5; | |
| max-width: 35% !important; } | |
| .tooltip > .nub { | |
| display: block; | |
| width: 0; | |
| height: 0; | |
| border: solid 5px; | |
| border-color: transparent transparent #fff transparent; | |
| border-color: transparent transparent rgba(255, 255, 255, 0.8) transparent; | |
| position: absolute; | |
| top: -10px; | |
| left: 10px; } | |
| .tooltip.tip-top > .nub { | |
| border-color: black transparent transparent transparent; | |
| border-color: rgba(255, 255, 255, 0.8) transparent transparent transparent; | |
| top: auto; | |
| bottom: -10px; } | |
| .tooltip.tip-left, .tooltip.tip-right { | |
| float: none !important; } | |
| .tooltip.tip-right > .nub { | |
| border-color: transparent #fff transparent transparent; | |
| border-color: transparent rgba(255, 255, 255, 0.8) transparent transparent; | |
| right: auto; | |
| left: -10px; } | |
| .tooltip.opened { | |
| color: #0192dd !important; | |
| border-bottom: dotted 1px #0593dc !important; } | |
| /*--------------------------------------------------- | |
| Modals -adds iframe reveal from scripts.js | |
| ===================================================== */ | |
| #modalbox { | |
| display: none; | |
| position: fixed; | |
| z-index: 999999999; | |
| width: 70%; | |
| padding: 20px; | |
| background: rgba(255, 255, 255, 0.8); | |
| border-radius: 5px; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| z-index: 99; } | |
| #overlay { | |
| opacity: 0.6; | |
| filter: alpha(opacity=0); | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| z-index: 8; | |
| width: 100%; | |
| height: 100%; | |
| background: #000; } | |
| #js-close { | |
| line-height: 1; | |
| font-size: 14px; | |
| position: absolute; | |
| top: 1px; | |
| right: 2px; | |
| color: #F00; | |
| text-decoration: none; | |
| z-index: 9999; | |
| font-size: 1.1em; } | |
| /**** Isotope Filtering ****/ | |
| .item { | |
| margin: 5px; | |
| text-align: center; | |
| display: inline-block; | |
| color: white; | |
| font-weight: bold; | |
| font-family: sans-serif; } | |
| .item { | |
| z-index: 2; } | |
| @media (min-width: 32em) { | |
| .item { | |
| width: 48%; } } | |
| @media (min-width: 54em) { | |
| .item { | |
| width: 32%; } } | |
| @media (min-width: 72em) { | |
| .item { | |
| width: 24%; } } | |
| .isotope-item { | |
| z-index: 2; | |
| overflow: hidden; } | |
| .isotope-hidden.isotope-item { | |
| pointer-events: none; | |
| z-index: 1; } | |
| /**** Isotope CSS3 transitions ****/ | |
| .isotope, | |
| .isotope .isotope-item { | |
| -webkit-transition-duration: 0.8s; | |
| -moz-transition-duration: 0.8s; | |
| -ms-transition-duration: 0.8s; | |
| -o-transition-duration: 0.8s; | |
| transition-duration: 0.8s; } | |
| .isotope { | |
| -webkit-transition-property: height, width; | |
| -moz-transition-property: height, width; | |
| -ms-transition-property: height, width; | |
| -o-transition-property: height, width; | |
| transition-property: height, width; } | |
| .isotope .isotope-item { | |
| -webkit-transition-property: -webkit-transform, opacity; | |
| -moz-transition-property: -moz-transform, opacity; | |
| -ms-transition-property: -ms-transform, opacity; | |
| -o-transition-property: -o-transform, opacity; | |
| transition-property: transform, opacity; } | |
| /**** disabling Isotope CSS3 transitions ****/ | |
| .isotope.no-transition, | |
| .isotope.no-transition .isotope-item, | |
| .isotope .isotope-item.no-transition { | |
| -webkit-transition-duration: 0s; | |
| -moz-transition-duration: 0s; | |
| -ms-transition-duration: 0s; | |
| -o-transition-duration: 0s; | |
| transition-duration: 0s; } | |
| /*----------------------------------------------- | |
| Iso | |
| ----------------------------------------------- */ | |
| .item img { | |
| display: table; | |
| overflow: hidden; | |
| outline: 1px solid transparent; } | |
| .item a { | |
| color: #fff; } | |
| .item a:hover { | |
| color: #f5426c; } | |
| .urbycaption { | |
| background-color: rgba(0, 0, 0, 0.6); | |
| color: #fff; | |
| font-size: .8em; | |
| text-align: left; | |
| position: absolute; | |
| width: 100%; | |
| height: 8.5em; | |
| left: 0; | |
| bottom: -9em; | |
| padding: .75em; } | |
| .urby-captitle, a.urby-caption { | |
| color: #FFF; | |
| font-size: 1em; | |
| font-weight: 600; } | |
| .urby-subtitle { | |
| color: #fff; | |
| font-size: 1em; | |
| font-weight: 400; } | |
| .urbycaption ul li.left.icon-filt { | |
| padding-right: .25em; | |
| font-weight: 600; } | |
| .urbycaption ul li.right { | |
| margin-top: -0.25em; } | |
| a.js-count { | |
| font-size: 1.1em; | |
| padding-left: .5em; } | |
| .urbycaption ul li span.icon-thumbs-up.right { | |
| font-size: 1.1em; | |
| margin-top: .1em; | |
| float: left; } | |
| /*---------------------------------------------- | |
| --Mobile Nav | |
| ----------------------------------------------- */ | |
| .menu-btn { | |
| color: #820063; | |
| z-index: 9999999; | |
| position: fixed; | |
| font-size: 1.6em; | |
| right: 0.5em; | |
| top: .5em; | |
| display: block; | |
| cursor: pointer; | |
| -webkit-transitio: background 0.3s ease-in-out; | |
| -moz-transition: background 0.3s ease-in-out; | |
| -ms-transition: background 0.3s ease-in-out; | |
| -o-transition: background 0.3s ease-in-out; | |
| transition: background 0.3s ease-in-out; } | |
| @media (min-width: 54em) { | |
| .menu-btn { | |
| display: none; } } | |
| .menu-btn:hover { | |
| color: #f5426c; | |
| -webkit-transitio: background 0.3s ease-in-out; | |
| -moz-transition: background 0.3s ease-in-out; | |
| -ms-transition: background 0.3s ease-in-out; | |
| -o-transition: background 0.3s ease-in-out; | |
| transition: background 0.3s ease-in-out; } | |
| .mobilenav { | |
| background: #000; | |
| font-size: 0.9em; | |
| font-weight: 600; | |
| position: fixed; | |
| z-index: 99999; | |
| width: 200px; | |
| height: 100% !important; | |
| top: 0; | |
| right: 0; } | |
| .mobilenav ul { | |
| padding: 0; | |
| margin: 0; } | |
| .mobilenav ul li { | |
| list-style: none; | |
| padding: 0; } | |
| .mobilenav a { | |
| display: block; | |
| color: #f5426c; | |
| padding: 1.3em 1em; | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.1); | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| text-decoration: none; } | |
| .mobilenav a:hover { | |
| background-color: #f5426c; | |
| color: rgba(255, 255, 255, 0.8); | |
| cursor: pointer; } | |
| /* Menu Movement */ | |
| .mobilenav, #content-slide { | |
| -webkit-transitio: -webkit-transform 0.3s ease-in-out; | |
| -moz-transition: -webkit-transform 0.3s ease-in-out; | |
| -ms-transition: -webkit-transform 0.3s ease-in-out; | |
| -o-transition: -webkit-transform 0.3s ease-in-out; | |
| transition: -webkit-transform 0.3s ease-in-out; } | |
| .mobilenav-right { | |
| -webkit-transform: translate3d(200px, 0, 0); | |
| -moz-transform: translate3d(200px, 0, 0); | |
| -o-transform: translate3d(200px, 0, 0); | |
| transform: translate3d(200px, 0, 0); } | |
| .container-push { | |
| -webkit-transform: translate3d(-200px, 0, 0); | |
| -moz-transform: translate3d(-200px, 0, 0); | |
| -o-transform: translate3d(-200px, 0, 0); | |
| transform: translate3d(-200px, 0, 0); } | |
| .CanvasNav-open { | |
| -webkit-transform: translate3d(0, 0, 0); | |
| -moz-transform: translate3d(0, 0, 0); | |
| -o-transform: translate3d(0, 0, 0); | |
| transform: translate3d(0, 0, 0); } | |
| /* Site Overlay - to click anywhere and close*/ | |
| .site-overlay { | |
| display: none; } | |
| .CanvasNav-active .site-overlay { | |
| display: block; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 200px; | |
| z-index: 9999; | |
| /*@include transition(background, 1.3s, ease-in-out);*/ } | |
| .closenav { | |
| text-align: right; | |
| position: fixed; | |
| right: 0; } | |
| .closenav:hover { | |
| background: none !important; } | |
| /*---------------------------------------------- | |
| --Header + Nav | |
| ----------------------------------------------- */ | |
| header { | |
| position: fixed; | |
| width: 100%; | |
| background: #fff; | |
| border-bottom: 3px solid #25c9d2; | |
| box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.3); | |
| display: block; | |
| z-index: 9; } | |
| header > * { | |
| padding: 0 0.5em; | |
| margin: 0; } | |
| header .row { | |
| width: 100%; } | |
| header h1#logo { | |
| font-size: 1em; | |
| max-width: 13em; | |
| display: inline-block; | |
| vertical-align: middle; | |
| float: left; | |
| padding-top: 0.3em; } | |
| @media (min-width: 54em) { | |
| header h1#logo { | |
| max-width: 16em; } } | |
| header nav { | |
| text-align: center; | |
| display: none; } | |
| @media (max-width: 32em) { | |
| header nav { | |
| padding-top: 2em; | |
| margin-top: 2em; | |
| line-height: 2; } } | |
| @media (min-width: 54em) { | |
| header nav { | |
| float: right; | |
| display: inline-block; | |
| padding: .5em 0 0; | |
| text-align: right; } } | |
| header nav ul { | |
| display: inline; | |
| padding-left: .5em; } | |
| header nav ul > li { | |
| position: relative; | |
| display: inline-block; | |
| padding: 0; | |
| vertical-align: middle; } | |
| @media (max-width: 54em) { | |
| header nav ul > li { | |
| font-size: 1.2em; | |
| padding-bottom: .5em; } } | |
| header nav ul > li img { | |
| max-width: 2em; } | |
| header nav ul > li label { | |
| font-size: 60%; | |
| color: #820063; | |
| font-weight: 600; | |
| margin: 0; | |
| text-align: left; | |
| display: block; | |
| line-height: 1; } | |
| header nav ul > li input#search { | |
| font-size: 60%; | |
| max-width: 80%; } | |
| header nav ul > li .icon-search.right { | |
| position: relative; | |
| top: -1.6em; | |
| right: -0.3em; } | |
| header nav ul > li a { | |
| font-family: "Gotham SSm A", "Gotham SSm B", gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| display: block; | |
| color: #fff; | |
| font-size: .75em; | |
| color: #820063; } | |
| header nav ul > li a:hover, header nav ul > li a:active { | |
| color: #f5426c; } | |
| header nav ul > li a.btn.btn-radius:hover { | |
| background: #f5426c; | |
| color: #fff !important; | |
| box-shadow: none; } | |
| /* Creates Turqoise Line */ | |
| header:after { | |
| content: ''; | |
| border-bottom: solid 3px #fff; | |
| box-shadow: 0px 3px 5px #444; | |
| width: 100%; | |
| position: absolute; | |
| bottom: -6px; | |
| left: 0; | |
| box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); } | |
| .js-open { | |
| display: block !important; | |
| animation: slide-down 1s ease; | |
| animation: slide-down 1s ease; | |
| transition: all 1s ease; } | |
| /*---------------------------------------------- | |
| --Footer | |
| ----------------------------------------------- */ | |
| footer { | |
| background: #25c9d2; | |
| padding: 2em 0; } | |
| footer nav ul { | |
| padding: 0; } | |
| footer nav ul > li { | |
| display: inline-block; | |
| padding-right: 1.25em; | |
| font-size: 80%; | |
| text-transform: uppercase; | |
| font-weight: 600; } | |
| footer nav ul > li a { | |
| color: #fff; } | |
| @media only screen and (min-width: 32em) { | |
| footer .list-icons { | |
| text-align: right; } } | |
| footer .list-icons li { | |
| padding-right: 1%; | |
| padding-left: 0; } | |
| footer .list-icons li img { | |
| max-width: 2em; } | |
| /*---------------------------------------------- | |
| --Global Fixed Nav offset | |
| ----------------------------------------------- */ | |
| main { | |
| padding-top: 4em; | |
| background: #fff; } | |
| section * { | |
| z-index: 3; } | |
| .stay-on-top { | |
| position: relative; | |
| z-index: 9; | |
| background: #fff; } | |
| /*---------------------------------------------- | |
| --Banners - sections with full width background images | |
| ----------------------------------------------- */ | |
| .sect-banner { | |
| position: relative; | |
| -webkit-background-size: cover; | |
| -moz-background-size: cover; | |
| -o-background-size: cover; | |
| background-size: cover; | |
| color: white; | |
| overflow: hidden; | |
| padding: 15% 0; } | |
| @media (min-width: 54em) { | |
| .sect-banner { | |
| padding: 7% 0; } } | |
| .sect-banner h1, .sect-banner h2, .sect-banner h3 { | |
| line-height: 1; } | |
| .sect-banner .center-all { | |
| padding-left: 5%; | |
| padding-right: 5%; } | |
| @media (min-width: 54em) { | |
| .sect-banner .center-all { | |
| padding-left: 12%; | |
| padding-right: 12%; } } | |
| .sect-banner p { | |
| font-size: 110%; } | |
| @media (min-width: 54em) { | |
| .sect-banner p { | |
| font-size: 125%; } } | |
| /*---------------------------------------------- | |
| --Content - Sections | |
| ----------------------------------------------- */ | |
| .sect-content { | |
| padding: 2em 0; } | |
| .sect-content p { | |
| margin: .5em 0 0; } | |
| .sect-intro { | |
| padding: 1em 0 3.5em; } | |
| .sect-intro h4 { | |
| margin: -1em 0; } | |
| .sect-intro p { | |
| font-size: 105%; } | |
| @media (min-width: 54em) { | |
| .sect-intro p { | |
| font-size: 115%; } } | |
| .sect-band { | |
| padding: 0.5em 0 3em; } | |
| /*---------------------------------------------- | |
| --Parallax - plugin and play oocss | |
| ----------------------------------------------- */ | |
| .js-parallax { | |
| background-repeat: no-repeat; | |
| background-attachment: scroll; } | |
| @media (max-width: 54em) { | |
| .js-parallax { | |
| background-position: top center !important; | |
| background-attachment: scroll !important; } } | |
| @media (min-width: 54em) { | |
| .js-parallax { | |
| background-attachment: fixed !important; } } | |
| /*---------------------------------------------- | |
| --Sect Heros | |
| ----------------------------------------------- */ | |
| #sect-hero { | |
| background-position: 50% 50%; | |
| background-repeat: no-repeat; | |
| background-attachment: fixed; | |
| background-position: top center; | |
| padding: 23% 0; | |
| background-size: 255%; } | |
| @media (min-width: 32em) { | |
| #sect-hero { | |
| padding: 15% 0; } } | |
| @media (min-width: 54em) { | |
| #sect-hero { | |
| padding: 11% 8%; | |
| max-height: auto !important; | |
| background-size: cover; } } | |
| #sect-hero p { | |
| font-size: 110%; } | |
| @media (min-width: 32em) { | |
| #sect-hero p { | |
| font-size: 140%; } } | |
| /*---------------------------------------------- | |
| --Hero | |
| ----------------------------------------------- */ | |
| .sect-hero { | |
| background-repeat: no-repeat; | |
| background-attachment: scroll; | |
| background-position: right -2em; | |
| background-color: #f2f2f2 !important; | |
| background-image: url(../images/hero/hero-bg-small.jpg); | |
| background-size: 155%; | |
| position: relative; | |
| z-index: 6; | |
| box-shadow: inset 0px -3px 0px #Fff, inset 0px -6px 0px #f2c907; | |
| backface-visibility: hidden; } | |
| @media (min-width: 54em) { | |
| .sect-hero { | |
| background: url(../images/[email protected]); | |
| background-attachment: scroll; | |
| background-position: 50% 50%; | |
| padding: 5% 0 0; | |
| background-size: 126%; } } | |
| .sect-hero .hero-intro { | |
| padding: 1em 0; } | |
| @media (min-width: 54em) { | |
| .sect-hero .hero-intro { | |
| padding: 0em 0 2em; } } | |
| .sect-hero h1 { | |
| font-size: 3.2em; | |
| line-height: .8; | |
| text-align: center; | |
| margin: 0.5em 0 0.1em; | |
| text-transform: uppercase; | |
| -webkit-text-stroke: .01px #820063; | |
| font-weight: 600; | |
| color: #FFF; | |
| text-shadow: -1px 1px 0 #820063, -2px 2px 0 #820063; } | |
| @media (min-width: 54em) { | |
| .sect-hero h1 { | |
| text-align: left; } } | |
| .sect-hero h1 span { | |
| font-size: 68%; } | |
| .sect-hero p { | |
| text-align: left; | |
| width: 45%; | |
| font-size: 1.2em; | |
| line-height: 1.3; } | |
| @media (min-width: 54em) { | |
| .sect-hero p { | |
| width: 90%; | |
| font-size: 1.05em; } } | |
| .sect-hero .panel { | |
| background: #e02735; | |
| width: 100%; | |
| text-align: center; | |
| padding: 1.2em 0 0; | |
| line-height: inherit; | |
| position: relative; | |
| z-index: 7; } | |
| @media (min-width: 54em) { | |
| .sect-hero .panel { | |
| max-width: 40%; | |
| padding: 1em 0 .24em; | |
| line-height: 2; | |
| border-top-left-radius: 10px; | |
| border-top-right-radius: 10px; } } | |
| .sect-hero .panel .panel:hover { | |
| background: #820063; | |
| -webkit-transitio: all 0.25s ease-in; | |
| -moz-transition: all 0.25s ease-in; | |
| -ms-transition: all 0.25s ease-in; | |
| -o-transition: all 0.25s ease-in; | |
| transition: all 0.25s ease-in; } | |
| .sect-hero .panel img { | |
| margin: 0 auto; | |
| padding: .4em 0 1em; } | |
| @media (max-width: 54em) { | |
| .sect-hero .panel br { | |
| display: none; } } | |
| .sect-hero .panel small { | |
| color: #fff; | |
| display: none; } | |
| @media (min-width: 54em) { | |
| .sect-hero .panel small { | |
| display: block; } } | |
| @media (max-width: 54em) { | |
| .sect-hero .panel .btn { | |
| padding: 0; | |
| border: none; | |
| font-size: 1.25em; | |
| font-weight: 600; } } | |
| @media (max-width: 54em) { | |
| .sect-hero .panel .btn:hover { | |
| background: transparent !important; | |
| border: none !important; | |
| padding: 0; | |
| color: #fff; } } | |
| .hero-small { | |
| display: block; } | |
| @media (min-width: 54em) { | |
| .hero-small { | |
| display: none; } } | |
| .hero-small .small-promo { | |
| padding: 1em 0 0; } | |
| .hero-small p { | |
| text-align: left; | |
| font-weight: 600; | |
| color: #f5426c; | |
| max-width: 70%; | |
| font-size: .65em; } | |
| .hero-small img { | |
| max-width: 80%; } | |
| .hero-small img.hero-play-small { | |
| width: 8em; | |
| float: right; | |
| padding: 1em; | |
| margin-top: -9.5em; } | |
| .hero-large { | |
| display: none; } | |
| @media (min-width: 54em) { | |
| .hero-large { | |
| display: block; } } | |
| img.hero-text-sweetspot { | |
| max-width: 85%; | |
| position: relative; | |
| z-index: 7; } | |
| @media (min-width: 54em) { | |
| img.hero-text-sweetspot { | |
| max-width: 44%; } } | |
| .hero-graphcs { | |
| position: absolute; | |
| max-height: 9em; | |
| z-index: 2; | |
| top: -11em; | |
| right: -6%; | |
| max-width: 27em; } | |
| @media (min-width: 72em) { | |
| .hero-graphcs { | |
| right: 9%; } } | |
| @media (min-width: 80em) { | |
| .hero-graphcs { | |
| right: 9%; } } | |
| .hero-graphcs img { | |
| position: relative; | |
| display: table; } | |
| .hero-graphcs .hero-milk { | |
| max-width: 10em; | |
| right: -21em; | |
| top: 19em; | |
| z-index: 5; } | |
| .hero-graphcs .hero-sugar { | |
| max-width: 10em; | |
| top: -1em; | |
| right: 13em; | |
| z-index: 5; } | |
| .hero-graphcs .hero-icecream { | |
| max-width: 10em; | |
| right: -19em; | |
| top: 8em; | |
| z-index: 5; } | |
| .hero-graphcs .hero-bowl { | |
| max-width: 30em; | |
| top: -18em; | |
| right: 6em; | |
| z-index: 4; } | |
| .hero-graphcs .hero-play { | |
| z-index: 9; | |
| top: 18em; | |
| right: 14.5em; | |
| max-width: 7em; | |
| position: absolute; } | |
| .hero-graphcs .hero-play:hover { | |
| -webkit-animation: heartbeat 1.5s 0 1 both; | |
| -moz-animation: heartbeat 1.5s 0 4 both; | |
| -o-animation: heartbeat 1.5s 0 4 both; | |
| animation: heartbeat 1.5s 0 1 both; | |
| backface-visibility: hidden; | |
| -webkit-font-smoothing: subpixel-antialiased; } | |
| @media (max-width: 54em) { | |
| .row.panel-container { | |
| width: 100%; } } | |
| #sect-altuses { | |
| box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4), 0px 1px 1px rgba(0, 0, 0, 0.4); | |
| border-top: 7px solid #35C0CC; | |
| position: relative; | |
| z-index: 7; | |
| margin-bottom: -2em; } | |
| #sect-altuses h4 { | |
| margin: 0; } | |
| /*---------------------------------------------- | |
| --Intro Statement | |
| ----------------------------------------------- */ | |
| #sect-intro-statement { | |
| background-image: url(../images/backgrounds/bg-stripes.png); | |
| background-color: #25c9d2; | |
| background-color: #25C9D2; | |
| position: relative; | |
| z-index: 5; } | |
| @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { | |
| #sect-intro-statement { | |
| background-image: url(../images/backgrounds/[email protected]); } } | |
| #sect-intro-statement ul.list-icons { | |
| margin: 6% auto; | |
| display: block; | |
| text-align: center; } | |
| #sect-intro-statement ul.list-icons :hover { | |
| animation: none; } | |
| #sect-intro-statement .list-icons li img { | |
| max-height: 5em; } | |
| @media (min-width: 54em) { | |
| #sect-intro-statement .list-icons li img { | |
| max-height: 6em; } } | |
| /*---------------------------------------------- | |
| --Alt Blocks | |
| ----------------------------------------------- */ | |
| #sect-doublefeature { | |
| position: relative; | |
| z-index: 7; } | |
| #sect-doublefeature .block-half > div { | |
| padding: 0 2em; | |
| color: #fff; } | |
| #sect-doublefeature .block-half * { | |
| color: #fff; } | |
| #sect-doublefeature .block-half img, | |
| #sect-doublefeature .block-half h3 { | |
| margin: 0; } | |
| #sect-doublefeature .block-needdrink { | |
| background-image: url(../images/backgrounds/double_feature_1.png); | |
| background-size: cover; | |
| background-repeat: no-repeat; } | |
| @media (min-width: 54em) { | |
| #sect-doublefeature .block-needdrink { | |
| border-top-right-radius: 100px; | |
| padding-left: 7em; } } | |
| #sect-doublefeature .block-feelvegan { | |
| background-image: url(../images/backgrounds/double_feature_2.png); | |
| background-size: cover; | |
| background-repeat: no-repeat; } | |
| @media (min-width: 54em) { | |
| #sect-doublefeature .block-feelvegan { | |
| border-top-left-radius: 100px; | |
| padding-right: 7em; } } | |
| /*---------------------------------------------- | |
| --sect-submit-win | |
| ----------------------------------------------- */ | |
| section#sect-submit-win { | |
| padding-top: 0; } | |
| #sect-submit-win img { | |
| padding-top: 1.75em; } | |
| #sect-submit-win h3 { | |
| text-align: center; } | |
| @media (min-width: 54em) { | |
| #sect-submit-win h3 { | |
| text-align: left; } } | |
| /*---------------------------------------------- | |
| --Insta Banner | |
| ----------------------------------------------- */ | |
| .sect-band#sect-insta-band { | |
| padding-top: 0; } | |
| #sect-insta-band { | |
| background: url(../images/backgrounds/background_instagram.jpg) repeat-x; | |
| color: #FFF; | |
| padding: 0; | |
| background-color: #f2f2f2; } | |
| #sect-insta-band img { | |
| max-width: 12em; | |
| margin: 0; | |
| padding: 1em 0 0; } | |
| #sect-insta-band h3 { | |
| margin: 0; } | |
| #sect-insta-band .insta-icon { | |
| display: none; } | |
| @media (min-width: 54em) { | |
| #sect-insta-band .insta-icon { | |
| display: block; | |
| margin: 2.5em auto; } } | |
| /*---------------------------------------------- | |
| --Product Family | |
| ----------------------------------------------- */ | |
| #sect-productfam { | |
| padding: 1em 0; } | |
| #sect-productfam .sect-title.title-light { | |
| margin-bottom: 0em; } | |
| #sect-productfam .cols, | |
| .product-fam cols { | |
| padding: 0 1.5em; } | |
| #sect-productfam article, | |
| article.product-fam, | |
| #sect-productfam article img, | |
| article.product-fam { | |
| padding: 2em 0; } | |
| #sect-productfam article ul li, | |
| article.product-fam ul li, | |
| #sect-productfam article a, | |
| article.product-fam article a, | |
| #sect-testimonials ul li, | |
| #sect-testimonials a { | |
| font-size: 85%; } | |
| @media (max-width: 32em) { | |
| #sect-testimonials ul li { | |
| width: 100%; } } | |
| #sect-testimonials img { | |
| max-width: 16em; } | |
| @media (max-width: 54em) { | |
| .testimonial-slider * { | |
| margin: 0 auto; | |
| text-align: center; } } | |
| article.product-fam { | |
| background-color: #f2f2f2; } | |
| article.product-fam:nth-child(even) { | |
| background-color: #f2f2f2; | |
| box-shadow: inset 0px -6px 0px #F2F2F2, inset 0px -11px 0px #FFF; } | |
| article.product-fam:nth-child(odd) { | |
| background-color: #fff; | |
| box-shadow: 0px 3px 5px #444; | |
| box-shadow: inset 0px -6px 0px #fff, inset 0px -11px 0px #f2f2f2; } | |
| #sect-productfam article p { | |
| font-size: 115%; } | |
| #sect-productfam article ul li strong, | |
| article.product-fam strong { | |
| text-transform: uppercase; | |
| color: #25c9d2; | |
| margin: 1em 0 0; } | |
| #sect-productfam article ul li p, | |
| article.product-fam ul li p { | |
| margin: 0 0 1em; | |
| font-size: 100%; } | |
| @media (min-width: 54em) { | |
| .product-fam h5 { | |
| font-size: 1.85em; } } | |
| .product-fam h4 { | |
| color: #25c9d2; | |
| text-transform: uppercase; | |
| font-size: 96%; } | |
| .product-fam .g-6.cols p:first-of-type { | |
| font-size: 115%; } | |
| @media (min-width: 54em) { | |
| .product-fam .g-6.cols p:first-of-type { | |
| font-size: 125%; } } | |
| .product-fam p a { | |
| padding-right: 2%; } | |
| /* | |
| #sect-findonline { | |
| background-image: url(../images/pointerbg-grey.png); | |
| background-position: 50% -8em; | |
| background-color: #FFF; | |
| background-repeat: repeat-x; | |
| padding: 1.75em 0 0em; | |
| } | |
| #sect-findonline .row{ | |
| padding-top: 1em; | |
| padding | |
| } | |
| #sect-testimonials ul li p{ | |
| font-style: italic; | |
| } | |
| */ | |
| /*genereates the grey line - might have to psuedo class it though */ | |
| .line-grey-top { | |
| border-bottom: 5px solid #EEE; | |
| display: block; | |
| margin-top: -1.7em; } | |
| .line-grey-bottom { | |
| border-bottom: 5px solid #EEE; | |
| display: block; | |
| padding-top: 1em; | |
| margin-bottom: -1.7em; } | |
| /*---------------------------------------------- | |
| --SS News | |
| ----------------------------------------------- */ | |
| #sect-ss-news-title { | |
| background-image: url(../images/NewsHeader_Lines.png); | |
| background-color: #F2C907; | |
| padding: 2.5em 0 0.5em; } | |
| #sect-ss-news article.box-post { | |
| background: #FFF; | |
| height: 6em; | |
| overflow: hidden; | |
| box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); } | |
| #sect-ss-news article img { | |
| float: left; | |
| padding-right: 1em; | |
| height: 100%; | |
| overflow: hidden; } | |
| #sect-ss-news article .preheader { | |
| color: #25c9d2; } | |
| #sect-ss-news article h5 { | |
| margin: 0.3em 0 0; | |
| color: #f5426c; } | |
| #sect-ss-news article .inner { | |
| padding: 0; | |
| margin: .5em 1em; } | |
| #sect-ss-news .g-block-2 li { | |
| width: 100%; } | |
| @media (min-width: 54em) { | |
| #sect-ss-news .g-block-2 li { | |
| width: 50%; } } | |
| /*---------------------------------------------- | |
| --Sect Willies | |
| ----------------------------------------------- */ | |
| #sect-williams { | |
| box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.4), inset 0px 0px 2px rgba(0, 0, 0, 0.4), 0px 1px 1px rgba(0, 0, 0, 0.4); | |
| border-top: 7px solid #f5426c; | |
| border-bottom: 7px solid #f5426c; | |
| background: #f5426c; } | |
| #sect-williams img { | |
| padding: 0 0 1em; } | |
| #sect-williams .btn-clear { | |
| color: #fff !important; } | |
| #sect-williams .btn-clear:hover { | |
| color: #f5426c !important; } | |
| #sect-williams input[type="text"] { | |
| background: transparent; | |
| border: 1px solid #f5426c; | |
| padding: 1.2em; | |
| color: #fff !important; } | |
| #sect-williams input[type="text"] { | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(0, 0, 0, 0.3); | |
| padding: 1.2em; } | |
| #sect-williams input::-webkit-input-placeholder { | |
| color: #fff !important; } | |
| #sect-williams input::-moz-placeholder { | |
| color: #fff !important; } | |
| #sect-williams input::-moz-placeholder { | |
| color: #fff !important; } | |
| #sect-williams input:-ms-input-placeholder { | |
| color: #fff !important; } | |
| /*---------------------------------------------- | |
| --G Map Section | |
| ----------------------------------------------- */ | |
| .sect-gmaps .block-wrap { | |
| background: #fff; } | |
| .gmap-list-box { | |
| background: rgba(255, 255, 255, 0.9); | |
| padding: 0; | |
| width: 100%; | |
| display: block; | |
| padding-left: 1em; } | |
| @media (min-width: 54em) { | |
| .gmap-list-box { | |
| width: 35%; | |
| display: table-cell; } } | |
| .gmap-list-box ul { | |
| overflow-y: scroll; | |
| max-height: 34em; } | |
| .gmap-list-box ul li { | |
| padding-bottom: 1.5em; | |
| vertical-align: top; } | |
| .map-marker { | |
| float: left; | |
| font-size: .7em; | |
| padding-right: .5em; } | |
| .map-info { | |
| font-size: 75%; | |
| text-align: left; | |
| float: left; } | |
| #sect-recipe-iso, | |
| #sect-submit-win { | |
| background: #fff !important; } | |
| #sect-ss-news { | |
| background: #F2F2F2 !important; | |
| z-index: 8; | |
| position: relative; } | |
| #sect-steps, | |
| #sect-recipe-iso, | |
| #sect-submit-win, | |
| #sect-insta-band, | |
| #sect-productfam, | |
| .product-fam, | |
| .sect-banner, | |
| #sect-testimonials, | |
| #sect-williams, | |
| #ss-news, | |
| #sect-recipe-iso { | |
| position: relative; | |
| z-index: 6; } | |
| /*---------------------------------------------- | |
| Styles for all Post pages - Recipes and News | |
| ----------------------------------------------- */ | |
| /*---------------------------------------------- | |
| --Single Post Layout | |
| ----------------------------------------------- */ | |
| .post-single main { | |
| padding-top: 4em; | |
| background: #eee; } | |
| /*---------------------------------------------- | |
| --Title bar and breadcrumbish back bar | |
| ----------------------------------------------- */ | |
| .title-bar, .back-bar { | |
| padding: 2em; | |
| background: #f5426c; | |
| box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.4); } | |
| .title-bar .icon, .back-bar .icon { | |
| font-size: 90%; } | |
| .title-bar h1 { | |
| margin-bottom: 0; | |
| text-transform: uppercase; | |
| font-weight: 600; | |
| color: #FFF; | |
| text-shadow: -3px 2px 0 rgba(130, 0, 99, 0.2); } | |
| /*---------------------------------------------- | |
| --Posts/News Archive | |
| ----------------------------------------------- */ | |
| .posts-archive .title-bar { | |
| background-image: url(../images/backgrounds/NewsHeader_Lines.png); | |
| background-color: #f2c907; } | |
| @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { | |
| .posts-archive .title-bar { | |
| background-image: url(../images/backgrounds/[email protected]); } } | |
| .sect-posts-archive { | |
| padding: 2em 0; } | |
| /*---------------------------------------------- | |
| --Post Boxes | |
| ----------------------------------------------- */ | |
| #sect-ss-news.sect-posts-archive .box-post { | |
| height: 8em; } | |
| #sect-ss-news.sect-posts-archive .box-post h5 { | |
| margin: 0.1em 0 0; | |
| color: #F5426C; | |
| font-size: .9em; } | |
| @media (min-width: 54em) { | |
| #sect-ss-news.sect-posts-archive .box-post h5 { | |
| font-size: 1.2em; } } | |
| .post-container { | |
| background-image: url(../images/backgrounds/News_Lines.png); | |
| background-color: #DADADA; } | |
| @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { | |
| .post-container { | |
| background-image: url(../images/backgrounds/[email protected]); } } | |
| .post-container .row { | |
| margin: 0 auto; | |
| background: #FFF; } | |
| .recipes .post-container .row { | |
| padding: 0 1.5em; } | |
| @media (min-width: 54em) { | |
| .post-single .post-content { | |
| padding-right: 10%; } } | |
| /*---------------------------------------------- | |
| --Single Post | |
| ----------------------------------------------- */ | |
| .post-single .back-bar { | |
| background-color: #f2c907; } | |
| /*---------------------------------------------- | |
| --Single Post Aside/sidebar | |
| ----------------------------------------------- */ | |
| .post-single article aside { | |
| text-align: center; } | |
| .post-single article aside ul li { | |
| display: inline; | |
| padding: 0 0.5em; } | |
| @media (min-width: 54em) { | |
| .post-single article aside ul li { | |
| display: block; } } | |
| .post-single article aside h5 { | |
| margin: 0; | |
| color: #820063; } | |
| /*---------------------------------------------- | |
| --Single Post Content | |
| ----------------------------------------------- */ | |
| .post-single h1.post-title { | |
| margin-top: 1em; | |
| margin-bottom: 1em; | |
| color: #25c9d2; | |
| font-size: 1.5em; } | |
| @media (min-width: 54em) { | |
| .post-single h1.post-title { | |
| font-size: 2em; } } | |
| .recipes article h1.post-title { | |
| font-size: 1.5em; } | |
| @media (min-width: 54em) { | |
| .recipes article h1.post-title { | |
| font-size: 1.85em; } } | |
| /*Lead fist paragraph with larger test | |
| .post-single article .post-content p:first-of-type { | |
| font-size: 115%; | |
| font-weight: 600; | |
| -webkit-hyphens: none; | |
| -moz-hyphens: none; | |
| -ms-hyphens: none; | |
| hyphens: none; | |
| margin: 0.2em 0; | |
| line-height: 1.3; | |
| } | |
| */ | |
| .post-single figure { | |
| margin: 0 0 0.5em; } | |
| /*---------------------------------------------- | |
| --Single Posts Metas - Recipe author and tags | |
| ----------------------------------------------- */ | |
| .recipes p.author { | |
| margin: 0; } | |
| ul.meta-recipe { | |
| font-size: 0.75em; | |
| font-weight: 600; | |
| display: inline; | |
| padding-right: 1.5em; } | |
| ul.meta-recipe li { | |
| display: inline; } | |
| /*---------------------------------------------- | |
| --Recipes Panel - Ingredients | |
| ----------------------------------------------- */ | |
| div.panel-ingredients { | |
| background: #EEE; | |
| padding: 1em 1em 0.1em; | |
| margin: 1em 0; | |
| font-size: 0.75em; } | |
| div.panel-ingredients p.title-ingredients { | |
| color: #25c9d2; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| margin: 0; } | |
| div.panel-ingredients p.content-ingredients { | |
| font-weight: 600; | |
| margin: 0; | |
| line-height: 2; } | |
| /*---------------------------------------------- | |
| --Recipes - Recipes Images | |
| ----------------------------------------------- */ | |
| .content-recipe p { | |
| font-size: 90%; } | |
| .content-recipes-images { | |
| padding-top: 1.4em; } | |
| @media (min-width: 54em) { | |
| .content-recipes-images { | |
| padding-top: 2.4em; } } | |
| /*---------------------------------------------- | |
| --Search | |
| ----------------------------------------------- */ | |
| .posts-search .title-bar { | |
| border-bottom: 21px solid #f2c907; | |
| max-height: 18em; | |
| box-shadow: 0px 3px 0px white, 0px 10px 0px #f2c907; | |
| max-height: 29em; | |
| margin-bottom: 5em; | |
| background-image: url(../images/backgrounds/RecipeCenter_Lines.png); } | |
| @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { | |
| .posts-search .title-bar { | |
| background-image: url(../images/backgrounds/[email protected]); } } | |
| @media (max-width: 32em) { | |
| .posts-search .title-bar { | |
| padding: 0 0.5em; } } | |
| @media (min-width: 54em) { | |
| .posts-search .title-bar { | |
| max-height: 19em; | |
| margin-bottom: 2em; } } | |
| .posts-search .title-bar h1 { | |
| text-align: left; } | |
| .posts-search .title-bar p { | |
| text-align: left; | |
| color: #fff; } | |
| #circle-holder { | |
| background: #FFF; | |
| color: #820063; | |
| border-radius: 100%; | |
| height: 16em; | |
| width: 16em; | |
| padding: 1em; | |
| margin: 0 auto; | |
| line-height: 1.5; | |
| text-align: center; | |
| border: 10px solid #f2c907; | |
| box-shadow: inset 0px 0px 1px #820063, inset 0px 0px 2px #820063, inset 0px 0px 3px #820063; | |
| display: table; } | |
| @media (min-width: 54em) { | |
| #circle-holder { | |
| padding: 1.5em; } } | |
| #circle-holder span { | |
| display: table-cell; | |
| vertical-align: middle; } | |
| #circle-holder:after { | |
| border: 2px solid #007777; } | |
| #circle-holder img { | |
| max-width: 6em; } | |
| #circle-holder * { | |
| text-align: center !important; | |
| font-size: 80%; | |
| color: #820063; } | |
| @media (min-width: 54em) { | |
| #circle-holder * { | |
| font-size: 95%; } } | |
| @media (min-width: 54em) { | |
| #circle-holder { | |
| font-size: 93%; | |
| height: 19em; | |
| width: 19em; } } | |
| .search-panel { | |
| background: #ddd; | |
| max-width: 100%; | |
| padding: 1.5em .4em; | |
| margin-bottom: .5em; } | |
| @media (min-width: 54em) { | |
| .search-panel { | |
| padding: 1em; } } | |
| .search-panel .inner { | |
| padding: 1.5em 1em 0.75em; } | |
| .search-panel h4 { | |
| color: #820063; | |
| margin: 0; | |
| font-style: italic; | |
| padding: 0.3em; } | |
| .search-panel input { | |
| border: 1px solid #820063; | |
| max-width: 97%; } | |
| .search-panel ul.form-list { | |
| margin: 0; | |
| padding: 1em 0 1.5em; } | |
| .search-panel ul.form-list li { | |
| color: #820063; | |
| font-size: 80%; } | |
| .search-panel p { | |
| font-size: 75%; | |
| color: #f5426c; | |
| text-align: center; | |
| max-width: 59%; | |
| margin: 0 auto; } | |
| .search-panel button.btn { | |
| text-align: center; | |
| width: 100%; | |
| margin: 0 auto 1em; | |
| display: block !important; | |
| font-size: .9em; } | |
| @media (min-width: 54em) { | |
| .search-panel button.btn { | |
| font-size: .9em; } } | |
| @media (min-width: 72em) { | |
| .search-panel button.btn { | |
| font-size: 1em; } } | |
| .search-panel button.btn:hover { | |
| border-color: #820063 !important; } | |
| #sect-search-grid { | |
| padding-bottom: 1em; } | |
| #sect-search-grid #urby-blocks .items { | |
| width: 100%; | |
| min-height: 90em !important; | |
| margin-bottom: 1em; } | |
| .submit-recipes .title-bar p { | |
| font-size: 120%; | |
| text-align: center; | |
| font-weight: 600; } | |
| .submit-recipes div.hr-dotted { | |
| margin: 0.5em auto 1em; } | |
| /*---------------------------------------------- | |
| --Steo by Step | |
| ----------------------------------------------- */ | |
| #sect-steps { | |
| background-image: url(../images/pointerbg-grey.png); | |
| background-position: 50% -7em; | |
| background-color: #FFF; | |
| background-repeat: repeat-x; | |
| padding: 0.3em 0 0; | |
| min-height: 12em; | |
| margin-bottom: 0; } | |
| @media (min-width: 54em) { | |
| #sect-steps { | |
| margin-bottom: -3em; | |
| background-position: 50% -4em; } } | |
| div.steps-text { | |
| position: relative; | |
| text-align: center; | |
| max-width: 28em; | |
| max-width: 22em; | |
| margin: 0 auto; | |
| left: 0; | |
| right: 0; | |
| top: 6em; | |
| z-index: 1; } | |
| @media (min-width: 54em) { | |
| div.steps-text { | |
| max-width: 23em; } } | |
| .steps-text h2 { | |
| color: #25C9D2; | |
| font-size: 1.2em; | |
| font-weight: 600; | |
| margin-bottom: 0.2em; } | |
| @media (min-width: 54em) { | |
| .steps-text h2 { | |
| font-size: 1.5em; } } | |
| .steps-text p { | |
| font-size: 93%; } | |
| .step { | |
| min-height: 20em; } | |
| .bowl { | |
| max-width: 40%; | |
| margin: 0 auto; | |
| display: block; } | |
| .steps-text5 a { | |
| position: relative; | |
| top: -.8em; | |
| text-transform: uppercase; | |
| font-size: .8em; | |
| font-weight: 600; } | |
| .steps-text5 img { | |
| max-width: 1.4em; | |
| position: relative; | |
| top: .3em; } | |
| @media (min-width: 54em) { | |
| div.steps-text.text-fixed { | |
| position: fixed; } } | |
| #stepbystep { | |
| background: url(../images/steps/Step1_Bowl.png) no-repeat 50%; | |
| background-size: 22em; | |
| background-position: 50% 14em; } | |
| @media (min-width: 54em) { | |
| #stepbystep.fixed { | |
| background-attachment: fixed !important; } } | |
| #stepbystep #step2 { | |
| background: url(../images/steps/Step2_Bowl.png) no-repeat 50%; | |
| background-attachment: fixed !important; | |
| background-size: 22em; | |
| background-position: 50% 14em; } | |
| #stepbystep #step3 { | |
| background: url(../images/steps/Step3_Bowl.png) no-repeat 50%; | |
| background-attachment: fixed !important; | |
| background-size: 22em; | |
| background-position: 50% 14em; } | |
| #stepbystep #step4 { | |
| background: url(../images/steps/Step4_Bowl.png) no-repeat 50%; | |
| background-attachment: fixed !important; | |
| background-size: 22em; | |
| background-position: 50% 14em; } | |
| #stepbystep #step5 { | |
| background: url(../images/steps/Step5_Bowl.png) no-repeat 50%; | |
| background-attachment: fixed !important; | |
| background-size: 22em; | |
| background-position: 50% 14em; } | |
| .stuff1 { | |
| background: url(../images/steps/Step1_Stuff.png) no-repeat 50% center; | |
| height: 22em; | |
| background-size: 92%; | |
| background-position: 50% 18em; | |
| height: 38em; | |
| background-size: 49em; } | |
| .stuff2 { | |
| background: url(../images/steps/Step2_Stuff.png) no-repeat 50% center; | |
| height: 28em; | |
| background-size: 49em; } | |
| .stuff3 { | |
| background: url(../images/steps/Step3_Stuff.png) no-repeat 50% center; | |
| height: 28em; | |
| background-size: 49em; } | |
| .stuff4 { | |
| background: url(../images/steps/Step4_Stuff.png) no-repeat 50% center; | |
| height: 28em; | |
| background-size: 49em; } | |
| .stuff5 { | |
| background: url(../images/steps/Step5_Stuff.png) no-repeat 50% center; | |
| background-size: 49em; | |
| background-position: 50% 8em; | |
| height: 33em; } | |
| #steppers-nav { | |
| display: none; } | |
| @media (min-width: 54em) { | |
| #steppers-nav { | |
| position: fixed; | |
| z-index: 100; | |
| margin-top: -132px; | |
| top: 50%; | |
| opacity: 1; | |
| z-index: 0; | |
| display: block; } } | |
| #steppers-nav.right { | |
| right: 17px; } | |
| #steppers-nav ul { | |
| margin: 0; | |
| padding: 0; } | |
| #steppers-nav li { | |
| display: block; | |
| width: 14px; | |
| height: 13px; | |
| margin: 7px; | |
| position: relative; } | |
| #steppers-nav li a { | |
| display: block; | |
| position: relative; | |
| z-index: 1; | |
| width: 100%; | |
| height: 100%; | |
| cursor: pointer; | |
| text-decoration: none; } | |
| #steppers-nav li .active span { | |
| top: 2px; | |
| left: 2px; | |
| width: 8px; | |
| height: 8px; | |
| background: rgba(0, 0, 0, 0); } | |
| #steppers-nav span { | |
| top: 0em; | |
| left: 0em; | |
| width: .4em; | |
| height: .4em; | |
| border: 1px solid #000; | |
| background: rgba(0, 0, 0, 0); | |
| -webkit-border-radius: 50%; | |
| -moz-border-radius: 50%; | |
| border-radius: 100%; | |
| position: absolute; | |
| z-index: 1; } | |
| #steppers-nav li.nav-active span { | |
| background: rgba(0, 0, 0, 0.3); } | |
| .js-hide { | |
| opacity: 0 !important; } | |
| .fader-inner { | |
| opacity: 1; | |
| -webkit-transition: opacity .5s ease-in-out 0s; | |
| -moz-transition: opacity .5s ease-in-out 0s; | |
| -o-transition: opacity .5s ease-in-out 0s; | |
| transition: opacity .5s ease-in-out 0s; | |
| backface-visibility: hidden; } | |
| .fader-inner .fader-inner { | |
| display: none !important; } | |
| #sect-recipe-iso, | |
| #sect-submit-win, | |
| #sect-insta-band, | |
| #sect-productfam, | |
| .sect-banner, | |
| #sect-testimonials, | |
| #sect-williams, | |
| #sect-ss-news-title, | |
| #ss-news { | |
| position: relative; | |
| z-index: 6; } | |
| /*---------------------------------------------- | |
| --Step by Step mobile - | |
| easier to figure out non mobile-first here | |
| ----------------------------------------------- */ | |
| @media only screen and (max-width: 32em) { | |
| .step { | |
| min-height: 21em; } | |
| div.steps-text { | |
| position: static; } | |
| div.steps-text.text-fixed { | |
| position: static; } | |
| .js-hide { | |
| opacity: 1 !important; } | |
| #stepbystep { | |
| background-size: 47%; | |
| background-position: 50% 8em; | |
| padding: 0 0.5em; } | |
| #stepbystep.fixed { | |
| background-attachment: scroll !important; } | |
| .stuff1, | |
| .stuff2, | |
| .stuff3, | |
| .stuff4, | |
| .stuff5 { | |
| height: 21em; | |
| background-size: 92%; | |
| background-position: 50% 10em; } | |
| .stuff5 { | |
| background-size: 98%; | |
| background-position: 50% 12em; } | |
| section#step1 { | |
| height: 19em; } | |
| #stepbystep #step2, | |
| #stepbystep #step3, | |
| #stepbystep #step4, | |
| #stepbystep #step5 { | |
| background-size: 47%; | |
| background-position: 50% 10em; | |
| background-attachment: scroll !important; } } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment