@media only screen and (min-width:768px){
        .dropdown:hover > ul{display: block;}

}


@media only screen and (max-width:1220px){
    /* index */
    nav {padding-left: 150px;padding-top: 40px;}
    #bannercontent{padding: 0 20px 0 20px;}
    #banner p{margin-left:20px;}
    #banner h3 {margin-left:10px;}
    #banner h1{margin-left:0;}
    #mainsidea{padding-left:20px;padding: 0 20px 0 20px;box-sizing: border-box;}
    #mainsideb p{margin-right:0;}
    #mainsideb{padding-left: 20px;padding: 0 20px 0 20px;}
    #mainsidea p{margin-right:0px;}
    /*about */
    #banner h2{margin: 0 0 0 20px;}
    #socialmedia h2{margin:20px  0 15px 0px;}
    /* design */
    #sidebarimages iframe{width:330px;}
    /* contact */
    .banner1{text-align: center;}
    #sidebarimages{box-sizing: border-box;}
    
}

@media only screen and (max-width:1024px){
    nav {padding-left: 120px;}
    #banner h1{margin-left:0px;}
    #banner p{margin-left:0px;font-size: 15px;line-height:20px;}
    #banner ul{margin-left:40px;margin-right:0;}
    #banner h3 {margin-left:0px;}
    #mainsidea p{font-size: 15px;}
    /* contact */
    #banner p.contact{}
    #contactme{margin: 0;}
    /* design */
    #mainsidea h1{font-size:45px;} 
}

