@import url('https://fonts.googleapis.com/css?family=Roboto:300');


/*=======Common Style========*/
body,html{
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
	min-height: 100%;
	font-family: "Lato", sans-serif;
	background-color: #fff;
}
h1,p,h2,h3,h4,a{
	margin: 0px;
	padding: 0px;
}
a{
    text-decoration: none;
}
a:hover{
    text-decoration: none;
}
.container{
	width: 90%;
}
/*========Header Panel Style=============*/
    .main-menu{
        width: 100%;
        background: #ff4e02;
    }
    .logo-panel {
    position: relative;
    display: inline-block;
    float: left;
    padding: 0;
    margin: 0;
    z-index: 1;
    }
    #nav {
        list-style: none inside;
        margin: 0;
        padding: 0;
        text-align: center;
        position: relative;
        z-index: 11;
        float: left;
        display: block;
        }

        #nav li {
            display: block;
            position: relative;
            float: left;
            background: #ff4e02;
            /* menu background color */
        }

        #nav li a {
            display: block;
            padding: 10px;
            text-decoration: none;
            /*width: 200px;*/
            /* this is the width of the menu items */
            line-height: 75px;
            /* this is the hieght of the menu items */
            color: #ffffff;
            /* list item font color */
        }

        #nav li li a {
            font-size: 80%;
            width: 200px;
            line-height: 20px;
        }

        /* smaller font size for sub menu items */

        #nav li:hover {
            background: #dd4504;
        }

        /* highlights current hovered list item and the parent list items when hovering over sub menues */

        #nav ul {
            position: absolute;
            padding: 0;
            left: 0;
            display: none;
            /* hides sublists */
        }

        #nav li:hover ul ul {
            display: none;
        }

        /* hides sub-sublists */

        #nav li:hover ul {
            display: block;
        }

        /* shows sublist on hover */

        #nav li li:hover ul {
            display: block;
            /* shows sub-sublist on hover */
            margin-left: 200px;
            /* this should be the same width as the parent list item */
            margin-top: -35px;
            /* aligns top of sub menu with top of list item */
        }
        .social-icon{
            padding: 0px;
            position: relative;
            float: right;
            z-index: 1;
        }
        .social-icon ul li:nth-child(1){
            border-left: 1px solid #ff4e02;
        }
/*Slider start*/
    .bg-slider{
        position: relative;
        padding: 0px;
        margin: 0px;
        }
        .accordion {
          width: 100%;
          height: 100vh;
          overflow: hidden;
          margin: 0px auto;
        }
        .accordion ul {
          width: 100%;
          display: table;
          table-layout: fixed;
          margin: 0;
          padding: 0;
        }
        .accordion ul li {
          display: table-cell;
          vertical-align: bottom;
          position: relative;
          width: 16.666%;
          height: 100vh;
          background-repeat: no-repeat;
          background-position: center center;
          transition: all 500ms ease-in-out;
        }
        .accordion ul li div {
          display: block;
          overflow: hidden;
          width: 100%;
        }
        .accordion ul li div a {
          display: block;
          height: 100vh;
          width: 100%;
          position: relative;
          z-index: 3;
          vertical-align: bottom;
          padding: 15px 20px;
          box-sizing: border-box;
          color: #fff;
          text-shadow: 1px 1px 2px #000;
          /*filter: invert(100%);*/
          text-decoration: none;
          font-family: Open Sans, sans-serif;
          transition: all 300ms ease-in-out;
        }
        .accordion ul li div a * {
          opacity: 0;
          margin: 0;
          width: 100%;
          text-overflow: ellipsis;
          position: relative;
          z-index: 5;
          white-space: nowrap;
          overflow: hidden;
          -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
          -webkit-transition: all 400ms ease-in-out;
          transition: all 400ms ease-in-out;
        }
        .accordion ul li div a h2 {
          font-family: Montserrat, sans-serif;
          text-overflow: clip;
          font-size: 32px;
          text-transform: uppercase;
          margin-bottom: 2px;
          top: 160px;
        }

        .accordion ul li div a p {
          top: 160px;
          font-size: 18px;
          padding-left: 1em;
        }

        .accordion ul li:nth-child(1) { 
          background-image: url("image/image007.jpg");
          background-position: 50% 30%;
        }

        .accordion ul li:nth-child(2) { 
          background-image: url("image/product-img.jpeg"); 
         background-position: 70% 0%;
        }

        .accordion ul li:nth-child(3) { 
          background-image: url("image/IMG_0888.jpg"); 
        background-position: 50% 50%;
        }

        .accordion ul li:nth-child(4) { 
          background-image: url("image/IMG_0901.JPG"); 
          background-position: 30% 40%;
        }

        /*.accordion ul li:nth-child(5) { */
        /*  background-image: url("image/IMG_0878.JPG"); */
        /*  background-position: 60% 64%;*/
        /*}*/

        /*.accordion ul li:nth-child(6) { */
        /*  background-image: url("image/IMG_0884.JPG"); */
        /*  background-position: 70% 25%;*/
        /*}*/

        .accordion ul li { background-size: cover; }
        .accordion ul:hover li { width: 10%; }
        .accordion ul:hover li:hover { width: 90%; }

        /*.accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); }*/

        .accordion ul:hover li:hover a * {
          opacity: 1;
          -webkit-transform: translateX(0);
          transform: translateX(0);
        }
         @media screen and (max-width: 680px) {
          
          body { margin: 0; }
          .accordion { height: auto; }

          .accordion ul li,
          .accordion ul li:hover,
          .accordion ul:hover li,
          .accordion ul:hover li:hover {
            position: relative;
            display: table;
            table-layout: fixed;
            width: 100%;
            -webkit-transition: none;
            transition: none;
          }
          .accordion ul li div a * {
            opacity: 1;
            -webkit-transform: translateX(0);
            transform: translateX(0);
          }
        }


/*===========Page Style tab========*/
.main-panel{
    position: absolute;
    top: 95px;
    width: 100%;
    height: 100vh;
    }
.col-1{
    width: 25%;
}
.col-1,.col-2{
    display: inline-block;
    background-color: #ddd;
    height: 100%;
    min-height: 100%;
    float: left;
}

.col-2{
    width: 35%;
}
.col-1 img, .col-2 img{
    width: 100%;
    height: 100%;
}
.col-3{
    width: 40%;
    display: inline-block;
    position: relative;
    background-color: #ffffff;
    float: right;
    height: 100%;
    min-height: 100%;
}



/*==========Tab page close icon style========*/
.title{
    display: block;
    padding: 40px 0px 30px;
}
.close-icon{
    display: inline-block;
    }
.close-icon p{

}
.close-icon a{
    width: 50px;
    height: 60px;
    background-color: #ddd;
    display: block;
    text-align: center;
    font-size: 28px;
    font-family: 'Roboto', sans-serif;
    line-height: 60px;
    transition: 1s;
}
.close-icon a:hover{
    background-color: #f55e05;
}
.pg-title{
    display: inline-block;
}
.pg-title h3{
    font-size: 36px;
}
.contant{
    padding: 0px 3px 0px 60px;
}

.image-galary img{
    width: 100px;
    height: 150px;
}
.image-galary img:hover{
    background-color: #f55e05;
}
.mCustomScrollbar{
    max-height: 550px;
}
#about-panel, #contact-panel{
    z-index:22;
    position: relative;
    height: 100vh;
}

.footer-panel{
    text-align: center;
    background-color: #ff4e02;
}
.footer-panel p{
    color: #fff;
    line-height: 75px;
}