/* Theme Name: OKNO: Responsive Multipurpose HTML5 Theme Theme URI: http://okno.themirrorimages.eu Author: TheMirrorImages Author URI: http://www.themirrorimages.eu Version: 1.0 */ /*--------------------------------- TABLE OF CONTENTS: ----------------------------------- 01 - FONTS 02 - COMMON STYLES + Back to Top + Color 03 - TYPOGRAPHY + Heading + Lead Body Copy + Address + Blockquote + Drop Caps + Lists + Icons + Social Icons + Title 04 - PAGE LOADER 05 - MARGIN & PADDING 06 - HEADER 07 - MENU 08 - SECTION 09 - HEAD & PAGE TITLE + Home + Home Parallax Image + Home Empty + Page Title + Head Size 10 - BACKGROUND IMAGE 11 - ELEMENTS + Progress Bar + Button + Collapse + Counter + Features Box + Pricing Tables + Tabs + Restaurant Menu 12 - SWIPER SLIDER 13 - FOOTER 14 - TEAM 15 - GALLERY + Items + Grid + Gap 16 - PORTFOLIO + Items + Grid + Gap + Filters + Single Project 17 - BLOG + List + Post + Comments 18 - PORTFOLIO PROJECT & BLOG POST CONTROLS 19 - OWL CAROUSEL + Client + Testimonial + Theme (portfolio, galery, team) 20 - HOVER EFFECT (PORTFOLIO, GALERY, BLOG LIST) 21 - GOOGLE MAPS 22 - FORMS 23 - FONT ICONS EXAMPLES --------------------------------*/ /* ----------------------------------------------------------------------------------- 01 FONTS ----------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------------- 02 COMMON STYLES ----------------------------------------------------------------------------------- */ html{ overflow-y: scroll; -ms-overflow-style: scrollbar; } html, body { height: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; } body { position: relative; background-color: #fafafa; overflow: hidden; } #wrapper { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; width: 100%; min-width: 320px; overflow: hidden; position: relative; z-index: 1; } .js-height-100 {position: relative;} .w80 {min-width: 80px !important;} .wh100 {width: 100%!important; height: 100%!important;} .os-animation {visibility: hidden;} .os-animation.animated {visibility: visible;} /* Back to Top */ .back-to-top { width: 30px; height: 30px; position: fixed; bottom: -35px; right: 20px; background-color: #555550; opacity: 0; z-index: 999; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; -ms-transition: all .5s ease-out; transition: all .5s ease-out; } .back-to-top.display { opacity: 1; bottom: 0px; } a.back-to-top { color: #ededeb; text-decoration: none; } a.back-to-top:hover { color: #ededeb; text-decoration: none; background-color: #eec55b; } .back-to-top:before { font-family: 'ElegantIcons'; content: "\32"; font-size: 28px; line-height: 30px; } /* Color */ .main {color: #eec55b!important} .white {color: #ededeb!important} .gray {color: #999990!important} .darkgray {color: #333330!important} .black {color: #000!important} /* ----------------------------------------------------------------------------------- 03 TYPOGRAPHY ----------------------------------------------------------------------------------- */ body { font-family: 'Source Code Pro', sans-serif; font-size: 14px; line-height: 2; font-weight: 400; color: #333330; } p {margin: 0 0 20px;} p.white {font-weight: 300;} .font-alt {font-family: 'Raleway', sans-serif;} .uppercase {text-transform: uppercase;} figure img { width: 100%; height: auto; } hr {border-top: 1px solid #e5e5e3;} a { color: #d00; text-decoration: underline; } a:hover { color: #d00; text-decoration: underline; } /* Heading */ h1, h2, h3, h4, h5, h6 { font-family: 'Source Code Pro', sans-serif; font-weight: 600; line-height: 1.2; margin-top: 2em; margin-bottom: 1em; color: #333330; } h1 {font-size: 36px;} h2 {font-size: 30px;} h3 {font-size: 24px;} h4 {font-size: 18px;} h5 {font-size: 16px;} h6 {font-size: 14px;} /* Lead Body Copy */ .lead { font-family: 'Raleway', sans-serif; font-size: 18px; line-height: 1.8; font-weight: 300; } .p-lead { font-family: 'Raleway', sans-serif; font-size: 16px; line-height: 28px; font-weight: 300; } /* Address */ address { line-height: 24px; } address a { color: #333330; } address a:hover { color: #eec55b; } textarea { resize: vertical; } cite { font-style: italic; } /* Blockquote */ blockquote { font-family: 'Raleway', sans-serif; padding: 20px 40px; font-size: 18px; line-height: 1.8; font-weight: 300; } .blockquote-reverse, blockquote.pull-right { padding-right: 40px; } /* Drop Caps */ .dropcap { float: left; font-size: 60px; line-height: 50px; padding-right: 4px; padding-top: 4px; } /* Lists */ ol { list-style-type: decimal; list-style-position: inside; color: #eec55b; } ol li span{ color: #333330; } ul.bullet { list-style: none; list-style-position: inside; } ul.bullet li:before { content: "• "; speak: none; display: inline-block; text-decoration: inherit; font-size: 13px; padding-right: 6px; color: #eec55b; } ul.arrow { list-style: none; } ul.arrow li:before { font-family: 'ElegantIcons'; content: "\35"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; font-size: 13px; padding-right: 6px; color: #eec55b; } ul.tick { list-style: none; } ul.tick li:before { font-family: 'ElegantIcons'; content: "\4e"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; font-size: 13px; padding-right: 6px; color: #eec55b; } /* Icons */ i.fs0 { font-size: 12px; line-height: 20px; } i.fs1 { font-size: 16px; line-height: 24px; } i.fs2 { font-size: 24px; line-height: 32px; } i.fs3 { font-size: 32px; line-height: 40px; } i.fs4 { font-size: 48px; line-height: 56px; } /* Social Icons */ .socials a i { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .socials a i.icon_mail:hover { color: #999990; } .socials a i.social_facebook_square:hover, .socials a i.social_facebook:hover { color: #305fa5; } .socials a i.social_twitter_square:hover, .socials a i.social_twitter:hover { color: #2daae2; } .socials a i.social_googleplus_square:hover, .socials a i.social_googleplus:hover{ color: #da2713; } .socials a i.social_linkedin_square:hover, .socials a i.social_linkedin:hover { color: #0073b2; } .socials a i.social_pinterest_square:hover, .socials a i.social_pinterest:hover { color: #bf242a; } .socials a i.social_instagram_square:hover, .socials a i.social_instagram:hover { color: #5280a5; } /* Title */ .title { font-weight: 600; font-size: 24px; text-transform: uppercase; line-height: 1.2; margin-top: 0; } /* ----------------------------------------------------------------------------------- 04 PAGE LOADER ----------------------------------------------------------------------------------- */ #pageloader { width: 100%; height: 100%; position: fixed; top:0; left:0; background-color: #fff; z-index: 10000; } .loader { position: absolute; width: auto; height: auto; margin-top: -32px; margin-right: -32px; top: 50%; left: 50%; } .bounce { width: 5px; height: 100px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -50px; -moz-animation: shadow 2s ease-in-out infinite; -webkit-animation: shadow 2s ease-in-out infinite; animation: shadow 2s ease-in-out infinite; } @-moz-keyframes shadow { 50% { width: 25px; border-bottom: 2px solid rgba(0, 0, 0, 0.1); -moz-transform: translateX(-12.5px); transform: translateX(-12.5px); } } @-webkit-keyframes shadow { 50% { width: 25px; border-bottom: 2px solid rgba(0, 0, 0, 0.1); -webkit-transform: translateX(-12.5px); transform: translateX(-12.5px); } } @keyframes shadow { 50% { width: 25px; border-bottom: 2px solid rgba(0, 0, 0, 0.1); -moz-transform: translateX(-12.5px); -ms-transform: translateX(-12.5px); -webkit-transform: translateX(-12.5px); transform: translateX(-12.5px); } } .bounce:before { content: ''; width: 25px; height: 25px; background: #eec55b; position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -12.5px; -moz-animation: bounce 2s ease-in-out infinite; -webkit-animation: bounce 2s ease-in-out infinite; animation: bounce 2s ease-in-out infinite; } @-moz-keyframes bounce { 25% { height: 25px; border-radius: 0px; } 50% { -moz-transform: rotate(180deg); transform: rotate(180deg); margin-top: 23px; border-radius: 50%; } 100% { -moz-transform: rotate(540deg); transform: rotate(540deg); } } @-webkit-keyframes bounce { 25% { height: 25px; border-radius: 0px; } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); margin-top: 23px; border-radius: 50%; } 100% { -webkit-transform: rotate(540deg); transform: rotate(540deg); } } @keyframes bounce { 25% { height: 25px; border-radius: 0px; } 50% { -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); margin-top: 23px; border-radius: 50%; } 100% { -moz-transform: rotate(540deg); -ms-transform: rotate(540deg); -webkit-transform: rotate(540deg); transform: rotate(540deg); } } /* ----------------------------------------------------------------------------------- 05 MARGIN & PADDING ----------------------------------------------------------------------------------- */ .no-padding { padding-top: 0 !important; padding-left: 0 !important; padding-bottom: 0 !important; padding-right: 0 !important; } .col-no-p { padding-left: 0 !important; padding-right: 0 !important; } .m0 {margin: 0 !important;} .mt0 {margin-top: 0 !important;} .mt10 {margin-top: 10px !important;} .mt20 {margin-top: 20px !important;} .mt30 {margin-top: 30px !important;} .mt40 {margin-top: 40px !important;} .mt50 {margin-top: 50px !important;} .mt60 {margin-top: 60px !important;} .mt70 {margin-top: 70px !important;} .mt80 {margin-top: 80px !important;} .mt120 {margin-top: 120px !important;} .mt180 {margin-top: 180px !important;} .mr15 {margin-right: 15px !important;} .mr30 {margin-right: 30px !important;} .mr60 {margin-right: 60px !important;} .mb0 {margin-bottom: 0 !important;} .mb10 {margin-bottom: 10px !important;} .mb20 {margin-bottom: 20px !important;} .mb30 {margin-bottom: 30px !important;} .mb40 {margin-bottom: 40px !important;} .mb50 {margin-bottom: 50px !important;} .mb60 {margin-bottom: 60px !important;} .mb70 {margin-bottom: 70px !important;} .mb80 {margin-bottom: 80px !important;} .mb120 {margin-bottom: 120px !important;} .mb180 {margin-bottom: 180px !important;} .ml15 {margin-left: 15px !important;} .ml30 {margin-left: 30px !important;} .ml60 {margin-left: 60px !important;} .pt0 {padding-top: 0 !important;} .pt10 {padding-top: 10px !important;} .pt20 {padding-top: 20px !important;} .pt30 {padding-top: 30px !important;} .pt40 {padding-top: 40px !important;} .pt50 {padding-top: 50px !important;} .pt60 {padding-top: 60px !important;} .pt70 {padding-top: 70px !important;} .pt80 {padding-top: 80px !important;} .pt120 {padding-top: 120px !important;} .pt180 {padding-top: 180px !important;} .pr15 {padding-right: 15px !important;} .pr30 {padding-right: 30px !important;} .pr60 {padding-right: 60px !important;} .pb0 {padding-bottom: 0 !important;} .pb10 {padding-bottom: 10px !important;} .pb20 {padding-bottom: 20px !important;} .pb30 {padding-bottom: 30px !important;} .pb40 {padding-bottom: 40px !important;} .pb50 {padding-bottom: 50px !important;} .pb60 {padding-bottom: 60px !important;} .pb70 {padding-bottom: 70px !important;} .pb80 {padding-bottom: 80px !important;} .pb120 {padding-bottom: 120px !important;} .pb180 {padding-bottom: 180px !important;} .pl15 {padding-left: 15px !important;} .pl30 {padding-left: 30px !important;} .pl60 {padding-left: 60px !important;} @media (max-width: 991px) { .mb-md-30 {margin-bottom: 30px;} .mb-md-60 {margin-bottom: 60px;} } @media (max-width: 767px) { .mb-sm-30 {margin-bottom: 30px;} .mb-sm-60 {margin-bottom: 60px;} } /* ----------------------------------------------------------------------------------- 06 HEADER ----------------------------------------------------------------------------------- */ #header { position: fixed; top: 0; width: 100%; height: 60px; padding: 0 60px; background-color: #fafafa; box-sizing: border-box; -moz-box-sizing: border-box; z-index: 8; } #header.dark { background-color: #333330; } #header.js-transparent{ -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease; } #header.transparent {background-color: transparent!important;} #logo { float: left; } #logo a { width: auto; margin: 0; margin-top: 15px; /* (60 - height logo)/2 */ display: inline-block; line-height: 0; } #logo img { height: 30px; /* Height logo */ vertical-align: baseline; } #logo p { font-family: 'Raleway', sans-serif; font-size: 13px; font-weight: 500; text-transform: uppercase; float: right; margin: 0; line-height: 60px; } #logo p:before { content: " \02003 \02003 \07C \02003 \02003"; } @media (max-width: 767px) { #header { height: 30px; padding: 0 30px; } #logo a { margin-top: 5px; /* (30 - height logo)/2 */ } #logo img { height: 20px; /* Height logo */ } #logo p { display: none; } } /* Quick Menu */ #quickmenu { float: right; } #quickmenu ul { font-family: 'Raleway', sans-serif; font-size: 11px; font-weight: 500; text-transform: uppercase; list-style-type: none; margin: 0; padding: 0; overflow: hidden; } #quickmenu ul li { float: left; } #quickmenu ul li a { height: 60px; line-height: 60px; display: inline-block; text-align: center; padding: 0 20px; text-decoration: none; color: #333330; webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #quickmenu ul li a:hover { opacity: 0.5; } #quickmenu.white ul li a { color: #ededeb; } @media (max-width: 991px) { #quickmenu { display: none; } } /* ----------------------------------------------------------------------------------- 07 MENU ----------------------------------------------------------------------------------- */ #hamburger { position: absolute; top: 15px; right: 15px; z-index: 9; width: 30px; height: 30px; box-sizing: border-box; display: block; background: center center no-repeat transparent; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDlDOEQ2NUVENEJEMTFFNUI4NUZBNDgzREU2RUE2RTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDlDOEQ2NUZENEJEMTFFNUI4NUZBNDgzREU2RUE2RTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpEOUM4RDY1Q0Q0QkQxMUU1Qjg1RkE0ODNERTZFQTZFMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpEOUM4RDY1REQ0QkQxMUU1Qjg1RkE0ODNERTZFQTZFMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlbXxr0AAABASURBVHja7NOxCQAgDEXBRNx/5TiBXSAi90ubR+DMqoqJrRiasPB/4X157/7c+fzFCRfVVMNFNdVUCwu37QgwAOSiBkjHBX2CAAAAAElFTkSuQmCC); } #hamburger.white { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTczNzMxQzNENDkzMTFFNDk0Qzk5QUU2QjVBRDhGRTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTczNzMxQzRENDkzMTFFNDk0Qzk5QUU2QjVBRDhGRTgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1NzM3MzFDMUQ0OTMxMUU0OTRDOTlBRTZCNUFEOEZFOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1NzM3MzFDMkQ0OTMxMUU0OTRDOTlBRTZCNUFEOEZFOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Phq1cjcAAABiSURBVHjaYvz//z/DQAAmhgECoxaPWjz8LGbBJhgeHv7/1q1bVLFAXV2dYcWKFYx09zGuAooRm8TPX7+pajk7G+to4ho4i7HG8WiqHk3Vo6l66Kfq0cQ1avGoxUPKYoAAAwBuDTYeW1jsAAAAAABJRU5ErkJggg== ); } @media (max-width: 767px) { #hamburger { top: 0; right: 0; } } html.mm-front .mm-menu{z-index: 1000;} #menu { opacity: 0; } html.mm-blocking { overflow-y: scroll; } #mm-blocker { z-index: 999999; } .mm-menu.mm-theme-dark { background: #333330; color: #ededeb; } .mm-navbar { line-height: 30px; height: 60px; padding: 0 60px; } .mm-menu.mm-theme-dark > .mm-navbar { border: none; background-color: #eec55b; } .mm-navbar.mm-hasbtns { padding: 0 60px; } .mm-navbar > * { padding: 15px 0; } .mm-navbar .mm-btn { width: 60px; height: 60px; } .mm-hasnavbar-top-1 .mm-panels, .mm-navbar-top-2 { top: 74px; } .mm-navbar .mm-title { font-family: 'Raleway', sans-serif; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } .mm-menu.mm-theme-dark .mm-navbar a, .mm-menu.mm-theme-dark .mm-navbar>*, .mm-menu.mm-theme-dark em.mm-counter { color: #333330; } .mm-menu.mm-theme-dark .mm-btn:after, .mm-menu.mm-theme-dark .mm-btn:before { border-color: #333330; } .no-touch .mm-menu.mm-theme-dark .mm-btn:hover:after, .no-touch .mm-menu.mm-theme-dark a.mm-btn:hover:before { border-color: #ededeb; -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; } .no-touch .mm-menu.mm-theme-dark .mm-navbar a:link.mm-title:hover { color: #ededeb; -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; } .mm-clear:after, .mm-clear:before, .mm-close:after, .mm-close:before { width: 10px; height: 10px; } .mm-clear:before, .mm-close:before { right: 18px } .mm-clear:after, .mm-close:after { right: 30px } .mm-listview { font-family: 'Raleway', sans-serif; font-size: 14px; line-height: 20px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; } .no-touch .mm-listview li:hover { color: #eec55b; -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; } .mm-prev:before, .mm-next:after { width: 12px; height: 12px; } .no-touch .mm-menu.mm-theme-dark .mm-listview > li > a.mm-prev:hover:before, .no-touch .mm-menu.mm-theme-dark .mm-listview > li > a.mm-next:hover:after { border-color: #eec55b; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .mm-menu.mm-theme-dark .mm-listview > li.hr { display: block; padding: 10px 20px; } .mm-menu.mm-theme-dark .mm-listview > li.hr > hr { border-top: 1px solid #555550; margin-top: 10px; margin-bottom: 10px; } /* ----------------------------------------------------------------------------------- 08 SECTION ----------------------------------------------------------------------------------- */ .section { position: relative; margin: 120px 0 0 0; } .section-dark { background-color: #333330; } .section-light { background-color: #ededeb; } .section-title { font-size: 30px; text-transform: uppercase; line-height: 1.2; margin-top: 0; margin-bottom: 60px; } .section-contents { width: 100%; position: absolute; top: 0; left: 0; } @media (max-width: 767px) { .section-contents { position: relative; } } /* ----------------------------------------------------------------------------------- 09 HEAD & PAGE TITLE ----------------------------------------------------------------------------------- */ /* Home */ .home { width: 100%; height: 100%; position: relative; } .home.border {padding: 60px 60px 0;} .home.bordertop {padding-top: 60px;} @media (max-width: 991px) { .home.border {padding: 60px 0 0;} } @media (max-width: 767px) { .home.border {padding: 30px 0 0;} .home.bordertop {padding-top: 30px;} } /* Home Parallax Image */ .home-parallax-image { position: relative; width: 100%; height: 100%; background-position: 50% 0; background-repeat: no-repeat; background-size: cover; } /* Home Empty */ .home-no-image { position: relative; width: 100%; height: 100%; margin: 0; } /* Page Title */ .head { width: 100%; position: absolute; bottom: 80px; left: 0; color: #fff; z-index: 3; } .head-center { width: 100%; text-align: center; position: absolute; top: 50%; left: 50%; color: #fff; z-index: 3; word-wrap: break-word; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .hs-title { font-family: 'Raleway', sans-serif; font-size: 60px; line-height: .9em; font-weight: 100; position: relative; margin-top: 0; margin-bottom: 0.4em; text-transform: uppercase; word-wrap: break-word; color: #fff; } .hs-title-small { font-family: 'Raleway', sans-serif; font-size: 36px; line-height: 1em; font-weight: 200; letter-spacing: .6em; position: relative; margin-top: 0; margin-bottom: 0.4em; text-transform: uppercase; word-wrap: break-word; color: #fff; padding-left: .6em; } .hs-subtitle { font-family: 'Raleway', sans-serif; font-size: 14px; line-height: 1.6; font-weight: 300; position: relative; margin-top: 0; margin-bottom: 10px; word-wrap: break-word; color: #fff; } .hs-title.dark { font-weight: 200; color: #333330; } .hs-title.dark span{ font-weight: 600; color: #333330; } .hs-title span { font-weight: 400; } .hs-title-small.dark { color: #333330; } .hs-title-small span{ font-weight: 500; } .hs-subtitle.dark { color: #333330; font-weight: 400; } /* Head Size */ .height-small { height: 400px; } .height-medium { height: 500px; } .height-big { height: 600px; } .height-large { height: 800px; } .head-line:after { content: ""; display: block; height: 4px; width: 120px; border-top: 4px solid #eec55b; margin: 0 auto; } @media (min-width: 1680px) { .head { width: 70%; } } @media (min-width: 1440px) { .head { width: 80%; } } @media (min-width: 1280px) { .head { width: 90%; } } @media (max-width: 991px) { .head { bottom: 80px; } .hs-title { font-size: 36px; } .hs-title-small { font-size: 24px; } .hs-subtitle { font-size: 13px; } } @media (max-width: 767px) { .head { bottom: 60px; } .hs-title { font-size: 24px; padding-right: 40px; } .hs-title-small { font-size: 18px; } .hs-subtitle { font-size: 12px; padding-right: 40px; } .head-center .hs-title, .head-center .hs-title-small, .head-center .hs-subtitle { padding-right: 0; } .height-medium, .height-big, .height-large { height: 400px; } } /* ----------------------------------------------------------------------------------- 10 BACKGROUND IMAGE ----------------------------------------------------------------------------------- */ .bg-img { position: relative; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; } .bg-img.bg-bc { background-position: 30% 100%; background-size: auto; } .bg-mask-dark { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 0; background: #333330; opacity: .6; } .mask-dark:before { content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #333330; opacity: .8; } .bg-mask-dark.op0, .op0:before {opacity: 0} .bg-mask-dark.op1, .op1:before {opacity: .1} .bg-mask-dark.op2, .op2:before {opacity: .2} .bg-mask-dark.op3, .op3:before {opacity: .3} .bg-mask-dark.op4, .op4:before {opacity: .4} .bg-mask-dark.op5, .op5:before {opacity: .5} .bg-mask-dark.op6, .op6:before {opacity: .6} .bg-mask-dark.op7, .op7:before {opacity: .7} .bg-mask-dark.op8, .op8:before {opacity: .8} .bg-mask-dark.op9, .op9:before {opacity: .9} /* ----------------------------------------------------------------------------------- 11 ELEMENTS ----------------------------------------------------------------------------------- */ /* Progress Bar */ .progress { height: 4px; margin-bottom: 50px; overflow: hidden; background-color: #ededeb; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; overflow: visible; } .progress-bar { position: relative; float: left; width: 0; height: 100%; font-size: 12px; line-height: 28px; font-weight: 400; color: #333330; text-align: left; text-transform: uppercase; background-color: #eec55b; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transition: width .6s ease; -moz-transition: width .6s ease; -o-transition: width .6s ease; -ms-transition: width .6s ease; transition: width .6s ease; } .progress-bar > span { position: absolute; top: 0px; right: 0px; display: inline-block; line-height: 28px; } /* Button */ .btn:active, .btn.active { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; outline: none; } .btn-default, a.btn-default, .btn-main, a.btn-main{ border: 0; border-radius: 0; font-family: 'Raleway', sans-serif; font-weight: 500; font-size: 12px; line-height: 1em; text-transform: uppercase; text-decoration: none; letter-spacing: 0.2em; padding: 7px 21px; color: #333330; background: rgba(208, 208, 206, 0.8); border: 2px solid transparent; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .btn-main, a.btn-main { background: rgba(238, 197, 91, .8); } .btn-main.btn-border, a.btn-main.btn-border { background: transparent; border-color: rgba(238, 197, 91, 1); } .btn-default.btn-border, a.btn-default.btn-border { background: transparent; border-color: rgba(208, 208, 206, 1); } .btn-default:hover, .btn-default:focus, a.btn-default:hover, a.btn-default:focus, .btn-default:active:hover, .btn-default:active:focus { color: #333330; background: rgba(208, 208, 206, 1); border-color: rgba(208, 208, 206, 1); outline: none; } .btn-main:hover, .btn-main:focus, a.btn-main:hover, a.btn-main:focus, .btn-main:active:hover, .btn-main:active:focus { color: #333330; background: rgba(238, 197, 91, 1); border-color: rgba(238, 197, 91, 1); outline: none; } .btn-lg, .btn-group-lg > .btn { padding: 9px 24px!important; font-size: 14px!important; } .btn-sm, .btn-group-sm > .btn { padding: 6px 18px!important; font-size: 11px!important; } .btn-xs, .btn-group-xs > .btn { padding: 5px 15px!important; padding-bottom: 4px!important; font-size: 10px!important; } .btn.btn-round { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } /* Collapse */ .panel { margin-bottom: 20px; background-color: transparent; border: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .panel-heading { padding: 10px 15px; border-bottom: 0; border-top-left-radius: 0; border-top-right-radius: 0; } .panel-group .panel { border-radius: 0; } .panel-default .panel-heading { color: #333330; background: rgba(238, 197, 91, .8); -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .panel-default .panel-heading:hover { background: rgba(238, 197, 91, 1); } .panel-default > a { text-decoration: none; } .panel-title { font-weight: 500; font-size: 16px; line-height: 1.4em; letter-spacing: 0.1em; text-transform: uppercase; } /* Counter */ .counter { text-align: center; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -o-transition: all 400ms ease; -ms-transition: all 400ms ease; transition: all 400ms ease; } .counter-no { font-size: 48px; font-weight: 300; line-height: 48px; margin-bottom: 20px; } .counter-title { font-weight: 500; font-size: 14px; text-transform: uppercase; line-height: 14px; background-color: #eec55b; margin-top: 0; margin-bottom: 0; padding: 6px 0; } /* Features Box */ .box-media-a, .box-media-b { margin-bottom: 30px; } .box-media-a .media-text, .box-media-a .et-icon-wrap { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .box-media-a:hover .media-text { background-color: #ededeb; } .box-media-a:hover .et-icon-wrap { background-color: #eec55b; } .box-media-a img { width: 100%; display: block; } .box-media-c { position: relative; } .box-media-c .bg-mask-dark { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .box-media-c:hover .bg-mask-dark { opacity: .9; } .media > .pull-left { margin-right: 20px; } .media-title { font-weight: 500; font-size: 18px; text-transform: uppercase; line-height: 1.8; background-color: #eec55b; margin-top: 0; } .media-text p { font-size: 14px; line-height: 1.8; } .media-text:after { content: ""; display: block; height: 1px; width: 100%; border-top: 1px solid #eec55b; } .media-text-b p { font-size: 13px; line-height: 1.8; } .media-text-c { position: relative; } .media-text-c p { font-size: 13px; line-height: 1.8; } .media-left { background-color: #ededeb; padding: 0 30px; } .et-icon-wrap { text-align: center; margin: 0 auto; padding: 20px 0 20px 0; color: #333330; background-color: #ededeb; } /* Pricing Tables */ .pricing { display: block; padding: 0px; overflow: hidden; background-color: #fafafa; border: 1px solid #999990; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .pricing .plan { background: #333330; text-align: center; } .pricing .plan.distinction { background: #eec55b; } .pricing .plan h3 { font-family: 'Raleway', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 24px; line-height: 18px; padding-top: 40px; margin: 0; color: #ededeb; letter-spacing: 4px; } .pricing .plan h4 { font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 100px; line-height: 80px; padding: 20px 0 0; margin: 0; color: #ededeb; letter-spacing: -6px; margin-right: 5px; } .pricing .plan h4 .currency { font-size: 48px; display: inline; vertical-align: super; letter-spacing: 0; } .pricing .plan h4 .period { font-size: 14px; display: inline; text-transform: uppercase; letter-spacing: 0; } .pricing .plan p { font-style: italic; color: #999990; padding-bottom: 20px; } .pricing .plan.distinction p { color: #ededeb; } .pricing .features ul { margin: 0; list-style: none; } .pricing .features ul li { background: #fafafa; padding: 15px 0; text-align: center; } .pricing .features li:nth-child(2n) { background: #e5e5e3; } /* Tabs */ .nav-tabs { border-bottom: 1px solid #eec55b; } .nav-tabs > li { margin-bottom: -1px; } .nav-tabs > li > a { margin-right: 4px; line-height: 40px; border: 0; border-radius: 0; color: #333330; text-decoration: none; } .nav-tabs > li > a:hover { background: #ededeb; border-bottom-color: #ededeb; border-bottom: 1px solid #ededeb; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #333330; cursor: default; background-color: #eec55b; border: 0; border-bottom: 1px solid #eec55b; } .tab-content > .active { padding: 15px; } /* Restaurant Menu */ .menu-list p { line-height: 1.2; margin-bottom: 0; } .menu-item { position: relative; } .menu-item-title { position: relative; margin-top: 0; margin-bottom: 6px; text-align: left; padding-right: 100px; } .menu-list .menu-title { color: #333330; text-transform: uppercase; position: relative; z-index: 5; background-color: #fafafa; } .menu-list span.dots { position: absolute; top: 17px; left: 0; right: 0; z-index: 1; margin: 0; border: 0; border-bottom: 2px dotted #ccccc0; height: 2px; display: block; } .menu-list .menu-price { position: absolute; top: 0; right: 0; z-index: 1; max-width: 100px; background-color: #fafafa; font-size: 18px; line-height: 18px; font-weight: 700; padding: 2px; } /* ----------------------------------------------------------------------------------- 12 SWIPER SLIDER ----------------------------------------------------------------------------------- */ .swiper-slide { background-size: cover; background-position: center; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-slide img { width: auto; height: auto; max-width: 100%; max-height: 100%; } .swiper-container-narrow { width: 100%; height: 600px; margin: 0 auto; position: relative; overflow: hidden; z-index: 1; } .w-swiper { width: 50%; } .w-swiper-portrait { width: 22%; } .swiper-container-slider { width: 100%; height: 100%; margin: 0 auto; position: relative; overflow: hidden; z-index: 1; } .swiper-container-half-slider, .swiper-container-half-slider-portfolio { width: 100%; margin: 0 auto; position: relative; overflow: hidden; z-index: 1; } /* Pagination Styles */ .swiper-pagination-narrow, .swiper-pagination-slider, .swiper-pagination-half-slider, .swiper-pagination-half-slider-portfolio { position: absolute; text-align: center; -webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; -ms-transition: 300ms; transition: 300ms; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 7; } .swiper-container-horizontal > .swiper-pagination-narrow, .swiper-container-horizontal > .swiper-pagination-slider, .swiper-container-horizontal > .swiper-pagination-half-slider, .swiper-container-horizontal > .swiper-pagination-half-slider-portfolio { bottom: 10px; left: 0; width: 100%; } .swiper-container-horizontal > .swiper-pagination-narrow .swiper-pagination-bullet, .swiper-container-horizontal > .swiper-pagination-slider .swiper-pagination-bullet, .swiper-container-horizontal > .swiper-pagination-half-slider .swiper-pagination-bullet, .swiper-container-horizontal > .swiper-pagination-half-slider-portfolio .swiper-pagination-bullet { margin: 0 5px; } /* ----------------------------------------------------------------------------------- 13 FOOTER ----------------------------------------------------------------------------------- */ footer { position: relative; width: 100%; background-color: #fafafa; } .footer-wrapper { font-family: 'Raleway', sans-serif; font-weight: 400; font-size: 12px; text-transform: uppercase; padding: 120px 60px 120px; text-align: center; -webkit-font-smoothing: antialiased; } .footer-copyright { margin: 10px 0 60px; } .footer-social { margin-top: 8px; } .footer-social a { margin-left: 3px; margin-right: 3px; color: #333330; text-decoration: none; } /* ----------------------------------------------------------------------------------- 14 TEAM ----------------------------------------------------------------------------------- */ .team-cl-full { display: none; } .team .item, .team-cl-full .item { margin: 0; overflow: hidden; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .team-cl-full .item { margin: 0 4px 8px 4px; } .team .item img, .team-cl-full .item img { width: 100%; height: auto; display: block; } .team .item .mask, .team-cl-full .item .mask { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; background-color: rgba(245, 245, 245, 1); } .team-item-detail { width: 100%; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .team-name { position: absolute; bottom: 0; width: 100%; text-align: center; background-color: #eec55b; font-weight: 500; font-size: 16px; line-height: 2; color: #333330; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .team-position { text-align: center; font-weight: 400; font-size: 18px; letter-spacing: 0.2em; line-height: 2; text-transform: uppercase; color: #333330; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .team-socials a { display: inline-block!important; margin-left: 2px; margin-right: 2px; color: #333330; text-decoration: none; } @media (max-width: 767px) { .team { max-width: 375px; margin-left: auto; margin-right: auto; } } /* ----------------------------------------------------------------------------------- 15 GALLERY ----------------------------------------------------------------------------------- */ /* Items */ .gallery-cl-full { display: none; } .gallery .item, .gallery-full .item { float: left; overflow: hidden; position: relative; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .gallery-cl-full .item { margin: 0; overflow: hidden; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .gallery .item .mask, .gallery-full .item .mask, .gallery-cl-full .item .mask { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; background:url(../images/gallery-cross.png) 50% 50% no-repeat; background-color: rgba(245, 245, 245, 1); } .gallery .item img, .gallery-full .item img, .gallery-cl-full .item img { width: 100%; height: auto; display: block; } /* Grid */ .gallery.grid-1 .item, .gallery-full.grid-1 .item { width: 100%; } .gallery.grid-2 .item, .gallery-full.grid-2 .item { width: 50%; } .gallery.grid-3 .item, .gallery-full.grid-3 .item { width: 33.3334%; } .gallery.grid-4 .item, .gallery-full.grid-4 .item { width: 25%; } /* Gap */ .gallery.grid-gap, .gallery-full.grid-gap { margin: 0 0 0 -8px; } .gallery.grid-gap .item, .gallery-full.grid-gap .item { padding: 0 0 8px 8px; } .gallery-cl-full.grid-gap .item { margin: 0 4px 8px 4px; } @media (max-width: 991px) { .gallery.grid-3 .item, .gallery.grid-4 .item, .gallery-full.grid-3 .item, .gallery-full.grid-4 .item { width: 50%; } } @media (max-width: 767px) { .gallery.grid-2 .item, .gallery.grid-3 .item, .gallery.grid-4 .item, .gallery-full.grid-2 .item, .gallery-full.grid-3 .item, .gallery-full.grid-4 .item { width: 100%; } } /* ----------------------------------------------------------------------------------- 16 PORTFOLIO ----------------------------------------------------------------------------------- */ /* Items */ .portfolio-cl-full { display: none; } .portfolio .item, .portfolio-full .item, .portfolio-cl-full .item { float: left; margin: 0; overflow: hidden; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden; } .portfolio .item .mask, .portfolio-full .item .mask, .portfolio-cl-full .item .mask { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; background-color: rgba(245, 245, 245, 1); } .portfolio .item img, .portfolio-full .item img, .portfolio-cl-full .item img { width: 100%; display: block; position: relative; } .portfolio .item h2, .portfolio-full .item h2, .portfolio-cl-full .item h2 { font-family: 'Source Code Pro', sans-serif; font-size: 18px; font-weight: 600; text-transform: uppercase; line-height: 1.2; color: #333330; white-space: pre-wrap; position: absolute; left: 30px; bottom: 0; margin: 0; padding-right: 30px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .portfolio .item .subtitle, .portfolio-full .item .subtitle, .portfolio-cl-full .item .subtitle { font-family: 'Source Code Pro', sans-serif; font-size: 13px; font-weight: 400; text-transform: uppercase; line-height: 1.2; color: #333330; text-align: left; position: relative; padding: 30px 30px 0 30px; margin: 0; } /* Grid */ .portfolio .grid-1 .item, .portfolio-full.grid-1 .item { width: 100%; } .portfolio .grid-2 .item, .portfolio-full.grid-2 .item { width: 50%; } .portfolio .grid-3 .item, .portfolio-full.grid-3 .item { width: 33.3334%; } .portfolio .grid-4 .item, .portfolio-full.grid-4 .item { width: 25%; } /* Gap */ .portfolio-full.grid-gap { margin: 0 0 0 -8px; } .portfolio-full.grid-gap .item { padding: 0 0 8px 8px; } .portfolio-cl-full.grid-gap .item { margin: 0 4px 8px 4px; } .portfolio .items.grid-gap { margin: 0 0 0 -8px; } .portfolio .items.grid-gap .item { padding: 0 0 8px 8px; } @media (max-width: 991px) { .portfolio .grid-3 .item, .portfolio .grid-4 .item, .portfolio-full.grid-3 .item, .portfolio-full.grid-4 .item { width: 50%; } } @media (max-width: 767px) { .portfolio .grid-2 .item, .portfolio .grid-3 .item, .portfolio .grid-4 .item, .portfolio-full.grid-3 .item, .portfolio-full.grid-4 .item { width: 100%; } } /* Filters */ .filters { width: auto; margin: 0 auto 40px auto; font-family: 'Source Code Pro', sans-serif; font-weight: 400; display: block; text-align: center; } .filters ul { display: inline-block; float: none; margin: 0; padding: 0; } .filters ul li { display: inline-block; list-style: none; } .filters ul li a { font-size: 13px; color: #333330; padding: 5px 20px; text-decoration: none; text-transform: uppercase; line-height: 26px; } .filters li a.selected { font-weight: 500; border-bottom: 1px solid #eec55b; } .filters li a:hover { font-weight: 500; } @media (max-width: 767px) { .filters ul li a { padding: 0 6px; } } .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity; } /* Single Project */ .project-year { font-size: 12px; line-height: 12px; font-weight: 400; text-align: center; text-transform: uppercase; color: #999990; margin: 0 auto 20px auto; } .project-year span { padding: 4px 8px; height: 100%; border-top: 1px solid #ddddd0; border-bottom: 1px solid #ddddd0; } .project-category { font-size: 12px; line-height: 12px; font-weight: 400; text-align: center; text-transform: uppercase; color: #999990; margin-bottom: 50px; } .project-client { font-size: 12px; line-height: 12px; font-weight: 400; text-align: center; text-transform: uppercase; margin-bottom: 50px; } .project-client > span { display: block; font-size: 12px; line-height: 12px; font-weight: 400; text-align: center; text-transform: uppercase; color: #999990; padding-top: 14px; margin-bottom: 60px; } /* ----------------------------------------------------------------------------------- 17 BLOG ----------------------------------------------------------------------------------- */ /* Blog List */ .blog-list { margin: 0 0 0 -8px; } .blog-list .item { float: left; width: 33.33%; overflow: hidden; position: relative; margin: 0; padding: 0 0 8px 8px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .blog-list .item .mask { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; background-color: rgba(34, 34, 32, 1); } .blog-list .item img { width: 100%; display: block; position: relative; } .blog-list .item h2 { font-family: 'Source Code Pro', sans-serif; font-size: 18px; font-weight: 600; text-transform: uppercase; line-height: 1.2; color: #ededeb; white-space: pre-wrap; position: absolute; left: 30px; bottom: 30px; margin: 0; padding-right: 20px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .blog-list .item .subtitle { font-family: 'Source Code Pro', sans-serif; font-size: 13px; font-weight: 400; text-transform: uppercase; line-height: 1.2; color: #ededeb; text-align: left; position: relative; padding: 30px 30px 0 30px; margin: 0; } /* Blog Post */ .blog .post { margin-bottom: 60px; padding-bottom: 60px; border-bottom: 1px solid #ddddd0; } .blog .contents { margin-top: 30px; } .blog .post-date { font-size: 12px; line-height: 12px; font-weight: 400; text-align: center; text-transform: uppercase; color: #999990; margin: 0 auto 20px auto; } .blog .post-date span { padding: 4px 8px; height: 100%; border-top: 1px solid #ddddd0; border-bottom: 1px solid #ddddd0; } .blog .post-category { font-size: 12px; line-height: 12px; font-weight: 400; text-align: center; text-transform: uppercase; color: #999990; margin-bottom: 50px; } .blog .post-category a { text-decoration: none; color: #999990; } .blog .post-category > span a:hover { color: #eec55b; } .blog .post-autor { font-size: 12px; line-height: 12px; font-weight: 400; text-align: center; text-transform: uppercase; margin-bottom: 50px; } .blog .post-autor i { display: block; font-size: 12px; line-height: 12px; font-weight: 400; text-align: center; text-transform: uppercase; color: #999990; padding-top: 14px; margin-bottom: 60px; } .blog .post-autor i a { text-decoration: none; color: #999990; } .blog .post-autor i a:hover { color: #eec55b; } .blog .post-title { font-size: 30px; text-transform: uppercase; line-height: 1.2; margin-top: 0; margin-bottom: 20px; text-align: center; } @media (max-width: 991px) { .blog-list .item { width: 50%; } } @media (max-width: 767px) { .blog-list .item { width: 100%; } } /* Comments */ #comments { margin: 0; position: relative; border-bottom: 1px solid #ddddd0; } #comments ol.comment-list { list-style: none; margin: 0; } #comments ol.comment-list li { padding: 30px 0 0 0; background: none; margin-bottom: 30px; color: #333330; border-top: 1px solid #ddddd0; } #comments ol.comment-list li:first-child { border: none; } #comments .user { float: left; width: 80px; height: 80px; position: relative; } #comments .commentary { overflow: hidden; padding-left: 20px; margin-bottom: 30px; } #comments .commentary p { font-size: 13px; line-height: 1.8; } #comments .author { font-family: 'Raleway', sans-serif; font-size: 18px; font-weight: 700; text-transform: uppercase; line-height: 1.2; margin: 0; } #comments .author a { color: #333330; text-decoration: none; } #comments .author a:hover { color: #eec55b; text-decoration: none; } #comments ul.children { margin: 0; overflow: inherit; padding: 0 0 0 100px; list-style: none; } #comments ol.comment-list ul.children li { border: none; } #comments .meta { color: #999990; margin-bottom: 20px; } #comments .meta .reply-link { text-transform: uppercase; font-weight: 600; } #comments .meta a.reply-link { color: #333330; text-decoration: none; } #comments .meta a.reply-link:hover { color: #eec55b; text-decoration: none; } @media (max-width: 767px) { #comments ul.children { padding: 0; } } @media (max-width: 319px) { #comments .user { display: none; } #comments .commentary { padding-left: 0; } } /* ----------------------------------------------------------------------------------- 18 PORTFOLIO PROJECT & BLOG POST CONTROLS ----------------------------------------------------------------------------------- */ .project-controls, .blog-controls { margin: 0; text-align: center; } .project-controls .project-buttons, .blog-controls .blog-buttons{ width: 100%; height: 100px; display: block; } .project-controls .project-buttons div, .blog-controls .blog-buttons div { color: #ededeb; font-family: 'Source Code Pro', sans-serif; font-size: 12px; line-height: 30px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; position: absolute; width: 100px; height: 30px; bottom: 35px; padding: 0; cursor: pointer; background: transparent; border-bottom: 1px solid #eec55b; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .project-controls .project-buttons .project-all, .blog-controls .blog-buttons .blog-all-posts, .blog-controls .blog-buttons .blog-all { width: 200px; } .blog-controls .blog-buttons .blog-all { cursor: default; } .project-controls .project-prev, .blog-controls .blog-prev { right: 50.0%; -webkit-transform: translateX(-104px); -moz-transform: translateX(-104px); -o-transform: translateX(-104px); -ms-transform: translateX(-104px); transform: translateX(-104px); } .project-controls .project-all, .blog-controls .blog-all-posts, .blog-controls .blog-all { left: 50.0%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .project-controls .project-all:before { content: "\e08d"; font-family: 'ElegantIcons'; font-size: 16px; line-height: 30px; font-weight: normal; } .project-controls .project-next, .blog-controls .blog-next { left: 50.0%; -webkit-transform: translateX(104px); -moz-transform: translateX(104px); -o-transform: translateX(104px); -ms-transform: translateX(104px); transform: translateX(104px); } .no-touch .project-controls .project-buttons .project-prev:hover, .no-touch .project-controls .project-buttons .project-all:hover, .no-touch .project-controls .project-buttons .project-next:hover, .no-touch .blog-controls .blog-buttons .blog-prev:hover, .no-touch .blog-controls .blog-buttons .blog-all-posts:hover, .no-touch .blog-controls .blog-buttons .blog-next:hover { border-bottom: 30px solid #eec55b; color: #333330; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-touch-callout: none; } .project-controls .project-buttons .disabled, .blog-controls .blog-buttons .disabled { opacity: .5; -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; transition: none; cursor: default; } .no-touch .project-controls .project-buttons .project-prev.disabled:hover, .no-touch .project-controls .project-buttons .project-next.disabled:hover, .no-touch .blog-controls .blog-buttons .blog-prev.disabled:hover, .no-touch .blog-controls .blog-buttons .blog-next.disabled:hover { border-bottom: 1px solid #eec55b; color: #ededeb; } @media (max-width: 499px) { .project-controls .project-buttons div, .blog-controls .blog-buttons div { letter-spacing: 0; } .project-controls .project-buttons .project-all, .blog-controls .blog-buttons .blog-all-posts, .blog-controls .blog-buttons .blog-all { width: 100px; } .project-controls .project-prev, .blog-controls .blog-prev { right: 50.0%; -webkit-transform: translateX(-54px); -moz-transform: translateX(-54px); -o-transform: translateX(-54px); -ms-transform: translateX(-54px); transform: translateX(-54px); } .project-controls .project-next, .blog-controls .blog-next { left: 50.0%; -webkit-transform: translateX(54px); -moz-transform: translateX(54px); -o-transform: translateX(54px); -ms-transform: translateX(54px); transform: translateX(54px); } } /* ----------------------------------------------------------------------------------- 19 OWL CAROUSEL ----------------------------------------------------------------------------------- */ /* Client Carousel */ .client-cl { display: none; } .client-cl .cl-item { margin: 0 4px; } .client-cl .cl-item img { display: block; width: 100%; height: auto; } /* Testimonial Carousel */ .testimonial-cl .author { font-family: 'Raleway', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3em; font-weight: 400; } .testimonial-cl .author:before { content: '\7E'; } /* Theme (portfolio, galery, team) */ .owl-gallery .owl-controls, .owl-portfolio .owl-controls, .owl-team .owl-controls { margin-top: 0px; text-align: center; } .owl-gallery .owl-controls .owl-buttons div, .owl-portfolio .owl-controls .owl-buttons div, .owl-team .owl-controls .owl-buttons div { color: #ededeb; font-family: 'Source Code Pro', sans-serif; font-size: 12px; line-height: 30px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; position: absolute; width: 100px; height: 30px; bottom: 35px; padding: 0; cursor: pointer; background: transparent; border-bottom: 1px solid #eec55b; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .owl-gallery .owl-controls .owl-buttons, .owl-portfolio .owl-controls .owl-buttons, .owl-team .owl-controls .owl-buttons { width: 100%; height: 100px; display: block; margin: 0; background: #333330; } .owl-gallery .owl-controls .owl-prev, .owl-portfolio .owl-controls .owl-prev, .owl-team .owl-controls .owl-prev { right: 50.0%; -webkit-transform: translateX(-4px); -moz-transform: translateX(-4px); -o-transform: translateX(-4px); -ms-transform: translateX(-4px); transform: translateX(-4px); } .owl-gallery .owl-controls .owl-next, .owl-portfolio .owl-controls .owl-next, .owl-team .owl-controls .owl-next { left: 50.0%; -webkit-transform: translateX(4px); -moz-transform: translateX(4px); -o-transform: translateX(4px); -ms-transform: translateX(4px); transform: translateX(4px); } .no-touch .owl-gallery .owl-controls .owl-buttons .owl-prev:hover, .no-touch .owl-gallery .owl-controls .owl-buttons .owl-next:hover, .no-touch .owl-portfolio .owl-controls .owl-buttons .owl-prev:hover, .no-touch .owl-portfolio .owl-controls .owl-buttons .owl-next:hover, .no-touch .owl-team .owl-controls .owl-buttons .owl-prev:hover, .no-touch .owl-team .owl-controls .owl-buttons .owl-next:hover { border-bottom: 30px solid #eec55b; color: #333330; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-touch-callout: none; } /* ----------------------------------------------------------------------------------- 20 HOVER EFFECT (PORTFOLIO, GALERY, BLOG LIST) ----------------------------------------------------------------------------------- */ .hover-effect img { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .hover-effect .mask { filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .hover-effect a { display: block; position: relative; -moz-box-sizing: border-box; box-sizing: border-box; text-decoration: none; } .hover-effect .item-img { position: relative; overflow: hidden; } .no-touch .hover-effect:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .no-touch .hover-effect:hover .mask { filter: alpha(opacity=90); opacity: .9; } .no-touch .hover-effect:hover .team-name { bottom: 10px; } .no-touch .hover-effect:hover h2 { bottom: 30px; } .hover-effect-dark img { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .hover-effect-dark .mask { filter: alpha(opacity=90); opacity: .9; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .hover-effect-dark a { display: block; position: relative; -moz-box-sizing: border-box; box-sizing: border-box; text-decoration: none; } .hover-effect-dark .item-img { position: relative; overflow: hidden; } .no-touch .hover-effect-dark:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .no-touch .hover-effect-dark:hover .mask { filter: alpha(opacity=0); opacity: 0; } .no-touch .hover-effect-dark:hover h2 { bottom: 0; } /* ----------------------------------------------------------------------------------- 21 GOOGLE MAPS ----------------------------------------------------------------------------------- */ #map-canvas { width: 100%; height: 500px; } /* ----------------------------------------------------------------------------------- 22 FORMS ----------------------------------------------------------------------------------- */ .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 13px; line-height: 1.42857143; color: #555550; background-color: #ededeb; background-image: none; border: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow:none; box-shadow: none; } .form-control:focus { border-color: transparent; outline: 0; background-color: #333330; color: #ededeb; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .help-block { color: #d00; } /* ----------------------------------------------------------------------------------- 23 FONT ICONS EXAMPLES ----------------------------------------------------------------------------------- */ .icons { color: #333330; } .icons .box1 { font-size: 12px; line-height: 13px; width: 31%; float: left; margin: 20px 1% 0 1%; padding: 8px; background-color: #ededeb; } .icons .box1 > span { min-width: 40px; min-height: 40px; text-align: center; font-size: 32px; line-height: 40px; } @media (max-width: 1199px) { .icons .box1 { width: 48%; } } @media (max-width: 767px) { .icons .box1 { width: 98%; } }