@media only screen and (max-width:991px){
    nav { padding-left: 10px;padding-top:20px;}
    #logo{width:25%;}
    #logo a img {width:200px;}
    nav > ul{width:75%;text-align: right;}
    /* index */
    #lightgallery img {margin-bottom:40px;}
    /* design */
    #sidebarimages img{padding-right:25px;}
    #socialmedia p{padding-left: 30px;margin-left:15px;}
    #socialmedia{padding: 20px 0;}
    /* illustyration */
    #sidebar4{padding-left:30px;}
    .lg-outer .lg-toogle-thumb{width:25px;}
    /* elctronic */
    #mainsidea h1{font-size: 30px;line-height: 40px;}
    #mainsidea h3 {font-size: 20px;line-height: 25px;} 
    #mainsideb h2{font-size: 33px;line-height: 38px;}
     #mainsidea h2{font-size: 33px;line-height: 38px;}
    .lg-sub-html{padding:10px 20px;}
}
@media only screen and (max-width:767px){
    /*menu */
     .side_bar ol,ul { list-style:none;}
     nav{display: none;}
    .side_bar{display:block;width: 250px;background:#04022f;height: 100%;position: fixed;top: 0;right: -250px;z-index: 99;transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-web-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;overflow: auto;padding: 25px 0;text-align: center;}
    .side_bar ul li a{font-size: 20px;line-height: 22px;color: #ffffff;display: block;text-decoration: none;font-family: 'Roboto', 'Arial' , 'Helvetica', sans-serif;}
    .side_bar ul li{padding: 5px 0;}
    .side_bar ul li a:hover{color: #00bcf7;}
    #nav-icon{width:40px; height:30px; position:relative; margin:0px auto; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);  -webkit-transition:.5s ease-in-out;  -moz-transition:.5s ease-in-out;  -o-transition:.5s ease-in-out;  transition:.5s ease-in-out;  cursor: pointer;}
    #nav-icon span{display: block;  position: absolute;  height:5px;  width: 100%;  background:#ffffff;  border-radius: 9px;  opacity: 1;  left: 0;  -webkit-transform: rotate(0deg);  -moz-transform: rotate(0deg);  -o-transform: rotate(0deg);  transform: rotate(0deg);  -webkit-transition: .25s ease-in-out;  -moz-transition: .25s ease-in-out;  -o-transition: .25s ease-in-out;  transition: .25s ease-in-out; }
    #nav-icon span:nth-child(1){top:0px;}
    #nav-icon span:nth-child(2){top:11px;}
    #nav-icon span:nth-child(3){top:22px;}
   .open #nav-icon span:nth-child(1){top:14px; -webkit-transform:rotate(135deg);  -moz-transform:rotate(135deg); -o-transform:rotate(135deg); transform:rotate(135deg);}
   .open #nav-icon span:nth-child(2){opacity:0; left:-60px;}
   .open #nav-icon span:nth-child(3){top:14px; transform: rotate(-135deg); -moz-transform:rotate(-135deg); -ms-transform:rotate(-135deg); -o-transform:rotate(-135deg); -webkit-transform:rotate(-135deg);}
    .menu{display: block;position: absolute;right: 25px;top:40px;}
    .open .side_bar{right: 0;}
    .open #wrapper{right: 240px;top: 0px;overflow: hidden;}
    .side_bar{display:block;}
    nav li:hover ul{display: none;}
    .dropdown > ul{position: static;}
    .side_bar ul li.dropdown > ul{display: none;background:#00bcf7;padding: 8px;}
    .side_bar ul li.dropdown > ul li:hover a{color: #ffffff;}
    /* index */
    #bannercontent{padding: 0 15px;}
    #lightgallery img{margin-bottom:30px;}
     #mainsidea a img{width: 100%;height: auto;}
    #mainsideb img{width:100%;height: auto;}
    #sidebarimages{padding: 0px;}
    #banner h1{font-size: 35px;line-height: 40px;margin: 20px 0 0 0;}
    .side_bar ul{padding: 0;}
    .side_bar nav{display: block;}
    #banner{display: block !important;}
    #bannerphoto{width:100%;}
     #bannerphoto img{width:100%;}
    #mainsidea h2{font-size:28px;line-height: 35px;}
    #mainsideb h2{font-size:28px;line-height: 35px;}
    #mainsidea {padding:0;}
    #mainsideb {padding: 0;}
    #banner p{margin: 0 0 20px 0;}
    #banner h3{margin: 0 0 10px 0;}
    #banner ul{list-style:disc;}
    #sidebar{width:40%;}
    #sidebar2{width:40%;}
    /*  design */
    #sidebar5{width:100%;box-sizing: border-box;padding: 0 10px;}
    #grid{display: block !important;width:100%;padding: 0 15px;}
    #adj #grid{display: block !important;width:100%;}
    .content1{display: block !important;}
    #sidebarimages img{width:100%;padding: 0;}
    #sidebarimages iframe{width:100%;margin: 0px 0 15px 0;}
    #mainsidea h1{font-size: 40px;line-height: 42px;}
    /* process */
    #sidebar3{width:100%;box-sizing: border-box;padding: 0 10px;}
    /*contact */
    #contactme{padding:0 0 20px 0;}
    /* illustration */
    #sidebar4{width:100%;padding: 0 10px 20px 10px;}
    .content2{display: block !important;}
    #sidebar4 iframe{width:100%;margin: 0 0 15px 0;}
    /* electronic media */
     #sidebar4 .player{max-width:100% !important;}
    .player{max-width: 100% !important;}
    /* contact */
    #socialmedia{padding:20px 0 10px 0;}
} 

@media only screen and (max-width:599px){
    /* index */
    .sidebar1{display: none;}
    #lightgallery img{margin-bottom: 10px;}
    #sidebar4 iframe{height: 250px;}
    #banner h1{margin:19px 0 0 0;}
    footer{padding: 10px 10px;}
    #banner ul{margin-left:0;margin-right:0;}
    #banner h2{margin: 0;}
    /*illustration */
   .lg-sub-html{padding:10px 10px;font-size: 14px;}
    /* work */
    #adj #sidebar2{display: none;}
    #mainsideb h2{font-size: 16px;line-height: 30px;}
     #mainsidea h2{font-size: 16px;line-height: 30px;}
    #mainsidea img{padding-top:40px;}
    #mainsideb img{padding-top:40px;}
    
    /*contact */
    #socialmedia h2{font-size:18px;margin: 0 0 10px 0;}
    #contactme{font-size: 14px;}
    #banner p.contact{margin: 0 0 10px 0;}
    
        
}   

@media only screen and (max-width:479px){
    .open #wrapper{right:220px;}
    /* index page */
    #sidebar{width:34%;}
    #sidebar4 iframe{height: 180px;}
    footer h5{font-size:12px;line-height: 18px;}
    #banner h3{font-size:15px;}
    #mainsidea p{font-size: 14px;line-height: 18px;}
    #mainsideb p{font-size: 14px;line-height: 18px;}
    #banner p{font-size: 14px;line-height: 18px;}
    #banner ul li{font-size:14px;}
    #logo a img{width:160px;}
    .menu {top:30px;}
    #banner h1 {font-size: 30px;line-height: 35px;}
    /* design */
    #mainsidea h1{font-size:30px;line-height:40px;}
    #mainsidea h3 {font-size: 16px;}
    /* contact */
    #socialmedia p{padding-left:20px;margin: 0;}
    #socialmedia h2{font-size: 18px;}
    /* ux_design */
    .player .vp-title .vp-title-header h1 {font-size:1.4em !important;}
    .player .vp-title{margin-right:1em !important;}
    .lg-sub-html {padding: 10px 40px;}
    #sidebarimages iframe{height: auto;}
   
}