/* Slider */

.carousel1 > 
input[type=radio]:nth-child(6):checked ~ .carousel1__next > label:nth-child(1), .carousel1 > 
input[type=radio]:nth-child(6):checked ~ .carousel1__prev > label:nth-child(5), .carousel1 > 
input[type=radio]:nth-child(5):checked ~ .carousel1__next > label:nth-child(6), .carousel1 > 
input[type=radio]:nth-child(5):checked ~ .carousel1__prev > label:nth-child(4), .carousel1 > 
input[type=radio]:nth-child(4):checked ~ .carousel1__next > label:nth-child(5), .carousel1 > 
input[type=radio]:nth-child(4):checked ~ .carousel1__prev > label:nth-child(3), .carousel1 > 
input[type=radio]:nth-child(3):checked ~ .carousel1__next > label:nth-child(4), .carousel1 > 
input[type=radio]:nth-child(3):checked ~ .carousel1__prev > label:nth-child(2), .carousel1 > 
input[type=radio]:nth-child(2):checked ~ .carousel1__next > label:nth-child(3), .carousel1 > 
input[type=radio]:nth-child(2):checked ~ .carousel1__prev > label:nth-child(1), .carousel1 > 
input[type=radio]:nth-child(1):checked ~ .carousel1__next > label:nth-child(2), .carousel1 > 
input[type=radio]:nth-child(1):checked ~ .carousel1__prev > label:nth-child(6) { opacity: 1 !important; z-index: 3;}

.carousel2 > 
input[type=radio]:nth-child(6):checked ~ .carousel2__next > label:nth-child(1), .carousel2 > 
input[type=radio]:nth-child(6):checked ~ .carousel2__prev > label:nth-child(5), .carousel2 > 
input[type=radio]:nth-child(5):checked ~ .carousel2__next > label:nth-child(6), .carousel2 > 
input[type=radio]:nth-child(5):checked ~ .carousel2__prev > label:nth-child(4), .carousel2 > 
input[type=radio]:nth-child(4):checked ~ .carousel2__next > label:nth-child(5), .carousel2 > 
input[type=radio]:nth-child(4):checked ~ .carousel2__prev > label:nth-child(3), .carousel2 > 
input[type=radio]:nth-child(3):checked ~ .carousel2__next > label:nth-child(4), .carousel2 > 
input[type=radio]:nth-child(3):checked ~ .carousel2__prev > label:nth-child(2), .carousel2 > 
input[type=radio]:nth-child(2):checked ~ .carousel2__next > label:nth-child(3), .carousel2 > 
input[type=radio]:nth-child(2):checked ~ .carousel2__prev > label:nth-child(1), .carousel2 > 
input[type=radio]:nth-child(1):checked ~ .carousel2__next > label:nth-child(2), .carousel2 > 
input[type=radio]:nth-child(1):checked ~ .carousel2__prev > label:nth-child(6) { opacity: 1 !important; z-index: 3;}

.carousel3 > 
input[type=radio]:nth-child(3):checked ~ .carousel3__next > label:nth-child(1), .carousel3 > 
input[type=radio]:nth-child(3):checked ~ .carousel3__prev > label:nth-child(2), .carousel3 > 
input[type=radio]:nth-child(2):checked ~ .carousel3__next > label:nth-child(3), .carousel3 > 
input[type=radio]:nth-child(2):checked ~ .carousel3__prev > label:nth-child(1), .carousel3 > 
input[type=radio]:nth-child(1):checked ~ .carousel3__next > label:nth-child(2), .carousel3 > 
input[type=radio]:nth-child(1):checked ~ .carousel3__prev > label:nth-child(3) { opacity: 1 !important; z-index: 3;}

