/* page layout styles */
*{
    margin:0;
    padding:0;
}

/* fade slider for product */
#valves-cocks.slides{
	width:200px;
	height:155px;
	background:#E7E7E7;
	margin: 7px 0;
	border:1px solid #ACACAB;
}
#valves-cocks.slides ul li img{
	margin: 0;
	border:0;
}
#valves-cocks.slides ul li {
    opacity:0;
    position:absolute;
    top:0;

    /* css3 animation */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 15.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 15.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

/* css3 delays */
#valves-cocks.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 3.0s;
    -moz-animation-delay: 3.0s;
}
#valves-cocks.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
#valves-cocks.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 9.0s;
    -moz-animation-delay: 9.0s;
}
#valves-cocks.slides ul  li:nth-child(5), .slides ul  li:nth-child(5) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}

/* fade slider  for 3 product slider     */
#valves-cocks.slides.p3 ul li {
    opacity:0;
    position:absolute;
    top:0;

    /* css3 animation */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 9.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 9.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

/* css3 delays */
#valves-cocks.slides.p3 ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 3.0s;
    -moz-animation-delay: 3.0s;
}
#valves-cocks.slides.p3 ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
/*  /fade slider for 3 product slider     */

/* fade slider  for 4 product slider     */
#valves-cocks.slides.p4 ul li {
    opacity:0;
    position:absolute;
    top:0;

    /* css3 animation */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 12.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 12.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

/* css3 delays */
#valves-cocks.slides.p4 ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 3.0s;
    -moz-animation-delay: 3.0s;
}
#valves-cocks.slides.p4 ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
#valves-cocks.slides.p4 ul  li:nth-child(4), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 9.0s;
    -moz-animation-delay: 9.0s;
}
/*  /fade slider for 4 product slider     */


/* fade slider */
.slides {
    height: 280px;
    overflow: hidden;
    position: relative;
    width: 350px;
}
.slides img { max-width:100%; }
.slides ul {
    list-style:none;
    position:relative;
}

/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
@-moz-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

.slides ul li {
    opacity:0;
    position:absolute;
    top:0;

    /* css3 animation */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

/* css3 delays */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}
.slides ul li img {
    display:block;
}

/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}

.slides ul li div {
    background-color:#000000;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:26px;
    left:10%;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top:50%;
    width:200px;

    /* css3 animation */
    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_titles;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}


#popupbg{background:url(../images/bg-pattern-3.gif) repeat;
	 height:880px;
	 width:100%;
	 position:absolute;
	 z-index:5;
	 opacity:0.8;


}
#popup{
	position:absolute;
	 width:100%;
	 z-index:15;
}
.popup {
	background: url(../images/overlay.png) repeat 0 0;
	position: relative;
	width: 520px;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9999;
	overflow: hidden;
	opacity: 0.9;
	cursor: pointer;
	margin:12% auto;
}

.popup-txt {
	
}
.closebtn {
	
	
	width: 24px;
	height: 24px;
	margin-left:230px; 	
}