@keyframes skewanimate { 0% { transform: perspective(1300px) rotateY(-30deg); -webkit-transform: perspective(1300px) rotateY(-30deg); -moz-transform: perspective(1300px) rotateY(-30deg); -ms-transform: perspective(1300px) rotateY(-30deg); -o-transform: perspective(1300px) rotateY(-30deg); } 35% { transform: perspective(1300px) rotateY(10deg); -webkit-transform: perspective(1300px) rotateY(10deg); -moz-transform: perspective(1300px) rotateY(10deg); -ms-transform: perspective(1300px) rotateY(10deg); -o-transform: perspective(1300px) rotateY(10deg); } 100% { transform: perspective(1300px) rotateY(0deg); -webkit-transform: perspective(1300px) rotateY(0deg); -moz-transform: perspective(1300px) rotateY(0deg); -ms-transform: perspective(1300px) rotateY(0deg); -o-transform: perspective(1300px) rotateY(0deg); } } .body-font { font-family: "Playfair Display", sans-serif; } .title-font { font-family: "Playfair Display", sans-serif; } /* Globals */ body { font-family: "Playfair Display", sans-serif; background: #ffffff; word-wrap: break-word; } .mega-container { background: white; max-width: 1170px; margin: auto; margin-top: 20px; overflow: visible; } a { color: black; cursor: pointer; } a:hover { text-decoration: none; color: black; } .container { margin: auto; } /* ---------- Header ------------- */ #top-bar { background: black; } #top-bar .social-icons { text-align: center; } #masthead { text-align: left; min-height: 220px; } #masthead #text-title-desc { clear: none; float: left; vertical-align: middle; } @media screen and (max-width: 768px) { #masthead #text-title-desc { float: none; } } #masthead h1.site-title { font-size: 42px; font-weight: normal; margin-top: 0px; } #masthead h1.site-title a { color: white; } #masthead h2.site-description { font-weight: 300; font-size: 15px; margin-top: 10px; color: white; } .site-branding { padding: 45px 0; overflow: hidden; margin-bottom: 285px; } @media screen and (max-width: 767px) { .site-branding { margin-bottom: 185px; } } @media screen and (max-width: 767px) { .site-branding { text-align: center; margin-bottom: 25px; } } @media screen and (max-width: 401px) { #top-menu { margin-top: -10px !important; } } #site-logo { display: inline-block; float: left; } @media screen and (max-width: 768px) { #site-logo { float: none; } } #jumbosearch { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.84); z-index: 99999; text-align: center; display: none; } #jumbosearch .form { margin-top: 20%; } #jumbosearch .form label { width: 80%; text-align: center; } #jumbosearch .form input[type=search] { background: none; outline: none; padding: 20px; font-size: 28px; border: none; border-bottom: solid 1px #ddd; border-radius: 0; color: white; width: 80%; text-align: center; clear: both; } #jumbosearch .form input[type=submit] { display: none; text-transform: uppercase; } #jumbosearch .closeicon { position: absolute; right: 30px; top: 40px; color: #eee; font-size: 27px; padding: 15px; cursor: pointer; } #search-icon { display: block; text-align: center; margin-bottom: 10px; } #search-icon #searchicon { display: inline-block; background: #ffffff; border: solid 2px black; color: #aaaaaa; width: 50px; height: 50px; padding-top: 11px; text-align: center; border-radius: 50%; font-size: 18px; } #social-icons { text-align: center; } #social-icons .social-icon { display: inline-block; border: solid 1px black; color: #f7f7f7; width: 50px; height: 50px; padding-top: 12px; text-align: center; font-size: 18px; transition: 0.4s all ease; -webkit-transition: 0.4s all ease; -moz-transition: 0.4s all ease; -ms-transition: 0.4s all ease; -o-transition: 0.4s all ease; } #social-icons .social-icon:before { border-radius: 0%; background: #f7f7f7; } #social-icons .social-icon:hover { color: black; } /* -------- Nav Menu ---------- */ #site-navigation { float: left; background: black; } #site-navigation ul { /* for the Currently active page */ } #site-navigation ul li a { padding: 20px 13px; color: #fff; font-weight: 400; transition: 0.2s all ease; -webkit-transition: 0.2s all ease; -moz-transition: 0.2s all ease; -ms-transition: 0.2s all ease; -o-transition: 0.2s all ease; } #site-navigation ul li a:hover { background: #000000; } #site-navigation ul li:hover a { background: #000000; } #site-navigation ul li ul li .menu-desc { display: none; } #site-navigation ul li ul.sub-menu, #site-navigation ul li ul.children { background: #000000; bottom: 60px; display: block; box-shadow: 0px -1px 1px 1px rgba(74, 74, 74, 0.1); transition: 0.4s all ease; -webkit-transition: 0.4s all ease; -moz-transition: 0.4s all ease; -ms-transition: 0.4s all ease; -o-transition: 0.4s all ease; perspective: 1000; -webkit-perspective: 1000; transform-origin: bottom; -webkit-transform-origin: bottom; transform: perspective(350px) rotateX(10deg); -webkit-transform: perspective(350px) rotateX(90deg); -moz-transform: perspective(350px) rotateX(90deg); } #site-navigation ul li ul.sub-menu li ul, #site-navigation ul li ul.children li ul { transform-origin: left; -webkit-transform-origin: left; transition: 0.4s all ease; -webkit-transition: 0.4s all ease; -moz-transition: 0.4s all ease; -ms-transition: 0.4s all ease; -o-transition: 0.4s all ease; left: 100%; bottom: 0%; opacity: 0; -webkit-transform: rotateY(65deg) !important; transform: rotateY(65deg) !important; -moz-transform: rotateY(65deg) !important; } #site-navigation ul li ul.sub-menu li ul li ul, #site-navigation ul li ul.children li ul li ul { display: none !important; } #site-navigation ul li ul.sub-menu li:hover, #site-navigation ul li ul.children li:hover { transition: 0.2s all ease; -webkit-transition: 0.2s all ease; -moz-transition: 0.2s all ease; -ms-transition: 0.2s all ease; -o-transition: 0.2s all ease; /* -webkit-transition: 0.2s all ease !important; */ } #site-navigation ul li ul.sub-menu li:hover ul, #site-navigation ul li ul.children li:hover ul { opacity: 1; transform: rotateY(5deg) !important; -webkit-transform: rotateY(5deg) !important; -moz-transform: rotateY(5deg) !important; } #site-navigation ul li ul.sub-menu a, #site-navigation ul li ul.children a { padding: 8px 15px; font-weight: lighter; font-size: 14px; transition: 0.4s background ease, 0.6s padding ease; } #site-navigation ul li ul.sub-menu a:hover, #site-navigation ul li ul.children a:hover { background: #000000; padding-left: 19px; } #site-navigation ul li:hover { transition: 0.4s all ease; -webkit-transition: 0.4s all ease; -moz-transition: 0.4s all ease; -ms-transition: 0.4s all ease; -o-transition: 0.4s all ease; -webkit-transition: 0.4s all ease !important; } #site-navigation ul li:hover ul.sub-menu, #site-navigation ul li:hover ul.children { display: block; transform: rotateX(0deg); -webkit-transform: rotateX(0deg); } #site-navigation ul .current_page_item > a, #site-navigation ul .current-menu-item > a, #site-navigation ul .current_page_ancestor > a { background: #000000; } #site-navigation .fa { padding: 0 5px 0 0; } #site-navigation .menu-desc { font-size: 12px; font-weight: 300; color: #999; display: inline-block; margin-top: -5px; font-style: italic; text-transform: lowercase; } #site-navigation .current_page_item > a, #site-navigation .current-menu-item > a, #site-navigation .current_page_ancestor > a { color: #fff; } @media screen and (max-width: 767px) { #site-navigation { margin-bottom: 20px; } } #site-navigation .mobileMenu { margin: 15px; padding: 3px; border-radius: 4px; background: #ddd; padding: 5px; color: #888; border: none; outline: none; display: inline-block; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } /* TOP MENU */ #top-menu { float: none; text-align: center; margin-top: 0px; } @media screen and (max-width: 767px) { #top-menu { float: none; text-align: center; padding: 15px; } } #top-menu ul { list-style: none; margin-bottom: 0; margin-left: 0px; } #top-menu ul li { position: relative; } #top-menu ul ul { visibility: hidden; opacity: 0; position: absolute; top: 100%; left: -2px; width: 200px; transform: translateY(10px); transition: 0.4s all ease; -webkit-transition: 0.4s all ease; -moz-transition: 0.4s all ease; -ms-transition: 0.4s all ease; -o-transition: 0.4s all ease; background: #ffffff; border-top: solid 1px #eaeaea; z-index: 1000; /* level 3 onwards */ } #top-menu ul ul li { border-right: none; width: 100%; padding: 0; text-align: left; } #top-menu ul ul li:nth-child(even) { background: #eee; } #top-menu ul ul li:nth-child(odd) { background: #f7f7f7; } #top-menu ul ul li:hover { background: #ddd; } #top-menu ul ul li a { text-transform: none; padding: 8px; font-size: 13px; } #top-menu ul ul li a:hover { text-decoration: none; } #top-menu ul ul ul { transform: translateX(10px); left: 100%; top: -1px; } #top-menu ul li { display: inline-block; padding: 13px 13px; /* DROPDOWN TRIGGER */ } #top-menu ul li:hover { background: #e7e7e7; } #top-menu ul li a { display: inline-block; color: black; font-size: 16px; font-weight: normal; text-transform: uppercase; } #top-menu ul li:hover > ul { opacity: 1; visibility: visible; transform: translateY(0) translateX(0); transition: 0.8s all ease; -webkit-transition: 0.8s all ease; -moz-transition: 0.8s all ease; -ms-transition: 0.8s all ease; -o-transition: 0.8s all ease; } @media screen and (max-width: 767px) { #top-menu { background: black; margin: 0 -15px; } } #top-menu .mobileMenu { padding: 3px; margin: 0; border-radius: 4px; background: #ddd; padding: 5px; color: #888; border: none; outline: none; display: inline-block; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } /* top slider */ .slider-wrapper { margin-top: 20px; margin-bottom: 0px; padding: 15px; } .slider-wrapper .nivoSlider { box-shadow: none; border: solid 5px #eee; } .slider-wrapper .nivo-controlNav { position: relative; bottom: 60px; z-index: 9; } .slider-wrapper .nivo-caption { bottom: 60px; left: 55px; right: auto; font-family: inherit; background: none; } @media screen and (max-width: 600px) { .slider-wrapper .nivo-caption { transform: scale(0.6); -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -ms-transform: scale(0.6); -o-transform: scale(0.6); bottom: 15px; left: -50px; } } .slider-wrapper .nivo-caption a { text-decoration: none; border-bottom: none; } .slider-wrapper .nivo-caption .slide-title { display: inline-block; font-size: 24px; padding: 10px; background: rgba(0, 0, 0, 0.7); border-left: solid 4px black; font-weight: lighter; } .slider-wrapper .nivo-caption .slide-desc span { background: rgba(0, 0, 0, 0.5); /* border-left: solid 4px black; */ display: inline-block; font-size: 16px; padding: 8px; } .slider-wrapper .nivo-caption .slide-cta span { background: rgba(0, 0, 0, 0.7); font-weight: bold; display: inline-block; font-size: 16px; margin-top: 5px; padding: 10px; border-bottom: solid 2px black; } /* Flex Images */ .flex-images { border: none; padding: 15px 30px; margin-bottom: 30px; } .flex-images .section-title:after { width: 100%; } .flex-images .item { margin: 6px; border: none; position: relative; } .flex-images .item .viewtext { position: absolute; top: 35%; left: 40%; font-size: 14px; z-index: 9999; display: none; } .flex-images .item img { transition: 0.4s all ease; -webkit-transition: 0.4s all ease; -moz-transition: 0.4s all ease; -ms-transition: 0.4s all ease; -o-transition: 0.4s all ease; } .flex-images .item:after { content: ""; position: absolute; display: block; width: 0%; height: 5px; bottom: 0px; background: rgba(0, 0, 0, 0.8); transition: 0.4s all ease; -webkit-transition: 0.4s all ease; -moz-transition: 0.4s all ease; -ms-transition: 0.4s all ease; -o-transition: 0.4s all ease; } .flex-images .item:hover:after { width: 100%; } .flex-images .item:hover img { -webkit-filter: blur(3px) grayscale(0.9); } .flex-images .item:hover .flex-caption { padding-left: 20px; } .flex-images .item:hover .viewtext { display: block; color: #eee; text-shadow: 0 0 2px #000; background: #000; padding: 10px; border-radius: 10px; } .flex-images .flex-caption { background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%); position: absolute; bottom: 0px; display: block; pointer-events: none; transition: 0.4s all ease; -webkit-transition: 0.4s all ease; -moz-transition: 0.4s all ease; -ms-transition: 0.4s all ease; -o-transition: 0.4s all ease; width: 100%; color: #eee; font-weight: bold; text-shadow: 1px 1px 0 #222; font-size: 16px; padding: 50px 10px 20px 10px; } /* section titles */ .section-title { font-weight: bold; color: black; font-size: 20px; margin-bottom: 20px; margin-top: 40px; text-transform: uppercase; text-indent: 20px; text-align: center; position: relative; } @media screen and (max-width: 991px) { .section-title { margin-top: 20px; } } .section-title span { background: #ffffff; position: relative; padding: 15px; z-index: 1; } .section-title:after { content: ""; display: block; width: 100%; height: 5px; background: transparent; border-top: solid 1px black; position: absolute; top: 50%; z-index: 0; } /*Featured Area Skew */ #featured-area-skew .imgcontainer { padding: 25px; } #featured-area-skew .imgcontainer:nth-of-type(2) { padding-left: 0; } #featured-area-skew .imgcontainer:nth-of-type(3) { padding: 25px 10px; } #featured-area-skew .imgcontainer:nth-of-type(4) { padding-right: 0; } @media screen and (max-width: 767px) { #featured-area-skew .imgcontainer { padding: 15px 0 !important; } } #featured-area-skew .popimage { perspective: 50; box-shadow: rgba(68, 68, 68, 0.5) 3px 3px 3px; -webkit-perspective: 50; transform: perspective(1300px) rotateY(-15deg); -webkit-transform: perspective(1300px) rotateY(-15deg); -moz-transform: perspective(1300px) rotateY(-15deg); -ms-transform: perspective(1300px) rotateY(-15deg); -o-transform: perspective(1300px) rotateY(-15deg); transform-origin: left; transition: 1s all ease; -webkit-transition: 1s all ease; -moz-transition: 1s all ease; -ms-transition: 1s all ease; -o-transition: 1s all ease; overflow: hidden; } @media screen and (max-width: 767px) { #featured-area-skew .popimage { transform: perspective(1300px) rotateY(0deg); -webkit-transform: perspective(1300px) rotateY(0deg); -moz-transform: perspective(1300px) rotateY(0deg); -ms-transform: perspective(1300px) rotateY(0deg); -o-transform: perspective(1300px) rotateY(0deg); } } #featured-area-skew .popimage img { max-width: 100%; transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transition: 2s all ease; -webkit-transition: 2s all ease; -moz-transition: 2s all ease; -ms-transition: 2s all ease; -o-transition: 2s all ease; } #featured-area-skew .popimage:hover { transform: perspective(1300px) rotateY(0deg); -webkit-transform: perspective(1300px) rotateY(0deg); -moz-transform: perspective(1300px) rotateY(0deg); -ms-transform: perspective(1300px) rotateY(0deg); -o-transform: perspective(1300px) rotateY(0deg); box-shadow: rgba(68, 68, 68, 0.5) 1px 1px 1px; } #featured-area-skew .popimage:hover img { filter: brightness(0.5); -webkit-filter: brightness(0.5); transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } #featured-area-skew .popimage:hover .titledesc { opacity: 1; } #featured-area-skew .titledesc { position: absolute; width: 100%; bottom: 25px; left: 5px; opacity: 0.8; transition: 2s all ease; -webkit-transition: 2s all ease; -moz-transition: 2s all ease; -ms-transition: 2s all ease; -o-transition: 2s all ease; } #featured-area-skew .titledesc a { color: #f7f7f7; font-size: 14px; background: black; padding: 7px 15px; } @media screen and (min-width: 768px) and (max-width: 991px) { #featured-area-skew .titledesc { left: 5px; right: 5px; bottom: 5px; width: auto; background: black; padding-bottom: 10px; padding-top: 5px; } #featured-area-skew .titledesc a { font-size: 12px; padding: 0; background: none; } #featured-area-skew .titledesc h2 { line-height: 10px; } } #featured-area-skew .titledesc h2 { margin: 0; text-align: center; } /*Featured Area 1*/ #featured-area-1 { margin: 20px 0; position: relative; } #featured-area-1 .section-title { margin-bottom: 40px; } #featured-area-1 .popular-articles { overflow: auto; overflow-x: hidden; position: relative; z-index: 999; } #featured-area-1 .imgcontainer { padding: 1px; position: relative; } #featured-area-1 .imgcontainer .postdate { display: inline-block; padding: 5px; color: white; width: 55px; background: black; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); text-align: center; font-weight: bolder; text-transform: uppercase; z-index: 10; transition: 0.4s all ease; -webkit-transition: 0.4s all ease; -moz-transition: 0.4s all ease; -ms-transition: 0.4s all ease; -o-transition: 0.4s all ease; pointer-events: none; } #featured-area-1 .imgcontainer .postdate:after { display: block; content: ""; position: absolute; background: none; bottom: -10px; left: 8px; height: 39px; width: 39px; border-left: 15px black solid; border-bottom: 15px black solid; border-right: solid 15px transparent; border-top: solid 15px transparent; transform: rotateZ(-45deg); -webkit-transform: rotateZ(-45deg); -moz-transform: rotateZ(-45deg); -ms-transform: rotateZ(-45deg); -o-transform: rotateZ(-45deg); z-index: 5; } #featured-area-1 .imgcontainer .postdate span { display: block; margin-bottom: 1px; } #featured-area-1 .imgcontainer .postdate .day { font-size: 32px; margin-bottom: -5px; } #featured-area-1 .imgcontainer .popimage { position: relative; overflow: hidden; transition: 0.6s all ease; -webkit-transition: 0.6s all ease; -moz-transition: 0.6s all ease; -ms-transition: 0.6s all ease; -o-transition: 0.6s all ease; } #featured-area-1 .imgcontainer .popimage img { display: block; transition: 0.4s all ease; -webkit-transition: 0.4s all ease; -moz-transition: 0.4s all ease; -ms-transition: 0.4s all ease; -o-transition: 0.4s all ease; } @media screen and (max-width: 991px) { #featured-area-1 .imgcontainer .popimage img { width: 100%; } } #featured-area-1 .imgcontainer .popimage:hover img { transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); opacity: 1; } #featured-area-1 .imgcontainer .popimage:hover .titledesc { display: block; transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); /* left: 0; */ opacity: 1; } #featured-area-1 .imgcontainer .titledesc { display: block; position: absolute; background: rgba(0, 0, 0, 0.45); transition: 0.8s all ease; -webkit-transition: 0.8s all ease; -moz-transition: 0.8s all ease; -ms-transition: 0.8s all ease; -o-transition: 0.8s all ease; transform: translateY(-5px); -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px); top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0; pointer-events: none; } #featured-area-1 .imgcontainer .titledesc h2 { font-size: 16px; text-align: center; color: white; font-weight: normal; position: relative; top: 50%; transform: translateY(-200%); -webkit-transform: translateY(-200%); -moz-transform: translateY(-200%); -ms-transform: translateY(-200%); -o-transform: translateY(-200%); } #featured-area-1 .imgcontainer .titledesc h2 a { color: white; } #featured-area-1 .imgcontainer .popimage:hover img { transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); } #featured-area-1 .imgcontainer .popimage:hover .titledesc { transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); } #featured-area-1 .imgcontainer:hover .postdate { opacity: 0; top: -20px; } #featured-area-2 { margin-bottom: 20px; } #featured-area-2 .section-title { margin-bottom: 30px; } #featured-area-2 .imgcontainer { padding: 1px; } #featured-area-2 .imgcontainer .popimage { position: relative; margin-bottom: 16px; } #featured-area-2 .imgcontainer .popimage img { width: 100%; transition: 0.8s all ease; -webkit-transition: 0.8s all ease; -moz-transition: 0.8s all ease; -ms-transition: 0.8s all ease; -o-transition: 0.8s all ease; } #featured-area-2 .imgcontainer .popimage .titledesc { position: absolute; width: 100%; bottom: 0%; padding: 25px 15px; background: rgba(0, 0, 0, 0.65); pointer-events: none; } #featured-area-2 .imgcontainer .popimage .titledesc h2 { margin: 0; } #featured-area-2 .imgcontainer .popimage .titledesc a { color: white; font-size: 18px; font-weight: lighter; display: block; text-align: center; pointer-events: none; } #featured-area-2 .imgcontainer .popimage:hover img { -webkit-filter: brightness(0.7); filter: brightness(0.7); } #featured-area-2 .imgcontainer:nth-of-type(2) .popimage .titledesc { top: 0; left: 0; width: 25%; padding-top: 30px; } @media screen and (max-width: 767px) { #featured-area-2 .imgcontainer:nth-of-type(2) .popimage .titledesc { width: 50%; } } #featured-area-2 .imgcontainer:nth-of-type(2) .popimage .titledesc a { font-size: 32px; text-align: left; padding-top: 25px; position: relative; } @media screen and (max-width: 991px) { #featured-area-2 .imgcontainer:nth-of-type(2) .popimage .titledesc a { font-size: 22px; } } @media screen and (max-width: 767px) { #featured-area-2 .imgcontainer:nth-of-type(2) .popimage .titledesc a { font-size: 14px; padding-top: 10px; } } #featured-area-2 .imgcontainer:nth-of-type(2) .popimage .titledesc a:before { content: ""; position: absolute; top: 0; width: 35%; height: 1px; background: #f7f7f7; } #featured-area-2 .imgcontainer:nth-of-type(3) .popimage { margin-right: 8px; } @media screen and (max-width: 767px) { #featured-area-2 .imgcontainer:nth-of-type(3) .popimage { margin-right: 0; } } #featured-area-2 .imgcontainer:nth-of-type(4) .popimage { margin-left: 8px; } @media screen and (max-width: 767px) { #featured-area-2 .imgcontainer:nth-of-type(4) .popimage { margin-left: 0; } } /* Second Featured Area - OLD CODE DONT CARE */ .featured-2 { margin: 20px 0; position: relative; } .featured-2 .popular-articles { overflow: auto; overflow-x: hidden; } .featured-2 .popular-articles .imgcontainer { padding: 6px; position: relative; } .featured-2 .popular-articles .popimage { position: relative; transition: 0.4s all ease; -webkit-transition: 0.4s all ease; -moz-transition: 0.4s all ease; -ms-transition: 0.4s all ease; -o-transition: 0.4s all ease; } .featured-2 .popular-articles .popimage img { display: block; transition: 0.4s all ease; -webkit-transition: 0.4s all ease; -moz-transition: 0.4s all ease; -ms-transition: 0.4s all ease; -o-transition: 0.4s all ease; } @media screen and (max-width: 991px) { .featured-2 .popular-articles .popimage img { width: 100%; } } .featured-2 .popular-articles .popimage:hover img { transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); opacity: 1; } .featured-2 .popular-articles .popimage:hover .titledesc { display: block; transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); /* left: 0; */ opacity: 1; } .featured-2 .popular-articles .titledesc { display: block; position: absolute; background: rgba(0, 0, 0, 0.6); transition: 0.8s all ease; -webkit-transition: 0.8s all ease; -moz-transition: 0.8s all ease; -ms-transition: 0.8s all ease; -o-transition: 0.8s all ease; transform: translateX(-50px); -webkit-transform: translateX(-50px); -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0; } .featured-2 .popular-articles .titledesc h2 { font-size: 16px; text-align: center; color: white; font-weight: bold; } .featured-2 .popular-articles .titledesc a { color: #eee; background: black; text-align: center; display: block; width: 40%; padding: 5px; margin: auto; margin-top: 25px; } .featured-2 .popular-articles .imgcontainer:nth-child(odd) .titledesc { transform: translateX(50px); -webkit-transform: translateX(50px); -moz-transform: translateX(50px); -ms-transform: translateX(50px); -o-transform: translateX(50px); } .featured-2 .popular-articles .imgcontainer:nth-child(odd) .popimage:hover img { transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); } .featured-2 .popular-articles .imgcontainer:nth-child(odd) .popimage:hover .titledesc { transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); } /* sb slider */ .latest-hap { position: relative; } .sb-slider .sb-description { pointer-events: none; z-index: 88; background: rgba(0, 0, 0, 0.4); border-left-color: black; padding: 10px; } .sb-slider .sb-description h3 { margin: 0; } .nav-arrows { position: absolute; top: 50%; } .nav-arrows a { background-color: rgba(0, 0, 0, 0.5); transition: 0.2s all ease; -webkit-transition: 0.2s all ease; -moz-transition: 0.2s all ease; -ms-transition: 0.2s all ease; -o-transition: 0.2s all ease; box-shadow: 0px 0px 1px black; outline: none; } .nav-arrows a:hover { background-color: rgba(0, 0, 0, 0.5); } .nav-arrows a:first-child { right: -535px; } @media screen and (max-width: 1199px) { .nav-arrows a:first-child { right: -435px; } } @media screen and (max-width: 991px) { .nav-arrows a:first-child { right: -675px; } } @media screen and (max-width: 768px) { .nav-arrows a:first-child { display: none; } } .nav-arrows a:nth-child(2) { right: -47px; } @media screen and (min-width: 768px) and (max-width: 991px) { .nav-arrows a:nth-child(2) { right: -57px; } } @media screen and (max-width: 768px) { .nav-arrows a:nth-child(2) { display: none; } } #content { margin-top: 0px; } #primary .section-title { margin-top: 5px; } .grid-row { margin: 0; } /* Grid */ .grid { margin: 10px 0; padding-left: 0; padding-bottom: 17px; border-bottom: solid 1px #eee; } @media screen and (max-width: 768px) { .grid { border-bottom: none; } } .grid:nth-last-child(2) { border: none; } .grid .featured-thumb { overflow: hidden; transition: 0.4s all ease; -webkit-transition: 0.4s all ease; -moz-transition: 0.4s all ease; -ms-transition: 0.4s all ease; -o-transition: 0.4s all ease; padding: 0; } @media screen and (max-width: 768px) { .grid .featured-thumb img { width: 100%; } } .grid .featured-thumb img { transition: 0.4s all ease; -webkit-transition: 0.4s all ease; -moz-transition: 0.4s all ease; -ms-transition: 0.4s all ease; -o-transition: 0.4s all ease; } .grid .featured-thumb:hover img { transition: 0.4s all ease; -webkit-transition: 0.4s all ease; -moz-transition: 0.4s all ease; -ms-transition: 0.4s all ease; -o-transition: 0.4s all ease; transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); } @media screen and (max-width: 768px) { .grid .out-thumb { padding: 10px 3px; } } .grid .out-thumb h1 { margin: 5px 0; margin-top: 1px; font-weight: normal; font-size: 19px; } .grid .out-thumb h1 a { color: #373737; padding-bottom: 2px; } .grid .out-thumb h1 a:before { height: 2px; background: #373737; width: 96%; left: 2%; } .grid .out-thumb .postedon { font-size: 12px; color: #888; font-weight: normal; margin-bottom: 5px; } .grid .out-thumb .postedon a { color: #999; text-decoration: underline; } .grid .out-thumb .entry-excerpt { color: #777; line-height: 1.6em; font-weight: 400; } .grid .readmore { display: block; clear: both; } .grid .hvr-underline-from-center:before { height: 1px; background: black; } .grid_2_column { padding: 0; border-bottom: none; } .grid_2_column .out-thumb { padding: 12px 0; } @media screen and (max-width: 768px) { .grid_2_column { padding-right: 0px; } } @media screen and (min-width: 768px) { .grid_2_column:nth-of-type(even) { padding-left: 10px; } .grid_2_column:nth-of-type(odd) { padding-right: 10px; clear: left; } } .grid_3_column { padding: 0 10px; } @media screen and (min-width: 768px) { .grid_3_column:nth-of-type(odd) { padding-right: 10px; clear: none; } .grid_3_column:nth-of-type(3n+1) { clear: left; } } /* Madhat Layout */ .madhat { padding: 0; } .madhat .madhat-content { border-top: solid 2px black; } .madhat:nth-child(even) { padding-right: 15px; } @media screen and (max-width: 767px) { .madhat:nth-child(even) { padding: 0; } } .madhat:nth-child(odd) { padding-left: 15px; } @media screen and (max-width: 767px) { .madhat:nth-child(odd) { padding: 0; } } .madhat .featured-thumb { padding: 0; } .madhat .featured-thumb img { width: 100%; } .madhat .out-thumb h1 { margin: 0; line-height: 18px; margin-top: 10px; } .madhat .out-thumb h1 a { font-size: 20px; color: #444444; } .madhat .out-thumb .postedon { font-size: 12px; color: #777777; margin-top: 10px; margin-bottom: 5px; } .madhat .out-thumb .postedon a, .madhat .out-thumb .postedon .fa { color: #848484; } .madhat .out-thumb .postedon .fa { margin-right: 5px; } /* --------------- pagination ------------ */ .pagination { margin: 20px 0; padding-top: 25px; text-align: center; width: 100%; clear: both; } .pagination .page-numbers { padding: 4px 12px; text-decoration: none; margin-right: 5px; background-color: #f2f2f2; border: 1px solid #ebebeb; display: inline-block; color: #6a6a6a; transition: 0.4s all ease; -webkit-transition: 0.4s all ease; -moz-transition: 0.4s all ease; -ms-transition: 0.4s all ease; -o-transition: 0.4s all ease; } .pagination .page-numbers:hover { background: #ffffff; } .pagination .current { background: #fcfcfc; font-weight: bold; } .pagination .current:hover, .pagination span:hover { background: #fcfcfc; } #secondary { /* aside:nth-child(odd) { background: #fafafa; border: solid 1px #eee; } */ /* Some Styling for Default WordPress Widgets */ /* Pulse Grow */ } #secondary aside { padding: 10px; } #secondary h1.widget-title { font-weight: normal; color: black; font-size: 18px; margin-bottom: 20px; margin-top: 0px; text-transform: uppercase; } #secondary .widget a { color: #888; font-weight: 14px; transition: 0.4s all ease; -webkit-transition: 0.4s all ease; -moz-transition: 0.4s all ease; -ms-transition: 0.4s all ease; -o-transition: 0.4s all ease; } #secondary .widget a:hover { color: black; } #secondary .widget ul { font-size: 14px; margin-left: 0px; } #secondary .widget ul li { list-style: none; padding: 6px; } #secondary .widget ul li:last-child { border-bottom: none; } #secondary .widget_search { margin-bottom: 20px; } #secondary .widget_search label { width: 100%; } #secondary .widget_search input[type=search] { background: white; border: solid 2px #ffffff; border-radius: 0px; padding: 15px; font-size: 16px; padding-bottom: 10px; outline: none; width: 80%; } #secondary .search-submit { display: none; } #secondary .widget_recent_entries ul li:before, #secondary .widget_recent_comments ul li:before, #secondary .widget_categories ul li:before, #secondary .widget_pages ul li:before, #secondary .widget_archive ul li:before, #secondary .widget_meta ul li:before, #secondary .widget_nav_menu ul li:before { content: "\f04b"; font-family: "FontAwesome"; color: black; font-size: 10px; margin-right: 5px; position: relative; top: -1px; } #secondary .widget_recent_entries ul li, #secondary .widget_recent_comments ul li, #secondary .widget_categories ul li, #secondary .widget_pages ul li, #secondary .widget_archive ul li, #secondary .widget_meta ul li, #secondary .widget_nav_menu ul li { transition: 0.4s all ease; -webkit-transition: 0.4s all ease; -moz-transition: 0.4s all ease; -ms-transition: 0.4s all ease; -o-transition: 0.4s all ease; } #secondary .widget_recent_entries ul li:hover, #secondary .widget_recent_comments ul li:hover, #secondary .widget_categories ul li:hover, #secondary .widget_pages ul li:hover, #secondary .widget_archive ul li:hover, #secondary .widget_meta ul li:hover, #secondary .widget_nav_menu ul li:hover { transform: translateX(2px); -webkit-transform: translateX(2px); -moz-transform: translateX(2px); -ms-transform: translateX(2px); -o-transform: translateX(2px); } #secondary .widget_tag_cloud .tagcloud a { background: black; font-size: 14px !important; text-transform: uppercase; font-weight: lighter; color: #ffffff; padding: 7px 5px; margin-bottom: 5px; display: inline-block; } @-webkit-keyframes hvr-pulse-grow { to { -webkit-transform: scale(1.05); transform: scale(1.05); } } @keyframes hvr-pulse-grow { to { -webkit-transform: scale(0.95); transform: scale(0.95); } } #secondary .tagcloud a { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } #secondary .tagcloud a:hover, #secondary .tagcloud a:focus, #secondary .tagcloud a:active { -webkit-animation-name: hvr-pulse-grow; animation-name: hvr-pulse-grow; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } #secondary .widget_madhat_rp li.rp-item { overflow: auto; clear: both; display: block; padding: 8px 0px; font-size: 13px; } #secondary .widget_madhat_rp .rp-thumb { width: 52px; float: left; display: inline-block; margin-right: 6px; } #secondary .widget_madhat_rp .rp-date { color: #919191; font-size: 11px; } /* Footer Sidebar */ #footer-sidebar { background: #ffffff; border-top: solid 1px #eee; } #footer-sidebar .footer-column { /* Pulse Grow */ } #footer-sidebar .footer-column h1.widget-title { font-weight: normal; font-size: 16px; color: black; text-transform: uppercase; background: #e6e6e6; padding: 8px 5px; } #footer-sidebar .footer-column .widget { color: #5e5e5e; } #footer-sidebar .footer-column .widget a { color: #5e5e5e; font-weight: normal; transition: 0.4s all ease; -webkit-transition: 0.4s all ease; -moz-transition: 0.4s all ease; -ms-transition: 0.4s all ease; -o-transition: 0.4s all ease; } #footer-sidebar .footer-column .widget a:hover { color: black; } #footer-sidebar .footer-column .widget ul { margin-left: 0px; } #footer-sidebar .footer-column .widget ul li { list-style: none; padding: 5px; } #footer-sidebar .footer-column .widget ul li ul { margin-left: 5px; } #footer-sidebar .footer-column .widget ul li li { margin-left: 2px; border-bottom: none; padding: 2px; } #footer-sidebar .footer-column .widget_tag_cloud .tagcloud a { background: black; font-size: 14px !important; text-transform: uppercase; font-weight: lighter; color: #ffffff; padding: 7px 5px; margin-bottom: 5px; display: inline-block; } @-webkit-keyframes hvr-pulse-grow { to { -webkit-transform: scale(1.05); transform: scale(1.05); } } @keyframes hvr-pulse-grow { to { -webkit-transform: scale(0.95); transform: scale(0.95); } } #footer-sidebar .footer-column .tagcloud a { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } #footer-sidebar .footer-column .tagcloud a:hover, #footer-sidebar .footer-column .tagcloud a:focus, #footer-sidebar .footer-column .tagcloud a:active { -webkit-animation-name: hvr-pulse-grow; animation-name: hvr-pulse-grow; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } #footer-sidebar .footer-column .widget_madhat_rp li.rp-item { overflow: auto; clear: both; display: block; padding: 8px 0px; font-size: 13px; } #footer-sidebar .footer-column .widget_madhat_rp .rp-thumb { width: 52px; float: left; display: inline-block; margin-right: 6px; } #footer-sidebar .footer-column .widget_madhat_rp .rp-date { color: #919191; font-size: 11px; } #footer-sidebar .footer-column .widget_recent_entries ul li:before, #footer-sidebar .footer-column .widget_recent_comments ul li:before, #footer-sidebar .footer-column .widget_categories ul li:before, #footer-sidebar .footer-column .widget_pages ul li:before, #footer-sidebar .footer-column .widget_archive ul li:before, #footer-sidebar .footer-column .widget_meta ul li:before, #footer-sidebar .footer-column .widget_nav_menu ul li:before { content: "\f04b"; font-family: "FontAwesome"; color: black; font-size: 10px; margin-right: 5px; position: relative; top: -1px; } #colophon { background: #ffffff; padding: 15px 10px 5px 10px; color: #777777; font-size: 13px; padding-top: 15px; text-align: center; } #colophon a { color: #777777; text-decoration: underline; } /* Single Posts Area */ #primary-mono { padding: 0 10px; padding-left: 20px; } @media screen and (max-width: 767px) { #primary-mono { padding-left: 10px; } } #primary-mono h1.entry-title { font-weight: normal; color: black; font-size: 30px; margin-top: 0px; padding: 10px; padding-left: 0; margin-bottom: 0px; } #primary-mono h1.entry-title:after { content: ""; display: block; width: 100%; width: calc(100% + 10px); height: 2px; margin-top: 15px; background: black; } #primary-mono .entry-meta, #primary-mono .entry-footer { font-size: 12px; border-bottom: solid 1px #eee; padding-bottom: 7px; } #primary-mono .entry-meta a, #primary-mono .entry-footer a { color: #777777; text-decoration: underline; } #primary-mono .entry-meta a:hover, #primary-mono .entry-footer a:hover { color: black; } #primary-mono .entry-meta { overflow: visible; } #primary-mono .entry-meta .postdate { display: inline-block; margin-bottom: 20px; background: black; color: white; margin-right: 15px; padding: 15px; padding-bottom: 0; font-size: 16px; position: relative; top: -11px; text-align: center; overflow-y: visible; } #primary-mono .entry-meta .postdate .month { display: block; font-weight: lighter; text-transform: uppercase; } #primary-mono .entry-meta .postdate .day { display: block; } #primary-mono .entry-meta .postdate:after { content: ""; width: 1px; height: 1px; background: transparent; position: absolute; left: 8px; bottom: -20px; border-right: solid 22px black; border-top: solid 22px black; border-bottom: transparent solid 18px; border-left: transparent solid 18px; transform: rotate(135deg); -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); } #primary-mono .entry-meta .author { display: inline-block; position: relative; top: 16px; font-size: 16px; font-weight: normal; float: right; text-transform: uppercase; } #primary-mono .entry-meta .author a { color: black; text-decoration: none; } #primary-mono .entry-meta .author .fa { margin-right: 5px; } #primary-mono .entry-footer { border-top: solid 1px #eee; padding-top: 7px; overflow: auto; margin-top: 25px; } #primary-mono .entry-footer .post-edit-link { float: right; } #primary-mono .entry-footer .cat-links { margin-right: 6px; } #primary-mono .entry-content { color: #777777; line-height: 1.7em; font-size: 14px; } #primary-mono.page h1.entry-title:after { display: none; } .edit-link { display: inline-block; float: right; } .page-header { margin-top: 0px; border-bottom: none; } .page-header h1 { font-size: 18px; font-weight: lighter; border-bottom: solid 1px #e1e1e1; display: inline-block; padding-bottom: 10px; } /* --------------- comments -------------- */ #respond h3#reply-title { font-weight: normal; font-size: 32px; } #respond input[type=text] { max-width: 550px; } #respond input, #respond textarea { background: #f2f2f2; border: solid 1px #cccccc; color: #777777; outline: none; } #respond .comment-form-author, #respond .comment-form-email, #respond .comment-form-url, #respond .comment-form-comment { position: relative; } #respond .comment-form-author input, #respond .comment-form-email input, #respond .comment-form-url input, #respond .comment-form-comment input, #respond .comment-form-author textarea, #respond .comment-form-email textarea, #respond .comment-form-url textarea, #respond .comment-form-comment textarea { padding: 4px 5px 5px 10px; border-radius: 0; } #respond .comment-form-author label, #respond .comment-form-email label, #respond .comment-form-url label, #respond .comment-form-comment label { background: black; color: #ffffff; border-bottom: solid 1px black; padding: 5px; margin-right: -5px; min-width: 70px; } #respond .comment-form-comment label { margin-bottom: 0px; } #respond .form-submit input[type=submit] { box-shadow: none; text-shadow: none; padding: 10px; background: #ffffff; font-weight: bold; color: black; margin-bottom: 60px; } #respond .comment-notes, #respond .logged-in-as { color: #777777; } #comments { margin-top: 55px; } #comments h2.comments-title { font-size: x-large; } #comments ol.comment-list { list-style: none; margin-left: 0px; } #comments li.comment { border: solid 1px #e0e0e0; padding: 10px; margin-top: 15px; list-style: none; background: #f7f7f7; } #comments li.comment .comment-content { color: #777777; font-weight: normal; } #comments li.trackback { background: #ffffff; padding: 10px; margin-top: 15px; margin-bottom: 15px; border: solid 1px #eee; font-weight: bold; } #comments li.trackback a { font-weight: normal; } #comments .vcard img { border: solid 4px #ffffff; border-radius: 5px; margin: 0 10px 10px 0; } #comments .form-allowed-tags { display: none; } #comments .comment-metadata { font-weight: bold; } #comments .comment-metadata time { float: right; color: #b3b3b3; font-weight: lighter; font-style: italic; font-size: 12px; } @media screen and (max-width: 480px) { li.comment { margin-left: -5%; } }