/* ========================================================================== * Client: Crush Cubes * Description: Add Pretty to Plain HTML * Version: 1.0.01 * Developer: Douglas Gintz * Website: www.pacificCoders.com ========================================================================== */ /* ---------------------------------------------------- 1) BS OVERRIDES ------------------------------------------------------- */ .panel-group {margin-bottom: 0;} .panel-group .panel {border-radius: 0;} .panel-group .panel img { display: block; max-width: 100%; height: auto; } .panel-default {border-color: transparent;} .panel { border: none; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; } .panel-heading { text-align: center; padding: 5px 15px; background-color: #f5f5f5; } .btn { border-radius: 0px; text-decoration: none; padding: 12px 18px; font-size: 12px; line-height: 19px; text-transform: uppercase; font-family: 'Oswald', sans-serif; font-weight: 700; letter-spacing: 3px; border: 2px solid transparent; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .pagination {border-radius: 0;} .pagination>li:first-child>a, .pagination>li:first-child>span { border-bottom-left-radius: 0; border-top-left-radius: 0; } .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus { background-color: #d0ad55; border-color: #d0ad55; } .pagination>li:last-child>a, .pagination>li:last-child>span { border-bottom-right-radius: 0; border-top-right-radius: 0; } .pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus {color: #282828;} .pagination>li>a, .pagination>li>span {color: #282828;} .btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] .btn-default.active { background-color: #d0ad55; border-color: #d0ad55; } .form-control { height: 46px; padding: 12px 18px; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: none; transition: none; } .form-control:focus { border-color: #999; outline: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .progress { background-color: #fff; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; } .progress-bar { float: left; width: 0; height: 100%; font-size: 12px; line-height: 20px; color: #fff; text-align: center; background-color: #d0ad55; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: width .6s ease; -o-transition: width .6s ease; transition: width .6s ease; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: transparent; border: none; } .nav>li>a { position: relative; display: block; padding: 12px 15px; } .navbar-default .navbar-brand {} .navbar-brand { float: left; max-height: 60px; padding: 10px; /*font-size: 18px; line-height: 20px; */ } .navbar-brand img {max-height: 60px;} .nav>li>a:hover, .nav>li>a:focus { text-decoration: none; background-color: transparent !important; } .navbar {border: none;} .navbar-default .navbar-nav>li>a { color: #333; font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 12px; font-weight: 500; letter-spacing: 1px; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus { color: #d0ad55; background-color: transparent; } .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { color: #d0ad55; background-color: transparent; -webkit-transition: background-color .2s linear, color .2s linear; -moz-transition: background-color .2s linear, color .2s linear; -o-transition: background-color .2s linear, color .2s linear; -ms-transition: background-color .2s linear, color .2s linear; transition: background-color .2s linear, color .2s linear; } .navbar-default .navbar-toggle .icon-bar {background-color: #d0ad55;} .navbar-default .navbar-toggle {border-color: transparent;} .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {background-color: transparent;} .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {max-height: 100%;} .modal-header { min-height: 16.43px; padding: 25px; border-bottom: none; } .modal {top: 10%;} .modal-body {padding: 10px 50px 50px 50px;} .modal-content { position: relative; background-color: #f2f2f2; -webkit-background-clip: padding-box; background-clip: padding-box; border: none; border: none; border-radius: 0; outline: 0; -webkit-box-shadow: none; box-shadow: none; } .thumbnail { margin-bottom: 0; border: none; } .close { float: right; font-size: 32px; font-weight: 700; line-height: 1; color: #d0ad55; text-shadow: none; filter: none; opacity: 100; } /* ---------------------------------------------------- 2) GENERAL STYLE ------------------------------------------------------- */ html { overflow-x: hidden; overflow-y: auto; min-height: 100%; } body { font-size: 15px; font-family: 'Open Sans', sans-serif; font-weight: 300; line-height: 22px; color: #4c4c4c; margin: 0; } #header{z-index: 10;} .page-wrapper{z-index:2;margin-bottom: 615px;} #contact{z-index:0;} /*loader*/ .spinner { margin: 0 auto; width: 70px; text-align: center; } .spinner > div { width: 18px; height: 18px; background-color: #ce171f; border-radius: 100%; display: inline-block; -webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; /* Prevent first frame from flickering when animation starts */ animation-fill-mode: both; } .spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) } } @keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 40% { transform: scale(1.0); -webkit-transform: scale(1.0); } } #preloader { position: fixed; display: table; width: 100%; height: 100%; min-height: 100%; overflow-x: hidden; overflow-y: hidden; vertical-align: middle; background: #fff; z-index: 9999; } .preloader-container { position: relative; display: table-cell; vertical-align: middle; z-index: 3; text-align: center; } #secondary-content{padding: 0 auto 30px auto;} /* ---------------------------------------------------- 3) TYPOGRAPHY ------------------------------------------------------- */ body { color: #4f5057; font-family: "Open Sans", Arial, sans-serif; font-size: 14px; line-height: 22px; } h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; color: #346699; font-weight: 200; letter-spacing: -1px; margin: 0; } h1 { font-size: 3.2em; line-height: 44px; margin: 0 0 44px 0; } h2 { font-size: 2.6em; font-weight: 300; line-height: 42px; margin: 0 0 32px 0; } h3 { color: #CCC; font-size: 1.8em; font-weight: 400; letter-spacing: normal; line-height: 24px; margin-bottom: 33px; text-transform: uppercase; } h4 { color: #346699; font-size: 1.4em; font-weight: 400; letter-spacing: normal; line-height: 27px; margin: 0 0 14px 0; } h5 { color: #346699; font-size: 1em; font-weight: 600; letter-spacing: normal; line-height: 18px; margin: 0 0 14px 0; text-transform: uppercase; } h6 { color: #346699; font-size: 1em; font-weight: 400; letter-spacing: normal; line-height: 18px; margin: 0 0 14px 0; } a:visited {color: #4A7194;} a:active {color: #D1700E;} a:hover, a:focus { text-decoration: underline; outline: none; } a { color: #aaaaaa; padding: 0; margin: 0; text-decoration: none; -webkit-transition: background-color .2s linear, color .2s linear; -moz-transition: background-color .2s linear, color .2s linear; -o-transition: background-color .2s linear, color .2s linear; -ms-transition: background-color .2s linear, color .2s linear; transition: background-color .2s linear, color .2s linear; } a:hover, a:focus { text-decoration: none; color: #d0ad55; outline: none; outline-offset: none; } /* ---------------------------------------------------- 4) HEADER ------------------------------------------------------- */ /*navbar*/ .header-nav { text-align: center; background: rgba(255, 255, 255, 0.9); border-color: transparent; border-radius: 0; margin: 0; } #header { width: 100%; z-index: 9999; } #header { z-index:991; position: relative; } #header > .container { height: 105px; margin-bottom: -10px; position: relative; display: table; max-width: 1170px; } #header > .navbar-collapse > .container {position: relative;} #header nav {float: right;} #header nav ul.nav-main {margin: -7px 10px 8px 0;} #header nav ul.nav-main > li + li {margin-left: -4px;} #topbar .nav li a { font-family: Oswald, sans-serif !important; font-size: 16px; height: 42px; margin: 0px 3px; text-transform: uppercase; font-weight: 500; color: #fff; display: block; -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; -ms-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out;} #topbar .nav li a:hover {color:#fff !important;background-color: #ce171f !important; } #topbar .nav li a.selected-nav{color:#fff !important;background-color: #ce171f !important;} #topbar .nav li.logo-small a,#topbar .nav li.logo-small a:visited { cursor: pointer;background-color: transparent !important;} #topbar .nav li.logo-small a:hover {cursor: pointer;background-color: transparent !important; } #topbar .nav li.logo-small a.selected-nav{cursor: pointer;background-color: transparent !important;} #topbar .navbar-toggle { position: relative; float: right; background-color: none; padding: 10px; margin: 13px 30px 13px 0; border: none; } #header .nav-main-collapse {overflow-y: visible;} #header .nav-main-collapse.in {overflow-y: visible;} #header .inner-wrapper{ background: rgb(0, 0, 0); /* RGBa with 0.6 opacity */ background: rgba(0, 0, 0, 0.7); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; /*clear: both;*/ padding: 0; /*min-height: 100px;*/ } /* sticky header */ #header.fixed { position: fixed; top: 0; width: 100%; z-index: 1001; } /* branding */ #header .logo { text-align: center; position: static; /*padding: 6px 0 6px 0;*/ display: inline-block; -webkit-transition: all 0.2s ease-in 0.2s; -moz-transition: all 0.2s ease-in 0.2s; transition: all 0.2s ease-in 0.2s; margin: 6px 0; vertical-align: middle; } #header .logo a { position: relative; z-index: 1; } #header .logo img { position: relative; color: transparent; } /* Sticky Menu */ #header.fixed { position: fixed; top: 0; width: 100%; z-index: 1001; } body.sticky-menu-active #header > .container {margin-top: -75px;} body.sticky-menu-active #header .logo {text-align: left;} body.sticky-menu-active #header .logo img {margin-top: 42px;} body.sticky-menu-active #header nav { float: left; margin-top: 18px; width: auto; } body.sticky-menu-active #header nav ul.nav-main > li > a, body.sticky-menu-active #header nav ul.nav-main > li:hover > a { padding-bottom: 10px; padding-top: 10px; } /*affects topbar position on scroll*/ body.sticky-menu-active #header { /*border-bottom: 1px solid #E9E9E9; */position: fixed; top: -156px; width: 100%; z-index: 1001; box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); filter: none; } body.sticky-menu-active #header .social-icons {margin-top: -1px;} body.sticky-menu-active #header nav ul.nav-main { margin-bottom: 7px; margin-top: -1px; } #topbar { margin-top:12px;} #topbar .nav * { color: #fff; } #topbar .nav *:hover { color: #4f5057; } #topbar.navbar-nav > li > a{text-shadow: none;} #topbar{ background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); } #topbar .container{ line-height: 0px; } .nav>li { -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .nav>li.logo-small { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; width: 0; overflow: hidden; padding: 0; } .nav>li.logo-small>a { display: block!important; text-indent: -99999px; white-space: nowrap; overflow: hidden; border: 0; font: 0/0 a; text-shadow: none; color: transparent; background-color: transparent; background: url(../imgs/logo-small-white.png) 0 7px no-repeat; height: 25px; width: 144px !important; } #mainMenu{float:none !important;display:inline-block;margin:0 auto;} #mainMenu .nav>li { -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; padding: 0px 22px 0 0;float:left; } .collapsed .nav>li.logo-small { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; width: 144px !important; } /* ---------------------------------------------------- 5) FOOTER ------------------------------------------------------- */ footer { padding: 16px 30px; background-color: #FFF; border-top: 1px solid #dddddd; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px } footer {color: #838994} footer ul {margin-bottom: 0} footer ul li {padding: 1px 0} footer ul li a {color: #838994 !important;display:block} footer ul li.title { color: #4c5058; font-weight: 500; margin-bottom: 6px } footer .logo { background-image: url(../imgs/footer-logo.png); background-repeat: no-repeat; background-size: contain; display: inline-block; line-height: 40px; height: 40px; width: 120px } footer .logo span { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0 } footer .list-inline li:last-child {padding-right: 0} footer .legal {display: block} footer .legal a:first-child {margin-right: 10px} footer .social-accounts {margin-bottom: 15px} footer .social-accounts li a { width: 42px; height: 42px; line-height: 42px; text-align: center; border-radius: 21px; border: 1px solid #eaebec } footer .social-accounts .title {display: block;padding-bottom:6px} footer .social-accounts .facebook {color: #4c66a4} footer .social-accounts .facebook:hover {color: #5872b2} footer .social-accounts .twitter {color: #55acee} footer .social-accounts .twitter:hover {color: #6cb7f0} footer .social-accounts .instagram {color: #3f729b} footer .social-accounts .instagram:hover {color: #386589} footer .btn-link { color: #f15f3f; font-weight: normal; cursor: pointer; border-radius: 0 } footer .form-label-inline .input-group-addon { padding: 0; background-color: white; } footer .input-group-addon:last-child { border-left: 0; } footer .input-group footer .form-control:last-child,footer .input-group-addon:last-child,footer .input-group-btn:last-child>.btn,footer .input-group-btn:last-child>.btn-group>.btn,footer .input-group-btn:last-child>.dropdown-toggle,footer .input-group-btn:first-child>.btn:not(:first-child),footer .input-group-btn:first-child>.btn-group:not(:first-child)>.btn {border-bottom-left-radius: 0;border-top-left-radius:0} footer .input-group-addon:last-child {border-left: 0} #icon-bar{ position: fixed; bottom: 0px; text-align: center; z-index: 1040;background-color: transparent;width:100%; } .icon-bar-wrapper { /*-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;*/border-radius: 4px 4px 0 0; color: #FFF !important; padding: 0px;text-decoration: none; display:inline-block;margin:0 auto; background:transparent url(../imgs/bg-black.png) repeat;} .footer-socials {margin: 6px 0;padding:0px 6px} .footer-socials li { width: auto !important; line-height: 22px; display: inline-block !important; float: left; vertical-align: top; clear: none !important; } a.foo_social,a.footer-social:visited { color:000 !important;background:#FFF } .foo_social { width: 22px; height: 22px; color: #000 !important; font-size: 14px; line-height: 20px; text-decoration: none; text-align: center; display: block; margin: 0 6px; border: 2px solid #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; -ms-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; } .ico-facebook:hover { background-color: #3b5998; color: #f8f8f8 !important; border-color:#3b5998; } .ico-twitter:hover { background-color: #00a9ed ;color: #f8f8f8 !important; border-color:#00a9ed; } .ico-google-plus:hover { background-color: #cd1111; color: #f8f8f8 !important; border-color:#cd1111; } .ico-linkedin:hover { background-color: #015886; color: #f8f8f8 !important; border-color:#015886; } .ico-dribbble:hover { background-color: #d92d84; color: #f8f8f8 !important; border-color:#d92d84; } .ico-instagram:hover { background-color: #beb3a8; color: #f8f8f8 !important; border-color:#beb3a8; } .ico-pinterest:hover { background-color: #ac281a; color: #f8f8f8 !important; border-color:#ac281a; } .ico-dropbox:hover { background-color: #008ad2; color: #f8f8f8 !important; border-color:#008ad2; } .ico-skype:hover { background-color: #00a9ed; color: #f8f8f8 !important; border-color:#00a9ed; } .ico-youtube:hover { background-color: #cd1b20; color: #f8f8f8 !important; border-color:#cd1b20; } .ico-tumblr:hover { background-color: #3a5976; color: #f8f8f8 !important; border-color:#3a5976; } .ico-vimeo:hover { background-color: #00adee; color: #f8f8f8 !important; border-color:#00adee; } .ico-flickr:hover { background-color: #d2d2d2; color: #f8f8f8 !important; border-color:#d2d2d2; } .ico-github:hover { background-color: #222; color: #f8f8f8; border-color:#222; } .ico-renren:hover { background-color: #364a83; color: #f8f8f8 !important; border-color:#364a83; } .ico-vk:hover { background-color: #3b5998; color: #f8f8f8 !important; border-color:#3b5998; } .ico-xing:hover { background-color: #015f5e; color: #f8f8f8 !important; border-color:#015f5e; } .ico-weibo:hover { background-color: #be4443; color: #f8f8f8 !important; border-color:#be4443; } .ico-rss:hover { background-color: #ff6600; color: #f8f8f8 !important;border-color:#ff6600; } /* ---------------------------------------------------- 6) SECTIONS ------------------------------------------------------- */ #home,#our-herbs,#butters,#soupers,#our-herbs,#sauces,#seasoning,#nutricube,#beverages{position:static;background-attachment: inherit;min-height: 664px;} #testimonials {/*position:relative;background-attachment: inherit;*/} #home {margin-top: -154px;} /*.sticky-menu-active #home{margin-top:-42px;}*/ /*quotes*/ #testimonials .parallax { padding: 140px 0; color: #f9f9f9; } .quotes { font-size: 28px; text-align: center; font-weight: 500; line-height: 32px; font-family: Oswald, sans-serif !important; text-shadow: 1px 2px 2px rgba(0,0,0,0.8); } #testimonials .inner-wrapper { margin: 0 auto; width: 80%; position: relative; } .owl-theme .owl-dots .owl-dot span {background: #A8D0FF;} #quick-easy h3 { width: 60%; margin-left: auto; margin-right: auto; margin-top: 32px; margin-bottom: 12px; font-size: 1%; } #quick-easy { height: 576px; background-color: #ce171f; background-image: url(../imgs/bg-packages.jpg); background-repeat: no-repeat; background-position: center center; /*background-attachment: fixed;*/ -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; text-align: center; } #quick-easy .ttl-crush-cook {margin-top: 16px;} #quick-easy .ttl-fresh img,#quick-easy .ttl-crush-cook img {margin: auto;} #quick-easy .gfx-peppers { margin-top: 140px; margin-left: 20%; } #quick-easy .ttl-fresh {margin-top: -56px;} #our-story { min-height: 900px; font-family: 'Oswald', sans-serif; background-image: url(../imgs/bg-family.jpg); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color: transparent; text-align: center; border-bottom: 1px solid #fff; } #our-story .container-fluid { padding-top: 6px; padding-bottom: 62px; } #our-story .boxed-goodness { width: 700px; margin-left: auto; margin-right: auto; -webkit-border-radius: 15px; border-radius: 15px; background-color: rgba(255, 255, 255, 0.9); -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.7); box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.7); border: 5px solid white; position: relative; top: 220px; font-size: 16px; margin-bottom: 32px; padding-top: 16px; padding-bottom: 6px; } #our-story h3 { font-size: 24px; line-height: 1.3em; text-align: left; margin: 6px auto; color: #cb1e29; text-transform: uppercase; font-weight: 500; font-family: 'Oswald', sans-serif; } #our-story p { font-size: 15px; line-height: 1.4em; text-align: left; font-weight: 300; } #our-story strong {font-weight: 400;} #our-story .inner-wrapper {padding: 22px;} /* ========================================================================== CONTACT ========================================================================== */ #contact { width: 100%; overflow-y: auto; z-index: 0; background-color: #333; border-bottom: 0px; } #contact.fixed { position: fixed; left: 0; bottom: 0; } #contact .footer-logo img { max-height: 120px; margin: 0px auto 22px auto; } #contact-form .form-control { height: 50px; margin-bottom: 20px; border: 1px solid #aaa; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { background-color: #f3f3f3; color: #444; margin-bottom: 15px; padding: 8px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; box-shadow: 0 0 0 0; } #contact-form textarea {min-height: 100px;} #form_btn {margin-top: 30px;} .error { padding: 0 5px 20px; color: #af3809; } #contact h2 { font-size: 3em; font-weight: 400; color: #fff; margin-top: 22px; } /* ========================================================================== VIEWER DEFAULTS ========================================================================== */ section{font-family: 'Oswald', sans-serif;} section h4 { text-align: left; font-size: 24px; line-height: 1em; color: #cc171e; font-weight: 500; text-transform: uppercase; margin: 0 0 8px 0; font-family: 'Oswald', sans-serif; } section h5 { text-align: left; font-size: 17px; line-height: 1em; font-weight: 400; font-style: italic; text-transform: capitalize; color: #000; margin: 0 0 10px 0; font-family: 'Oswald', sans-serif; } .preview-text p { text-align: left; font-size: 16px; line-height: 1.5em; margin-right: 32px; color: #000; font-family: 'Oswald', sans-serif; } p.preview-badges {text-align: center;} p.preview-badges img { max-width: 180px; margin: auto; } /* ========================================================================== OUR HERBS ========================================================================== */ #our-herbs { background-image: url(../imgs/bg-farm.jpg); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; text-align: center; border-bottom: 1px solid #fff; } #our-herbs .container-fluid { /*padding-top: 6px; padding-bottom: 62px;*/ } #our-herbs .boxed-goodness { width: 80%; margin-left: auto; margin-right: auto; -webkit-border-radius: 15px; border-radius: 15px; background-color: rgba(255, 255, 255, 0.9); -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.7); box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.7); border: 5px solid white; position: relative; top: 22px; font-size: 16px; margin-bottom: 32px; padding-top: 16px; padding-bottom: 6px; } #our-herbs h3 { background: url(../imgs/ttl-perfectly-portioned-herb-cubes.png) 60% 0 no-repeat; width: 70%; height: 54px; line-height: 54px; margin-left: auto; margin-right: auto; text-indent: -99999px; margin-top: 12px; margin-top: 36px; font-size: 1%; } #our-herbs .inner-wrapper {padding: 22px;} #our-herbs ul { max-width: 220px; margin-right: 12px; } #our-herbs ul li { padding-top: 8px; padding-bottom: 6px; } #our-herbs .col-1,#our-herbs .col-2 { width: 25%; float: left; } #our-herbs .product-links li a { display: inline-block; width: 197px; height: 52px; text-indent: -99999px; background: url(../imgs/viewer/btns-products.png) 0 0 no-repeat; } #our-herbs .product-links li a.link-one {background-position: 0 0; opacity: 1} #our-herbs .product-links li a.link-two {background-position: 0 -52px; opacity: 1} #our-herbs .product-links li a.link-three {background-position: 0 -104px; opacity: 1} #our-herbs .product-links li a.link-four {background-position: 0 -156px;opacity: 1} #our-herbs .product-links li a.link-five {background-position: 0 -208px;opacity: 1} #our-herbs .product-links li a.link-six {background-position: 0 -260px; opacity: 1} #our-herbs .product-links li a.link-seven {background-position: 0 -312px; opacity: 1} #our-herbs .product-links li a.link-eight {background-position: 0 -364px; opacity: 1} #our-herbs .product-links li a.link-nine {background-position: 0 -416px; opacity: 1} #our-herbs .product-links a.link-one:hover {background-position: -197px 0;} #our-herbs .product-links a.link-two:hover {background-position: -197px -52px;} #our-herbs .product-links a.link-three:hover {background-position: -197px -104px;} #our-herbs .product-links a.link-four:hover {background-position: -197px -156px;} #our-herbs .product-links a.link-five:hover {background-position: -197px -208px;} #our-herbs .product-links a.link-six:hover {background-position: -197px -260px;} #our-herbs .product-links a.link-seven:hover {background-position: -197px -312px;} #our-herbs .product-links a.link-eight:hover {background-position: -197px -364px;} #our-herbs .product-links a.link-nine:hover {background-position: -197px -416px;} #our-herbs .product-links li.active a.link-one,#our-herbs .product-links li.active a.link-two,#our-herbs .product-links li.active a.link-three,#our-herbs .product-links li.active a.link-four,#our-herbs .product-links li.active a.link-five,#our-herbs .product-links li.active a.link-six,#our-herbs .product-links li.active a.link-seven, #our-herbs .product-links li.active a.link-eight,#our-herbs .product-links li.active a.link-nine{opacity: .5} @media screen and (max-width: 980px) { #our-herbs .product-links li a { position:relative;display: inline-block; width: 210px; height: 38px; text-indent: -99999px; background: url(../imgs/viewer/btns-products-70.png) 0 0 no-repeat !important} #our-herbs .product-links li a { display: inline-block; width: 210px !important; height: 38px !important; text-indent: -99999px; } #our-herbs .product-links li a.link-one {background-position: 0 0 !important; opacity: 1} #our-herbs .product-links li a.link-two {background-position: 0 -38px !important; opacity: 1} #our-herbs .product-links li a.link-three {background-position: 0 -76px !important; opacity: 1} #our-herbs .product-links li a.link-four {background-position: 0 -114px !important;opacity: 1} #our-herbs .product-links li a.link-five {background-position: 0 -152px !important;opacity: 1} #our-herbs .product-links li a.link-six {background-position: 0 -190px !important; opacity: 1} #our-herbs .product-links li a.link-seven {background-position: 0 -228px !important; opacity: 1} #our-herbs .product-links li a.link-eight {background-position: 0 -266px !important; opacity: 1} #our-herbs .product-links li a.link-nine {background-position: 0 -304px !important; opacity: 1} #our-herbs .product-links a.link-one:hover {background-position: -210px 0 !important} #our-herbs .product-links a.link-two:hover {background-position: -210px -38px !important} #our-herbs .product-links a.link-three:hover {background-position: -210px -76px !important} #our-herbs .product-links a.link-four:hover {background-position: -210px -114px !important} #our-herbs .product-links a.link-five:hover {background-position: -210px -152px !important} #our-herbs .product-links a.link-six:hover {background-position: -210px -190px !important} #our-herbs .product-links a.link-seven:hover {background-position: -210px -228px !important} #our-herbs .product-links a.link-eight:hover {background-position: -210px -266px !important} #our-herbs .product-links a.link-nine:hover {background-position: -210px -304px !important} } /* ========================================================================== BUTTERS ========================================================================== */ #butters { background-image: url(../imgs/bg-butter.jpg); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; text-align: center; border-bottom: 1px solid #fff; } #butters .container-fluid { /*padding-top: 6px; padding-bottom: 62px;*/ } #butters .boxed-goodness { width: 80%; margin-left: auto; margin-right: auto; -webkit-border-radius: 15px; border-radius: 15px; background-color: rgba(255, 255, 255, 0.7); -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.7); box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.7); border: 5px solid white; position: relative; top: 22px; font-size: 16px; margin-bottom: 32px; padding-top: 16px; padding-bottom: 6px; } #butters h3 { background: url(../imgs/ttl-perfectly-portioned-butter-cubes.png) 60% 0 no-repeat; width: 70%; height: 54px; line-height: 54px; margin-left: auto; margin-right: auto; text-indent: -99999px; margin-top: 36px; margin-bottom: 42px; font-size: 1%; } #butters .inner-wrapper {padding: 22px;} #butters ul { max-width: 220px; margin-right: 12px; } #butters ul li { padding-top: 8px; padding-bottom: 6px; } #butters .col-1,#butters .col-2 { width: 25%; float: left; } #butters .product-links li a { background: url(../imgs/viewer/btns-butters.png) 0 0 no-repeat; } #butters .product-links li a { display: inline-block; width: 197px; height: 52px; text-indent: -99999px; } #butters .product-links li a.link-one {background-position: 0 0; opacity: 1} #butters .product-links li a.link-two {background-position: 0 -52px; opacity: 1} #butters .product-links li a.link-three {background-position: 0 -104px; opacity: 1} #butters .product-links li a.link-four {background-position: 0 -156px;opacity: 1} #butters .product-links li a.link-five {background-position: 0 -208px;opacity: 1} #butters .product-links li a.link-six {background-position: 0 -260px; opacity: 1} #butters .product-links li a.link-seven {background-position: 0 -312px; opacity: 1} #butters .product-links li a.link-eight {background-position: 0 -364px; opacity: 1} #butters .product-links li a.link-nine {background-position: 0 -416px; opacity: 1} #butters .product-links a.link-one:hover {background-position: -197px 0;} #butters .product-links a.link-two:hover {background-position: -197px -52px;} #butters .product-links a.link-three:hover {background-position: -197px -104px;} #butters .product-links a.link-four:hover {background-position: -197px -156px;} #butters .product-links a.link-five:hover {background-position: -197px -208px;} #butters .product-links a.link-six:hover {background-position: -197px -260px;} #butters .product-links a.link-seven:hover {background-position: -197px -312px;} #butters .product-links a.link-eight:hover {background-position: -197px -364px;} #butters .product-links a.link-nine:hover {background-position: -197px -416px;} #butters .product-links li.active a.link-one,#butters .product-links li.active a.link-two,#butters .product-links li.active a.link-three,#butters .product-links li.active a.link-four,#butters .product-links li.active a.link-five,#butters .product-links li.active a.link-six,#butters .product-links li.active a.link-seven, #butters .product-links li.active a.link-eight,#butters .product-links li.active a.link-nine{opacity: .5} @media screen and (max-width: 980px) { #butters .product-links li a { position:relative;display: inline-block; width: 210px; height: 38px; text-indent: -99999px; background: url(../imgs/viewer/btns-butters-70.png) 0 0 no-repeat !important} #butters .product-links li a { display: inline-block; width: 210px !important; height: 38px !important; text-indent: -99999px; } #butters .product-links li a.link-one {background-position: 0 0 !important; opacity: 1} #butters .product-links li a.link-two {background-position: 0 -38px !important; opacity: 1} #butters .product-links li a.link-three {background-position: 0 -76px !important; opacity: 1} #butters .product-links li a.link-four {background-position: 0 -114px !important;opacity: 1} #butters .product-links li a.link-five {background-position: 0 -152px !important;opacity: 1} #butters .product-links li a.link-six {background-position: 0 -190px !important; opacity: 1} #butters .product-links li a.link-seven {background-position: 0 -228px !important; opacity: 1} #butters .product-links li a.link-eight {background-position: 0 -266px !important; opacity: 1} #butters .product-links li a.link-nine {background-position: 0 -304px !important; opacity: 1} #butters .product-links a.link-one:hover {background-position: -210px 0 !important} #butters .product-links a.link-two:hover {background-position: -210px -38px !important} #butters .product-links a.link-three:hover {background-position: -210px -76px !important} #butters .product-links a.link-four:hover {background-position: -210px -114px !important} #butters .product-links a.link-five:hover {background-position: -210px -152px !important} #butters .product-links a.link-six:hover {background-position: -210px -190px !important} #butters .product-links a.link-seven:hover {background-position: -210px -228px !important} #butters .product-links a.link-eight:hover {background-position: -210px -266px !important} #butters .product-links a.link-nine:hover {background-position: -210px -304px !important} } /* ========================================================================== SAUCES ========================================================================== */ #sauces { background-image: url(../imgs/bg-sauces.jpg); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; text-align: center; border-bottom: 1px solid #fff; } #sauces .container-fluid { /*padding-top: 6px; padding-bottom: 62px; */} #sauces .boxed-goodness { width: 80%; margin-left: auto; margin-right: auto; -webkit-border-radius: 15px; border-radius: 15px; background-color: rgba(255, 255, 255, 0.9); -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.7); box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.7); border: 5px solid white; position: relative; top: 22px; font-size: 16px; margin-bottom: 32px; padding-top: 16px; padding-bottom: 6px; } #sauces h3 { background: url(../imgs/ttl-perfectly-portioned-sauce-cubes.png) 50% 0 no-repeat; width: 70%; height: 54px; line-height: 54px; margin-left: auto; margin-right: auto; text-indent: -99999px; margin-top: 36px; margin-bottom: 50px; font-size: 1%; } #sauces .inner-wrapper {padding: 22px;} #sauces ul { max-width: 220px; margin-right: 12px; } #sauces ul li { padding-top: 8px; padding-bottom: 6px; } #sauces .col-1,#sauces .col-2 { width: 25%; float: left; } #sauces .product-links li a { background: url(../imgs/viewer/btns-sauces.png) 0 0 no-repeat; } #sauces .product-links li a { display: inline-block; width: 300px; height: 52px; text-indent: -99999px; } #sauces .product-links li a.link-one {background-position: 0 0; opacity: 1} #sauces .product-links li a.link-two {background-position: 0 -52px; opacity: 1} #sauces .product-links li a.link-three {background-position: 0 -104px; opacity: 1} #sauces .product-links li a.link-four {background-position: 0 -156px;opacity: 1} #sauces .product-links li a.link-five {background-position: 0 -208px;opacity: 1} #sauces .product-links li a.link-six {background-position: 0 -260px; opacity: 1} #sauces .product-links li a.link-seven {background-position: 0 -312px; opacity: 1} #sauces .product-links li a.link-eight {background-position: 0 -364px; opacity: 1} #sauces .product-links li a.link-nine {background-position: 0 -416px; opacity: 1} #sauces .product-links a.link-one:hover {background-position: -300px 0;} #sauces .product-links a.link-two:hover {background-position: -300px -52px;} #sauces .product-links a.link-three:hover {background-position: -300px -104px;} #sauces .product-links a.link-four:hover {background-position: -300px -156px;} #sauces .product-links a.link-five:hover {background-position: -300px -208px;} #sauces .product-links a.link-six:hover {background-position: -300px -260px;} #sauces .product-links a.link-seven:hover {background-position: -300px -312px;} #sauces .product-links a.link-eight:hover {background-position: -300px -364px;} #sauces .product-links a.link-nine:hover {background-position: -300px -416px;} #sauces .product-links li.active a.link-one,#sauces .product-links li.active a.link-two,#sauces .product-links li.active a.link-three,#sauces .product-links li.active a.link-four,#sauces .product-links li.active a.link-five,#sauces .product-links li.active a.link-six,#sauces .product-links li.active a.link-seven, #sauces .product-links li.active a.link-eight,#sauces .product-links li.active a.link-nine{opacity: .5} @media screen and (max-width: 980px) { #sauces .product-links li a { position:relative;display: inline-block; width: 210px; height: 38px; text-indent: -99999px; background: url(../imgs/viewer/btns-sauces-70.png) 0 0 no-repeat !important} #sauces .product-links li a { display: inline-block; width: 210px !important; height: 38px !important; text-indent: -99999px; } #sauces .product-links li a.link-one {background-position: 0 0 !important; opacity: 1} #sauces .product-links li a.link-two {background-position: 0 -38px !important; opacity: 1} #sauces .product-links li a.link-three {background-position: 0 -76px !important; opacity: 1} #sauces .product-links li a.link-four {background-position: 0 -114px !important;opacity: 1} #sauces .product-links li a.link-five {background-position: 0 -152px !important;opacity: 1} #sauces .product-links li a.link-six {background-position: 0 -190px !important; opacity: 1} #sauces .product-links li a.link-seven {background-position: 0 -228px !important; opacity: 1} #sauces .product-links li a.link-eight {background-position: 0 -266px !important; opacity: 1} #sauces .product-links li a.link-nine {background-position: 0 -304px !important; opacity: 1} #sauces .product-links a.link-one:hover {background-position: -210px 0 !important} #sauces .product-links a.link-two:hover {background-position: -210px -38px !important} #sauces .product-links a.link-three:hover {background-position: -210px -76px !important} #sauces .product-links a.link-four:hover {background-position: -210px -114px !important} #sauces .product-links a.link-five:hover {background-position: -210px -152px !important} #sauces .product-links a.link-six:hover {background-position: -210px -190px !important} #sauces .product-links a.link-seven:hover {background-position: -210px -228px !important} #sauces .product-links a.link-eight:hover {background-position: -210px -266px !important} #sauces .product-links a.link-nine:hover {background-position: -210px -304px !important} } /* ========================================================================== SOUPERS ========================================================================== */ #soupers{min-height:780px;} #soupers .product-links li a { position:relative;display: inline-block; width: 300px; height: 52px; text-indent: -99999px; background: url(../imgs/viewer/btns-soupers.png) 0 0 no-repeat; } #soupers { background-image: url(../imgs/bg-cook.jpg); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; text-align: center; border-bottom: 1px solid #fff; /*padding-top: 90px;*/ } #soupers .container-fluid { /*padding-top: 6px; padding-bottom: 62px; */ } #soupers .boxed-goodness { width: 80%; margin-left: auto; margin-right: auto; -webkit-border-radius: 15px; border-radius: 15px; background-color: rgba(255, 255, 255, 0.7); -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.7); box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.7); border: 5px solid white; position: relative; top: 22px; font-size: 16px; margin-bottom: 32px; padding-top: 16px; padding-bottom: 6px; } /*#soupers h3 { background: url(../imgs/ttl-perfectly-portioned-butter-cubes.png) 60% 0 no-repeat; width: 70%; height: 54px; line-height: 54px; margin-left: auto; margin-right: auto; text-indent: -99999px; margin-top: 12px; margin-bottom: 12px; font-size: 1%; }*/ #soupers h3 { background: url(../imgs/ttl-souper-cubes.png) 60% 0 no-repeat; width: 70%; height: 50px; line-height: 50px; margin-left: auto; margin-right: auto; text-indent: -99999px; margin-top: 73px; margin-bottom: 40px; font-size: 1%; } #soupers .inner-wrapper {padding: 22px;} #soupers ul { max-width: 220px; margin-right: 12px; } #soupers ul li { padding-top: 8px; padding-bottom: 6px; } #soupers .col-1,#soupers .col-2 { width: 25%; float: left; } #soupers .product-links li a { background: url(../imgs/viewer/btns-soupers.png) 0 0 no-repeat; } #soupers .product-links li a { display: inline-block; width: 300px; height: 52px; text-indent: -99999px; } #soupers .product-links li a.link-one {background-position: 0 0; opacity: 1} #soupers .product-links li a.link-two {background-position: 0 -52px; opacity: 1} #soupers .product-links li a.link-three {background-position: 0 -104px; opacity: 1} #soupers .product-links li a.link-four {background-position: 0 -156px;opacity: 1} #soupers .product-links li a.link-five {background-position: 0 -208px;opacity: 1} #soupers .product-links li a.link-six {background-position: 0 -260px; opacity: 1} #soupers .product-links li a.link-seven {background-position: 0 -312px; opacity: 1} #soupers .product-links li a.link-eight {background-position: 0 -364px; opacity: 1} #soupers .product-links li a.link-nine {background-position: 0 -416px; opacity: 1} #soupers .product-links a.link-one:hover {background-position: -300px 0;} #soupers .product-links a.link-two:hover {background-position: -300px -52px;} #soupers .product-links a.link-three:hover {background-position: -300px -104px;} #soupers .product-links a.link-four:hover {background-position: -300px -156px;} #soupers .product-links a.link-five:hover {background-position: -300px -208px;} #soupers .product-links a.link-six:hover {background-position: -300px -260px;} #soupers .product-links a.link-seven:hover {background-position: -300px -312px;} #soupers .product-links a.link-eight:hover {background-position: -300px -364px;} #soupers .product-links a.link-nine:hover {background-position: -300px -416px;} #soupers .product-links li.active a.link-one,#soupers .product-links li.active a.link-two,#soupers .product-links li.active a.link-three,#soupers .product-links li.active a.link-four,#soupers .product-links li.active a.link-five,#soupers .product-links li.active a.link-six,#soupers .product-links li.active a.link-seven, #soupers .product-links li.active a.link-eight,#soupers .product-links li.active a.link-nine{opacity: .5} @media screen and (max-width: 980px) { #soupers .product-links li a { position:relative;display: inline-block; width: 210px; height: 38px; text-indent: -99999px; background: url(../imgs/viewer/btns-soupers-70.png) 0 0 no-repeat !important} #soupers .product-links li a { display: inline-block; width: 210px !important; height: 38px !important; text-indent: -99999px; } #soupers .product-links li a.link-one {background-position: 0 0 !important; opacity: 1} #soupers .product-links li a.link-two {background-position: 0 -38px !important; opacity: 1} #soupers .product-links li a.link-three {background-position: 0 -76px !important; opacity: 1} #soupers .product-links li a.link-four {background-position: 0 -114px !important;opacity: 1} #soupers .product-links li a.link-five {background-position: 0 -152px !important;opacity: 1} #soupers .product-links li a.link-six {background-position: 0 -190px !important; opacity: 1} #soupers .product-links li a.link-seven {background-position: 0 -228px !important; opacity: 1} #soupers .product-links li a.link-eight {background-position: 0 -266px !important; opacity: 1} #soupers .product-links li a.link-nine {background-position: 0 -304px !important; opacity: 1} #soupers .product-links a.link-one:hover {background-position: -210px 0 !important} #soupers .product-links a.link-two:hover {background-position: -210px -38px !important} #soupers .product-links a.link-three:hover {background-position: -210px -76px !important} #soupers .product-links a.link-four:hover {background-position: -210px -114px !important} #soupers .product-links a.link-five:hover {background-position: -210px -152px !important} #soupers .product-links a.link-six:hover {background-position: -210px -190px !important} #soupers .product-links a.link-seven:hover {background-position: -210px -228px !important} #soupers .product-links a.link-eight:hover {background-position: -210px -266px !important} #soupers .product-links a.link-nine:hover {background-position: -210px -304px !important} } /* ========================================================================== BEVERAGES ========================================================================== */ #beverages { background-image: url(../imgs/bg-ocean.jpg); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; text-align: center; border-bottom: 1px solid #fff; } #beverages .container-fluid { /*padding-top: 6px; padding-bottom: 62px;*/ } #beverages .boxed-goodness { width: 80%; margin-left: auto; margin-right: auto; -webkit-border-radius: 15px; border-radius: 15px; background-color: rgba(255, 255, 255, 0.9); -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.7); box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.7); border: 5px solid white; position: relative; top: 22px; font-size: 16px; margin-bottom: 32px; padding-top: 16px; padding-bottom: 6px; } #beverages h3 { background: url(../imgs/ttl-perfectly-portioned-beverage-cubes.png) 50% 0 no-repeat; width: 70%; height: 54px; line-height: 54px; margin-left: auto; margin-right: auto; text-indent: -99999px; margin-top: 36px; margin-bottom: 50px; font-size: 1%; } #beverages .inner-wrapper {padding: 22px;} #beverages ul { max-width: 220px; margin-right: 12px; } #beverages ul li { padding-top: 8px; padding-bottom: 6px; } #beverages .col-1,#beverages .col-2 { width: 25%; float: left; } #beverages .product-links li a { background: url(../imgs/viewer/btns-beverages.png) 0 0 no-repeat; } #beverages .product-links li a { display: inline-block; width: 197px; height: 52px; text-indent: -99999px; } #beverages .product-links li a.link-one {background-position: 0 0; opacity: 1} #beverages .product-links li a.link-two {background-position: 0 -52px; opacity: 1} #beverages .product-links li a.link-three {background-position: 0 -104px; opacity: 1} #beverages .product-links li a.link-four {background-position: 0 -156px;opacity: 1} #beverages .product-links li a.link-five {background-position: 0 -208px;opacity: 1} #beverages .product-links li a.link-six {background-position: 0 -260px; opacity: 1} #beverages .product-links li a.link-seven {background-position: 0 -312px; opacity: 1} #beverages .product-links li a.link-eight {background-position: 0 -364px; opacity: 1} #beverages .product-links li a.link-nine {background-position: 0 -416px; opacity: 1} #beverages .product-links a.link-one:hover {background-position: -197px 0;} #beverages .product-links a.link-two:hover {background-position: -197px -52px;} #beverages .product-links a.link-three:hover {background-position: -197px -104px;} #beverages .product-links a.link-four:hover {background-position: -197px -156px;} #beverages .product-links a.link-five:hover {background-position: -197px -208px;} #beverages .product-links a.link-six:hover {background-position: -197px -260px;} #beverages .product-links a.link-seven:hover {background-position: -197px -312px;} #beverages .product-links a.link-eight:hover {background-position: -197px -364px;} #beverages .product-links a.link-nine:hover {background-position: -197px -416px;} #beverages .product-links li.active a.link-one,#beverages .product-links li.active a.link-two,#beverages .product-links li.active a.link-three,#beverages .product-links li.active a.link-four,#beverages .product-links li.active a.link-five,#beverages .product-links li.active a.link-six,#beverages .product-links li.active a.link-seven, #beverages .product-links li.active a.link-eight,#beverages .product-links li.active a.link-nine{opacity: .5} @media screen and (max-width: 980px) { #beverages .product-links li a { position:relative;display: inline-block; width: 210px; height: 38px; text-indent: -99999px; background: url(../imgs/viewer/btns-beverages-70.png) 0 0 no-repeat !important} #beverages .product-links li a { display: inline-block; width: 210px !important; height: 38px !important; text-indent: -99999px; } #beverages .product-links li a.link-one {background-position: 0 0 !important; opacity: 1} #beverages .product-links li a.link-two {background-position: 0 -38px !important; opacity: 1} #beverages .product-links li a.link-three {background-position: 0 -76px !important; opacity: 1} #beverages .product-links li a.link-four {background-position: 0 -114px !important;opacity: 1} #beverages .product-links li a.link-five {background-position: 0 -152px !important;opacity: 1} #beverages .product-links li a.link-six {background-position: 0 -190px !important; opacity: 1} #beverages .product-links li a.link-seven {background-position: 0 -228px !important; opacity: 1} #beverages .product-links li a.link-eight {background-position: 0 -266px !important; opacity: 1} #beverages .product-links li a.link-nine {background-position: 0 -304px !important; opacity: 1} #beverages .product-links a.link-one:hover {background-position: -210px 0 !important} #beverages .product-links a.link-two:hover {background-position: -210px -38px !important} #beverages .product-links a.link-three:hover {background-position: -210px -76px !important} #beverages .product-links a.link-four:hover {background-position: -210px -114px !important} #beverages .product-links a.link-five:hover {background-position: -210px -152px !important} #beverages .product-links a.link-six:hover {background-position: -210px -190px !important} #beverages .product-links a.link-seven:hover {background-position: -210px -228px !important} #beverages .product-links a.link-eight:hover {background-position: -210px -266px !important} #beverages .product-links a.link-nine:hover {background-position: -210px -304px !important} } /* ========================================================================== NUTRICUBE ========================================================================== */ #nutricube { background-image: url(../imgs/bg-wellness2.jpg); background-repeat: no-repeat; background-position: bottom left; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; text-align: center; border-bottom: 1px solid #fff; } #nutricube .container-fluid { /*padding-top: 6px; padding-bottom: 62px;*/ } #nutricube .boxed-goodness { width: 80%; margin-left: auto; margin-right: auto; -webkit-border-radius: 15px; border-radius: 15px; background-color: rgba(255, 255, 255, 0.9); -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.7); box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.7); border: 5px solid white; position: relative; top: 22px; font-size: 16px; margin-bottom: 32px; padding-top: 16px; padding-bottom: 6px; } #nutricube h3 { background: url(../imgs/ttl-nutricube.png) 50% 0 no-repeat; width: 70%; height: 54px; line-height: 54px; margin-left: auto; margin-right: auto; text-indent: -99999px; margin-top: 36px; margin-bottom: 50px; font-size: 1%; } #nutricube .inner-wrapper {padding: 22px;} #nutricube ul { max-width: 220px; margin-right: 12px; } #nutricube ul li { padding-top: 8px; padding-bottom: 6px; } #nutricube .col-1,#nutricube .col-2 { width: 25%; float: left; } #nutricube .product-links li a { background: url(../imgs/viewer/btns-blend.png) 0 0 no-repeat; } #nutricube .product-links li a { display: inline-block; width: 300px; height: 52px; text-indent: -99999px; } #nutricube .product-links li a.link-one {background-position: 0 0; opacity: 1} #nutricube .product-links li a.link-two {background-position: 0 -52px; opacity: 1} #nutricube .product-links li a.link-three {background-position: 0 -104px; opacity: 1} #nutricube .product-links li a.link-four {background-position: 0 -156px;opacity: 1} #nutricube .product-links li a.link-five {background-position: 0 -208px;opacity: 1} #nutricube .product-links li a.link-six {background-position: 0 -260px; opacity: 1} #nutricube .product-links li a.link-seven {background-position: 0 -312px; opacity: 1} #nutricube .product-links li a.link-eight {background-position: 0 -364px; opacity: 1} #nutricube .product-links li a.link-nine {background-position: 0 -416px; opacity: 1} #nutricube .product-links a.link-one:hover {background-position: -300px 0;} #nutricube .product-links a.link-two:hover {background-position: -300px -52px;} #nutricube .product-links a.link-three:hover {background-position: -300px -104px;} #nutricube .product-links a.link-four:hover {background-position: -300px -156px;} #nutricube .product-links a.link-five:hover {background-position: -300px -208px;} #nutricube .product-links a.link-six:hover {background-position: -300px -260px;} #nutricube .product-links a.link-seven:hover {background-position: -300px -312px;} #nutricube .product-links a.link-eight:hover {background-position: -300px -364px;} #nutricube .product-links a.link-nine:hover {background-position: -300px -416px;} #nutricube .product-links li.active a.link-one,#nutricube .product-links li.active a.link-two,#nutricube .product-links li.active a.link-three,#nutricube .product-links li.active a.link-four,#nutricube .product-links li.active a.link-five,#nutricube .product-links li.active a.link-six,#nutricube .product-links li.active a.link-seven, #nutricube .product-links li.active a.link-eight,#nutricube .product-links li.active a.link-nine{opacity: .5} @media screen and (max-width: 980px) { #nutricube .product-links li a { position:relative;display: inline-block; width: 210px; height: 38px; text-indent: -99999px; background: url(../imgs/viewer/btns-blend-70.png) 0 0 no-repeat !important} #nutricube .product-links li a { display: inline-block; width: 210px !important; height: 38px !important; text-indent: -99999px; } #nutricube .product-links li a.link-one {background-position: 0 0 !important; opacity: 1} #nutricube .product-links li a.link-two {background-position: 0 -38px !important; opacity: 1} #nutricube .product-links li a.link-three {background-position: 0 -76px !important; opacity: 1} #nutricube .product-links li a.link-four {background-position: 0 -114px !important;opacity: 1} #nutricube .product-links li a.link-five {background-position: 0 -152px !important;opacity: 1} #nutricube .product-links li a.link-six {background-position: 0 -190px !important; opacity: 1} #nutricube .product-links li a.link-seven {background-position: 0 -228px !important; opacity: 1} #nutricube .product-links li a.link-eight {background-position: 0 -266px !important; opacity: 1} #nutricube .product-links li a.link-nine {background-position: 0 -304px !important; opacity: 1} #nutricube .product-links a.link-one:hover {background-position: -210px 0 !important} #nutricube .product-links a.link-two:hover {background-position: -210px -38px !important} #nutricube .product-links a.link-three:hover {background-position: -210px -76px !important} #nutricube .product-links a.link-four:hover {background-position: -210px -114px !important} #nutricube .product-links a.link-five:hover {background-position: -210px -152px !important} #nutricube .product-links a.link-six:hover {background-position: -210px -190px !important} #nutricube .product-links a.link-seven:hover {background-position: -210px -228px !important} #nutricube .product-links a.link-eight:hover {background-position: -210px -266px !important} #nutricube .product-links a.link-nine:hover {background-position: -210px -304px !important} } /* ========================================================================== SEASONING ========================================================================== */ #seasoning { background-image: url(../imgs/bg-seasoning.jpg); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; text-align: center; border-bottom: 1px solid #fff; } #seasoning .container-fluid { /*padding-top: 6px; padding-bottom: 62px;*/ } #seasoning .boxed-goodness { width: 80%; margin-left: auto; margin-right: auto; -webkit-border-radius: 15px; border-radius: 15px; background-color: rgba(255, 255, 255, 0.9); -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.7); box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.7); border: 5px solid white; position: relative; top: 22px; font-size: 16px; margin-bottom: 32px; padding-top: 16px; padding-bottom: 6px; } #seasoning h3 { background: url(../imgs/ttl-perfectly-portioned-seasoning-cubes.png) 50% 0 no-repeat; width: 70%; height: 54px; line-height: 54px; margin-left: auto; margin-right: auto; text-indent: -99999px; margin-top: 36px; margin-bottom: 50px; font-size: 1%; } #seasoning .inner-wrapper {padding: 22px;} #seasoning ul { max-width: 220px; margin-right: 12px; } #seasoning ul li { padding-top: 8px; padding-bottom: 6px; } #seasoning .col-1,#seasoning .col-2 { width: 25%; float: left; } #seasoning .product-links li a { background: url(../imgs/viewer/btns-seasoning.png) 0 0 no-repeat; } #seasoning .product-links li a { display: inline-block; width: 300px; height: 52px; text-indent: -99999px; } #seasoning .product-links li a.link-one {background-position: 0 0; opacity: 1} #seasoning .product-links li a.link-two {background-position: 0 -52px; opacity: 1} #seasoning .product-links li a.link-three {background-position: 0 -104px; opacity: 1} #seasoning .product-links li a.link-four {background-position: 0 -156px;opacity: 1} #seasoning .product-links li a.link-five {background-position: 0 -208px;opacity: 1} #seasoning .product-links li a.link-six {background-position: 0 -260px; opacity: 1} #seasoning .product-links li a.link-seven {background-position: 0 -312px; opacity: 1} #seasoning .product-links li a.link-eight {background-position: 0 -364px; opacity: 1} #seasoning .product-links li a.link-nine {background-position: 0 -416px; opacity: 1} #seasoning .product-links a.link-one:hover {background-position: -300px 0;} #seasoning .product-links a.link-two:hover {background-position: -300px -52px;} #seasoning .product-links a.link-three:hover {background-position: -300px -104px;} #seasoning .product-links a.link-four:hover {background-position: -300px -156px;} #seasoning .product-links a.link-five:hover {background-position: -300px -208px;} #seasoning .product-links a.link-six:hover {background-position: -300px -260px;} #seasoning .product-links a.link-seven:hover {background-position: -300px -312px;} #seasoning .product-links a.link-eight:hover {background-position: -300px -364px;} #seasoning .product-links a.link-nine:hover {background-position: -300px -416px;} #seasoning .product-links li.active a.link-one,#seasoning .product-links li.active a.link-two,#seasoning .product-links li.active a.link-three,#seasoning .product-links li.active a.link-four,#seasoning .product-links li.active a.link-five,#seasoning .product-links li.active a.link-six,#seasoning .product-links li.active a.link-seven, #seasoning .product-links li.active a.link-eight,#seasoning .product-links li.active a.link-nine{opacity: .5} @media screen and (max-width: 980px) { #seasoning .product-links li a { position:relative;display: inline-block; width: 210px; height: 38px; text-indent: -99999px; background: url(../imgs/viewer/btns-seasoning-70.png) 0 0 no-repeat !important} #seasoning .product-links li a { display: inline-block; width: 210px !important; height: 38px !important; text-indent: -99999px; } #seasoning .product-links li a.link-one {background-position: 0 0 !important; opacity: 1} #seasoning .product-links li a.link-two {background-position: 0 -38px !important; opacity: 1} #seasoning .product-links li a.link-three {background-position: 0 -76px !important; opacity: 1} #seasoning .product-links li a.link-four {background-position: 0 -114px !important;opacity: 1} #seasoning .product-links li a.link-five {background-position: 0 -152px !important;opacity: 1} #seasoning .product-links li a.link-six {background-position: 0 -190px !important; opacity: 1} #seasoning .product-links li a.link-seven {background-position: 0 -228px !important; opacity: 1} #seasoning .product-links li a.link-eight {background-position: 0 -266px !important; opacity: 1} #seasoning .product-links li a.link-nine {background-position: 0 -304px !important; opacity: 1} #seasoning .product-links a.link-one:hover {background-position: -210px 0 !important} #seasoning .product-links a.link-two:hover {background-position: -210px -38px !important} #seasoning .product-links a.link-three:hover {background-position: -210px -76px !important} #seasoning .product-links a.link-four:hover {background-position: -210px -114px !important} #seasoning .product-links a.link-five:hover {background-position: -210px -152px !important} #seasoning .product-links a.link-six:hover {background-position: -210px -190px !important} #seasoning .product-links a.link-seven:hover {background-position: -210px -228px !important} #seasoning .product-links a.link-eight:hover {background-position: -210px -266px !important} #seasoning .product-links a.link-nine:hover {background-position: -210px -304px !important} } /* ---------------------------------------------------- 7) BUTTONS & ICONS ------------------------------------------------------- */ /* Responsive Nav Button */ .btn-responsive-nav {display: none;} .white-btn { color: #fff; background-color: transparent; border-color: #fff; } .white-btn:hover { color: #000; background-color: #fff; border-color: #fff; } .black-btn { color: #D8BA6F; background-color: transparent; border-color: #D8BA6F; } .black-btn:hover { color: #fff; background-color: #D8BA6F; border-color: #D8BA6F; } .gold-btn { color: #fff; background-color: #d0ad55; border-color: #d0ad55; } .gold-btn:hover { color: #fff; background-color: #D8BA6F; border-color: #D8BA6F; } /* Social */ .scroll-preview { position: absolute; right: 22px; top: 50%; margin-top: -12px; font-size: 22px; line-height: 22px; } .scroll-preview i:hover,.scroll-preview i:focus {color: #cc171e;} ul.icons {list-style: none;} ul.icons [class^="icon-"] {margin-right: 5px;} .header-socials {margin: 0px 0;} .list-socials {margin-bottom: 0;} .list-inline { padding-left: 0; list-style: none; margin-left: -5px; } header .text-wrapper:last-child {padding-right: 0;} header .text-wrapper { display: inline-block; padding: 13px 20px 13px 0; font-size: 14px; line-height: 1; } .header-socials li { width: auto !important; line-height: 22px; display: inline-block !important; float: left; vertical-align: top; clear: none !important; } .top-social { width: 24px; height: 24px; color: #4f5057; font-size: 20px; line-height: 24px; text-decoration: none; text-align: center; display: block; margin: 6px 4px 0 4px; border: 0px solid #999; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; -ms-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; } .ico-facebook:hover { background-color: #3b5998; color: #f8f8f8; border-color: #3b5998; } .ico-twitter:hover { background-color: #00a9ed; color: #f8f8f8; border-color: #00a9ed; } .ico-google-plus:hover { background-color: #cd1111; color: #f8f8f8; border-color: #cd1111; } .ico-linkedin:hover { background-color: #015886; color: #f8f8f8; border-color: #015886; } .ico-dribbble:hover { background-color: #d92d84; color: #f8f8f8; border-color: #d92d84; } .ico-instagram:hover { background-color: #beb3a8; color: #f8f8f8; border-color: #beb3a8; } .ico-pinterest:hover { background-color: #ac281a; color: #f8f8f8; border-color: #ac281a; } .ico-dropbox:hover { background-color: #008ad2; color: #f8f8f8; border-color: #008ad2; } .ico-skype:hover { background-color: #00a9ed; color: #f8f8f8; border-color: #00a9ed; } .ico-youtube:hover { background-color: #cd1b20; color: #f8f8f8; border-color: #cd1b20; } .ico-tumblr:hover { background-color: #3a5976; color: #f8f8f8; border-color: #3a5976; } .ico-vimeo:hover { background-color: #00adee; color: #f8f8f8; border-color: #00adee; } .ico-flickr:hover { background-color: #d2d2d2; color: #f8f8f8; border-color: #d2d2d2; } .ico-github:hover { background-color: #222; color: #f8f8f8; border-color: #222; } .ico-renren:hover { background-color: #364a83; color: #f8f8f8; border-color: #364a83; } .ico-vk:hover { background-color: #3b5998; color: #f8f8f8; border-color: #3b5998; } .ico-xing:hover { background-color: #015f5e; color: #f8f8f8; border-color: #015f5e; } .ico-weibo:hover { background-color: #be4443; color: #f8f8f8; border-color: #be4443; } .ico-rss:hover { background-color: #ff6600; color: #f8f8f8; border-color: #ff6600; } @font-face { font-family: 'revicons'; src: url('../font/revicons.eot?5510888'); src: url('../font/revicons.eot?5510888#iefix') format('embedded-opentype'), url('../font/revicons.woff?5510888') format('woff'), url('../font/revicons.ttf?5510888') format('truetype'), url('../font/revicons.svg?5510888#revicons') format('svg'); font-weight: normal; font-style: normal; } [class^="revicon-"]:before, [class*=" revicon-"]:before { font-family: "revicons"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; font-variant: normal; /* opacity: .8; */ /* For safety - reset parent styles, that can break glyph codes*/ text-transform: none; line-height: 1em; /* fix buttons height, for twitter bootstrap */ margin-left: .2em; /* Animation center compensation - margins should be symmetric */ /* remove if not needed */ /* you can be more comfortable with increased icons size */ /* font-size: 120%; */ /* Uncomment for 3D effect */ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ } .revicon-search-1:before { content: '\e802'} /* '' */ .revicon-pencil-1:before { content: '\e831'} /* '' */ .revicon-picture-1:before { content: '\e803'} /* '' */ .revicon-cancel:before { content: '\e80a'} /* '' */ .revicon-info-circled:before { content: '\e80f'} /* '' */ .revicon-trash:before { content: '\e801'} /* '' */ .revicon-left-dir:before { content: '\e817'} /* '' */ .revicon-right-dir:before { content: '\e818'} /* '' */ .revicon-down-open:before { content: '\e83b'} /* '' */ .revicon-left-open:before { content: '\e819'} /* '' */ .revicon-right-open:before { content: '\e81a'} /* '' */ .revicon-angle-left:before { content: '\e820'} /* '' */ .revicon-angle-right:before { content: '\e81d'} /* '' */ .revicon-left-big:before { content: '\e81f'} /* '' */ .revicon-right-big:before { content: '\e81e'} /* '' */ .revicon-magic:before { content: '\e807'} /* '' */ .revicon-picture:before { content: '\e800'} /* '' */ .revicon-export:before { content: '\e80b'} /* '' */ .revicon-cog:before { content: '\e832'} /* '' */ .revicon-login:before { content: '\e833'} /* '' */ .revicon-logout:before { content: '\e834'} /* '' */ .revicon-video:before { content: '\e805'} /* '' */ .revicon-arrow-combo:before { content: '\e827'} /* '' */ .revicon-left-open-1:before { content: '\e82a'} /* '' */ .revicon-right-open-1:before { content: '\e82b'} /* '' */ .revicon-left-open-mini:before { content: '\e822'} /* '' */ .revicon-right-open-mini:before { content: '\e823'} /* '' */ .revicon-left-open-big:before { content: '\e824'} /* '' */ .revicon-right-open-big:before { content: '\e825'} /* '' */ .revicon-left:before { content: '\e836'} /* '' */ .revicon-right:before { content: '\e826'} /* '' */ .revicon-ccw:before { content: '\e808'} /* '' */ .revicon-arrows-ccw:before { content: '\e806'} /* '' */ .revicon-palette:before { content: '\e829'} /* '' */ .revicon-list-add:before { content: '\e80c'} /* '' */ .revicon-doc:before { content: '\e809'} /* '' */ .revicon-left-open-outline:before { content: '\e82e'} /* '' */ .revicon-left-open-2:before { content: '\e82c'} /* '' */ .revicon-right-open-outline:before { content: '\e82f'} /* '' */ .revicon-right-open-2:before { content: '\e82d'} /* '' */ .revicon-equalizer:before { content: '\e83a'} /* '' */ .revicon-layers-alt:before { content: '\e804'} /* '' */ .revicon-popup:before { content: '\e828'} /* '' */ /* ---------------------------------------------------- 8) HELPER CLASSES ------------------------------------------------------- */ /* Clearfix */ .clearfix {display: inline-block;} .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } html[xmlns] .clearfix {display: block;} * html .clearfix {height: 1%;} /* Divider Line */ hr { background-image: -webkit-linear-gradient(left, transparent, rgba(0, 0, 0, 0.2), transparent); background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.2), transparent); border: 0; height: 1px; margin: 22px 0 22px 0; } .read-more,.learn-more { display: inline-block; white-space: nowrap; } .scroll-to-top { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; background-image: url(../imgs/back-to-top.png); background-repeat: no-repeat; background-position: 50% 48%; background-color: #ce171f; border-radius: 7px 7px 0 0; bottom: 0px; color: #FFF !important; display: block; height: 9px; opacity: 0; padding: 13px 0 35px; position: fixed; right: 10px; text-align: center; text-decoration: none; width: 49px; z-index: 1040; } .scroll-to-top:hover { filter: alpha(opacity=100); opacity: 1; } .scroll-to-top.visible { filter: alpha(opacity=75); opacity: 0.75; } .scroll-to-top .icon:hover {color: #fff !important;} .bg-color {background-color: #f5f5f5;} .space {margin-top: 20px;} .space-bottom {padding-bottom: 20px;} .space-bottom-2x {padding-bottom: 40px;} .padding-top {padding-top: 40px;} .padding-2x {padding: 40px 0;} .padding-bottom {padding-bottom: 80px;} .padding-top-x2 {padding-top: 80px;} .margin-top {margin-top: 25px;} .margin-top-x2 {margin-top: 40px;} .bg-color {background-color: #f2f2f2;} body a {outline: none !important;} li {line-height: 24px;} .center {text-align: center;} .push-bottom {margin-bottom: 35px;} .push-top {margin-top: 35px;} .bold {font-weight: bold;} .inverted { color: #FFF; display: inline-block; padding-left: 10px; padding-right: 10px; } .row.no-margin{margin:0px !important; } .top-stripe {border-top: 5px solid #5f82be !important;} .orange { -moz-box-shadow: 0 0 4px rgba(41,47,51,0.68); -webkit-box-shadow: 0 0 4px rgba(41,47,51,0.68); box-shadow: 0 0 4px rgba(41,47,51,0.68); background: #f15f3f; } /* Forms Validations */ label.valid { display: inline-block; text-indent: -9999px; } label.error { color: #C10000; font-size: 0.9em; margin-top: -5px; padding: 0; } /* Captcha */ .captcha { clear: both; overflow: hidden; background: #F2F2F2; text-align: center; margin-bottom: 20px; max-width: 160px; } .captcha input {border: 0;} .captcha-image { float: left; position: relative; top: -25px; left: -13px; } .form-label-inline .form-group { position: relative; margin-bottom: 11px; -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s } .form-label-inline .form-group.has-error .form-control {border-color: #f76a5b;color:#f76a5b} .form-label-inline .form-group.has-error label.in {color: #f76a5b} .form-label-inline .form-group.has-error label.error { color: #f76a5b; font-size: 13px; margin-left: 13px; margin-top: 5px } .form-label-inline fieldset:not(:last-child) {margin-bottom: 18px} .form-label-inline legend {font-weight: 500} .form-label-inline label {font-size: 15px;font-weight:400} .form-label-inline label.in { -webkit-transition: color 0.2s; -o-transition: color 0.2s; transition: color 0.2s; font-size: 13px; font-weight: 500; padding-right: 12px; color: #838994; position: absolute; z-index: 1000; left: 13px; top: 7px } .form-label-inline .input-vertical-base,.form-label-inline input[type="text"],.form-label-inline .select2-container .select2-choice>.select2-chosen,.select2-container .form-label-inline .select2-choice>.select2-chosen,.form-label-inline input[type="email"],.form-label-inline input[type="password"],.form-label-inline textarea,.form-label-inline .select2-container .select2-choice,.select2-container .form-label-inline .select2-choice {min-height: 56px} .form-label-inline input[type="text"],.form-label-inline .select2-container .select2-choice>.select2-chosen,.select2-container .form-label-inline .select2-choice>.select2-chosen,.form-label-inline input[type="email"],.form-label-inline input[type="password"],.form-label-inline textarea { -webkit-transition: border 0.2s; -o-transition: border 0.2s; transition: border 0.2s; font-size: 19px; padding-bottom: 6px; padding-top: 23px; border-color: #caccd1; letter-spacing: -0.02em } .form-label-inline input:focus {border-color: #838994} .form-label-inline input:focus+label {color: #f15f3f} .form-label-inline input.required+label:after,.form-label-inline textarea.required+label:after,.form-label-inline select.required+label:after { font-family: "Apercu", Arial, sans-serif; font-size: 19px; font-weight: 400; color: #f15f3f; display: block; position: absolute; right: 0; top: 0; content: "*"; line-height: 1.1 } .form-label-inline .input-group-addon {padding: 0;background-color:white} .form-label-inline .input-group-addon .btn {padding: 17px 20px 16px} /* Back to Top Button */ .page-top { background-color: #171717; border-bottom: 5px solid #CCC; border-top: 5px solid #384045; margin-bottom: 35px; min-height: 50px; padding: 0; padding: 20px 0; position: relative; text-align: left; } .page-top ul.breadcrumb { background: none; margin: -3px 0 0; padding: 0; } .page-top ul.breadcrumb > li {text-shadow: none;} .page-top h2 { border-bottom: 5px solid #CCC; color: #FFF; display: inline-block; font-weight: 200; margin: 0 0 -25px; min-height: 37px; line-height: 46px; padding: 0 0 17px; position: relative; } .parallax h1, .parallax h2, .parallax h3, .parallax h4,.parallax h5, .parallax h6 {color: #f9f9f9;} #home,.parallax { background-repeat: no-repeat; background-attachment: fixed; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; text-align: center; } .mobile-device #home, .mobile-device .parallax {background-attachment: scroll;} .mobile-device #tubular-player {display: none !important;} .mobile-device #home.parallax h1, .mobile-device #home.parallax h2, .mobile-device #home.parallax h3, .mobile-device #home.parallax h4, .mobile-device #home.parallax h5, .mobile-device #home.parallax h6, .mobile-device #home.parallax #sub-logo a {color: #414141;} /* ---------------------------------------------------- 9) REVOLUTION SLIDER CUSTOM STYLES ------------------------------------------------------- */ .tp-banner-container { width: 100%; position: relative; padding: 0; } .tp-banner { width: 100%; position: absolute; } .tp-banner-fullscreen-container { width: 100%; position: relative; padding: 0; } #featured-slider { position: relative; } #featured-slider .slider-boxes{ position:absolute;z-index:102;bottom: -3px; } #featured-slider .wordbar{ position:absolute;z-index:101;bottom: -3px; } #featured-slider .wordbar { width:auto; } #featured-slider .slider-boxes {width:auto; } #featured-slider .wordbar img{ width:100%; } #featured-slider .slider-boxes img{ width:100%; } .tp-transparentimg {content: "url(../imgs/transparent.png)"} .tp-3d { -webkit-transform-style: preserve-3d; -webkit-transform-origin: 50% 50%; } .tp-caption img { background: transparent; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); zoom: 1; } /* ---------------------------------------------------- 10) MEDIA QUERIES ------------------------------------------------------- */ /* Header Menu */ @media (min-width: 992px) { #header nav.nav-main .nav, #header nav.nav-main .dropup, #header nav.nav-main .dropdown, #header nav.nav-main .collapse{position: static}#header nav.nav-main ul.nav-main .nav-main-content{text-shadow: none}#header nav.nav-main ul.nav-main li.nav-main-item .nav-main-sub-title{color: #333333;display: block;font-size: 1em;font-weight: 600;padding-bottom: 5px;text-transform: uppercase}#header nav.nav-main ul.nav-main li.nav-main-item ul.dropdown-menu{background: #FFF !important;border-top: 6px solid #CCC;color: #4f5057;box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08)}#header nav.nav-main ul.nav-main li.nav-main-item ul.sub-menu{list-style: none;padding: 0;margin: 0}#header nav.nav-main ul.nav-main li.nav-main-item ul.sub-menu a{color: #4f5057;text-shadow: none;margin: 0 0 0 -8px;padding: 3px 8px;text-transform: none;font-size: 1em;display: block;font-weight: normal;border-radius: 4px;border: 0}#header nav.nav-main ul.nav-main li.nav-main-item:hover ul.sub-menu li:hover a:hover{background: #F4F4F4 !important;text-decoration: none}#header nav.nav-main ul.nav-main li.nav-main-fullwidth ul.dropdown-menu{border-radius: 6px}#header nav.nav-main .navbar-inner, #header nav.nav-main .container{position: relative}#header nav.nav-main .dropdown-menu{left: auto}#header nav.nav-main .dropdown-menu > li{display: block}#header nav.nav-main .nav-main-content{padding: 20px 30px}#header nav.nav-main .nav-main-content:before{display: table;content: "";line-height: 0}#header nav.nav-main .nav-main-content:after{display: table;content: "";line-height: 0;clear: both}#header nav.nav-main.navbar .nav > li > .dropdown-menu:after, #header nav.nav-main.navbar .nav > li > .dropdown-menu:before{display: none}#header nav.nav-main .dropdown.nav-main-fullwidth .dropdown-menu{width: 100%;left: 0;right: 0}#header nav.nav-main nav.pull-right .dropdown-menu{right: 0}#header.flat-menu nav.nav-main ul.nav-main li.nav-main-fullwidth ul.dropdown-menu{border-radius: 0} } /* Header Narrow */ @media (min-width: 992px) { #header.narrow { height: auto; min-height: 85px; padding: 0; border-bottom: 1px solid #E9E9E9; box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); } #header.narrow > .container { margin-bottom: -48px; height: 75px; } } @media (max-width: 993px) { #contact { position: relative; } .page-wrapper { margin-bottom: 0 !important; } } @media only screen and (max-width: 767px) { } @media (max-width: 1200px) { #topbar .nav li a{font-size: 14px;margin: 0px 3px;padding: 12px 8px} } @media (max-width: 991px) { .nav>li.logo-small{display:none !important}#topbar .nav li a{font-size: 12px;margin: 0px 3px;padding: 12px 8px}.parallax, section.video{background-attachment: scroll !important;background-position: center center !important;background-size: auto auto !important}section.video video,section.video .mejs-container{display: none}.thumbnail{border: 0;text-align: center}ul.sort-destination.isotope{overflow: visible !important;height: auto !important}ul.sort-destination.isotope.full-width{overflow: hidden !important}.isotope-item{position: static !important;text-align: center;width: 100%;margin-left: auto;margin-right: auto;-moz-transform: none !important;-ms-transform: none !important;-o-transform: none !important;-webkit-transform: none !important;transform: none !important}.isotope-item.col-md-3{max-width: 292px}.isotope-hidden{display: none !important}.scroll-to-top{display: none !important}.offset-anchor{top: 0} } @media screen and (max-width: 1139px) { #soupers .boxed-goodness,#sauces .boxed-goodness,#beverages .boxed-goodness,#butters .boxed-goodness,#our-herbs .boxed-goodness,#seasoning .boxed-goodness,#nutricube .boxed-goodness,#our-story .boxed-goodness { width: 96% !important; } } @media screen and (max-width: 900px) { #soupers .boxed-goodness,#sauces .boxed-goodness,#beverages .boxed-goodness,#butters .boxed-goodness,#our-herbs .boxed-goodness,#seasoning .boxed-goodness,#nutricube .boxed-goodness,#our-story .boxed-goodness { width: 96% !important; } #soupers h3,#sauces h3,#beverages h3,#butters h3,#our-herbs h3,#seasoning h3,#nutricube h3 { width: 96% !important; height: 46px !important;} #soupers h3{background-image:url(../imgs/ttl-souper-cubes-80.png) !important; } #sauces h3{background-image:url(../imgs/ttl-perfectly-portioned-sauce-cubes-80.png) !important; } #beverages h3{background-image:url(../imgs/ttl-perfectly-portioned-beverage-cubes-80.png) !important; } #butters h3{background-image:url(../imgs/ttl-perfectly-portioned-butter-cubes-80.png) !important; } #our-herbs h3{background-image:url(../imgs/ttl-perfectly-portioned-herb-cubes-80.png) !important; } #seasoning h3{background-image:url(../imgs/ttl-perfectly-portioned-seasoning-cubes-80.png) !important; } #nutricube h3{background-image:url(../imgs/ttl-nutricube-80.png) !important; } /*#our-story h3{background-image:url(../imgs/ttl-perfectly-portioned-herb-cubes.png) !important; }*/ section h4 { text-align: left; font-size: 18px; } section h5 { text-align: left; font-size: 14px; } .preview-text p { text-align: left; font-size: 12px; line-height: 1.5em; } @media (max-width: 767px) { h1.big{font-size: 3.2em;line-height: 42px}#header{display: block}#header > .container{width: 100%}#header .social-icons{display: none}#header nav ul.nav-top{float: right;margin-right: 0}#header.center nav{width: auto}.btn-responsive-nav{top: 55px}.sort-source-wrapper{background: #171717;clear: both;margin-top: -35px}.sort-source-wrapper .nav{margin: 0}.sort-destination, .isotope-item{margin-left: auto !important;margin-right: auto !important;max-width: 380px}.sort-destination.full-width{max-width: none;top: 0;margin-bottom: -30px}.sort-destination.full-width .isotope-item{max-width: none}.home-intro-compact{margin-left: 0;margin-right: 0;padding-left: 0;padding-right: 0}.pricing-table{margin-left: 0px}.pricing-table .plan{margin-right: 0}#footer .phone{font-size: 20px}body.boxed{background: none !important} } @media (max-width: 479px) { body{font-size: 13px}h2{line-height: 40px}.arrow{display: none}#header nav ul.nav-top, #header .header-top{display: none}.page-top{padding: 16px 0}.page-top h2{line-height: 38px}ul.history li .thumb{display: none}ul.history li .featured-box{margin-left: 0}section.timeline{width: auto;float: none;margin-left: 0;margin-right: 0}section.timeline .timeline-box{margin: 15px auto;max-width: 90%}section.timeline .timeline-box.right{margin: 15px auto;max-width: 90%}.page-not-found{margin: 0}.page-not-found h2{font-size: 100px;letter-spacing: 0;line-height: 100px} } @media (max-width: 600px) { #header nav ul.nav-top li{display: none}#header nav ul.nav-top li .phone{display: block} }