/*@import url(https://fonts.googleapis.com/css?family=Lato:400|Open+Sans:300,400,800|Khula:700);*/ /* Theme Name: Open Meridian Theme URI: openmeridian.org */ /** * Bootstrap and Google Fonts included above */ /** * Table of Contents * * 1.0 - Reset * 2.0 - Typography * 3.0 - Elements * 4.0 - Header * 5.0 - Content * 6.0 - Footer * 7.0 - Media Queries * 8.0 - Print * 9.0 - Slick Slider * * Note: Media queries are written inside the section they affect, except for global Media Queries. */ /** * 1.0 Reset */ html, body { height: 100%; position: relative; z-index: -1; } body { background-color: #06071F; color: #CEB9A1; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#060723+59,000000+100 */ } #page { min-height:100%; position: absolute; top: 0px; width: 100%; } img { max-width: 100%; height: auto; } input[type="text"], input[type="email"], input[type="password"], textarea { background-color: #e7e7e7; } *::selection { background: #e7d7cd; color: #070823;} *::-moz-selection { background: #e7d7cd; color: #070823;} .form-control:focus { border-color: #c0966c; outline: 0px none; box-shadow: 0px 1px 1px #c0966c inset, 0px 0px 8px #c0966c;} @-ms-viewport { width: device-width;} @viewport { width: device-width;} @media screen and (min-width: 769px) { .alignleft { float: left; margin: 0px 10px 10px 0px; } .alignright { float: right; margin: 0px 0px 10px 10px; } .aligncenter { display: block; margin: 30px auto; } } /** * 2.0 Typography */ /* Placeholders */ ::-webkit-input-placeholder { font-style: italic; } :-moz-placeholder { font-style: italic; /* Firefox 18- */ } ::-moz-placeholder { font-style: italic; /* Firefox 19+ */ } :-ms-input-placeholder { font-style: italic; } /* FONTS */ h1 { font-size: 48px; line-height: 56px; color: #c0966c; font-family: 'neuton_scsc', sans-serif; text-align: center; margin: 0px 0px 40px; font-weight: 700; } h1.page-title { background-color: rgba(0,0,0,0.4); color: #c0966c; padding: 11% 0px; position: absolute; top: 0px; height: 100%; width: 100%; margin: 0px; line-height: 60px; font-size: 60px; } h1.no-feature { background-color: #06071F; color: #c0966c; margin: 0px; } h2.archive-title { text-align: left; margin-bottom: 0px; margin-top: 20px; } h2.archive-title a { } h2.archive-title a:hover { color: #e7d7cd; } h2 { font-size: 30px; line-height: 40px; color: #c0966c; font-family: 'neuton_scsc', sans-serif; font-weight: 700; } h3 { font-size: 24px; line-height: 32px; color: #c0966c; font-family: 'neuton_scsc', sans-serif; font-weight: 700; } h4 { font-size: 24px; line-height: 32px; color: #c0966c; font-family: 'neuton_scsc', sans-serif; font-weight: 700; } h5 { font-size: 24px; line-height: 32px; color: #c0966c; font-family: 'neuton_scsc', sans-serif; font-weight: 700; } h6 { font-size: 18px; line-height: 24px; color: #c0966c; font-family: 'neuton_scsc',sans-serif; font-weight: 700; margin-top: 0px; } body p, body ul, body ol { font-size: 18px; line-height: 26px; color: #CEB9A1; font-family: Arial,sans-serif; font-weight: 400; margin-bottom: 20px; word-wrap: break-word; } p.archive-info { color: #c0966c; font-family: neuton_scsc, sans-serif; font-size: 16px; font-weight: bold; line-height: 20px; margin-bottom: 6px; } a { color: #e7d7cd; font-weight: bold; outline: 0; font-family: 'neuton_scsc',sans-serif; transition: color 0,2s; text-decoration: none; } a.external i { font-size: 10px; margin-left: 10px; color: #e7d7cd; } a:hover i { color: #e7d7cd; } a:hover, a:focus, a:active { color: #e7d7cd; outline: 0 !important; text-decoration: none !important; } a:visited { text-decoration: none; } .type-bold { font-weight: 700; } .type-light { font-weight: 300; } .type-italic { font-style: italic; } .type-uppercase { text-transform: uppercase; } .type-center { text-align: center; } .type-white { color: #FFFFFF; } /** * 3.0 Elements */ hr { border-color: #c0966c; margin: 30px 0px 20px; border-width: 2px 0px 0px; } ul { margin: 0px; padding: 0px; } .entry ul, .entry ol { margin-left: 40px; } .entry ul li, .entry ol li { margin-bottom: 10px; } .hidden { display: none; } span.spacer { margin: 0px 6px; } .black-back { background-color: #000; } .white-back { background-color: #F1f1f1; } .blue-back { /* background-color: #06071F; */ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#06071f+0,000000+100 */ background: rgb(6,7,31); /* Old browsers */ background: -moz-linear-gradient(top, rgba(6,7,31,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(6,7,31,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(6,7,31,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#06071f', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ } .wrapper.blue-back { padding: 0px !important; } .wrapper.blue-back .container { background-color: #070823; border-left: 1px solid #2e2c2d; border-right: 1px solid #2e2c2d; border-bottom: 1px solid #2e2c2d; padding-top: 40px; padding-bottom: 40px; -webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75); box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75); } .btn { border: 0px; border-radius: 3px; display: inline-block; font-size: 16px; font-family: 'neuton_scsc', sans-serif; letter-spacing: 1px; line-height: 42px; margin: 20px 0px; padding: 0px 24px; text-align: center; } .btn.btn-orange { background-color: #06071F; color: #c0966c; border: 1px solid #c0966c; font-weight: bold; transition: background-color 0.2s ease; } .btn.btn-orange:hover, .btn.btn-orange:focus, .btn.btn-orange:target { background-color: #070823; color: #e7d7cd; border: 1px solid #e7d7cd; } .btn.btn-orange:active { background-color: #070823; color: #e7d7cd; border: 1px solid #e7d7cd; } input[type="text"], input[type="email"], input[type="password"], textarea { display: block; max-width: 400px; width: 100%; padding: 6px 12px; font-size: 14px; line-height: 1.42857; color: #333333; background-color: #FFF; background-image: none; border: 1px solid #CCC; border-radius: 4px; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /** * 4.0 Header */ #header { background-color: #06071F; font-family: 'neuton_scsc',sans-serif; width: 100%; -webkit-transition: left .4s; transition: left .4s; left: 0px; position: relative; z-index: 100; } #header .container { border-left: 1px solid #2e2c2d; border-right: 1px solid #2e2c2d; } #header #logo-img { height: 100px; } #header h2 { color: #f1f1f1; margin: 0px; } #header h6 { color: #f1f1f1; font-size: 18px; } #header a { color: #f1f1f1; } #header a:hover, #header a:focus, #header a:active { color: #f1f1f1; } #header a:visited { color: #f1f1f1; } #header #main-menu { } #header ul { margin-bottom: 0px; } #header ul.main-menu { float: right; width: 100%; } #header ul li { transition: color 0.2s; list-style: none; margin: 0px; } #header ul.main-menu li a { color: #c0966c; display: block; font-weight: 700; } #header ul.main-menu li:hover > a { color: #e7d7cd; } #header ul.main-menu > li { width:20%; float: left; position: relative; z-index: 100; } #header ul.main-menu > li > a { height: 100%; line-height: 40px; text-align: center; display: block; font-size: 26px; } #header ul.main-menu li > a a:hover { color: #e7d7cd; } #header ul.main-menu > li > a i { width: 100%; margin-top: 15px; } #header ul.main-menu > li > a span { width: 100%; position: absolute; bottom: 0px; left: 0px; z-index: 100; } /* when the user scrolls down the page, the menu shrinks */ #header.shrink { height: 70px; } #header.shrink h2 { margin-top: 5px; } #header.shrink h6 { } #header.shrink ul.main-menu > li { height: 70px; } #header.shrink ul.main-menu > li > a span { display: none; } /* sub-menus */ #header ul li ul { border: 1px solid #2e2c2d; min-width: 100%; background-color: #070823; display: none; position: absolute; top: 100%; white-space: nowrap; } #header ul li ul li { transition: background-color 0.1s; } #header ul li ul li:hover a { color: #c0966c; } #header ul li ul li a { padding: 5px 12px; text-align: left; } #header ul li ul li:first-child a { padding-top: 16px; } #header ul li ul li:last-child a { padding-bottom: 16px; } /* menu hover */ #header ul li:hover i, #header ul li:hover span{ color: #c0966c; } #header ul.main-menu > li:hover > ul { display: block; } #featured-wrapper { width: 100%; background-color: #06071F; } #featured-wrapper .container { background-color: #070823; border: 1px solid #2e2c2d; padding: 0px; } #featured-wrapper #featured-image { background-position: top center; background-size: 100%; background-repeat: no-repeat; height: 1000px; width: 100%; position:relative; } #featured-image #featured-overlay { height: 1000px; width: 100%; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(60%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.5))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0.75) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0.75) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0.75) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0.75) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 ); /* IE6-9 */ } /** * Mobile Menu */ #main-navigation ul li { margin-bottom: 0px; } .navbar { left: -256px; } .navbar-toggle .icon-bar { background-color: #c0966c; } @media (min-width: 769px) and (max-width: 991px) { /* hide menu when the menu runs out of space */ #header #logo-img { display: none; } } @media (max-width: 768px) { body { margin-top: 50px; } #main-menu { display: none; } #header { position: fixed; top: 0px; z-index: 100; } #header #logo-img { height: 70px; } #close-mobile-target { display: none; width: 100%; position: fixed; top: 70px; bottom: 0px; z-index: 100; background-color: rgba(0,0,0,0.5); } .navbar { height: 100%; left: -256px; overflow-y: auto; position: fixed; top: 0; width: 256px; z-index: 100; -webkit-transition: left .4s; transition: left .4s; } .navbar.transition { -webkit-transition: left .4s; transition: left .4s; } .navbar::-webkit-scrollbar { width: 0 !important; } .navbar .main-navigation .nav { display: block; list-style: none; margin: 0; padding: 0; vertical-align: top; } .navbar .main-navigation .nav > li { position: relative; } .navbar .main-navigation .nav > li a { display: block; white-space: normal; } .navbar .main-navigation .nav > li a:focus, .navbar .main-navigation .nav > li a:link, .navbar .main-navigation .nav > li a:active { text-decoration: none; } .navbar .main-navigation .nav > li > ul { background-color: transparent; border: 0; box-shadow: none; display: block; float: none; margin: 0; padding: 0;position: static;width: auto; } .navbar .main-navigation .nav > li > ul > li.open a, .navbar .main-navigation .nav > li > ul > li a { padding: 10px 25px; } .navbar { z-index: 1000 !important; border: 0px; border-radius: 0px !important; } .navbar-toggle { float: left; margin: 0px; } .navbar-toggle .icon-bar { background: #c0966c; width: 38px; height: 5px; margin: 5px 0px; border-radius: 4px; } #mobile-menu-table { width: 100%; } #mobile-menu-table td { vertical-align: middle; padding: 0px 5px; } #mobile-menu-table #main-navigation-toggle { width: 100%; } #mobile-menu-table #mobile-menu-btn { width: 70px; } #main-navigation { display: block; background-color: #06071F; border: 0px; } #main-navigation .dropdown-arrow { display: none; } #main-navigation hr { margin: 10px 0px 10px 16px; width: 206px; } #main-navigation .navbar-nav { margin: 7.5px 0px; } #main-navigation ul.nav { list-style-type: none; margin: 0px; border: 0px; } #main-navigation ul.nav .current-menu-parent > a, #main-navigation ul.nav .current_page_parent > a, #main-navigation ul.nav .current_page_ancestor > a, #main-navigation ul.nav .current-menu-item > a, #main-navigation ul.nav .current_page_item > a { background-color: #06071F !important; color: #e7d7cd !important; } #main-navigation ul.nav > li { background-color: #070823; border-bottom: 1px solid #c0966c; display: block !important; font-size: 14px; font-family: 'neuton_scsc', sans-serif; } #main-navigation ul.nav > li > a { color: #c0966c; display: inline-block; font-size: 16px; font-weight: 700; line-height: 46px; padding: 0px 0px 0px 20px; text-transform: uppercase;width: 100%; } #main-navigation ul.nav > li > a > i { font-size: 24px; margin-right: 10px; width: 24px; color: #c0966c; } #main-navigation ul.nav > li > a:hover, #main-navigation ul.nav > li > a:active, #main-navigation ul.nav > li > a:focus { color: #e7d7cd !important; background-color: #070823; } #main-navigation ul.nav > li .dropdown-btn {border-left: 1px solid #c0966c; color: #c0966c;cursor: pointer;display: inline-block;float: right;line-height: 46px;text-align: center;width: 20%;position: absolute;top: 0px;bottom: 0px; } #main-navigation ul.nav > li .dropdown-btn:hover, #main-navigation ul.nav > li .dropdown-btn:active, #main-navigation ul.nav > li .dropdown-btn:focus { color: #e7d7cd !important; background-color: #070823; } #main-navigation ul.nav > li .dropdown-btn .fa-caret-up { color: #e7d7cd; } #main-navigation ul.nav > li ul.dropdown-menu { background-color: #070823;border: 0px;border-top: 1px solid #c0966c;box-shadow: none;font-size: 14px;font-family: 'neuton_scsc', sans-serif;display: none;float: none !important;margin-left: 0px !important;padding: 0px !important;position: relative; } #main-navigation ul.nav > li ul.dropdown-menu li a { color: #c0966c; font-size: 16px; font-weight: 700; line-height: 22px; padding: 10px 20px; white-space: normal; } #main-navigation ul.nav > li ul.dropdown-menu li a:hover, #main-navigation ul.nav > li ul.dropdown-menu li a:active, #main-navigation ul.nav > li ul.dropdown-menu li a:focus{ color: #e7d7cd; background-color: #070823; } #main-navigation ul.nav > li.dropdown > a {width: 80%; } } @media (min-width: 769px) { .navbar{ display: none; } } @media screen and (max-width: 480px) { #header h2{ font-size: 24px !important; } } /** * Tablet */ @media screen and (max-width: 768px) { #header { } #header h2 { font-size: 32px; line-height: 60px; white-space: nowrap; } #header h6 { display: none; } #menu { display: none; } #featured-wrapper { } } /** * Desktop Small */ @media screen and (min-width: 769px) and (max-width: 1169px) { #header { } #header h2 { font-size: 26px; margin-top: 20px; } #header ul.main-menu > li > a i { font-size: 40px; } #header ul.main-menu > li > a span { font-size: 16px; margin-bottom: 10px; } #featured-wrapper { } } /** * Desktop Medium */ @media screen and (min-width: 769px) and (max-width: 991px) { } @media screen and (min-width: 992px) and (max-width: 1199px) { } /** * Full Screen */ @media screen and (min-width: 1200px) { #header { } #header h2 { font-size: 32px; margin-top: 20px; } #header ul.main-menu > li > a i { font-size: 40px; } #header ul.main-menu > li > a span { font-size: 20px; margin-bottom: 10px; } #featured-wrapper { } } /** * 5.0 Content */ #content { } #content .wrapper { position: relative; z-index: 1; padding: 40px 0px; } #content .container { position: relative; z-index: 1; } .wp-pagenavi { clear: both; font-family: "neuton_scsc",sans-serif; font-size: 20px !important; font-weight: normal !important; margin-top: 20px; text-align: center; } .wp-pagenavi .pages { display: none; } .wp-pagenavi span.current { color: #06071F; background-color: #c0966c; border-radius: 4px; border: 1px solid #c0966c; margin: 0px 4px; display: inline-block; } .wp-pagenavi a, .wp-pagenavi span { color: #c0966c; background-color: #06071F; border-radius: 4px; border: 1px solid #c0966c; margin: 0px 4px; padding: 0px; height: 40px; width: 40px; line-height: 36px; text-align: center; display: inline-block; } .wp-pagenavi a:hover, .wp-pagenavi span:hover, .wp-pagenavi a:active, .wp-pagenavi span:active, .wp-pagenavi a:focus, .wp-pagenavi span:focus { color: #06071F; background-color: #c0966c; border: 1px solid #c0966c; } /** * Tablet */ @media screen and (max-width: 768px) { #content { } #content #home-img-wrapper img { margin: 50px 0px; } #account-create { border-top: 1px solid #CEB9A1; padding-top: 50px; margin-top: 30px } } /** * Desktop Small */ @media screen and (min-width: 769px) and (max-width: 1169px) { #content { } #content #home-img-wrapper img { margin: 100px 0px; } } /** * Desktop Medium */ @media screen and (min-width: 1170px) { #content { } #content #home-img-wrapper img { margin: 100px 0px; } } /** * 6.0 Footer */ #footer { background-color: #000; width: 100%; } #footer .container { /* background-color: #06071F; border-left: 1px solid #c0966c; border-right: 1px solid #c0966c; border-bottom: 1px solid #c0966c; */ } #footer h3 { color: #c0966c; border-bottom: 1px solid #c0966c; } #footer h5 { color: #c0966c; font-size: 30px; line-height: 60px; text-align: center; } #footer .social-icons { text-align: center; } #footer .social-icons a i { color: #e7d7cd; font-size: 30px; padding: 20px 26px 0px; } #footer .social-icons a:first-child i { padding-left: 0px; } #footer .social-icons i:last-child i { padding-right: 0px; } #footer .social-icons a:hover i.fa-facebook-official, #footer .social-icons a:active i.fa-facebook-official { color: #3b5998; } #footer .social-icons a:hover i.fa-twitter-square, #footer .social-icons a:active i.fa-twitter-square { color: #00aced; } #footer .social-icons a:hover i.fa-youtube-play, #footer .social-icons a:active i.fa-youtube-play { color: #bb0000; } #footer ul li { list-style: none; margin: 0px; } #footer ul li a { color: #CEB9A1; font-family: Arial, Sans-serif; font-weight: normal; display: block; padding: 10px 0px; } #footer ul li a:hover, #footer ul li a:active, #footer ul li a:focus { color: #e7d7cd; } #footer .wp-github .wp-github-state { background-color: transparent; border-radius: 15px; padding: 0px; margin-right: 10px; } #footer .wp-github .wp-github-state i { font-size: 26px; } #footer .wp-github .wp-github-state.open { color: rgb(135, 217, 98); } #footer .wp-github .wp-github-state.closed { color: #c0966c; } #footer .wp-github-nb { color: #c0966c; } #footer #pulls .wp-github li { margin-bottom: 10px; padding-bottom: 10px; } #footer #pulls .wp-github li a { display: inline; } #footer #pulls .wp-github li { margin-bottom: 10px; padding-bottom: 10px; } #footer #pulls .wp-github li .wp-github-nb:after { content: ':'; } /** * 7.0 Media Queries */ @media (max-width: 480px) { h1.page-title { font-size: 30px; line-height: 36px;} h1.no-feature { padding: 20px 0px; font-size: 32px; line-height: 38px; } } @media (min-width: 480px) and (max-width: 768px) { h1.page-title { font-size: 46px; line-height: 52px; } h1.no-feature { padding: 30px 0px; font-size: 48px; line-height: 48px; } } @media (max-width: 768px) { .mobile-hide { display: none; } h1.page-title { padding: 18% 0px; position: absolute; top: 0px; height: 100%; width: 100%; } h1.archive-title { font-size: 28px; line-height: 34px; margin-bottom: 0px; } .archive-info { font-family: neuton_scsc, sans-serif; font-size: 16px; line-height: 20px; margin-bottom: 6px; } } @media (min-width: 769px) { .desktop-hide { display: none; } h1.no-feature { padding: 30px 0px; font-size: 60px; line-height: 60px; } } /** * 8.0 Print */ .print-only { display: none; } @media print { .no-print { display: none; } .print-only { display: block; } .print-full { width: 100% !important; } a[href]:after { content: initial; } } /** * 9.0 Slick Slider */ .slick-gallery { position: relative; margin-bottom: 20px; outline: 0; } .slick-gallery .slick-slide { outline: 0; } .slick-gallery .slick-arrow { outline: 0; background-color: transparent; color: #CEB9A1; border: none; cursor: pointer; position: absolute; top: 50%; margin-top: -30px; width: 75px; height: 60px; z-index: 1; } .slick-gallery .slick-arrow i { font-size: 40px; } .slick-gallery .slick-arrow.slick-prev { right: 100%; } .slick-gallery .slick-arrow.slick-next { left: 100%; } .slick-gallery .img-viewer { background-color: transparent; background-size: contain; background-position: center center; background-repeat: no-repeat; outline: 0; } .slick-gallery .slick-caption { color: #CEB9A1; background-color: transparent; font-size: 24px; font-family: 'neuton_scsc', sans-serif; letter-spacing: 1px; padding-bottom: 20px; text-align: center; } .slick-gallery .slide-count { float: right; font-weight: bold; margin-top: 10px; } .slick-gallery .slick-dots { height: 30px; margin: 0; text-align: center; position: absolute; width: 100%; } .slick-gallery .slick-dots .slick-active button:before { color: #FFF; } .slick-gallery .slick-dots li { cursor: pointer; color: #F1F1F1; list-style: none; position: relative; display: inline-block; margin: 0; padding: 0; } .slick-gallery .slick-dots li:before { display: none; content: ''; } .slick-gallery .slick-dots button { display: block; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: 0; background: transparent; } .slick-gallery .slick-dots button:before { color: #CEB9A1; content: "•"; font-size: 22px; line-height: 20px; position: absolute; top: 0px; left: 0px; width: 20px; height: 20px; text-align: center; } @media (min-width: 1200px){ .slick-gallery .img-viewer { height: 300px; } } @media (min-width: 992px) { .slick-gallery .img-viewer { height: 400px; } } @media (min-width: 769px) { .slick-gallery .img-viewer { height: 500px; } } @media (max-width: 768px) { .slick-gallery .img-viewer { padding-top: 100%; } .slick-gallery .slick-arrow { top: 0; } .slick-gallery .slick-arrow.slick-prev { left: 0; right: auto; position: relative; } .slick-gallery .slick-arrow.slick-next { right: 0; left: auto; } }