/* 
	Theme Name: HYPEPOP
	Version: 1.0 / 2025
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

body { font-family: "Inter", sans-serif; background: #FFF; color: #111; font-size: 17px; }
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: #F6DD62; }
body::-webkit-scrollbar-thumb { background: #DE5D50; }

a { text-decoration: none; color: #DE5D50; }

.blue { color: #DE5D50; }
.yellow { color: #FFDE00; }
.pink { color: #DE5D50; }
.bg-blue { background: #DE5D50; }
.bg-yellow { background: #FFDE00; }
.bg-pink { background: #DE5D50; }

.container { position: relative; max-width: 1200px; }
.safetop { top: 180px; }
.wrapper {}

.top { position: fixed; z-index: 998; width: 100%; color: #FFF; font-size: 1em; box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px; transition: all ease .5s; }
.top a { color: #111; }
.top * { margin: 0; padding: 0; box-sizing: border-box; }
.top img { width: 200px; height: auto; }
.top ul { list-style: none; }
.sticky { position: fixed; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; }

.top .menu-topmenu-container {}
.top .menu-topmenu-container ul { list-style: none; margin: 0; padding: 0; }
.top .menu-topmenu-container ul li { display: inline-block; position: relative; padding: .5em 1em; }
.top .menu-topmenu-container ul li a { color: #FFF; }
.top .menu-topmenu-container ul li ul.sub-menu { visibility: hidden; opacity: 0; position: absolute; left: 50%; transform: translateX(-50%); top: 200%; width: 250px; padding: 1em; text-align: left; background: #FFF; border-radius: 0 0 .275rem .275rem; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; transition: all ease .5s; }
.top .menu-topmenu-container ul li:hover > ul.sub-menu { visibility: visible; opacity: 1; top: 100%; }
.top .menu-topmenu-container ul li ul.sub-menu li { display: block; padding: 0; margin: 0; }
.top .menu-topmenu-container ul li ul.sub-menu li a { color: #111; }

.desktop { display: block; }
.mobile { display: none; }

a.btn-login { background: #DE5D50; height: 40px; color: #FFF !important; margin: 5px 0 0 0; padding: 0 1em; }
a:hover.btn-login { background: #DE5D50; color: #FFDE00 !important; }

.template1 { position: relative; padding: 0; }
.template1 h1 { position: relative; font-size: 1em; text-transform: uppercase; font-weight: 800; margin: 0 0 1.5em 0; color: #DE5D50; }
.template1 h1:after { content: ''; position: absolute; height: 1px; width: 100px; background: #DE5D50; bottom: -.5em; left: 0; }
.template1 .box { position: relative; margin: 0 0 2em 0; }
.template1 .box a { color: #111; transition: all ease .5s; }
.template1 .box a:hover { color: #DE5D50; }
.template1 .box .image { position: relative; z-index: 1; width: 100%; height: 0; padding-bottom: 65%; margin: 0 0 1em 0; border-radius: .275rem; overflow: hidden; }
.template1 .box .image img { position: absolute; width: 100%; height: 100%; object-fit: cover; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.template1 .box .text { position: relative; z-index: 2; bottom: 0; left: 0; }
.template1 .box .text .category { text-transform: uppercase; margin: 0 0 1em 0; font-size: .8em; }
.template1 .box .text .category span { background: #DE5D50; padding: .25em .5em; color: #FFF; border-radius: .175rem; }
.template1 .box .text .title { margin: 0; }
.template1 .box .text .title h2 { font-size: 1em; font-weight: bold; }

.template2 { position: relative; padding: 3em 0 0 0; }
.template2 h1 { position: relative; font-size: 1.5em; text-transform: uppercase; font-weight: 800; margin: 0 0 1.5em 0; text-align: center; color: #DE5D50; }
.template2 h1:after { content: ''; position: absolute; height: 2px; width: 100px; background: #DE5D50; bottom: -.5em; left: 50%; transform: translateX(-50%); }
.template2 .box1 { position: relative; margin: 0 0 1.5em 0; }
.template2 .box1 a { color: #FFF; transition: all ease .5s; }
.template2 .box1 .image { position: relative; z-index: 1; width: 100%; height: 0; padding-bottom: 100%; border-radius: .275rem; overflow: hidden; }
.template2 .box1 .image img { position: absolute; width: 100%; height: 100%; object-fit: cover; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: all ease .5s; }
.template2 .box1:hover .image img { width: 105%; height: 105%; }
.template2 .box1 .text:before { content: ''; position: absolute; z-index: -1; left: 0; bottom: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); }
.template2 .box1 .text { position: absolute; z-index: 2; width: 100%; bottom: 0; left: 0; padding: 2em; color: #FFF;  border-radius: 0 0 .275rem .275rem; overflow: hidden;  }
.template2 .box1 .text .category { text-transform: uppercase; color: #FFF; margin: 0 0 1.5em 0; display: none; }
.template2 .box1 .text .category span { background: #DE5D50; padding: .5em; }
.template2 .box1 .text .title { margin: 0 0 1em 0; }
.template2 .box1 .text .title h2 { font-size: 2em; font-weight: bold; }
.template2 .box1 .text .misc {}
.template2 .box1 .text .misc span { margin: 0 1em 0 0; }
.template2 .box2 { position: relative; margin: 0 0 2em 0; }
.template2 .box2 a { color: #111; transition: all ease .5s; }
.template2 .box2 a:hover { color: #DE5D50; }
.template2 .box2 .image { position: relative; z-index: 1; width: 100%; height: 0; padding-bottom: 65%; margin: 0 0 1em 0; border-radius: .275rem; overflow: hidden; }
.template2 .box2 .image img { position: absolute; width: 100%; height: 100%; object-fit: cover; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: all ease .5s; }
.template2 .box2:hover .image img { width: 105%; height: 105%; }
.template2 .box2 .text { position: relative; z-index: 2; bottom: 0; left: 0; }
.template2 .box2 .text .category { text-transform: uppercase; color: #FFF; margin: 0 0 1em 0; font-size: .8em; display: none; }
.template2 .box2 .text .category span { background: #DE5D50; padding: .5em; }
.template2 .box2 .text .title { margin: 0 0 .5em 0; }
.template2 .box2 .text .title h2 { font-size: 1.2em; font-weight: bold; }
.template2 .box2 .text .misc { color: #999; font-size: .8em; }
.template2 .box2 .text .misc span { margin: 0 .5em 0 0; }

.template3 { position: relative; padding: 0; }
.template3 h1 { position: relative; font-size: 1.5em; text-transform: uppercase; font-weight: 800; margin: 0 0 1.5em 0; color: #DE5D50; }
.template3 h1:after { content: ''; position: absolute; height: 2px; width: 100px; background: #DE5D50; bottom: -.5em; left: 0; }
.template3 .box1 { position: relative; margin: 0 0 1.5em 0; }
.template3 .box1 a { color: #FFF; transition: all ease .5s; }
.template3 .box1 .image { position: relative; z-index: 1; width: 100%; height: 0; padding-bottom: 50%; border-radius: .275rem; overflow: hidden; }
.template3 .box1 .image img { position: absolute; width: 100%; height: 100%; object-fit: cover; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: all ease .5s; }
.template3 .box1:hover .image img { width: 105%; height: 105%; }
.template3 .box1 .text:before { content: ''; position: absolute; z-index: -1; left: 0; bottom: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); }
.template3 .box1 .text { position: absolute; z-index: 2; width: 100%; bottom: 0; left: 0; padding: 2em; color: #FFF;  border-radius: 0 0 .275rem .275rem; overflow: hidden;  }
.template3 .box1 .text .category { text-transform: uppercase; color: #FFF; margin: 0 0 1em 0; font-size: .8em; }
.template3 .box1 .text .category a span { background: #DE5D50; padding: .375em .75em .275em .75em; display: inline-block; margin: 0 0 .25em 0; border-radius: .175rem; }
.template3 .box1 .text .category a:hover { color: #FFF; }
.template3 .box1 .text .title { margin: 0 0 1em 0; }
.template3 .box1 .text .title h2 { font-size: 2em; font-weight: bold; }
.template3 .box1 .text .misc {}
.template3 .box1 .text .misc span { margin: 0 1em 0 0; }
.template3 .box2 { position: relative; margin: 0 0 2em 0; }
.template3 .box2 a { color: #111; transition: all ease .5s; }
.template3 .box2 a:hover { color: #DE5D50; }
.template3 .box2 .image { position: relative; z-index: 1; width: 100%; height: 0; padding-bottom: 59.5%; margin: 0 0 1em 0; border-radius: .275rem; overflow: hidden; }
.template3 .box2 .image img { position: absolute; width: 100%; height: 100%; object-fit: cover; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: all ease .5s; }
.template3 .box2:hover .image img { width: 105%; height: 105%; }
.template3 .box2 .text { position: relative; z-index: 2; bottom: 0; left: 0; }
.template3 .box2 .text .category { text-transform: uppercase; color: #FFF; margin: 0 0 1em 0; font-size: .7em; }
.template3 .box2 .text .category a span { background: #DE5D50; color: #FFF; padding: .375em .75em .275em .75em; display: inline-block; margin: 0 0 .25em 0; border-radius: .175rem; }
.template3 .box2 .text .category a:hover { color: #FFF; }
.template3 .box2 .text .title { margin: 0 0 .5em 0; }
.template3 .box2 .text .title h2 { font-size: 1.2em; font-weight: bold; }
.template3 .box2 .text .misc { color: #999; font-size: .8em; }
.template3 .box2 .text .misc span { margin: 0 .5em 0 0; }

.misc-box1 { margin: 69px 0 0 0; }

.sponsor { position: relative; margin: 0 0 1.5em 0; display: block; text-align: center; }
.sponsor img { width: 100%; height: auto; border-radius: .275rem; border: 1px solid #CCC; margin: 0 auto ; }
.sponsor-wide { position: relative; margin: 0 0 1.5em 0; display: block; text-align: center; }
.sponsor-wide img { width: 100%; max-width: 100%; height: auto; border-radius: .275rem; border: 1px solid #CCC; margin: 0 auto 1.5em auto; }

.shoparea { position: relative; padding: 3em 0; }
.shoparea * { transition: all ease .5s; }

.footer { position: relative; top: 180px; background: #DDD; }
.footer h3 { position: relative; font-size: 1em; text-transform: uppercase; font-weight: 800; margin: 0 0 1em 0; }
.footer h3:after { content: ''; position: absolute; height: 2px; width: 50px; background: #111; bottom: -.5em; left: 0; }
.footer-top { background: #DDD; padding: 3em 0 0 0; }
.footer-bottom { background: #CCC; padding: 1em 0; }
.footer ul { list-style: none; margin: 1.5em 0; padding: 0; }
.footer ul li { margin: 0 0 .5em 0; }
.footer ul li a { color: #111; transition: all ease .5s; }
.footer ul li a:hover { color: #DE5D50; }
.footer-top { margin: 0 0 2em 0; }
.footer .area { display: block; margin: 0 0 1em 0; }
.footer-top .area img { width: 200px; }
.footer span { display: inline-block; }

.footer .sosmed { position: relative; margin: 1.5em 0; padding: 0;  }
.footer .sosmed h2 { font-size: 1em; font-weight: bold; text-transform: uppercase; }
.footer .sosmed a { color: #FFF: }
.footer .sosmed .box { display: inline-block; font-size: 1.25em; margin: 0 5px 0 0; width: 40px; height: 40px; line-height: 40px; text-align: center; color: #FFF; border-radius: .275rem; }
.footer .sosmed .box i { font-size: 1em; }
.footer .sosmed .fb { background: #455996; }
.footer .sosmed .tw { background: #000; }
.footer .sosmed .ig { background: #C53C73; }
.footer .sosmed .tt { background: #111; }
.footer .sosmed .yt { background: #FF0033; }
.footer .sosmed span { position: relative; display: none; }

.search { cursor: pointer; color: #FFF; }
.search:hover { color: #E4A622; }
.searcharea { display: none; position: fixed; z-index: 999; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,.75); backdrop-filter: blur(10px); }
.searchinput { position:absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 50%; }
.searchclose { position: absolute; right: 1em; top: 1em; font-size: 1.5em; cursor: pointer; color: #FFF; }
.searchlogo { position:absolute; left: 50%; bottom: 10%; transform: translateX(-50%); width: 240px; }
.searchlogo img { width: 100%; }
.searchinput input { background: #FFF; padding: 1em; border: 1px solid #DDD; border-radius: .275rem 0 0 .275rem; float: left; width: 90%; }
.searchinput .btn-search { float: left; width: 10%; height: 100%; background: #DE5D50; color: #FFF; border-radius: 0 .275rem .275rem 0; padding: 1em; text-align: center; }
.searchinput .btn-search:hover { float: left; width: 10%; height: 100%; background: #DE5D50; color: #FFF; border-radius: 0 .275rem .275rem 0; padding: 1em; text-align: center; }

.registrationinput { width: 100%; }
.logininput { width: 400px; /*margin: 0 auto; background: #FFE3F0; border: 1px dashed #DE5D50; border-radius: .275rem; padding: 1em;*/ }
.haveaccount { /*text-align: center; background: #EEE; border: 1px solid #DDD; border-radius: .275rem; padding: .375em .75em;*/ }

