/* ==========================================================
   INFOWORLD V2
   RESPONSIVE.CSS
========================================================== */

/* ==========================================
   1600px
========================================== */

@media (max-width:1600px){

.container{

max-width:1400px;

}

}

/* ==========================================
   1400px
========================================== */

@media (max-width:1400px){

.container{

max-width:1200px;

}

.hero-slide img{

height:460px;

}

.cards{

grid-template-columns:repeat(3,1fr);

}

.category-grid{

grid-template-columns:repeat(3,1fr);

}

}

/* ==========================================
   1200px
========================================== */

@media (max-width:1200px){

.container{

width:min(100% - 30px,1140px);

}

/* Layout */

.main-layout{

grid-template-columns:1fr;

}

/* Hero */

.hero-grid{

grid-template-columns:1fr;

}

.hero-sidebar{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;

}

/* Category */

.category-layout{

grid-template-columns:1fr;

}

/* Grid */

.cards{

grid-template-columns:repeat(2,1fr);

}

.category-grid{

grid-template-columns:repeat(2,1fr);

}

.video-grid{

grid-template-columns:repeat(2,1fr);

}

/* Footer */

.footer-grid{

grid-template-columns:repeat(2,1fr);

}

}

/* ==========================================
   992px
========================================== */

@media (max-width:992px){

.topbar{

display:none;

}

.header-top{

flex-wrap:wrap;

height:auto;

padding:20px 0;

gap:20px;

}

.logo{

font-size:1.7rem;

}

.search-box{

width:100%;

max-width:none;

}

.main-nav ul{

overflow-x:auto;

justify-content:flex-start;

gap:18px;

padding-bottom:5px;

scrollbar-width:none;

}

.main-nav ul::-webkit-scrollbar{

display:none;

}

.hero-slide img{

height:380px;

}

.hero-content h1{

font-size:2rem;

}

.hero-overlay{

padding:30px;

}

.sidebar{

position:static;

}

}

/* ==========================================
   768px
========================================== */

@media (max-width:768px){

.container{

width:min(100% - 20px,100%);

}

/* Hero */

.hero-grid{

grid-template-columns:1fr;

}

.hero-sidebar{

grid-template-columns:1fr;

}

.hero-slide img{

height:300px;

}

.hero-content h1{

font-size:1.6rem;

}

.hero-content p{

display:none;

}

.hero-btn{

padding:12px 20px;

font-size:.9rem;

}

/* Card */

.cards{

grid-template-columns:1fr;

}

.category-grid{

grid-template-columns:1fr;

}

.video-grid{

grid-template-columns:1fr;

}

.latest-item{

grid-template-columns:1fr;

}

.latest-item img{

height:220px;

}

/* Horizontal */

.horizontal-card{

flex-direction:column;

}

.horizontal-card img{

width:100%;

height:220px;

}

/* Category */

.category-mini{

flex-direction:column;

}

.category-mini img{

width:100%;

height:180px;

}

/* Footer */

.footer-grid{

grid-template-columns:1fr;

}

.footer-bottom .container{

flex-direction:column;

text-align:center;

gap:15px;

}

}

/* ==========================================
   576px
========================================== */

@media (max-width:576px){

html{

font-size:15px;

}

.logo{

font-size:1.5rem;

}

.main-nav{

display:none;

}

.menu-toggle{

display:flex;

}

.hero{

margin:20px 0;

}

.hero-slide img{

height:240px;

}

.hero-overlay{

padding:20px;

}

.hero-content h1{

font-size:1.35rem;

margin-bottom:10px;

}

.section-header{

flex-direction:column;

align-items:flex-start;

gap:10px;

}

.newsletter-form{

flex-direction:column;

width:100%;

}

.newsletter-form button{

width:100%;

height:48px;

}

.footer-newsletter input,

.footer-newsletter button{

height:48px;

}

}

/* ==========================================
   375px
========================================== */

@media (max-width:375px){

.container{

width:calc(100% - 16px);

}

.hero-slide img{

height:200px;

}

.hero-content h1{

font-size:1.2rem;

}

.card-content{

padding:15px;

}

.section-header h2{

font-size:1.3rem;

}

.logo{

font-size:1.3rem;

}

.footer-brand h2{

font-size:1.5rem;

}

}

/* ==========================================
   PRINT
========================================== */

@media print{

header,

footer,

.sidebar,

.search-box,

.breaking,

.hero-arrow,

.hero-dots,

.newsletter,

.menu-toggle{

display:none !important;

}

body{

background:#fff;

color:#000;

}

.container{

width:100%;

}

}