/*--------css for era template Create by Pervez on 17.04.15------------*/

    .anccss {
        }
      
        #dvfixed {
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: rotate(90deg);
            position:absolute;left:0px;top:86px;
            z-index:100;
        }

        
.nav ul {
    float:right;
    width:60%;
  list-style: none;
  background-color: #22B8D5;
  text-align: center;
  padding: 0;
  margin: 0;
}

.nav li {
  font-family: 'Oswald', sans-serif;
  font-size:14px;
  line-height: 20px;
  text-align: left;
}

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  padding-left: 5px;
  border-bottom: 1px solid #888;
  transition: .3s background-color;
}

.nav a:hover {
  background-color: #46b8da;
  color:gray;
}

/*.nav a.active {
  background-color: #aaa;
  color: #444;
  cursor: default;
}*/

/* Sub Menus */
.nav li li {
  font-size: 11px;
}

/*******************************************
   Style menu for larger screens

   Using 650px (130px each * 5 items), but ems
   or other values could be used depending on other factors
********************************************/
        @media screen and (min-width: 650px) {
            .nav li {
                width: 120px;
                border-bottom: none;
                height: 25px;
                line-height: 25px;
                font-size: 14px; /**14px;*/
                display: inline-block;
                margin-right: -4px;
            }

            .nav a {
                border-bottom: none;
            }

            .nav > ul > li {
                text-align: center;
            }

                .nav > ul > li > a {
                    padding-left: 0;
                }
            /* Sub Menus */
            .nav li ul {
                position: absolute;
                display: none;
                width: inherit;
            }

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

            .nav li ul li {
                display: block;
            }

            img {
                width: 100%;
            }

            #exampleSlider {
                max-height: 250px;
                overflow: hidden;
                list-style: none;
                padding: 0;
                margin: 0;
            }

            /*** SPECIAL FX ***/
            .slideLeft {
                animation-name: slideLeft;
                -webkit-animation-name: slideLeft;
                animation-duration: 1s;
                -webkit-animation-duration: 1s;
                animation-timing-function: ease-in-out;
                -webkit-animation-timing-function: ease-in-out;
                visibility: visible!important;
            }

            @keyframes slideLeft {
                0% {transform: translateX(150%);}
                50% {transform: translateX(-8%);}
                65% {transform: translateX(4%);}

                80% {transform: translateX(-4%);}

                95% {transform: translateX(2%);}
                100% {transform: translateX(0%);}
            }

            @-webkit-keyframes slideLeft {
                0% { -webkit-transform: translateX(150%);}
                50% {-webkit-transform: translateX(-8%);}
                65% {-webkit-transform: translateX(4%);}
                80% {-webkit-transform: translateX(-4%);}
                95% {-webkit-transform: translateX(2%);}
                100% {-webkit-transform: translateX(0%);}
            }

            .slideRight {
                animation-name: slideRight;
                -webkit-animation-name: slideRight;
                animation-duration: 1s;
                -webkit-animation-duration: 1s;
                animation-timing-function: ease-in-out;
                -webkit-animation-timing-function: ease-in-out;
                visibility: visible!important;
            }

            @keyframes slideRight {
                0% {transform: translateX(-150%);}
                50% {transform: translateX(8%);}
                65% {transform: translateX(-4%);}
                80% {transform: translateX(4%);}
                95% {transform: translateX(-2%);}
                100% {transform: translateX(0%);}
            }
            @-webkit-keyframes slideRight {
                0% {-webkit-transform: translateX(-150%);}
                50% {-webkit-transform: translateX(8%);}
                65% {-webkit-transform: translateX(-4%);}
                80% {-webkit-transform: translateX(4%);}
                95% {-webkit-transform: translateX(-2%);}
                100% {-webkit-transform: translateX(0%);}
            }

            .fadeIn {
                animation-name: fadeIn;
                -webkit-animation-name: fadeIn;
                animation-duration: 1.5s;
                -webkit-animation-duration: 1.5s;
                animation-timing-function: ease-in-out;
                -webkit-animation-timing-function: ease-in-out;
                visibility: visible!important;
            }

            @keyframes fadeIn {
                0% {transform: scale(0);opacity: 0;}
                60% {transform: scale(1.1);}
                80% {transform: scale(0.9);
                    opacity: 1;
                }

                100% {transform: scale(1);
                    opacity: 1;
                }
            }
            @-webkit-keyframes fadeIn {
                0% {
                    -webkit-transform: scale(0);
                    opacity: 0;
                }

                60% {-webkit-transform: scale(1.1);}

                80% {
                    -webkit-transform: scale(0.9);
                    opacity: 1;
                }

                100% {
                    -webkit-transform: scale(1);
                    opacity: 1;
                }
            }

            .bigEntrance {
                animation-name: bigEntrance;
                -webkit-animation-name: bigEntrance;
                animation-duration: 1.6s;
                -webkit-animation-duration: 1.6s;
                animation-timing-function: ease-out;
                -webkit-animation-timing-function: ease-out;
                visibility: visible!important;
            }

            @keyframes bigEntrance {
                0% {
                    transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
                    opacity: .2;
                }

                30% {
                    transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
                    opacity: 1;
                }

                45% {
                    transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
                    opacity: 1;
                }

                60% {
                    transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
                    opacity: 1;
                }

                75% {
                    transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
                    opacity: 1;
                }

                90% {
                    transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
                    opacity: 1;
                }

                100% {
                    transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
                    opacity: 1;
                }
            }

            @-webkit-keyframes bigEntrance {
                0% {
                    -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
                    opacity: .2;
                }

                30% {
                    -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
                    opacity: 1;
                }

                45% {
                    -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
                    opacity: 1;
                }

                60% {
                    -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
                    opacity: 1;
                }

                75% {
                    -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
                    opacity: 1;
                }

                90% {
                    -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
                    opacity: 1;
                }

                100% {
                    -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
                    opacity: 1;
                }
            }

            .pullUp {
                animation-name: pullUp;
                -webkit-animation-name: pullUp;
                animation-duration: 1.1s;
                -webkit-animation-duration: 1.1s;
                animation-timing-function: ease-out;
                -webkit-animation-timing-function: ease-out;
                transform-origin: 50% 100%;
                -ms-transform-origin: 50% 100%;
                -webkit-transform-origin: 50% 100%;
            }

            @keyframes pullUp {
                0% {
                    transform: scaleY(0.1);
                }

                40% {
                    transform: scaleY(1.02);
                }

                100%,60% {
                    transform: scaleY(0.98);
                }

                80% {
                    transform: scaleY(1.01);
                }

                100% {
                    transform: scaleY(1);
                }
            }

            @-webkit-keyframes pullUp {
                0% {
                    -webkit-transform: scaleY(0.1);
                }

                40% {
                    -webkit-transform: scaleY(1.02);
                }

                100%,60% {
                    -webkit-transform: scaleY(0.98);
                }

                80% {
                    -webkit-transform: scaleY(1.01);
                }

                100% {
                    -webkit-transform: scaleY(1);
                }
            }

            .pullDown {
                animation-name: pullDown;
                -webkit-animation-name: pullDown;
                animation-duration: 1.1s;
                -webkit-animation-duration: 1.1s;
                animation-timing-function: ease-out;
                -webkit-animation-timing-function: ease-out;
                transform-origin: 50% 0;
                -ms-transform-origin: 50% 0;
                -webkit-transform-origin: 50% 0;
            }

            @keyframes pullDown {
                0% {
                    transform: scaleY(0.1);
                }

                40% {
                    transform: scaleY(1.02);
                }

                100%,60% {
                    transform: scaleY(0.98);
                }

                80% {
                    transform: scaleY(1.01);
                }

                100% {
                    transform: scaleY(1);
                }
            }

            @-webkit-keyframes pullDown {
                0% {
                    -webkit-transform: scaleY(0.1);
                }

                40% {
                    -webkit-transform: scaleY(1.02);
                }

                100%,60% {
                    -webkit-transform: scaleY(0.98);
                }

                80% {
                    -webkit-transform: scaleY(1.01);
                }

                100% {
                    -webkit-transform: scaleY(1);
                }
            }

            .stretchLeft {
                animation-name: stretchLeft;
                -webkit-animation-name: stretchLeft;
                animation-duration: 1.5s;
                -webkit-animation-duration: 1.5s;
                animation-timing-function: ease-out;
                -webkit-animation-timing-function: ease-out;
                transform-origin: 100% 0;
                -ms-transform-origin: 100% 0;
                -webkit-transform-origin: 100% 0;
            }

            @keyframes stretchLeft {
                0% {
                    transform: scaleX(0.3);
                }

                40% {
                    transform: scaleX(1.02);
                }

                100%,60% {
                    transform: scaleX(0.98);
                }

                80% {
                    transform: scaleX(1.01);
                }

                100% {
                    transform: scaleX(1);
                }
            }

            @-webkit-keyframes stretchLeft {
                0% {
                    -webkit-transform: scaleX(0.3);
                }

                40% {
                    -webkit-transform: scaleX(1.02);
                }

                100%,60% {
                    -webkit-transform: scaleX(0.98);
                }

                80% {
                    -webkit-transform: scaleX(1.01);
                }

                100% {
                    -webkit-transform: scaleX(1);
                }
            }

            .stretchRight {
                animation-name: stretchRight;
                -webkit-animation-name: stretchRight;
                animation-duration: 1.5s;
                -webkit-animation-duration: 1.5s;
                animation-timing-function: ease-out;
                -webkit-animation-timing-function: ease-out;
                transform-origin: 0 0;
                -ms-transform-origin: 0 0;
                -webkit-transform-origin: 0 0;
            }

            @keyframes stretchRight {
                0% {transform: scaleX(0.3);}
                40% {transform: scaleX(1.02);}
                100%,60% {transform: scaleX(0.98);}
                80% {transform: scaleX(1.01);}
                100% {transform: scaleX(1);}
            }

            @-webkit-keyframes stretchRight {
                0% {-webkit-transform: scaleX(0.3);}
                40% {-webkit-transform: scaleX(1.02);}
                100%,60% {-webkit-transform: scaleX(0.98);}
                80% {-webkit-transform: scaleX(1.01);}
                100% {-webkit-transform: scaleX(1);}
            }

            #exampleSlider {
                text-align: center;
                padding: 10px;
                height: 250px;
            }
             #exampleSlider li  {                
                    width:80%;
                    height: 300px;padding-left:10%;
                }
                #exampleSlider li span {
                    line-height:20px;
                    text-align:left;
                    float:left;
                    word-wrap: break-word;
                    width: 25%;
                    height: 250px;
                    border: 5px solid #22B8D5;
                    background-color:#46b8da;
                    overflow:hidden;
                    color:white;
                }
                #exampleSlider li img {
                   float:left;
                    width: 650px;
                    height: 300px;
                }
                /* --------------slider1 width 500-----------------------*/
                 #exampleSlider1 {
                text-align: center;
                padding: 10px;
                height: 250px;
            }
             #exampleSlider1 li  {                
                    width:80%;
                    height: 300px;padding-left:20%;
                }
                #exampleSlider1 li span {
                    line-height:20px;
                    text-align:left;
                    float:left;
                    word-wrap: break-word;
                    width: 25%;
                    height: 250px;
                    padding:5px;
                    background-color:#dff0d8;
                    overflow:hidden;
                    color:black;
                }
                #exampleSlider1 li img {
                   float:left;
                    width: 500px;
                    height: 250px;
                }
                /* --------------slider width 500-----------------------*/
                   #exampleSlider2 {
                text-align: center;
                padding: 10px;
                height: 250px;
                margin-bottom: 20px;
            }
             #exampleSlider2 li  {                
                    width:80%;
                    height: 250px;padding-left:10%;
                }
                #exampleSlider2 li span {
                    line-height:20px;
                    text-align:left;
                    float:left;
                    word-wrap: break-word;
                    width: 25%;
                    height: 250px;
                    /*border: 5px solid #22B8D5;*/
                    background-color:#46b8da;
                    padding:5px;
                    overflow:hidden;
                    color:white;
                }
                #exampleSlider2 li img {
                   float:left;
                    width: 500px;
                    height: 250px;
                }
        }


.scroll-pane1 {
    width:80%;
    padding-left:5%;
}

.scroll-pane1  img{
    width:144px;
    height:90px;
}
.ccd-box{width:150px;height:150px; float:left; text-align:center;
}
.ccd-box img{clear:both;
}