/* CSS Document */ /*! Theme Name: Ajna Yoga Theme URI: https://preview.easetemplate.com/ajnayoga/ Author: EaseTemplate Author URI: https://easetemplate.com/ Description: ajnayoga is a flexible and beautiful theme perfect for yoga teacher.It is designed specially for yoga teacher, blogger, courses, coach, and wellness. Theme is simple and attractive fresh color style and font. Version: 1.0.0 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: ajna-yoga Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. ajnayoga is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. */ /* ------------------------------------------------------------------ [CSS Table of contents] 1. Body / Typography 2. Form Elements 3. Buttons 4. General / Elements 4.1 Section space 4.2 Margin space 4.3 Padding space 4.4 Background color 4.5 Features 4.7 Call to actions 4.8 Img hover effect 4.9 Icon ----------------------- 5. Header / Navigations 5.1 Header Regular 5.2 Header Transparent 5.3 Navigation Regular 5.4 Page Header ----------------------- 6. Slider 6.1 Slider ----------------------- 7. Content 8. Footers 9. Pages 9.1 Courses 9.2 Courses Single / sidebar with sidenav 9.3 Testimonial 9.4 Contact us 9.5 Styleguide 9.6 404 error ------------------------------------ 10.Blog 10.1 Blog Default 10.2 Blog Single ------------------------------------ 11.Sidebar 11.1 Widget ------------------------------------ 13. Media Queries ------------------------------------------------------------------*/ /*----------------------------------- 1. Body / Typography -----------------------------------*/ body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: 18px; font-family: 'Josefin Sans', sans-serif; letter-spacing: 0px; color: #33342f; font-weight: 300; line-height: 24px; } h1, h2, h3, h4, h5, h6 { font-weight: 400; color: #191e10; font-family: 'Josefin Sans', sans-serif; margin: 0px 0px 15px 0px; letter-spacing: -0.5px; } h1 { font-size: 36px; line-height: 42px; } h2 { font-size: 28px; line-height: 40px; } h3 { font-size: 24px; line-height: 32px; } h4 { font-size: 20px; line-height: 30px; } h5 { font-size: 16px; } h6 { font-size: 12px; } p { margin: 0 0 24px; line-height: 1.4; -ms-word-wrap: break-word; word-wrap: break-word; } p:last-child { margin: 0px; } ul, ol { } a { text-decoration: none; color: #191e10; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } a:focus, a:hover { text-decoration: none; color: #9eae26; } .lead { font-size: 22px; font-weight: 500; line-height: 1.6; font-family: 'Josefin Sans', sans-serif; color: #92a02d; margin-bottom: 30px; } .blockquote { padding: 40px; font-size: 21px; background-color: #f8f8f4; } .qoute-icon { font-size: 40px; color: #92a02d; float: right; margin-top: -30px; margin-bottom: 30px; } .blockquote-content { font-style: italic; font-family: 'Josefin Sans', sans-serif; color: #92a02d; margin-bottom: 0px; line-height: 1; font-weight: 300; font-size: 22px; } .blockquote-content p { line-height: 1.4; } .blocquote-author { font-weight: 500; font-size: 12px; text-transform: uppercase; font-style: normal; color: #191e10; letter-spacing: 1px; } strong { color: #333333; font-weight: 400; margin-right: 8px; } hr { border-bottom: 1px solid #f0f0ee; margin-bottom: 40px; margin-top: 40px; } .w-100 { width: 100%; } /*----------------------- 2 Form Elements: -------------------------*/ label { } .control-label { font-size: 13px; text-transform: capitalize; color: #272625; margin-bottom: 10px; } .form-control:focus { } .textarea.form-control { } .required { } .form-group { margin-bottom: 5px; } .form-control, .search-field { border-radius: 0px; text-transform: capitalize; color: #61625d; font-size: 14px; font-weight: 400; width: 100%; height: 50px; padding: 14px; line-height: 1.42857143; border: 1px solid #eaeae6; background-color: #f8f8f4; margin-bottom: 10px; -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); } textarea.form-control { height: 100px; } input[type=checkbox], input[type=radio] { margin: 8px 0 0; margin-top: 1px\9; line-height: normal; } input::-webkit-input-placeholder { color: #595857 !important; } textarea::-webkit-input-placeholder { color: #595857 !important; } .input-group-addon { border-radius: 0px; background-color: #deee6d; } #datepicker.form-control { border-right: transparent !important; } .default-skin .ui-widget-header { border: 1px solid #f2f3f4; background: #f2f3f4; color: #fff; font-weight: bold; } .default-skin .ui-state-highlight, .default-skin .ui-widget-content .ui-state-highlight, .default-skin .ui-widget-header .ui-state-highlight { border: 1px solid #f2f3f4; background: #f2f3f4; color: #fff; } .input-group-addon:last-child { border: 0; } /*-------------- align ------------*/ /* =WordPress Core -------------------------------------------------------------- */ .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; } .alignright { float: right; margin: 0px 0 30px 30px; } .alignleft { float: left; margin: 0px 30px 0px 0; } a img.alignright { float: right; margin: 0px 0 30px 30px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float: left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; /* Image does not overflow the content area */ padding: 5px 3px 10px; text-align: center; } .wp-caption.alignnone { margin: 5px 20px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; } .wp-caption-text { font-size: 14px; line-height: 17px; margin: 0; padding: 0 4px 5px; } table { margin-bottom: 20px; width: 100%; } table td, table th { border: 1px solid rgba(0, 0, 0, 0.075); padding: 8px; } /*------- blockquote ---*/ blockquote { padding: 20px; font-size: 21px; background-color: #f8f8f4; font-style: italic; font-family: 'Josefin Sans', sans-serif; color: #31322f; margin-bottom: 20px; line-height: 1; border: 1px solid #dadad4; font-weight: 400; border-radius: 4px; } /*----------------------------------- 3. Buttons -----------------------------------*/ .btn { font-family: 'Josefin Sans', sans-serif; font-size: 14px; text-transform: uppercase; font-weight: 800; padding: 10px 30px; margin-bottom: 4px; border-radius: 0px; line-height: 1.8; letter-spacing: 1.4px; border: 2px solid #191e10; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; word-wrap: break-word; white-space: normal !important; } .btn-default { background-color: transparent; border: 2px solid #191e10; color: #191e10; } .btn-default:hover { background-color: #191e10; border: 2px solid #191e10; color: #fff; } .btn-default.focus, .btn-default:focus { background-color: #191e10; border: 2px solid #191e10; color: #fff; } .btn-primary, .form-submit .submit { border: 2px solid #b8c74c; background-color: transparent; color: #a0ae3d; } .btn-primary:hover, .form-submit .submit:hover { border: 2px solid #b8c74c; background-color: #b8c74c; color: #191e10; } .btn-primary.focus, .form-submit .submit.focus, .btn-primary:focus, .form-submit .submit:focus { border: 2px solid #b8c74c; background-color: #b8c74c; color: #191e10; } .btn-lg { padding: 12px 50px; font-size: 15px; } .btn-sm { padding: 10px 38px; font-size: 14px; } .btn-xs { padding: 8px 26px; font-size: 12px; } .btn-white { color: #13387c; background: #fff; margin-bottom: -10px; } .btn-white:hover { background-color: #fff; color: #13387c; } .btn-white.focus, .btn-white:focus { background-color: #fff; color: #13387c; } .btn-link { color: #191e10; border-bottom: 1px solid #191e10; font-size: 12px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .btn-link:hover { color: #b8c74c; border-bottom: 1px solid #b8c74c; text-decoration: none; } button.btn { margin-right: -1px; } .arrow { font-size: 16px; display: inline-block; padding: 11px 17px; } .btn-arrow { width: 50px; height: 50px; color: #fff; background: #00b231; display: inline-block; } .btn-arrow:hover { background-color: #03a32f; color: #fff; } /*----------------------------------- 4. General / Elements -----------------------------------*/ /*----------------------- 4.1 Section space : -------------------------*/ /*Note: Section space help to create top bottom space;*/ .space-small { padding-top: 40px; padding-bottom: 40px; } .space-medium { padding-top: 80px; padding-bottom: 80px; } .space-large { padding-top: 120px; padding-bottom: 120px; } .space-ex-large { padding-top: 140px; padding-bottom: 140px; } /*---------------------- 4.2 Margin Space -----------------------*/ .ml30 { margin-left: 30px; } .mb0 { margin-bottom: 0px; } .mb10 { margin-bottom: 10px; } .mb20 { margin-bottom: 20px; } .mb30 { margin-bottom: 30px; } .mb35 { margin-bottom: 35px; } .mb40 { margin-bottom: 40px; } .mb60 { margin-bottom: 60px; } .mb80 { margin-bottom: 80px; } .mb100 { margin-bottom: 100px; } .mb130 { margin-bottom: 130px; } .mt0 { margin-top: 0px; } .mt10 { margin-top: 10px; } .mt15 { margin-top: 15px; } .mt20 { margin-top: 20px; } .mt30 { margin-top: 30px; } .mt40 { margin-top: 40px; } .mt60 { margin-top: 60px; } .mt70 { margin-top: 70px; } .mt80 { margin-top: 80px; } .mt100 { margin-top: 100px; } /*----- less margin space from top --*/ .mt-20 { margin-top: -20px; } .mt-40 { margin-top: -40px; } .mt-60 { margin-top: -60px; } .mt-80 { margin-top: -80px; } /*----------------------- 4.3 Padding space -------------------------*/ .nopadding { padding: 0px; } .nopr { padding-right: 0px; } .nopl { padding-left: 0px; } .pinside10 { padding: 10px; } .pinside20 { padding: 20px; } .pinside30 { padding: 30px; } .pinside40 { padding: 40px; } .pinside50 { padding: 50px; } .pinside60 { padding: 60px; } .pinside80 { padding: 80px; } .pinside130 { padding: 130px; } .pdt10 { padding-top: 10px; } .pdt20 { padding-top: 20px; } .pdt30 { padding-top: 30px; } .pdt40 { padding-top: 40px; } .pdt60 { padding-top: 60px; } .pdt80 { padding-top: 80px; } .pdb10 { padding-bottom: 10px; } .pdb20 { padding-bottom: 20px; } .pdb30 { padding-bottom: 30px; } .pdb40 { padding-bottom: 40px; } .pdb60 { padding-bottom: 60px; } .pdb80 { padding-bottom: 80px; } .pdb150 { padding-bottom: 150px; } .pdl10 { padding-left: 10px; } .pdl20 { padding-left: 20px; } .pdl30 { padding-left: 30px; } .pdl40 { padding-left: 40px; } .pdl60 { padding-left: 60px; } .pdl80 { padding-left: 80px; } .pdr10 { padding-right: 10px; } .pdr20 { padding-right: 20px; } .pdr30 { padding-right: 30px; } .pdr40 { padding-right: 40px; } .pdr60 { padding-right: 60px; } .pdr80 { padding-right: 80px; } .pdtb40 { padding-bottom: 40px; padding-top: 40px; } /*-------------------------------- 4.4 Background & Block color ----------------------------------*/ .content { padding-top: 100px; padding-bottom: 100px; } .bg-light { background-color: #f8f8f4; } .bg-primary { background-color: #fb6a30; color: #fff; } .bg-default { background-color: #13387c; color: #fff; } .bg-white { background-color: #fff; } .outline { } .section-title { margin-bottom: 40px; text-align: center; } .title { color: #333333; word-wrap: break-word; } .small-title { margin-bottom: 10px; font-size: 12px; font-weight: 900; color: #ec1010; text-transform: uppercase; letter-spacing: 1px; display: inline-block; } .text-white { color: #fff; } .text-primary { color: #00b231; } .text-black { } .primary-sidebar { } .secondary-sidebar { } .well-block { } .divider-line { border-bottom: 1px solid #1d4293; margin-top: 40px; margin-bottom: 40px; } /*-------------------------------- 4.5 Features Block ----------------------------------*/ .features-section { } .feature-block { margin-top: 30px; } .feature-content { } .feature-icon { font-size: 100px; color: #b0c22b; margin-bottom: 40px; } .feature-title { } .working-schedule { text-align: center; padding: 34px 40px 40px; background-color: #f8f8f4; } .working-schedule .course-time { width: 100%; float: none; border-bottom: 1px solid #f0f0ee; padding: 20px; } .working-schedule .course-time:last-child { border-bottom: transparent; padding-bottom: 0px; } .appointment-form { background-color: #efff7c; padding: 34px 40px 34px; text-align: center; } .appointment-form .form-control { border: 1px solid #deee6d; background-color: #deee6d; } /*-------------------------------- 4.6 Bullet/arrow ----------------------------------*/ .angle, .arrow { position: relative; } .angle-right li::before { font-family: "fontello"; display: inline-block; position: absolute; left: 0; margin-top: -1px; font-size: 14px; color: #191e10; content: '\e801'; } /*-------------------------------- 4.7 Call to actions ----------------------------------*/ .cta-wrapper { padding-top: 50px; padding-bottom: 50px; background-color: #efff7c; background-size: cover; } .cta-section h2 { font-size: 28px; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; } .cta-small-text { font-size: 14px; color: #191e10; font-weight: 400; } .widget-cta { background-color: #191e10; padding: 30px; color: #fff; } .widget-cta h2 { color: #fff; margin-bottom: 10px; } .widget-cta-content { } .widget-cta-icon { } .widget-testimonial { } .widget-cta-text { } .widget-cta-title { } /*-------------------------------- 4.8 Image Hover Effect ----------------------------------*/ img { width: auto; max-width: 100%; height: auto; margin: 0; padding: 0; border: none; line-height: normal; vertical-align: middle; } .imghover { display: block; position: relative; max-width: 100%; } .imghover::before, .imghover::after { display: block; position: absolute; content: ""; text-align: center; opacity: 0; } .imghover::before { top: 0; right: 0; bottom: 0; left: 0; } .imghover::after { top: 55%; left: 50%; padding: 10px; line-height: 10px; margin: -25px 0 0 -25px; content: "\f00e"; font-family: "FontAwesome"; font-size: 30px; } .imghover:hover::before, .imghover:hover::after { opacity: 1; } .imghover:hover::before { background: rgba(239, 255, 124, .80); } .imghover:hover::after { color: #000; } .imghover img { max-height: 390px; } /*-------------------------------- 4.9 Icon ----------------------------------*/ .icon { } .icon-1x { font-size: 18px; } /* default icon size of font*/ .icon-2x { font-size: 38px; } .icon-4x { font-size: 65px; } .icon-6x { font-size: 88px; } .icon-8x { font-size: 108px; } .icon-default { color: #aa9144; } .icon-primary { color: #474954; } .icon-secondary { color: #fff; } .icon-white { color: #fff; } /*-------------------------------- 5 Header / Navigations ----------------------------------*/ /*-------------------- 5.1 Header Regular ----------------------*/ .logo { } .social { } .social ul { } .social ul li { } .social ul li a { } .social ul li a:hover { } .header-wrapper { z-index: 9; position: relative; background-color: #efff7c; padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #e3f372; } .header-btn { } /*-------------------------- 5.2 Navigations Regular ----------------------------*/ #primary-menu.menu, #navigation.menu { float: right; padding-top: 8px; } #navigation, #primary-menu, #navigation ul, #primary-menu ul, #navigation ul li, #primary-menu ul li, #navigation ul li a, #primary-menu ul li a, #navigation #menu-button, #primary-menu #menu-button { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #navigation:after, #primary-menu:after, #navigation>ul:after, #primary-menu>ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #navigation #menu-button, #primary-menu #menu-button { display: none; } #navigation, #primary-menu { font-family: 'Josefin Sans', sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } #navigation>ul>li, #primary-menu>ul>li { float: left; } #navigation.align-center>ul, #primary-menu>.align-center>ul { font-size: 0; text-align: center; } #navigation.align-center>ul>li, #primary-menu.align-center>ul>li { display: inline-block; float: none; } #navigation.align-center ul ul, #primary-menu.align-center ul ul { text-align: left; } #navigation.align-right>ul>li, #primary-menu.align-right>ul>li { float: right; } #navigation>ul>li>a, #primary-menu>ul>li>a { padding: 16px 20px; font-size: 13px; color: #191e10; letter-spacing: 1px; text-decoration: none; font-weight: 800; text-transform: uppercase; } #navigation>ul>li:hover>a, #primary-menu>ul>li:hover>a { color: #fff; background-color: #191e10; } #navigation>ul>li.menu-item-has-children>a, #primary-menu>ul>li.menu-item-has-children>a { padding-right: 32px; } /*#navigation>ul>li>a:after, #primary-menu>ul>li>a:after { position: absolute; top: 16px; right: -3px; height: 2px; display: block; content: '/'; }*/ #navigation>ul>li.menu-item-has-children>a:before, #primary-menu>ul>li.menu-item-has-children>a:before { position: absolute; right: 18px; font-family: FontAwesome; content: "\f107"; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; } /*#navigation > ul > li.menu-item-has-children:hover > a:before, #primary-menu > ul > li.menu-item-has-children:hover > a:before { top: 23px; height: 0; }*/ #navigation ul ul, #primary-menu ul ul { position: absolute; left: -9999px; margin: -1px; } #navigation.align-right ul ul, #primary-menu.align-right ul ul { text-align: right; } #navigation ul ul li, #primary-menu ul ul li { top: 0px; height: 0; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; } #navigation li:hover>ul, #primary-menu li:hover>ul { left: auto; } #navigation.align-right li:hover>ul, #primary-menu.align-right li:hover>ul { left: auto; right: 0; } #navigation li:hover>ul>li, #primary-menu li:hover>ul>li { height: 49px; } #navigation ul ul ul, #primary-menu ul ul ul { margin-left: 100%; top: 0; } #navigation.align-right ul ul ul, #primary-menu.align-right ul ul ul { margin-left: 0; margin-right: 100%; } #navigation ul ul li a, #primary-menu ul ul li a { background-color: #191e10; padding: 18px 20px; width: 216px; font-size: 13px; text-decoration: none; color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; border-bottom: #2c3320 1px solid; margin-left: 1px; } #navigation ul ul li:first-child>a, #primary-menu ul ul li:first-child>a { border-top-right-radius: 0%; } #navigation ul ul li:last-child>a, #primary-menu ul ul li:last-child>a { border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } #navigation ul ul li:last-child>a, #primary-menu ul ul li:last-child>a, #navigation ul ul li.last-item>a, #primary-menu ul ul li.last-item>a { border-bottom: none; } #navigation ul ul li:hover>a, #primary-menu ul ul li:hover>a, #navigation ul ul li a:hover, #primary-menu ul ul li a:hover { color: #fff; background-color: #303429; } #navigation ul ul li.menu-item-has-children>a:after, #primary-menu ul ul li.menu-item-has-children>a:after { position: absolute; top: 16px; right: 11px; width: 8px; height: 2px; display: block; background: #dddddd; content: ''; } #navigation.align-right ul ul li.menu-item-has-children>a:after, #primary-menu.align-right ul ul li.menu-item-has-children>a:after { right: auto; left: 11px; } #navigation ul ul li.menu-item-has-children>a:before, #primary-menu ul ul li.menu-item-has-children>a:before { position: absolute; top: 13px; right: 14px; display: block; width: 2px; height: 8px; background: #dddddd; content: ''; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; } #navigation.align-right ul ul li.menu-item-has-children>a:before, #primary-menu.align-right ul ul li.menu-item-has-children>a:before { right: auto; left: 14px; } #navigation ul ul>li.menu-item-has-children:hover>a:before, #primary-menu ul ul>li.menu-item-has-children:hover>a:before { top: 17px; height: 0; } #navigation.small-screen, #primary-menu ul ul>li.menu-item-has-children:hover>a:before { width: 100%; } #navigation.small-screen ul, #primary-menu.small-screen ul { width: 100%; display: none; } #navigation.small-screen.align-center>ul, #primary-menu.small-screen.align-center>ul { text-align: left; } #navigation.small-screen ul li, #primary-menu.small-screen ul li { width: 100%; border-top: 1px solid #2c3320; top: auto; background-color: #191e10; } #navigation.small-screen ul ul li, #primary-menu.small-screen ul ul li, #navigation.small-screen li:hover>ul>li, #primary-menu.small-screen li:hover>ul>li { height: auto; } #navigation.small-screen ul li a, #primary-menu.small-screen ul li a, #navigation.small-screen ul ul li a, #primary-menu.small-screen ul ul li a { width: 100%; border-bottom: 0; padding: 20px 15px; color: #fff; } #navigation.small-screen>ul>li>a:after, #primary-menu.small-screen>ul>li>a:after { position: absolute; top: 16px; right: -3px; height: 2px; display: block; content: ''; } #navigation.small-screen>ul>li, #primary-menu.small-screen>ul>li { float: none; } #navigation.small-screen ul ul li a, #primary-menu.small-screen ul ul li a { padding-left: 25px; } #navigation.small-screen ul ul ul li a, #primary-menu.small-screen ul ul ul li a { padding-left: 35px; } #navigation.small-screen ul ul li a, #primary-menu.small-screen ul ul li a { color: #fff; background: #191e10; margin: 0px; } #navigation.small-screen ul ul li:hover>a, #primary-menu.small-screen ul ul li:hover>a, #navigation.small-screen ul ul li.current_page_item>a, #primary-menu.small-screen ul ul li.current_page_item>a, #navigation.small-screen ul ul li.current-menu-item>a, #primary-menu.small-screen ul ul li.current-menu-item>a { color: #fff; background-color: #303429; } #navigation.small-screen ul ul, #primary-menu.small-screen ul ul, #navigation.small-screen ul ul ul, #primary-menu.small-screen ul ul ul, #navigation.small-screen.align-right ul ul, #primary-menu.small-screen.align-right ul ul { position: relative; left: 0; width: 100%; margin: 0; text-align: left; } #navigation.small-screen>ul>li.menu-item-has-children>a:after, #navigation.small-screen>ul>li.menu-item-has-children>a:before, #navigation.small-screen ul ul>li.menu-item-has-children>a:after, #navigation.small-screen ul ul>li.menu-item-has-children>a:before #primary-menu.small-screen>ul>li.menu-item-has-children>a:after, #primary-menu.small-screen>ul>li.menu-item-has-children>a:before, #primary-menu.small-screen ul ul>li.menu-item-has-children>a:after, #primary-menu.small-screen ul ul>li.menu-item-has-children>a:before { display: none; } #navigation.small-screen #menu-button, #primary-menu.small-screen #menu-button { display: block; padding: 18px; color: #fff; cursor: pointer; font-size: 12px; text-transform: uppercase; font-weight: 400; background-color: #191e10; margin-top: 10px; } #navigation.small-screen #menu-button:after, #primary-menu.small-screen #menu-button:after { position: absolute; top: 16px; right: 17px; display: block; height: 12px; width: 20px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; content: ''; } #navigation.small-screen #menu-button:before, #primary-menu.small-screen #menu-button:before { position: absolute; top: 21px; right: 17px; display: block; height: 2px; width: 20px; background: #fff; content: ''; } #navigation.small-screen #menu-button.menu-opened:after, #primary-menu.small-screen #menu-button.menu-opened:after { top: 20px; border: 0; height: 2px; width: 10px; background: #fff; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #navigation.small-screen #menu-button.menu-opened:before, #primary-menu.small-screen #menu-button.menu-opened:before { top: 20px; background: #fff; width: 10px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #navigation.small-screen .submenu-button, #primary-menu.small-screen .submenu-button { position: absolute; z-index: 99; right: 0; top: 0; display: block; border-left: 1px solid #2c3320; height: 54px; width: 53px; cursor: pointer; } #navigation.small-screen .submenu-button.submenu-opened { } #navigation.small-screen ul ul .submenu-button, #primary-menu.small-screen ul ul .submenu-button { height: 34px; width: 34px; } #navigation.small-screen .submenu-button:after, #primary-menu.small-screen .submenu-button:after { position: absolute; top: 25px; right: 20px; width: 8px; height: 2px; display: block; background: #fff; content: ''; } #navigation.small-screen ul ul .submenu-button:after, #primary-menu.small-screen ul ul .submenu-button:after { top: 15px; right: 13px; } #navigation.small-screen .submenu-button.submenu-opened:after, #primary-menu.small-screen .submenu-button.submenu-opened:after { } #navigation.small-screen .submenu-button:before, #primary-menu.small-screen .submenu-button:before { position: absolute; top: 22px; right: 23px; display: block; width: 2px; height: 8px; background: #fff; content: ''; } #navigation.small-screen ul ul .submenu-button:before, #primary-menu.small-screen ul ul .submenu-button:before { top: 12px; right: 16px; } #navigation.small-screen .submenu-button.submenu-opened:before, #primary-menu.small-screen .submenu-button.submenu-opened:before { display: none; } #navigation.small-screen.select-list, #primary-menu.small-screen.select-list { padding: 5px; } #navigation.small-screen>ul>li>a, #primary-menu.small-screen>ul>li>a { border-left: transparent; margin: 0; border-right: transparent; } #navigation.small-screen>ul>li:hover>a, #primary-menu.small-screen>ul>li:hover>a { border-left: transparent; border-right: transparent; } /*---------------------------------------------- 5.4 Page Header ----------------------------------------------*/ .page-header { background: url(../images/page-header.jpg) no-repeat; background-size: cover; margin: 0px; padding: 0px; border: 0px; } .page-section { padding-top: 160px; padding-bottom: 160px; position: relative; } .page-title { font-size: 48px; font-weight: 400; margin-bottom: 20px; font-family: 'Josefin Sans', sans-serif; color: #fff; } .page-breadcrumb { color: #fff; } .page-breadcrumb .breadcrumb { background-color: transparent; padding: 5px 0px; margin-bottom: 0px; font-size: 13px; font-weight: 400; border: none; letter-spacing: 0.5px; text-transform: uppercase; color: #fff; } .breadcrumb>li+li:before { padding: 0 5px; color: #fff; content: "/\00a0"; } .breadcrumb>li>a { color: #efff7c; } .call-info { background-color: #efff7c; padding: 16px 20px; font-size: 20px; font-weight: 400; position: absolute; top: 360px; display: inline-block; right: 0px; } .call-icon { font-size: 18px; padding-right: 14px; } .inner-title { color: #1a1b1e; } /*----------------------------------- 6. Slider -------------------------------------*/ .slider { margin-bottom: -40px; } .slider-img { background: -moz-linear-gradient(top, rgba(16, 17, 12, 0.5) 0%, rgba(16, 17, 12, 0.5) 100%); background: -webkit-linear-gradient(top, rgba(16, 17, 12, 0.5) 0%, rgba(16, 17, 12, 0.5) 100%); background: linear-gradient(to bottom, rgba(16, 17, 12, 0.5) 0%, rgba(16, 17, 12, 0.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cc1b2429', endColorstr='#cc1b2429', GradientType=0); position: relative; width: 100% } .slider-img img { position: relative; z-index: -1; } .slider-captions { position: absolute; bottom: 130px; width: 100%; color: #fff; } .slider-title { color: #fff; font-size: 52px; font-weight: 400; line-height: 62px; } .slider-text { color: #fff; margin-bottom: 30px; } .slider .owl-theme .owl-nav i { } .slider .owl-theme .owl-nav { line-height: 1.8; text-align: center; -webkit-tap-highlight-color: transparent; } .slider .owl-theme .owl-nav .owl-prev { position: absolute; top: 40%; left: 0px; color: #fff; font-size: 16px; margin: 8px; padding: 7px; background: transparent; border: 1px solid #fff; display: inline-block; cursor: pointer; border-radius: 0px; height: 45px; width: 35px; } .slider .owl-theme .owl-nav .owl-next { position: absolute; top: 40%; right: 0px; color: #fff; font-size: 16px; margin: 8px; padding: 7px; background: transparent; display: inline-block; cursor: pointer; border: 1px solid #fff; border-radius: 0px; height: 45px; width: 35px; } .slider .owl-theme .owl-nav .owl-prev:hover { background-color: #fff; text-decoration: none; color: #191e10; } .slider .owl-theme .owl-nav .owl-next:hover { background-color: #fff; text-decoration: none; color: #191e10; } .slider .owl-theme .owl-dots { text-align: center !important; position: relative; bottom: 50px; } .slider .owl-theme .owl-dots .owl-dot { display: inline-block; zoom: 1; } .slider .owl-theme .owl-dots .owl-dot span { width: 11px; height: 11px; margin: 5px 4px; background: transparent; border-radius: 0px; border: 2px solid #fff; display: block; -webkit-backface-visibility: visible; transition: opacity 200ms ease; } .slider .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background-color: #efff7c; border: 2px solid #efff7c; } .slider .owl-theme .owl-carousel .owl-item img { width: 100%; } /*----------------------------------- 8. Footer -------------------------------------*/ .footer { background-color: #141413; padding-top: 90px; padding-bottom: 50px; color: #9b9c95; font-weight: 300; } .footer-title { margin-bottom: 40px; color: #fff; letter-spacing: 0px; font-size: 22px; } .footer-widget { margin-bottom: 30px; } .footer-widget ul { margin-bottom: 25px; } .contact-info { margin-bottom: 30px; } .contact-icon { float: left; font-size: 20px; margin-top: 5px; color: #efff7c; } .contact-info p { padding-left: 40px; } .newsletter-section { background-color: #21211f; padding: 30px; } .newsletter-section h4 { color: #fff; margin-bottom: 10px; } .footer-social { } .footer-social a span { font-size: 15px; color: #9b9c95; border: 1px solid #9b9c95; border-radius: 50px; line-height: 1.6; width: 45px; height: 45px; display: inline-block; padding: 12px 15px; margin-right: 3px; } .footer-social a span:hover { color: #141413; background-color: #efff7c; border: 1px solid #efff7c; } .footer .widget a { color: #9b9c95; } /*-------------- tiny footer ------------*/ .tiny-footer { background-color: #141413; padding-top: 10px; padding-bottom: 10px; font-size: 14px; color: #9b9c95; text-align: center; } .tiny-footer a { color: #9b9c95; } /*----------------------------------- 9. Pages -------------------------------------*/ /*------------------------- 9.1 About us ---------------------------*/ .about-section { background: url(../images/about-bg.jpg) no-repeat; background-size: cover; padding: 64px; } .about-block { background-color: #1281e2; padding: 45px; color: #fff; border-top-left-radius: 2px; border-top-right-radius: 2px; } .about-block ul { } .about-block ul li { padding-left: 18px; } .about-title { color: #fff; } .about-img img { } .timeline { border-bottom: 1px solid #e5e8ea; margin-bottom: 30px; } .timeline-title { float: left; } .timeline-text { padding-left: 180px; padding-bottom: 30px; } .play-btn { } .play-btn a { position: absolute; bottom: 44%; left: 44%; color: #fff; font-size: 20px; border-radius: 50px; border: 2px solid #fff; padding: 14px; line-height: 0px; } .play-btn a:hover { color: #191e10; border: 2px solid #191e10; border-radius: 50px; } /*------------------------- 9.2 Courses --------------------------*/ .course-block { } .course-img img { width: 100%; } .course-head { background-color: #efff7c; padding: 24px 30px 8px; text-transform: capitalize; } .course-content { background-color: #f5f5ee; padding: 30px 30px 12px; } .course-time { float: left; width: 84%; } .course-time h5 { text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; font-size: 14px; font-weight: 400; } .course-time p { margin-bottom: 0px; font-size: 16px; } .course-fees { } .course-fees h2 { font-weight: 900; } .course-list { } .course-list ul { margin-bottom: 30px; } .course-list ul li { padding-left: 25px; line-height: 35px; } /*----------------------------------------- 9.3 Course-single ------------------------------------------*/ .sidenav { margin-bottom: 30px; } .sidenav ul li { position: relative; font-weight: 400; margin-bottom: 2px; } .sidenav ul li a { padding: 18px 0px 12px 20px; display: block; color: #191e10; font-size: 14px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; background-color: #f5f5ee; border-radius: 0px; } .sidenav ul li a:hover { color: #191e10; background-color: #efff7c; } .sidenav ul li.active a { color: #191e10; background-color: #efff7c; } .sidenav ul li.active a:before { color: #191e10; background-color: #efff7c; } .sidenav a:focus, a:active { background-color: transparent; border: 0px; } /*-------------------------- 9.5 Testimonial ---------------------------*/ .testimonial-block { background-color: #fff; padding: 40px; text-align: center; } .testimonial-widget { background-color: #f8f8f4; padding: 40px; text-align: center; margin-bottom: 30px; } .testimonial-content { font-style: italic; font-size: 19px; font-weight: 300; } .testimonial-img { margin-bottom: 30px; text-align: center; } .testimonial-img img { } .testimonial-meta { color: #1a1b1e; font-style: normal; padding-left: 16px; font-size: 16px; display: inline-block; } .testimonial-meta h3 { margin-bottom: 0px; font-size: 16px; } .testimonials-carousel .owl-carousel .owl-nav { display: none; } .testimonials-carousel .owl-carousel .owl-item img { width: inherit; display: inline; } .testimonials-carousel .owl-theme .owl-dots { text-align: center !important; position: relative; bottom: -30px; } .testimonials-carousel .owl-theme .owl-dots .owl-dot { display: inline-block; zoom: 1; } .testimonials-carousel .owl-theme .owl-dots .owl-dot span { width: 11px; height: 11px; margin: 5px 4px; background: transparent; border-radius: 0px; border: 2px solid #000; display: block; -webkit-backface-visibility: visible; transition: opacity 200ms ease; } .testimonials-carousel .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background-color: #9eae26; border: 2px solid #9eae26; } .testimonials-carousel .owl-theme .owl-carousel .owl-item img { width: 100%; } /*------------------------- 9.6 Contact us ---------------------------*/ .contact-widget { background-color: #f8f8f4; padding: 30px; border-radius: 2px; margin-bottom: 30px; text-align: center; } .contact-widget-title { color: #1a1b1e; } .contact-widget-content { } /*------------------------ 10. Blog pages --------------------------*/ /*----- post-----*/ .post-holder { border-bottom: 1px solid #f0f0ee; margin-bottom: 30px; } .post-block { } .post-img img { width: 100%; } .post-content { background-color: #f8f8f4; padding: 30px; } /*----- meta -----*/ .meta { margin-bottom: 20px; text-align: left; padding-right: 3px; font-weight: 400; line-height: 2; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; color: #8f908b; } .meta-icon { } .meta-date { color: #9eae26; font-size: 12px; } .meta-comments { } .meta-admin { padding-right: 15px; } .meta-categories { text-transform: uppercase; letter-spacing: 1; color: #8f908b; font-size: 12px; font-weight: 700; margin-bottom: 10px; } .meta-date, .meta-author { margin-right: 10px; } .bypostauthor { } /*---- Comments ----*/ .comment { margin-bottom: 30px; background: #f8f8f4; padding: 20px; } .comment-list { margin-top: 40px; list-style: none; padding: 0px; } .comment-meta { margin-bottom: 20px } .comment-author img { float: left; margin-right: 20px; } .comment-metadata { font-size: 14px; } .comment-reply-link { font-weight: 500; font-size: 14px; border-bottom: 1px solid #31322f; } .children { list-style: none; } .children .comment-body { background: #fcfcfa; padding: 10px; margin-bottom: 10px; } /*----- pagination -----*/ .pagination { padding-left: 0; margin: 20px 0; } .st-pagination { text-align: center; margin-top: 30px; } .st-pagination .pagination>li>a, .st-pagination .pagination .nav-links a, .pagination>li>span, .pagination .nav-links span { position: relative; float: left; line-height: 1.5; color: #191e10; letter-spacing: 2px; text-decoration: none; font-size: 12px; border-radius: 0px; border: 1px solid #191e10; background-color: transparent; font-weight: 700; text-transform: uppercase; margin-right: 8px; margin-bottom: 5px; } .st-pagination .pagination>li>a:focus, .st-pagination .pagination>li>a:hover, .st-pagination .pagination>li>span:focus, .st-pagination .pagination>li>span:hover, .st-pagination .pagination .nav-links a:focus, .st-pagination .pagination .nav-links a:hover, .st-pagination .pagination .nav-links span:focus, .st-pagination .pagination .nav-links span:hover { z-index: 2; color: #191e10; background-color: #9eae26; border: #9eae26 1px solid; } .st-pagination .pagination>li:first-child>a, .st-pagination .pagination .nav-links:first-child>a, .st-pagination .pagination>li:first-child>span, .st-pagination .pagination .nav-links:first-child>span { margin-left: 0; border-radius: 0px; } .st-pagination .pagination>li:last-child>a, .st-pagination .pagination .nav-links:last-child>a, .st-pagination .pagination>li:last-child>span, .st-pagination .pagination .nav-links:last-child>span { border-radius: 0px; } .st-pagination .pagination>.active>a, .st-pagination .pagination>.active>a:focus, .st-pagination .pagination>.active>a:hover, .st-pagination .pagination>.active>span, .st-pagination .pagination>.active>span:focus, .st-pagination .pagination>.active>span:hover, .st-pagination .pagination .nav-links span.current, .st-pagination .pagination .nav-links span.current:focus, .st-pagination .pagination .nav-links span.current:hover { z-index: 3; color: #191e10; cursor: default; background-color: #9eae26; border: 1px solid #9eae26; } .page-numbers { display: block; padding: .5rem .75rem; margin-left: -1px; } .related-post-block { border-top: 1px solid #f0f0ee; margin-bottom: 20px; } .related-post-title { margin-top: 30px; } .related-post { } .related-img img { margin-bottom: 30px; } .related-post-content { } .post-meta { margin-right: 20px; line-height: 0px; } /*----- prev-next-----*/ .post-navigation { border-top: 1px solid #f0f0ee; border-bottom: 1px solid #f0f0ee; padding: 20px 0px 20px 0px; } .nav-links { text-decoration: none; } .nav-previous { } .prev-link, .next-link { color: #75787b; text-transform: uppercase; font-size: 12px; font-weight: 700; line-height: 24px; margin-bottom: 20px; letter-spacing: 1px; } .nav-next { } .next-link { } .previous-next-title { margin-top: 10px; -ms-word-wrap: break-word; word-wrap: break-word; } /*----- Author-post -----*/ .author-block { margin-top: 40px; background-color: #f8f8f4; padding: 40px; border-radius: 0px; text-align: center; } .author-post { } .author-img { } .author-header h3 { margin-bottom: 10px; } .author-post-content { } .author-text { margin-top: 10px; } .author-meta { text-transform: uppercase; font-weight: 700; letter-spacing: 1.2px; font-size: 14px; color: #9eae26; margin-bottom: 20px; } /*----- Comments -----*/ .comments-area { margin-top: 40px; margin-bottom: 10px; } .comment-title { font-size: 22px; line-height: 22px; margin-bottom: 30px; } .comment-list { margin-top: 40px; } .comment { } .comment-body { } .comment-header h4 { margin-bottom: 8px; } .comment-author { } .comment-author img { float: left; } .comment-info { padding-left: 130px; } .user-title { font-size: 18px; float: left; margin-bottom: 0px; margin-right: 30px; } .comment-meta-date { margin-bottom: 10px; color: #afb2b8; font-size: 12px; font-weight: 700; letter-spacing: .75px; text-transform: uppercase; display: block; } .comment-content { margin-bottom: 10px; font-size: 16px; } .reply-link { } .childern { padding: 50px; background-color: transparent; border-bottom: 1px solid #f0f0ee; border-top: 1px solid #f0f0ee; } /*----- leave-Comments -----*/ .leave-comments { } /*------------------------ 12. Sidebar / Widgets --------------------------*/ /*----- widget -----*/ .widget ul { padding: 0px; } .widget ul li { list-style: none; } .widget-area .widget { margin-bottom: 30px; padding: 30px; background-color: #f8f8f4; } .widget-title { color: #1a1b1e; font-size: 22px; font-weight: 400; } .widget_archive { } .widget_archive ul li { position: relative; margin-bottom: 5px; } .widget_archive ul li a { font-size: 12px; font-weight: 400; color: #191e10; display: block; padding-top: 9px; letter-spacing: 1px; text-transform: uppercase; } .widget_categories { } .widget_categories ul li { position: relative; margin-bottom: 5px; } .widget_categories ul li a, .widget_recent_entries ul li a, .widget a { font-size: 12px; font-weight: 400; color: #191e10; display: block; padding-top: 9px; letter-spacing: 1px; text-transform: uppercase; word-wrap: break-word; } .widget_categories ul li a:hover { color: #9eae26; } .widget_archive ul li a:hover { color: #9eae26; } .widget_recent_entries { margin-bottom: 30px; } .recent-img img { } .recent-img { float: left; margin-right: 20px; } .recent-title { } .widget-tags { } .widget_tag_cloud a { color: #191e10; padding: 6px 8px; background-color: transparent; display: inline-block; margin-bottom: 5px; border-radius: 0px; font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 1.8px; line-height: 20px; margin-right: 5px; border: 1px solid #191e10; } .widget_tag_cloud a:hover { border: 1px solid #9eae26; color: #9eae26; } .widget-search { } .widget-search button { background-color: transparent; border: transparent; color: #9eae26; font-size: 12px; position: absolute; right: 0px; padding: 12px 20px; position: absolute; bottom: 0; } .widget-search .form-control { height: 49px; margin-bottom: 0px; background-color: #fff; } .search-form, .widget_search { position: relative; } .widget_search .screen-reader-text, .widget_search .search-submit { display: none; } .search-form label { display: block; } /*-------------styleguide-------------*/ .box-info { font-size: 16px; line-height: 1.6; } .circle-default-color { background-color: #191e10; height: 162px; width: 162px; border-radius: 50%; border: 5px solid #575854; } .circle-primary-color { background-color: #efff7c; height: 162px; width: 162px; border-radius: 50%; border: 5px solid #d5e65f; } .circle-heading-color { background-color: #191e10; height: 162px; width: 162px; border-radius: 50%; border: 5px solid #464744; } .circle-secondary-color { background-color: #3a3b37; height: 162px; width: 162px; border-radius: 50%; border: 5px solid #5c5d59; } .box-bg-color { } .unordered ul { list-style: none; padding-left: 22px; } .ordered ol { list-style: decimal; margin-left: 20px; } .ordered ol li { line-height: 2; } .altenate { } .altenate ul { list-style: none; } .altenate ul li { border-bottom: 1px solid #e1e0dd; line-height: 2.5; } .box-table { padding: 16px 30px; margin: 0 -15px 15px; border: 1px solid #dbdad8; } /*-------------404 error-------------*/ .error-wrapper { } .error { padding-top: 100px; } .error-img { } .error h1 { font-size: 180px; font-weight: 700; margin-bottom: 80px; } /*-------------map-------------*/ #map { } #contact-map { width: 100%; height: 400px; } /*-------------video-gallery-------------*/ .video-gallery { } .video-gallery-img { margin-bottom: 30px; } .video-gallery-img img { } .screen-reader-text { display: none; } .gallery-caption { } /*========== Non-Mobile First Method ==========*/ /* Large Devices, Wide Screens */ @media only screen and (max-width:1440px) { .slider-captions { bottom: 53px; left: 60px; } } @media only screen and (max-width:1200px) { #navigation>ul>li>a { padding: 22px 10px; } .slider-captions { } .slider-title { font-size: 28px; line-height: 32px; } .slider .owl-theme .owl-nav { } .slider .owl-theme .owl-dots { bottom: 35px; } } /* Medium Devices, Desktops */ @media only screen and (max-width:992px) { } /* Small Devices, Tablets */ @media only screen and (max-width:768px) { .slider-captions { bottom: 60px; padding: 20px; text-align: center; left: 50%; } .slider-title { font-size: 28px; line-height: 32px; } .slider .owl-nav { } .slider .owl-theme .owl-nav .owl-prev { top: 30%; } .slider .owl-theme .owl-nav .owl-next { top: 30%; } .slider .owl-theme .owl-dots { bottom: 35px; } .slider .owl-dots .owl-dot span { width: 10px; height: 10px; margin: 5px 4px; background: transparent; border-radius: 50px; border: 2px solid #fff; display: block; -webkit-backface-visibility: visible; transition: opacity 200ms ease; } .page-section { padding-bottom: 100px; padding-top: 100px; } .call-info { top: 240px; padding: 16px 9px; } .space-medium { padding-top: 45px; padding-bottom: 40px; } .content { padding-top: 45px; padding-bottom: 40px; } } /* Extra Small Devices, Phones */ @media only screen and (max-width:480px) { .slider-captions { bottom: 0px; background: transparent; left: 0px; } .slider-title { font-size: 21px; line-height: 26px; } .slider .owl-theme .owl-nav { display: none; } .slider .owl-theme .owl-dots { bottom: 24px; } .slider .owl-theme .owl-dots .owl-dot span { width: 10px; height: 10px; margin: 5px 4px; background: transparent; border-radius: 50px; border: 2px solid #fff; display: block; -webkit-backface-visibility: visible; transition: opacity 200ms ease; } .space-medium { padding-top: 35px; padding-bottom: 30px; } .page-title { font-size: 30px; } .content { padding-top: 35px; padding-bottom: 30px; } /* Custom, iPhone Retina */ @media only screen and (max-width:320px) { .slider-captions { bottom: -10px; background: transparent; left: 0px; } .slider-title { font-size: 21px; line-height: 26px; } .slider .owl-theme .owl-nav { display: none; } .slider .owl-theme .owl-dots { bottom: 24px; } .slider .owl-theme .owl-dots .owl-dot span { width: 10px; height: 10px; margin: 5px 4px; background: transparent; border-radius: 50px; border: 2px solid #fff; display: block; -webkit-backface-visibility: visible; transition: opacity 200ms ease; } .page-section { padding-bottom: 0px; padding-top: 25px; } .page-title { font-size: 30px; } .content { padding-top: 35px; padding-bottom: 30px; } }