.rm_forgot_pass { text-align: left !important; margin: 0 0 1em 0; }
.rmformui .rmform-row .rmform-field .rmform-label {
	font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;
    font-size: 1em !important; 
    line-height: 1.6;
    margin: 0 !important; 
}
.rmagic .rm-login-wrapper .rmrow .rminput input[type="text"], .rmagic .rm-login-wrapper .rmrow .rminput input[type="password"],
.rmformui .rmform-row .rmform-field input[type="text"]:not(:where(.rmform-ui.rmform-custom-form[data-design=matchmytheme] .rmform-row .rmform-field input[type="text"] )),
.rmformui .rmform-row .rmform-field input[type="password"]:not(:where(.rmform-ui.rmform-custom-form[data-design=matchmytheme] .rmform-row .rmform-field input[type="password"] )),
.rmformui .rmform-row .rmform-field input[type="email"]:not(:where(.rmform-ui.rmform-custom-form[data-design=matchmytheme] .rmform-row .rmform-field input[type="email"] )),
.rmformui .rmform-row .rmform-field input[type="url"]:not(:where(.rmform-ui.rmform-custom-form[data-design=matchmytheme] .rmform-row .rmform-field input[type="url"] )),
.rmformui .rmform-row .rmform-field input[type="file"]:not(:where(.rmform-ui.rmform-custom-form[data-design=matchmytheme] .rmform-row .rmform-field input[type="file"] )),
.rmformui .rmform-row .rmform-field input[type="tel"]:not(:where(.rmform-ui.rmform-custom-form[data-design=matchmytheme] .rmform-row .rmform-field input[type="tel"] )),
.rmformui .rmform-row .rmform-field input[type="number"]:not(:where(.rmform-ui.rmform-custom-form[data-design=matchmytheme] .rmform-row .rmform-field input[type="number"] )),
.rmformui .rmform-row .rmform-field textarea:not(:where(.rmform-ui.rmform-custom-form[data-design=matchmytheme] .rmform-row .rmform-field textarea )),
.rmformui .rmform-row .rmform-field select:not(:where(.rmform-ui.rmform-custom-form[data-design=matchmytheme] .rmform-row .rmform-field select )),
.rmagic .rmrow .rminput input[type="text"], .rmagic .rmrow .rminput input[type="password"], .rmagic .rmrow .rminput input[type="email"], .rmagic .rmrow .rminput input[type="url"],
.rmagic .rmrow .rminput input[type="number"], .rmagic .rmrow .rminput textarea { border-radius: .375rem !important; min-height: 50px !important; font-size: 1em !important; border: 1px solid rgba(128,128,128,0.5) !important; }
.rmagic .buttonarea input[type='button'], .rmagic .buttonarea input[type='submit'],
.rmformui #rm_form_submit_button input[type='button'], .rmformui #rm_form_submit_button input[type='submit'] { background: #DE5D50 !important; border-radius: .375rem !important; border: none !important; color: #FFF !important; box-shadow: none !important; font-size: 1em !important; min-height 50px; !important; font-weight: bold !important; }


