body{
font-family:;}
 .side_line{
 float :left;
 width:3%;
 height: 1060px;
 background-color:#f1f1f1;
     margin-top: -0.6%;
 
    margin-left: -.6%;}
 
  .side_line2{
 float :right;
 width:3%;
 height:1060px;
 background-color:#f1f1f1;
    margin-top: -0.6%;
     
    margin-right: -.6%;}
 
 .center {
    margin: auto;
    width: 80%;
     background-color:#fffff;
     height:800px;
}

 .up_header
   {
        float :right;
        font-family: 'AvenirNextLTPro-DemiCn';
        margin-top:1%;
        font-size: 1.4em;
    }

    .ad
    {
        float :right;
        font-family: 'AvenirNextLTPro-DemiCn';
        color:#5d5d5d;
        margin-bottom: 0.5%;
    }
 

ul {
    list-style-type: none;
   margin-top: 0px;
    
    padding: 0;
    overflow: hidden;
    background-color: white;
    width:100%;
    float:right;
}

li {
    float: left;
    color:white;
    
}

li a {
    display: block;
    color: #151515;
    text-align: right;
    padding: 10px 0px 10px 20px;
    text-decoration: none;
    font-size:13px;
}

li a:hover:not(.active) {
   color: grey;
}

.active {
    color: #4CAF50;
}

.bot_menu{
font-size:12px;
color:#5e5e5e;
 
}

