@import url(//fonts.googleapis.com/css?family=Noto+Sans:400,300,700); @import url(//fonts.googleapis.com/css?family=Michroma); /* * Main.less * Main Design for theme * This file contains information about the Structure of the theme. * * Index: * * • Pre Requisite/CSS * • Top Bar * • Top Menu * • Search Bar * • Social Icons * • Masthead a.k.a Header * • Slider * • Content * • Primary * • Secondary(if any) * • Footer * • Widget Area(if any) * • Colophon * • Other Responsive Codes (Responsive codes are present, below each section) * */ /* ---------------- Fonts ----------------------------------- */ /* ---------------Parametric Mixins ------------------------ */ /* --------------- Color Variables ------------------------- */ /* ---------------- Font Variables ------------------------- */ .site-title-font { font-family: 'Michroma', Arial, sans-serif; } .body-font { font-family: "Noto Sans", sans-serif; } /* ------------------- Pre Requisite/Reset ---------------- */ .container { margin: auto; } a:hover { text-decoration: none; } body { overflow-x: hidden; font-family: "Noto Sans", sans-serif; color: #ad4f18; } #content { background: #ffffff; clear: both; } a { color: #ad4f18; transition: 0.4s all ease; } a:visited { color: #c14a04; } a:hover { color: #c14a04; } /* ----------------- Top Bar --------------------------- */ #top-bar { border-bottom: solid 1px #eee; margin-bottom: 10px; background: url(../images/pattern2.png) repeat, #ffffff; } #top-bar #social-icons { padding-top: 4px; float: right; margin-top: 5px; overflow: hidden; padding-bottom: 7px; -webkit-backface-visibility: hidden; } #top-bar #social-icons a { background: 0 0; display: inline-block; float: right; width: 27px; height: 27px; margin-right: 2px; transition: 0.4s opacity ease, 0.9s -webkit-transform ease; } #top-bar #social-icons a:hover { background-position-y: 27px; -webkit-transform: rotate(-50deg); opacity: 0.95; } #top-bar #social-icons #facebook { background-image: url(../images/social/facebook.png); } #top-bar #social-icons #instagram { background-image: url(../images/social/instagram.png); } #top-bar #social-icons #twitter { background-image: url(../images/social/twitter.png); } #top-bar #social-icons #rss { background-image: url(../images/social/rss.png); } #top-bar #social-icons #google { background-image: url(../images/social/google.png); } #top-bar #social-icons #flickr { background-image: url(../images/social/flickr.png); } #top-bar .search-form-top { float: left; padding-top: 7px; margin-right: 30px; } #top-bar .search-form-top input[type=text] { border-radius: 0px; border-color: #c4c4c4; padding-left: 10px; outline: none; width: 240px; transition: 0.4s ease; -webkit-transition: 0.4s ease; -moz-transition: 0.4s ease; -o-transition: 0.4s ease; -ms-transition: 0.4s ease; } #top-bar .search-form-top:after { content: url(../images/search.png); position: relative; top: 2px; right: 30px; } #top-bar .search-form-top ::-webkit-input-placeholder { color: #cc5d1c; font-size: 12px; padding-top: 2px; font-weight: lighter; } #top-bar .search-form-top ::-moz-input-placeholder { color: #cc5d1c; font-size: 12px; padding-top: 2px; font-weight: lighter; } @media screen and (max-width: 991px) { #top-bar #social-icons, #top-bar .search-form-top { float: none; text-align: center; } #top-bar #social-icons a { float: none; text-align: center; } #top-bar .search-form-top { margin-right: 0px; } } #masthead { text-align: left; padding: 0px; border: none; position: relative; } #masthead .site-title { font-family: 'Michroma', Arial, sans-serif; position: relative; transition: 0.7s all ease; -webkit-transition: 0.7s all ease; -moz-transition: 0.7s all ease; -o-transition: 0.7s all ease; -ms-transition: 0.7s all ease; margin-top: 10px; margin-bottom: 5px; } #masthead .site-title a { color: #ad4f18; font-size: 32px; -webkit-backface-visibility: hidden; -webkit-transform-style: flat; display: inline-block; } #masthead .site-title a:hover { transform: scale(1.02) rotate(-1deg); -webkit-transform: scale(1.02) rotate(-1deg); } #masthead .site-description { margin-top: 10px; font-size: 14px; margin-bottom: 5px; font-weight: lighter; color: #ababab; } @media screen and (max-width: 991px) { #masthead { text-align: center; } } /*------------------ Navigation -------------- */ #top-nav { clear: both; display: block; border-top: solid 2px #ad4f18; margin-top: 35px; } #top-nav #site-navigation { margin-bottom: 50px; text-align: center; font-size: 13px; padding-left: 0px; -webkit-backface-visibility: hidden; } #top-nav #site-navigation a { color: #ababab; text-transform: uppercase; padding: 13px 15px; font-family: "Noto Sans", sans-serif; } #top-nav #site-navigation a:hover { color: #ad4f18; background: #f2f2f2; } #top-nav #site-navigation ul { margin-left: 0px; z-index: 99999; } #top-nav #site-navigation ul li { float: left; display: inline-block; } #top-nav #site-navigation ul li:hover > a { background: #f2f2f2; } #top-nav #site-navigation ul ul { background: #f2f2f2; box-shadow: none; top: 3.4em; } #top-nav #site-navigation ul ul a { padding: 5px; font-size: 12px; text-align: left; padding-left: 10px; color: #929292; } #top-nav #site-navigation ul ul a:hover { background: #ebebeb; } #top-nav #site-navigation ul ul ul { top: 0em; } #top-nav #site-navigation div.menu > ul > li > a:before, #top-nav #site-navigation ul.menu > li > a:before { position: absolute; -webkit-backface-visibility: hidden; top: 80%; left: 0; width: 100%; border-left: solid 2px #ad4f18; height: 2px; opacity: 0; background: #ad4f18; content: ''; transition: 0.3s all ease; -webkit-transition: 0.3s all ease; -moz-transition: 0.3s all ease; -o-transition: 0.3s all ease; -ms-transition: 0.3s all ease; } #top-nav #site-navigation div.menu > ul > li > a:hover, #top-nav #site-navigation ul.menu > li > a:hover { background: none; } #top-nav #site-navigation div.menu > ul > li > a:hover:before, #top-nav #site-navigation ul.menu > li > a:hover:before { top: 100%; opacity: 1; height: 2px; } @media screen and (max-width: 600px) { #top-nav h1.menu-toggle { font-family: 'Michroma', Arial, sans-serif; font-size: 18px; text-transform: uppercase; margin-bottom: 15px; } #top-nav #site-navigation ul ul { display: none !important; } #top-nav #site-navigation ul { margin-left: 15%; } #top-nav #site-navigation ul li { display: block; width: 80%; } } /* -------------------- Slider -------------------*/ #slider-wrapper { clear: both; position: relative; margin-bottom: 50px; margin-top: -47px; z-index: 434; } @media screen and (max-width: 767px) { #slider-wrapper { margin-bottom: 0px; } } #slider-wrapper .slider-caption { position: absolute; top: 15px; left: 15px; background: rgba(0, 0, 0, 0.7); padding: 10px; padding-left: 20px; box-shadow: black 5px 5px 0px black; } @media screen and (min-width: 1199px) { #slider-wrapper .slider-caption { max-width: 55%; } } #slider-wrapper .slider-caption .slider-caption-title { font-family: "Noto Sans", sans-serif; font-size: 24px; margin-bottom: 5px; } #slider-wrapper .slider-caption .slider-caption-desc { font-family: "Noto Sans", sans-serif; font-size: 13px; font-weight: lighter; margin-bottom: 10px; } @media screen and (max-width: 767px) { #slider-wrapper .slider-caption { background: rgba(0, 0, 0, 0.4); box-shadow: none; padding: 3px 8px; } #slider-wrapper .slider-caption .slider-caption-title { font-size: 16px; } #slider-wrapper .slider-caption .slider-caption-desc { font-size: 12px; margin-bottom: 0; } } #slider-wrapper a { color: #ffffff; } .bx-wrapper { box-shadow: none; } .bx-wrapper ul { margin-left: 0px; } .bx-wrapper img { min-width: 100%; } .bx-wrapper .bx-caption { text-align: center; background: rgba(0, 0, 0, 0.5); padding-bottom: 10px; font-size: 20px; margin: auto; } .bx-wrapper .bx-viewport { box-shadow: none; border: none; left: 0px; } .bx-wrapper a.bx-next { margin-right: 12px; } .bx-wrapper .bx-pager.bx-default-pager a { width: 20px; border-radius: 0px; height: 8px; background: rgba(173, 79, 24, 0.6); text-indent: 9999px; } .bx-wrapper .bx-pager-item .active { background: rgba(197, 73, 0, 0.9) !important; } .bx-wrapper .bx-pager { text-align: right; position: absolute; top: 1px; right: 20px; height: 25px; } .bx-wrapper .bx-controls-direction a { transition: 0s; -webkit-transition: 0s; -moz-transition: 0s; -o-transition: 0s; -ms-transition: 0s; } /* -------------------- Showcase ----------------- */ #showcase { padding: 20px 20px 50px 20px; max-width: 1300px; margin: 0 auto; display: block; list-style: none; margin-bottom: 0px; overflow: hidden; } @media screen and (max-width: 767px) { #showcase { margin-top: -30px; } } #showcase .showcase { display: inline-block; position: relative; perspective: 1700; -webkit-perspective: 1000; } @media screen and (max-width: 767px) { #showcase .showcase { padding: 0; margin-bottom: 10px; } } #showcase .showcase figure { position: relative; transform-style: preserve-3d; } #showcase .showcase figure > div { overflow: hidden; } #showcase .showcase figure img { max-width: 100%; z-index: 10; transition: all 0.9s; -webkit-transition: all 0.9s; -moz-transition: all 0.9s; -o-transition: all 0.9s; -ms-transition: all 0.9s; -webkit-backface-visibility: hidden; transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); } #showcase .showcase figure .showcase-caption { display: block; text-align: center; position: absolute; bottom: 0; left: 0; width: 100%; padding: 5px 20px; background: rgba(173, 79, 24, 0.8); color: white; opacity: 0; transform-origin: bottom; -moz-transform-origin: bottom; -ms-transform-origin: bottom; -o-transform-origin: bottom; -webkit-transform-origin: bottom; transform: rotateX(-180deg); -webkit-transform: rotateX(-180deg); -moz-transform: rotateX(-180deg); -o-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); transition: all 0.8s; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -o-transition: all 0.8s; -ms-transition: all 0.8s; -moz-transition: all 0.4s; z-index: 9999; } @media screen and (max-width: 767px) { #showcase .showcase figure .showcase-caption { transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -o-transform: rotateX(0deg); -ms-transform: rotateX(0deg); z-index: 99999; opacity: 1; } } #showcase .showcase figure .showcase-caption .showcase-caption-title { font-family: 'Michroma', Arial, sans-serif; font-size: 17px; } #showcase .showcase figure .showcase-caption .showcase-caption-desc { font-size: 12px; font-weight: lighter; } #showcase .showcase figure:hover .showcase-caption { opacity: 1.0; transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); } #showcase .showcase figure:hover img { transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); -webkit-transform: scale(1.05); } @media screen and (max-width: 991px) and (min-width: 768px) { #showcase .showcase { padding: 2px; } } @media screen and (max-width: 767px) { #showcase { text-align: center; padding-bottom: 0px; } #showcase .showcase { max-width: 80%; margin: 0 auto; margin-bottom: 16px; } } @media screen and (max-width: 550px) { #showcase .showcase { max-width: 100%; } } /* -------------------- Content ------------------ */ #content { padding-top: 10px; margin-top: 10px; } .page-header { margin-top: -20px; } #home-title { margin-top: -3px; font-family: 'Michroma', Arial, sans-serif; font-size: 22px; margin-bottom: 30px; margin-left: -15px; display: inline-block; padding-bottom: 10px; border-bottom: dotted 2px #ad4f18; } @media screen and (max-width: 768px) { #home-title { text-align: center; margin: 10px auto; display: block; border-bottom: none; width: 100%; } } #primary article .after-thumb { overflow: auto; margin-top: -20px; } #primary article .after-thumb .entry-title a { font-size: 22px; color: #ad4f18; } #primary article .after-thumb .entry-title a:hover { color: #c14a04; } #primary article .after-thumb h1.entry-title { margin-top: 4px; margin-bottom: 0px; font-family: 'Michroma', Arial, sans-serif; } #primary .entry-content { margin-top: 0.3em; border-bottom: solid 1px #eee; margin-bottom: 10px; padding-bottom: 10px; } #primary article.grid { display: block; padding-left: 0px; padding-right: 0px; min-height: 210px; margin-bottom: 3px; } #primary article.grid h1.entry-title { font-family: 'Michroma', Arial, sans-serif; font-size: 16px; margin-top: 12px; margin-bottom: 12px; } #primary article.grid h1.entry-title a { color: white; } #primary article.grid .featured-thumb { padding-right: 1px; padding-left: 1px; } #primary article.grid .featured-thumb img { transition: all 0.9s ease; -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -o-transition: all 0.9s ease; -ms-transition: all 0.9s ease; -webkit-backface-visibility: hidden; } #primary article.grid .featured-thumb:hover img { transition: all 0.9s ease; -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -o-transition: all 0.9s ease; -ms-transition: all 0.9s ease; -webkit-filter: brightness(85%); } #primary article.grid .in-thumb { position: absolute; bottom: 0; padding: 0; width: 99%; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; } #primary article.grid .in-thumb h1.entry-title a { display: block; width: 100%; margin-bottom: -12px; background: rgba(173, 79, 24, 0.65); padding: 10px; } #primary article.grid .in-thumb h1.entry-title a:hover { background: rgba(173, 79, 24, 0.85); } @media screen and (max-width: 767px) and (min-width: 401px) { #primary article.grid { width: 50%; clear: none; float: left; } } #primary article.grid2 { padding: 0; -webkit-backface-visibility: hidden; } #primary article.grid2 .featured-thumb { padding: 0; overflow: hidden; transition: 0.5s all ease; -webkit-transition: 0.5s all ease; -moz-transition: 0.5s all ease; -o-transition: 0.5s all ease; -ms-transition: 0.5s all ease; } #primary article.grid2 .featured-thumb:before { content: ""; display: block; position: absolute; height: 100%; width: 100%; transition: 0.8s all ease; -webkit-transition: 0.8s all ease; -moz-transition: 0.8s all ease; -o-transition: 0.8s all ease; -ms-transition: 0.8s all ease; pointer-events: none; -webkit-transform: translateY(0%); transform: translateY(0%); background: linear-gradient(to bottom, rgba(72, 76, 97, 0) 0%, rgba(72, 76, 97, 0.6) 75%); z-index: 1; } #primary article.grid2 .featured-thumb:hover:before { -webkit-transform: translateY(50%); transform: translateY(50%); } #primary article.grid2 .featured-thumb img { -webkit-backface-visibility: hidden; transition: 0.6s all ease; -webkit-transition: 0.6s all ease; -moz-transition: 0.6s all ease; -o-transition: 0.6s all ease; -ms-transition: 0.6s all ease; z-index: 0; } #primary article.grid2 .featured-thumb img:hover { -webkit-transform: scale(1.03); transform: scale(1.03); } @media screen and (max-width: 991px) { #primary article.grid2 .featured-thumb { margin: 10px; } } #primary article.grid2 .out-thumb h1.entry-title { margin: 0 0 10px 0px; font-size: 17px; } #primary article.grid2 .out-thumb h1.entry-title a { color: #b14e14; } #primary article.grid2 .out-thumb h1.entry-title a:hover { color: #787878; } #primary article.grid2 .out-thumb .entry-excerpt { color: #ababab; font-size: 13px; line-height: 1.5em; } #primary article.grid2 .out-thumb .readmore { font-family: 'Michroma', Arial, sans-serif; text-align: right; font-size: 13px; margin-top: 10px; display: block; } #primary article.grid2 .out-thumb .readmore:hover a { color: #787878; } @media screen and (max-width: 767px) { #primary article.grid2 { width: 65%; margin: 10px auto; margin-bottom: 25px; } } @media screen and (max-width: 450px) { #primary article.grid2 { width: 100%; } } #primary-mono #main { margin-top: -25px; } #primary-mono h1.entry-title { font-family: 'Michroma', Arial, sans-serif; font-size: 32px; } #primary-mono .entry-meta { font-size: 13px; border-bottom: solid 1px #d1d1d1; border-top: solid 1px #d1d1d1; padding-top: 7px; padding-bottom: 7px; color: #ababab; } #primary-mono .entry-meta a { color: #929292; } #primary-mono .entry-meta i.fa-user { margin-left: 15px; } #primary-mono .entry-meta i.fa { margin-right: 4px; } #primary-mono .entry-content { color: #7d7d7d; line-height: 1.6em; } #primary-mono .entry-content a:hover { color: #787878; } #primary-mono .footer-meta { margin-top: 25px; border-top: solid 1px #c4c4c4; border-bottom: solid 1px #c4c4c4; padding-bottom: 10px; padding-top: 10px; } #primary-mono .footer-meta i.fa { margin-left: 15px; } #primary-mono .footer-meta i:first-child { margin-left: 0px; } #primary-mono .edit-link { float: right; } #primary-mono code { background: #eee; color: black; font-weight: bold; font-family: 'Michroma', Arial, sans-serif; } #primary-mono article.page h1.entry-title { border-bottom: solid 2px #ad4f18; margin-bottom: 20px; margin-top: 12px; } #primary-mono article.page h1.entry-title span { background: url(../images/pattern2.png); padding: 10px 15px; display: inline-block; font-family: 'Michroma', Arial, sans-serif; font-size: 15px; text-transform: uppercase; font-weight: normal; } #secondary { margin-top: -20px; font-size: 13px; } #secondary h1.widget-title { font-size: 15px; border-bottom: solid 2px #ad4f18; padding-top: 10px; padding-bottom: 10px; padding-left: 5px; text-transform: uppercase; background: url(../images/pattern2.png); font-family: 'Michroma', Arial, sans-serif; font-weight: normal; } #secondary a { color: #ad4f18; } #secondary a:hover { color: #929292; } #secondary ul { margin-left: 20px; } #secondary ul ul { margin-left: 5px; } article table { border: solid 1px #eee; } article table tr:nth-child(even) { background: #ffffff; } article table th { background: black; color: white; padding: 5px 10px; } article table td { padding: 5px 10px; } article h1, article h2, article h3 { font-family: 'Michroma', Arial, sans-serif; } /* --------------- archives -------------- */ .archive section#primary h1.page-title { border-bottom: solid 2px #ad4f18; margin-bottom: 20px; margin-top: 11px; } .archive section#primary h1.page-title span { background: url(../images/pattern2.png); padding: 10px 15px; display: inline-block; font-family: 'Michroma', Arial, sans-serif; font-size: 15px; text-transform: uppercase; font-weight: normal; } .archive section#primary .page-header { border-bottom: none; margin-bottom: 0px; padding-bottom: 0px; } /* --------------- pagination ------------ */ .pagination { margin: 20px 0; padding-top: 25px; text-align: center; width: 100%; clear: both; } .pagination ul { list-style: none; display: inline-block; text-align: center; margin-bottom: 0; margin-left: 0px; } .pagination ul > li { display: inline; } .pagination ul > li > a { color: #6a300f; transition: all 0.4s ease; } .pagination ul > li > a:hover { color: #c14a04; background: #bfbfbf; } .pagination .current { background: #bfbfbf; } .pagination ul > li > a, .pagination ul > li > span { float: left; padding: 4px 12px; line-height: 20px; text-decoration: none; background-color: #f2f2f2; /* border: 1px solid desaturate(@default-background, 55%); */ border-left-width: 0; display: inline-block; color: #86593f; } .pagination ul > li:first-child > a, .pagination ul > li:first-child > span { border-left-width: 1px; } .pagination ul > li:last-child > a, .pagination ul > li:last-child > span { border-rigth-width: 1px; } /* --------------- comments -------------- */ #respond input[type=text] { max-width: 450px; } #comments { margin-top: 55px; } #comments h2.comments-title { font-size: x-large; font-family: 'Michroma', Arial, sans-serif; } #comments ol.comment-list { list-style: none; margin-left: 0px; } #comments li.comment { border: solid 1px #eee; padding: 10px; margin-top: 15px; list-style: none; background: #f9f9f9; } #comments li.comment .comment-content { color: #929292; } #comments li.trackback { background: #f9f9f9; padding: 10px; margin-top: 15px; margin-bottom: 15px; border: solid 1px #eee; font-weight: bold; } #comments li.trackback a { font-weight: normal; } #comments .vcard img { border: solid 4px #e6e6e6; border-radius: 5px; margin: 0 10px 10px 0; } #comments .comment-metadata { font-weight: bold; } @media screen and (max-width: 480px) { li.comment { margin-left: -5%; } } /* -------------- footer widget area -------- */ #footer-sidebar { border-top: solid 5px #ad4f18; padding-top: 20px; background: url(../images/pattern2.png) top left repeat-x, #f9f9f9; margin-top: 30px; padding-bottom: 50px; } #footer-sidebar h1.widget-title { font-weight: bold; font-family: 'Michroma', Arial, sans-serif; font-size: 20px; color: #9b4716; margin-bottom: 20px; } #footer-sidebar a:hover { color: #9e9e9e; } /* --------------- colophon ---------------- */ #colophon { text-align: center; border-top: solid 1px #eee; padding: 15px; background: #ad4f18; padding-bottom: 4px; color: #eee; } #colophon .site-info { text-align: left; } #colophon a { color: white; } #colophon a:hover { color: #ddd; } #colophon .footer-menu { text-align: right; } #colophon .footer-menu ul ul { display: none; } #colophon .footer-menu ul li { display: inline; padding-right: 10px; } @media screen and (max-width: 991px) { #colophon .site-info { text-align: center; margin: 20px; } #colophon .footer-menu { text-align: center; } } /*--------------- responsive cheats ----------- */ @media screen and (max-width: 991px) { #social-icons { float: none; text-align: center; padding-bottom: 20px; overflow: auto; } #social-icons img { float: none !important; } .featured-thumb { margin-bottom: 15px; } #secondary, #secondary-2 { margin-top: 25px; } }