/*==========  Non-Mobile First Method  ==========*/
/* Large Devices, Wide Screens */
/* Medium Devices, Desktops @media only screen and (min-width: 768px) and (max-width: 991px) { */
@media only screen and (min-width: 768px) {
/* HEADER NAVIGATION BAR */
.header .navbar{margin-bottom:30px}
.header .navbar .navbar-header{float:none;margin-top:25px;text-align:center}
.header .navbar .main-navigation{margin-top:20px;padding:20px 0}
.header .navbar .main-navigation > ul > li > .dropdown-menu{border:none;border-radius:5px}
.header .navbar .main-navigation > ul > li > .dropdown-menu:before{position:absolute;border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid transparent;border-bottom:12px solid #fff;content:"";top:-22px;left:20px}
.header .navbar .main-navigation > ul > li > .dropdown-menu li:hover .sub-menu{visibility:visible}
.header .navbar .main-navigation > ul > li > .dropdown-menu li{position:relative}
.header .navbar .main-navigation > ul > li > .dropdown-menu .sub-menu{position:absolute;left:100%;top:0;border:none;display:block;visibility:hidden;margin-top:-1px}
.header .navbar .main-navigation .navbar-nav .dropdown{position:relative}
.header .navbar .main-navigation .navbar-nav .dropdown:hover .dropdown-menu{display:block}  

.blog-style-one{padding:20px}
article header.post-header{float:left;width:100%}
.blog-style-one .blog-item h1.title{font-size:3.5rem;font-weight:700;overflow-wrap:break-word}
.blog-style-one .blog-item h2.title{font-size:24px}
.blog-style-one .blog-item .meta-info{margin:10px 0}
.blog-style-one .blog-item .meta-info ul li{font-size:15px}
.blog-style-one .blog-item img.content{margin-bottom:20px;margin-top:20px}
.blog-style-one .comments-area h3{text-align:center}
.blog-style-one .comments-area p{text-align:center}
.blog-style-one .comments-area .comments p{text-align:left}
.blog-style-one .comments-area .comments > ul li ul{margin-left:0}
.blog-style-one .comment-form .comment-input input[type="text"]{width:100%}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
.header .navbar .main-navigation{margin-top:10px;padding:0}
}

/* Small Devices, Tablets */
@media only screen and (max-width: 767px) {
/* NAVIGATION BAR */
.header .navbar .navbar-brand{padding-top:25px;width:250px}
.header .navbar .navbar-brand img{width:60px;float:left;margin-right:10px}
.header .navbar .navbar-brand h1{font-size:24px;margin-top:15px}
.blog-style-one .blog-item h1.title{font-size:2.5rem;font-weight:700}
.blog-style-one .social-share .social-icons{float:none}
.blog-style-one .social-share .social-icons p{float:left}
.blog-style-one .social-share .social-icons ul{clear:unset;float:right}
.blog-style-one .about-author{text-align:center}
.blog-style-one .comments-area .comments > ul li .thumb{margin-bottom:10px}
.blog-style-one .comments-area .comments > ul li .thumb img{margin-right:10px}
.blog-style-one .comments-area .comments > ul li p{margin-top:20px}
.blog-style-one .comments-area .comments > ul li p a.author{margin-right:10px}
.blog-style-one .comments-area .comments > ul li p span{margin-right:10px}

/* FOOTER SECTION  */
.footer{text-align:center}
.footer .widget-the-reader .logo img{float:none;margin:0}

/* PAGINATION */
ul.navigate-page li a{font-size:13px}
.blog-style-two ul.navigate-page li:first-child,.blog-style-two ul.navigate-page li:last-child{width:60px}
.blog-style-two ul.navigate-page li{width:25px}
.navigate-page{margin:0 15px 35px;padding-top:0}  
}

/* Extra Small Devices, Phones */
@media only screen and (max-width: 480px) {
.header .navbar{margin-bottom:0}
.blog-style-one{padding:20px}
.blog-style-one .blog-item h2.title{font-size:22px}
.blog-style-one .blog-item .meta-info{margin:10px 0}
.blog-style-one .blog-item .meta-info ul li{font-size:15px}
.blog-style-one .blog-item p{font-size:16px}
.blog-style-one .blog-item img.content{margin-bottom:20px;margin-top:20px}
.blog-style-one .about-author{text-align:center}
.blog-style-one .comments-area h3{text-align:center}
.blog-style-one .comments-area p{text-align:center}
.blog-style-one .comments-area .comments p{text-align:left}
.blog-style-one .comments-area .comments > ul li ul{margin-left:0}
.blog-style-one .comment-form .comment-input input[type="text"]{width:100%}

/* PAGINATION */
.navigate-page { margin: 0 15px 35px; padding-top: 0; }
}

/* Custom, iPhone Retina */
@media only screen and (max-width: 360px) {
.header .navbar .navbar-brand{width:50px;padding-top:30px;padding-left:0;padding-right:0}
.header .navbar .navbar-brand img{width:45px}
.header .navbar .navbar-brand h1{display:none}
}