.line{margin-top:4%;
float:left;
width:100%;
height:1px;
background-color:#cecece;}
.line1{margin-top: -15px;
    margin-bottom: -15px;
float:left;
width:100%;
height:1px;
background-color:#cecece;}

.qwe{border-bottom-style: solid;
    width: 5%;
    margin-left: 2%;}
    
        .mid
    {
        float:left;
        width:100%;
        height:350px;
        background-color:#f1f1f1;
        z-index:100;
    }
            .line1
    {
        margin-top:-15px;
        margin-bottom:-15px;
        float:left;
        width:100%;
        height:1px;
        background-color:#cecece;
    }
    .bot
    {
        margin-top:4%;
        float:left;
        width:100%;
        height:25%;
        background-color:#fffff;
        text-align:justify;
    }
    .bot1
    {
        margin-top:4%;
        float:left;
        width:100%;
        background-color:#fffff;
        text-align:justify;
    }
    .bot2
    {
        margin-top:4%;
        float:left;
        width:100%;
        background-color:#fffff;
        text-align:justify;
    }

    .bot p
    {
        font-family: 'AvenirNextLTPro-Cn';
        margin:3%;
        color:#231f20;
        line-height: 1.4em;
    }
    .bot1 p
    {
        font-family: 'AvenirNextLTPro-Cn';
        margin:3%;
        color:#231f20;
        line-height: 1.4em;
    }
    .bot2 p
    {
        font-family: 'AvenirNextLTPro-Cn';
        margin:3%;
        color:#231f20;
        line-height: 1.4em;
    }
.insti_bor{
width:12%;
height:1.7%;
border-bottom-style: solid;
 border-color:#cecece;
 margin-top:10px;
 border-width: 1px;
 margin-left: 3%;
}
.insti_bor1{
width:12%;
height:1.7%;
border-bottom-style: solid;
 border-color:#cecece;
 margin-top:13px;
 border-width: 1px;
 margin-left: 3%;
}
.insti_bor2{
width:12%;
height:1.7%;
border-bottom-style: solid;
 border-color:#cecece;
 margin-top:14px;
 border-width: 1px;
 margin-left: 3%;
}
.insti_tit{float:right;margin-right:80%;
font-size:20px;color:#231f20;font-family: 'AvenirNextLTPro-MediumCn';
    }
    .insti_tit1{float:right;margin-right:74%;
font-size:20px;color:#231f20;font-family: 'AvenirNextLTPro-MediumCn';
    }
    .insti_tit2{float:right;margin-right:69%;
font-size:20px;color:#231f20;font-family: 'AvenirNextLTPro-MediumCn';
    }
  
    .bot-img
    {
        height:80%;
        padding:5% 15%;
    }

    .bot_menu
    {
       font-family: 'AvenirNextLTPro-DemiCn';
        font-size:12px;
        color:#5e5e5e;
 
    }

    .line
    {
        margin-top:4%;
        float:left;
        width:100%;
        height:1px;
        background-color:#cecece;
    }
    @font-face {
    font-family: 'AvenirNextLTPro-Cn';
    src: url('./fonts/AvenirNextLTPro-Cn.otf');
   
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'AvenirNextLTPro-MediumCn';
    src: url('./fonts/AvenirNextLTPro-MediumCn.otf');
   
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'AvenirNextLTPro-DemiCn';
    src: url('./fonts/AvenirNextLTPro-DemiCn.otf');
   
    font-weight: normal;
    font-style: normal;

}
@media only screen and (min-width:150px) and (max-width:500px){
.body{margin:auto;
width:100%;
clear:both;
}



.main-b{display:none;}

.know{display:none;}
    
   .insti_bor{
display:none;
}
.insti_bor1{
display:none;
}
.insti_bor2{
display:none;
}
.insti_tit{float:left;
font-size:20px;color:#231f20;font-family: 'AvenirNextLTPro-MediumCn';
    }
    .insti_tit1{float:left;
font-size:20px;color:#231f20;font-family: 'AvenirNextLTPro-MediumCn';
    }
    .insti_tit2{float:left;
font-size:20px;color:#231f20;font-family: 'AvenirNextLTPro-MediumCn';
    }
    .line{
        margin-top:100px;
    }
    .bot
    {
        margin-top:4%;
        float:left;
        width:100%;
        height:40%;
        background-color:#fffff;
        text-align:justify;
    }
    .bot1
    {
        margin-top:80%;
        float:left;
        width:100%;
        height:15%;
        background-color:#fffff;
        text-align:justify;
    }
    .bot2
    {
        margin-top:5%;
        float:left;
        width:100%;
        height:10%;
        background-color:#fffff;
        text-align:justify;
    }
      .bot_menu
    {
        margin-top:50%;
       
    }
    
    .side_line{display:none;}
    .side_line2{display:none;}
    .center{width:100%;}

.acmpo{width:40%;font-size:40px;margin-top:-7%;margin-left:12%;}
ul{float:left;}
li{float:none;text-align:center;}

li a{text-align:center;}
li a:hover:not(.active) {
   background-color: #f1f1f1;
}
.c{display:none;}


}
</style>
</head>
<body >  


 <div>
 <div class="side_line">  </div>
 <div class="side_line2">  </div>
 <div class="center" >
 <div>
 <img src= "./img/logo.png">
 <div class="up_header"><div class ="ad">Advances in Materials & Processing Challenge & Opportunities</div>
  <div class="menu">
 <ul> 
    <li><div  a class="active" id="HOME" ><a href="index.html">HOME</a></div></li>
    <li><div id="ABOUT" ><a href="themes.html">THEMES</a></div></li>
    <li><div id="REGISTRATION"><a href="registration.html">REGISTRATION</a></div></li>
    <li><div id="TRAVEL"><a href="travel.html">TRAVEL & ACCOMODATION</a></div></li>
    <li><div id="IMPORTANT DATES"><a href="imp-dates.html">IMPORTANT DATES</a></div></li>
        <li><div id="EVENT"><a href="events.html">EVENT </a></div></li>
            <li><div id="CONTACT"><a href="Contact.html">CONTACT</a></div></li>
</ul>
 </div>
 </div>
 </div>
  <div class="line1"></div>
 <div class="c" style="width:750px;margin:auto;" >
 
 
 <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/jssor.slider-21.1.5.mini.js"></script>
     <script>
        jQuery(document).ready(function ($) {
            
            var jssor_1_SlideoTransitions = [
              [{b:-1,d:1,o:-1},{b:0,d:1000,o:1}],
              [{b:1900,d:2000,x:-379,e:{x:7}}],
              [{b:1900,d:2000,x:-379,e:{x:7}}],
              [{b:-1,d:1,o:-1,r:288,sX:9,sY:9},{b:1000,d:900,x:-1400,y:-660,o:1,r:-288,sX:-9,sY:-9,e:{r:6}},{b:1900,d:1600,x:-200,o:-1,e:{x:16}}]
            ];
            
            var jssor_1_options = {
              $AutoPlay: true,
              $SlideDuration: 800,
              $SlideEasing: $Jease$.$OutQuint,
              $CaptionSliderOptions: {
                $Class: $JssorCaptionSlideo$,
                $Transitions: jssor_1_SlideoTransitions
              },
              $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$
              },
              $BulletNavigatorOptions: {
                $Class: $JssorBulletNavigator$
              }
            };
            
            var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
            
            //responsive code begin
            //you can remove responsive code if you don't want the slider scales while window resizing
            function ScaleSlider() {
                var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
                if (refSize) {
                    refSize = Math.min(refSize, 1920);
                    jssor_1_slider.$ScaleWidth(refSize);
                }
                else {
                    window.setTimeout(ScaleSlider, 30);
                }
            }
            ScaleSlider();
            $(window).bind("load", ScaleSlider);
            $(window).bind("resize", ScaleSlider);
            $(window).bind("orientationchange", ScaleSlider);
            //responsive code end
        });
    </script>
     <style>
        
        /* jssor slider bullet navigator skin 05 css */
        /*
        .jssorb05 div           (normal)
        .jssorb05 div:hover     (normal mouseover)
        .jssorb05 .av           (active)
        .jssorb05 .av:hover     (active mouseover)
        .jssorb05 .dn           (mousedown)
        */
        .jssorb05 {
            position: absolute;
        }
        .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
            position: absolute;
            /* size of bullet elment */
            width: 16px;
            height: 16px;
            background: url('img/b05.png') no-repeat;
            overflow: hidden;
            cursor: pointer;
        }
        .jssorb05 div { background-position: -7px -7px; }
        .jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
        .jssorb05 .av { background-position: -67px -7px; }
        .jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }

        /* jssor slider arrow navigator skin 22 css */
        /*
        .jssora22l                  (normal)
        .jssora22r                  (normal)
        .jssora22l:hover            (normal mouseover)
        .jssora22r:hover            (normal mouseover)
        .jssora22l.jssora22ldn      (mousedown)
        .jssora22r.jssora22rdn      (mousedown)
        */
        .jssora22l, .jssora22r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 40px;
            height: 58px;
            cursor: pointer;
            background: url('img/a22.png') center center no-repeat;
            overflow: hidden;
        }
        
        .jssora22l { background-position: -10px -31px; }
        .jssora22r { background-position: -70px -31px; }
        .jssora22l:hover { background-position: -130px -31px; }
        .jssora22r:hover { background-position: -190px -31px; }
        .jssora22l.jssora22ldn { background-position: -250px -31px; }
        .jssora22r.jssora22rdn { background-position: -310px -31px; }