/* * * ------------------ * Table of Content * ------------------ * * 1 Reset * 1 Eric Meyer Reset * 2 Fixes * 1 Bold, Italic * 2 WordPress image Sizing * * 2 General * 1 Basic * 2 Typography * 3 Helper Classes * * 3 Header * 1 Toggle Nav * 2 Top Nav * 3 Head Section * * 4 Post Section * 1 Featured Section * 2 Index Blog Container with Sidebar * 1 Content * 2 Sidebar * 3 Full Layout * 4 Pagination * 5 Article Styling * 6 Authorbox * 7 Comment Styling * * 5 Footer * 1 Widgetized Footer * 2 Footer Menu Section * 3 Social Media and Credits * * 6 Single & Static Pages * 7 Widget Styles * 8 P.S. (if anything left to add) * */ /* * --------- * 1 Reset * --------- */ /* * 1.1 Eric Meyer Reset * ---------------------- */ html, body, body, div, span, .pagination a, .pagination .toggle, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, .toggle, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, article ul, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, article ul, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* * 1.2 Fixes * ----------- * * in this section, we'll take care of redefining bold * and italic text as well as preventing WordPress images * from resizing wrong. */ /* * 1.2.1 Bold, Italic */ b, strong { font-weight: bold; } i, em { font-style: italic; } /* * 1.2.2 WordPress Image Sizing */ .entry-content img, .comment-content img, .widget img { max-width: 97.5%; } img[class*="align"], img[class*="wp-image-"] { height: auto; } img.size-full { max-width: 97.5%; width: auto; } /* * ----------- * 2 General * ----------- */ /* * 2.1 Basic * ----------- */ html, body { font-family: "Lato", "Calibri", "Arial", sans-serif; font-size: 1em; font-size: 17px; font-weight: 300; color: #cccccc; } @media screen and (max-width: 700px) { html, body { font-size: 14px; } } body { line-height: 1.5; background-color: #050505; } img, hr { max-width: 100%; } div.content { max-width: 1300px; width: 90%; display: block; position: relative; margin: 0px auto; } /* * 2.2 Typography * ---------------- */ h1, h2, h3, h4, h5, h6 { font-weight: 400; text-transform: uppercase; line-height: 1; padding: 10px 0px; } h1 { font-size: 2.1em; } h2 { font-size: 1.6em; } h3 { font-size: 1.2em; } h4 { font-size: 1em; } h5 { font-size: .83em; } h6 { font-size: .75em; } a, .toggle { -webkit-transition: .3s all; transition: .3s all; color: #e8e8e6; text-decoration: none; } a:hover, .toggle:hover { transiton: .3s all; color: #eeeeec; } .post a, .post .toggle, article footer a, article footer .toggle, .widget a, .widget .toggle { padding: 0px 2px; border-bottom: 1px solid transparent; } .post a:hover, .post .toggle:hover, article footer a:hover, article footer .toggle:hover, .widget a:hover, .widget .toggle:hover { color: inherit; border-bottom: 1px solid currentColor; } blockquote { width: 90%; margin-left: 10%; display: block; padding: 5px 10px; border-left: 1px solid #38393a; font-family: "Playfair Display", "Georgia", "Times New Roman", serif; font-size: 1.1em; letter-spacing: 2px; box-sizing: border-box; } /* * 2.3 Helper Classes * -------------------- */ .hidden { display: none; } .responsive_vid { position: relative; width: 100%; height: 0; padding: 56.25% 0 0 0; display: block; } .responsive_vid iframe { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } .alignleft { float: left; } .alignright { float: right; } .aligncenter { margin: 0 auto; display: block; } .wp-caption, .gallery-caption { margin-bottom: 1.5em; text-align: center; padding-top: 5px; } .wp-caption-text { font-size: .6em; } .bypostauthor { font-weight: bold; } .sticky { border: 1px solid #38393a; padding: 20px; box-sizing: border-box; } /* * ---------- * 3 Header * ---------- */ .site_header { position: relative; } /* * 3.1 Toggle Nav * ---------------- * * this is the top bar containing the toggle links for * off-canvas menu and sidebar, after the collapse */ @media screen and (max-width: 900px) { body, .top_menu { margin-top: 55px; } } .toggle_nav { display: none; } .toggle_nav .toggle { display: none; } @media screen and (max-width: 900px) { .toggle_nav { display: block; position: fixed; top: 0; left: 0; width: 100%; z-index: 104; background: #c3c2bf; height: 55px; padding: 15px; box-sizing: border-box; } .toggle_nav .toggle { color: #020202; padding: 7px 15px; -webkit-transition: .3s all ease; transition: .3s all ease; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); display: inline-block; } .toggle_nav .toggle:hover { color: #1c1c1c; } } @media screen and (max-width: 900px) and (max-width: 240px) { .toggle_nav .toggle { font-size: 80%; } } @media screen and (max-width: 900px) { .toggle_nav .toggle-sidebar { right: 5px; } .toggle_nav .toggle-main { left: 5px; } } /* * 3.2 Top Nav * ------------- */ .main_menu { position: fixed; left: 0; top: 0; width: 100%; background: #eeeeec; -webkit-transition: .3s all ease; transition: .3s all ease; color: #020202; z-index: 105; } .main_menu a, .main_menu .toggle { color: #020202; } .main_menu a:hover, .main_menu .toggle:hover { color: #030303; } @media screen and (min-width: 901px) { .main_menu .content { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } @media screen and (max-width: 900px) { .main_menu .search { display: none; } } .main_menu ul { list-style: none; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .main_menu ul li { list-style: none; display: inline-block; vertical-align: middle; position: relative; padding: 7px; } .main_menu .menu-item-has-children { line-height: 1; } .main_menu .parent { position: relative; } .main_menu .parent a, .main_menu .parent .toggle, .main_menu .parent .submenu-opener { display: inline-block; vertical-align: middle; line-height: 1; } .main_menu .parent .submenu-opener { font-size: 0; position: relative; width: 20px; height: 20px; -webkit-transition: .6s all ease; transition: .6s all ease; } @media screen and (max-width: 900px) { .main_menu .parent .submenu-opener { margin-left: 20px; } } @media screen and (min-width: 901px) { .main_menu .parent .submenu-opener { margin-left: 5px; } } .main_menu .parent .submenu-opener.sub-menu-is-open { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .main_menu .parent .submenu-opener:after { content: ''; width: 0; height: 0; border-style: solid; border-color: #020202 transparent transparent transparent; border-width: 8.66025px 5px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -20%); -ms-transform: translate(-50%, -20%); transform: translate(-50%, -20%); -webkit-transition: .3s all ease; transition: .3s all ease; } .main_menu .parent .submenu-opener:hover { cursor: pointer; } .main_menu .parent .submenu-opener:hover:after { border-color: #030303 transparent transparent transparent; } .main_menu .sub-menu { display: none; position: absolute; top: 100%; background: #fafaf9; } .main_menu .sub-menu li a, .main_menu .sub-menu li .toggle { padding: 5px; } @media screen and (max-width: 900px) { .main_menu { max-width: 300px; height: 100%; left: -300px; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .main_menu.open { -webkit-transform: translateX(300px); -ms-transform: translateX(300px); transform: translateX(300px); } .main_menu ul { display: block; width: 100%; padding: 0; margin: 0; } .main_menu ul li { display: block; width: 100%; line-height: 1.4; margin: 0; padding: 0; } .main_menu ul li a, .main_menu ul li .toggle { display: block; padding: 10px; } .main_menu .sub-menu { position: relative; } } .toggle:hover { cursor: pointer; } @media screen and (min-width: 901px) { .toggle { display: none; } } .main_menu .toggle { display: block; width: 100%; text-align: right; padding: 5px 10px; box-sizing: border-box; } @media screen and (min-width: 901px) { .main_menu .toggle { display: none; } } #search { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform: translate(0px, -100%) scale(0, 0); -ms-transform: translate(0px, -100%) scale(0, 0); transform: translate(0px, -100%) scale(0, 0); opacity: 0; display: none; } #search.open { -webkit-transform: translate(0px, 0px) scale(1, 1); -ms-transform: translate(0px, 0px) scale(1, 1); transform: translate(0px, 0px) scale(1, 1); opacity: 1; z-index: 106; display: block; } #search input[type="search"] { position: absolute; top: 50%; width: 100%; color: white; background: transparent; font-size: 60px; font-weight: 300; text-align: center; border: 0px; margin: 0px auto; margin-top: -51px; padding-left: 30px; padding-right: 30px; outline: none; } /* * 3.3 Head Section * ------------------ */ .head { padding-top: 55px; } @media screen and (max-width: 800px) { .head { font-size: .5em; word-break: break-all; } } .head .content { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .head .content img { width: 100%; height: auto; } .head .logo { width: 30%; } .head .head_img { display: block; width: 100%; } .head h1 { font-size: 5em; font-family: "Playfair Display", "Georgia", "Times New Roman", serif; font-weight: 700; text-transform: uppercase; letter-spacing: .4em; text-align: center; line-height: 2; } a .head h1, .toggle .head h1 { color: #eeeeec; } a:hover .head h1, .toggle:hover .head h1 { color: #38393a; } .head h2 { text-align: center; font-size: 2em; line-height: 1; margin-bottom: 40px; } /* * ---------------- * 4 Post Section * ---------------- */ /* * 4.1 Featured Section * ---------------------- */ .feat { width: 100%; } .feat .content { border-bottom: 1px solid #38393a; } .feat article .feattitle { content: ''; position: absolute; right: -10px; top: 30px; padding: 3px; font-size: .7em; color: #020202; text-transform: uppercase; background: #eeeeec; z-index: 2; } .feat article .feattitle:after { width: 0; height: 0; border-style: solid; border-color: #cacac4 transparent transparent transparent; border-width: 6.66667px 10px 0 0; content: ''; position: absolute; top: 100%; right: 0; } /* * 4.2 Index Blog Container with Sidebar * --------------------------------------- */ /* * 4.2.1 Content */ .blog_container .content:after { content: ""; display: table; clear: both; } .blog_container .main_container { width: 65%; float: left; } @media screen and (max-width: 900px) { .blog_container .main_container { width: 100%; } } /* * 4.2.2 Sidebar */ .sidebar { width: 30%; float: right; /* Responsive Off-Canvas Version */ } .sidebar .inner { padding-bottom: 55px; } .sidebar .toggle_link2 { display: none; } @media screen and (max-width: 900px) { .sidebar { width: 320px; height: 100%; position: fixed; overflow-y: auto; overflow-x: hidden; top: 0px; right: -320px; background: #020202; box-sizing: border-box; padding: 20px; -webkit-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); -webkit-transition: .3s all ease; transition: .3s all ease; z-index: 108; color: #FDFDFD; } .sidebar .toggle_link2 { display: block; position: absolute; top: 5px; right: 5px; } .sidebar.active { -webkit-transform: translate(-320px, 0px); -ms-transform: translate(-320px, 0px); transform: translate(-320px, 0px); -webkit-transition: .3s all ease; transition: .3s all ease; } } /* * 4.3 Full Layout * ----------------- */ .full .main_container { width: 100%; } .full .sidebar { display: none; } .full .toggle-main { display: none; } /* * 4.4 Pagination * ----------------- */ .pagination { display: block; position: relative; margin: 0px auto; font-size: 1.1em; width: 90%; max-width: 1300px; text-align: center; margin-bottom: 20px; } .pagination span, .pagination a, .pagination .toggle { display: inline-block; margin: 1px; padding: 5px 8px; font-family: "Playfair Display", "Georgia", "Times New Roman", serif; letter-spacing: 2px; text-transform: uppercase; color: #c3c2bf; } .pagination a, .pagination .toggle { border-top: 1px solid #eeeeec; border-bottom: 1px solid #eeeeec; } .pagination a:hover, .pagination .toggle:hover { color: #eeeeec; border-color: #0a0b13; } .pagination .current { color: #c3c2bf; border-top: 1px solid #38393a; border-bottom: 1px solid #38393a; } /* * 4.5 Article Styling * --------------------- */ article { position: relative; padding: 10px 0px; border-bottom: 1px solid #38393a; margin-bottom: 10px; } article:last-of-type { border-bottom: 0px solid transparent; } article header { padding: 35px 0px; text-align: center; } article footer { text-align: center; padding: 35px 0px; margin-top: 20px; border-top: 1px solid #38393a; border-bottom: 1px solid #38393a; letter-spacing: 2px; text-transform: uppercase; font-family: "Playfair Display", "Georgia", "Times New Roman", serif; font-size: .8em; } article .meta { position: relative; } article .meta:after { content: ''; position: absolute; top: 100%; height: 15px; border-bottom: 1px solid #38393a; width: 10%; left: 45%; } article .meta:before { content: ''; width: 5px; height: 5px; background: #050505; position: absolute; top: 160%; left: 50%; margin-top: -2.52538px; margin-left: -2.5px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); border-bottom: 1px solid #38393a; border-right: 1px solid #38393a; z-index: 2; } article .rm { text-align: center; padding: 10px 0px; font-family: "Playfair Display", "Georgia", "Times New Roman", serif; letter-spacing: 2px; } article .rm a, article .rm .toggle { padding: 5px 12px; text-transform: uppercase; border-top: 1px solid #c3c2bf; border-bottom: 1px solid #c3c2bf; background: #020202; border-radius: 0px; line-height: 2.8; color: #FDFDFD; } article .rm a:hover, article .rm .toggle:hover { border-color: #0a0b13; background: #050505; color: #FDFDFD; } article .post { text-align: justify; } article img { max-width: 100%; padding: 10px 0px; } article ol, article ul { margin: 1em 0; padding: 0 0 0 40px; } article ol li, article ul li { list-style-type: decimal; } article ul li { list-style-type: circle; } /* * 4.6 Authorbox * --------------- */ .authorbox { positon: relative; box-sizing: border-box; padding: 30px; margin-bottom: 30px; border: 1px solid #38393a; background: #050505; } .authorbox .author_info { padding-bottom: 10px; position: relative; background: #050505; color: #cccccc; border-bottom: 1px solid #38393a; } .authorbox .author_info:after { content: ''; width: 10px; height: 10px; background: #050505; position: absolute; top: 100%; left: 50%; margin-top: -5.05076px; margin-left: -5px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); border-bottom: 1px solid #38393a; border-right: 1px solid #38393a; } .authorbox .author_info .author_img { width: 130px; height: 130px; display: inline-block; vertical-align: middle; position: relative; } .authorbox .author_info .author_img img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; border-radius: 50em; } .authorbox .author_info .author_name { width: calc(100% - 160px); display: inline-block; vertical-align: middle; box-sizing: border-box; padding-left: 10px; } .authorbox .on_the_web, .authorbox .author_desc { padding-top: 10px; width: 100%; box-sizing: border-box; } .authorbox .on_the_web > div, .authorbox .author_desc > div { padding-top: 10px; } .authorbox .author_desc + .on_the_web, .authorbox .author_desc + .author_desc { margin-top: 10px; } .authorbox .website a, .authorbox .website .toggle { font-weight: bold; } .authorbox .social_media_links { line-height: 2.5; } .authorbox .social_media_links a, .authorbox .social_media_links .toggle { margin-right: 5px; -webkit-transition: 0.3s all; transition: 0.3s all; } .authorbox .social_media_links a:last-of-type, .authorbox .social_media_links .toggle:last-of-type { margin-right: 0px; } .authorbox .social_media_links a i, .authorbox .social_media_links .toggle i { padding: 0.55em 0.4em; background-color: #e8e8e6; color: #121212; border-radius: 50%; -webkit-transition: 0.3s all; transition: 0.3s all; } .authorbox .social_media_links a i:hover, .authorbox .social_media_links .toggle i:hover { background-color: #eeeeec; color: #121212; -webkit-transition: 0.3s all; transition: 0.3s all; } .author_website_label, .social_links_label { font-style: italic; color: #e6e6e6; } /* * 4.7 Comment Styling * --------------------- */ .comments h2 { font-family: "Playfair Display", "Georgia", "Times New Roman", serif; font-weight: 700; letter-spacing: 3px; line-height: 2; text-align: center; } .comments .comments-list li { border: 1px solid #38393a; margin: 10px 0px; } .comments .comments-list a, .comments .comments-list .toggle { padding: 0px 2px; border-bottom: 1px solid transparent; } .comments .comments-list a:hover, .comments .comments-list .toggle:hover { color: inherit; border-bottom: 1px solid currentColor; } .comments .comments-list .comment-author, .comments .comments-list .comment-meta, .comments .comments-list p, .comments .comments-list .reply { padding: 20px; box-sizing: border-box; } .comments .comments-list .comment-author { width: 100%; border-bottom: 1px solid #38393a; font-size: 1.2em; font-weight: 400; text-transform: uppercase; position: relative; background: #050505; color: #ededed; border-bottom: 1px solid #38393a; } .comments .comments-list .comment-author:after { content: ''; width: 10px; height: 10px; background: #050505; position: absolute; top: 100%; left: 50%; margin-top: -5.05076px; margin-left: -5px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); border-bottom: 1px solid #38393a; border-right: 1px solid #38393a; } .comments .comments-list .comment-author .fn, .comments .comments-list .comment-author .says { display: inline-block; vertical-align: middle; } .comments .comments-list .comment-author img { border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 20px; } .comments .comments-list .comment-meta { font-size: .8em; padding: 5px; } .comments .comments-list .children { width: 90%; margin-left: 10%; } .comments .comments-list .children li { border: none; border-left: 1px solid #38393a; } .comments .comments-list .children li .comment-author { border: none; } .comments .comments-list .children li .comment-author:after { display: none; } .comment-respond h3 { text-align: center; margin-bottom: 20px; position: relative; background: #050505; color: #ededed; border-bottom: 1px solid #38393a; } .comment-respond h3:after { content: ''; width: 10px; height: 10px; background: #050505; position: absolute; top: 100%; left: 50%; margin-top: -5.05076px; margin-left: -5px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); border-bottom: 1px solid #38393a; border-right: 1px solid #38393a; } .comment-respond .comment-notes { font-style: italic; margin-bottom: 20px; } .comment-respond .comment-form-comment { position: relative; } .comment-respond .comment-form-comment textarea { font-size: 18px; padding: 10px 10px 10px 5px; display: block; box-sizing: border-box; width: 100%; border: none; border-bottom: 1px solid #38393a; margin-top: 20px; } .comment-respond .comment-form-comment label { font-size: 14px; font-weight: normal; position: absolute; pointer-events: none; left: 5px; top: -20px; -webkit-transition: 0.2s ease all; transition: 0.2s ease all; } .comment-respond .form-submit { text-align: center; margin: 20px 0px; } .comment-respond .form-submit input { -webkit-transition: .3s all ease; transition: .3s all ease; border: none; text-align: center; padding: 10px 0px; font-family: "Playfair Display", "Georgia", "Times New Roman", serif; letter-spacing: 2px; padding: 5px 12px; text-transform: uppercase; border-top: 1px solid #c3c2bf; border-bottom: 1px solid #c3c2bf; background: #020202; border-radius: 0px; line-height: 2.8; color: #FDFDFD; } .comment-respond .form-submit input:hover { border-color: #0a0b13; background: #050505; color: #FDFDFD; } .comment-respond .form-submit input:hover { cursor: pointer; } .comment-respond .form-allowed-tags { font-size: .8em; font-family: monospace; } .group { position: relative; margin-bottom: 20px; } .group input { font-size: 18px; padding: 10px 10px 10px 5px; display: block; box-sizing: border-box; width: 100%; border: none; border-bottom: 1px solid #38393a; } .group input:focus { outline: none; } .group input:focus ~ .bar:before, .group input:focus ~ .bar:after { width: 50%; } .group input:valid ~ label, .group input:focus ~ label { top: -20px; font-size: 14px; } .group label { font-size: 18px; font-weight: normal; position: absolute; pointer-events: none; left: 5px; top: 10px; -webkit-transition: 0.2s ease all; transition: 0.2s ease all; } .group .bar { position: relative; display: block; width: 100%; } .group .bar:before, .group .bar:after { content: ''; height: 2px; width: 0; bottom: 1px; position: absolute; background: #eeeeec; -webkit-transition: 0.2s ease all; transition: 0.2s ease all; } .group .bar:before { left: 50%; } .group .bar:after { right: 50%; } /* * ---------- * 5 Footer * ---------- */ footer { width: 100%; } /* * 5.1 Widgetized Footer * ----------------------- */ .foot1 .content { border-top: 1px solid #38393a; } .foot1 .widgetized { width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .foot1 .widgetized > div { padding: 20px; box-sizing: border-box; } .foot1 .widgetized .widget { border: 0px solid transparent; } .foot1 .one_widget > div { width: 100%; } .foot1 .two_widget > div { width: 50%; } @media screen and (max-width: 550px) { .foot1 .two_widget > div { width: 100%; } } .foot1 .three_widget > div { width: 33.33333%; } @media screen and (max-width: 880px) { .foot1 .three_widget > div { width: 50%; } } @media screen and (max-width: 550px) { .foot1 .three_widget > div { width: 100%; } } .foot1 .four_widget > div { width: 25%; } @media screen and (max-width: 995px) { .foot1 .four_widget > div { width: 33.33333%; } } @media screen and (max-width: 880px) { .foot1 .four_widget > div { width: 50%; } } @media screen and (max-width: 550px) { .foot1 .four_widget > div { width: 100%; } } /* * 5.2 Footer Menu Section * ------------------------- */ .foot2 { background: #1c1c1c; padding: 10px 0px; font-family: "Playfair Display", "Georgia", "Times New Roman", serif; color: #ededed; } .foot2 .content { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 1100px) { .foot2 .content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; text-align: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } .foot2 a, .foot2 .toggle { font-weight: 400; text-transform: uppercase; letter-spacing: 2px; color: #c3c2bf; } .foot2 a:hover, .foot2 .toggle:hover { color: #f4f4f4; } .foot2 .backtotop { padding: 0px 2px; border-bottom: 1px solid transparent; } .foot2 .backtotop:hover { color: inherit; border-bottom: 1px solid currentColor; } .foot2 .navline { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 20px 0px; } .foot2 .navline nav a, .foot2 .navline nav .toggle { padding: 10px; } @media screen and (max-width: 1100px) { .foot2 .navline nav a, .foot2 .navline nav .toggle { display: block; } } @media screen and (min-width: 1101px) { .foot2 .navline nav a:first-of-type, .foot2 .navline nav .toggle:first-of-type { padding-left: 0px; } } /* * 5.3 Social Media and Credits * ------------------------------ */ .foot3, .notice { background: #eeeeec; color: #020202; padding: 10px 0px; } .foot3 a, .foot3 .toggle, .notice a, .notice .toggle { color: #1c1c1c; } .foot3 a:hover, .foot3 .toggle:hover, .notice a:hover, .notice .toggle:hover { color: #020202; } .foot3 .content, .notice .content { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .foot3 .smline a, .foot3 .smline .toggle, .notice .smline a, .notice .smline .toggle { padding: 0px 10px; display: inline-block; margin: 10px 0; } .foot3 .smline .fa, .notice .smline .fa { font-size: 1.2em; background: #020202; padding: 10px 7px; border-radius: 50%; color: #eeeeec; -webkit-transition: .3s all; transition: .3s all; } .foot3 .smline .fa:hover, .notice .smline .fa:hover { color: #020202; background: #eeeeec; } .notice { text-align: center; font-size: .8em; border-top: 1px solid rgba(17, 17, 19, 0.1); } /* * --------------------------- * 6 Single and Static Pages * --------------------------- */ .single article .meta { position: relative; } .single article .meta:after { width: 40%; left: 30%; } .single article footer p { margin: 15px 0px; } .single .page-nav { border-bottom: 1px solid #38393a; padding-bottom: 20px; margin-bottom: 20px; } .single .page-nav p { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-weight: 400; text-transform: uppercase; } .page article .meta { position: relative; } .page article .meta:after { width: 20%; left: 40%; } /* * ----------------- * 7 Widget Styles * ----------------- */ .widget { width: 100%; box-sizing: border-box; text-align: left; border-bottom: 1px solid #C7C6C5; margin-top: 30px; border: 1px solid #38393a; } .widget:first-of-type { margin-top: 50px; } .widget h2 { text-align: center; margin-bottom: 10px; position: relative; background: #050505; color: #ededed; border-bottom: 1px solid #38393a; } .widget h2:after { content: ''; width: 10px; height: 10px; background: #050505; position: absolute; top: 100%; left: 50%; margin-top: -5.05076px; margin-left: -5px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); border-bottom: 1px solid #38393a; border-right: 1px solid #38393a; } .widget p, .widget div, .widget iframe, .widget ul, .widget ol, .widget article ul, article .widget ul { padding: 10px; } .widget_search { padding: 0px; } .widget_search .group { margin-bottom: -1px; } /* * ---------------------------------- * 8 P.S. (if anything left to add) * ---------------------------------- */