/* ================================================================================================ Table of Content ================================================================================================ 01. Typography 02. Header 03. Navigation (Main) 04. Navigation (Social) 05. Slider 06. Content (Single Post and Page) 07. Content (Archives) 08. Sidebar 09. Footer 10. Comments 11. Buttons 12. Tables 13. WordPress-specific styles 14. Responsiveness (Tablet Large 64em (1024px)) 15. Responsiveness (Mobile Large 37.50em (600px)) 16. Responsiveness (Mobile Small 30em (480px)) 17. Responsiveness (Hamburger menu) ================================================================================================ */ @font-face { font-family: "Arvo"; src: url("../fonts/Arvo-Regular.ttf"); } @font-face { font-family: "Arvo"; src: url("../fonts/Arvo-Regular.ttf"); font-weight: normal; } @font-face { font-family: "Arvo"; src: url("../fonts/Arvo-Bold.ttf"); font-weight: bold; } @font-face { font-family: "Roboto"; src: url("../fonts/Roboto-Light.ttf"); } /* =========================================================================================== 01. Typography =========================================================================================== */ a { color: #e21330; line-height: inherit; text-decoration: none; } a:hover, a:focus { color: #160005; } h1, h2, h3, h4, h5, h6 { text-overflow: ellipsis; max-width: 100%; overflow: hidden; } .panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6 { line-height: 1; margin-bottom: 0.625rem; font-family: "Arvo", serif; color: #e21330; text-transform: uppercase; font-weight: normal; } /* =========================================================================================== 02. Header =========================================================================================== */ header { border-bottom: solid 5px #e21330; } header div.slogan { margin-top: 1em; } header div.slogan .title, header div.slogan .description { font-weight: 300; } header div.slogan .title { font-size: 5.8em; color: #FFF; text-transform: uppercase; font-family: "Arvo", serif; text-align: center; } header div.slogan .title { font-size: 5.8em; margin-top: 0; color: #FFF; text-transform: uppercase; font-family: "Arvo", serif; text-align: center; } header div.slogan .typed-strings em { font-style: normal; font-family: "Arvo", serif; } header div.slogan .typed-strings { color: #160005; font-family: "Roboto", Helvetica, sans-serif; text-align: center; padding-bottom: 10px; } header div.slogan .strings { display: none; } header div.logo { padding: 0px; padding-top: 10px; } header div.slogan a { color: #FFF; } header div.slogan a:hover { color: #160005; } footer#footer { background: #e21330; } header .overlay { background: rgba(226, 19, 48, 0.9); height: 100%; width: 100%; top: 0; left: 0; padding: 0; padding-top: 15px; } header .overlay .site-title a, header .overlay .site-description { font-family: "Arvo", serif; text-align: center; color: #FFF; } header .overlay .site-title a:hover { color: #160005; } header .overlay .site-title { line-height: 0.8em; margin-top: 20px; text-transform: uppercase; } header .overlay .site-description { font-size: 1.3em; } header { display: block; position: relative; background-repeat: no-repeat; background-position: center bottom; /* Create the parallax scrolling effect */ background-attachment: fixed; background-size: cover; } /* =========================================================================================== 03. Navigation (Main) =========================================================================================== */ .top-bar { background: none; z-index: 99; } .top-bar.expanded { overflow: visible; min-height: 100%; } .top-bar-section li:not(.has-form) a:not(.button) { font-size: 1.1em; } .single-menu { display: flex; flex-direction: column; align-items: center; padding: 20px; } @media only screen and (max-width: 60em) { .top-bar-section li:not(.has-form) a:not(.button) { font-size: 1em; } .top-bar-section li:not(.has-form) a:not(.button) { line-height: 2.8125rem; padding: 5px 20px; } } .top-bar-section .dropdown li:not(.has-form) a:not(.button) { font-size: 1em; } .top-bar-section li a:hover { background: #FFF; } .top-bar-section { display: flex; } .top-bar-section li.icon { display: none; } .nav-wrapper { margin-top: 10px; } .nav-wrapper nav .home-menu { display: flex; justify-content: space-evenly; } .nav-wrapper nav .home-menu .logo { margin-right: 20px; } .nav-wrapper nav .home-menu .logo img { max-height: 48px; width: auto; padding: 0; } .top-bar .toggle-topbar.menu-icon { top: 50%; } .top-bar ul li { background: #FFF; /*border-bottom: dotted 1px $link-color;*/ } .top-bar .toggle-topbar.menu-icon { border-bottom: none; } .top-bar .toggle-topbar.menu-icon a { color: #e21330; padding: 0 2.5rem 0 0.9375rem; position: relative; font-size: 1.2em; font-family: "Roboto", Helvetica, sans-serif; } .top-bar .toggle-topbar.menu-icon a span::after { box-shadow: 0 0 0 1px #e21330, 0 7px 0 1px #e21330, 0 14px 0 1px #e21330; } .top-bar-section ul li { background: none; } .top-bar-section ul li::marker { content: none; } .nav-wrapper nav ul li a { font-family: "Arvo", serif; text-transform: uppercase; } .nav-wrapper nav #home-link i { font-size: 1.8em; } .top-bar-section .dropdown li a { font-size: 0.7em; } .top-bar-section .dropdown { display: block; height: auto; margin: 0; padding: 0; width: 100%; } .nav-wrapper nav li.current-menu-item, .nav-wrapper nav li.current-menu-ancestor, .nav-wrapper nav li.current-menu-parent { background: #e21330; } .nav-wrapper nav li.current-menu-item a, .nav-wrapper nav li.current-menu-ancestor a, .nav-wrapper nav li.current-menu-parent a { color: #FFF; } header div.logo { margin: 0 auto; float: none; } .nav-wrapper ul.right, .nav-wrapper ul.left { float: none !important; } .nav-wrapper nav { border: none; } .top-bar ul.title-area li { background: #000; } .top-bar ul li { background: #FFF; border-bottom: dotted 1px #e21330; } .top-bar-section .dropdown li.title.back h5 a::before { font-family: "FontAwesome"; content: "\f053"; font-size: 0.8em; border: none; color: #e21330; } .top-bar-section .dropdown li.title.back h5 a { color: #FFF; } .top-bar-section .dropdown li.title h5 a, .top-bar-section .dropdown li.parent-link a { color: #e21330; display: block; } .top-bar-section .has-dropdown > a::after { font-family: "FontAwesome"; content: "\f054"; font-size: 0.8em; border: none; padding-right: 10px; height: 1em; line-height: 1em; } .top-bar-section ul li:hover:not(.has-form) > a { color: #000; background: #FFF; } .top-bar-section ul li > a { padding-top: 5px; padding-bottom: 5px; font-size: 0.7em; } nav ul.languages li.oblique-border { display: none; } /* =========================================================================================== 04. Navigation (Social) =========================================================================================== */ .socials { margin-top: 0; } .socials ul { margin: 0; display: flex; padding-bottom: 5px; } .socials ul li { text-align: center; list-style: none; margin-left: 10px; } .socials a { color: #FFF; font-size: 20px; width: 36px; height: 36px; -moz-border-radius: 18px; -webkit-border-radius: 18px; border-radius: 18px; border: solid 1px #FFF; display: block; } .socials a:hover { color: #160005; font-size: 20px; text-align: center; border: solid 1px #160005; } .socials .screen-reader-text { position: absolute; top: -9999em; left: -9999em; } header .socials a { color: #e21330; font-size: 20px; width: 36px; height: 36px; -moz-border-radius: 18px; -webkit-border-radius: 18px; border-radius: 18px; border: solid 1px #e21330; display: block; } .socials a:hover { color: #160005; font-size: 20px; text-align: center; border: solid 1px #160005; } .socials li a::before { content: "\f408"; display: inline-block; padding: 4px; font-family: "FontAwesome"; font-size: 18px; vertical-align: top; -webkit-font-smoothing: antialiased; } .socials li a[href*="wordpress.com"]::before { content: "\f205"; } .socials li a[href*="facebook.com"]::before { content: "\f09a"; } .socials li a[href*="twitter.com"]::before { content: "\f099"; } .socials li a[href*="dribbble.com"]::before { content: "\f17d"; } .socials li a[href*="plus.google.com"]::before { content: "\f0d5"; } .socials li a[href*="pinterest.com"]::before { content: "\f231"; } .socials li a[href*="github.com"]::before { content: "\f09b"; } .socials li a[href*="tumblr.com"]::before { content: "\f174"; } .socials li a[href*="youtube.com"]::before { content: "\f16a"; } .socials li a[href*="flickr.com"]::before { content: "\f16e"; } .socials li a[href*="vimeo.com"]::before { content: "\f27d"; } .socials li a[href*="instagram.com"]::before { content: "\f16d"; } .socials li a[href*="codepen.io"]::before { content: "\f1cb"; } .socials li a[href*="linkedin.com"]::before { content: "\f0e1"; } /* =========================================================================================== 05. Slider =========================================================================================== */ .carousel { height: 70vh; position: relative; overflow: hidden; background: #000; } .carousel .carousel-inner .carousel-item { height: 100%; width: 100%; transition: 1s all; position: absolute; opacity: 1; } .carousel .carousel-inner .carousel-item:not(.active) { opacity: 0; } .carousel .carousel-inner .carousel-caption { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); padding: 15px 40px; text-align: left; } .carousel .carousel-inner .carousel-caption .section-title { padding-left: 0px; } .carousel .carousel-inner .carousel-caption h2 { color: #e21330; font-weight: bold; font-size: 45px; margin-top: 5%; } .carousel .carousel-inner .carousel-caption p { font-size: 22px; font-weight: 300; width: 65%; } .carousel .carousel-inner .carousel-caption .excerpt { color: white; } .carousel .carousel-inner .carousel-caption a.simple-btn { display: inline-block; padding: 13px 20px; border-radius: 50px; color: #fff; font-size: 17px; font-weight: 500; transition: all 0.3s; background-color: #e21330; position: relative; overflow: hidden; text-decoration: none; z-index: 1; margin-left: 0; } .carousel .carousel-inner .carousel-caption a.simple-btn:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: -2; } .carousel .carousel-inner .carousel-caption a.simple-btn:before { content: ""; position: absolute; bottom: 0; left: 0; width: 0%; height: 100%; transition: all 0.3s; z-index: -1; } .carousel .carousel-inner .carousel-caption a.simple-btn:hover { color: #FFF; background-color: #160005; } .carousel .carousel-inner .carousel-caption a.simple-btn:hover:before { width: 100%; } .carousel:hover .carousel-control-prev, .carousel:hover .carousel-control-next { opacity: 1; } .carousel-control-prev, .carousel-control-next { position: absolute; height: 50px; width: 50px; display: flex; justify-content: center; align-items: center; top: 50%; transform: translateY(-50%); padding-bottom: 2px; border-radius: 50%; border: 3px solid #fcbecf; opacity: 1; transition: background-color 0.2s; z-index: 111; } .carousel-control-next:hover, .carousel-control-prev:hover { background-color: #fcbecf; } .carousel-control-prev { left: 75%; } .carousel-control-next { right: 14%; } .carousel-control-prev-icon:before { content: "\f053"; } .carousel-control-next-icon:before { content: "\f054"; } .carousel-control-prev-icon, .carousel-control-next-icon { background-image: none; font-family: "FontAwesome"; color: #fff; transition: opacity 300ms ease-out; } /* =========================================================================================== 06. Content (Single Post and Page) =========================================================================================== */ .main-column { padding-left: 0; } .single-row { padding: 0px; } .single-row article .panel { padding-top: 15px; padding-bottom: 15px; } .single-row article .panel, .archive-row article .panel { border: none; margin: 0; padding: 15px; background: none; } .single-row article .panel .post-item-date { text-align: center; } .single-row article .panel .post-item-date p { clear: right; text-transform: uppercase; font-size: 1em; margin-bottom: 0.4em; } .single-row article .panel .post-item-date .post-item-day { color: #000; font-weight: bold; } .single-row article .panel .post-item-category { padding-top: 5px; border-top: solid 1px; } .single-row .post-categories, .single-row .post-tags { margin-right: 20px; margin-bottom: 20px; } .single-row article.post-item iframe { min-width: 100%; } .single-row article.post-item { padding: 15px; /* background: rgba(245, 245, 245, 0.8) !important; */ line-height: 1.4em; font-size: 17px; width: 100%; background: #FFF; /* padding-top:50px; */ text-align: left; -webkit-box-shadow: 0px 0px 2px 1px #c9c9c9; -moz-box-shadow: 0px 0px 2px 1px #c9c9c9; box-shadow: 0px 0px 2px 1px #c9c9c9; } .single-row article .post-item-image { position: relative; } .single-row article .post-item-image img { min-width: 100%; } .single-row article.post-item .wp-caption { background: #efefef; color: #000; font-style: italic; } .single-row article.post-item .wp-caption-text { padding: 5px; text-align: center; font-size: 0.7em; } .single-row article.post-item ul, .single-row article.post-item ul { list-style: none; } .single-row article.post-item ol { list-style: none; counter-reset: li; } .single-row article.post-item .post-content ol li:before { content: counter(li) "."; color: #e21330; display: inline-block; width: 1em; font-weight: bold; padding-right: 25px; } .single-row article.post-item ol li { counter-increment: li; } .single-row article.post-item .post-content ul li:before { font-family: "FontAwesome"; content: "\f054"; color: #e21330; padding-right: 1em; font-size: 0.7em; height: 10px; line-height: 10px; position: relative; bottom: 3px; } .single-row article.post-item blockquote { background: #efefef; border-left: 5px solid #e21330; padding: 5px 10px 5px 20px; margin-bottom: 10px; } .single-row article .category-title-line { height: 2px; } .single-row article .post-item-date { color: #FFF; text-align: center; font-size: 0.8rem; position: absolute; top: 80px; right: -5px; background: #e21330; text-transform: uppercase; padding: 5px 5px 5px 10px; webkit-box-shadow: 0px 0px 2px 1px #e21330; -moz-box-shadow: 0px 0px 2px 1px #e21330; box-shadow: 0px 0px 2px 1px #e21330; } .single-row article.post-item blockquote p { margin: 7px 0; } .single-row article.post-item blockquote blockquote { background: #fff; } .single-row article.post-item .post-item-author { padding: 20px 10px; background: #1d1d1b; } .single-row .post-item-author p, .single-row .post-item-author { color: white; font-size: 0.9em; } .single-row .post-item-author img { height: 120px; width: 120px; max-width: 100%; height: auto; border-radius: 60px; -moz-border-radius: 60px; -webkit-border-radius: 60px; } .single-row article button:hover, .single-row article .panel .button:focus, .single-row article .panel .button:hover, .single-row article .panel .button:focus, .single-row .widget .button:hover { background-color: #000; color: #FFFFFF; } .single-row article.post-item .bottom-line { border-bottom: 10px solid #e21330; margin-bottom: 10px; } .single-row article.post-item .post-item-title { font-family: "Arvo", serif, Helvetica, Roboto, Arial, sans-serif; text-transform: uppercase; line-height: 2.5rem; padding-bottom: 5px; text-align: left; } .breadcrumbs { display: block; list-style: none; margin-left: 0; overflow: hidden; padding: 0.5625rem 0.875rem 0.5625rem; background-color: transparent; border: none; } .single-row .breadcrumbs { /* margin-bottom:15px;*/ padding: 5px 20px; } .single-row .post-item .breadcrumbs { font-weight: bold; font-size: 0.9em; padding: 0; } .breadcrumbs > * { color: #000; font-size: 0.7em; } .breadcrumbs > * { line-height: 1.2rem; } .breadcrumbs a { color: #e21330; } .breadcrumbs a:hover { color: #e21330; } article.post-item .post-item-title { font-family: "Arvo", serif, Helvetica, Roboto, Arial, sans-serif; text-transform: uppercase; line-height: 1.3rem; } article .post-item-date { color: #FFF; text-align: center; font-size: 0.8rem; position: absolute; top: 40px; right: 0; background: #e21330; text-transform: uppercase; padding: 5px; z-index: 100; } article .post-item-date span { display: block; } article .post-item-date .day { font-weight: bold; font-size: 2.5em; } article .post-item-date .month-year { font-size: 0.7em; } article .panel { border: none; margin-bottom: 1.25rem; padding: 1.25rem; padding-bottom: 0px; position: relative; } /* =========================================================================================== 07. Content (Archives) =========================================================================================== */ .main-row { padding: 0px; margin-top: 20px; } .category-row .category-title-line { margin-bottom: 15px; } .category-row.archive-row .category-title, .category-row.archive-row .category-title-line, .not-found, .single-row .category-title, .single-row .category-title-line { text-align: left; } .category-row .post-list { display: flex; flex-wrap: wrap; } .category-row article.column-third { width: 31%; margin: 1%; } .category-row article.column-half { width: 48%; margin: 1%; } .category-row .category-header { margin-bottom: 10px; } .category-title { font-family: "Roboto", Helvetica, sans-serif; color: #e21330; text-transform: uppercase; padding: 0px; text-align: center; } .category-title-line { background: #e21330; height: 1px; } article.columns + article.columns:last-child { float: left; } .category-row article { padding-bottom: 0px; margin-bottom: 1.35rem; } .category-row article .panel { border: none; margin-bottom: 0; padding: 0.9rem; padding-bottom: 0px; padding-top: 0.2rem; background: none; } .category-row .post-item-caption { height: 100%; background: #f2f2f2; webkit-box-shadow: 0px 0px 2px 1px #c9c9c9; -moz-box-shadow: 0px 0px 2px 1px #c9c9c9; box-shadow: 0px 0px 2px 1px #c9c9c9; } .category-row article .post-item-image { overflow: hidden; } .category-row article .post-item-image img { min-width: 100%; } .category-row article .panel p { font-family: inherit; font-size: 1rem; font-weight: normal; line-height: 1.3; margin-bottom: 0.9rem; text-rendering: optimizeLegibility; } .category-row .category-link-wrapper { display: block; } article .post-item-date.wrap { color: gray; text-align: center; font-size: 0.75rem; position: relative; top: 0px; right: 0px; background: none; text-transform: uppercase; padding: 0; } .category-row .post-list, .main-column { padding-right: 0; } .category-row article, .sy-controls li a:after { top: 50%; } p { font-size: 0.9rem; line-height: 1.4; margin-bottom: 1.25rem; text-rendering: optimizeLegibility; } .category-row article .post-item-image img { width: 100%; max-width: 100%; height: auto; } .category-row article .post-item-image { max-height: 200px; } .category-row article .panel p { font-family: inherit; font-size: 0.9rem; font-weight: normal; line-height: 1.3; margin-bottom: 0.6rem; text-rendering: optimizeLegibility; } /* =========================================================================================== 08. Sidebar =========================================================================================== */ aside .widget .button.small { padding-left: 5px; padding-right: 5px; width: 100%; font-size: 1em; padding: 0.55em; } aside .widget { max-width: 100%; margin-bottom: 15px; border: solid 1px #d8d8d8; } aside .widget h2 { padding: 5px 10px; color: #e21330; } aside .widget ul, .widget ol { margin: 15px 10px; } aside .row.widget { margin-bottom: 20px; border: solid 1px #d8d8d8; } aside .widget-title { color: #FFF; font-family: "Arvo", serif; text-transform: uppercase; display: block; margin-bottom: 15px; background: #fcbecf; } aside .widget_search .widget-title { padding: 0px; margin-bottom: 0px; margin-top: 0px; background: none; } aside .widget_search { background: #e21330; padding: 15px; border: solid 1px #e21330; } aside .widget_search button { background: #fa8dab; width: 100%; margin: 0 !important; font-size: 0.9em !important; padding: 10px 5px !important; } aside .widget_search label { color: #FFF; } aside .wp-block-search__inside-wrapper { display: block; } aside .wp-block-search__inside-wrapper button:hover { background: #160005; } aside .wp-block-latest-comments { padding: 10px; } aside .widget_search button { font-size: 1.4em; } aside .widget .button.small { padding: 0.6rem 0.5rem 0.7rem 0.5rem; font-size: 0.8125rem; } aside .widget-title { padding: 5px 10px 0px 15px; margin-bottom: 0px; margin-top: 0px; } aside .widget-title .fa { font-size: 0.85em; height: 22px; line-height: 22px; padding-right: 10px; display: block; float: left; } aside .twitter-feed .widget-title { background: #35a0d8; } aside .widget.twitter-feed { max-height: 300px; overflow: hidden; } aside .facebook-box .widget-title { background: #3e5e97; } aside .facebook-box iframe { width: 100%; } aside .recent-posts-box ul { padding: 0; margin: 0; padding: 15px; } aside .widget ul li { list-style: none; padding-bottom: 10px; margin-bottom: 5px; border-bottom: dashed 1px #d8d8d8; } aside .widget ul li:last-child { border-bottom: none; } aside .recent-posts-box ul li:last-child { border-bottom: none; } .widget .button.small { padding: 0.64rem; font-size: 0.8125rem; width: 100%; } .widget ul { list-style: none; margin: 0; padding: 0; } .widget ul li a:before { font-family: "FontAwesome"; content: "\f054"; color: #e21330; padding-right: 10px; } .widget ul li a { font-size: 0.9em; color: #160005; } footer .widget ul li a { font-size: 0.9em; color: #FFF; } aside .recent-posts-box ul li a { font-size: 0.8em; } .widget ul li a:hover { color: #e21330; } /* =========================================================================================== 09. Footer =========================================================================================== */ .nav-links { display: flex; justify-content: center; } .nav-links .page-numbers { margin: 5px; } footer#footer { padding-bottom: 25px; color: #FFF; } footer .copyright { font-size: 0.9em; } footer .copyright a { color: #160005; } footer .copyright a:hover { color: #FFF; } footer .breadcrumbs { display: block; list-style: none; margin-left: 0; overflow: hidden; padding: 0.5625rem 0.875rem 0.5625rem; background-color: transparent; border: none; } footer .breadcrumbs li a, footer .breadcrumbs li { color: #FFF; } footer .breadcrumbs li a:hover { color: #000; } footer .breadcrumbs > *::before { color: #000; } footer .footer-bar { margin-bottom: 25px; background-image: url("../img/bright-squares.png"); background-blend-mode: normal; padding-top: 20px; padding-bottom: 60px; margin-top: 20px; background-attachment: fixed; } footer .footer-bar form { max-width: 100%; overflow: hidden; } footer .footer-bar .widget-title { color: #FFF; } footer .footer-bar { margin-top: 20px; background-color: #160005; } footer .footer-bar .widget-title { font-family: "Arvo", serif; text-transform: uppercase; border-bottom: solid 1px; padding-bottom: 20px; display: block; margin-bottom: 15px; } footer .back-to-top-wrapper { position: relative; } footer a.back-to-top { width: 60px; height: 60px; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; color: #FFF; background: #e21330; position: fixed; text-align: center; line-height: 60px; right: 4%; bottom: 30%; font-size: 2em; } footer a.back-to-top:hover { color: #e21330; background: #fff; border: solid 1px #e21330; } footer a#back-to-top { opacity: 1; z-index: 999; } footer .socials a:hover { color: #160005; border: solid 1px #160005; } /* =========================================================================================== 10. Comments =========================================================================================== */ .comment-list { list-style: none; counter-increment: none; } .comment-content, .widget input[type=submit] { max-width: 120px; } .comment-list, .comment-list .vcard .fn, .comment-content, .comment-content p { font-size: 0.85rem; } .comment-list .vcard { margin: 0 0 0.5rem; width: 100%; } #comments label { display: inline; } #comments span.required { color: crimson; } ul.comment-list { list-style: none; } .comment-list > li.comment { -moz-border-radius: 3px; border-radius: 3px; margin: 0 0 0.5em; position: relative; } /* =========================================================================================== 11. Buttons =========================================================================================== */ .button, button { background-color: #e21330; } article button:hover, article .panel .button:focus, article .panel .button:hover, article .panel .button:focus, .widget .button:hover { background-color: #160005; color: #FFFFFF; } article .panel .button { border-radius: 5px; border-style: solid; border-width: 0; cursor: pointer; font-family: "Roboto", Helvetica, sans-serif, Helvetica, Arial, sans-serif; font-weight: normal; line-height: normal; margin: 0 0 0.8rem; position: relative; text-align: center; text-decoration: none; display: inline-block; padding: 0.5rem 1.4rem; font-size: 0.8rem; border-color: "Roboto", Helvetica, sans-serif; color: #FFFFFF; text-transform: uppercase; transition: background-color 300ms ease-out; } /* =========================================================================================== 12. Tables =========================================================================================== */ table, th, td { border: 1px solid #fcbecf; } table { width: 100%; } table thead tr th { background-color: #e21330; color: white; text-transform: uppercase; font-family: "Arvo", serif; } /* =========================================================================================== 13. WordPress-specific styles =========================================================================================== */ .aligncenter, div.aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignleft { float: left; } .alignright { float: right; } img.alignleft { margin: 3px 20px 10px 0; } img.alignright { margin: 3px 0 10px 20px; } .post-content .gallery:after { content: ""; display: table; clear: both; } img.aligncenter, div.aligncenter, figure.aligncenter { display: block; margin: 1em auto; } img.alignright, div.alignright, figure.alignright { float: right; margin: 1em 0 1em 2em; } img.alignleft, div.alignleft, figure.alignleft, img.wp-post-image.attachment-thumb { float: left; margin: 1em 1em 2em 0; } figure { max-width: 100%; height: auto; margin: 1em 0; } p img.alignright, p img.alignleft { margin-top: 0; } .gallery figure img { max-width: 100%; height: auto; margin: 0 auto; display: block; } .gallery figure { float: left; margin: 0 2% 1em 0; } .gallery.gallery-columns-1 figure { width: 100%; margin: 0 0 1em 0; float: none; } .post-content .gallery.gallery-columns-3 figure { width: 32%; } .gallery.gallery-columns-3 figure:nth-of-type(3n+3) { margin-right: 0; } .gallery.gallery-columns-3 figure:nth-of-type(3n+4) { clear: left; } .gallery.gallery-columns-2 figure { width: 49%; } .gallery.gallery-columns-2 figure:nth-of-type(even) { margin-right: 0; } .gallery.gallery-columns-2 figure:nth-of-type(odd) { clear: left; } .gallery.gallery-columns-4 figure { width: 23.25%; } .gallery.gallery-columns-4 figure:nth-of-type(4n+4) { margin-right: 0; } .gallery.gallery-columns-4 figure:nth-of-type(4n+5) { clear: left; } .gallery.gallery-columns-5 figure { width: 18%; } .gallery.gallery-columns-5 figure:nth-of-type(5n+5) { margin-right: 0; } .gallery.gallery-columns-5 figure:nth-of-type(5n+6) { clear: left; } .gallery.gallery-columns-6 figure { width: 14.2%; } .gallery.gallery-columns-6 figure:nth-of-type(6n+6) { margin-right: 0; } .gallery.gallery-columns-6 figure:nth-of-type(6n+7) { clear: left; } .gallery.gallery-columns-7 figure { width: 12%; } .gallery.gallery-columns-7 figure:nth-of-type(7n+7) { margin-right: 0; } .gallery.gallery-columns-7 figure:nth-of-type(7n+8) { clear: left; } .gallery.gallery-columns-8 figure { width: 10.2%; } .gallery.gallery-columns-8 figure:nth-of-type(8n+8) { margin-right: 0; } .gallery.gallery-columns-8 figure:nth-of-type(8n+9) { clear: left; } .gallery.gallery-columns-9 figure { width: 8.85%; } .gallery.gallery-columns-9 figure:nth-of-type(9n+9) { margin-right: 0; } .gallery.gallery-columns-9 figure:nth-of-type(9n+10) { clear: left; } @media (max-width: 767px) { img.alignright, div.alignright, figure.alignright, img.alignleft, div.alignleft, figure.alignleft, img.wp-post-image.attachment-thumb { display: block; margin: 1em auto; float: none; } .gallery.gallery-columns-4 figure, .gallery.gallery-columns-5 figure, .gallery.gallery-columns-6 figure, .gallery.gallery-columns-7 figure, .gallery.gallery-columns-8 figure, .gallery.gallery-columns-9 figure { width: 100%; margin: 0 0 1em 0; float: none; } } /* =========================================================================================== 15. Pagination =========================================================================================== */ .clearfix { clear: both; } .nav-links div { display: inline; } .nav-links .nav-next { float: right; } .nav-links .nav-prev { float: left; } .page-numbers, .nav-links div { font-family: "Roboto", Helvetica, sans-serif; display: inline-block; padding: 5px 10px; margin: 0 2px 0 0; border: 1px solid #e21330; line-height: 1; text-decoration: none; border-radius: 2px; font-weight: 600; font-size: 1em; } .page-numbers.current, a.page-numbers:hover { background: #e21330; color: #FFF; } span.page-numbers.dots { color: #e21330; } figure { margin: 0; margin-top: 20px; margin-bottom: 20px; } article.comment-wrapper { margin-top: 20px; } /* =========================================================================================== 14. Responsiveness (Tablet Large 64em (1024px)) =========================================================================================== */ @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) { .carousel { height: 440px; } .carousel-caption h2 { font-size: 50px; } .category-row { padding: 10px; } } @media screen and (max-width: 1024px) { .carousel { height: 350px; } .carousel .carousel-inner .carousel-caption h2 { font-size: 34px; } .carousel .carousel-inner .carousel-caption p { font-size: 18px; } .category-row { padding: 10px; } .category-row article.column-third, .category-row article.column-half { width: 48% !important; } } /* =========================================================================================== 15. Responsiveness (Mobile Large (740px)) =========================================================================================== */ @media only screen and (max-width: 740px) { .carousel { z-index: 111; height: 380px; } .carousel .carousel-inner .carousel-caption h2 { font-size: 22px; } .carousel .carousel-inner .carousel-caption p { font-size: 15px; width: 70%; } .carousel .carousel-inner .carousel-caption a.simple-btn { padding: 10px 14px; font-size: 14px; margin-left: 0px; } .carousel-control-prev, .carousel-control-next { top: 60%; } .carousel-control-prev { left: 75%; } .carousel-control-next { right: 10%; } header div.slogan .title { padding-top: 20px; font-size: 3.8em; } .columns.nav-wrapper { width: 100%; padding-left: 0px; padding-right: 0px; } .top-bar-section ul li > a { color: #e21330; } .category-row { padding: 10px; } .category-row article.column-third, .category-row article.column-half { width: 48% !important; } } /* =========================================================================================== 16. Responsiveness (Mobile Small 30em (480px)) =========================================================================================== */ @media only screen and (max-width: 480px) { header .carousel .carousel-inner { width: 100vw; } header .carousel .carousel-inner .carousel-caption { text-align: center; max-width: 100%; } header .carousel .carousel-inner .carousel-caption h2 { font-size: 25px; text-align: center; margin-bottom: 0px; } header .carousel .carousel-inner .carousel-caption p { font-size: 14px; text-align: center; width: 100%; margin-bottom: 5px; margin-top: 5px; } header .carousel .carousel-inner .carousel-caption a.simple-btn { margin-top: 15px; } header .carousel-control-prev, header .carousel-control-next { top: 90%; } header .carousel-control-prev { left: 25% !important; } header .carousel-control-next { right: 10% !important; } header .card-top .card-top-btn ul li a.btn { padding: 10px 6px; font-size: 10px; } .category-row { padding: 15px; } .category-row article.column-third, .category-row article.column-half { width: 100% !important; margin-bottom: 20px; } aside { padding: 0 !important; } } /* =========================================================================================== 17. Responsiveness (Hamburger menu) =========================================================================================== */ @media screen and (max-width: 600px) { .top-bar-section { flex: 1; padding-left: 20px; } .top-bar-section .nav-wrapper nav li.current-menu-item a, .top-bar-section .nav-wrapper nav li.current-menu-ancestor a, .top-bar-section .nav-wrapper nav li.current-menu-parent a, .top-bar-section li a, .top-bar-section li { background: transparent !important; color: #e21330; } #main-menu { max-height: 50px; overflow: hidden; transition: 1s ease-in-out; } #main-menu li { display: none; } #main-menu li.icon { display: inline-block; } #main-menu li.icon .hamburger { transform-origin: center; width: 20px; height: 2px; top: -5px; display: inline-block; background: #e21330; position: relative; transition: 0.3s ease-in-out; opacity: 1; } #main-menu li.icon .hamburger::before, #main-menu li.icon .hamburger::after { transition: 0.3s ease-in-out; content: " "; position: absolute; display: block; width: 20px; height: 2px; background: #e21330; } #main-menu li.icon .hamburger::before { top: -8px; } #main-menu li.icon .hamburger::after { bottom: -8px; } #main-menu li.icon a { line-height: inherit; } #main-menu li a { color: #e21330; } #main-menu li a:hover { color: #160005; } #main-menu li.has-dropdown > a::after { transition: 1s ease-in-out; content: "\f107"; font-size: 1.2em; line-height: 3em; top: 0; color: #160005; } #main-menu li.has-dropdown.open > a::after { content: "\f106"; } #main-menu ul.dropdown { position: relative !important; left: revert !important; display: none; } #main-menu ul.dropdown.visible { display: block; } #main-menu.responsive { max-height: 500px; } #main-menu.responsive li { float: none; display: block; text-align: left; } #main-menu.responsive li.icon { display: inline-block; } #main-menu.responsive .hamburger, #main-menu.responsive .hamburger::before, #main-menu.responsive .hamburger::after { background: #999999 !important; } #main-menu.responsive .hamburger { transform: rotate(45deg) !important; } #main-menu.responsive .hamburger::before { transform: rotate(90deg) !important; top: 0 !important; } #main-menu.responsive .hamburger::after { transform: rotate(90deg) !important; bottom: 0 !important; } } .top-bar-section li a:hover { background: #e21330; } .carousel .carousel-caption h2 { color: #fcbecf !important; } /*# sourceMappingURL=style-red.css.map */