.user { position: relative; }
.username { font-weight: bold; height: 40px; cursor: pointer; color: #FFF !important; background: #DE5D50; padding: .375rem .75rem 0 .75rem; border-radius: .25rem; }
.username i { font-size: .8em; }
.openusermenu { display: none; font-weight: normal; position: absolute; z-index: 999; padding: .5em 1em; top: 100%; right: 0; width: 200px; height: auto; background: #FFF; border: 1px solid #CCC; box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px; border-radius: .275rem; }
.openusermenu a { display: block; margin: .5em 0; color: #111 !important; transition: all ease .5s; }
.openusermenu a:hover { color: #DE5D50 !important; }
.openusermenu i { width: 25px; }

.inner { padding: 0 0 5em 0; }
.inner a { color: #DE5D50; }
.inner a:hover { color: #111; }
.inner h1 { font-size: 2em; margin: 0 0 .5em 0; font-weight: bold; }
.inner h2 { font-size: 1.5em; margin: 0 0 .5em 0; font-weight: bold; }
.inner h3 { font-size: 1.25em; margin: 0 0 .5em 0; font-weight: bold; }
.inner .meta { margin: 0 0 1.5em 0; }
.inner .meta span { margin: 0 .5em 0 0; }
.inner .image { margin: 0 0 1.5em 0; }
.inner .image img { width: 100%; height: auto; border-radius: .275rem; }
.inner .category { text-transform: uppercase; color: #FFF; margin: 0 0 1em 0; }
.inner .category a span { background: #DE5D50; padding: .5em; color: #FFF; font-size: .8em;  display: inline-block; margin: 0 0 .25em 0; border-radius: .175rem; }
.inner .category a:hover { color: #FFF; }
.inner .tags { padding: 1em 0; }
.inner .tags a { background: #DE5D50; padding: .375em .75em .275em .75em; color: #FFF; font-size: .8em;  display: inline-block; margin: 0 .25em .25em 0; border-radius: .175rem; }
.inner .sharing { padding: 1em 0; }
.inner .comments { padding: 3em 0 0 0; }
.inner .comments a { color: #DE5D50; }
.inner .comments h3 { margin: 0 0 1em 0; }
.inner .comments ol { list-style: none; margin: 0; padding: 0; }
.inner .comments .comment-body { border: 1px dashed #DE5D50; margin: 0 0 1em 0; padding: 1em; color: #111; border-radius: .275rem; }
.inner .comments ul.children { list-style: none; }
.inner .comments ul.children .comment-body { border: 1px dashed #DE5D50; margin: 0 0 1em 0; padding: 1em; }
.inner .comments .comment-meta { margin: 0 0 1em 0; font-size: .8em; }
.inner .comments .comment-author { font-weight: bold; }
.inner .comments .comment-author img { display: none; }
.inner .comments p a { color: #111; }
.inner .comments cite { font-style: normal !important; }
.inner .comments .mustlogin { background: #FFD9EA; border: 1px dashed #DE5D50; padding: 1em; text-align: center; }
.inner .comments .mustlogin a { font-weight: bold; color: #DE5D50; }
.inner .comments .logged-in-as { display: none; }
.inner .comments label { display: none; }
.inner .comments textarea { width: 100%; height: 150px; border-radius: .275rem; border-color: #111; padding: 1em; font-family: "Inter", sans-serif; }
.inner .comments .form-submit .submit { background: #DE5D50; border: none; padding: .75em 1em; color: #FFF; margin: 0 0 1em 0; border-radius: .275rem; }
.inner .comments .reply a { background: #DE5D50; color: #FFF; padding: .375em .75em; color: #FFF; font-size: .8em;  display: inline-block; margin: 0 0 .25em 0; border-radius: .175rem; }
.inner .archive { border-bottom: 1px solid #CCC; padding: 0 0 1.5em 0; margin: 0 0 1.5em 0; }
.inner .archive .image { position: }
.inner .archive .image { position: relative; z-index: 1; width: 100%; height: 0; padding-bottom: 70%; border-radius: .275rem; overflow: hidden; }
.inner .archive .image img { position: absolute; width: 100%; height: 100%; object-fit: cover; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: all ease .5s; }
.inner .archive .content {}
.inner .archive .content h2 { font-size: 1.25em; }
.inner .archive .content .category { text-transform: uppercase; color: #FFF; margin: 0 0 1em 0; font-size: .8em; }
.inner .archive .content .category a span { color: #FFF; padding: .375em .75em .275em .75em; display: inline-block; margin: 0 0 .25em 0; border-radius: .175rem; }
.inner .archive .content .category a:hover { color: #FFF; }
.inner .archive .content .misc-wraper { margin: .5em 0; }
.inner .archive .content .misc { color: #111; font-size: .8em; margin: 0 1em 0 0; }
.inner .archive .content .misc a { color: #DE5D50; }
.inner .archive .content .misc a:hover { color: #111; }


.inner .template1 { position: relative; padding: 0; }
.inner .template1 h1 { position: relative; font-size: 1em; text-transform: uppercase; font-weight: 800; margin: 0 0 1.5em 0; color: #DE5D50; }
.inner .template1 h1:after { content: ''; position: absolute; height: 1px; width: 100px; background: #DE5D50; bottom: -.5em; left: 0; }
.inner .sponsor { position: relative; margin: 0 0 1.5em 0; display: block; text-align: center; }
.sponsor img { width: 100%; height: auto; border-radius: .275rem; border: none; margin: 0 auto; }

.wp-pagenavi { clear: both; margin: 5em 0 0 0; font-size: 1.1em; }
.wp-pagenavi a { text-decoration: none; color: #DE5D50; padding: 0; margin: 0 1em 0 0; font-weight: bold; transition: all ease .5s; }
.wp-pagenavi a:hover { color: #111; }
.wp-pagenavi span { text-decoration: none; border: none; padding: 0; margin: 0 1em 0 0; }
.wp-pagenavi span.current { color:#111; padding: 0; margin: 0 1em 0 0; font-weight: normal; }

@media (max-width: 992px) {

.safetop { top: 100px; }

.desktop { display: none; }
.mobile { display: block; }

.top .menu-topmenu-container ul li { display: inline-block; padding: .5em 1em; width: 100%; border-bottom: 1px solid #DDD; }
.top .menu-topmenu-container ul li a { color: #111; }
.top .menu-topmenu-container ul li ul.sub-menu { visibility: hidden; opacity: 0; position: absolute; left: 0; transform: translateX(0); top: 0; width: 100%; height: 0; padding: 0; text-align: left; border-radius: 0; box-shadow: none; transition: all ease 0s; }
.top .menu-topmenu-container ul li:hover > ul.sub-menu { visibility: hidden; opacity: 0; top: 0; }
.top .menu-topmenu-container ul li ul.sub-menu.active { visibility: visible; opacity: 1; top: 0; height: auto; position: relative; }
.top .menu-topmenu-container ul li ul.sub-menu li { display: block; padding: .5em 1em; border-bottom: none; }
.top .menu-topmenu-container ul li ul.sub-menu li a { color: #111; }
.top .menu-topmenu-container ul li a i { transform: rotate(0deg); position: absolute; right: 1em; top: 13px; transition: all ease .5s; }
.top .menu-topmenu-container ul li a i.walik { transform: rotate(180deg); position: absolute; right: 1em; }


a.btn-login { height: 33px; margin: 0; padding: 0 1em; }
.username { padding: .2rem .5rem; height: 33px; }

.searchinput { width: 90%; top: 25%; }
.searchinput input { width: 80%; }
.searchinput .btn-search { width: 20%; }
.searchlogo { bottom: 25%; transform: translateX(-50%); width: 75%; }

.loginarea h3 { margin: 0 0 1em 0; }
.logininput { width: 90%; transform: translate(-50%,-63%); }

.template1 h1 { font-size: 1.25em; text-align: center }
.template1 h1:after { content: ''; position: absolute; height: 2px; width: 100px; background: #DE5D50; bottom: -.5em; left: 50%; transform: translateX(-50%); }
.template1 .box .text .category span { font-size: .8em; }

.template2 { padding: 2em 0 0 0; }
.template2 h1 { font-size: 1.25em; }
.template2 .box1 a { color: #111; }
.template2 .box1 .image { margin: 0 0 1em 0; padding-bottom: 60%; }
.template2 .box1:hover .image img { width: 100%; height: 100%; }
.template2 .box1 .text:before { display: none; }
.template2 .box1 .text { position: relative; padding: 0; color: #111; border-radius: 0; }
.template2 .box1 .text .category a span { color: #FFF; }
.template2 .box1 .text .category a:hover { color: #FFF; }
.template2 .box1 .text .title { margin: 0; }
.template2 .box1 .text .title h2 { font-size: 1.25em; }
.template2 .box1 .text .misc { font-size: .8em; }

.template3 { padding: 2em 0 0 0; }
.template3 h1 { font-size: 1.25em; text-align: center; }
.template3 h1:after { content: ''; position: absolute; height: 2px; width: 100px; background: #DE5D50; bottom: -.5em; left: 50%; transform: translateX(-50%); }
.template3 .box1 a { color: #111; }
.template3 .box1 .image { margin: 0 0 1em 0;}
.template3 .box1:hover .image img { width: 100%; height: 100%; }
.template3 .box1 .text:before { display: none; }
.template3 .box1 .text { position: relative; padding: 0; color: #111; border-radius: 0; }
.template3 .box1 .text .category a span { color: #FFF; font-size: .8em; }
.template3 .box1 .text .category a:hover { color: #FFF; }
.template3 .box1 .text .title { margin: 0; }
.template3 .box1 .text .title h2 { font-size: 1.25em; }
.template3 .box1 .text .misc { font-size: .8em; }

.inner .category { font-size: .8em; }
.inner h1 { font-size: 1.25em; }
.inner h2 { font-size: 1em; }
.inner h3 { font-size: 1em; }
.inner .meta { font-size: .8em; }

}