@font-face {
    font-family: 'TSTAR PRO Light';
    src: url('TSTARPRO-Light.otf') format('opentype');
}


body {
    height: 100%;
    width: 100%;
    font-family: TSTAR PRO Light;
    text-decoration: none;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: url(yolanda.kylombo_krota_silber.granat.jpg) no-repeat center center;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: contain;
    background-attachment: fixed;
    box-sizing: border-box;
}




.css-slider-wrapper {
    display: block;
    background: #fff;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}


/* Slider */

.slider {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
    z-index: 0;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
    align-content: center;
    -webkit-transition: -webkit-transform 1000ms;
    transition: -webkit-transform 1000ms, transform 1000ms;
    -webkit-transform: scale(1);
    transform: scale(1);
}


/* each slide backgound color */

.slide1 {
    background: url(Zoll_Allochromatisch_yolanda.Kylombo_see.your.roots.jpg) no-repeat center center;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    left: 0;
    scroll-behavior: smooth;
  
  	-webkit-overflow-scrolling: touch;
}

.slide2 {
    background: url(Zoll_Allochromatisch_yolanda.Kylombo_a.view.to.alteration.3.jpg) no-repeat center center;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    left: 0;
    left: 100%;
}



.slide3 {
    background: url(Zoll_Allochromatisch_yolanda.Kylombo_a.view.to.alteration.4.jpg) no-repeat center center;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    left: 0;
    left: 200%;
}

.slide4 {
    background: url(Zoll_Allochromatisch_yolanda.Kylombo_a.view.to.alteration.jpg) no-repeat center center;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    left: 0;
    left: 300%;
}

.slide5 {
    background: url(Zoll_allochromatisch_yolanda.kylombo_act.jpg) no-repeat center center;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    left: 0;
    left: 400%;
}



.slide6 {
    background: url(Zoll_Allochromatisch_yolanda.Kylombo_a.view.to.alteration.2.jpg) no-repeat center center;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    left: 0;
    left: 500%;
}

.slide7 {
    background: url(Zoll_Allochromatisch_yolanda.Kylombo_shadows.of.influence_.jpg) no-repeat center center;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    left: 0;
    left: 600%;
}


.slide8 {
    background: url(Zoll_Allochromatisch_yolanda.Kylombo_shadows.of.influence_2.jpg) no-repeat center center;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    left: 0;
    left: 700%;
}


.slide9 {
    background: url(Zoll_Allochromatisch_yolanda.Kylombo_shadows.of.influence.jpg) no-repeat center center;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    left: 0;
    left: 800%;
}
.slide10 {
    background: url(QQQ_FOLDED.FOR.YOU_Runtucha.chaskancha.Handmade.jewelry.jewellery.schmuck.berlin.artjewelry.ashanti.guss.Eheringe.casting.silver.jewelry.design.art.ringdesign.artring_Yolanda.kylombo_high.energy.jewelry_silver.silber.eheringe.weddingrings._54541.jpg) no-repeat center center;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    left: 0;
    left: 900%;
}


.slide11 {
    background: url(QQQ_BULB_Runtucha.chaskancha.Handmade.jewelry.jewellery.schmuck.berlin.artjewelry.ashanti.guss.Eheringe.casting.silver.jewelry.design.art.ringdesign.artring_Yolanda.kylombo_high.energy.jewelry_silver.silber.eheringe.weddingrings._54431.jpg) no-repeat center center;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    left: 1000%;
}
.slide12 {
    background: url(Yolanda.Kylombo_Art.Design.Craft_jewelry.Schmuck.Joyeria_Kunst.artrings.contemporary.jewellrer.contemporaryjewelry.bijoux.kunstringe.ashanti.guss_stylish.rings.sculptural.rings.sculpture_Silber_DSCN8760.jpg) no-repeat center center;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    left: 0;
    left: 1100%;
}

.slider>div {
    text-align: center;
}



/* Next and Preive arrow */

.control {
    position: absolute;
    width: 150px;
    height: 100%;
    top:0;
    text-align: center;
    margin: 0 auto;
    z-index: 55;
}

.control label {
    z-index: 0;
    display: none;
    text-align: center;
    width: 150px;
    height: 100%;
    color: #413d39;
}

.control.previous {
    background-image: url(linkspfeil.png);
     background-size: 50px;
     background-repeat: no-repeat;
     top: 45%;
}

.control.next {
    background-image: url(rechtspfeil.png);
    background-size: 50px;
    background-repeat: no-repeat;
    top: 45%;
}

.control.previous :hover{
    background-image:url(linkspfeilpink.png);
    background-size: 50px;
    background-repeat: no-repeat;
    top: 45%;
}

.control.next :hover{
    background-image:url(rechtspfeilpink.png);
    background-size: 50px;
    background-repeat: no-repeat;
    top: 45%;
}

.next {
    float: right;
    right: -30px;
    height: 50px;
}

.previous {
    float: left;
    left: 60px;
    height: 50px;
}


/* Slider Pagger arrow event */

.slide-radio1:checked~.next .numb2,
.slide-radio2:checked~.next .numb3,
.slide-radio3:checked~.next .numb4,
.slide-radio4:checked~.next .numb5,
.slide-radio5:checked~.next .numb6,
.slide-radio6:checked~.next .numb7,
.slide-radio7:checked~.next .numb8,
.slide-radio8:checked~.next .numb9,
.slide-radio9:checked~.next .numb10,
.slide-radio10:checked~.next .numb11,
.slide-radio11:checked~.next .numb12,
.slide-radio2:checked~.previous .numb1,
.slide-radio3:checked~.previous .numb2,
.slide-radio4:checked~.previous .numb3,
.slide-radio5:checked~.previous .numb4,
.slide-radio6:checked~.previous .numb5,
.slide-radio7:checked~.previous .numb6,
.slide-radio8:checked~.previous .numb7,
.slide-radio9:checked~.previous .numb8,
.slide-radio10:checked~.previous .numb9,
.slide-radio11:checked~.previous .numb10,
.slide-radio12:checked~.previous .numb11,
.slide-radio13:checked~.previous .numb12 {
    display: block;
    z-index: 1
}


.slide-radio1:checked~.slider {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

.slide-radio2:checked~.slider {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.slide-radio3:checked~.slider {
    -webkit-transform: translateX(-200%);
    transform: translateX(-200%);
}

.slide-radio4:checked~.slider {
    -webkit-transform: translateX(-300%);
    transform: translateX(-300%);
}

.slide-radio5:checked~.slider {
    -webkit-transform: translateX(-400%);
    transform: translateX(-400%);
}

.slide-radio6:checked~.slider {
    -webkit-transform: translateX(-500%);
    transform: translateX(-500%);
}

.slide-radio7:checked~.slider {
    -webkit-transform: translateX(-600%);
    transform: translateX(-600%);
}

.slide-radio8:checked~.slider {
    -webkit-transform: translateX(-700%);
    transform: translateX(-700%);
}

.slide-radio9:checked~.slider {
    -webkit-transform: translateX(-800%);
    transform: translateX(-800%);
}
.slide-radio10:checked~.slider {
    -webkit-transform: translateX(-900%);
    transform: translateX(-900%);
}
.slide-radio11:checked~.slider {
    -webkit-transform: translateX(-1000%);
    transform: translateX(-1000%);
}



.slide-radio1:checked~.slide1 h2,
.slide-radio2:checked~.slide2 h2,
.slide-radio3:checked~.slide3 h2,
.slide-radio4:checked~.slide4 h2,
.slide-radio5:checked~.slide5 h2,
.slide-radio6:checked~.slide6 h2,
.slide-radio7:checked~.slide7 h2,
.slide-radio8:checked~.slide8 h2,
.slide-radio9:checked~.slide9 h2,
.slide-radio10:checked~.slide10 h2,
.slide-radio11:checked~.slide11 h2,
.slide-radio12:checked~.slide12 h2,
.slide-radio1:checked~.slide1 .button,
.slide-radio2:checked~.slide2 .button,
.slide-radio3:checked~.slide3 .button,
.slide-radio4:checked~.slide4 .button,
.slide-radio5:checked~.slide5 .button,
.slide-radio6:checked~.slide6 .button,
.slide-radio7:checked~.slide7 .button,
.slide-radio8:checked~.slide8 .button,
.slide-radio9:checked~.slide9 .button,
.slide-radio10:checked~.slide10 .button,
.slide-radio11:checked~.slide11 .button,
.slide-radio12:checked~.slide12 .button, {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 0
}

input{
	text-decoration: none;
	visibility: hidden;
}

@media only screen and (max-width: 767px) {
    .slider>div {
        padding: 0 2%
    }

    .slider .button {
        padding: 0 15px;
    }
}


a:link,
a:visited {
    background-color: none;
    color: #413d39;
    padding: 5px 10px;
    text-decoration: none;
    display: inline-block;
}

a:hover,
a:active {
    color: #ff0aff;
}

#nav {
	font-size: 0.8em;
	display: grid;
  	grid-template-columns: 102.5px 91px;
	grid-template-rows: 10px 20px 10px 10px 10px 30px;
	grid-gap: 5px;
    position: fixed;
    bottom: 10px;
    overflow: hidden;
}

#headline {
    font-size: 15px;
	grid-column:  1 / span 2;
	grid-row: 6;
	text-align: justify;
	margin-top: 10px;
	margin-left: 0;
    padding-left: 0;
    font-stretch: ultra-condensed;
}


#logo {
	grid-column: 1;
	grid-row: 1/ span 5;
    width: 68px;
    align-self: center;
}

