/* Coffee Version Styles ================================================== */ /* Page Fonts */ @import url(https://fonts.googleapis.com/css?family=Merriweather:400,400italic,300,700); @import url(https://fonts.googleapis.com/css?family=Allura); .merriweather{font-family: 'Merriweather', sans-serif !important;} .allura{font-family: 'Allura', cursive !important;} /* Body Options */ body{ font-family: 'Merriweather', sans-serif; letter-spacing: 0px; } body *{outline:none;} /* COLORS ================================================== */ /* Colored */ .colored, .colored-hover:hover{ color:#000!important; } .bg-colored, .bg-colored-hover:hover, .qdr-hover:before{ background-color:#000!important; } .border-colored, .border-colored-hover:hover{ border-color:#000!important; } /* Colored1 */ .colored1, .colored1-hover:hover{ color:#ff0000 !important; } .bg-colored1, .bg-colored1-hover:hover{ background-color:#ff0000 !important; } .border-colored1, .border-colored1-hover:hover{ border-color:#ff0000 !important; } /* Colored2 */ .colored2, .colored2-hover:hover{ color:#b18c7a !important; } .bg-colored2, .bg-colored2-hover:hover{ background-color:#b18c7a !important; } .border-colored2, .border-colored2-hover:hover{ border-color:#b18c7a !important; } ::selection{ background-color:#000; } /* Other Colors */ .qdr-hover-5:before{ background-color:#000; } /* Left strip color on the home page */ #home .sidebar-spacer .strip:before{ border-left-color:#000!important; } /* Header color */ h3.big_header + h1{ color:#7c716c; } /* Home dots hover and active color */ #home .hades .tp-bullet:hover, /* Home dots hover and active color */ #home .hades .tp-bullet.selected, /* About image slider dots colors */ #about .item .slick-dots li.slick-active button, #about .custom-slider .slick-dots li.slick-active button{ background-color:#000!important; } /* SIDEBAR */ div#sidebar{ background-color:#000; color:#f6f2f0;} div#sidebar ul li a{ border-bottom:1px solid #52453e;} /* Body shadow when sidebar is open */ .pushable> .pusher.dimmed:after{ background:rgba(22,20,20,0.6);} /* COFFEE VERSION MAIN STYLES ================================================== */ /* COFFEE NAVIGATION */ /* Navigation styles - You can see navigation hover and active colors in the content/coffee/css/style.css file. */ #navigation.modern .columns ul li a{ font-size:11px; font-weight: 500; } /* Mega menu and dropdown styles */ #navigation.modern .columns ul.dropdown-menu.mega-menu li a{ padding:3px 15px; font-size: 12px; } #navigation.modern .columns ul.dropdown-menu.mega-menu .column-title{ color: #ccc; font-size: 11px; } #navigation.modern .columns ul.dropdown-menu li a{ color: #cfcac7; font-size: 12px; font-weight: 300; } /* Navigation */ #navigation.modern.dark-nav.scrolled{ background:rgba(52,48,45,0.95); } #navigation.modern .columns ul.dropdown-menu li a:hover{ background:#000; } /* Navigation hover and active colors */ #navigation.modern.dark-nav .nav>li.active>a, #navigation.modern.dark-nav .nav>li>a:hover, #navigation.modern .columns ul.dropdown-menu li a:hover, #navigation.modern.dark-nav.scrolled .nav>li>a:hover{ color:#fff !important; } #navigation.modern .columns ul.dropdown-menu{ background-color:#2d2b2a; } /* Mobile Navigation background and hover/active colors */ #mobile-navigation{ background-color:#2a2827; } #mobile-navigation a:active, #mobile-navigation a:focus, #mobile-navigation li.active a, #mobile-navigation li.active a.touchme, #mobile-navigation .dropdown-menu a{ background-color:#232221; } /* COFFEE HEADER STYLES */ h3.title{ font-size:25px; text-transform: uppercase; position: relative; display: inline-block; margin:0 auto; padding: 0; color:#818181;} h3.title:after{ content: ''; position: absolute; left:108%; width: 150px; height: 14px; background-color:#c7c2b8; opacity: 0.2; top:50%; margin-top: -9px; } h3.title:before{ content: ''; position: absolute; right:108%; width: 150px; height: 14px; background-color:#c7c2b8; opacity: 0.2; top:50%; margin-top: -9px; } h3.title.left:before{ display: none; } h3.title.left:after{ width: 200px; width: calc(1170px / 2 - 110%); } h3.title + h1{ font-size:45px; margin:0 auto; padding:0; text-transform: uppercase; color:#818181;} h3.title + h1 + .subtitle{font-size:20px; margin:30px auto 0; padding:0;} .description{ font-size:13px; margin:30px auto 0; line-height: 22px; color:#868686;} @media only screen and (max-width: 640px){ h3.title + h1{ font-size:30px; } h3.title{ font-size:20px; } h3.title + h1 + .subtitle{font-size:16px; margin: 10px auto 0;} .description{ margin:15px auto 0; } } @media only screen and (max-width: 640px){ h3.title + h1{ font-size:20px; } h3.title{ font-size:17px; } h3.title + h1 + .subtitle{font-size:14px;} .description{ margin:12px auto 0; font-size:12px } } h3.title.white{ color:#e5e5e5 !important; } h3.title.white + h1{ color:#fff; } h3.title.white:after{ background-color:#efefef; } h3.title.white:before{ background-color:#efefef; } h3.title.white + h1 + .subtitle + .description,h3.title.white + h1 + .description h3.title.white + .description{ color:#cccccc; } @media only screen and (max-width: 1250px){ h3.title.left:after{ width: 100px; width: calc(1170px / 3 - 110%); } } @media only screen and (max-width: 1170px){ h3.title,.description{ padding-left:12px; padding-right:12px; } } @media only screen and (max-width: 1170px){ h3.title,.description,h3.title + h1{padding-left:15px; } } @media only screen and (max-width: 640px){ h3.title:before,h3.title:after{display: none;} } /* HOME */ /* Styles for Bullets */ #home .hades .tp-bullet{ border-radius: 100%; box-shadow: none; border:none; width: 13px; height: 13px; background-color:white; opacity: 0.7; } #home .hades .tp-bullet:hover, #home .hades .tp-bullet.selected{ opacity: 1; } #home .hades .tp-bullet-image{ border:3px solid rgba(255,255,255,0.4); } /* Sidebar Spacer */ #home .sidebar-spacer{ width: 60px; height: 100%; position: absolute; left:0; top:0; z-index: 99; background: transparent; } #home .sidebar-spacer .strip{ width: 5px; height: 100%; position: relative; } #home .sidebar-spacer:hover .strip:before{ left: 50%; } #home .sidebar-spacer .strip:before{ width: 0; height: 0; top:50%; margin-top:-12px; position: absolute; content:''; left: -85%; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } #home .page-note{ top: -80px; } @media only screen and (max-width: 1000px){ #home .page-note{ width: 100%; text-align: center; left: 0 !important; padding: 0 20px; top: -80px !important; font-size: 21px; } } @media only screen and (max-height: 600px){ #home .page-note{ top:-60px !important; } } @media only screen and (max-width: 360px){ #home .page-note{ top:-90px !important; } } /* PORTFOLIO */ #works{ position: relative; background-color:#fcfcfc; } #works .cbp-l-caption-alignLeft{ width: 100%; height: 100%; display: table; } #works .cbp-caption-zoom .cbp-caption-activeWrap{ background-color:rgba(160,103,76,0.95); } #works .cbp-l-caption-alignLeft .cbp-l-caption-body{ display: table-cell; vertical-align: middle; text-align: center; color: white; } #works h2.title{ font-size:19px; padding:0; margin:15px 0 0; position: relative; top:20px; opacity: 0; } #works p.desc{ font-size:12px; margin:0; color:#e4e4e4; position: relative; top:20px; opacity: 0; } #works .cbp-item:hover .icon{ top:0; opacity: 1; } #works .cbp-item:hover h2.title{ top:0; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; opacity: 1; } #works .cbp-item:hover p.desc{ top:0; opacity: 1; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } /* CATEGORIES */ .categories-type-2{ margin:50px auto; } .categories-type-2 .left-details{ width: 33%; float: left; padding-right: 30px; margin-top:50px; } .categories-type-2 .left-details h1{ font-size:50px; margin:30px 0 0; } .categories-type-2 .left-details p{ font-size:13px; margin:20px 0 0; padding: 0; color:#868686; line-height: 20px;} .categories-type-2 .left-details h5{ font-size:17px; margin:25px 0 0; padding: 0; } .categories-type-2 .item{margin:0 10px !important; padding: 0; } .categories-type-2 .item,.categories-type-2 .item a{overflow: hidden; margin:0; position: relative; background-color:#36312e; } .categories-type-2 .item img{width: 100%; height: auto; position: relative; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .categories-type-2 .item .details{position: absolute; opacity: 0; bottom: 0px; z-index: 1; text-align: center; width: 100%; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .categories-type-2 .item .details h4{color:#d2d2d2; font-size: 22px; } .categories-type-2 .item .details p{color:#b5b5b5; font-size:14px; } .categories-type-2 .item:hover img{opacity: .6; } .categories-type-2 .item:hover .details{opacity: 1; bottom: 25px; } .categories-type-2 .slick-list{padding:50px 0; } @media only screen and (max-width: 1000px){ .categories-type-2 .left-details{ float: none; width: 90%; margin-left: auto; margin-right: auto; } } /* PRICES */ #prices #tables .cbp-item{ height: auto; } #prices #tables .cbp-item a>div{ float: left; margin:0; } #prices #tables .cbp-item .item-img{ width: 22%; height: 100%; position: absolute; overflow: hidden; background-color:#fcfcfc; } #prices #tables .cbp-item .item-img img{ width: auto; height: auto; min-height: 100%; min-width: 100%; position: relative; } #prices #tables .cbp-item .item-details{ width: 78%; left:22%; height: 100%; text-align: left; position: relative; background-color:#fcfcfc; padding:30px 0 30px 40px; } #prices #tables .cbp-item .item-details h4{ font-size: 25px; } #prices #tables .cbp-item .item-details h2{ font-size: 35px; margin-top:0px; font-weight: 300; } #prices #tables .cbp-item .item-details p{ font-size: 13px; margin-top:3px; font-weight: 300; max-width: 750px; } #prices #tables .cbp-item .item-details .item-price{ padding:10px 20px; position: absolute; right: 0; top:0; } #prices #tables .cbp-item *{ -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } #prices #tables .cbp-item.active *{ color:white !important; } #prices .more-button{ width: 100%; margin-top:50px; display: block; color:white; font-family: inherit; font-size:15px; padding:15px 0; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } #prices .more-button:hover{ opacity: .8; } @media only screen and (max-width: 769px){ #prices #tables .cbp-item .item-details p, #prices #tables .cbp-item .item-details h4{display: none} } @media only screen and (max-width: 640px){ #prices #tables .cbp-item .item-details h2{ font-size:15px !important; margin-top:6px !important; } #prices #tables .cbp-item .item-details{ padding:30px 0 30px 20px; } #prices .more-button{ font-size:13px; padding:12px 0; line-height: normal; } #prices #tables .cbp-item .item-details .item-price{ padding:6px 12px; font-size:12px; } } #prices #tables .cbp-item.active div, #prices #tables .cbp-item .item-price, #prices .more-button{ background-color:#96867f; } #prices #tables .cbp-item:not(.active):hover .item-details{ background-color:#f4f3f2; }