/*------------------------------------------------------------------------

        Name: Full Width Slider 2.0
        Design and Develpment: eightyclouds
        Author URI: http://www.eightyclouds.com
        Version: 1.0

--------------------------------------------------------------------------

   01. CSS Reset
   02. Slider Styles
   03. Media Query Max Width 1300, Min Width 720
   04. Media Query Max Width 719
   
/* ------------------------------- 2. Slider Styles ------------------------------- */

#fwslider {
  position: relative;
  max-width: 1200px;
  border: solid 0px red;
  clear: both;
}

#fwslider .slider_container {
  border: solid 0px green;
}

#fwslider .slide {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
}

#fwslider .slide img {
  width: 100%;
}
#fwslider .slidePrev {
  /*background:#45453C;*/
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: -50px;
  opacity: 0.5;
  z-index: 10;
  -moz-border-radius: 0 10px 10px 0;
  -webkit-border-radius: 0 10px 10px 0;
  -khtml-border-radius: 0 10px 10px 0;
  border-radius: 0 10px 10px 0;
}

#fwslider .slidePrev span {
  background-image: url("../images/prev.png");
  width: 50px;
  height: 50px;
  float: left;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 10;
}

#fwslider .slideNext {
  /*background:#45453C;*/
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  right: -50px;
  opacity: 0.5;
  z-index: 10;
  -moz-border-radius: 10px 0 0 10px;
  -webkit-border-radius: 10px 0 0 10px;
  -khtml-border-radius: 10px 0 0 10px;
  border-radius: 10px 0 0 10px;
}

#fwslider .slideNext span {
  background-image: url("../images/next.png");
  width: 50px;
  height: 50px;
  float: left;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 1;
}

#fwslider .timers {
  height: 4px;
  position: absolute;
  bottom: 15px;
  left: 15px;
  z-index: 3;
}

#fwslider .timer {
  height: 4px;
  width: 30px;
  background-color: #000;
  background-color: transparent;
  float: left;
  margin-right: 10px;
}

#fwslider .progress {
  height: 4px;
  width: 0%;
  background-color: #ccc;
  background-color: transparent;
  float: left;
}

#fwslider .slide_content {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}

#fwslider .slide_content_wrap {
  /* Slider Text Content Container Style */
  max-width: 1280px;
  margin: 15% auto;
}

#fwslider .title {
  /* Slider Title Style */
  opacity: 0;
  color: #fff;
  font-size: 36px;
  background: #000;
  padding: 10px;
  float: left;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
}

#fwslider .description {
  /* Slider Description Style */
  opacity: 0;
  color: #fc3;
  font-size: 18px;
  background: #000;
  padding: 10px;
  clear: both;
  float: left;
  margin-top: 2px;
  line-height: 24px;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
}

#fwslider .readmore {
  /* Slider Read More button Style */
  opacity: 0;
  clear: both;
  float: left;
  text-transform: uppercase;
  font-size: 10px;
  color: #919191;
  background: #000;
  padding: 10px;
  text-decoration: none;
  margin-top: 2px;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
}

#fwslider .readmore:hover {
  color: #fff;
}

.footer {
  width: 100%;
  float: left;
  text-align: center;
}

.footer p {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #585858;
  margin-top: 20px;
}

/*******
			#fwslider {
				position: relative;
				background:#fff;
				width:100%;
				border:solid 1px red;
			}
			#fwslider img {
				width:100%;
			}
			
			#fwslider .slider_container {
				border:solid 1px green;
				overflow:auto;
				height:100%;
			}
			
			#fwslider .slide {
				display: none;
				position: absolute;
				top:0;
				left:0;
				z-index: 0;
				width:100%;
			}
			
			#fwslider .slide img {
				width:100%;
			}
			
			#fwslider .slidePrev {
				width:50px;
				height:50px;
				position: absolute;
				top:50%;
				left:-50px;
				opacity:0.5;
				z-index: 100;
				-moz-border-radius: 0 10px 10px 0; 
				-webkit-border-radius: 0 10px 10px 0; 
				-khtml-border-radius: 0 10px 10px 0; 
				border-radius: 0 10px 10px 0; 
				border:solid 1px red;
			}
			
			#fwslider .slidePrev span {
				background-image:url("../images/slide-previous2.png");
				width:50px;
				height:50px;
				float:left;
				background-position: 50% 50%;
				background-repeat: no-repeat;
				cursor: pointer;
				border:solid 1px red;
			}
			
			#fwslider .slideNext {
				width:50px;
				height:50px;
				position: absolute;
				top:50%;
				right:-50px;
				opacity:0.5;
				z-index: 10;
				-moz-border-radius: 10px 0 0 10px; 
				-webkit-border-radius: 10px 0 0 10px; 
				-khtml-border-radius: 10px 0 0 10px; 
				border-radius: 10px 0 0 10px; 
			}
			
			#fwslider .slideNext span {
				background-image:url("/images/slide-next2.png");
				width:50px;
				height:50px;
				float:left;
				background-position: 50% 50%;
				background-repeat: no-repeat;
				cursor: pointer;
			}
			
			#fwslider .timers {
				height:4px;
				position: absolute;
				bottom:15px;
				left:15px;
				z-index: 3;
			}
			
			#fwslider .timer {
				height:4px;
				width:30px;
				background-color: #000;
				background-color: transparent;
				float:left;
				margin-right: 10px;
			}
			
			#fwslider .progress {
				height:4px;
				width:0%;
				background-color: #CCC;
				background-color: transparent;
				float:left;
			}

/*********/

/* ------------------------------- 3. Media Query Max Width 1300, Min Width 720 ------------------------------- */

@media only screen and (min-width: 720px) and (max-width: 1300px) {
  #fwslider .slide_content_wrap {
    margin-left: 50px;
    margin-top: 15%;
  }
  #fwslider .title {
    font-size: 26px;
  }
  #fwslider .description {
    font-size: 12px;
  }
}

/* ------------------------------- 4. Media Query Max Width 719 ------------------------------- */

@media only screen and (max-width: 719px) {
  #fwslider .slide_content_wrap {
    display: none;
  }
  #fwslider .timers {
    display: none;
  }
  #fwslider .slide_content {
    cursor: pointer;
  }
}