/* Tiny Carousel */



#slider1 {

  overflow: hidden;

    position: relative;

    /*padding: 0 27px 0px;*/

/*

        width: 63%;

    margin: 0 auto;

*/

}



#slider1 .viewport {

    height: 400px;

    overflow: hidden;

    position: relative;

}



#slider1 .buttons {

/*    background: transparent;

    border-radius: 35px;

    display: block;

    position: absolute;

    top: 50%;

    left: 0;

    width: 35px;

    height: 35px;

    color: #000;

    font-weight: bold;

    text-align: center;

    line-height: 35px;

    text-decoration: none;

    font-size: 22px;*/

    background: transparent;

    display: block;

    position: absolute;

    top: 50%;

    left: 0px;

    color: #000;

    font-weight: 200;

    text-align: center;

    text-decoration: none;

    z-index: 5;

    font-size: 36px;

    cursor: pointer;

}



#slider1 .next {

    right: 0;

    left: auto;

    top: 50%;

}



#slider1 .buttons:hover {

    color: #000000;

    background: #f0f0f0;

    border-radius: 0;

}



#slider1 .disable {

    visibility: hidden;

}



#slider1 .overview {

    list-style: none;

    position: absolute;

    padding: 0;

    margin: 0;

/*

    width: 240px;

    left: 0;

    top: 0;

*/

}



#slider1 .overview li {



    float: left;

    margin: 0 17px 0 17px;

    padding: 1px;

    width: 355px;

 }



/**********************************************/

/* Tiny Carousel */





#slider2 {



    overflow: hidden;

    position: relative;

   /* padding: 0 27px 0px;*/

/*

        width: 63%;

    margin: 0 auto;

*/

}



#slider2 .viewport {

    height: 400px;

    overflow: hidden;

    position: relative;

}



#slider2 .buttons {

background: transparent;

    display: block;

    position: absolute;

    top: 50%;

    left: 0px;

    color: #000;

    font-weight: 200;

    text-align: center;

    text-decoration: none;

    z-index: 5;

    font-size: 36px;

}



#slider2 .next {

    right: 0;

    left: auto;

    top: 50%;

}



#slider2 .buttons:hover {

    color: #000000;

    background: #f0f0f0;

    border-radius: 0;

}



#slider2 .disable {

    visibility: hidden;

}



#slider2 .overview {

    list-style: none;

    position: absolute;

    padding: 0;

    margin: 0;

   /* width: 240px;

    left: 0;

    top: 0;*/

}



#slider2 .overview li {



    float: left;

    margin:0 17px 0 17px;



    width: 355px;

 }

 

/**************************************************/

.service_slide {

  display: inline-block;

  position: relative;

  overflow: hidden;

  border-radius: 5px;

}

.service_slide:before {

  content: "";

  position: absolute;

  width: 100%;

  height: 5px;

  top: 0;

  left: 0;

  z-index: 1;

  background: rgba(255, 255, 255, 0.2);

  visibility: visible;

}

.service_slide:after {

  content: "";

  position: absolute;

  width: 100%;

  height: 5px;

  bottom: 0;

  left: 0;

  z-index: 1;

  background: rgba(64, 64, 64, 0.1);

  visibility: visible;

}

.service_slide > input {

  display: none;

}

.service_slide > input:nth-of-type(6):checked ~ ul li:first-of-type {

  margin-left: -500%;

}

.service_slide > input:nth-of-type(6):checked ~ .navigation label:nth-of-type(6):after {

  opacity: 1;

}

.service_slide > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(5) {

  display: block;

  left: 0;

  right: auto;

  transform: rotate(45deg);

}

.service_slide > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(7) {

  display: block;

  right: 0;

  left: auto;

  transform: rotate(225deg);

}

.service_slide > input:nth-of-type(5):checked ~ ul li:first-of-type {

  margin-left: -400%;

}

.service_slide > input:nth-of-type(5):checked ~ .navigation label:nth-of-type(5):after {

  opacity: 1;

}

.service_slide > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(4) {

  display: block;

  left: 0;

  right: auto;

  transform: rotate(45deg);

}

.service_slide > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(6) {

  display: block;

  right: 0;

  left: auto;

  transform: rotate(225deg);

}

.service_slide > input:nth-of-type(4):checked ~ ul li:first-of-type {

  margin-left: -300%;

}

.service_slide > input:nth-of-type(4):checked ~ .navigation label:nth-of-type(4):after {

  opacity: 1;

}

.service_slide > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(3) {

  display: block;

  left: 0;

  right: auto;

  transform: rotate(45deg);

}

