/* --------------------------------------------------- Custom Styles for Smaller Devices --------------------------------------------------- */ body.page-template-default .wrap-middle, body.page-template-page-php .wrap-middle { width: 1275px !important; } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 1240px) and (max-width: 1800px) { /*----------------------------------------------------------------------------- ----------------------------- 1 - Layout -------------------------------------- -----------------------------------------------------------------------------*/ /* - Header - */ header div.wrap { width: 1240px; } /* - Layout content - */ .wrap-fullwidth { width: 1240px; } /* - Full Width (wider-content) - */ body.page-template-default .wrap-middle, body.page-template-page-php .wrap-middle { width: 1240px !important; } #wider-content header div.wrap { width: 1240px; } #wider-content .wrap-middle { width: 1240px; } #wider-content .modal-content { width: 1240px; } #wider-content ul.modern-articles { width: 1265px; } /* ##### Featured Articles ##### */ #wider-content .featured-articles-content { width: 1240px; } #wider-content ul.featured-articles { width: 1265px; } #wider-content ul.featured-articles li { width: 290px; } #wider-content ul.featured-articles li img { width: 290px; object-fit: cover; } #wider-content ul.featured-articles li.big, #wider-content ul.featured-articles li.big img { width: 605px; } #wider-content ul.featured-articles li.smallright { margin-left: 340px;} #wider-content ul.featured-articles li div.inner-big { width: 70%; } #wider-content ul.featured-articles li div.inner-small { width: 80%; } /* - page-content - */ .wrap-middle { width: 1240px; } .default-page-content { width: 910px; } /* - single-content - */ .single-content { width: 910px; } /*----------------------------------------------------------------------------- ----------------------------- 2 - Header -------------------------------------- -----------------------------------------------------------------------------*/ /* The Modal (for search) */ .modal-content { width: 1240px; } /*----------------------------------------------------------------------------- ----------------------------- 3 - Home Content -------------------------------- -----------------------------------------------------------------------------*/ /* ##### Featured Articles ##### */ .featured-articles-content { width: 1240px; height: 542px; } ul.featured-articles { width: 1265px; margin-left: -23px; } ul.featured-articles li { width: 290px; height: 193px; } ul.featured-articles li img { width: 290px; height: 193px; } ul.featured-articles li.big, ul.featured-articles li.big img { width: 605px; height: 324px; } ul.featured-articles li div.inner-big { margin: -324px auto 0 auto; } ul.featured-articles li div.inner-small { margin: -193px auto 0 auto; } ul.featured-articles li.smallleft { margin-top:-218px;} ul.featured-articles li.smallright { margin-top:-218px; margin-left: 340px;} /* ##### Modern Articles ##### */ ul.modern-articles { width: 1265px; margin: 0 0 0 -25px; } ul.modern-articles li { width: 228px; } ul.modern-articles li img { width: 228px; } /*----------------------------------------------------------------------------- ----------------------------- 4 - Entry Content ------------------------------- -----------------------------------------------------------------------------*/ /* -- Single Gallery -- */ .single-gallery img { width: 182px; height: 182px; } /* -- About Author -- */ .author-meta { width: 910px; } .author-left-meta { height: 120px; } ul.author-social-top { margin: -10px 0 0 -10px !important;} /* -- Relaed articles single page -- */ ul.related-posts { width: 936px; height: auto; float: left; margin-left: -25px; } ul.related-posts li { width: 287px; height: 191px; float: left; margin: 0 0 25px 25px; position: relative;overflow:hidden; } ul.related-posts li img { width: 287px; height: 191px; filter: alpha(opacity=0); opacity: 0.85; } ul.related-posts li div.inner-small { margin: -191px auto 0 auto; } /*----------------------------------------------------------------------------- ------------------------------ 9 - Footer ------------------------------------- -----------------------------------------------------------------------------*/ footer .top-entry { width: 1240px; } } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 1004px) and (max-width: 1238px) { /*----------------------------------------------------------------------------- ----------------------------- 1 - Layout -------------------------------------- -----------------------------------------------------------------------------*/ /* - Header - */ header div.wrap { width: 980px; } /* - Layout content - */ .wrap-fullwidth { width: 980px; } /* - Full Width (wider-content) - */ body.page-template-default .wrap-middle, body.page-template-page-php .wrap-middle { width: 980px !important; } #wider-content header div.wrap { width: 980px; } #wider-content .wrap-middle { width: 980px; } #wider-content .modal-content { width: 980px; } #wider-content ul.modern-articles { width: 1005px; } /* ##### Featured Articles ##### */ #wider-content .featured-articles-content { width: 980px; height: 580px; } #wider-content ul.featured-articles { width: 1005px; margin-left: -25px; } #wider-content ul.featured-articles li { width: 290px; height: 193px; } #wider-content ul.featured-articles li img { width: 290px; height: 193px; object-fit: cover; } #wider-content ul.featured-articles li.big, #wider-content ul.featured-articles li.big img { width: 665px; height: 411px; } #wider-content ul.featured-articles li.smallleft { margin-top:0px;} #wider-content ul.featured-articles li.smallright { margin-top:0px; margin-left: 0px;} #wider-content ul.featured-articles li div.inner-big { width: 70%; } #wider-content ul.featured-articles li div.inner-small { width: 80%; } #wider-content ul.featured-articles li:last-child { margin-left: 25px;} /* - page-content - */ .wrap-middle { width: 980px; } .default-page-content { width: 655px; } /* - single-content - */ .single-content { width: 655px; } /*----------------------------------------------------------------------------- ----------------------------- 2 - Header -------------------------------------- -----------------------------------------------------------------------------*/ /* -- Top social icons -- */ header ul.top-social li { display: none;} header ul.top-social li.sbtn { display: block;} /* The Modal (for search) */ .modal-content { width: 980px; } /*----------------------------------------------------------------------------- ----------------------------- 3 - Home Content -------------------------------- -----------------------------------------------------------------------------*/ /* ##### Featured Articles ##### */ .featured-articles-content { width: 980px; height: 580px; } ul.featured-articles { width: 1005px; margin-left: -25px; } ul.featured-articles li { width: 290px; height: 193px; } ul.featured-articles li img { width: 290px; height: 193px; } ul.featured-articles li.big, ul.featured-articles li.big img { width: 665px; height: 411px;} ul.featured-articles li div.inner-big { margin: -411px auto 0 auto; } ul.featured-articles li div.inner-small { margin: -193px auto 0 auto; } ul.featured-articles li.smallleft { margin-top:0px;} ul.featured-articles li.smallright { margin-top:0px; margin-left: 0px;} ul.featured-articles li:last-child { margin-left: 25px;} /* ##### Modern Articles ##### */ ul.modern-articles { width: 1005px; margin: 0 0 0 -25px; } ul.modern-articles li { width: 226px; } ul.modern-articles li img { width: 226px; } /* -- Banner Header -- */ .responsive-area { max-width: 980px; } /*----------------------------------------------------------------------------- ----------------------------- 4 - Entry Content ------------------------------- -----------------------------------------------------------------------------*/ /* -- Single Gallery -- */ .single-gallery img { width: 131px; height: 131px; } /* - Media single content without featured image -- */ .media-single-content .big-single-noimg div.inner-big { width: 80%; } /* - featured img / videos - */ .media-single-content .big-single { height: 351px; } .media-single-content .big-single img { height: 351px; } .media-single-content div.inner-big { width: 80%; margin: -347px auto 0 auto; } .media-single-content iframe.single_iframe { height: 351px;} /* -- single author avatar image -- */ .single-author-posts-img { margin: -15px 0 0 30px; } /* -- single author links -- */ ul.single-author-links { margin: -30px 0 0 120px; } /* -- Entry content style -- */ .entry { width: auto; height: auto; padding: 20px 30px; } /* -- About Author -- */ .author-meta-entry { padding: 45px 30px 30px 30px;} .author-meta { width: 655px; margin: 0 0 0 -30px; height: auto; float: left; } .author-left-meta { height: 120px; } /* -- Relaed articles single page -- */ ul.related-posts { width: 680px; height: auto; float: left; margin-left: -25px; } ul.related-posts li { width: 315px; height: 210px; } ul.related-posts li img { width: 315px; height: 210px; } /*----------------------------------------------------------------------------- ------------------------------ 9 - Footer ------------------------------------- -----------------------------------------------------------------------------*/ footer .top-entry { width: 980px; } /* -- Footer Social -- */ footer ul.top-social li a i { padding: 15px 0;} } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 760px) and (max-width: 1000px) { /*----------------------------------------------------------------------------- ----------------------------- 1 - Layout -------------------------------------- -----------------------------------------------------------------------------*/ /* - Header - */ header div.wrap { width: 750px; } /* - Layout content - */ .wrap-fullwidth { width: 750px; } .wrap-fullwidth-nobg { width: 750px; } /* - Full Width (wider-content) - */ body.page-template-default .wrap-middle, body.page-template-page-php .wrap-middle { width: 750px !important; } #wider-content header div.wrap { width: 750px; } #wider-content .wrap-middle { width: 750px; } #wider-content .modal-content { width: 750px; } #wider-content ul.modern-articles { width: 775px; } /* ##### Featured Articles ##### */ #wider-content .featured-articles-content { width: 750px; height: 580px; } #wider-content ul.featured-articles { width: 775px; margin-left: -25px; } #wider-content ul.featured-articles li { width: 362.5px; height: 241px; } #wider-content ul.featured-articles li img { width: 362.5px; height: 241px; object-fit: cover; } #wider-content ul.featured-articles li.big, #wider-content ul.featured-articles li.big img { width: 750px; height: 402px; } #wider-content ul.featured-articles li.smallleft { margin-top:0px;} #wider-content ul.featured-articles li.smallright { margin-top:0px; margin-left: 0px;} #wider-content ul.featured-articles li div.inner-big { margin: -402px auto 0 auto; } #wider-content ul.featured-articles li div.inner-small { margin: -241px auto 0 auto; } #wider-content ul.featured-articles li:last-child { margin-left: 25px;} /* - page-content - */ .wrap-middle { width: 750px; } .default-page-content { width: 750px; margin-bottom: 30px; /* for sidebar */ } .wrap-small-middle .entry, .wrap-small-middle2 .entry { padding: 20px 70px; } /* - single-content - */ .single-content { width: 750px; } /* - sidebar - */ .sidebar-wrapper { clear: both;} #sidebar { width: 750px; background-color: #FFF; float: none; margin: 0 auto 30px auto; padding: 30px 0 10px 0; border-bottom: 1px solid #dfdfdf; -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.1); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.1); box-shadow: 0 1px 4px rgba(0,0,0,0.1); } #sidebar.sb-right { float: none;} #sidebar .widget { margin-left: auto; margin-right: auto;} /* -- Comments -- */ #comments { margin-bottom: 30px; /* for sidebar */} /*----------------------------------------------------------------------------- ----------------------------- 2 - Header -------------------------------------- -----------------------------------------------------------------------------*/ /* -- Logo -- */ .logo { margin-left: 15px;} /* -- Top Header Menu -- ##################### */ .nav-kickcube_wp { display: none; } /* -- Responsive Menu -- */ .nav-kickcube_wp.mobile { display: block; } /* -- Top social icons -- */ ul.top-social { margin-right: 50px;} /* The Modal (for search) */ .modal-content { width: 750px; } /* The Close Button */ .close { margin: -45px 47px 0 0; } /*----------------------------------------------------------------------------- ----------------------------- 3 - Home Content -------------------------------- -----------------------------------------------------------------------------*/ /* ##### Featured Articles ##### */ .featured-articles-content { width: 750px; height: 580px; } ul.featured-articles { width: 775px; margin-left: -25px; } ul.featured-articles li { width: 362.5px; height: 241px; } ul.featured-articles li img { width: 362.5px; height: 241px; } ul.featured-articles li.big, ul.featured-articles li.big img { width: 750px; height: 402px;} ul.featured-articles li div.inner-big { margin: -402px auto 0 auto; } ul.featured-articles li div.inner-small { margin: -241px auto 0 auto; } ul.featured-articles li.smallleft { margin-top:0px;} ul.featured-articles li.smallright { margin-top:0px; margin-left: 0px;} ul.featured-articles li:last-child { margin-left: 25px;} /* ##### Modern Articles ############# ################################### */ ul.modern-articles { width: 775px; /* 750px from .wrap-content + 25px */ } ul.modern-articles li { width: 30%; margin: 0 0 3.33% 3.33%;} ul.modern-articles li img { width: 100%; height: auto; display: block;} /* -- Banner Header -- */ .responsive-area { max-width: 750px; } /*----------------------------------------------------------------------------- ----------------------------- 4 - Entry Content ------------------------------- -----------------------------------------------------------------------------*/ /* -- Single Gallery -- */ .single-gallery img { width: 150px; height: 150px; } /* - Media single content without featured image -- */ .media-single-content .big-single-noimg div.inner-big { width: 80%; } /* - featured img / videos - */ .media-single-content .big-single { height: 402px; } .media-single-content .big-single img { height: 402px; } .media-single-content div.inner-big { width: 80%; margin: -390px auto 0 auto; } .media-single-content iframe.single_iframe { height: 402px;} /* -- single author avatar image -- */ .single-author-posts-img { margin: -15px 0 0 30px; } /* -- single author links -- */ ul.single-author-links { margin: -30px 0 0 120px; } /* -- Entry content style -- */ .entry { width: auto; height: auto; padding: 20px 30px; } /* -- About Author -- */ .author-meta-entry { padding: 45px 30px 30px 30px;} .author-meta { width: 750px; margin: 0 0 0 -30px; height: auto; float: left; } .author-left-meta { height: 120px; } ul.author-social-top { margin: -10px 0 0 -10px !important;} /* -- Relaed articles single page -- */ ul.related-posts { width: 775px; margin-left: -25px; } ul.related-posts li { width: 362px; height: 241px; } ul.related-posts li img { width: 362px; height: 241px; } ul.related-posts li div.inner-small { margin: -240px auto 0 auto; } /*----------------------------------------------------------------------------- ----------------------------- 6 - Comments Form ------------------------------- -----------------------------------------------------------------------------*/ ul.comment li { padding: 50px 30px; } ul.comment li ul.children li { padding: 40px 30px;} /*----------------------------------------------------------------------------- ------------------------------ 9 - Footer ------------------------------------- -----------------------------------------------------------------------------*/ /* -- Top Footer Section -- */ footer .top-entry { width: 750px; } .top-footer-section h2 { font-size: 26px; font-weight: 400; } .top-footer-section p { padding: 30px 0; font-size: 18px; line-height: 30px; font-weight: 300;} /* -- Footer Social -- */ footer .sleft { float: left; padding-left: 20px;} footer .sright { float: left;} footer ul.top-social { margin-top: 5px; opacity: 0.5;} } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 580px) and (max-width: 760px) { /*----------------------------------------------------------------------------- ----------------------------- 1 - Layout -------------------------------------- -----------------------------------------------------------------------------*/ /* - Header - */ header div.wrap { width: 570px; } /* - Layout content - */ .wrap-fullwidth { width: 570px; } .wrap-fullwidth-nobg { width: 570px; } /* - Full Width (wider-content) - */ body.page-template-default .wrap-middle, body.page-template-page-php .wrap-middle { width: 570px !important; } #wider-content header div.wrap { width: 570px; } #wider-content .wrap-middle { width: 570px; } #wider-content .modal-content { width: 570px; } #wider-content ul.modern-articles { width: 595px; } /* ##### Featured Articles ##### */ #wider-content .featured-articles-content { width: 570px; min-height: 580px; } #wider-content ul.featured-articles { width: 595px; margin-left: -25px; } #wider-content ul.featured-articles li { width: 272.5px; height: 181px; } #wider-content ul.featured-articles li img { width: 272.5px; height: 181px; object-fit: cover; } #wider-content ul.featured-articles li.big, #wider-content ul.featured-articles li.big img { width: 570px; height: 181px; } #wider-content ul.featured-articles li.smallleft { margin-top:0px;} #wider-content ul.featured-articles li.smallright { margin-top:0px; margin-left: 0px;} #wider-content ul.featured-articles li div.inner-big { margin: -181px auto 0 auto; } #wider-content ul.featured-articles li div.inner-small { width: 95%; margin: -181px auto 0 auto; } #wider-content ul.featured-articles li:last-child { margin-left: 25px;} /* - page-content - */ .wrap-middle { width: 570px; } .default-page-content { width: 570px; margin-bottom: 30px; /* for sidebar */ } .wrap-small-middle { max-width: 570px; height: auto; margin: 25px auto; } .wrap-small-middle .entry, .wrap-small-middle2 .entry { padding: 20px 70px; } /* - single-content - */ .single-content { width: 570px; } /* - sidebar - */ .sidebar-wrapper { clear: both;} #sidebar { width: 570px; background-color: #FFF; float: none; margin: 0 auto 30px auto; padding: 30px 0 10px 0; border-bottom: 1px solid #dfdfdf; -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.1); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.1); box-shadow: 0 1px 4px rgba(0,0,0,0.1); } #sidebar.sb-right { float: none;} #sidebar .widget { margin-left: auto; margin-right: auto;} /* -- Comments -- */ #comments { margin-bottom: 30px; /* for sidebar */} /*----------------------------------------------------------------------------- ----------------------------- 2 - Header -------------------------------------- -----------------------------------------------------------------------------*/ /* -- Logo -- */ .logo { margin-left: 15px;} /* -- Top Header Menu -- ##################### */ .nav-kickcube_wp { display: none; } /* -- Responsive Menu -- */ .nav-kickcube_wp.mobile { display: block; } /* -- Top social icons -- */ ul.top-social { margin-right: 50px;} /* -- Big Search -- */ #searchform #search { width:500px; height: 40px; } /* The Modal (for search) */ .modal-content { width: 570px; } /* The Close Button */ .close { margin: -45px 47px 0 0; } /*----------------------------------------------------------------------------- ----------------------------- 3 - Home Content -------------------------------- -----------------------------------------------------------------------------*/ /* ##### Featured Articles ##### */ .featured-articles-content { width: 570px; min-height: 580px; } ul.featured-articles { width: 595px; margin-left: -25px; } ul.featured-articles li { width: 272.5px; height: 181px; } ul.featured-articles li img { width: 272.5px; height: 181px; object-fit: cover; } ul.featured-articles li.big, ul.featured-articles li.big img { width: 570px; height: 181px;} ul.featured-articles li div.inner-big { margin: -181px auto 0 auto; } ul.featured-articles li div.inner-small { width: 95%; margin: -181px auto 0 auto; } ul.featured-articles li.smallleft { margin-top:0px;} ul.featured-articles li.smallright { margin-top:0px; margin-left: 0px;} ul.featured-articles li:last-child { margin-left: 25px;} /* ##### Modern Articles ############# ################################### */ ul.modern-articles { width: 595px; /* 570px from .wrap-content + 25px */ } ul.modern-articles li { float: left; width: 30%; margin: 0 0 3.33% 3.33%;} ul.modern-articles li img { width: 100%; height: auto; display: block;} /* -- Banner Header -- */ .responsive-area { max-width: 570px; } .responsive-area img { width: 100%; height: auto;} /*----------------------------------------------------------------------------- ----------------------------- 4 - Entry Content ------------------------------- -----------------------------------------------------------------------------*/ /* -- Single Gallery -- */ .single-gallery img { width: 142.5px; height: 142.5px; } /* - Media single content without featured image -- */ .media-single-content .big-single-noimg div.inner-big { width: 80%; } /* - featured img / videos - */ .media-single-content .big-single { height: 305px; } .media-single-content .big-single img { height: 305px; } .media-single-content div.inner-big { width: 80%; margin: -310px auto 0 auto; } .media-single-content iframe.single_iframe { height: 305px;} /* -- single author avatar image -- */ .single-author-posts-img { margin: -15px 0 0 30px; } /* -- single author links -- */ ul.single-author-links { margin: -30px 0 0 120px; } /* -- Entry content style -- */ .entry { width: auto; height: auto; padding: 20px 30px; } /* -- About Author -- */ .author-meta-entry { padding: 45px 30px 30px 30px;} .author-meta { width: 570px; margin: 0 0 0 -30px; height: auto; float: left; } .author-left-meta { height: 120px; } /* -- Relaed articles single page -- */ ul.related-posts { width: 595px; margin-left: -25px; } ul.related-posts li { width: 272px; height: 181px; } ul.related-posts li img { width: 272px; height: 181px; } ul.related-posts li div.inner-small { margin: -185px auto 0 auto; } /*----------------------------------------------------------------------------- ----------------------------- 6 - Comments Form ------------------------------- -----------------------------------------------------------------------------*/ ul.comment li { padding: 50px 30px; } ul.comment li ul.children li { padding: 40px 30px;} /*----------------------------------------------------------------------------- ----------------------------- 8 - Custom Pages -------------------------------- -----------------------------------------------------------------------------*/ /*-- Registration --*/ .rcp_user_fieldset p { float: left; width: 45%; margin: 0 2.5% 0 2.5% !important;} .rcp_user_fieldset input { width: 180px;} /*----------------------------------------------------------------------------- ------------------------------ 9 - Footer ------------------------------------- -----------------------------------------------------------------------------*/ /* -- Top Footer Section -- */ footer .top-entry { width: 570px; } .top-footer-section h2 { font-size: 24px; font-weight: 400; } .top-footer-section p { padding: 30px 0; font-size: 15px; line-height: 24px; font-weight: 300;} /* -- Footer Social -- */ footer ul.top-social { margin-top: 5px; opacity: 0.5;} footer .sleft { float: left; padding-left: 20px;} footer .sright { float: left;} } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 580px) { /*----------------------------------------------------------------------------- ----------------------------- 1 - Layout -------------------------------------- -----------------------------------------------------------------------------*/ /* - Header - */ header div.wrap { width: 460px; } /* - Layout content - */ .wrap-fullwidth { width: 460px; } .wrap-fullwidth-nobg { width: 460px; } /* - Full Width (wider-content) - */ body.page-template-default .wrap-middle, body.page-template-page-php .wrap-middle { width: 460px !important; } #wider-content header div.wrap { width: 460px; } #wider-content .wrap-middle { width: 460px; } #wider-content .modal-content { width: 460px; } #wider-content ul.modern-articles { width: 485px; } /* ##### Featured Articles ##### */ #wider-content .featured-articles-content { width: 460px; height: auto; } #wider-content ul.featured-articles { width: 485px; margin-left: -25px; } #wider-content ul.featured-articles li { width: 460px; height: 150px; margin-right: 0px; margin-bottom: 0px; } #wider-content ul.featured-articles li img { width: 460px; height: 150px; object-fit: cover; } #wider-content ul.featured-articles li.big, #wider-content ul.featured-articles li.big img { width: 460px; height: 150px; } #wider-content ul.featured-articles li.smallleft { margin-top:0px;} #wider-content ul.featured-articles li.smallright { margin-top:0px; margin-left: 0px;} #wider-content ul.featured-articles li div.inner-big { margin: -145px auto 0 auto; } #wider-content ul.featured-articles li div.inner-small { width: 70%; margin: -145px auto 0 auto; } #wider-content ul.featured-articles li:last-child { margin-left: 25px;} #wider-content ul.featured-articles li h2 { font-size: 18px; font-weight: 400; line-height: 26px; } #wider-content ul.featured-articles li h2 span { font-size: 14px; line-height: 0px;} /* - page-content - */ .wrap-middle { width: 460px; } .default-page-content { width: 460px; margin-bottom: 30px; /* for sidebar */ } /* - single-content - */ .single-content { width: 460px; } /* - sidebar - */ .sidebar-wrapper { clear: both;} #sidebar { width: 460px; background-color: #FFF; float: none; margin: 0 auto 30px auto; padding: 30px 0 10px 0; border-bottom: 1px solid #dfdfdf; -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.1); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.1); box-shadow: 0 1px 4px rgba(0,0,0,0.1); } #sidebar.sb-right { float: none;} #sidebar .widget { margin-left: auto; margin-right: auto;} /* -- Comments -- */ #comments { margin-bottom: 30px; /* for sidebar */} /*----------------------------------------------------------------------------- ----------------------------- 2 - Header -------------------------------------- -----------------------------------------------------------------------------*/ /* -- Logo -- */ .logo { float: none; position: fixed; left: 50%; transform: translate(-50%, 0);} /* -- Top Header Menu -- ##################### */ .nav-kickcube_wp { display: none; } /* -- Responsive Menu -- */ .nav-kickcube_wp.mobile { display: block; } /* -- Top social icons -- */ ul.top-social { margin-right: 50px;} header ul.top-social li { display: none;} header ul.top-social li.sbtn { display: block;} /* -- Big Search -- */ #searchform #search { width:400px; height: 40px; } #searchform input { font-size: 22px; } /* The Modal (for search) */ .modal-content { width: 460px; } /* The Close Button */ .close { margin: -45px 47px 0 0; } /*----------------------------------------------------------------------------- ----------------------------- 3 - Home Content -------------------------------- -----------------------------------------------------------------------------*/ /* ##### Featured Articles ##### */ .featured-articles-content { width: 460px; height: auto; } ul.featured-articles { width: 485px; margin-left: -25px; } ul.featured-articles li { width: 460px; height: 150px; margin-right: 0px; margin-bottom: 0px; } ul.featured-articles li img { width: 460px; height: 150px; object-fit: cover; } ul.featured-articles li.big, ul.featured-articles li.big img { width: 460px; height: 150px; } ul.featured-articles li div.inner-big { margin: -145px auto 0 auto; } ul.featured-articles li div.inner-small { width: 70%; margin: -145px auto 0 auto; } ul.featured-articles li.smallleft { margin-top:0px;} ul.featured-articles li.smallright { margin-top:0px; margin-left: 0px;} ul.featured-articles li:last-child { margin-left: 25px;} ul.featured-articles li h2 { font-size: 18px; font-weight: 400; line-height: 26px; } ul.featured-articles li h2 span { font-size: 14px; line-height: 0px;} /* ##### Modern Articles ############# ################################### */ ul.modern-articles { width: 485px; /* 560px from .wrap-content + 25px */ } ul.modern-articles li { float: left; width: 45%; margin: 0 0 5% 5%;} ul.modern-articles li img { width: 100%; height: auto; display: block;} /* -- Banner Header -- */ .responsive-area { max-width: 460px; } .responsive-area img { width: 100%; height: auto;} /*----------------------------------------------------------------------------- ----------------------------- 4 - Entry Content ------------------------------- -----------------------------------------------------------------------------*/ /* -- Single Gallery -- */ .single-gallery img { width: 153.3px; height: 153.3px; } /* - Media single content without featured image -- */ .media-single-content .big-single-noimg div.inner-big { width: 80%; } .media-single-content .big-single-noimg h1 { font-size: 26px; font-weight: 600; line-height: 34px; } .media-single-content .big-single-noimg h1 span { font-size: 20px; } /* - featured img / videos - */ .media-single-content h1 { font-size: 26px; font-weight: 600; line-height: 34px; } .media-single-content h1 span { font-size: 20px; } .media-single-content .big-single { height: 246px; } .media-single-content .big-single img { height: 246px; } .media-single-content div.inner-big { width: 85%; margin: -247px auto 0 auto; } .media-single-content iframe.single_iframe { height: 246px;} /* -- single author avatar image -- */ .single-author-posts-img { margin: -15px 0 0 30px; } /* -- single author links -- */ ul.single-author-links { margin: -30px 0 0 120px; } ul.single-author-links li.single-author-time { display: none;} /* -- Entry content style -- */ .entry { width: auto; height: auto; padding: 20px 30px; } /* -- About Author -- */ .author-meta-entry { padding: 45px 30px 30px 30px;} .author-meta { width: 460px; margin: 0 0 0 -30px; height: auto; float: left; } .author-left-meta { height: 200px; } ul.author-social-top { margin: -30px 0 0 -20px !important;} /* -- Relaed articles single page -- */ ul.related-posts { width: 485px; margin-left: -25px; } ul.related-posts li { width: 217px; height: 145px; } ul.related-posts li img { width: 217px; height: 145px; } ul.related-posts li div.inner-small { width: 90%; margin: -140px auto 0 auto; } ul.related-posts li h4 { font-size: 14px; font-weight: 400; line-height: 22px; } /*----------------------------------------------------------------------------- ----------------------------- 6 - Comments Form ------------------------------- -----------------------------------------------------------------------------*/ ul.comment li { padding: 50px 30px; } ul.comment li ul.children li { padding: 40px 30px;} /* -- Comment Form -- */ #commentform { padding: 30px 30px 50px 30px;} /*----------------------------------------------------------------------------- ----------------------------- 8 - Custom Pages -------------------------------- -----------------------------------------------------------------------------*/ /* - page-content - */ .wrap-small-middle { max-width: 460px; height: auto; margin: 25px auto; } .wrap-small-middle2 { max-width: 350px; height: auto; margin: 100px auto; } .wrap-small-middle .entry, .wrap-small-middle2 .entry { padding: 20px 70px; } /*-- Card fieldset --*/ fieldset.rcp_card_fieldset { width: 100%; display: inline-block; margin-left: -3% !important; } fieldset.rcp_card_fieldset p { float: left; width: 100%; margin:0!important;} fieldset.rcp_card_fieldset input { width: 300px;} p#rcp_card_country_wrap select { width: 205px !important;} /*-- Registration --*/ .rcp_login_link { margin: -9px 0 0 -5px;} body.page-template-template-small-middle .responsive-area { display: none;} .rcp_user_fieldset { width: 100%; display: inline-block; margin-left: -3% !important; } .rcp_user_fieldset p { float: left; width: 100%; margin: 0 !important;} .rcp_user_fieldset input { width: 300px;} /*----------------------------------------------------------------------------- ------------------------------ 9 - Footer ------------------------------------- -----------------------------------------------------------------------------*/ /* -- Top Footer Section -- */ footer .top-entry { width: 460px; } .top-footer-section h2 { font-size: 24px; font-weight: 400; line-height: 46px; } .top-footer-section p { padding: 10px 0 30px 0; font-size: 18px; line-height: 26px; font-weight: 300;} /* -- Footer Copyright -- */ footer .sleft { float: left; padding-left: 20px; } footer .sright { float: left;} /* -- Footer Social -- */ footer ul.top-social { margin-top: 5px; opacity: 0.5;} footer ul.top-social li i { font-size: 16px; } footer ul.top-social li a i { padding: 15px 0px;} } /* All Mobile Size (devices) */ @media only screen and (max-width: 479px) { /*----------------------------------------------------------------------------- ----------------------------- 1 - Layout -------------------------------------- -----------------------------------------------------------------------------*/ /* - Header - */ header div.wrap { width: 98%; } /* - Layout content - */ .wrap-fullwidth { max-width: 98%; min-width: 300px; } .wrap-fullwidth-nobg { max-width: 98%; } /* - Full Width (wider-content) - */ body.page-template-default .wrap-middle, body.page-template-page-php .wrap-middle { width: 98% !important; } #wider-content header div.wrap { width: 98%; } #wider-content .wrap-middle { width: 98%; } #wider-content .modal-content { width: 98%; } #wider-content ul.modern-articles { width: 100%; } /* ##### Featured Articles ##### */ #wider-content .featured-articles-content { width: 100%; height: auto; display: block; } #wider-content ul.featured-articles { width: 100%; margin-left: -25px;} #wider-content ul.featured-articles li { width: 100%; height: 150px; margin-right: 0px; margin-bottom: 0px; } #wider-content ul.featured-articles li img { width: 100%; height: 150px; object-fit: cover; } #wider-content ul.featured-articles li.big, #wider-content ul.featured-articles li.big img { width: 100%; height: 150px; } #wider-content ul.featured-articles li.smallleft { margin-top:0px;} #wider-content ul.featured-articles li.smallright { margin-top:0px; margin-left: 0px;} #wider-content ul.featured-articles li div.inner-big { width: 90%; margin: -140px auto 0 auto; } #wider-content ul.featured-articles li div.inner-small { width: 90%; margin: -140px auto 0 auto; } #wider-content ul.featured-articles li:last-child { margin-left: 25px;} #wider-content ul.featured-articles li h2 { font-size: 18px; font-weight: 400; line-height: 26px; } #wider-content ul.featured-articles li h2 span { font-size: 14px; line-height: 0px;} /* - page-content - */ .wrap-middle { max-width: 98%; min-width: 300px; } .default-page-content { width: 98%; float: none; margin-left: auto; margin-right: auto; margin-bottom: 30px; /* for sidebar */ } /* - single-content - */ .single-content { width: 98%; float: none; margin-left: auto; margin-right: auto; } /* - sidebar - */ .sidebar-wrapper { clear: both;} #sidebar { width: 100%; background-color: #FFF; float: none; margin: 0 auto 30px auto; padding: 30px 0 10px 0; border-bottom: 1px solid #dfdfdf; -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.1); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.1); box-shadow: 0 1px 4px rgba(0,0,0,0.1); } #sidebar.sb-right { float: none;} #small-sidebar { display: none;} #sidebar .widget { margin-left: auto; margin-right: auto;} /* -- Comments -- */ #comments { margin-bottom: 30px; /* for sidebar */} /*----------------------------------------------------------------------------- ----------------------------- 2 - Header -------------------------------------- -----------------------------------------------------------------------------*/ /* -- Logo -- */ .logo { float: none; position: fixed; left: 50%; transform: translate(-50%, 0);} /* -- Top Header Menu -- ##################### */ .nav-kickcube_wp { display: none; } /* -- Responsive Menu -- */ .nav-kickcube_wp.mobile { display: block; } /* -- Top social icons -- */ ul.top-social { margin-right: 50px;} header ul.top-social li { display: none;} header ul.top-social li.sbtn { display: block;} /* -- Big Search -- */ #searchform #search { width:280px; height: 40px; } #searchform input { font-size: 18px; } /* The Modal (for search) */ .modal-content { width: 98%; } /* The Close Button */ .close { margin: -45px 47px 0 0; } /*----------------------------------------------------------------------------- ----------------------------- 3 - Home Content -------------------------------- -----------------------------------------------------------------------------*/ /* ##### Featured Articles ##### */ .featured-articles-content { width: 100%; height: auto; display: block; } ul.featured-articles { width: 100%; margin-left: -25px; } ul.featured-articles li { width: 100%; height: 150px; margin-right: 0px; margin-bottom: 0px;} ul.featured-articles li img { width: 100%; height: 150px; object-fit: cover; } ul.featured-articles li.big, ul.featured-articles li.big img { width: 100%; height: 150px; } ul.featured-articles li div.inner-big { margin: -140px auto 0 auto; } ul.featured-articles li div.inner-big { width: 90%; } ul.featured-articles li div.inner-small { width: 90%; margin: -140px auto 0 auto; } ul.featured-articles li.smallleft { margin-top:0px;} ul.featured-articles li.smallright { margin-top:0px; margin-left: 0px;} ul.featured-articles li:last-child { margin-left: 25px;} ul.featured-articles li h2 { font-size: 18px; font-weight: 400; line-height: 26px; } ul.featured-articles li h2 span { font-size: 14px; line-height: 0px;} /* ##### Modern Articles ############# ################################### */ ul.modern-articles { width: 100%; float: none; margin-left: auto; margin-right: auto; } ul.modern-articles li { float: none; width: 100%; height: auto; margin: 0 auto 25px auto;} ul.modern-articles li img { width: 100%; height: auto; display: block;} ul.modern-articles iframe { height: 200px;} /* -- Banner Header -- */ .responsive-area { max-width: 97%; } .responsive-area img { width: 100%; height: auto;} /* -- Top Articles by Likes -- */ #top-articles-slider { margin-top: 115px; } /*----------------------------------------------------------------------------- ----------------------------- 4 - Entry Content ------------------------------- -----------------------------------------------------------------------------*/ /* -- Single Gallery -- */ .single-gallery img { width: 50%; height: 50%; } /* - Media single content without featured image -- */ .media-single-content .big-single-noimg div.inner-big { width: 80%; } .media-single-content .big-single-noimg h1 { font-size: 26px; font-weight: 600; line-height: 34px; } .media-single-content .big-single-noimg h1 span { font-size: 20px; } /* - featured img / videos - */ .media-single-content h1 { font-size: 26px; font-weight: 600; line-height: 34px; } .media-single-content h1 span { font-size: 20px; } .media-single-content .big-single { height: 246px; } .media-single-content .big-single img { height: 246px; object-fit: cover; } .media-single-content div.inner-big { width: 85%; margin: -247px auto 0 auto; } .media-single-content iframe.single_iframe { height: 246px;} /* -- single author avatar image -- */ .single-author-posts-img { margin: -15px 0 0 30px; } /* -- single author links -- */ ul.single-author-links { margin: -30px 0 0 120px; } ul.single-author-links li.single-author-time { display: none;} ul.single-author-links li.single-author-location { display: none;} /* -- Entry content style -- */ .entry { width: auto; height: auto; padding: 20px 30px; } /* -- About Author -- */ .author-meta-entry { padding: 45px 0 30px 0;} .author-meta { display: none; width: 100%; margin: 0 0 0 0; height: auto; float: left; } .author-left-meta { height: auto; } .author-info p { display: none;} /* -- Author social icons -- */ ul.author-social-top { margin: -30px 0 0 60px !important;} ul.author-social-top li { font-size: 14px; } ul.author-social-top li a i { padding: 5px 6px;} /* -- Single Share -- */ #single-share { width:100%; height: auto; float: none; position: fixed; bottom: 0; top: inherit; } #single-share a { width:20%; float: left; display: block; border-radius: 0px !important;} #single-share a:hover { width:20%; opacity: 0.95; border-left: none;} /* -- Relaed articles single page -- */ ul.related-posts { width: 290px; float: none; margin: 0 auto; } ul.related-posts li { width: 290px; height: 193px; margin: 0 0 25px 0; } ul.related-posts li img { width: 290px; height: 193px; } ul.related-posts li div.inner-small { width: 80%; margin: -193px auto 0 auto; } ul.related-posts li h4 { font-size: 18px; font-weight: 400; line-height: 26px; } /*----------------------------------------------------------------------------- ----------------------------- 6 - Comments Form ------------------------------- -----------------------------------------------------------------------------*/ ul.comment li { padding: 50px 30px; } ul.comment li ul.children li { padding: 40px 15px;} ul.comment li ul.children li span.comm-avatar { display: none;} ul.comment li ul.children li div.comment-author { margin: 5px 0 0 0px; } ul.comment li ul.children li div.comment-date { margin: -13px 0 0 0px; } ul.comment li ul.children li div.comment-date { margin: 0px 0 0 0px; } /* -- Comment Form -- */ #commentform { padding: 30px 30px 50px 30px;} /*----------------------------------------------------------------------------- ----------------------------- 8 - Custom Pages -------------------------------- -----------------------------------------------------------------------------*/ /*-- Premium content page --*/ a.btn_orange, a.btn_black { width: 90%; margin-top: 20px; margin-left: 0px; padding: 12px 5% 9px 5%;} /* - page-content - */ .wrap-small-middle { width: 98%; height: auto; margin: 25px auto; } .wrap-small-middle2 { width: 98%; height: auto; } .wrap-small-middle .entry, .wrap-small-middle2 .entry { padding: 20px 30px; } /*-- Card fieldset --*/ fieldset.rcp_card_fieldset { width: 98%; display: inline-block; margin-left: 0 !important; } fieldset.rcp_card_fieldset p { float: left; width: 200px; margin: 0!important;} fieldset.rcp_card_fieldset input { width: 200px;} p#rcp_card_country_wrap select { width: 205px !important;} /*-- Registration --*/ .rcp_user_fieldset { width: 98%; display: inline-block; margin-left: 0px !important; } .rcp_user_fieldset p { float: left; width: 200px; margin: 0 !important;} .rcp_user_fieldset input { width: 200px;} /*-- Login --*/ fieldset.rcp_login_data input { width: 190px; } input#rcp_login_submit { width: 212px;} form#rcp_login_form { width: 220px; margin: 0 auto !important; } /*-- Login Social --*/ div.apsl-login-networks { width: 182px; margin-left: auto !important; margin-right: auto !important; float: none;} div.apsl-icon-block { width: 182px; margin-left: -19px; } /*-- Lost Pass --*/ form#rcp_lostpassword_form { width: 220px; margin: 0 auto !important; } /*-- Input Style --*/ .wrap-small-middle form label, .wrap-small-middle2 form label, .default-page-content form label { width: 200px; } /*-- Subscription Details --*/ th, td { padding: 25px 0; float: left; } /*----------------------------------------------------------------------------- ------------------------------ 9 - Footer ------------------------------------- -----------------------------------------------------------------------------*/ /* -- Top Footer Section -- */ footer .top-entry { width: 98%; } .top-footer-section h2 { font-size: 22px; font-weight: 400; line-height: 46px; } .top-footer-section p { padding: 10px 0 30px 0; font-size: 17px; line-height: 26px; font-weight: 300;} /* -- Footer Copyright -- */ footer .sleft { float: left; padding-left: 20px; } footer .sright { float: left;} /* -- Footer Social -- */ footer ul.top-social { margin-top: 20px; opacity: 0.5;} footer ul.top-social li i { font-size: 16px; } footer ul.top-social li a i { padding: 10px 0px; } /* -- Back to Top -- */ body.single #back-top { bottom: 50px; } /* -- Columns -- */ .one_half, .one_half_last { float:left;width:100%; margin-bottom:10px; margin-right:0; } .one_half_last { margin-right:0;} .one_third, .one_third_last { float:left; width:100%; margin-bottom:10px; margin-right:0; } .one_third_last { margin-right:0;} .one_fourth, .one_fourth_last { float:left; width:100%; margin-bottom:10px; margin-right:0; } .one_fourth_last { margin-right:0;} }