*,
*:before,
*:after { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
body { background: #fcfcfc; margin: 0;}

.container1 { width: 100%; min-width: 100%; margin: 50px auto;}
.carousel1 { width: 100%; position: relative; overflow: hidden;}
.carousel1 > input[type=radio] { position: absolute; left: 0; opacity: 0; top: 0;}
.carousel1 > input[type=radio]:checked ~ .carousel1__items .carousel1__item,
.carousel1 > input[type=radio]:checked ~ .carousel1__prev > label,
.carousel1 > input[type=radio]:checked ~ .carousel1__next > label { opacity: 0;}
.carousel1 > input[type=radio]:nth-child(1):checked ~ .carousel1__items .carousel1__item:nth-child(1) { opacity: 1;}
.carousel1 > input[type=radio]:nth-child(1):checked ~ .carousel1__nav > label:nth-child(1) { background: #ccc; cursor: default; pointer-events: none;}
.carousel1 > input[type=radio]:nth-child(2):checked ~ .carousel1__items .carousel1__item:nth-child(2) { opacity: 1;}
.carousel1 > input[type=radio]:nth-child(2):checked ~ .carousel1__nav > label:nth-child(2) { background: #ccc; cursor: default; pointer-events: none;}
.carousel1 > input[type=radio]:nth-child(3):checked ~ .carousel1__items .carousel1__item:nth-child(3) { opacity: 1;}
.carousel1 > input[type=radio]:nth-child(3):checked ~ .carousel1__nav > label:nth-child(3) { background: #ccc; cursor: default; pointer-events: none;}
.carousel1 > input[type=radio]:nth-child(4):checked ~ .carousel1__items .carousel1__item:nth-child(4) { opacity: 1;}
.carousel1 > input[type=radio]:nth-child(4):checked ~ .carousel1__nav > label:nth-child(4) { background: #ccc; cursor: default; pointer-events: none;}
.carousel1 > input[type=radio]:nth-child(5):checked ~ .carousel1__items .carousel1__item:nth-child(5) { opacity: 1;}
.carousel1 > input[type=radio]:nth-child(5):checked ~ .carousel1__nav > label:nth-child(5) { background: #ccc; cursor: default; pointer-events: none;}
.carousel1 > input[type=radio]:nth-child(6):checked ~ .carousel1__items .carousel1__item:nth-child(6) { opacity: 1;}
.carousel1 > input[type=radio]:nth-child(6):checked ~ .carousel1__nav > label:nth-child(6) { background: #ccc; cursor: default; pointer-events: none;}
.carousel1__items { margin: 0; padding: 0; list-style-type: none; width: 100%; height: 520px; position: relative;}
.carousel1__item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; transition: opacity 2s; -webkit-transition: opacity 2s;}
.carousel1__item img { width: 100%; vertical-align: middle;}
.carousel1__prev > label, .carousel1__next > label { border: 1px solid #fff; border-radius: 50%; cursor: pointer; display: block; width: 30px; height: 30px; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); transition: all 0.3s ease; -webkit-transition: all 0.3s ease; opacity: 0; z-index: 2;}
.carousel1__prev > label:hover, .carousel1__prev > label:focus, .carousel1__next > label:hover, .carousel1__next > label:focus { opacity: 0.5 !important;}
.carousel1__prev > label:before, .carousel1__prev > label:after, .carousel1__next > label:before, .carousel1__next > label:after { content: ""; position: absolute; width: inherit; height: inherit;}
.carousel1__prev > label:before, .carousel1__next > label:before { background: linear-gradient(to top, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%), linear-gradient(to left, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%); width: 60%; height: 60%; top: 20%;}
.carousel1__prev > label { left: 2%;}
.carousel1__prev > label:before { left: 35%; top: 20%; transform: rotate(135deg); -webkit-transform: rotate(135deg);}
.carousel1__next > label { right: 2%;}
.carousel1__next > label:before { left: 10%; transform: rotate(315deg); -webkit-transform: rotate(315deg);}
.carousel1__nav { position: absolute; bottom: 3%; left: 0; text-align: center; width: 100%; z-index: 3;}
.carousel1__nav > label { border: 1px solid #fff; display: inline-block; border-radius: 50%; cursor: pointer; margin: 0 0.125%; width: 10px; height: 10px;}

.container2 { width: 100%; min-width: 100%; margin: 50px auto;}
.carousel2 { width: 100%; position: relative; overflow: hidden;}
.carousel2 > input[type=radio] { position: absolute; left: 0; opacity: 0; top: 0;}
.carousel2 > input[type=radio]:checked ~ .carousel2__items .carousel2__item,
.carousel2 > input[type=radio]:checked ~ .carousel2__prev > label,
.carousel2 > input[type=radio]:checked ~ .carousel2__next > label { opacity: 0;}
.carousel2 > input[type=radio]:nth-child(1):checked ~ .carousel2__items .carousel2__item:nth-child(1) { opacity: 1;}
.carousel2 > input[type=radio]:nth-child(1):checked ~ .carousel2__nav > label:nth-child(1) { background: #ccc; cursor: default; pointer-events: none;}
.carousel2 > input[type=radio]:nth-child(2):checked ~ .carousel2__items .carousel2__item:nth-child(2) { opacity: 1;}
.carousel2 > input[type=radio]:nth-child(2):checked ~ .carousel2__nav > label:nth-child(2) { background: #ccc; cursor: default; pointer-events: none;}
.carousel2 > input[type=radio]:nth-child(3):checked ~ .carousel2__items .carousel2__item:nth-child(3) { opacity: 1;}
.carousel2 > input[type=radio]:nth-child(3):checked ~ .carousel2__nav > label:nth-child(3) { background: #ccc; cursor: default; pointer-events: none;}
.carousel2 > input[type=radio]:nth-child(4):checked ~ .carousel2__items .carousel2__item:nth-child(4) { opacity: 1;}
.carousel2 > input[type=radio]:nth-child(4):checked ~ .carousel2__nav > label:nth-child(4) { background: #ccc; cursor: default; pointer-events: none;}
.carousel2 > input[type=radio]:nth-child(5):checked ~ .carousel2__items .carousel2__item:nth-child(5) { opacity: 1;}
.carousel2 > input[type=radio]:nth-child(5):checked ~ .carousel2__nav > label:nth-child(5) { background: #ccc; cursor: default; pointer-events: none;}
.carousel2 > input[type=radio]:nth-child(6):checked ~ .carousel2__items .carousel2__item:nth-child(6) { opacity: 1;}
.carousel2 > input[type=radio]:nth-child(6):checked ~ .carousel2__nav > label:nth-child(6) { background: #ccc; cursor: default; pointer-events: none;}
.carousel2__items { margin: 0; padding: 0; list-style-type: none; width: 100%; height: 520px; position: relative;}
.carousel2__item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; transition: opacity 2s; -webkit-transition: opacity 2s;}
.carousel2__item img { width: 100%; vertical-align: middle;}
.carousel2__prev > label, .carousel2__next > label { border: 1px solid #fff; border-radius: 50%; cursor: pointer; display: block; width: 30px; height: 30px; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); transition: all 0.3s ease; -webkit-transition: all 0.3s ease; opacity: 0; z-index: 2;}
.carousel2__prev > label:hover, .carousel2__prev > label:focus, .carousel2__next > label:hover, .carousel2__next > label:focus { opacity: 0.5 !important;}
.carousel2__prev > label:before, .carousel2__prev > label:after, .carousel2__next > label:before, .carousel2__next > label:after { content: ""; position: absolute; width: inherit; height: inherit;}
.carousel2__prev > label:before, .carousel2__next > label:before { background: linear-gradient(to top, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%), linear-gradient(to left, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%); width: 60%; height: 60%; top: 20%;}
.carousel2__prev > label { left: 2%;}
.carousel2__prev > label:before { left: 35%; top: 20%; transform: rotate(135deg); -webkit-transform: rotate(135deg);}
.carousel2__next > label { right: 2%;}
.carousel2__next > label:before { left: 10%; transform: rotate(315deg); -webkit-transform: rotate(315deg);}
.carousel2__nav { position: absolute; bottom: 3%; left: 0; text-align: center; width: 100%; z-index: 3;}
.carousel2__nav > label { border: 1px solid #fff; display: inline-block; border-radius: 50%; cursor: pointer; margin: 0 0.125%; width: 10px; height: 10px;}

.container3 { width: 100%; min-width: 100%; margin: 50px auto;}
.carousel3 { width: 100%; position: relative; overflow: hidden;}
.carousel3 > input[type=radio] { position: absolute; left: 0; opacity: 0; top: 0;}
.carousel3 > input[type=radio]:checked ~ .carousel3__items .carousel3__item,
.carousel3 > input[type=radio]:checked ~ .carousel3__prev > label,
.carousel3 > input[type=radio]:checked ~ .carousel3__next > label { opacity: 0;}
.carousel3 > input[type=radio]:nth-child(1):checked ~ .carousel3__items .carousel3__item:nth-child(1) { opacity: 1;}
.carousel3 > input[type=radio]:nth-child(1):checked ~ .carousel3__nav > label:nth-child(1) { background: #ccc; cursor: default; pointer-events: none;}
.carousel3 > input[type=radio]:nth-child(2):checked ~ .carousel3__items .carousel3__item:nth-child(2) { opacity: 1;}
.carousel3 > input[type=radio]:nth-child(2):checked ~ .carousel3__nav > label:nth-child(2) { background: #ccc; cursor: default; pointer-events: none;}
.carousel3 > input[type=radio]:nth-child(3):checked ~ .carousel3__items .carousel3__item:nth-child(3) { opacity: 1;}
.carousel3 > input[type=radio]:nth-child(3):checked ~ .carousel3__nav > label:nth-child(3) { background: #ccc; cursor: default; pointer-events: none;}
.carousel3__items { margin: 0; padding: 0; list-style-type: none; width: 100%; height: 520px; position: relative;}
.carousel3__item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; transition: opacity 2s; -webkit-transition: opacity 2s;}
.carousel3__item img { width: 100%; vertical-align: middle;}
.carousel3__prev > label, .carousel3__next > label { border: 1px solid #fff; border-radius: 50%; cursor: pointer; display: block; width: 30px; height: 30px; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); transition: all 0.3s ease; -webkit-transition: all 0.3s ease; opacity: 0; z-index: 2;}
.carousel3__prev > label:hover, .carousel3__prev > label:focus, .carousel3__next > label:hover, .carousel3__next > label:focus { opacity: 0.5 !important;}
.carousel3__prev > label:before, .carousel3__prev > label:after, .carousel3__next > label:before, .carousel3__next > label:after { content: ""; position: absolute; width: inherit; height: inherit;}
.carousel3__prev > label:before, .carousel3__next > label:before { background: linear-gradient(to top, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%), linear-gradient(to left, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%); width: 60%; height: 60%; top: 20%;}
.carousel3__prev > label { left: 2%;}
.carousel3__prev > label:before { left: 35%; top: 20%; transform: rotate(135deg); -webkit-transform: rotate(135deg);}
.carousel3__next > label { right: 2%;}
.carousel3__next > label:before { left: 10%; transform: rotate(315deg); -webkit-transform: rotate(315deg);}
.carousel3__nav { position: absolute; bottom: 3%; left: 0; text-align: center; width: 100%; z-index: 3;}
.carousel3__nav > label { border: 1px solid #fff; display: inline-block; border-radius: 50%; cursor: pointer; margin: 0 0.125%; width: 10px; height: 10px;}