@import url(https://fonts.googleapis.com/css?family=Raleway:400,700|Lato);

.csslider {
  /*important*/
  margin: 0px;
  /*important*/
  /*-moz-perspective: 1300px;
  -ms-perspective: 1300px;
  -webkit-perspective: 1300px;
  perspective: 1300px;
  display: inline-block;*/
  position: relative;
}
.csslider > input {
  display: none;
}
.csslider > input:nth-of-type( 10):checked ~ ul li:first-of-type {
  margin-right: -901%;
}.csslider > input:nth-of-type( 9):checked ~ ul li:first-of-type {
  margin-right: -801%;
}.csslider > input:nth-of-type( 8):checked ~ ul li:first-of-type {
  margin-right: -701%;
}.csslider > input:nth-of-type( 7):checked ~ ul li:first-of-type {
  margin-right: -601%;
}.csslider > input:nth-of-type(6 ):checked ~ ul li:first-of-type {
  margin-right: -501%;
}
.csslider > input:nth-of-type( 5):checked ~ ul li:first-of-type {
  margin-left: -401%;
}
.csslider > input:nth-of-type( 4):checked ~ ul li:first-of-type {
  margin-left: -301%;
}
.csslider > input:nth-of-type( 3):checked ~ ul li:first-of-type {
  margin-left: -201%;
}
.csslider > input:nth-of-type( 2):checked ~ ul li:first-of-type {
  margin-left: -101%;
}
.csslider > input:nth-of-type( 1):checked ~ ul li:first-of-type {
  margin-left: 0%;
}
.csslider > ul {
  /*important*/
  /*important*/
  position: relative;
  z-index: 1;
  line-height: 0;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.csslider > ul > li {
	    height: 341px;
  vertical-align: top;
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0px;
    /* height: 100%; */
    overflow: hidden;
    line-height: normal;
    -moz-transition: all 0.5s cubic-bezier(0.5, 1, 0.5, 1);
    -o-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s cubic-bezier(0.5, 1, 0.5, 1);
    transition: all 0.5s cubic-bezier(0.5, 1, 0.5, 1);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: normal;
}




.csslider .arrows > label:nth-of-type(1) {
    display: block;
    right: 0;
    left: auto;
    width: 25px;
    height: 25px;
    background: url(../images/right.png) no-repeat scroll center center  !important;
}






/*-------------NAVIGATION-------------*/
.csslider > .navigation {
  position: absolute;
  /*important*/
  bottom: -8px;
  left: 50%;
  margin-bottom: -10px;
  /*important*/
  z-index: 10;
  font-size: 0;
  line-height: 0;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.csslider > .navigation > div {
  margin-left: -100%;
}
.csslider > .navigation label {
  /*important*/
  border-radius: 50%;
  margin: 0 4px;
  padding: 4px;
  background: #909090;
  /*important*/
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.csslider > .navigation label:hover:after {
  opacity: 1;
}
.csslider > .navigation label:after {
  /*important*/
  margin-left: -6px;
  margin-top: -6px;
  padding: 6px;
  background: #000000;
  border-radius: 50%;  
  /*important*/
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
}
 
.csslider.inside .navigation {
  bottom: 10px;
  margin-bottom: 10px;
}
.csslider > input:nth-of-type(1):checked ~ .navigation label:nth-of-type(1):after,
.csslider > input:nth-of-type(2):checked ~ .navigation label:nth-of-type(2):after,
.csslider > input:nth-of-type(3):checked ~ .navigation label:nth-of-type(3):after,
.csslider > input:nth-of-type(4):checked ~ .navigation label:nth-of-type(4):after,
.csslider > input:nth-of-type(5):checked ~ .navigation label:nth-of-type(5):after,
.csslider > input:nth-of-type(6):checked ~ .navigation label:nth-of-type(6):after,
.csslider > input:nth-of-type(7):checked ~ .navigation label:nth-of-type(7):after,
.csslider > input:nth-of-type(8):checked ~ .navigation label:nth-of-type(8):after,
.csslider > input:nth-of-type(9):checked ~ .navigation label:nth-of-type(9):after,
.csslider > input:nth-of-type(10):checked ~ .navigation label:nth-of-type(10):after
{
  opacity: 1;
}
/*-------------ARRROWS-------------*/
.csslider > .arrows {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.csslider > .arrows {
  /*important*/
  /*left: -31px;*/
  padding: 0 31px;
  height: 26px;
  /*important*/
  position: absolute;
  z-index: 5;
  bottom: 0px;
  width: 64px;
  right: 35px;
  width: 100%;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.csslider > .arrows label {
  /*important*/
  /*box-shadow: inset 2px -2px 0 1px #909090;*/
  /*important*/
  display: none;
  position: absolute;
  bottom: 22px;   
  padding: 5px;    
  right: 35px;
  cursor: pointer;   

 /* -moz-transition: box-shadow 0.15s, margin 0.15s;
  -o-transition: box-shadow 0.15s, margin 0.15s;
  -webkit-transition: box-shadow 0.15s, margin 0.15s;
  transition: box-shadow 0.15s, margin 0.15s;*/
  
   /* -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);*/

}
.csslider > .arrows label:hover {
  /*important*/
    background:url('../images/left.png') no-repeat scroll center center;

  /*box-shadow: inset 2px -2px 0 1px #909090;*/
  /*important*/
}
.csslider.infinity > input:first-of-type:checked ~ .arrows label.goto-last,
.csslider > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(0),
.csslider > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(1),
.csslider > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(2),
.csslider > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(3),
.csslider > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(4),
.csslider > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(5),
.csslider > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(6),
.csslider > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(7),
.csslider > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(8),
.csslider > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(9)
{
  display: block;
  /*left: 0;*/
  right: 35px;
  /*-moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);*/
  
  width: 25px;
  height: 25px;
  background:url('../images/left.png') no-repeat scroll center center !important;;
}
.csslider.infinity > input:last-of-type:checked ~ .arrows label.goto-first,
.csslider > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(2),
.csslider > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(3),
.csslider > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(4),
.csslider > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(5),
.csslider > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(6),
.csslider > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(7),
.csslider > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(8),
.csslider > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(9),
.csslider > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(10),
.csslider > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(11)
{
  display: block;
  right: 0;
  left: auto;
  /*-moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);  
  -o-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);*/
    width: 25px;
  height: 25px;
  background:url('../images/right.png') no-repeat scroll center center;

}