/*********************/
/*  CSS for Mobile   */
/*********************/

/*Header Menu only*/
@media only screen and (max-width: 767px){
    header{
        display:flex;
        
    }
    
    #top .logo{
        position:initial;
        max-width:20%;
    }
    
    #mainnav{
        right:0;
    }
    
    #mainnav .navbar .navbar-toggler{
        margin-right:-22px;
    }
    
    #top .row{
        align-items:flex-end;
        flex-direction:row-reverse;
        padding:0 15px;
        justify-content:space-between;
    }
    
    #top .row> *{
        margin:5px 0;
    }
    
    #top .row .login{
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translate(-50%);
        z-index:100000;
    }
    
    header #top .upload .btn-custom,
    header #top .search input{
        font-size:12px ;
    }
}

@media only screen and (max-width: 430px){
    #top .row{
        justify-content:center;
    }
    
    .search{
        order:22;
    }
    .upload{
        order:21;
        width:100%;
        text-align:center;
    }
}

/*********************************************/
@media only screen and (max-width: 1199px){
    .navbar-nav .nav-item{
        margin: 0;
    }
}

@media only screen and (max-width: 1024px){
    .navbar{
        justify-content:flex-end;
    }
}

@media only screen and (max-width: 991px){
    .navbar-collapse{
        background:#231f20;
    }
    
    .navbar .navbar-nav .nav-item .nav-link{
        padding-left:10px;
    }
    
    .navbar-dark .navbar-toggler-icon{
        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        
    }
    
    .navbar-dark .navbar-toggler{
        border-color: rgba(255,255,255,0);
    }
    
    .navbar .navbar-nav .nav-item.active > .nav-link,
    .navbar .navbar-nav .nav-item .nav-link:hover{
        font-weight:800;
        border:none;
        color:#e81c24;
    }
    
    .dropdown-menu .dropdown-item.active,
    .dropdown-menu .dropdown-item:hover, 
    .dropdown-menu .dropdown-item:focus{
        color:#e81c24;
    }

    /*27 June 2019*/
    .contact-info table{width:68%;}
}