.service_slide > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(5) {

  display: block;

  right: 0;

  left: auto;

  transform: rotate(225deg);

}

.service_slide > input:nth-of-type(3):checked ~ ul li:first-of-type {

  margin-left: -200%;

}

.service_slide > input:nth-of-type(3):checked ~ .navigation label:nth-of-type(3):after {

  opacity: 1;

}

.service_slide > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(2) {

  display: block;

  left: 0;

  right: auto;

  transform: rotate(45deg);

}

.service_slide > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(4) {

  display: block;

  right: 0;

  left: auto;

  transform: rotate(225deg);

}

.service_slide > input:nth-of-type(2):checked ~ ul li:first-of-type {

  margin-left: -100%;

}

.service_slide > input:nth-of-type(2):checked ~ .navigation label:nth-of-type(2):after {

  opacity: 1;

}

.service_slide > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(1) {

  display: block;

  left: 0;

  right: auto;

  transform: rotate(45deg);

}

.service_slide> input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(3) {

  display: block;

  right: 0;

  left: auto;

  transform: rotate(225deg);

}

.service_slide > input:nth-of-type(1):checked ~ ul li:first-of-type {

  margin-left: 0%;

}

.service_slide > input:nth-of-type(1):checked ~ .navigation label:nth-of-type(1):after {

  opacity: 1;

}

.service_slide > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(0) {

  display: block;

  left: 0;

  right: auto;

  transform: rotate(45deg);

}

.service_slide > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(2) {

  display: block;

  right: 0;

  left: auto;

  transform: rotate(225deg);

}

.service_slide > ul {

  position: relative;

  width: 800px;

  height: 400px;

  font-size: 0;

  line-height: 0;

  background-color: #4e606c;

  margin: 0 auto;

  padding: 0;

  overflow: hidden;

  white-space: nowrap;

  box-sizing: border-box;

}

.service_slide > ul > li {

  position: relative;

  display: inline-block;

  width: 100%;

  height: 100%;

  overflow: hidden;

  font-size: 15px;

  font-size: initial;

  line-height: normal;

  transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);

  vertical-align: top;

  box-sizing: border-box;

  white-space: normal;

}

.service_slide > ul > li.scrollable {

  overflow-y: auto;

}

.service_slide > ul > li.bg img {

  width: 100%;

  height: 100%;

}

.service_slide > .navigation {

  position: absolute;

  bottom: -8px;

  left: 50%;

  margin-bottom: 20px;

  font-size: 0;

  line-height: 0;

  text-align: center;

  -webkit-touch-callout: none;

  user-select: none;

}

.service_slide > .navigation div {

  margin-left: -100%;

}

.service_slide > .navigation label {

  position: relative;

  display: inline-block;

  cursor: pointer;

  border-radius: 50%;

  margin: 0 4px;

  padding: 4px;

  background: #fafaff;

  -webkit-touch-callout: none;

  user-select: none;

}

.service_slide > .navigation label:after {

  content: '';

  position: absolute;

  left: 50%;

  top: 50%;

  margin-left: -6px;

  margin-top: -6px;

  background: #167fd5;

  border-radius: 50%;

  padding: 6px;

  opacity: 0;

}

.service_slide > .navigation label:hover:after {

  opacity: 1;

}

.service_slide.inside .navigation {

  bottom: 10px;

  margin-bottom: 10px;

}

.service_slide.inside .navigation label {

  border: 1px solid #7e7e7e;

}

.service_slide.infinity > input:first-of-type:checked ~ .arrows label.goto-last {

  display: block;

  left: 0;

  right: auto;

  transform: rotate(45deg);

}

.service_slide.infinity > input:last-of-type:checked ~ .arrows label.goto-first {

  display: block;

  right: 0;

  left: auto;

  transform: rotate(225deg);

}

.service_slide > .arrows {

  position: absolute;

  left: 3%;

  top: 50%;

  width: 94%;

  height: 26px;

  box-sizing: content-box;

  -webkit-touch-callout: none;

  user-select: none;

}

.service_slide > .arrows label {

  display: none;

  position: absolute;

  top: -50%;

  padding: 13px;

  box-shadow: inset 2px -2px 0 1px #fafaff;

  cursor: pointer;

  transition: box-shadow 0.15s, margin 0.15s;

  -webkit-touch-callout: none;

  user-select: none;

}

.service_slide > .arrows label:hover {

  box-shadow: inset 3px -3px 0 2px #167fd5;

  margin: 0 0px;

}

.service_slide > .arrows label:before {

  content: '';

  position: absolute;

  top: -100%;

  left: -100%;

  height: 300%;

  width: 300%;

}