a.grid-item {
	grid-row: 1 /span 5;
	grid-column: 2;
    display: block;
    text-align: justify;
    margin-right: 0;
    padding-right: 0;
    margin-left: 0;
    padding-left: 0;
}

.grid-item:after{
  content: "";
  display: inline-block;
  width: 100%;
}


#shop{
	grid-row: 3;
	grid-column: 2;
}

#about{
		padding-top: 0;
	grid-row: 2;
	grid-column: 2;
}

#insta{
	padding-bottom: 0;
	grid-row: 5;
	grid-column: 2;
}

#art{
	padding-top: 0;
	grid-row: 1;
	grid-column: 2;
}

#mail{
	grid-row: 4;
	grid-column: 2;
}

/* ##### Footer ##### */
footer {
  display:block;
  text-align: right;
  right: 3px;
  bottom: -10px;
  position: fixed;
  width: 100%;
  text-decoration: none;
  font-size: 10px;
  color:#979993;
  margin: 0;
  word-spacing: 0px;
  line-height: 0.5;
  overflow-x: hidden;
 }

footer a{
	  padding: 4px 1.5px !important;
	  color:#979993 !important;
}

@media only screen and (max-width: 768px){
  footer {display:none}





.wrap {
    max-width: 1400px;
    min-width: 768px;
    width: 100%;
    background-repeat: no-repeat scroll;
    background-position: center top;
    position: relative;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}