/* Theme Name: Wheelys Café Theme URI: Description: Version: 1.0 Author: Cenk Özbakır Author URI: Tags: */ article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([ ]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,button,input,select,textarea{font-family: "brandon-grotesque", "Brandon Grotesque", sans-serif !important;}body{margin:0}a:focus{outline:0}a:active,a:hover{outline:0}h1{font-size:1em;margin:0}h2{font-size:1em;margin:0}h3{font-size:1em;margin:0}h4{font-size:1em;margin:0}h5{font-size:1em;margin:0}h6{font-size:1em;margin:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:0}dd{margin:0}menu,ol,ul{padding:0}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}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;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-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} body, html {height: 100%;} *, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;} input {max-width: 100%;} .alignnone { margin:0; } .aligncenter, div.aligncenter { display:block; margin:5px auto 5px auto; } .alignright { float:right; margin:5px 0 20px 20px; } .alignleft { float:left; margin:5px 20px 20px 0; } a img.alignright { float:right; margin:0x; } a img.alignnone { margin:0; } a img.alignleft { float:left; margin:0; } a img.aligncenter { display:block; margin-left:auto; margin-right:auto; } .wp-caption { background:transparent; border:none; padding:5px; text-align:left; } .wp-caption.alignnone { margin:0; display: block;} .wp-caption.alignnone img {vertical-align: text-top;} .wp-caption.alignleft { } .wp-caption.alignrig2ht { margin:5px 0 20px 20px; } .wp-caption img { border:0 none; height:auto; margin:0; max-width:98.5%; padding:0; width:auto; } .wp-caption .wp-caption-text,1.gallery-caption { font-size:14px; line-height:17px; margin:0; padding:0; } input {font-family: "brandon-grotesque", "Brandon Grotesque", sans-serif !important;} /* COLOURS Red: #ed2323 Fonts: Brandon Thin: font-weight: 100 Brandon Regular: font-weight: 400 Brandon Medium: font-weight: 500 Brandon Bold: font-weight: 700 Brandon Black: font-weight: 900 "brandon-grotesque" */ body { font-family: "brandon-grotesque", "Brandon Grotesque", sans-serif; font-size: 22px; line-height: 1.4; background-color: #fff; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-feature-settings: "kern"; -moz-font-feature-settings: "kern=1"; -ms-font-feature-settings: "kern"; -o-font-feature-settings: "kern"; -webkit-font-feature-settings: "kern"; font-feature-settings: "kern"; font-kerning: normal; -moz-font-feature-settings: "liga=1, dlig=1"; -ms-font-feature-settings: "liga", "dlig"; -o-font-feature-settings: "liga", "dlig"; -webkit-font-feature-settings: "liga", "dlig"; font-feature-settings: "liga", "dlig"; } html {background-color: #fff;} body.home { opacity: 0; -webkit-animation: fadeIn ease-in 1; -moz-animation: fadeIn ease-in 1; animation: fadeIn ease-in 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 1s; animation-delay: 1s; } @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } /* Animations */ .duration5 {-webkit-animation-duration: 5s !important; animation-duration: 5s !important;} .duration6 {-webkit-animation-duration: 6s !important; animation-duration: 6s !important;} .duration7 {-webkit-animation-duration: 7s !important; animation-duration: 7s !important;} .duration8 {-webkit-animation-duration: 8s !important; animation-duration: 8s !important;} .duration9 {-webkit-animation-duration: 9s !important; animation-duration: 9s !important;} .delay02 {-webkit-animation-delay: 0.2s; animation-delay: 0.2s;} .delay04 {-webkit-animation-delay: 0.4s; animation-delay: 0.4s;} .delay06 {-webkit-animation-delay: 0.6s; animation-delay: 0.6s;} ::selection {background:#ed2323; color: white; text-shadow: none;} ::-moz-selection {background:#ed2323; color: white; text-shadow: none;} .clear {clear: both;} .hidden {display: none;} .visible {display: inherit !important;} .opacityzero {opacity: 0;} a {color: inherit; text-decoration: underline;} a:hover {color: #ed2323; text-decoration: underline;} article p a, a.link, .question a, .story_text a { text-decoration: underline; color: #000; } article p a:hover, a.link:hover, .question a:hover, .story_text a:hover { text-decoration: underline; color: #ed2323; } span.highlight {background-color: #fbcac9;} .noscroll {overflow: hidden;} hr {border: 0; border-top: 1px solid #000; margin: 0; height: 1px;} img {max-width: 100%;} .fontawesome {font-family: 'FontAwesome', 'brandon-grotesque', "Brandon Grotesque", sans-serif;} .fontawesome a, a.fontawesome {text-decoration: none;} i.fontawesome {font-style: normal;} .icon {font-family: 'FontAwesome', 'brandon-grotesque', "Brandon Grotesque", sans-serif;} .icon a, a.icon {text-decoration: none;} i.icon {font-style: normal;} .facebook {color: #3764A3;} .twitter {color: #55acee;} .pinterest {color: #C9232E;} .instagram {color: #3F91DC;} .email {color: rgba(0, 0, 0, 0.6);} .grey, .gray {color: #939393;} .grey a, .gray a {color: #939393;} .grey a:hover, .gray a:hover {color: #2c2c2c;} .seo_h1 { text-indent: -99999px; margin: 0 !important; font-size: 0 !important; } iframe { width: 100%; height: 100%; } .center {text-align: center;} h2 { font-size: 2.2em; font-weight: 900; text-transform: uppercase; text-align: center; margin-top: 2em; margin-bottom: 0em; } .title { margin-left: auto; margin-right: auto; text-align: center; margin-top: 4em; margin-bottom: 2em; position: relative; } .title h2 { padding-top: 48px; display: inline-block; position: relative; padding-bottom: 15px; margin-top: 0; z-index: 1; line-height: 1; } .title h2:before{ content: ""; position: absolute; width: 60%; height: 5px; background-color: #000; top: 18px; left: 20%; z-index: 1; } .title h2:after{ content: ""; position: absolute; width: 30%; height: 1px; bottom: 0; border-bottom: 5px solid black; left: 35%; } .title_monogram { height: 43px; width: 43px; background-image: url(images/monogram_title.svg); background-size: 43px; background-repeat: no-repeat; background-position: center top; z-index: 2; margin-left: auto; margin-right: auto; margin-bottom: -43px; position: relative; } .width { position: relative; max-width: 740px; width: 100%; margin: 0 auto; padding-left: 20px; padding-right: 20px; } .width_1200 { position: relative; max-width: 1200px; width: 100%; margin: 0 auto; padding-left: 20px; padding-right: 20px; } .width_1000 { position: relative; max-width: 1000px; width: 100%; margin: 0 auto; padding-left: 20px; padding-right: 20px; } .button, button, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {background-color: #ed2323; color: #fff; font-weight: 500; padding: 13px; border: none; text-align: center; border-radius: 5px;} .button:hover, button:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {background-color: #b2b2b2; color:#fff;} a.button {text-decoration: none;} a.button:hover {text-decoration: none;} input:focus, button:focus, textarea:focus { outline: none; } .floatleft {float: left;} #annsentme { width: 100%; background-color: #3CB0A2; color: #fff; text-align: center; padding: 10px; font-weight: bold; font-size: 0.9em; } /* Lightbox */ .featherlight { display:none; position:fixed; top:0; right:0; bottom:0; left:0; z-index:2147483647; text-align:center; white-space:nowrap; cursor:pointer; background:#333; background:rgba(0,0,0,0); } .featherlight:last-of-type { background:rgba(0,0,0,.8); } .featherlight:before { content:''; display:inline-block; height:100%; vertical-align:middle; margin-right:-.25em; } .featherlight .featherlight-content { position:relative; text-align:left; vertical-align:middle; display:inline-block; overflow:auto; padding:25px 25px 0; border-bottom:25px solid transparent; /* min-width:80%; */ margin-left:5%; margin-right:5%; max-height:95%; background:#fff; cursor:auto; white-space:normal; } .featherlight .featherlight-inner { display:block; } .featherlight .featherlight-close-icon { position:absolute; z-index:9999; top:0; right:0; line-height:25px; width:25px; cursor:pointer; text-align:center; background:#fff; background:#fff; color:#ed2323; } .featherlight .featherlight-image { width:100%; } .featherlight-iframe .featherlight-content { border-bottom:0; padding:0; } .featherlight iframe { border:0; } .featherlight-loading .featherlight-content { width: 200px; height: 200px; min-width: 200px; min-height: 200px; max-width: 200px; max-height: 200px; margin-left: auto; margin-right: auto; border: none; padding: 0; background-image: url(images/loading.gif); background-repeat: no-repeat; background-position: center center; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } #top { background-color: #ed2323; height: 60px; color: #fff; padding-top: 10px; position: fixed; left: 0; right: 0; top: 0; z-index: 110; } #logo { width: 108px; height: 40px; margin-left: auto; margin-right: auto; background-position: left center; background-size: 100%; /* SVG with PNG as a fallback. Browsers that support gradients also support SVG, which is why we’re adding a transparent gradient */ background: url(images/logo.png); background: url(images/logo.svg), linear-gradient(transparent, transparent); background-repeat: no-repeat; } #logo h1 {text-indent: -999999px; font-size: 0px;} .page {margin-top: 60px;} /* MENU */ body.overlay:before { content: " "; width: 100%; height: 100%; position: fixed; z-index: 10; top: 0; left: 0; background: rgba(0, 0, 0, 0.7); -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeIn { from { opacity: 0; } to {opacity: 1;} } @keyframes fadeIn { from { opacity: 0; } to {opacity: 1;} } #menu_button, #menu_button_close, #menu_button_mywheelys, #menu_button_close_mywheelys { display:block; width: 65px; height: 60px; float: left; margin-top: -10px; padding-top: 20px; padding-right: 20px; padding-left: 20px; } #menu_button_close, #menu_button_close_mywheelys {display: none;} #menu_button.hidden, #menu_button_mywheelys.hidden { display: none;} a#menu_button_close, a#menu_button_close_mywheelys { text-decoration: none; } #menu_button_close, #menu_button_close_mywheelys { color: #fff; font-size: 50px; line-height: 0.5; } .menu_button_line { width: 100%; float: left; height: 3px; background-color: #fff; margin-bottom: 6px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .nav {display: none;} .nav.visible {display: block;} #menu_button_close.visible, #menu_button_close_mywheelys.visible {display: block;} /* The actual menu, when opened */ nav { background-color: transparent; width: 70%; height: 100%; font-size: 16px; position: fixed; padding-top: 60px; top: 0; left: 0; z-index: 100; } nav a {text-decoration: none; text-shadow: none; background-color: transparent; box-shadow: none;} nav a:hover {text-decoration: none; text-shadow: none; background-color: transparent; box-shadow: none;} .menu_bigs { width: 50%; float: left; height: 100%; text-align: center; color: #ed2323; font-weight: 900; font-size: 3em; line-height: 1.2; background-color: #fff; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } .menu_bigs a {color: #ed2323; text-decoration: none;} .menu_big { height: 50%; width: 100%; position: relative; border-right: 1px solid #ECECEC; } #menu_big_1 {border-bottom: 1px solid #ECECEC;} .menu_big:hover { color: #fff; background-color: #ed2323; -webkit-transition: .1s; -o-transition: .1s; -ms-transition: .1s; -moz-transition: .1s; transition: .1s; } .menu_big_text { position: absolute; top: 50%; left: 10px; right: 10px; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } .menu_mainmenu { width: 50%; float: left; height: 100%; padding-top: 20px; padding-left: 50px; color: #ed2323; background-color: #fff; max-width: 400px; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } .menu_mainmenu a { color: #ed2323; font-weight: 900; text-transform: uppercase; text-decoration: none; display: inline-block; margin-top: 30px; -webkit-transition: .1s; -o-transition: .1s; -ms-transition: .1s; -moz-transition: .1s; transition: .1s; } /* .menu_mainmenu a:hover { color: rgba(0, 0, 0, 1); } */ .menu_mainmenu .sub-menu a { color: rgba(0, 0, 0, 1); font-weight: 400; text-transform: none; margin-top: 0; -webkit-transition: .1s; -o-transition: .1s; -ms-transition: .1s; -moz-transition: .1s; transition: .1s; } .menu_mainmenu .sub-menu a:hover { color: rgba(0, 0, 0, 0.5); } .social { margin-top: 9px; float: left; font-size: 26px; line-height: 22px; } .love { font-weight: 900; text-transform: uppercase; font-size: 0.6em; line-height: 1; margin-left: 4px; } #footer .love {margin-left: -1px; line-height: 2;} .menu_right { margin-top: 7px; margin-right: 20px; float: right; font-size: 18px; line-height: 22px; } .menu_right a {margin-right: 0 !important;} .social a, .menu_right a {color: #fff; margin-left: 5px; margin-right: 5px;} .social a:hover, .menu_right a:hover {color: #000;} .menu_right span {font-size: 13px; font-weight: 900; margin-bottom: 5px; margin-right: 10px;} .menu_right_join { float: left; font-size: 0.8em; font-weight: 500; background-color: rgba(255, 255, 255, 0.38); padding-left: 10px; padding-right: 6px; padding-top: 1px; height: 24px; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .menu_right_join_arrow { float: left; width: 0; height: 0; border-style: solid; border-width: 12px 0 12px 10px; border-color: transparent transparent transparent rgba(255, 255, 255, 0.38);; } .menu_right_join:hover { color: #fff; } body.logged-in .menu_right_join, body.logged-in .menu_right_join_arrow {display: none;} article { margin-bottom: 20px; } /* NEW FRONTPAGE */ #frontpage { background-color: #e4e4e4; } #frontpage_hero { width: 100%; height: 600px; background-image: url(images/hero.jpg); background-size: cover; background-position: center center; position: relative; } .frontpage_width { width: 100%; max-width: 1300px; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; } .frontpage_intro { width: 100%; background-color: #fff; padding-top: 80px; padding-bottom: 80px; padding-left: 180px; padding-right: 180px; } .frontpage_intro h1 { color: #ed2323; text-align: center; font-weight: 400; font-size: 2em; text-transform: uppercase; } .frontpage_intro h2 { color: #000; text-align: center; font-weight: 400; font-size: 0.9em; text-transform: none; margin-top: 0; } .frontpage_intro a.introbutton, a.apply_button { padding-top: 9px; padding-bottom: 9px; padding-left: 12px; padding-right: 12px; font-size: 0.9em; display: inline-block; color: #ed2323; text-decoration: none; font-weight: 700; border: 2px solid #ed2323; margin-left: 10px; margin-right: 10px; line-height: 1; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .frontpage_intro a.introbutton span.icon, a.apply_button span.icon{ font-weight: 400 !important; display: block; float: right; margin-left: 5px; line-height: 0; margin-top: 9px; } .frontpage_intro a.introbutton:hover, a.apply_button:hover { background-color: #ed2323; color: #fff; } .frontpage_arrow { position: relative; background: #ffffff; } .frontpage_arrow:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-top-color: #ffffff; border-width: 20px; margin-left: -20px; } .frontpage_contactform { background-color: #f0efef; } .frontpage_contactform h2 { color: #ed2323; text-align: center; font-weight: 800; font-size: 2em; margin-top: 0; text-transform: uppercase; } .frontpage_contactform h3 { color: #000; text-align: center; font-weight: 400; font-size: 1em; text-transform: none; } #frontpage_contact { background-color: #f1eded; padding-bottom: 100px; padding-top: 80px; } .frontpage_contactform_width {width: 100%; max-width: 900px; margin-left: auto; margin-right: auto; position: relative;} #frontpage_contact form { width: 100%; margin-left: auto; margin-right: auto; position: relative; clear: both; margin-top: 40px; } .contact_left {width: 50%; float: left;} #frontpage_contactform input, #frontpage_contactform textarea { font-weight: normal; width: 99%; margin-bottom: 10px; margin-right: 1%; color: #000; padding: 10px; font-size: 20px; border: 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #frontpage_contactform textarea {float: right; width: 48.5%; height: 167px;} #frontpage_contactform button { text-transform: uppercase; display: block; float: none; margin: 0 auto; margin-top: 20px; width: 200px; text-align: center; background-color: #ed2323; padding: 10px; font-size: 20px; line-height: 0; height: 48px; color: #fff; font-weight: bolder; border: 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #frontpage_contactform button:hover {background-color: #000;} #frontpage_contactform_thanks { position: absolute; width: 100%; height: 190px; background-color: rgb(237, 35, 35); z-index: 9; padding: 20px; text-align: center; line-height: 158px; color: #fff; font-weight: 900; text-transform: uppercase; margin-top: 22px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: .2s; -o-transition: .2s; -ms-transition: .2s; -moz-transition: .2s; transition: .2s; } .frontpage_revolution { width: 100%; margin-left: auto; margin-right: auto; height: 300px; background-image: url(images/home_revolution.jpg); background-size: cover; background-position: center center; } .frontpage_revolution h2 { text-align: center; margin: 0; padding: 0; line-height: 300px; font-size: 2.5em; text-transform: uppercase; color: #fff; } .frontpage_pressquotes { padding-top: 20px; background-color: #fff; } .frontpage_pressquotes h3 { text-align: center; text-transform: uppercase; margin: 0; padding: 0; font-size: 0.7em; font-weight: 400; } .frontpage_quote { text-align: center; text-transform: uppercase; margin: 0; padding-top: 60px; padding-bottom: 80px; font-weight: 400; color: #ed2323; font-size: 1.6em; } .frontpage_quote_logo { background-color: #dedede; width: 16.667%; float: left; height: 60px; border-left: 4px solid white; position: relative; opacity: 0.4; background-size: 90px; background-repeat: no-repeat; background-position: center center; } #frontpage_quote_logo_bbc { border-left: none; background-image: url(images/media_logos/bbc.svg); } #frontpage_quote_logo_techcrunch { background-size: 140px; background-image: url(images/media_logos/techcrunch.svg); } #frontpage_quote_logo_inhabitat { background-image: url(images/media_logos/inhabitat.svg); background-size: 110px; } #frontpage_quote_logo_forbes { background-image: url(images/media_logos/forbes.svg); background-size: 80px; } #frontpage_quote_logo_fastco { background-image: url(images/media_logos/fastcompany.svg); background-size: 130px; } #frontpage_quote_logo_inc { background-image: url(images/media_logos/inc.svg); background-size: 65px; } .frontpage_quote_logo.active, .frontpage_quote_logo:hover { background-color: #b0b0b0; } .frontpage_quote_logo:hover { cursor: pointer; } .frontpage_quote_logo.active:after { top: 0; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-top-color: #ffffff; border-width: 10px; margin-left: -10px; } .frontpage_news { width: 100%; height: 280px; background-color: #fff; position: relative; overflow: hidden; border-top: 4px solid white; } .frontpage_news .owl-stage {overflow: hidden;} .frontpage_news .owl-nav { position: absolute; width: 100%; font-weight: 100; } .frontpage_news .owl-prev, .frontpage_news .owl-next { position: absolute; top: -130px; margin-left: 0; margin-right: 0; color: #fff; font-size: 120px; line-height: 0; } .frontpage_news .owl-prev {left: 10px; } .frontpage_news .owl-next {right: 10px; } .frontpage_news h2 { text-align: center; text-transform: uppercase; margin: 0; padding: 0; font-size: 2em; font-weight: 900; position: absolute; width: 100%; margin-top: 20px; z-index: 5; color: #fff; } .frontpage_news h3 { text-align: center; text-transform: uppercase; margin: 0; padding: 0; font-size: 0.7em; font-weight: 400; position: absolute; width: 100%; margin-top: 20px; z-index: 5; color: #fff; } .frontpage_news_item { height: 280px; width: 100%; z-index: 2; padding-top: 70px; background-size: cover; background-position: center center; background-repeat: no-repeat; } #frontpage_news_item_spacer { width: 100%; height: 90px; } .frontpage_news a.button { padding-top: 4px; padding-bottom: 4px; font-weight: 900; font-size: 0.85em; } .frontpage_news a.button:hover { background-color: #fff; color: #ed2323; } .frontpage_news .owl-controls { margin-top: -35px; height: auto; z-index: 10; } .frontpage_news .owl-dots .owl-dot span { background: rgba(255, 255, 255, 0.5); width: 7px; height: 7px; margin: 4px 4px; } #frontpage_news_item_indiegogo { background-color: #e88fa3; background-image: url(images/frontpage_news_background_pink.png); } #frontpage_news_item_wheelysdreams { background-color: #a1d5d6; background-image: url(images/frontpage_news_background_blue.png); } #frontpage_news_item_brewing { background-color: #a3bc6a; background-image: url(images/frontpage_news_background_green.png); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { #frontpage_news_item_indiegogo { background-image: url(images/frontpage_news_background_pink@2x.png); } #frontpage_news_item_wheelysdreams { background-image: url(images/frontpage_news_background_blue@2x.png); } #frontpage_news_item_brewing { background-image: url(images/frontpage_news_background_green@2x.png); } } .frontpage_nyanbike { width: 100%; height: 230px; background-image: url(images/nyan_transparent.gif); background-size: 35%; background-position: center center; background-repeat: no-repeat; background-color: #f0efef; } #frontpage_videooverlay { position: fixed; width: 100%; height: 100%; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 999; top: 0; } #frontpage_videooverlay_inner { background-color: transparent; width: 100%; max-width: 960px; margin-left: auto; margin-right: auto; position: relative; margin-top: 10%; box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.4); } #frontpage_videooverlay_close { color: #fff; position: absolute; right: 0; top: -40px; font-weight: 700; font-size: 2em; line-height: 1; } #frontpage_videooverlay_close a {text-decoration: none;} .home_overlay_apply .home_overlay_content, .overlay_apply, .overlay_content { padding: 40px; top: 0; text-align: left; } .home_overlay_apply #home_overlay_inner, .overlay_apply #overlay_inner { max-width: 500px !important; max-height: 320px !important; } .home_overlay_apply select, .overlay_apply select { font-size: 16px !important; font-family: sans-serif !important; width: 100%; padding: 5px; margin-bottom: 10px; } .home_overlay_apply h1, .overlay_apply h1 { font-size: 1em !important; text-align: left; } .home_overlay_apply .home_overlay_button_yes, .home_overlay_apply .home_overlay_submit, .overlay_apply .overlay_button_yes, .overlay_apply .overlay_submit { float: none !important; width: 100% !important; margin: 0 !important; padding: 5px !important; display: block !important; text-align: center !important; font-size: 18px !important; color: #ed2323 !important; background-color: #fff !important; -webkit-border-radius: 5px !important; -moz-border-radius: 5px !important; border-radius: 5px !important; } .home_overlay_apply .home_overlay_email .overlay_apply .overlay_email { top: 0 !important; padding: 40px !important; } .home_overlay_apply .home_overlay_email input, .overlay_apply .overlay_email input { width: 100% !important; padding: 5px !important; margin-bottom: 5px; font-weight: normal; font-size: 22px; text-align: center; } /* Exit Popup */ #bio_ep_bg {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.7; z-index: 10001;} #bio_ep { color: #fff !important; background-color: #ed2323 !important; box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.4) !important; font-weight: bold; padding: 50px; text-align: center; font-size: 22px !important; height: auto !important; width: 600px !important; border: 8px solid #fff; } span#timer { height: 56px; width: 100%; display: block; font-size: 40px; font-family: monospace; margin-top: 10px; margin-bottom: 10px; } @keyframes blink-animation { to { visibility: hidden; } } @-webkit-keyframes blink-animation { to { visibility: hidden; } } #bio_ep_close { position: absolute; left: auto !important; top: 6px !important; right: 3px !important; margin: 0 !important; width: 20px; height: 20px; color: #fff; font-size: 18px !important; font-weight: bold; text-align: center; border-radius: 50%; background-color: transparent; cursor: pointer; } #bio_ep h1 { font-size: 2em; text-transform: uppercase; font-weight: 900; line-height: 1; text-align: center; animation: blink-animation 1s steps(5, start) infinite; -webkit-animation: blink-animation 1s steps(5, start) infinite; } #bio_ep button.home_overlay_submit { background-color: #fff; color: #ed2323; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-size: 36px; width: 470px; text-align: center; transition: all .2s ease-in-out; } #bio_ep button.home_overlay_submit:hover { background-color: black; color: white; border: 4px solid black; transform: scale(1.02); } #bio_ep input { padding-left: 15px; padding-right: 15px; padding-top: 4px; padding-bottom: 4px; border: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-align: center; } /* Home Overlay */ #home_overlay, #overlay { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.46); position: fixed; z-index: 99999999; top: 0; left: 0; right: 0; text-align: center; color: #fff; } #home_overlay_inner, #overlay_inner { background-color: #ed2323; width: 100%; max-width: 700px; height: 100%; max-height: 380px; margin-left: auto; margin-right: auto; position: relative; margin-top: 10%; box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.4); z-index: 10; } .home_overlay_close, .overlay_close { position: absolute; top: 5px; right: 20px; color: #fff; font-weight: bold; font-size: 2em; line-height: 1; z-index: 20; } .home_overlay_close a, .overlay_close a { text-decoration: none; color: #fff; } .home_overlay_content, .home_overlay_email, .verlay_content, .overlay_email { position: absolute; top: 15%; left: 0; right: 0; } .home_overlay_email, .overlay_email { top: 7%; padding: 50px; font-size: 1.2em; } #home_overlay h1, #overlay h1 { font-size: 1.7em; text-transform: uppercase; font-weight: 900; line-height: 1; } #home_overlay h2, #overlay h2 { font-size: 1.1em; text-transform: uppercase; font-weight: 900; line-height: 1; margin: 0; margin-bottom: 50px; } .home_overlay_button, .overlay_button { padding: 15px 30px; color: #ed2323; background-color: #fff; margin-left: 10px; margin-right: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } a.home_overlay_button, a.overlay_button { text-decoration: none; text-transform: uppercase; font-weight: 900; font-size: 1.2em; } a.home_overlay_button:hover, a.overlay_button:hover {color: #000;} .home_overlay_email input, .overlay_email input { font-weight: bold; width: 300px; padding: 20px; text-align: center; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 0; } .home_overlay_submit, .overlay_submit { border: 4px solid #fff !important; padding-top: 6px !important; padding-bottom: 6px !important; font-weight: 900 !important; text-transform: uppercase !important; font-size: 0.8em !important; line-height: 1 !important; -webkit-border-radius: 10px !important; -moz-border-radius: 10px !important; border-radius: 10px !important; } .home_overlay_submit:hover .overlay_submit:hover { background-color: #fff !important; color: #ed2323 !important; } /** A/B Testing front pages **/ /** TWO **/ .home_2_text { font-family: Georgia, serif; } .home_2_text input, .home_3_text input { width: 65%; float: left; margin-right: 5%; padding: 11px; border-radius: 5px; border: 1px solid #000; } .home_2_text button, .home_3_text button, .home_ann_emailbox button, .home_de_emailbox button { width: 30%; float: left; } .home_2_emailbox, .home_3_emailbox { background-color: rgba(0, 0, 0, 0.06); padding: 10px; font-size: 0.8em; } .home_2_text .button, .home_3_text .button, .home_ann_emailbox .button, .home_de_emailbox .button { font-family: "brandon-grotesque", "Brandon Grotesque", sans-serif !important; margin-left: auto !important; margin-right: auto !important; text-transform: uppercase; background-color: #fff; border: 2px solid #ed2323; font-weight: 900; display: block; color: #ed2323; } .home_2_text .button:hover, .home_3_text .button:hover, .home_ann_emailbox .button:hover, .home_de_emailbox .button:hover{ background-color: #ed2323; border: 2px solid #ed2323; color: #fff; } .home_ann_emailbox { font-size: 1em; margin-top: 1em; margin-bottom: 1em; color: #3CB0A2; } .home_ann_emailbox button { background-color:#3CB0A2; } .home_ann_emailbox input { border-color:#3CB0A2; } .home_de_emailbox { font-size: 1em; margin-top: 1em; margin-bottom: 1em; color: #ed2323; } .home_de_emailbox button { background-color:#ed2323; } .home_de_emailbox input { border-color:#ed2323; } /** MY WHEELYS **/ #mywheelys {margin-top: 100px;} /** Directory **/ .gmw-form-5 {display: none;} .gmw-results-wrapper-5 #members-list li {margin-top: 20px !important;} /** Map Popups replace standard no-profile pic pic **/ #home img[src*="/mystery-man.jpg"] { width: 0 !important; height: 0 !important; } #mywheelys_world img[src*="/mystery-man.jpg"] { width: 0 !important; height: 0 !important; } /** LOGIN PAGE **/ #loginpage { width: 320px; margin-left: auto; margin-right: auto; margin-top: 50px; } #loginpage input[type="submit"] {margin-top: 2em; padding: 10px; border: 3px solid #ed2323; text-align: center; border-radius: 10px;color: #ed2323; text-decoration: none; font-weight: 700; background:#fff; width: 100%;} #loginpage input[type="submit"]:hover, button:hover {background-color: #ed2323; color:#fff;} #loginpage label {width: 100%; display: block; float: left; margin-top: 2em;} #loginpage input[type="password"], #loginpage input[type="text"] {width: 100%; padding: 10px; display: block; float: left; font-family: "brandon-grotesque", "Brandon Grotesque", sans-serif;} #loginpage span {text-align: center; display: block; width: 100%;} /** SIDEBAR **/ .mywheelyslogo_mobile {display: none;} /* Move everything over when sidebar is visible */ body.page-template-buddypress #top, body.page-template-buddypress nav, body.page-template-buddypress #footer, body.buddypress #top, body.buddypress nav, body.buddypress #footer, #mywheelys, body.page-template-template-mywheelys-content #top, body.page-template-template-mywheelys-content nav, body.page-template-template-mywheelys-content #footer, body.menu-generator #top, body.menu-generator nav, body.menu-generator #footer, body.shipping-payment #top, body.shipping-payment nav, body.shipping-payment #footer, body.woocommerce #footer { margin-left: 160px; } #mywheelys {margin-left: 160px;} body.page-template-template-mywheelys-login #top, body.page-template-template-mywheelys-login nav, body.page-template-template-mywheelys-login #footer, body.page-template-template-mywheelys-login .page {margin-left: 160px;} /* When not to display sidebar */ body.register .sidebar, body.public .sidebar {display: none;} /* Don’t move over the page for the registration page, since there is no sidebar */ body.register #top, body.register nav, body.register #footer, body.register #mywheelys {margin-left: 0;} body.world #top, body.world nav, body.world #footer, body.world #mywheelys {margin-left: 0;} body.public #top, body.public nav, body.public #footer, body.public #mywheelys {margin-left: 0;} body.public.overlay:before {margin-left: 0;} body.buddypress.logged-in.overlay:before {margin-left: 160px;} body.public.logged-in #top, body.public.logged-in nav, body.public.logged-in #footer, body.public.logged-in #mywheelys {margin-left: 160px;} body.public.logged-in .sidebar {display: block;} /* SIDEBAR */ .sidebar { width: 160px; height: 100%; position: fixed; left: 0; top: 0; background-color: #F8F8FA; padding: 20px; line-height: 2.5; font-size: 0.8em; } .sidebar li { list-style: none; } .sidebar a { text-decoration: none; color: #89898A; } .sidebar li.current-menu-item a {color: #000;} #mywheelyslogo { background-image: url(images/mywheelyslogo.png); background-repeat: no-repeat; background-position: center center; background-size: 100%; width: 100px; height: 48px; margin-top: -10px; text-indent: -99999px; margin-bottom: 20px; } /** PROFILE **/ #buddypress table.profile-fields tr td.label { width: 1px; border: none; white-space: nowrap; } #buddypress div#item-header #item-header-cover-image #item-header-content {margin-top: -160px !important;} body.profile .gmnoprint {display: block !important;} body.profile .gm-style-cc {display: none !important;} #buddypress ul.item-list li {padding: 0; border: 0; font-size: 0.8em;} /* #buddypress div.item-list-tabs#subnav {display: none;} */ body.logged-in.my-profile #buddypress div.item-list-tabs#subnav {display: block;} #buddypress #activity-stream {padding-top: 20px;} body.public #item-nav {display: none;} body.my-profile.logged-in #item-nav {display: block !important;} .profile_field_label, .profile_field_content {display: inline-block;} .profile_field_label p, .profile_field_content p {margin:0;} #buddypress div.activity-meta {margin:0; margin-bottom: 10px;} .time-since {font-size: 0.8em;} #buddypress .activity-list .activity-content .activity-header, #buddypress .activity-list .activity-content .comment-header {line-height: 1.2;} #buddypress #activity-stream p {margin: 0;} #buddypress .activity-list .activity-content .activity-inner, #buddypress .activity-list .activity-content blockquote {margin: 0;} span.bikeno {font-size: 0.8em;} .field_9 {display: none !important;} /** REGISTRATION **/ body.register {line-height: 1.8;} body.register .width_1200 {width: 960px;} body.register #sk-holder {display: none;} body.register #buddypress .standard-form #basic-details-section { float: none; width: auto; } body.register #buddypress .standard-form #profile-details-section {float: none; width: auto;} body.register #buddypress .standard-form#signup_form input { width: auto !important; border: 0; border-bottom: 1px solid #9b9b9b; background: transparent; border-radius: 0; color: #ed2323; font: inherit; font-size: 100%; padding: 0; padding-left: 5px; line-height: 1.1; text-align: center; } body.register #buddypress .standard-form#signup_form input:focus { } body.register #buddypress .standard-form#signup_form input#field_8 {width: 100% !important; text-align: left !important;} body.register #buddypress .standard-form#signup_form input#signup_password {width: 105px !important;} body.register #buddypress .standard-form#signup_form input#signup_password_confirm {width: 105px !important;} body.register #buddypress .standard-form#signup_form input#field_5 {width: 360px !important;} body.register #buddypress .standard-form#signup_form input#field_6 {width: 285px !important;} body.register #buddypress .standard-form#signup_form input#field_7 {width: 360px !important;} body.register #buddypress .standard-form#signup_form input#field_11 {display: none !important;} body.register .field_type_textbox {float: left; margin-right: 10px;} body.register #buddypress .standard-form label, body.register #buddypress .standard-form span.label { float: left; margin: 0; font-weight: normal; display: none; } body.register #buddypress .standard-form#signup_form input[type="submit"] { margin-top: 1em; padding: 10px 20px; border: 3px solid #ed2323; text-align: center; border-radius: 10px; color: #ed2323; text-decoration: none; font-weight: 500; background:#fff; width: 100% !important; } body.register #buddypress .standard-form#signup_form input[type="submit"]:hover {color: #fff; background:#ed2323;} #buddypress .standard-form#signup_form div.submit { float: none; margin-left: auto; margin-right: auto; width: 320px; } /** Payment pages **/ /** Shipping **/ #pay_for_shipping_EU, #pay_for_shipping_USA, #pay_for_shipping_ROTW {display: none;} #pay_for_shipping_AustraliaBrooklynn, #pay_for_shipping_AustraliaBrisbane, #pay_for_shipping_AustraliaQueensland, #pay_for_shipping_AustraliaGreenmount, #pay_for_shipping_Brazil, #pay_for_shipping_CanadaOttawa, #pay_for_shipping_CanadaQuebec, #pay_for_shipping_CanadaBritishColumbia, #pay_for_shipping_Colombia, #pay_for_shipping_Colombia_W3, #pay_for_shipping_ColombiaBogota, #pay_for_shipping_India, #pay_for_shipping_Ecuador, #pay_for_shipping_GeorgiaTbilisi, #pay_for_shipping_Guatemala, #pay_for_shipping_Indonesia, #pay_for_shipping_Japan, #pay_for_shipping_Kuwait, #pay_for_shipping_Lebanon, #pay_for_shipping_MexicoJalisco, #pay_for_shipping_MexicoTezoyuca, #pay_for_shipping_NewZealand, #pay_for_shipping_Singapore, #pay_for_shipping_SriLanka, #pay_for_shipping_SouthKorea, #pay_for_shipping_Thailand, #pay_for_shipping_Kenya, #pay_for_shipping_Essakkati, #pay_for_shipping_Fakiri, #pay_for_shipping_DiazBL, #pay_for_shipping_HBL, #pay_for_shipping_Ivann, #pay_for_shipping_Nglia, #pay_for_shipping_Junet, #pay_for_shipping_Cyprus { display: none; } .sc-payment-details-wrap {margin-top: 100px; margin-bottom: 250px;} /** Other Buddypress stuff **/ #buddypress .field-visibility-settings-toggle {display: none !important;} span.required {opacity: 0.2; margin-left: -1px;} .bp-widget.base h4 {display: none;} input#messages_search_submit {padding: 3px;} li.feed {display: none;} /* We don’t need RSS Buttons */ #buddypress #item-header-cover-image {z-index: 1;} h2.user-nicename { font-size: 1.5em !important; font-weight: 500; text-transform: none; text-align: left; margin: 0; } /** Buddypress Responsive stuff, to be fixed later **/ @media screen and (max-width: 782px) { #buddypress div#item-header #item-header-cover-image #item-header-content {margin-top: 0 !important;} } /** BuddyPress Map Stuff **/ body.world #members-list li:first-child {display: none;} /** Hides root from World Map page **/ img.gmw-map-loader { width: 73px !important; left: 45% !important; top: 40% !important; } div.gmw-sl-wrapper, .widget div.gmw-sl-wrapper { box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none;; padding: 0; border: 0; } div.gmw-sl-wrapper .gmw-sl-map-wrapper, .widget div.gmw-sl-wrapper .gmw-sl-map-wrapper { background: #fff; border: none; padding: 0; } .gmw-single-member-sc-wrapper .map-wrapper { width: 100% !important; height: 400px !important; } /* current location shortcode */ #gmw-cl-form-wrapper { display: none; width: 300px; min-height: 140px; position: fixed; top: 35%; left: 50%; background: white; border: 1px solid #ddd; padding: 5px; -moz-box-shadow: 0px 0px 5px #ddd; -webkit-box-shadow: 0px 0px 5px #ddd; box-shadow: 0px 0px 5px #ddd; z-index: 99999999999; } #gmw-cl-close-btn { float: right; margin-top: -3px; font-size: 16px; color: #777; cursor: pointer; } #gmw-cl-form { text-align: center; } #gmw-cl-info-wrapper div { margin: 5px 0px; } /** gmw-sl-style.css **/ /** GMW Single Location style **/ div.gmw-sl-wrapper, .widget div.gmw-sl-wrapper { padding: 0; background: white; margin-bottom:15px; } div.gmw-sl-wrapper h3.gmw-sl-title, .widget div.gmw-sl-wrapper h3.gmw-sl-title { margin:1px 0px 10px; padding:8px 10px; border-bottom: 1px solid #ededed; } div.gmw-sl-wrapper h3.gmw-sl-title a, .widget div.gmw-sl-wrapper h3.gmw-sl-title a { color:#333; } div.gmw-sl-wrapper .gmw-sl-address-wrapper, div.gmw-sl-wrapper .gmw-sl-distance-wrapper, div.gmw-sl-wrapper .gmw-sl-directions-wrapper, div.gmw-sl-wrapper .gmw-sl-live-directions-trigger-wrapper, div.gmw-sl-wrapper .gmw-sl-additional-info-wrapper, div.gmw-sl-wrapper .gmw-get-directions-wrapper, .widget div.gmw-sl-wrapper .gmw-sl-address-wrapper, .widget div.gmw-sl-wrapper .gmw-sl-distance-wrapper, .widget div.gmw-sl-wrapper .gmw-sl-directions-wrapper, .widget div.gmw-sl-wrapper .gmw-sl-live-directions-trigger-wrapper, .widget div.gmw-sl-wrapper .gmw-sl-additional-info-wrapper, .widget div.gmw-sl-wrapper .gmw-get-directions-wrapper { padding:5px 2px 6px; border-bottom: 1px solid #ededed; line-height: 20px; margin-bottom: 10px; } div.gmw-sl-wrapper div.gmw-sl-address-wrapper i.gmw-location-icon, div.gmw-sl-wrapper div.gmw-sl-distance-wrapper i.gmw-distance-icon, div.gmw-sl-wrapper i.gmw-directions-icon, div.gmw-sl-wrapper i.gmw-live-directions-icon { color:lightcoral; font-size: 14px; margin-right: 3px; } div.gmw-sl-wrapper .gmw-sl-distance-wrapper { } div.gmw-sl-wrapper .gmw-sl-additional-info-wrapper ul, .widget div.gmw-sl-wrapper .gmw-sl-additional-info-wrapper ul { list-style:none; padding:0px; margin:0px; } div.gmw-sl-wrapper .gmw-sl-additional-info-wrapper ul li, .widget div.gmw-sl-wrapper .gmw-sl-additional-info-wrapper ul li { padding:0px; margin:0px; } div.gmw-sl-wrapper .gmw-sl-additional-info-wrapper ul li span.label, .widget div.gmw-sl-wrapper .gmw-sl-additional-info-wrapper ul li span.label { color:lightcoral; } div.gmw-sl-wrapper .gmw-sl-map-wrapper, .widget div.gmw-sl-wrapper .gmw-sl-map-wrapper { border: 0; background: transparent; display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; padding: 0; max-width:100%; margin-bottom:10px; } div.gmw-sl-wrapper .map-wrapper .gmw-sl-map-loader, .widget div.gmw-sl-wrapper .map-wrapper .gmw-sl-map-loader { position:absolute; left:40%; top:40%; } div.gmw-sl-wrapper .gmw-sl-map-wrapper.gmw-expanded-map, .widget .gmw-sl-wrapper div.gmw-sl-map-wrapper.gmw-expanded-map { position:fixed; z-index:9999999; width:100% !important; height:100% !important; left:0px; top:0px; } /** info window **/ .gmw-sl-iw-wrapper .gmw-sl-additional-info-wrapper ul { list-style:none; padding:0px; margin:0px; font-size:12px; } .gmw-sl-iw-wrapper .gmw-sl-additional-info-wrapper ul li { padding:0px; margin:0px; line-height: 20px; } .gmw-sl-iw-wrapper .gmw-sl-additional-info-wrapper ul li a, .gmw-sl-iw-wrapper .gmw-sl-additional-info-wrapper ul li span.label { color:lightcoral; font-weight: 500 } .gmw-sl-iw-wrapper .gmw-sl-address-wrapper { } .gmw-sl-iw-wrapper i.gmw-location-icon { font-size:18px; } .gmw-sl-iw-wrapper .gmw-sl-distance-wrapper { float: right; font-size: 12px } /** info window end **/ /** get directions link **/ .gmw-sl-directions-wrapper .address-field-wrapper { position:relative; border: 1px solid #e5e5e5; height:36px; margin-bottom: 10px; line-height: 20px; } .gmw-sl-directions-wrapper .address-field-wrapper input[type="text"] { box-sizing: border-box; border: 0px; padding:7px 35px 7px 45px; margin:0px; font-size: 12px; display: inline-block; color:#555; width: 100%; height: 100% } .gmw-sl-directions-wrapper .address-field-wrapper label { font-size: 12px; padding:8px; float: left; display: inline-block; max-width:40px; position: absolute; color:lightcoral; } .gmw-sl-directions-wrapper .address-field-wrapper .get-directions-submit-icon { font-size: 18px; padding: 8px 8px; position: absolute; top:0; right: 0; text-decoration: none; cursor: pointer; color: lightcoral; } div.gmw-sl-directions-wrapper a.gmw-sl-directions-form-trigger { color:lightcoral; } div.gmw-sl-directions-wrapper div.gmw-sl-directions-trigger-wrapper { margin-bottom:5px; } /** Live directions **/ .gmw-sl-live-directions-wrapper, .gmw-sl-live-directions-panel-wrapper { display:none; } .gmw-sl-live-directions-wrapper .gmw-get-directions-wrapper form input[type="text"] { box-sizing: border-box; border: 0px; padding:7px 35px 7px 45px; margin:0px; font-size: 12px; display: inline-block; color:#555; width: 100%; height: 100% } div.gmw-sl-wrapper div.gmw-sl-live-directions-trigger-wrapper a.gmw-sl-live-directions-trigger { color:lightcoral; } div.gmw-sl-wrapper div.gmw-sl-live-directions-trigger-wrapper i.live-directions-icon::before { color:lightcoral; font-size:16px; margin-right:5px; } .gmw-sl-live-directions-wrapper .get-directions-address-field-wrapper { position:relative; } .gmw-sl-live-directions-wrapper .get-directions-address-field-wrapper .address-wrapper { position:relative; border: 1px solid #e5e5e5; height:36px; margin-bottom: 10px; line-height: 20px; } .gmw-sl-live-directions-wrapper .get-directions-address-field-wrapper label { font-size: 12px; padding:8px; float: left; display: inline-block; max-width:40px; position: absolute; } .gmw-sl-live-directions-wrapper .gmw-get-directions-wrapper a.get-directions-trigger { font-size:11px; display:inline-block; } .gmw-sl-live-directions-wrapper .get-directions-submit-icon { font-size: 26px; padding: 6px 10px; width:25px; position: absolute; top:0; right: 0; } .gmw-sl-live-directions-wrapper .get-directions-submit-icon::before { color:lightcoral } .gmw-sl-live-directions-wrapper ul.gmw-get-directions-options-holder { border:1px solid #eaeaea; background: #fbfbfb; margin-bottom: 5px; } .gmw-sl-live-directions-wrapper .gmw-get-directions-options-wrapper { display: inline-block; width:48%; margin-top: 15px; } .gmw-sl-live-directions-wrapper .gmw-get-directions-options-wrapper span { font-size:12px; float:left; padding:5px 5px; border-bottom: 1px solid #ddd; width: 90%; text-align: left; } .gmw-sl-live-directions-wrapper ul.gmw-get-directions-options { list-style:none; margin-top: 5px; text-align: center; position: relative; display: inline-block; width:100%; box-sizing: border-box; box-sizing: border-box; padding-bottom: 5px; } .gmw-sl-live-directions-wrapper ul.gmw-get-directions-options li { float: left; text-align: center; width:25%; margin: 0px; } .gmw-sl-live-directions-wrapper ul.gmw-get-directions-options ul.unit-system-options, .gmw-sl-live-directions-wrapper ul.gmw-get-directions-options ul.route-avoid-options { background:none; margin-top:8px; } .gmw-sl-live-directions-wrapper ul.unit-system-options li, .gmw-sl-live-directions-wrapper ul.route-avoid-options li { float:none; line-height: 26px; text-align: left; font-size: 12px; width:100%; } .gmw-sl-live-directions-wrapper ul.unit-system-options li label, .gmw-sl-live-directions-wrapper ul.route-avoid-options li label { margin-left:5px; } .gmw-sl-live-directions-wrapper ul.travel-mode-options li a:link, .gmw-sl-live-directions-wrapper ul.travel-mode-options li a:visited { padding:12px 0px; font-size: 11px; text-decoration: none; display: inline-block; color:#273629; width:100%; border-bottom: 1px solid #ccc; border-right: 1px solid #eaeaea; } .gmw-sl-live-directions-wrapper ul.travel-mode-options li a:hover, .gmw-sl-live-directions-wrapper ul.travel-mode-options li a:visited, .gmw-sl-live-directions-wrapper ul.travel-mode-options li a.active { background: white; border-bottom: 1px solid lightcoral; } /** get directions panel **/ .gmw-sl-live-directions-panel-wrapper .directions-panel-wrapper { margin-top: 15px } .gmw-sl-live-directions-panel-wrapper .directions-panel-wrapper .adp-list { background: #fff; border: 0px; cursor: pointer; padding: 0px; font-family: "brandon-grotesque", "Brandon Grotesque", sans-serif; font-weight: 300; color: #333; font-size: 12px; line-height: 18px; margin-bottom: 10px; } .gmw-sl-live-directions-panel-wrapper .directions-panel-wrapper table tr td, .gmw-sl-live-directions-panel-wrapper .directions-panel-wrapper table { border:0px; } .gmw-sl-live-directions-panel-wrapper .directions-panel-wrapper .adp-list table tr td { font-weight: normal; text-align: left; margin:5px; padding:7px 10px; border-bottom: 1px solid #e5e5e5; } .gmw-sl-live-directions-panel-wrapper .directions-panel-wrapper .adp-list table tr td.adp-listheader { padding:10px; border-bottom: 1px solid #e5e5e5; font-family: "brandon-grotesque", "Brandon Grotesque", sans-serif; font-weight: 300; color: #2c2c2c; font-size: 14px; border-top: 1px solid #e5e5e5; } .gmw-sl-live-directions-panel-wrapper .directions-panel-wrapper .adp-list b { display: block; font-family: "brandon-grotesque", "Brandon Grotesque", sans-serif; font-weight: 300; color: #000; font-size: 13px; } .gmw-sl-live-directions-panel-wrapper .directions-panel-wrapper .adp-list table tr td span.adp-listinfo span { font-family: "brandon-grotesque", "Brandon Grotesque", sans-serif; font-weight: 300; color: #2c2c2c; font-size: 11px; } .gmw-sl-live-directions-panel-wrapper .directions-panel-wrapper .adp-list table tr td.adp-listsel { text-decoration: none; background:none; background: #fafafa; } .gmw-sl-live-directions-panel-wrapper .directions-panel-wrapper .adp { border:1px solid #eaeaea; padding: 5px; } .gmw-sl-live-directions-panel-wrapper .directions-panel-wrapper table.adp-placemark { background:none; border:0px; margin:0px; background: #fbfbfb; } .gmw-sl-live-directions-panel-wrapper .directions-panel-wrapper table.adp-placemark img { display:none; } .gmw-sl-live-directions-panel-wrapper .directions-panel-wrapper table.adp-placemark tbody tr td.adp-text { vertical-align: middle; padding: 8px 0px; line-height: 24px; color: #2c2c2c; font-size: 14px; font-weight: 400; } .gmw-sl-live-directions-panel-wrapper .directions-panel-wrapper table.adp-directions tbody tr { height:50px; border-bottom: 1px solid #e9e9e9; } .gmw-sl-live-directions-panel-wrapper .directions-panel-wrapper table.adp-directions tbody tr:hover { background:#f7f7f7; } .gmw-sl-live-directions-panel-wrapper .directions-panel-wrapper table.adp-directions tbody td { font-weight: normal; text-align: left; padding: 10px 5px !important; line-height: 20px; font-family: "brandon-grotesque", "Brandon Grotesque", sans-serif; font-weight: 300; color: #2c2c2c; font-size: 12px; } .gmw-sl-live-directions-panel-wrapper .directions-panel-wrapper div.adp-summary { padding:0px 0px 8px 10px; background: #fbfbfb; font-size: 12px; border-bottom: 1px solid #e5e5e5; } .gmw-sl-live-directions-panel-wrapper .directions-panel-wrapper table.adp-directions { width:100%; margin-bottom: 0px } .gmw-sl-live-directions-panel-wrapper .directions-panel-wrapper .warnbox-content { padding: 5px 8px; line-height: 18px; font-size: 12px } .gmw-sl-live-directions-panel-wrapper .directions-panel-wrapper #error-message { background: #fff1a8; padding: 6px 8px; line-height: 18px; font-size: 12px; } .gmw-sl-live-directions-panel-wrapper .directions-panel-wrapper div.adp-legal { background: #fbfbfb; padding: 0px 10px 5px; font-size: 12px; border-bottom: 1px solid #e5e5e5; } /* GMW FL default search results stylesheet */ .gmw-fl-radius-wrapper { padding: 3px 5px; background: #f9f9f9; border: 1px solid #ddd; font-size: 11px; text-align: center; display: inline !important; margin:5px; } .gmw-fl-per-page-dropdown { margin:0px 15px 0px 5px; float: left; height:25px !important; font-size: 12px; border:1px solid #ccc; color:#444; } .gmw-fl-member-count { display: inline; } /* pagination */ .gmw-fl-default-results-wrapper ul.gmw-pagination { float: right; text-align: center; margin:0px; list-style:none; padding:0px; } .gmw-fl-default-results-wrapper ul.gmw-pagination li { text-align:center; display: inline-block; margin:0 0 0 2px; } .gmw-fl-default-results-wrapper ul.gmw-pagination li a, .gmw-fl-default-results-wrapper ul.gmw-pagination li span { padding: 4px 3px; font-size: 12px; text-decoration: none; background-color: #f7f7f7; border:1px solid #d7d7d7; display: inline-block; color:#1B5A64; } .gmw-fl-default-results-wrapper ul.gmw-pagination li a:hover, .gmw-fl-default-results-wrapper ul.gmw-pagination li span { background-color: #e5e5e5; border:1px solid #ddd; } /* SINGLE MEMBER WIDGET */ .gmw-single-member-sc-wrapper { } .gmw-single-member-sc-wrapper .map-wrapper { border: 0; padding: 0; background: #fff; display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; } .gmw-single-member-sc-wrapper .address-wrapper { margin: 5px 0; clear: both; } .gmw-single-member-sc-wrapper .direction-wrapper { clear: both; } .gmw-single-member-sc-wrapper .single-member-form-wrapper { } /* Location page */ #gmw-your-location-wrapper .field-title { margin: 15px 2px 5px; display: block; font-size: 14px; color:#555; font-weight: normal; } #gmw-your-location-wrapper input[type="text"] { width: 100%; line-height: 23px; color: #777; font-family: "brandon-grotesque", "Brandon Grotesque", sans-serif; font-size: 12px; padding: 5px 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #gmw-your-location-wrapper input[type="text"]:focus { border: 1px solid #ccc; } #gmw-your-location-wrapper input[type="button"] { margin-top:5px; } #gmw-your-location-wrapper div#your-location-section { background: #EAF2FA; border: #c7d7e2 solid 1px; } #gmw-your-location-wrapper div#your-location-section p { padding:7px 10px; margin:0px; background: white; border-bottom: #c7d7e2 solid 1px; } #gmw-your-location-wrapper div#your-location-section-inner { padding:5px; } #gmw-your-location-wrapper form { display: none; padding: 5px; background: #fafafa; border: 1px solid #e1e1e1; margin-top: 10px; margin-bottom:20px; } #gmw-your-location-wrapper form label { font-family: "brandon-grotesque", "Brandon Grotesque", sans-serif; font-size: 12px; padding: 0px; text-shadow: 1px 1px 1px white; margin: 5px; } #gmw-your-location-wrapper form .gmw-yl-tab-wrapper { margin-top: 0px; width: 100%; background: #fbfbfb; border: 1px solid #ddd; margin-bottom: 15px; display: inline-block; } #gmw-your-location-wrapper form .gmw-yl-tab-wrapper table { margin-bottom: 0px !important; border: 0px !important; background: white } #gmw-your-location-wrapper form .gmw-yl-tab-wrapper table td { border: 0px; } #gmw-your-location-wrapper form .gmw-yl-tab-wrapper table tr th { width: 30%; padding:5px 15px; } #gmw-your-location-wrapper form .gmw-yl-tab-wrapper table tr td { width: 70%; } #gmw-your-location-wrapper form #gmw-yl-tabs { list-style: none; margin: 5px 0px; } #gmw-your-location-wrapper form #gmw-yl-tabs li { float: left; padding: 5px 10px; border: 1px solid #ddd; margin: 0px; margin-right: 5px; border-bottom: 0px; cursor: pointer; background: #f5f5f5; } #gmw-your-location-wrapper form #gmw-yl-tabs .active { background: white; } #gmw-your-location-wrapper form #gmw-yl-tabs li input { padding: 8px 10px; } #gmw-your-location-wrapper form #gmw-yl-map-icons-tab-wrapper img { box-shadow:none; border:0px; } #gmw-your-location-wrapper form .map-wrapper { margin-top: 5px; border: 1px solid #CCC; padding: 3px; background: white; } #gmw-your-location-wrapper img#gmw-yl-spinner { max-width: 22px; box-shadow:none; vertical-align: middle; display:none; } #gmw-your-location-wrapper div#gmw-yl-message { margin-top:5px; display:inline-block; width:100%; display:none; } #gmw-your-location-wrapper div#gmw-yl-message p { padding:6px 10px; background: #fafafa; border:1px solid #e1e1e1; } /** * GEO my WP main stylesheet * @author Eyal Fitoussi */ .gm-style {font-family: "brandon-grotesque", "Brandon Grotesque", sans-serif !important;} .gm-style .gm-style-iw {font-weight: 400 !important; top: 13px !important; left: 14px !important; overflow: visible;} .wppl-fl-info-window .wppl-info-window-thumb img { width: 120px; height: 120px; padding: 5px; float: left; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .wppl-fl-info-window .wppl-info-window-thumb img {padding: 0 !important;} div.pac-container { z-index:99999999; } /** map **/ div.gmw-map img { max-width: initial !important; } div.gmw-map-wrapper { position: relative; display: inline-block; } div.gmw-map-wrapper.gmw-map-frame { border: 1px solid #999; padding: 2px; background: #f7f7f7; border-bottom: 1px solid #BBB; border-right: 1px solid #BBB; border-left: 1px solid #DDD; border-top: 1px solid #EEE; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } div.gmw-map-wrapper .gmw-map-loader { position:absolute; left:45%; top:45%; } div.gmw-map-wrapper.gmw-expanded-map { position:fixed !important; z-index:99999999999 !important; width:100% !important; height:100% !important; left:0px; top:0px; } span.gmw-resize-map-trigger.fa-expand, span.gmw-resize-map-trigger.fa-compress { background: white; color:#555; cursor:pointer; padding: 2px 4px; font-size: 13px; border: 1px solid rgba(0, 0, 0, 0.14902); -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; -webkit-background-clip: padding-box; background-clip: padding-box; margin-top:5px; margin-right: 5px; } /** end map **/ .gmw-no-results-wrapper { margin-top:15px; } .gmw-no-results-wrapper p { font-weight: normal; margin-top: 3px; text-decoration: none; background: #f8f8f8; border: 1px solid #e1e1e1; color: #440; padding: 10px 15px; display: block; } .gmw-geocode-error p { background-color: #FFDDDD; border: 1px solid #CC4222; } .gmw-form-wrapper input[type="text"] { -ms-word-break: normal !important; word-break: normal !important; word-break :normal !important; -webkit-hyphens: none !important; -moz-hyphens: none !important; hyphens: none !important; } /* single location shortcode */ .gmw-single-post-sc-wrapper { } /* Loading scren */ .gmw-screen-loader-wrapper { display: none; width: 100%; height: 100%; position: fixed; background: #f8f8f8; top: 0; opacity: 0.93; } .gmw-screen-loader-wrapper .gmw-loading-message-wrapper { margin: 0 auto; position: absolute; top: 40%; text-align: center; width: 100%; } .gmw-screen-loader-wrapper .gmw-loading-message-wrapper p { margin: 20px 0px; color: rgb(0, 150, 255); font-size: 18px; } #gmw-locator-success-message { font-size: 14px; color: #40728F; text-align: center; } #gmw-locator-error-message { font-size: 14px; color: red; text-align: center; } /* post types info window */ .wppl-pt-info-window { float: left; width: 400px; } .wppl-pt-info-window .wppl-info-window-thumb { float: left; } .wppl-pt-info-window .wppl-info-window-thumb img { width: 120px; height: 120px; padding: 5px; } .wppl-pt-info-window .wppl-info-window-info { float: left; width: 230px; font-size: 12px; } .wppl-pt-info-window .wppl-info-window-permalink { float: left; width: 230px; font-size: 16px; text-transform: capitalize; } .wppl-pt-info-window .wppl-info-window-info td { padding: 2px 5px; } .wppl-pt-info-window .wppl-info-window-info span { color: #5E5858; font-weight: bold; } /* friends locator info window */ .gmw-fl-activity-map-marker { font-size: 14px; margin-right:3px } .wppl-fl-info-window { float: left; width: auto; } .wppl-fl-info-window .wppl-info-window-thumb { float: left; } .wppl-fl-info-window .wppl-info-window-info { float: left; width: auto; font-size: 12px; padding: 0; margin-left: 0; } .wppl-info-window-info a { text-decoration: none; } .wppl-fl-info-window .wppl-info-window-permalink { float: left; width: auto; font-size: 16px; text-transform: capitalize; } .wppl-fl-info-window .wppl-info-window-info span { color: #5E5858; font-weight: bold; } /* groups locator info window */ .wppl-gl-info-window { float: left; width: 400px; } .wppl-gl-info-window .wppl-info-window-thumb { float: left; } .wppl-gl-info-window .wppl-info-window-thumb img { width: 80px; height: auto; padding: 5px; margin-right: 5px; } .wppl-gl-info-window .wppl-info-window-info { float: left; width: 230px; font-size: 12px; } .wppl-gl-info-window .wppl-info-window-permalink { float: left; width: 230px; font-size: 16px; text-transform: capitalize; } .wppl-gl-info-window .wppl-info-window-info td { padding: 2px 5px; } .wppl-gl-info-window .wppl-info-window-info span { color: #5E5858; font-weight: bold; } /* groups locator */ #gmw-gl-group-address-wrapper { margin-top:20px; display:block; width: } .gmw-gl-mt-address-wrapper { display:inline-block; } .gmw-gl-gm-iw-wrapper { min-width:200px; } .gmw-gl-gm-iw-wrapper .gmw-gl-gm-iw-thumb { display: inline-block; vertical-align: top; margin:5px 5px 0px 0; } .gmw-gl-gm-iw-wrapper .gmw-gl-gm-iw-info { display: inline-block; } .gmw-gl-gm-iw-wrapper .gmw-gl-gm-iw-thumb img.avatar { width: 65px; height: auto; } div.gmw-form-wrapper .gmw-address-field-wrapper { position:relative; } div.gmw-form-wrapper div.gmw-locator-btn-within-wrapper { cursor: pointer; position: absolute; right:0px; top:0px; padding: 5px 5px ; width:initial; height: initial; z-index: 1; background: none; border: 0px; font-size:16px; } div.gmw-form-wrapper div.gmw-locator-btn-wrapper i.gmw-locator-btn-within { font-size:24px; } div.gmw-form-wrapper div.gmw-locator-btn-within-wrapper:hover { background: none; border: 0px; } i.fa.fa-map-marker.gmw-locator-btn-within.gmw-locator-button::before { content:"\f041" !important; } /** AROUND THE WORLD **/ #mywheelys_world ul li { margin-bottom: 30px !important; } #mywheelys_world #pag-top { display: none; } body.world #buddypress div.dir-search { margin-top: 10px; } #mywheelys_world .item-avatar { background-color: rgba(0, 0, 0, 0.15); width: 50px; height: 50px; float: left; margin-right: 10px; } #mywheelys_world ul.item-list {border-top: none !important;} #world_map { width: 100%; height: 500px; background-color: #bbbbbb; } .gmw-results-wrapper {width: 600px; margin: 0 auto;} #buddypress div.pagination .pag-count {margin-left: 0 !important;} #mywheelys_world form { width: 600px; margin-left: -300px; position: absolute; top: 390px; left: 50%; } body.world #members_search_submit {display: none;} #buddypress div.dir-search { } body.world .gmw-form-1 input[type=text], body.results .gmw-form-1 input[type=text], body.results .gmw-form-4 input[type=text] { width: 100%; height: 80px; padding: 10px; font-size: 1.4em; line-height: 1.5; padding: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: 2px solid #fff; text-transform: capitalize; } body.world .gmw-form-1 input[type=text]:focus, body.results .gmw-form-1 input[type=text]:focus, body.results .gmw-form-4 input[type=text]:focus { outline: none; } body.world #gmw-submit-1, body.results #gmw-submit-1, body.results #gmw-submit-4 { position: absolute; top: 0; right: 5px; background-color: transparent; border: none; width: auto; line-height: 80px; color: #A9A9A9; height: 80px; } body.world #gmw-submit-1:hover { color: #000; } body.world .action {display: none;} /* div#gmw-map-wrapper-1.gmw-map-wrapper.gmw-map-wrapper-1.gmw-friends-map-wrapper.gmw-fl-map-wrapper {height: 400px !important;} */ /* Results */ body.results #mywheelys_world_results form { width: 600px; margin-left: -300px; position: absolute; top: 190px; left: 50%; } body.results .gmw-form-1 input[type=text]:focus, body.results .gmw-form-4 input[type=text]:focus { color: #000000; border: 2px solid #ed2323; -webkit-transition: .2s; -o-transition: .2s; -ms-transition: .2s; -moz-transition: .2s; transition: .2s; } /* No Results */ .gmw-no-results-wrapper { width: 600px; margin-left: -300px; position: absolute; top: 300px; left: 50%; height: 160px; background-color: #fff; text-align: center; padding: 30px; font-size: 1.5em; } .gmw-no-results-wrapper p { font-weight: normal; margin-top: 0; text-decoration: none; background: transparent; border: none; color: #000; padding: 0; display: inline; } .gmw-no-results-wrapper span { font-size: 0.8em; } .gmw-no-results-wrapper a { color: #ed2323; text-decoration: none; font-weight: bold; } .gmw-no-results-wrapper a:hover { color: #000; } /* HOME */ #home article {margin-bottom: 0;} #home_bigslide { background-color: #ed2323; width: 100%; height: 400px; position: relative; } .bigslide { background-color: #ed2323; width: 100%; height: 400px; position: relative; text-align: center; background-position: center center; background-repeat: no-repeat; background-size: cover; } #home_bigslide .owl-controls { z-index: 11; position: absolute; top: 20%; width: 100%; margin: 0; opacity: 0.50; -moz-opacity: 0.50; -khtml-opacity: 0.50; -webkit-transition: .2s; -o-transition: .2s; -ms-transition: .2s; -moz-transition: .2s; transition: .2s; } #home_bigslide .owl-controls:hover { opacity: 0.90; -moz-opacity: 0.90; -khtml-opacity: 0.90; } #home_bigslide .owl-prev, #home_bigslide .owl-next { color: #fff; font-weight: 100; } #home_bigslide .owl-prev { margin-left: 10px; } #home_bigslide .owl-next { margin-right: 10px; } .bigslide_content { position: absolute; bottom: 50px; width: 100%; } .bigslide h2 { font-size: 2em; color: #fff; font-weight: 900; text-transform: uppercase; margin: 0; padding: 0; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-delay: 1s; animation-delay: 1s; } .bigslide a { padding: 10px; background-color: #ed2323; color: #fff; font-weight: 900; text-transform: uppercase; text-decoration: none; display: inline-block; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-delay: 1s; animation-delay: 1s; } .bigslide a:hover { background-color: #fff; color: #ed2323; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } #bigslide1 {background-image: url(images/home_bigslide01.jpg);} #bigslide2 {background-image: url(images/home_bigslide02.jpg);} #bigslide3 {background-image: url(images/home_bigslide03.jpg);} #home_wheelyscafe { background-image: url(images/home_wheelyscafe.png); background-position: center center; background-repeat: no-repeat; background-size: contain; width: 100%; max-width: 894px; height: 224px; position: relative; margin-left: auto; margin-right: auto; } .home_wheelyscafe_text { color: #878787; position: absolute; font-size: 11px; } #home .button {margin: 0 auto; } a.home_order_button { display: block; width: 620px; max-width: 100%; height: 75px; margin-left: auto; margin-right: auto; background-image: url(images/order_button.png); background-position: center center; background-repeat: no-repeat; background-size: 100%; text-indent: -9999999px; } a.home_order_button:hover { opacity: 0.70; -moz-opacity: 0.70; -khtml-opacity: 0.70; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); filter:alpha(opacity=70); } #home_news_map { width: 100%; margin: 0 auto; margin-top: -10px !important; } #home_quotes, #home_news {width: 50%; height: 400px; float: left; position: relative; background-color: #F6F6F6;} img[src=*="google4.png"] { display: none !important; } .home_quote { width: 100%; height: 50%; background-color: #ee2624; text-align: center; font-size: 1.6em; padding: 30px; } .home_quote_logo {width: 100px; text-align: center; margin-left: auto; margin-right: auto;} #home_quote_2 { background-color: #fff200; padding: 52px; } body.home #gmw-submit-4 { position: absolute; top: 0; right: 5px; background-color: transparent; border: none; width: auto; line-height: 35px; color: #fff; font-size: 1.5em; height: 35px; padding: 0; padding-right: 10px; background-color: transparent; } body.home #gmw-submit-4:hover { color: #b4b4b4; } #home_quotes input::-webkit-input-placeholder { color: #fff; } #home_quotes input:-moz-placeholder { color: #fff; opacity: 1; } #home_quotes input::-moz-placeholder { color: #fff; opacity: 1; } #home_quotes input:-ms-input-placeholder { color: #fff; } #home_quotes input:placeholder-shown { color: #fff; } #home_news { background-color: #F6F6F6; overflow: hidden; } .home_news_item { text-align: center; padding: 20px; } .home_news_item blockquote { font-size: 1.6em; color: #ed2323; text-transform: uppercase; font-weight: 900; font-style: italic; margin: 0; padding: 0; margin-top: 90px; } img.home_news_item_logo { height: 20px; margin: 0; margin-top: 10px; margin-left: auto; margin-right: auto; opacity: 0.40; -moz-opacity: 0.40; -khtml-opacity: 0.40; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=40); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); filter:alpha(opacity=40); } .home_news_gif { padding: 0; background-image: url(images/starbuckscrumble.gif); background-size: cover; width: 100%; height: 100%; background-position: center center; } .home_news_nyan { background-image: url(images/nyan.gif); } .home_news_dreams { background-image: url(images/dreams2.jpg); position: relativeM } .home_news_sbcrumble { background-image: url(images/starbuckscrumble.gif); } .home_news_taste { background-image: url(images/taste.gif); } #home_news .owl-controls { margin-top: -30px; z-index: 20; position: relative; height: 20px;} #home_news .owl-prev, #home_news .owl-next { font-size: 80px; color: #ffffff; opacity: 0.70; -moz-opacity: 0.70; -khtml-opacity: 0.70; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); filter:alpha(opacity=70); } #home_news .owl-prev:hover, #home_news .owl-next:hover { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); filter:alpha(opacity=100); } #home_news .owl-prev { float: left; margin-left: 5px;} #home_news .owl-next { float: right; margin-right: 5px;} .owl-dots {text-align: center;} #home_news .owl-item {height: 400px; } #home_wheelys4 { width: 100%; height: 500px; background-image: url(images/wheelys4.jpg); background-size: cover; background-position: center center; padding: 50px; text-align: center; } /** HOME CONTACT FORM **/ #home_4_contactform { background-color: #F7F7F7; padding-bottom: 40px; padding-top: 40px; } #home_4_contactform input, #home_4_contactform textarea { font-weight: normal; width: 100%; margin-bottom: 10px; color: #000; padding: 10px; font-size: 20px; border: 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #home_4_contactform_width {width: 100%; max-width: 500px; margin-left: auto; margin-right: auto;} #home_4_contactform h2 {margin-top: 0;} #home_4_contactform button {width: 100%;} #home_contactform { background-color: #F7F7F7; padding-bottom: 100px; padding-top: 50px; } .home_contactform_width {width: 100%; max-width: 900px; margin-left: auto; margin-right: auto;} #home_contactform p {margin: 0; padding: 0;} #home_contactform form { width: 100%; margin-left: auto; margin-right: auto; position: relative; clear: both; margin-top: 40px; } .contact_left {width: 50%; float: left;} #home_contactform input, #home_contactform textarea { font-weight: normal; width: 99%; margin-bottom: 10px; margin-right: 1%; color: #000; padding: 10px; font-size: 20px; border: 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #home_contactform textarea {float: right; width: 48.5%; height: 167px;} #home_contactform button { text-transform: uppercase; display: block; float: none; margin: 0 auto; margin-top: 20px; width: 200px; text-align: center; background-color: #ed2323; padding: 10px; font-size: 20px; line-height: 0; height: 48px; color: #fff; font-weight: bolder; border: 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #home_contactform button:hover {background-color: #000;} #home_contactform h2 { color: #333; font-weight: 900; text-transform: uppercase; font-size: 3em; line-height: 1.2; padding: 0; margin: 0; margin-bottom: 10px; } #home_contactform h3 { color: #333; font-weight: 400; text-transform: uppercase; font-size: 1.4em; text-decoration: none; text-align: center; } #success { text-align: center; position: fixed; bottom: 130px; width: 100%; max-width: 500px; left: 50%; margin-left: -250px; line-height: 2.5; z-index: 9999999; background-color: rgba(0, 210, 43, 0.86); font-weight: bold; color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .alert-success { color: #fff; background-color: transparent; border: none; padding-bottom: 0; padding-top: 0; } .alert-success button {display: none } .help-block { position: absolute; top: 90px; background-color: rgba(153, 0, 0, 0.86); color: #fff; font-weight: bold; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .help-block li { list-style: none; margin: 0; padding: 0; text-align: center; } .contact-top ul { margin-top: 10px; margin-bottom: 10px; margin-left: 0; text-align: center; padding: 0; } /* Press Scroller */ #logo_scroller { width: 100%; height: 70px; padding-top: 15px; position: relative; float: left; margin-top: 0; background-color: #efefef; } #logo_scroller li { list-style: none; float: left; } #logo_scroller img { margin-right: 60px; height: 40px; opacity: 0.30; -moz-opacity: 0.30; -khtml-opacity: 0.30; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=30); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30); filter:alpha(opacity=30); } #logo_scroller img:hover { opacity: 0.50; -moz-opacity: 0.50; -khtml-opacity: 0.50; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=50); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); filter:alpha(opacity=50); } .simply-scroll-clip { position: relative; overflow: hidden; } .simply-scroll-list { overflow: hidden; margin: 0; padding: 0; list-style: none; } .simply-scroll .simply-scroll-clip { width: 100%; } .simply-scroll .simply-scroll-list li { float: left; width: auto; height: 80px; } /* VIDEO */ #home_video { margin-top: 0; position: relative; max-height: 100%; height: 450px; background-image: url(images/frontpage-247.jpg); background-size: cover; background-position: center center; } .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #home_video_bestcoffee { position: absolute; top: 20px; right: 20px; width: 130px; height: 130px; text-align: center; z-index: 9; background-image: url(images/bestcoffee.png); background-size: 100%; background-repeat: no-repeat; } #home_video_text { position: absolute; bottom: 100px; width: 100%; text-align: center; z-index: 9; } #home_video_text_247 { position: absolute; bottom: 20px; width: 100%; text-align: center; z-index: 9; } #home_video_text .clear {height: 12px;} #home_video_text h2, #home_video_text h3 { font-size: 2.5em; line-height: 1.7; color: #fff; display: inline; margin-bottom: 10px; font-weight: 400; text-transform: uppercase; margin: 0; padding: 0; padding-left: 12px; padding-right: 12px; background-color: rgba(238, 36, 36, 0.85); -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-delay: 1s; animation-delay: 1s; } #home_video_text h3 { font-weight: 700; } #home_video_text a { font-size: 1.6em; padding: 5px 10px; background-color: #ed2323; color: #fff; font-weight: 900; text-transform: uppercase; text-decoration: none; display: inline-block; margin-top: 0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-delay: 2s; animation-delay: 2s; } #home_video_text a:hover { background-color: #fff; color: #ed2323; } #home_video_text_247 h2.wheelys_247_h2 { background-color: transparent; color: #fff; text-transform: uppercase; font-weight: 500; font-size: 1.3em; letter-spacing: 1px; } #home_video_text_247 h2.wheelys_247_h2 a { font-size: 0.5em; } .owl-carousel .animated { -webkit-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .owl-carousel .owl-animated-in { z-index: 0; } .owl-carousel .owl-animated-out { z-index: 1; } .owl-carousel .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .owl-carousel { display: none; width: 100%; -webkit-tap-highlight-color: transparent; position: relative; z-index: 1; } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; z-index: 10; margin: 0 auto; text-align: center; -webkit-transform: translate3d(0px, 0px, 0px); cursor: move; cursor: -webkit-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .owl-stage-outer:active { cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing; } .owl-carousel .owl-controls .owl-nav .owl-prev, .owl-carousel .owl-controls .owl-nav .owl-next, .owl-carousel .owl-controls .owl-dot { cursor: pointer; cursor: hand; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-loaded { display: block; } .owl-carousel.owl-loading { opacity: 0; display: block; } .owl-carousel.owl-hidden { opacity: 0; } .owl-carousel .owl-refresh .owl-item { display: none; } .owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel .owl-item img { display: block; max-width: none; -webkit-transform-style: preserve-3d; } .owl-carousel.owl-text-select-on .owl-item { -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; } .owl-carousel .owl-grab { cursor: move; cursor: -webkit-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .owl-theme .owl-controls.clickable .owl-buttons div:hover{ filter: Alpha(Opacity=100);/*IE7 fix*/ opacity: 1; text-decoration: none; } .owl-controls { margin-top: -250px;position: relative; height: 150px;} .owl-prev, .owl-next { font-size: 200px; color: #c5c5c5; z-index: 20; } .owl-prev { float: left; margin-left: -14%;} .owl-next { float: right; margin-right: -14%;} .owl-theme .owl-dots .owl-dot { display: inline-block; zoom: 1; * display: inline } .owl-dots .owl-dot span { width: 10px; height: 10px; margin: 5px 7px; background: rgba(0, 0, 0, 0.12); display: block; -webkit-backface-visibility: visible; -webkit-transition: opacity 200ms ease; -moz-transition: opacity 200ms ease; -ms-transition: opacity 200ms ease; -o-transition: opacity 200ms ease; transition: opacity 200ms ease; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px } .owl-dots .owl-dot.active span, .owl-dots .owl-dot:hover span { background: #ed2323; } #home_getintouch { width: 75%; float: left; background-color: #fafafa; text-align: center; font-size: 1.6em; height: 100px; line-height: 64px; padding: 20px; margin-top: -10px; } #home_monogram { background-color: #00b5eb; width: 25%; float: right; height: 200px; text-align: center; padding: 20px; margin-top: -10px; } #home_monogram img { height: 100%; margin-left: auto; margin-right: auto; } #home_greenbeans { width: 50%; float: left; /* background-image: url(images/home_greenbeans.jpg); */ background-image: url(images/dreams.jpg); background-size: cover; background-position: center center; height: 300px; position: relative; } #dreamslogo { width: 190px; height: 64px; position: absolute; left: 10px; top: 10px; background-image: url(images/dreamslogo.svg); background-size: contain; background-repeat: no-repeat; } #home_facebook { height: 300px; width: 25%; background-color: #fff200; float: left; padding: 20px; text-align: center; } #home_facebook .icon { font-size: 3em; } #home_facebook span {font-size: 1.6em; line-height: 1.1;} #home_brownbeans { width: 25%; float: left; background-image: url(images/home_brownbeans.jpg); background-position: center center; background-size: cover; height: 200px; } .home_medialogos { width: 100%; height: 120px; text-align: center; background-color: #f1f1f1; padding-top: 45px; padding-bottom: 45px; padding-left: 20px; padding-right: 20px; } .home_medialogos img { max-height: 100%; width: 18%; margin-left: 2.5%; margin-right: 2.5%; display: inline-block; } .home_redquote { width: 100%; height: 180px; background-color: #ee2624; text-align: center; font-size: 1.6em; padding-top: 55px; padding-bottom: 60px; } .home_redquote img { width: 190px; display: block; margin-left: auto; margin-right: auto; } .home_intern { width: 25%; float: left; height: 300px; background-color: #00b5eb; font-size: 1.6em; text-align: center; padding: 20px; } #home_revolution { width: 75%; float: left; height: 300px; background-image: url(images/home_revolution.jpg); background-size: cover; padding: 50px; text-align: center; } #home_revolution a { text-decoration: none; } #home_revolution h2 { color: #fff; font-weight: 900; text-transform: uppercase; font-size: 2em; line-height: 1.2; padding: 0; margin: 0; margin-bottom: 10px; } #home_revolution h3 { color: #fff; font-weight: 400; text-transform: uppercase; font-size: 1.4em; text-decoration: none; text-align: center; } a.nounderline {text-decoration: none;} a.nounderline:hover {color: inherit;} /* INSTAGRAM */ #home_instagram { margin-top: 120px; } #home_instagram h2 { font-weight: 700; font-size: 20px; color: #ed2323; text-transform: uppercase; margin-bottom: 10px; } #home_instagram a {text-decoration: none;} #home_instagram_feed { height: 135px; z-index: 30; } #home_instagram_feed img { width: 135px; margin-right: 10px; float: left; display: block; } #home_instagram_feed a { display: block; float: left; height: 135px; } /* VIDEO */ .jp_container_1, #jp_poster_0 { /* cursor: pointer; cursor: hand; */ } #jp_video_0 { /* cursor: pointer; cursor: hand; */ } .jp-gui {margin-top: -6px; display: none !important;} .jp-video *:focus { /* Disable the browser focus highlighting. */ outline: none; } .jp-video button::-moz-focus-inner { /* Disable the browser CSS3 focus highlighting. */ border: 0; } .jp-video { color: #fff; border: none; background-color: #fff} .jp-video-270p { width: 100%; } .jp-video-360p { width: 100%; } .jp-video-full { /* Rules for IE6 (full-screen) */ width: 480px; height: 270px; /* Rules for IE7 (full-screen) - Otherwise the relative container causes other page items that are not position:static (default) to appear over the video/gui. */ position: static !important; position: relative; } /* The z-index rule is defined in this manner to enable Popcorn plugins that add overlays to video area. EG. Subtitles. */ .jp-video-full div div { z-index: 1000; } .jp-video-full .jp-jplayer { top: 0; left: 0; position: fixed !important; position: relative; /* Rules for IE6 (full-screen) */ overflow: hidden; } .jp-video-full .jp-gui { position: fixed !important; position: static; /* Rules for IE6 (full-screen) */ top: 0; left: 0; width: 100%; height: 100%; z-index: 1001; /* 1 layer above the others. */ } .jp-video-full .jp-interface { position: absolute !important; position: relative; /* Rules for IE6 (full-screen) */ bottom: 0; left: 0; } .jp-interface { position: relative; width: 100%; background-color: #ffffff; /* Required for the full screen */ } .jp-video .jp-controls-holder { clear: both; width: 440px; margin: 0 auto 10px auto; position: relative; overflow: hidden; } .jp-controls { background: url("images/player.png") 0 0 no-repeat; padding: 1px 0 2px 1px; overflow: hidden; width: 201px; height: 34px; } .jp-video .jp-controls { margin: 0 0 0 115px; float: left; display: inline; /* need this to fix IE6 double margin */ } .jp-controls button { display: block; float: left; overflow: hidden; text-indent: -9999px; height: 34px; margin: 0 1px 2px 0; padding: 0; border: none; cursor: pointer; } .jp-type-single .jp-controls button { width: 99px; } /* The seeking class is added/removed inside jPlayer */ div.jp-seeking-bg { background: url("images/player_seeking.gif"); } .jp-progress { background: url("images/player.png") 0px -240px no-repeat; width: 197px; height: 6px; padding: 0 2px 2px 2px; margin-bottom: 0; overflow: hidden; } div.jp-video .jp-progress { border: none; width: 100%; background-image: none; padding: 0; } .jp-seek-bar { background: url("images/player.png") 0px -260px repeat-x; width: 0px; height: 100%; overflow: hidden; cursor: pointer; } .jp-play-bar { background: url("images/player.png") 0px -280px repeat-x; width: 0px; height: 100%; overflow: hidden; } .jp-video .jp-video-play { width: 100%; overflow: hidden; /* Important for nested negative margins to work in modern browsers */ } .jp-video-270p .jp-video-play { margin-top: -270px; height: 270px; } .jp-video-360p .jp-video-play { margin-top: -360px; height: 360px; } .jp-video-full .jp-video-play { height: 100%; } .jp-jplayer { background-color: #fff; } .jp-no-solution { padding: 5px; font-size: .8em; background-color: #3a2a45; border-top: 2px solid #554461; border-left: 2px solid #554461; border-right: 2px solid #180a1f; border-bottom: 2px solid #180a1f; color: #FFF; display: none; } .jp-no-solution a { color: #FFF; } .jp-no-solution span { font-size: 1em; display: block; text-align: center; font-weight: bold; } /** SHOP **/ .woocommerce .quantity .qty { width: 40px; height: 49px; } .woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error { border-top: none; } .woocommerce .woocommerce-message:before, .woocommerce .woocommerce-info:before { color: #ed2323; } body.cart article, body.checkout article { font-size: 16px; padding-top: 40px; } body.cart article a, body.checkout article a { text-decoration: underline; border: 0; text-shadow: none; box-shadow: none; } body.cart article a:hover { text-decoration: underline; border: 0; text-shadow: none; box-shadow: none; color: #ed2323; background-color: transparent; } body.checkout article a:hover { } .select2-drop {font-size: 16px !important;} .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { float: none; width: 100%; } .woocommerce table.cart td.actions .input-text {width: 92px;} .coupon_button { background-color: transparent; border: 0; text-decoration: underline; font-size: 0.8em; opacity: 0.5; } .coupon_button:hover {opacity: 1.0;} tr.order-total td span {color: #000;} .wc-proceed-to-checkout {float: right;} .woocommerce #respond input#submit.alt.disabled, .woocommerce #respond input#submit.alt.disabled:hover, .woocommerce #respond input#submit.alt:disabled, .woocommerce #respond input#submit.alt:disabled:hover, .woocommerce #respond input#submit.alt:disabled[disabled], .woocommerce #respond input#submit.alt:disabled[disabled]:hover, .woocommerce a.button.alt.disabled, .woocommerce a.button.alt.disabled:hover, .woocommerce a.button.alt:disabled, .woocommerce a.button.alt:disabled:hover, .woocommerce a.button.alt:disabled[disabled], .woocommerce a.button.alt:disabled[disabled]:hover, .woocommerce button.button.alt.disabled, .woocommerce button.button.alt.disabled:hover, .woocommerce button.button.alt:disabled, .woocommerce button.button.alt:disabled:hover, .woocommerce button.button.alt:disabled[disabled], .woocommerce button.button.alt:disabled[disabled]:hover, .woocommerce input.button.alt.disabled, .woocommerce input.button.alt.disabled:hover, .woocommerce input.button.alt:disabled, .woocommerce input.button.alt:disabled:hover, .woocommerce input.button.alt:disabled[disabled], .woocommerce input.button.alt:disabled[disabled]:hover {background-color: rgba(238, 36, 36, 0.6);} div.summary.entry-summary > div:nth-child(2) > span {display: none;} .woocommerce td.product-name dl.variation dd, .woocommerce td.product-name dl.variation dt { float: none; } .woo_wheelys_image_and_cart { width: 48%; float: left; } .woo_wheelys_image_and_cart .images { width: 100% !important; } .mywheelys_cart { font-family: 'FontAwesome', sans-serif; position: absolute; right: 20px; top: 70px; color: #ed2323; } .addresses .title { text-align: left; margin-bottom: 1em; margin-top: 1em; } /** FAQ **/ .space {width: 100%; float: none; height: 6em;} #faq { } #faq h4 { margin-top: 2em; font-size: 1.2em; color: #000; } #faq h5 { margin-top: 2em; font-size: 2em; font-weight: normal; color: #ed2323; margin-bottom: 0.2em; } #faq ul { /* margin-left: 10px; */ } #faq li { list-style-image: url('images/wheel.png'); line-height: 2; } #faq li a { text-decoration: none; color: #ed2323; } #faq a.q { text-decoration: none; color: #ed2323; display: block; box-shadow: none; background-color: transparent; margin-bottom: 5px; } #faq a.q:hover { box-shadow: none; background-color: transparent; } body.faq p {margin: 0;} body.faq .question p {margin-bottom: 1em; margin-top: 0;} .question { padding-top: 10px; display: none; padding-bottom: 40px; font-size: 0.9em; } table { border-collapse: collapse; } td { padding: 4px; padding-right: 25px; } table, th, td { border: none; } td span {color: #bebebe;} .backtotop { display: inline-block; width: 85px; font-size: 12px; margin-left: -94px; text-decoration: none; color: #747474; } .backtotop:hover { color: #ed2323; } /** THE STORY & TWWOWC **/ .story { margin-top: 60px; } .story p {margin: 0;} .story_text { width: 650px; margin-left: auto; margin-right: auto; line-height: 1.5; } .story_text h3 { margin-top: 2em; text-transform: uppercase; } .story_bigpicture { width: 100%; height: 500px; background-image: url(images/story_bigpicture.jpg); background-position: center center; background-size: cover; } .twwowc_bigpicture { width: 100%; height: 500px; background-image: url(images/twwowc_bigpicture.jpg); background-position: center center; background-size: cover; } .story_headline { width: 320px; height: 180px; background-size: 100%; background-repeat: no-repeat; margin-left: auto; margin-right: auto; margin-top: 40px; margin-bottom: 40px; background-position: center center; text-indent: -99999px; } .story_aboutus { background-image: url(images/aboutus_logo.svg); } .story_logo { background-image: url(images/story_logo.svg); } .twwowc_logo { background-image: url(images/twwowc_logo.svg); } .fuckbrands_logo { background-image: url(images/fuckbrands_logo.svg); } .story_vision { background-image: url(images/story_vision.svg); } .dots { width: 3px; background-image: url(images/dot.svg); background-repeat: repeat-y; float: left; } .dots.divider { height: 150px; margin-left: auto; margin-right: auto; float: none; margin-top: 20px; margin-bottom: 20px; } .monogram { width: 50px; height: 50px; background-image: url(images/monogram.svg); background-size: 100%; } .ycombinator { width: 50px; height: 50px; background-image: url(images/ycombinator.svg); background-size: 100%; } .story_bean { width: 50px; height: 50px; background-image: url(images/bean.png); background-size: 100%; } .story_timeline { width: 300px; height: 100%; position: absolute; left: 0; top: 700px; padding: 20px; } .story_timeline .dots { height: 100px; float: none; margin-top: 5px; margin-bottom: 5px; width: 50px; background-position-x: center; } .story_timeline_text { float: left; margin-left: 60px; font-size: 0.6em; } .story_menu, .twwowc_menu { width: 200px; height: 100%; position: fixed; right: 0; top: 700px; padding: 20px; font-size: 0.8em; } .story_menu a, .twwowc_menu a { text-transform: uppercase; font-weight: 900; display: block; text-decoration: none; margin-left: 20px; border: none; line-height: 1; margin-bottom: 10px; } .story_menu a.active, .twwowc_menu a.active {color: #ed2323;} .story_menu .dots {height: 92px;} .twwowc_menu .dots {height: 67px;} .story_photo { width: 320px; height: 325px; float: left; margin-top: 2em; margin-bottom: 3em; background-size: cover; background-repeat: no-repeat; } .story_alps { background-image: url(images/story_alps.jpg); margin-right: 5px; } .story_berlin { background-image: url(images/story_berlin.jpg); margin-left: 5px; } .killer_quote { font-size: 2em; font-weight: 900; text-align: center; line-height: 1.2; font-style: italic; text-transform: uppercase; margin-top: 50px; margin-bottom: 80px; } .killer_quote em { font-size: 0.5em; font-style: normal; text-align: right; display: inline-block; float: right; margin-top: 10px; } .killer_quote_logo { margin-left: auto; margin-right: auto; width: 100px; height: 50px; text-indent: -99999px; line-height: 0; background-size: 100%; background-repeat: no-repeat; background-position: center center; margin-top: -70px; } .fastco {background-image: url(images/media_logos/fastcompany.svg);} .story_text blockquote { font-style: italic; font-size: 1.2em; } .story_text blockquote span { font-style: normal; } .side_quote { font-size: 1.1em; line-height: 1.2; font-weight: 700; width: 300px; height: auto; float: right; margin: 40px; margin-top: 10px; padding: 20px 0px; border-top: 7px solid black; border-bottom: 1px solid grey; } .side_quote em { font-style: normal; color: #ed2323; } /** BREWING GUIDES **/ .guide { width: 48%; height: 400px; background-size: cover; margin: 1%; float: left; line-height: 60px; position: relative; z-index: 1; -webkit-transition: .2s; -o-transition: .2s; -ms-transition: .2s; -moz-transition: .2s; transition: .2s; } .guide:hover { opacity: 0.80; -moz-opacity: 0.80; -khtml-opacity: 0.80; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=80); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80); filter:alpha(opacity=80); } .guide:hover h2 { color: #ed2323; } .guide_overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 5; opacity: 0.30; -moz-opacity: 0.30; -khtml-opacity: 0.30; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=30); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30); filter:alpha(opacity=30); } .guide h2 { color: #fff; font-size: 3em; font-weight: 900; text-transform: uppercase; z-index: 10; position: absolute; width: 100%; text-align: center; } /** Single Guide **/ .single_guide { max-width: 920px; width: 100%; margin-left: auto; margin-right: auto; padding-left: 10px; padding-right: 10px; } a.backtoguides { display: block; width: 100%; text-align: center; text-decoration: none; color: #bababa; font-size: 18px; margin-bottom: 40px; } a.backtoguides:hover {color: #868686;} .guide_top_image { width: 100%; height: 400px; background-size: cover; background-position: center center; } .guide_box { width: 100%; height: auto; border: 1px solid rgba(0, 0, 0, 0.2); margin-top: 20px; padding: 20px; color: rgba(0, 0, 0, 0.6); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .guide_equipment a, .guide_ingredients a {color: rgba(0, 0, 0, 0.6);} .guide_ingredients, .guide_equipment, .guide_share { float: left; width: 40%; } .guide_ingredients, .guide_equipment { padding-right: 20px; } .guide_share { width: 20%; float: right; } .single_guide h4 { font-size: 1.5em; font-weight: 400; text-align: left; margin: 0; } .single_guide hr { margin-top: 40px; margin-bottom: 50px; border-top: 1px solid rgba(0, 0, 0, 0.2); } /* YouTube Embed */ .video_embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .video_embed iframe, .video_embed object, .video_embed embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .youtube { background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; display: block; overflow: hidden; transition: all 200ms ease-out; cursor: pointer; margin: 0; width: 100%; height: 100%; position: absolute; } .youtube .play { background: url("images/play.png") no-repeat center center; background-size: 64px 64px; position: absolute; height: 100%; width: 100%; opacity: .8; filter: alpha(opacity=80); transition: all 0.2s ease-out; } .youtube .play:hover { opacity: 1; filter: alpha(opacity=100); } /** PRESS — IN THE MEDIA **/ .inthemedia_quote { text-align: center; margin-bottom: 40px; } a.lightbox {text-decoration: none;} .inthemedia_quote blockquote { font-size: 1.8em; color: #ed2323; text-transform: uppercase; font-weight: 900; font-style: italic; margin: 0; padding: 0; } img.inthemedia_logo { height: 20px; margin: 0; margin-left: auto; margin-right: auto; opacity: 0.40; -moz-opacity: 0.40; -khtml-opacity: 0.40; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=40); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); filter:alpha(opacity=40); } img.inthemedia_logo:hover { opacity: 0.60; -moz-opacity: 0.60; -khtml-opacity: 0.60; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=60); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60); filter:alpha(opacity=60); } /** PRESS KIT **/ #presskit {} .presskit_image { width: 23%; float: left; text-align: center; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; height: 350px; } .presskit_image_small { width: 100%; height: 180px; background-size: cover; background-position: center center; background-repeat: no-repeat; margin-bottom: 5px; } .presskit_description { text-align: center; font-size: 0.7em; } a.presskit_download { width: 100%; display: block; text-align: center; background-color: rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 5px; padding: 5px; font-size: 0.7em; text-decoration: none; margin-top: 20px; } a.presskit_download:hover { background-color: rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.2); color: #000; } /** BLOG **/ /* Blog Page, i.e. the overview over the latest posts */ .blog_header { border-bottom: 2px solid #ed2323; margin-bottom: 50px; z-index: 2; position: relative; text-align: center; } .blog_header h1 { text-align: center; text-transform: uppercase; color: #ed2323; font-size: 3em; font-weight: 900; display: inline-block; padding-left: 15px; padding-right: 15px; } .blog_header a {text-decoration: none;} .blog_header h2 { text-align: center; color: #ed2323; font-size: 1em; margin-top: 10px; margin-bottom: 30px; display: inline-block; padding: 10px; } body.single .blog_header h2, body.single .blog_header h1 { background-color: rgba(255, 255, 255, 0.9); } .blog_all_posts { width: 100%; color: #ed2323; margin: 0 auto; } .blog_all_posts article { width: 33%; float: left; padding: 20px; height: 500px; } .blog_all_posts .entry { margin-bottom: 50px; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1em; line-height: 1.5; } .blog_all_posts h3 { font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.2em; line-height: 1.2; } .blog_all_posts h3 a {text-decoration: none; color: #ed2323;} .date {font-size: 0.7em;} .blog_all_posts .date a, a.view-article {text-decoration: none; color: #ed2323;} .date a:hover, a.view-article:hover {color: #868686;} .blog_all_posts a {text-decoration: none; color: #ed2323; box-shadow: none;} .blog_all_posts a:hover {text-decoration: none; color: #ed2323; box-shadow: none; background-color: transparent;} /* Single Post */ .blog_single_post { font-family: Georgia, Times, 'Times New Roman', serif; } .featured_image { width: 100%; height: 600px; margin-top: -266px; background-size: cover; background-repeat: no-repeat; z-index: 1; position: relative; } .blog_single_post h2 { margin-top: 0.5em; margin-bottom: 20px; text-align: left; font-size: 2.5em; font-weight: bold; text-transform: none; } .blog_single_post .date, a.backtoblog { font-family: "brandon-grotesque", "Brandon Grotesque", sans-serif !important; text-transform: uppercase; text-align: left; width: 100%; display: block; font-weight: bold; font-size: 0.8em; color: rgba(0, 0, 0, 0.35); } .blog_single_post .date a {text-decoration: none; color: rgba(0, 0, 0, 0.35);} .blog_single_post .date a.facebook {color: #3764A3; opacity: 1;} .blog_single_post .date a.twitter {color: #55acee; opacity: 1;} .blog_single_post .date a.pinterest {color: #C9232E; opacity: 1;} .blog_single_post .date a.facebook:hover {opacity: 0.6;} .blog_single_post .date a.twitter:hover {opacity: 0.6;} .blog_single_post .date a.pinterest:hover {opacity: 0.6;} .blog_single_post article a:hover {color: #ed2323;} .blog_single_post_article { width: 100%; font-size: 1em; line-height: 1.5; margin: 0 auto; padding-top: 2em; } a.backtoblog { display: block; width: 100%; margin-top: 60px; text-align: center; text-decoration: none; color: #bababa; font-size: 18px; } a.backtoblog:hover {color: #868686;} /* Big Quote */ article.category-bigquote { width: 100%; float: none; clear: both; font-family: "brandon-grotesque", "Brandon Grotesque", sans-serif !important; text-transform: uppercase; } article.category-bigquote .date {display: none;} .category-bigquote h2 { font-family: "brandon-grotesque", "Brandon Grotesque", sans-serif !important; margin: 0; font-weight: 900; line-height: 1; text-align: center; } .bigquote_1 {font-size: 5em;} .bigquote_2 {font-size: 10em;} .bigquote_3 {font-size: 3.5em;} .blog_twitter_stream { float: right; background-color: #fafafa; width: 400px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .blog_twitter_stream iframe {padding: 20px !important; padding-bottom: 0 !important; padding-top: 10px !important; overflow:hidden !important;} .blog_twitter_stream_header { width: 100%; height: 50px; background-color: #efefef; line-height: 30px; padding: 10px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; } .blog_twitter_stream_header a { text-decoration: none; color: #ed2323; } .blog_twitter_stream_header span { float: right; font-size: 1.5em; } a.twitter-timeline { /* Buttonish */ display: inline-block; padding: 10px; margin: 0; border: none; border-radius: 5px; /* Text */ font-family: "brandon-grotesque", "Brandon Grotesque", sans-serif; color: #333; white-space: nowrap; } a.twitter-timeline:hover, a.twitter-timeline:focus { background-color: #ed2323; } /* Color Highlight for keyboard navigation */ a.twitter-timeline:focus { outline: none; border-color: #ed2323; } /** THE WHEELYS MAP **/ img.thewheelysmap_map { margin-left: auto; margin-right: auto; display: block; } .thewheelysmap_countries_container { width: 100%; margin-left: auto; margin-right: auto; max-width: 600px; font-size: 16px; padding-left: 10px; padding-right: 10px; } .thewheelysmap_countries { width: 25%; float: left; } /** MENU GENERATOR **/ input.headline {font-weight: bold; text-transform: uppercase;} /* Change the white to any color ;) */ input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; border: 1px solid #CCCCCC; padding: 2px; } input1 { -webkit-text-fill-color: #000 !important; } /** /OWN **/ #post-918 {padding-top: 150px; padding-bottom: 150px;} body.invest {background-color: #ed2323; color: #fff;} body.invest #footer {border-top: 5px solid #fff;} #own_contactform { color: #fff; padding-bottom: 100px; padding-top: 50px; background-image: url(images/worldmap_red.png); background-position: center top; background-repeat: no-repeat; background-color: #ed2323; font-size: 0.9em; } #own_contactform h2 {margin-top: 0;} #own_contactform form { width: 100%; margin-left: auto; margin-right: auto; position: relative; clear: both; margin-top: 40px; } #own_contactform input { font-weight: normal; width: 200px; margin-bottom: 10px; color: #fff; padding: 0; padding-left: 5px; padding-right: 5px; border: 0; border-bottom: 1px solid white; background-color: transparent; } #own_contactform button { text-transform: uppercase; display: block; float: none; margin: 0 auto; margin-top: 20px; width: 200px; text-align: center; background-color: #fff; padding: 10px; font-size: 20px; line-height: 0; height: 48px; color: #ed2323; font-weight: bolder; border: 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #own_contactform button:hover {background-color: #000; color: #fff;} #own_contactform input[type="checkbox"] {width: auto; margin-right: 5px;} input#numberofshares {width: 50px; text-align: center;} input#price {width: 100px; text-align: center;} #own_contactform input#email {width: 250px;} #home_contactform h2 { color: #333; font-weight: 900; text-transform: uppercase; font-size: 3em; line-height: 1.2; padding: 0; margin: 0; margin-bottom: 10px; } #home_contactform h3 { color: #333; font-weight: 400; text-transform: uppercase; font-size: 1.4em; text-decoration: none; text-align: center; } span.own_readonly {font-size: 0.75em; color: rgba(255, 255, 255, 0.7);} /** SUMMIT */ #summit_topphoto { width: 100%; height: 400px; background-image: url(images/summit/summit_topphoto.jpg); background-size: cover; background-position: center bottom; margin-bottom: 40px; } #summit_headline { max-width: 700px; width: 60%; height: 400px; margin-left: auto; margin-right: auto; background-image: url(images/summit/summit_headline.svg); background-size: 100%; background-position: center center; background-repeat: no-repeat; } #summit_lookingforward { width: 650px; height: 50px; margin-left: auto; margin-right: auto; background-image: url(images/summit/summit_lookingforward.svg); background-size: 100%; background-position: center center; background-repeat: no-repeat; text-indent: -99999px } .summit_facts { text-transform: uppercase; color: #ed2323; text-align: center; font-weight: 900; } .summit_facts_large { text-transform: uppercase; color: #ed2323; text-align: center; font-weight: 900; font-size: 28px; max-width: 750px; width: 100%; margin-left: auto; margin-right: auto; } .summit_registernow { background-image: url(images/summit/summit_registernow.svg); text-indent: -9999px; display: block; background-size: cover; background-repeat: no-repeat; width: 434px; height: 100px; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px; } .summit_registernow:hover { opacity: 0.7; } #summit .button:hover {background-color: #ed2323; color:#fff;} #summit_form_outer { display: none; background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; position: fixed; z-index: 9999; top: 0; left: 0; right: 0; bottom: 0; } .summit_form_outer_close { position: absolute; top: 5px; right: 20px; color: #fff; font-weight: bold; font-size: 3em; line-height: 1; } .summit_form_outer_close a { text-decoration: none; color: #fff; } #summit_form { width: 400px; margin-left: auto; margin-right: auto; height: 465px; background-color: #fff; margin-top: 100px; padding: 20px; border-radius: 5px; } #summit_form input { width: 100%; margin-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 4px; padding-bottom: 4px; border-radius: 5px; border: 1px solid #c4c4c4; } #summit_form button { width: 100%; padding: 10px; } .summit_photos_1 { margin-top: 2em; margin-bottom: 2em; width: 100%; height: 450px; background-image: url(images/summit/summit_photos_1.jpg); background-position: left center; background-size: cover; } .summit_photos_2 { margin-top: 2em; margin-bottom: 2em; width: 100%; height: 450px; background-image: url(images/summit/summit_photos_2_2.jpg); background-position: left center; background-size: cover; } .summit_photos_3 { margin-top: 2em; width: 100%; height: 450px; background-image: url(images/summit/summit_photos_3.jpg); background-position: left center; background-size: cover; } .summit_quote { width: 100%; text-align: center; font-weight: 900; color: #ed2323; font-size: 45px; line-height: 1.2; text-transform: uppercase; } .summit_quote span { font-weight: 400; font-size: 24px; text-transform: none; } .summit_quote_maria { width: 100%; text-align: center; font-weight: 900; color: #ed2323; font-size: 26px; line-height: 1.4; text-transform: uppercase; } .summit_quote_maria span { font-weight: 400; font-size: 24px; text-transform: none; } #summit_images { /* width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; */ } .summit_image { width: 12.5%; float: left; } .summit_image:hover { opacity: 0.6; } img.summit_thanks_image {margin-top: 100px;} .summit_width_second_quote { position: relative; max-width: 1030px; width: 100%; margin: 0 auto; padding-left: 20px; padding-right: 20px; } .summit_amaya { width: 100px; height: 100px; background-image: url(images/summit/summit_amaya.png); background-position: center center; background-size: cover; margin-left: auto; margin-right: auto; margin-bottom: -15px; margin-top: 15px; } .summit_julio { width: 100px; height: 100px; background-image: url(images/summit/summit_julio.png); background-position: center center; background-size: cover; margin-left: auto; margin-right: auto; margin-bottom: -15px; margin-top: 15px; } #coffee_subscription { text-align: center; } #coffee_subscription_plans {padding-bottom: 50px;} #coffee_subscription_logo { margin-left: auto; margin-right: auto; width: 320px; height: 270px; background-image: url(images/coffee_subscription_logo.svg); background-position: center top; background-size: contain; } body.plans h6 {display: none;} #coffee_subscription_header { width: 100%; height: 600px; overflow: hidden; position: relative; } .coffee_subscription_header_headline { font-family: 'Edo', "brandon-grotesque", "Brandon Grotesque", sans-serif; font-size: 1.5em; line-height: 1.2; color: #fff; position: absolute; top: 70px; text-align: center; width: 100%; } .coffee_subscription_header_text { position: absolute; top: 90px; text-align: center; width: 100%; left: 0; right: 0; color: #fff; z-index: 10; } #coffee_subscription_menu { font-family: 'Edo', "brandon-grotesque", "Brandon Grotesque", sans-serif; width: 100%; font-size: 1.2em; max-width: 700px; margin-left: auto; margin-right: auto; font-weight: 400; text-transform: uppercase; padding-top: 20px; padding-bottom: 20px; text-align: center; } #coffee_subscription_menu a { text-decoration: none; color: #ed2323; margin-left: 10px; margin-right: 10px; } #coffee_subscription_menu a:hover { color: #000; } h2.coffee_subscription_headline { color: #ed2323; margin-top: 20px; margin-bottom: 0; } h3.coffee_subscription_centered { text-align: center; font-weight: 700; font-size: 1.2em; } h4.coffee_subscription_h4 { text-align: center; color: #ed2323; font-weight: 900; font-size: 1.2em; text-transform: uppercase; } .coffee_subscription_subscribe_button { display: inline-block; background-color: #ed2323; width: auto; line-height: 1; margin-left: auto; margin-right: auto; text-align: center; position: relative; text-decoration: none; font-family: 'Edo', "brandon-grotesque", "Brandon Grotesque", sans-serif; color: #fff; font-size: 2.2em; text-transform: uppercase; padding-left: 30px; padding-right: 30px; padding-top: 12px; padding-bottom: 14px; } .coffee_subscription_subscribe_button:hover { color: #fff; background-color: #000; text-decoration: none; } .coffee_subscription_whatyouget { background-color: #f8f8f8; width: 100%; height: 480px; padding: 40px; } .coffee_subscription_box_sketch { height: 400px; width: 50%; background-image: url(images/coffee_subscription_box_sketch.png); background-repeat: no-repeat; background-size: contain; float: left; background-position: right center; } .coffee_subscription_whatyouget_text { font-family: 'Edo', "brandon-grotesque", "Brandon Grotesque", sans-serif; color: #ed2323; float: right; margin-top: 20px; width: 50%; font-size: 1.4em; line-height: 1.6; } .coffee_subscription_whatyouget_text strong { font-size: 2em; font-weight: 400; } #coffee_subscription_subscribe { width: 100%; height: 600px; overflow: hidden; position: relative; background-image: url(images/coffee_subscription_farm_1.jpg); background-size: cover; } .coffee_subscription_subscribe_headline { font-family: 'Edo', "brandon-grotesque", "Brandon Grotesque", sans-serif; font-size: 3.5em; line-height: 1.2; color: #fff; text-align: center; } .coffee_subscription_plans_headline { font-size: 1.4em; color: #000; text-align: center; margin-top: 20px; margin-bottom: 10px; font-weight: 900; } .coffee_subscription_kit { width: 48%; margin: 1%; float: left; padding-bottom: 10px; border: 1px solid #ed2323; transition: all .12s ease-in-out; font-size: 0.8em; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .coffee_subscription_kit:hover { cursor: pointer; /* transform: scale(1.01); */ -webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.2); } .coffee_subscription_plan { width: 31.3%; float: left; margin: 1%; padding-bottom: 40px; border: 1px solid #ed2323; transition: all .12s ease-in-out; font-size: 0.8em; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-align: center; -webkit-transition: .2s; -o-transition: .2s; -ms-transition: .2s; -moz-transition: .2s; transition: .2s; } .coffee_subscription_plan:hover { cursor: pointer; /* transform: scale(1.01); */ -webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.2); } .coffee_subscription_plan .sc-checkout-form, .sc-form-group {margin: 0 !important;} .coffee_subscription_plan.selected { border: 1px solid #ed2323; opacity: 1.0; -webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.2); } .coffee_subscription_plan.disabled { opacity: 0.5; } #coffee_subscription_step2_scroll {height: 80px;} .coffee_subscription_step2 { margin-top: 50px; -webkit-transition: .2s; -o-transition: .2s; -ms-transition: .2s; -moz-transition: .2s; transition: .2s; } .coffee_subscription_small_step2 { /* display: none; */ } .coffee_subscription_step2_3months, .coffee_subscription_step2_6months { width: 100%; float: left; border: 1px solid #ed2323; font-size: 0.8em; position: relative; margin-top: 10px; margin-bottom: 30px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: .2s; -o-transition: .2s; -ms-transition: .2s; -moz-transition: .2s; transition: .2s; } .coffee_subscription_step2_6months_comeswithkit { position: absolute; right: -30px; top: -30px; color: #fff; background-color: #ed2323; width: 120px; border-radius: 50%; height: 120px; text-align: center; padding: 10px; font-size: 0.8em; padding-top: 28px; text-transform: uppercase; font-weight: 900; border: 3px solid #fff; z-index: 20; } .coffee_subscription_step2_plan { width: 50%; height: 160px; float: left; padding: 5px; padding-bottom: 10px; transition: all .12s ease-in-out; position: relative; padding-top: 10px; margin-top: 34px; -webkit-transition: .2s; -o-transition: .2s; -ms-transition: .2s; -moz-transition: .2s; transition: .2s; } .coffee_subscription_step2_plan:hover { cursor: pointer; /* transform: scale(1.01); */ -webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.2); } .coffee_subscription_step2_plan_headline { text-transform: uppercase; color: #ed2323; text-align: center; width: 100%; font-weight: 900; } .coffee_subscription_step2_plan_monthly { border-right: 1px solid #ed2323; } .coffee_subscription_plan_name { background-color: #ed2323; color: #fff; padding: 5px; font-weight: 900; font-size: 1.5em; text-transform: uppercase; position: absolute; width: 100%; z-index: 10; height: 43px; } .coffee_subscription_most_popular { background-image: url(images/coffee_subscription_most_popular.svg); width: 100%; position: absolute; width: 100%; left: 0; right: 0; height: 158px; top: -130px; background-repeat: no-repeat; background-position: bottom center; background-size: 85%; z-index: 1; } .coffee_subscription_package { width: 100%; height: 190px; margin-top: 50px; margin-bottom: 0; background-repeat: no-repeat; background-position: center center; background-size: contain; } .coffee_subscription_package_small { background-image: url(images/coffee_subscription_package_small.png) } .coffee_subscription_package_medium { background-image: url(images/coffee_subscription_package_medium.png) } .coffee_subscription_package_large { background-image: url(images/coffee_subscription_package_large.png) } .coffee_subscription_plan_text {text-transform: uppercase; margin-top: 10px;} .coffee_subscription_plan_price { color: #ed2323; font-weight: 900; font-size: 2.5em; line-height: 1; text-align: center; margin-left: auto; margin-right: auto; } #coffee_subscription_learnmore { width: 100%; height: 700px; overflow: hidden; position: relative; background-image: url(images/coffee_subscription_farm_2.jpg); background-size: cover; } h3.coffee_subscription_learnmore_headline2 { color: #ed2323; font-weight: 900; } #coffee_subscription_why { width: 100%; height: 700px; overflow: hidden; position: relative; background-image: url(images/coffee_subscription_why1.jpg); background-size: cover; background-position: center center; } .coffee_subscription_plan_go { width: 100px; background-color: #ed2323; height: 20px; margin-left: auto; margin-right: auto; font-weight: 900; color: #fff; width: 110px; font-size: 2em; height: 46px; position: absolute; left: 0; right: 0; bottom: -20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #home_bigslide.coffee_subscription_slides, .coffee_subscription_slides .bigslide { height: 500px; } .coffee_subscription_slides .bigslide { padding: 80px; } .coffee_subscription_slides .bigslide_content { bottom: 30px; } .coffee_subscription_slides h2 { text-align: left; line-height: 1; -webkit-animation-duration: 0; animation-duration: 0; -webkit-animation-name: none; animation-name: none; -webkit-animation-delay: 0; animation-delay: 0; } .coffee_subscription_slides h3 { color: #fff; text-align: left; font-size: 2em; line-height: 1; } #coffee_subscription_slide_kenya {background-image: url(images/coffee_subscription_slide_kenya_bg.jpg);} #coffee_subscription_slide_rwanda {background-image: url(images/coffee_subscription_slide_rwanda_bg.jpg); background-position: center top;} #coffee_subscription_slide_yemen {background-image: url(images/coffee_subscription_slide_yemen_bg.jpg); background-position: center top;} #coffee_subscription_slide_indonesia {background-image: url(images/coffee_subscription_slide_indonesia_bg.jpg);} #coffee_subscription_form {margin-top: 20px;} #coffee_subscription_form input { width: 80%; } #coffee_subscription_form button { width: 13%; padding: 0; height: 40px; } #coffee_subscription_plan_details { } .coffee_subscription_plan_brewingkit {font-size: 0.8em; color: #6a6a6a;} .coffee_subscription_plan_agreement { float: right; padding-left: 0; padding-top: 7px; width: 58%; } .coffee_subscription_plan.coffee_subscription_plan_details { text-align: left; padding: 20px; font-size: 1em; } .coffee_subscription_plan.coffee_subscription_plan_details:hover { cursor: initial; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .coffee_subscription_plan_details .coffee_subscription_package { margin-top: -20px; } .coffee_subscription_plan.coffee_subscription_plan_details span { color: #ed2323; font-weight: 700; text-transform: uppercase; } /* SUPPORT PAGE */ #support { font-size: 0.9em; line-height: 1.8; } /* FEE PAYING STUFF */ body.fee {background-color: #E6E6E6;} .fee_step { width: 500px; margin-left: auto; margin-right: auto; height: auto; margin-top: 20px; padding: 20px; padding-bottom: 16px; color: rgba(0, 0, 0, 1); background-color: #fff; font-size: 18px; line-height: 1.6; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15), 0px 0px 1px 1px rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15), 0px 0px 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15), 0px 0px 1px 1px rgba(0, 0, 0, 0.05); } .fee_step input { border: 1px solid rgba(0, 0, 0, 0.3); padding: 5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .fee_step input#datepicker {font-size: 12px; width: 50%;} .fee_small {font-size: 12px; color: rgba(0, 0, 0, 0.55); line-height: 21px; display: inline-block;} button.fee_continue { float: right; padding-top: 5px; padding-bottom: 5px; font-weight: bold; background-color: #fff; border: 2px solid #ed2323; color: #ed2323; } button.fee_continue:hover { background-color: #ed2323; border: 2px solid #ed2323; color: #fff; } .sc-recurring-total-amount { font-weight: bold; text-decoration: underline; } /* FOOTER */ #footer { color: #fff; background-color: #ed2323; height: 350px; font-size: 12px; line-height: 20px; padding-top: 40px; } #footer li { font-weight: 900; list-style: none; display: block; float: left; width: 20%; } #footer a { color: #fff; text-decoration: none; } #footer a.presskit {text-decoration: underline;} #footer a:hover { color: #000; } #footer .sub-menu li { font-weight: 400; font-weight: normal; display: list-item; float: none; width: 100%; } .footer_logo { float: left; width: 20%; height: 60px; margin-top: 10px; background-position: left center; background-size: 100%; /* SVG with PNG as a fallback. Browsers that support gradients also support SVG, which is why we’re adding a transparent gradient */ background: url(images/logo.png); background: url(images/logo.svg), linear-gradient(transparent, transparent); background-repeat: no-repeat; } #footer hr {border-top: 1px solid rgba(255, 255, 255, 0.32); margin-top: 100px; margin-bottom: 4px;} #footer_bottom {font-size: 11px;} .right {float: right;} #footer .fontawesome {font-size: 18px; margin-left: 3px;} #footer .fontawesome a {margin-right: 10px;} .footer_bunny { float: left; margin-right: 120px; margin-top: -20px; } .footer_newsletter { margin-bottom: 20px; float: right; } .footer_newsletter h5 { font-weight: 900; text-transform: uppercase; font-size: 0.8em; } .footer_newsletter { width: 250px; height: 50px; } .footer_newsletter input { float: left; width: 210px; height: 35px; padding: 10px; border: 0; font-weight: bold; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .footer_newsletter button { float: right; border: 0; margin: 0; height: 35px; width: 40px; color: #fff; line-height: 1; font-weight: bold; background-color: rgba(255, 255, 255, 0.5); -webkit-border-top-left-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-topleft: 0; -moz-border-radius-bottomleft: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .footer_newsletter button:hover { color: #ed2323; background-color: rgba(255, 255, 255, 0.8); } #newsletter_popup { width: 310px; height: 140px; background-color: #fff; position: fixed; left: 20px; bottom: 20px; padding: 10px; border: 2px solid #ed2323; z-index: 1; font-size: 0.8em; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: bounceInUp; animation-name: bounceInUp; -webkit-animation-delay: 5s; animation-delay: 5s; } #newsletter_popup a {text-decoration: none;} #newsletter_popup .footer_newsletter { margin-left: auto; margin-right: auto; width: 100%; } #newsletter_popup strong { text-transform: uppercase; font-weight: 700; margin-bottom: 10px; font-size: 1em; } #newsletter_popup span { font-size: 0.8em; line-height: 1.4; display: inline-block; margin-bottom: 12px; } #newsletter_popup .footer_newsletter input {border: 1px solid #ed2323; font-weight: 400; font-size: 0.8em; width: 85%;} #newsletter_popup .footer_newsletter button {border: 1px solid #ed2323; border-left: 0; background-color: rgba(0, 0, 0, 0.15); font-weight: 400; font-size: 0.75em; color: #000; width: 15%;} #newsletter_popup .footer_newsletter button:hover {background-color: rgba(0, 0, 0, 0.1); color: #000;} .newsletter_popup_x { position: absolute; right: 1px; top: 7px; line-height: 0; opacity: 0.4; } .newsletter_popup_x:hover { opacity: 1.0; } /** PAYMENT PAGE **/ body.payment .stripe-button-el {float: left; margin-top: 36px; margin-left: 10px;} body.payment .sc-form-group {float: left;} body.payment .sc-checkout-form {margin-left: auto; margin-right: auto; width: 325px;} /** Batch 06 Payment Page **/ .batch06_payment_header { width: 100%; max-width: 1200px; height: 500px; margin-left: auto; margin-right: auto; background-image: url(images/batch06_payment_header.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; background-color: #c5c5c5; margin-bottom: 20px; } h1.batch06_payment_header_h1 { font-size: 3em; text-align: center; font-weight: 200; text-transform: uppercase; color: #ed2323; margin-bottom: 20px; } .batch06_payment_text { width: 75%; float: left; padding: 20px; } .batch06_payment_infobox { float: right; width: 25%; height: 530px; background-color: rgba(0, 0, 0, 0.1); padding: 20px; position: relative; font-size: 0.7em; line-height: 1.3; } .batch06_payment_infobox_amount { position: absolute; bottom: 60px; left: 0; right: 0; text-align: center; text-transform: uppercase; font-weight: 700; font-size: 1em; width: 100%; } .batch06_payment_infobox_amount span { display: block; font-size: 4em; font-weight: 300; line-height: 1; } button.batch06_payment_infobox_button { display: block; position: absolute; bottom: 0; left: 0; width: 100%; text-transform: uppercase; border-radius: 0; } button.batch06_payment_infobox_button:hover { background-color: #000; color: #fff; } .batch06_payment_infobox input { width: 100%; margin-bottom: 10px; padding: 4px 10px; border-radius: 5px; border: none; border: 1px solid #bbb; } .batch06_payment_infobox label { width: 100%; font-size: 0.65em; font-weight: 700; text-transform: uppercase; margin-left: 4px; } #batch06_payment_infobox_3 .sc-payment-btn {width: 100%;} #batch06_payment_infobox_3 .batch06_payment_infobox_amount {bottom: 20px;} /** Random Stuff **/ body.200nationdinner a img.alignleft { margin-left: 1%; margin-right: 1%; } /** Application Forms etc. **/ body.application_2 { background-color: rgba(0, 0, 0, 0.12); } #application_2 { width: 100%; max-width: 700px; margin-left: auto; margin-right: auto; margin-top: 50px; padding: 40px; margin-bottom: 100px; background-color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; box-shadow:0px 0px 10px rgba(0, 0, 0, 0.21); } #application_2 textarea, #application_2 input { margin-bottom: 20px; width: 100%; font-size: 18px; border: 1px solid rgba(0, 0, 0, 0.3); padding: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #application_2 button { float: right; padding-top: 9px; padding-bottom: 9px; padding-left: 12px; padding-right: 12px; font-size: 0.9em; display: inline-block; color: #ed2323; background-color: #fff; text-decoration: none; font-weight: 700; border: 2px solid #ed2323; line-height: 1; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #application_2 button:hover { background-color: #ed2323; color: #fff; } #application_2 .icon {font-weight: normal !important;} .application_banner { width: 100%; height: auto; padding: 20px 30px; background-color: #ed2323; color: #fff; } .application_banner h2 { text-align: center; font-size: 1.3em; font-weight: bold; margin: 0 !important; text-transform: none; } .application_banner h3 { text-align: center; font-size: 1em; font-weight: normal; margin: 0 !important; text-transform: none; } .application_banner a.apply_button { width: 100%; max-width: 440px; margin-left: auto; margin-right: auto; display: block; border: 2px solid #fff; color: #fff; text-decoration: none; margin-top: 20px; text-align: center; } .application_banner a.apply_button span.icon {display: inline-block; float: none;} .application_banner a.apply_button:hover { border: 2px solid #fff; color: #ed2323; background-color: #fff; text-decoration: none; } #application_footer { width: 100%; height: auto; padding: 40px 30px 40px 30px; background-color: rgba(0, 0, 0, 0.1); text-align: center; } span.application_footer_h2 { text-align: center; font-size: 1.3em; font-weight: bold; margin: 0 !important; text-transform: uppercase; } span.application_footer_h3 { text-align: center; font-size: 1em; font-weight: normal; margin: 0 !important; text-transform: none; } #application_footer a.apply_button { width: 100%; max-width: 440px; margin-left: auto; margin-right: auto; display: block; margin-top: 30px; } #application_footer a.apply_button span.icon {display: inline-block; float: none;} /* ANIMATIONS */ @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } /* RESPONSIVE */ /* Retina */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { #logo { background: url(images/logo@2x.png); background: url(images/logo.svg), linear-gradient(transparent, transparent); background-repeat: no-repeat; } } @media all and (min-width: 1500px) { #home_video {height: 800px;} } @media all and (max-width: 1200px) { #home_video_text {bottom: 120px;} #home_video_text h2 {font-size: 2em;} #home_video_text h3 {font-size: 2em;} #home_facebook {font-size: 0.8em;} #home_facebook span {font-size: 1.4em;} .home_redquote {font-size: 1.1em;} .home_redquote img {width: 130px;} .home_intern {font-size: 1.2em; width: 40%;} #home_revolution { width: 60%; } .home_medialogos {height: 110px;} #home_news_map { max-width: 1200px; width: 100%; margin: 0 auto; padding-left: 0; padding-right: 0; } #home_quotes, #home_news {height: 300px;} .home_quote {font-size: 1.1em;} .backtotop { float: right; } .story_text {width: 500px; font-size: 0.9em;} .story_menu, .twwowc_menu {width: 140px; font-size: 0.6em;} .story_menu .dots {height: 72px;} .story_timeline {font-size: 0.9em; padding: 10px; width: 130px;} .story_timeline_text {margin-left: 30px;} .story_bean, .ycombinator, .monogram {width: 25px; height: 25px;} .story_timeline .dots {height: 132px; width: 25px;} .story_photo {width: 49%; height: 245px;} .bigquote_1 {font-size: 4.7em;} .bigquote_2 {font-size: 10em;} .bigquote_3 {font-size: 3.5em;} .batch06_payment_text { width: 60%; } .batch06_payment_infobox { width: 40%; } #frontpage_hero {height: 520px;} .frontpage_intro { padding-top: 50px; padding-bottom: 70px; padding-left: 110px; padding-right: 110px;} .frontpage_revolution h2 { font-size: 2em; } .frontpage_news h2 { font-size: 1.6em; } .contact_left {margin-left: 1%; width: 49%} .frontpage_quote_logo {background-size: 70px;} #frontpage_quote_logo_bbc { } #frontpage_quote_logo_techcrunch { background-size: 110px; } #frontpage_quote_logo_inhabitat { background-size: 90px; } #frontpage_quote_logo_forbes { background-size: 70px; } #frontpage_quote_logo_fastco { background-size: 100px; } #frontpage_quote_logo_inc { background-size: 55px; } } @media all and (max-width: 810px) { .title h2 {font-size: 2em;} .menu_right_join {font-size: 0.5em; font-weight: 900; text-transform: uppercase; padding-left: 5px; padding-right: 3px;} #home_video {height: 390px;} #home_video_text {bottom: 30px;} #home_video_text h2 {font-size: 1.8em;} #home_video_text h3 {font-size: 1.6em;} #home_video_text a {font-size: 1em;} #home_video_bestcoffee {display: none; } #home_quotes, #home_news {width: 100%;} #home_news .owl-controls {margin-top: -150px;} #home_news {height: 300px;} .home_news_item blockquote {margin-top: 65px;} #home_video {margin-top: -20px;} .home_medialogos {height: 85px; padding-top: 35px; padding-bottom: 35px;} .home_redquote {font-size: 0.9em; height: auto; padding-top: 30px; padding-bottom: 30px; } .home_redquote img {width: 100px;} .home_intern, #home_revolution {height: 230px;} #home_contactform h2 {font-size: 2em;} #home_contactform h3 {font-size: 1em;} #home_contactform form {padding-left: 10px;} .home_medialogos img {margin-left: 10px; margin-right: 10px;} .bigquote_1 {font-size: 3.3em;} .bigquote_2 {font-size: 7em;} .bigquote_3 {font-size: 2.5em;} .story_menu, .twwowc_menu {display: none;} .story_timeline {display: none;} .story_text { width: 100%; padding: 20px; } .blog_header h2 {font-size: 1.15em;} .blog_all_posts article {width: 50%; padding: 10px;} article.category-bigquote {width: 100%;} .blog_all_posts .entry {font-size: 0.8em;} .blog_all_posts h3 {font-size: 1.3em; margin-bottom: 0;} .blog_all_posts .date {font-size: 0.8em;} .featured_image {height: 400px;} .blog_single_post_article {font-size: 0.9em;} .blog_single_post h2 {font-size: 1.5em;} .blog_single_post .date, a.backtoblog {font-size: 0.7em;} #mywheelys_world form {width: 580px; margin-left: -290px;} .guide {height: 220px; margin: 0.5%; width: 49%; line-height: 40px;} .guide h2 {font-size: 2em; margin-top: 2em; margin-bottom: 0;} .guide_box {font-size: 0.8em;} .footer_bunny {margin-right: 40px;} #sk-holder {display: none !important;} .coffee_subscription_plan { width: 100%; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 40px; } .coffee_subscription_most_popular {display: none;} .coffee_subscription_cup { width: 150px; float: left; height: 120px; margin-bottom: 0; } .coffee_subscription_plan_text { } .coffee_subscription_plans_headline {font-size: 1em;} .coffee_subscription_step2_plan { height: 190px; } .coffee_subscription_step2_6months_comeswithkit { left: 50%; margin-left: -60px; bottom: -60px; top: auto; right: auto; } .sidebar {font-size: 0.75em; width: 130px;} #mywheelyslogo {width: 85px;} body.page-template-template-mywheelys-login #top, body.page-template-template-mywheelys-login nav, body.page-template-template-mywheelys-login #footer, body.page-template-template-mywheelys-login .page, body.buddypress.logged-in.overlay:before, body.public.logged-in #top, body.public.logged-in nav, body.public.logged-in #footer, body.public.logged-in #mywheelys, body.page-template-buddypress #top, body.page-template-buddypress nav, body.page-template-buddypress #footer, body.buddypress #top, body.buddypress nav, body.buddypress #footer, #mywheelys, body.page-template-template-mywheelys-content #top, body.page-template-template-mywheelys-content nav, body.page-template-template-mywheelys-content #footer, body.menu-generator #top, body.menu-generator nav, body.menu-generator #footer, body.shipping-payment #top, body.shipping-payment nav, body.shipping-payment #footer, body.woocommerce #footer, #mywheelys {margin-left: 130px;} #frontpage_hero {height: 470px;} .frontpage_intro { padding-top: 30px; padding-bottom: 40px; padding-left: 30px; padding-right: 30px;} .frontpage_intro h1 { font-size: 1.6em;} .frontpage_intro h2 {font-size: 0.9em;} #frontpage_contact {padding-top: 50px; padding-bottom: 50px;} .frontpage_revolution {height: 180px;} .frontpage_revolution h2 { font-size: 1.6em; line-height: 205px; } .frontpage_quote {font-size: 0.8em; font-weight: 600; padding-top: 40px; padding-bottom: 40px;} .frontpage_pressquotes h3 {font-size: 0.5em; font-weight: 600;} .contact_left {margin-left: 1%; width: 49%} .frontpage_quote_logo { background-size: 70px; height: 45px; } #frontpage_quote_logo_bbc { background-size: 60px; } #frontpage_quote_logo_techcrunch { background-size: 80px; } #frontpage_quote_logo_inhabitat { background-size: 70px; } #frontpage_quote_logo_forbes { background-size: 60px; } #frontpage_quote_logo_fastco { background-size: 85px; } #frontpage_quote_logo_inc { background-size: 45px; } .frontpage_news {height: 210px;} .frontpage_news h2 { font-size: 1.2em;} .frontpage_news_item {height: 210px; padding-top: 50px;} #frontpage_news_item_spacer {height: 80px;} .owl-nav {display: none;} .frontpage_nyanbike {height: 150px;} } @media all and (max-width: 650px) { body.page-template-template-mywheelys-login .social, body.public.logged-in .social, body.page-template-buddypress .social, body.buddypress .social, #mywheelys .social, body.page-template-template-mywheelys-content .social, body.menu-generator .social, body.shipping-payment .social, body.woocommerce .social {display: none;} .footer_bunny {display: none;} } /** Mobile **/ @media all and (max-width: 600px) { .page {margin-top: 40px;} .home_quote {font-size: 1em; padding: 20px; height: auto;} .home_quote_logo {width: 70px;} #home_quote_2 {padding: 20px; height: auto;} #home_monogram {height: 100px;} #home_greenbeans, #home_facebook {height: 230px;} #home_facebook {width: 50%;} #home_brownbeans {width: 100%; height: 110px;} .home_intern, #home_revolution {height: 160px;} .home_intern {font-size: 0.8em;} .home_medialogos {height: 100px; padding-top: 26px; padding-bottom: 40px;} .home_medialogos img { height: 40%; } #home_video_text_247 h2.wheelys_247_h2 {font-size: 1em;} #frontpage_hero {height: 330px;} #frontpage_hero #home_video_text_247 h2.wheelys_247_h2 {font-weight: 900;} /** A/B Testing front pages **/ /** TWO **/ .home_2_text { font-size: 0.8em; font-family: Georgia, serif; } .home_news_item blockquote {font-size: 1.1em !important;} .home_3_text { font-size: 0.8em; } .home_2_text input, .home_3_text input{ width: 100%; float: none; margin-right: 0; padding: 11px; border-radius: 5px; border: 1px solid #000; } .home_2_text button, .home_3_text button { width: 100%; float: none; margin-top: 10px; font-weight: 900; } .home_2_emailbox, .home_3_emailbox { background-color: rgba(0, 0, 0, 0.06); padding: 10px; font-size: 0.8em; } .width_1200, .width {padding-left: 10px; padding-right: 10px;} /* .page {margin-top: -20px;} */ #home_overlay, #overlay { font-size: 70%; } #home_overlay_inner, #overlay_inner {max-height: 290px} h2 {font-size: 1.6em;} .title h2 {font-size: 1.6em;} .killer_quote {font-size: 1.6em;} #top {height: 40px; padding-top: 5px; margin-bottom: 0;} #logo {height: 30px; width: 81px;} #top .social {display: none;} #top .menu_right {display: none;} #menu_button, #menu_button_close, #menu_button_mywheelys, #menu_button_close_mywheelys { height: 40px; width: 60px; margin-top: -10px; padding-top: 16px; padding-right: 20px; padding-left: 10px; } nav { width: 100%; padding-top: 30px; } .menu_bigs {display: none;} .menu_mainmenu { width: 100%; max-width: 100%; padding-top: 0px; padding-left: 20px; font-size: 0.7em; } img#jp_poster_0 {display: block !important;} video#jp_video_0 {display: none !important;} #home_quotes, #home_news, #home_news .owl-item {height: 320px; } #home_news .owl-controls {margin-top: -145px;} #home_news {height: 200px;} .home_news_item blockquote {margin-top: 10px; font-size: 1.8em;} #home_revolution h2, #home_contactform h2 {font-size: 1.7em;} #home_wheelys4 {height: 270px;} .bigslide h2 {font-size: 2.1em;} #home_contactform input, #home_contactform textarea {width: 100%;} #home_contactform { padding: 10px; padding-bottom: 30px; padding-top: 30px; } .contact_left, #home_contactform textarea {width: 100%; float: none;} .blog_all_posts .entry {margin-bottom: 0;} .blog_all_posts article {width: 100%; padding: 10px; margin-bottom: 0;} .blog_header h2 {font-size: 1em;} #mywheelys_world form {width: 480px; margin-left: -240px;} #world_map {height: 340px;} #gmw-map-wrapper-1 {height: 340px !important;} body.world .gmw-form-1 input[type=text], body.results .gmw-form-1 input[type=text], body.results .gmw-form-4 input[type=text] {font-size: 1em; height: 60px;} body.world #gmw-submit-1, body.results #gmw-submit-1, body.results #gmw-submit-4 {height: 60px; line-height: 60px; font-size: 1.5em;} .gmw-results-wrapper {width: 100%; padding-left: 10px; padding-right: 10px;} #footer .right.fontawesome { width: 100%; float: none; text-align: center; margin-bottom: 40px; } #footer li {width: auto; padding-right: 20px;} #footer hr {margin-top: 70px;} .twwowc_bigpicture {height: 160px; margin-top: -20px; margin-bottom: -70px;} /* BuddyPress */ #buddypress .standard-form #basic-details-section, #buddypress .standard-form #blog-details-section, #buddypress .standard-form #profile-details-section {width: 100%;} .register-section {margin-top: 2em;} #buddypress .standard-form#signup_form div.submit { width: 100%; height: 30px; float: right; } #buddypress button, #buddypress a.button, #buddypress input[type=submit], #buddypress input[type=button], #buddypress input[type=reset], #buddypress ul.button-nav li a, #buddypress .generic-button a, #buddypress .comment-reply-link, a.bp-title-button { padding: 15px; } article.category-bigquote {padding: 0;} .bigquote_1 {font-size: 1.8em;} .bigquote_2 {font-size: 3.9em;} .bigquote_3 {font-size: 1.3em;} #sk-holder {display: none;} body.howtobrew h2 {1.5em;} .guide { margin:0; margin-bottom: 5px; width: 100%; height: 200px;} .guide h2 {height: 310px; font-size: 1.4em; margin-top: 3em; } .guide_ingredients, .guide_equipment, .guide_share { float: left !important; width: 100% !important; margin-bottom: 1em; } .guide_ingredients p, .guide_equipment p, .guide_share p {margin: 0;} .inthemedia_quote blockquote {font-size: 1em;} #newsletter_popup {display: none; } #home_revolution {padding: 30px;} .coffee_subscription_step2_plan {height: 210px;} .sidebar .sidebar-widget {display: none;} .sidebar {top: 40px; padding: 5px; height: 45px; width: 100%;} #mywheelyslogo {width: 65px; margin-top: -6px; margin-bottom: 0; margin-left: auto; margin-right: auto;} a.mywheelyslogo_link_desktop {display: none;} .mywheelyslogo_mobile {display: block;} .sidebar #menu_button_mywheelys, .sidebar #menu_button_close_mywheelys {margin-top: 0px;} .sidebar .menu_button_line { background-color: #D8D8D8;} body.page-template-template-mywheelys-login #top, body.page-template-template-mywheelys-login nav, body.page-template-template-mywheelys-login #footer, body.page-template-template-mywheelys-login .page, body.buddypress.logged-in.overlay:before, body.public.logged-in #top, body.public.logged-in nav, body.public.logged-in #footer, body.public.logged-in #mywheelys, body.page-template-buddypress #top, body.page-template-buddypress nav, body.page-template-buddypress #footer, body.buddypress #top, body.buddypress nav, body.buddypress #footer, #mywheelys, body.page-template-template-mywheelys-content #top, body.page-template-template-mywheelys-content nav, body.page-template-template-mywheelys-content #footer, body.menu-generator #top, body.menu-generator nav, body.menu-generator #footer, body.shipping-payment #top, body.shipping-payment nav, body.shipping-payment #footer, body.woocommerce #footer, #mywheelys {margin-left: 0;} #frontpage_contactform input, #frontpage_contactform textarea {width: 100%;} #frontpage_contact form {padding-left: 10px; padding-right: 10px;} .contact_left, #home_contactform textarea {margin-left: auto; margin-right: auto;} #frontpage_contactform textarea {width: 100%; margin-left: auto; margin-right: auto; height: 120px;} .frontpage_contactform h2 {font-size: 1.4em;} #frontpage_contactform input, #frontpage_contactform textarea {font-size: 16px;} .frontpage_revolution h2 {font-size: 1.1em; line-height: 150px;} .frontpage_revolution {height: 130px;} .frontpage_quote {font-size: 0.6em} .frontpage_news {height: 170px;} .frontpage_news_item {height: 170px; padding-top: 30px;} #frontpage_news_item_spacer { height: 65px; } .frontpage_news a.button {font-size: 0.7em;} .frontpage_intro h1 {font-size: 1.4em;} .frontpage_intro h2 {font-size: 0.7em;} .frontpage_news h2 {font-size: 0.8em;} .frontpage_width {padding-left: 0; padding-right: 0;} #frontpage_quote_logo_bbc {background-size: 50px; } #frontpage_quote_logo_techcrunch { background-size: 70px; } #frontpage_quote_logo_inhabitat { background-size: 60px; } #frontpage_quote_logo_forbes { background-size: 50px; } #frontpage_quote_logo_fastco { background-size: 70px; } #frontpage_quote_logo_inc { background-size: 35px; } } @media all and (max-width: 500px) { #home_overlay {display: none !important;} #home_video_text {bottom: 20px; line-height: 1;} #home_video_text a {font-size: 0.8em;} #home_video {height: 270px;} #home_video_text h2 { font-size: 1.6em; } #home_video_text h3 { font-size: 0.8em; } #home_quotes, #home_news, #home_news .owl-item {height: 220px; } #home_getintouch {font-size: 0.7em; height: 70px; line-height: 40px;} #home_monogram {height: 70px; padding: 10px;} #home_greenbeans, #home_facebook {height: 130px;} #home_brownbeans {height: 70px;} #home_facebook {padding: 10px; font-size: 0.6em; line-height: 1.2; } #home_facebook .icon {font-size: 2em;} #home_facebook span { font-size: 1em; font-weight: 900;} .home_intern, #home_revolution {height: 120px; width: 100%;} #home_news .owl-controls {margin-top: -25px;} .home_news_item blockquote {margin-top: 20px; font-size: 1.1em;} #home_quotes_sticker {font-size: 0.6em; padding-top: 21px; width: 110px; height: 110px;} #home_contactform h3 {font-size: 1em;} #home_contactform form {margin-top: 20px;} #home_contactform input, #home_contactform textarea {font-size: 0.8em;} #home_contactform button {margin-top: 0; font-size: 16px; } #home_bigslide {height: 230px;} .bigslide_content {bottom: 15px;} .bigslide {height: 230px;} .bigslide h2 {font-size: 1.2em;} .bigslide a {font-size: 0.8em;} #home_bigslide .owl-nav {display: none !important;} .title h2 {font-size: 1.2em;} #home_video_text_247 h2.wheelys_247_h2 {font-size: 0.7em; font-weight: 900;} /* Blog */ .blog_header h1 {font-size: 3em; line-height: 1;} .blog_header h2 {font-size: 0.9em;} #mywheelys_world form {width: 300px; margin-left: -150px; top: 320px;} #coffee_subscription_step2_scroll {height: 0;} .coffee_subscription_plans_subhead {font-size: 0.8em;} .coffee_subscription_plans_headline {font-size: 0.6em;} .coffee_subscription_plan {margin-bottom: 50px; padding-bottom: 0; height: 350px;} .coffee_subscription_cup {width: 70px; height: 90px; margin-right: 5px;} .coffee_subscription_step2_plan { width: 100%; margin-top: 0; height: 170px; } .coffee_subscription_step2_plan_monthly { border-right: 0; border-bottom: 1px solid #ed2323; margin-top: 34px; } .coffee_subscription_plan_text { margin-top: 5px; } .coffee_subscription_step2_6months_comeswithkit { left: -17px; margin-left: 0; bottom: 152px; top: auto; right: auto; font-size: 9px; width: 80px; height: 80px; padding-top: 18px; } #home_bigslide.coffee_subscription_slides, .coffee_subscription_slides .bigslide {height: 300px;} .coffee_subscription_slides .bigslide {padding: 10px;} .bigslide h2, .bigslide h3 {font-size: 1.2em;} #footer {height: 280px;} #footer hr {margin-top: 60px;} #footer .right {float: none; width: 100%; margin-bottom: 20px;} .footer_newsletter {width: 100%; margin-left: auto; margin-right: auto;} .footer_newsletter input {width: 80%;} .footer_newsletter button {width: 20%;} #footer .fontawesome {margin-left: 0; text-align: center; font-size: 21px; margin-top: 30px; } #menu-footer {display: none;} #frontpage_hero {height: 260px;} .frontpage_intro { padding-top: 20px; padding-bottom: 30px; padding-left: 10px; padding-right: 10px; } .frontpage_intro h1 {font-size: 1em;} .frontpage_intro a.introbutton {width: 100%; margin-bottom: 10px; margin-left: auto; margin-right: auto;} .frontpage_revolution h2 {font-size: 0.8em;} .frontpage_quote {font-size: 0.7em; padding-top: 30px; padding-bottom: 30px;} .frontpage_quote_logo { width: 33.333%; border-top: 4px solid #fff; } #frontpage_quote_logo_bbc {border-left: 4px solid white; background-size: 50px; } #frontpage_quote_logo_techcrunch { background-size: 70px; } #frontpage_quote_logo_inhabitat { background-size: 60px; } #frontpage_quote_logo_forbes { background-size: 50px; } #frontpage_quote_logo_fastco { background-size: 70px; } #frontpage_quote_logo_inc { background-size: 35px; } #home_overlay h1, #overlay h1 {font-size: 1.2em;} a.home_overlay_button, a.overlay_button {font-size: 0.9em; padding: 6px 20px;} #home_overlay_inner, #overlay_inner {height: 210px; width: 95%;} .home_overlay_content, .home_overlay_email, .overlay_content, .overlay_email {top: 7%;} .home_overlay_email input, .overlay_email input {padding: 10px;} .home_overlay_email, .overlay_email {padding-top: 10px;} } /* HEIGHT */ @media all and (max-height: 800px) { .menu_mainmenu {font-size: 0.8em; line-height: 1.4; padding-left: 30px; padding-top: 0; } .menu_bigs {font-size: 2em;} } @media all and (max-height: 660px) { .menu_mainmenu {font-size: 0.8em; line-height: 1.4; padding-left: 20px; padding-top: 10px; } .menu_mainmenu a {margin-top: 10px} .menu_bigs {font-size: 2em;} }