@media only screen and (max-width: 767px){

    .sliders1 .row{flex-direction:column;}

    .earlyviews,
    .specialissues,
    .currentissues,
    .sliders1 .row .col-sm-4 .container{
        
       max-width:100%;
       padding:0;    
        
    }
    
    .sliders1 .row .col-sm-4{margin-bottom:0;}
    .home .sliders1{margin-bottom:0;}
    
    .early-text, .current-text, .special-text,.author-text, .archive-text{
        position:absolute;
        left:50% !important;
        right:auto;
        width:90%;
        transform: translate(-50%);
    }
    
    .home .author-archive .row{flex-direction:column;}
    .home .author-archive .row .col-sm-6{max-width:100%;padding:0;margin-bottom:0;}
    .home .author-archive .row .col-sm-6 .container{max-width:100%;}
    
    .home-brands .nomargin{margin:0;}
    .home-brands .img-fluid{
        max-width:100%;
        margin-left: auto;
        margin-right: auto;
    }
    
    
    .side-footer{padding: 0 20px;}
    .side-footer .container {padding-top:20px;}
    .side-footer .container .row > *{
        max-width:100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        padding:0;
        margin-bottom:20px;
    }
    
    .side-footer .container .row .col-sm-4 >*{
        margin-bottom:0;
    }
    
    #colophon .container{text-align:center; line-height:1;}
    #colophon p{font-size:14px;}
    #colophon a{float:none;font-size:14px;}
    #colophon{padding-bottom:10px;}
    
    .header-img .d-block{min-height: 250px;}
    .header-img .bg-head{min-height: 325px;}
    .header-img .title h1{
        font-size:4vw;
    }

    .about .circle-img.img-right{text-align:left;margin-bottom:35px !important;}
    .about .circle-img.img-left{margin-bottom:35px !important;}
    .about .circle-img .img-fluid{
        max-width:50%;
    }
    
    .message .aboutmjm{margin-bottom:0;}
    .about .aboutmjm{margin-bottom:0;}
    .aboutmjm .row{
        flex-direction:column-reverse;
    }
    
    .start2011 .row, .aimscope .row{flex-direction:column;}
    
    .aimscope .row .desc2{
        margin-top:-15px;
        margin-bottom:0;
    }
    
    .aboutmjm .row >*,
    .start2011 .row >*,
    .aimscope .row >*{
        max-width:100%;
    }
    
    .aboutmjm .col-sm-7{padding-left:15px;}
    
    .message .editor-img.img-right .sub-section{text-align:center;}
    .editor-img .sub-section:before{right:30%;}
    
    .manuscript .instruction{margin-top:-35px;margin-bottom:-35px;}
    .manuscript .instruction .headings h1,
    .manuscript .instruction .headings h2{
        font-size:5vw;
    }
    
    .viewtabs .forhead{
        flex-direction:column;
    }
    
    .viewtabs .forhead .col-sm-4{
        max-width:100%;
    }
    
    .contacting .contacting-row{
        flex-direction:column;
        margin-top: -35px;
    }
    
    .contacting .contacting-row >*{
        max-width:100%;
    }
    
    .contact .contacting-row .contact-info,
    .contact .contacting-row .contact-form{
        margin-bottom:0;
    }
    
    .contact-info .published-img img{
        /*padding-left:15px;
        padding-right:15px;*/
        max-width:50%;
    }
    
    .contact .center-logo .logo-size{
        max-width: 30%;    
    }
    
    .carousel-control-next-icon, .carousel-control-prev-icon{
        width:20px;
        height:20px;
    }
    
    .home-about .row{flex-direction:column-reverse;}
    .home-about .row >* {max-width:100%;}
    .home-about .row .col-sm-7{margin-top:0;}
    .home-about .circle-img .img-fluid{max-width:40%;}
    .home-about .circle-img{text-align:left;}
    
    .contact .contacting{margin-bottom:0px;}
    
    .contact-form .filling input{height:50px;}
    
    .home .sliders1{margin-top:-35px;}
    .home .author-archive{margin-top:0;}
    
    .home .home-about{margin-top:35px;}
    
    .home-author:hover > .author-text,
    .home-archive:hover > .archive-text{
        height:339px;
    }

    .side-footer .img-fluid{
        max-width:33%;
    }

    .contact .contact-info .row{
        padding-left:0;
        padding-right: 0;
    }

    .contact .contacting-bg h3{
        margin-top:20px;
    }

    .contact .contact-form .form{
        display:block;
    }

}

@media only screen and (max-width: 479px){

    .contact-info table{
        width:92%;
    }
    
    body h1{
        font-size:8vw;
    }
    
    .manuscript .instruction .headings h1{
        /*font-size:6vw !important;*/
        font-size:8vw !important;
    }
    
    body h2{
        font-size:8vw;
    }

    .contact .contact-form .form .form-group:nth-child(6){
        width:100%;
    }
    
    /*.details .accordion{
        font-size: 3.8vw;
    }*/
}

/*New Front End*/
/*Login,register,error,forget password pages*/
@media only screen and (max-width: 767px){
    .auth #mainnav{
        background:none;;
        position:absolute;
    }
    
    .auth h4{margin-top:35px;}
    
    .auth .error-alert h1{margin-top:35px;}
    .auth .error-alert p{margin-bottom:35px;}
    
    .auth .entry-content .row{margin:0;}
    
    .auth .input-group #email{
        width:100%;
    }
    
    .auth .input-group{
        display:block;
    }
    
    .auth .input-group .btn{
        margin-top:20px;
        background-color:#e81c24;
        border-color:#e81c24;
        border-radius:5px;
        font-weight:400;
        font-size:16px;
        padding: 0px 4px;
        color:#ffffff;
    }
    
    .auth #contact .row{
        margin-left:-15px;
        margin-right:-15px;
    }

/*    .slick-slide img{
        width:100%;
    }*/

    .contact-info table{width:100%;}
}

@media only screen and (max-width: 479px){
    .auth .row .span8 a{
        display:block;
        line-height: 0.5;
        
    }

    .slick-prev::after,
    .slick-next::after{
        position:relative;
    }

    .contact-info table tr{
        display: flex;
        flex-direction: column;
    }

}