/* Begin style home */ #CentralArea{display:inline-block; width:100%} .intro-page{margin-top:-15px} .banner.additional-carousel{display:none;} .main-carousel{} .cat-box{display:inline-block; width:100%; } .cat-box ul{display: inline-block; width: 100%} .cat-box li{width:33.33%; float:left;padding: 0 0 0 5px;margin: 0 0 10px; position: relative;} .cat-box li:nth-child(3n){padding:0 0 0 10px;} .cat-box li:nth-child(3n+1){padding:0 5px 0 0;clear:left;} .cat-box li .product-intro{display: inline-block; width: 100%;} .cat-box li img{max-width:100%;min-height:278px;} .featured-head h2{ text-align: center; margin-bottom: 5px; width:100%; font-family: 'Droid Sans', sans-serif; color: #131313; display: inline-block; font-size: 30px; line-height: 36px; } .product-list{margin:9px 0 0px} .product-list .featured-head h2{margin-bottom: 20px} .brand-list{display: inline-block; width: 100%;text-align: center;} .brand-list .brand-img{border-top:1px solid #CCCCCC;} .pagewidth .footer{margin-top: 25px;} /* END style home */ /*Begin listing*/ .wrappage .header-content .text-shipping{float:right; padding: 55px 0 30px;} .wrappage .header-content .search-container{display:none;} .wrappage .footer {margin:30px 0 0;} .wrappage .footer .footer-bottom{background:#eeeeee;border-bottom: 2px solid #dbdbdb;border-top: 2px solid #dbdbdb;} .wrappage .footer .footer-bottom .footer-bottom-content{border:none;padding-left:0;padding-right:0;} .wrappage .footer .footer-bottom .footer-bottom-content .btn-msg{padding:12px 5px;} .wrappage .footer .footer-copy{background:#eeeeee;} .wrappage .footer-copy .footer-copy-content{padding:0;} /*End listing*/ /* Begin style store */ .pagewidth img[src="http://pics.ebaystatic.com/aw/pics/s.gif"]{display: none} #LeftPanel{ width:24%; padding:5px 0 0 10px;} table.v4midBox{border:0 !important} table.v4acpcont{margin-bottom:20px !important} .v4acp_head .v4accent{padding:0; background:none;} .v4acp_head .v4title{ width:100%; padding:0 !important;border-radius: 5px 5px 0 0; } /*.v4acp_head .v4title h2{padding: 35px 0 15px 20px;position:relative; line-height:24px;background:#F8F8F8; color:transparent; }*/ /*.v4acp_head .v4title h2:before{padding: 35px 0 5px 20px;content:"Categories"; position:absolute; top:0; left:0px; color:#dd76aa; width:100%;font-size:24px; line-height:24px;font-family:arial, sans-serif; font-weight: bold;}*/ .v4midBox.v4nfc .v4acp_mid .v4mid{background:#fff !important; border:0; padding:0;} .v4midBox.v4nfc .v4acp_mid div.ttl{display:none} .v4midBox.v4nfc .v4acp_mid .v4mid .lcat{width:100%; padding:0;background:#F8F8F8;} .v4midBox.v4nfc .v4acp_mid .v4mid .lev1 li{width:100%; margin:0;} /*.v4midBox.v4nfc .v4acp_mid .v4mid .lev1 >li{position:relative; padding:7px 0 7px 37px ;}*/ /*.v4midBox.v4nfc .v4acp_mid .v4mid .lev1 > li:last-child{ border:0;padding-bottom: 25px;}*/ .v4midBox.v4nfc .v4acp_mid .v4mid .lev1 >li:before{ position: absolute; content: ""; top:12px;left: 20px; width:6px; height: 10px; background: url(../images/result.png) no-repeat left center;background-position: 0px -453px; z-index: 1 } .v4midBox.v4nfc .v4acp_mid .v4mid .lev1 >li a, .v4midBox.v4nfc .v4acp_mid .v4mid .lev1 >li span{text-transform: none;} .v4midBox.v4nfc .v4acp_mid .v4mid .lev1 li a, .v4midBox.v4nfc .v4acp_mid .v4mid .lev1 li span:first-child{font-size:14px; line-height:19px;font-family:arial, sans-serif; font-weight:700; color:#333333; display: inline-block; } .v4midBox.v4nfc .v4acp_mid .v4mid .lev1 li:hover a,.v4midBox.v4nfc .v4acp_mid .v4mid .lev1 li:hover span { color:#333333 !important; text-decoration:underline;} .v4midBox.v4nfc .v4acp_mid .v4mid .lev2{padding:5px 0 5px;} .v4midBox.v4nfc .v4acp_mid .v4mid .lev2 li{ list-style:none; padding:4px 0 4px 56px;} .v4midBox.v4nfc .v4acp_mid .v4mid .lev2 li a, .v4midBox.v4nfc .v4acp_mid .v4mid .lev2 li span:first-child{font-weight:400 ; font-size: 13px; text-transform: none} .v4midBox.v4nfc .v4acp_mid .v4mid .morelnk{display:none} .v4midBox.v4nfc .v4acp_mid div.link{} .v4midBox.v4nfc .v4acp_mid div.link br{display:none} .v4midBox.v4nfc .v4acp_mid div.link a{border-top:1px solid #f1f1f1; padding:8px 13px; display:inline-block; width:100%; font-size:15px; line-height:20px;font-family: 'Droid Sans', sans-serif; font-weight:400; color:#111111;} .lcat .cnt{font-size:14px !important;font-family:arial, sans-serif; color:#333333 !important; font-weight:700} .lcat .lev2 .cnt{font-size:13px !important; font-weight:400} .lcat a.all_cats{display:none} .pagewidth .r3{width:100%;} .pagewidth .v4stabl, .pagewidth div.r3_cm{ padding:0;} .pagewidth div.r3_cm{ display: inline-block; min-height: auto; width: 100%; padding:0px 10px 0px 7px} .pagewidth .v4stabl, .pagewidth .ctrlbr .pdmt:first-child, .pagewidth div.r3_cm div.rs_box div.cmpBr span.cmsg.g-nav{ display: none;} .pagewidth .fpcc{display: inline-block; width: 100%; padding:9px 0px; } .pagewidth .fpcc > div{ border-bottom: 0; display: inline-block; width: 100%;} .fpcc .smuy{margin: 0;} .pagewidth .fpcc .smuy span{ color: #333333; display: inline;white-space:initial; font-weight:700; font-family:arial, sans-serif; font-size: 13px; line-height:23px;} .pagewidth .fpcc .smuy span.keywordClass{font-weight:700; } .pagewidth .fpcc .smuy span.countClass, .pagewidth .fpcc .smuy span.keywordClass{ background: none; } .pagewidth .fpcc .smuy span.matchClass{ margin:0px 2px 0 4px; font-weight: 400; font-size: 13px} .pagewidth .fpcc .smuy span.countClass{ margin-left: 0; } .toplne{margin-top:20px;} .olp-mn{margin-left:-6px} .pagewidth div.r3_cm div.rs_box{ display: inline-block; width:100%; position: relative; padding:0px;} td#CentralArea span.pdmt{ position: absolute; top: -35px; right:0px; padding-right:0px;} .pagewidth div.r3_cm div.rs_box div.ctrlbr span.pdmt span {color: #e168a3; display: inline-block;font-family:arial, sans-serif; font-size: 13px; line-height:18px; font-weight:400 !important} .pagewidth div.r3_cm div.rs_box div.ctrlbr span.pdmt span.label {color: #000000;padding-right:10px; font-weight:700 !important;} .pagewidth div.r3_cm div.rs_box div.ctrlbr span.pdmt span.cur {border:1px solid #E5E5E5;position:relative; padding:3px 20px 3px 5px; margin-left: 0} .pagewidth div.r3_cm div.rs_box div.ctrlbr span.pdmt span.cur:after{background:url(../images/result.png) no-repeat center;background-position: 0px -341px; content:""; width:7px; height:10px; top:8px; right:8px; position:absolute} .pagewidth div.r3_cm div.rs_box div.ctrlbr span.pdmt span.cur img{ display: none;} .pagewidth div.r3_cm div.rs_box div.ctrlbr { border-bottom:5px solid #F8F8F8;margin-bottom: 22px;} .pagewidth div.r3_cm div.rs_box .pview.rs-pview { padding:0px; margin-top:9px;} .pagewidth .grid td.left{ border: 0;} .pagewidth td.gallery.left{ padding:0 8px 0;} .pagewidth td.gallery.left:last-child{ padding:0 0 0 12px;} /*.grid td.gallery:first-child{ padding:0 12px 0 0;}*/ .pagewidth td.gallery{padding:0;} .pagewidth div.r3_cm div.rs_box .dynpg .pgbc .page, .pagewidth div.r3_cm div.rs_box .dynpg .r .form{ display: none; } .pagewidth div.r3_cm div.rs_box .dynpg .m .pager .next a, .pagewidth div.r3_cm div.rs_box .dynpg .m .pager .prev a{ display: inline-block;background: url(../images/BigW-bg.png) no-repeat 0 -411px; text-align: center; text-indent: -9999px;width:22px ; height: 20px; margin:3px 0px 0 0} .pagewidth div.r3_cm div.rs_box .dynpg .m .pager .prev a:first-child{} .pagewidth div.r3_cm div.rs_box .dynpg .m .pager .prev a.disabled:last-child{display: none;background:url("../images/result.png") no-repeat center;background-position: 0px -297px;} .pagewidth div.r3_cm div.rs_box .dynpg .m .pager .prev a.enabled:last-child{display: inline-block;background: rgba(0, 0, 0, 0) url("../images/result.png") no-repeat scroll 0 -298px; margin-right: 0px} .pagewidth div.r3_cm div.rs_box .dynpg .m .pager .next{padding-left: 0} .pagewidth div.r3_cm div.rs_box .dynpg .m .pager .next a.disabled:first-child{display:none } .pagewidth div.r3_cm div.rs_box .dynpg .m .pager .next a:first-child{display:none} .pagewidth div.r3_cm div.rs_box .dynpg .m .pager .next a.disabled:last-child{display: none} .pagewidth div.r3_cm div.rs_box .dynpg .m .pager .next a.enabled:last-child{ display: inline-block; margin-left:20px;background:url("../images/result.png") no-repeat center;background-position: 0px -254px;} .pagewidth div.r3_cm div.rs_box .dynpg .m .pager .pages .pipe{ display: none; } .pagewidth div.r3_cm div.rs_box .dynpg .m .pager .pages a{color: #333333 !important;font-family: 'Open Sans', sans-serif; font-size:18px; line-height: 20px; padding:5px 5px 5px 4px; display:table-cell; display: inline-block; font-weight:700; margin:0 6px} .pagewidth div.r3_cm div.rs_box .dynpg .m .pager .pages a.disabled,.pagewidth div.r3_cm div.rs_box .dynpg .m .pager .pages a:hover{color:#e168a3 !important; } .pagewidth div.r3_cm div.rs_box .dynpg .m .pager .pages a, .pagewidth div.r3_cm div.rs_box .dynpg .m .pager .pages a:active{text-decoration: none;} .pager{ margin: 0px auto 15px; } .rs_box{ border: 0;} .pagewidth table.gallery{ background: #FFF; border: 1px solid #EBEBEB; margin-top: -3px} .pagewidth table.grid td.gallery:first-child table.gallery{ border-left: 1px solid #dcdcdc; } /*.pagewidth table.grid td.gallery table.gallery:hover{border:1px solid #DB68A3;}*/ .pagewidth table.grid td.gallery table.gallery:hover tr td.details div.ttl a{text-decoration:underline;} #v4-3 #cbtf-btm{border-top:5px solid #F8F8F8;} table.gallery tr td.details {padding: 10px 17px 20px; min-height: 196px; } table.gallery tr td.details div.ttl{ height: 40px; overflow: hidden; margin-bottom:20px;} table.gallery tr td.details div.ttl a{ font-size:13px;font-family:arial, sans-serif; color: #333333; line-height:21px; font-weight:bold;} table.gallery tr td.details div.ttl a:hover{text-decoration:underline;} table.gallery tr td.details div.g-nav.subtitle{ height:32px; overflow:hidden; margin-bottom:14px; font-size:12px; line-height:15px; color:#999999; font-family:arial, sans-serif;font-style:italic;} table.gallery tr td.details div.g-nav.subtitle img{display:none;} table.gallery tr td.details table.fixed img{ margin: 2px 0 0 0px;} table.gallery tr td.details table.fixed tr td.bin-content span{ font-family: 'Arial' !important; font-size: 20px; color: #ca0e0e; font-weight:bold; line-height:27px;} table.gallery tr td.details table.fixed tr.price-style-1 span{ font-family: 'Arial' !important; font-size: 14px; color: #000000; line-height:25px; text-decoration:line-through;} table.gallery .mi{ padding: 4px 10px 0 17px; } table.gallery .mi a{ font-size:10px; font-family:arial, sans-serif; line-height:13px; color:#222222;} table.gallery tr td.details table.fixed tr td div.ship span, table.gallery tr td.details table.fixed tr td div.clr span{font-family:arial, sans-serif; font-size: 11px; line-height:13px;color: #959595; font-weight: normal; padding:0px;} table.gallery tr td.details table.fixed tr td div.clr span.label{padding-right:5px;} table.gallery tr td.details table.fixed tr td div.ship span.ship{} table.gallery tr td.details table.fixed tr td div.clr.time2:last-child{display:none;} table.gallery div.clearFullDiv{ padding: 10px 0 0; font-family: 'Droid Sans', sans-serif; font-size:12px;} table.gallery table.fixed div.cpa{margin:0 !important;} .r3_t b, .r3_bl b{ background: none;} .r3_t i, .r3_bl i{ border: 0;} .r3_t, .r3_c, .r3_bl{ background: none; border: 0;} table.gallery img.sale{display: none} .r3_t{ display: none; } .cmpBr{ background: none; border: 0; height: 0;} td#CentralArea div.dynpg, table.pgbc{ border: 0; background: none; } td#CentralArea div.dynpg .m{ width:100%;} div.itemseparator{ border: 0;} .rs-pview{ padding: 0;} .pagewidth td#CentralArea div.v4stabl{ display:none;} .pagewidth .olp-mr{ display: none;} .pagewidth .olp-tl p{ display: none; } .olp-tl, .olp-tr, .olp-bl, .olp-br{ border: 0;} .olp-tl, .olp-bl, .olp-bl p{ background: none;} .olp-ml{ border: 0; background: none;} .olp-tl p{ border: 0; background: none;} .olp-tr, .olp-br, .olp-mr{ background: none; } .olp-bl div{ border: 0; display: none; } .ml-pm .olp-cnt{ border: 1px solid #e5e5e5; padding: 15px; } .pagewidth .dynpg td.pages a.disabled{ } .pagewidth .pipe{ display: none;} table.gallery td.picture{ padding:30px 0 20px; } table.gallery td.picture .image{margin:0px auto;display:table;height:140px; } table.gallery img{max-height:140px;} table.gallery td.picture .image a{display: table-cell; vertical-align: middle; text-align:center;} a.ppr{color: #1f2398; font-size:10px;} table.gallery tr td.details div.ttl img{ margin-left:4px;} table.gallery table.fixed {width:100%;margin-top:14px} table.gallery table.fixed.price-2 { margin-top:0;} table.gallery table.fixed tr.price-style{ margin-bottom:14px;} table.gallery table.fixed tr td .stp{ text-align: right ; display:none} table.gallery table.fixed tr td:last-child{text-align:right;} table.gallery table.fixed tr td .bin.g-b{ font-size:14px;font-family:arial, sans-serif; line-height:20px; color:#db68a3; font-weight:bold;} table.gallery table.fixed span.oriprs, table.gallery table.prices span.oriprs{display:none; font-size:14px;font-family: 'Droid Sans', sans-serif; line-height:20px; color:#222222; padding-left: 10px } table.gallery table.fixed span.disct, table.gallery table.prices span.disct{margin-top:4px; display: none} table.gallery table.fixed tr td{ display: table-cell; width: 50%} .pagewidth .stBadge{ margin-top:7px; min-width:100px} .pagewidth .stBadge img{ width:auto; max-width:100%} .pgbc{padding:0;} td#CentralArea div.dynpg{padding-top:10px;padding-bottom:0;} td#CentralArea div.dynpg .m .pager{margin:17px auto 0; } .olp-pad{padding: 0 !important; width:100% !important;} #v4-56, .vsc{width:100% !important;} #PreviewLayer .olp-cnt{width:100% !important; left:0;} /* End style store */ /* Begin style supbage */ .sub-page{ margin: 0 0 30px;padding:5px 10px 0px; display:inline-block; width:100%} .sub-page input{display:none} .sub-page .col-left{padding:0 25px 0 0; width: 26%; float: left;} .sub-page .col-left input + label{color:#dd76aa; padding:15px 0 0px 20px; width: 100%; margin: 0; font-size:24px;font-family:arial, sans-serif; line-height:60px; font-weight: bold;background: #F8F8F8;} .sub-page .col-left ul{padding:0 0 15px 20px;background:#F8F8F8;} .sub-page .col-left ul li{position:relative;position: relative;} .sub-page .col-left ul li:last-child{ border-bottom:0} .sub-page .col-left ul li:before{ position: absolute; content: ""; top:20px;left: 20px; width:6px; height: 10px; background: url(../images/BigW-bg.png) no-repeat 0 -341px; z-index: 1 } .sub-page .col-left ul li a{color:#000000;width: 100%; display:inline-block; padding:5px 0 7px 17px; font-size:14px; line-height:19px;font-family: arial, sans-serif; font-weight:700;background:url("../images/PetersofKensington-subpage-customerservice.png") no-repeat left 10px;} .sub-page .col-left ul li a:hover,.sub-page .col-left ul li.active a{color: #dd76aa } .subpage-container{padding:13px 0 0; width:74%; float: left;} .subpage-container h1, .subpage-container h2, .subpage-container h3, .subpage-container h4, .subpage-container h5, .subpage-container h6{font-size:36px; color:#000000; text-transform:uppercase;font-family: arial, sans-serif; font-weight:400; line-height:45px; margin:0 0 15px} .subpage-container h2{font-size:30px; line-height:25px; margin-bottom:25px} .subpage-container h3{font-size:26px; line-height:26px; margin-bottom:23px} .subpage-container h4{font-size:20px; line-height:20px; margin-bottom:26px} .subpage-container h5{font-size:14px; line-height: 18px; margin-bottom: 0} .subpage-container,.subpage-container h5, .subpage-container p, .subpage-container a,.content-text a.text, .subpage-container th, .subpage-container td, .subpage-container li{font-size:14px; color:#000000; font-family:arial, sans-serif; font-weight:400;line-height:23px;} .content-text a.text{font-weight:400; color: #222222 !important; text-decoration: none !important} .subpage-container .content-text p span{color:#999999;} .subpage-container .content-text p a{color:#DB68A3;} .subpage-container .content-text p a:hover{font-weight:bold;} .subpage-container .content-text p a.phone{color:#333333;} .content-text p{margin-bottom: 0px;} .content-text p:last-child{margin-bottom: 0px;} .content-text{padding-bottom:20px; margin:0;} .content-text:last-child{padding-bottom: 0;} .subpage-container li{margin-bottom:7px; position:relative;} .subpage-container ul li:last-child, .subpage-container ol li:last-child{margin-bottom:0px;} .subpage-container ul li{padding-left:16px;} .subpage-container ul li:before{position:absolute; top:9px; left:0; background:url(../images/result.png) no-repeat left center;background-position: 0px -188px;width:4px; height:4px; content:""} .subpage-container ol{margin:0px 0 0 14px;} .subpage-container ol li{list-style:inherit; padding-left:2px;} .subpage-container .color-red{color: #b2142c !important} .subpage-container th{font-weight: bold} .subpage-container th, .subpage-container td{padding: 3px 5px 3px 0} .subpage-container td:first-child{width: 120px} h2.title-subpage{font-family: arial; font-weight: 400; font-size: 26px; text-transform: uppercase; color: #222; margin: 0 0 20px;font-weight:bold;text-align:center;} .subpage-content .returns-title {display:inline-block;width:100%;margin:15px 0px;} .subpage-content .returns-title h2{max-width:240px;margin:0px auto;padding-bottom:60px;color:#222;font-size:26px;font-weight:bold;text-transform:uppercase;background:url(../images/returnpolicy.png) bottom center no-repeat;} .subpage-content .contact-care {display:inline-block;width:100%;margin-bottom:20px;margin-top:15px;} .subpage-content .contact-care h2{background:url(../images/peterkensington-icon-contact.png) top center no-repeat;padding-top:120px;max-width:375px;margin:0px auto;font-size:42px;color:#111;font-weight:bold;text-transform:uppercase;} .subpage-content .postage{display:inline-block;width:100%;margin:15px 0px;} .subpage-content .postage h2{max-width:130px;margin:0px auto;padding-bottom:75px;color:#222;font-size:26px;font-weight:bold;text-transform:uppercase;background:url(../images/peterkensington-icon-postage.png) bottom center no-repeat;} .subpage-content a strong{color:#000 !important;} .subpage-content .contact-phone{ display: inline-block;width: 100%;margin-bottom: 17px;background: url(../images/peterkensington-icon-contact-phone.png) left center no-repeat;min-height: 83px;padding-left: 115px;} .subpage-content .contact-phone p{ padding-top: 18px;} /* End style supbage */ @media (max-width:1199px){ /* Begin listing */ .footer-bottom .box-footer:last-child, .footer-bottom .box-footer:first-child{width: auto} .slider .img-details{height: 335px;} .slider .grid-wrapper{height: 335px;} /* End listing */ /* Begin home */ .search-content{width: 60%;} .menu-header ul li a{padding: 19px 15px 20px;} /* End home */ /*sub page*/ .sub-page .col-left{width:30%;} .subpage-container{width:70%;} /*store*/ #LeftPanel{width:28%;} } @media (max-width:1140px){ /* Begin home*/ .cat-box li img{min-height:278px;} /* End home */ } @media (max-width:1024px){ /* Begin listing */ .slider .grid-item{z-index: -10} /* End listing */ } @media (max-width:992px){ /* Begin listing */ .menu-header ul li a{font-size: 14px;padding: 19px 10px 20px;} .slider .img-details{max-height: 412px;} .slider span{width: 80px; height: 80px} .slider label img{ max-width: 78px; max-height: 78px } .wrappage .product-view-name{font-size:28px;} /* End listing */ /* Begin store */ /* End store */ } @media (min-width: 939px) and (max-width:991px){ .slider .img-details{height:321px;} .slider .grid-wrapper{height:321px;} } @media (min-width: 768px) and (max-width:938px){ /* Begin listing */ .menu-header ul li a{font-size: 12px; padding: 11px 9px 9px} .box-images-details{width:40%;} .product-shop-container{width:60%;} .tabs{width:60%;margin-top:30px;} .slider .grid-wrapper, .slider .img-details{width: 100%; height:299px;} .slider .img-details{max-height:300px;} .slider span{width: 70px; height: 70px} .slider label img{ max-width: 68px; max-height: 68px } .wrappage .product-view-name{font-size:26px;} .footer-bottom .box-footer:nth-child(2){margin-left:20px;} /* End listing */ /* Begin home */ .search-content .v4sbox{padding: 0 41px 0 20px;} .search-content{width:50%;} .pagewidth .menu-header ul li a{font-size: 12px; padding: 9px 6px 7px} .pagewidth .menu-header ul li:first-child a:hover{padding-left:6px;} /* Begin store */ #LeftPanel{width:29%;} .v4midBox.v4nfc .v4acp_mid .v4mid .lev1 li a, .v4midBox.v4nfc .v4acp_mid .v4mid .lev1 li span:first-child{font-size:12px;} .lcat .cnt{font-size:12px !important;} .v4midBox.v4nfc .v4acp_mid .v4mid .lev2 li a, .v4midBox.v4nfc .v4acp_mid .v4mid .lev2 li span:first-child{font-size:11px;} .lcat .lev2 .cnt{font-size:11px !important;} .v4midBox.v4nfc .v4acp_mid .v4mid .lev2 li{padding-left:45px;} .v4midBox.v4nfc .v4acp_mid .v4mid .lev1 > li, .v4midBox.v4nfc .v4acp_mid .v4mid .lev2 li{} .sub-page .col-left input + label{font-size: 18px} td#CentralArea span.pdmt{position: initial;float:left;} .pagewidth div.r3_cm div.rs_box div.ctrlbr{padding: 0} .pagewidth div.r3_cm div.rs_box div.ctrlbr span.pdmt span.label{padding-left: 0} table.gallery tr td.details{padding: 10px 10px} table.gallery .mi{padding-left: 10px} .pagewidth .fpcc .smuy span.matchClass{} .pagewidth div.r3_cm div.rs_box div.ctrlbr{padding-bottom: 10px !important;} table.gallery table.fixed tr td .bin.g-b{font-size:12px;} .v4acp_head .v4title h2, .col-left .box-brand h2{font-size:21px;} table.gallery table.fixed span.oriprs, table.gallery table.prices span.oriprs{font-size:12px;} table.gallery tr td.details table.fixed img{ max-width:50px;} .pagewidth div.r3_cm div.rs_box .dynpg .m .pager .pages a{margin: 0 5px} .pagewidth div.r3_cm div.rs_box .dynpg .m .pager .next a.enabled:last-child{margin-left: 10px} .pagewidth div.r3_cm div.rs_box .dynpg .m .pager .prev a.enabled:last-child{margin-right: 3px} /* Begin subpage */ .sub-page .col-left{ width: 30%;} .subpage-container{width:70%;} .subpage-container table{width: 100%} } @media(max-width: 767px){ /* page listing */ .wrappage .search-content{width:100%;} .wrappage .header-top{display:none;} .wrappage .header-container .header-content .logo-content{ padding:20px 0 20px 10px; display: inline-block;margin:0;} .wrappage .header-content .text-shipping p a:first-child{background:none;padding:0;} .wrappage .header-content .text-shipping p a:last-child {display:none;} .wrappage .header-content .search-container{display:inline-block;width: 100%;margin-bottom:20px;} .wrappage .header-content .search-content{margin:0;} .wrappage .header-content .search-content p {display:none;} .wrappage .header-content .text-shipping{padding:75px 5px 0 0;} .wrappage .nav-trigger + label{display:none;} .wrappage .product-view-name{font-size:26px;line-height: 26px;} .wrappage .price{margin: 15px 0 0;padding-top:20px;} .wrappage .product-shop-container{margin-top:0;} .price{border-bottom:none;padding-bottom:0;} .wrappage .price .price-new span{margin:8px 0;} .wrappage .price .price-new{margin-bottom:5px;} .wrappage .slider label{display:none;} .slider #id1 + label + .img-details{border-bottom:none; border: 1px solid #EAEAEA;} .slider .grid-item ~ .img-details img{padding-top:20px;} .tabs{width:100%;padding:0;margin-top: 25px;} main section{padding:25px 0;border:none;} main label{width:100%;border-bottom:1px solid #d7d7d7;margin-bottom:25px;} main label span{padding-left: 0;border:none;padding:0;background:url("../images/PetersofKensington-listing-tabs-close.png")no-repeat 96.5% center;} #tab1:checked + label ~ #content1, #tab2:checked + label ~ #content2, #tab3:checked + label ~ #content3{display:none;} #tab1-mobile:checked + label + #content1{display:inline-block;} main input:checked + label {border-bottom:1px solid #d7d7d7;margin-bottom:0;} main input:checked + label span{background:url("../images/PetersofKensington-listing-tabs-open.png")no-repeat 96% center;} main input:checked + label + section{display:inline-block;} main input[name="tabs"]+label{display:none;} main input[name="tabs-mobile"]+label{display:inline-block;} main input:checked + label span{text-decoration:none;} /*End listing*/ /* begin style store*/ .navigation{ background: #111;} /* Navigation Menu - List items */ /* non-critical appearance styles */ .nav-item { width: 100%; border-top: 1px solid #ddd; border-bottom: 1px solid #000;} /* critical styles - hide the checkbox input */ .nav-trigger {position: absolute;clip: rect(0, 0, 0, 0);} /*.nav-trigger + label{display: block; background: url("../images/PetersofKensington-tablet-menu-icon.png") no-repeat center; cursor: pointer; float: left; height: 30px; width: 36px; float:left; position:absolute; top:60px;left:10px; margin:0px 0 0 10px; z-index: 5}*/ .nav-trigger + label{display: block; background: url("../images/result.png") no-repeat center;background-position: 0px -543px; cursor: pointer; float: left; height: 30px; width: 36px; float:left; position:absolute; top:60px;left:10px; margin:0px 0 0 10px; z-index: 5} /* Make the Magic Happen */ .header-content .menu-header {-webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -ms-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; display: none;} .nav-trigger:checked + label { background: url("../images/result.png") no-repeat center;background-position:5px -487px;} .nav-trigger:checked ~ .menu-header {filter: alpha(opacity=50); opacity: 1; display: inline-block !important; } .menu-header{border-top:1px solid #ffffff;background: #DB69A3; display: none !important; z-index:19;width:100%; position:relative; top:0px; left:0; text-align:left; } .menu-header .menu-container{width: 100%} .menu-header ul{width: 100%;} .menu-header ul li{width: 100%;border-bottom:1px solid #DF78AC;} .menu-header ul li a{color:#ffffff;font-weight:700; padding: 10px 12px;font-family:arial; line-height: 18px; font-size: 14px; text-align: left; display: inline-block; width: 100%} .menu-header ul li a:hover{color: #a5c0e8;} .menu-header ul li .icon-cat{display: none; text-indent: -9999px; width: 40px;height: 40px; position: absolute; top:0; right:0; background: url(../images/Triumph-bg.png) no-repeat 0 -366px; margin: 0;} .menu-header ul li input:checked + .icon-cat{ } .menu-header ul li input:checked ~ .sub-category{} .menu-header ul li .sub-category, .menu-header ul li .sub-category2{width:100%; display: none;} .menu-header ul li .sub-category li a{ background: #fff;padding: 10px} .menu-header ul li .sub-category li a:hover{ background: #ececec; color: #111;} .main-container{padding-top: 20px;} .box-images-details, .product-shop-container{width:100%; float:none; padding:0; border: 0;} .box-images-details{margin-top: 20px; padding-bottom:20px;} .slider .grid-wrapper{width: auto; height:436px} .slider .img-details{width: 100%; height: 620px;} .slider .img-details{max-height:436px;} .slider label{margin: 10px 10px 0 0} .slider input#id4 + label, .slider input#id8 + label, .slider input#id12 + label{margin-right: 10px;} .slider input#id7 + label, .slider input#id14 + label{margin-right:0px;} .slider span{width: 80px; height: 80px;} .slider label img{max-width: 78px; max-height: 78px;} .footer-bottom{border-top:2px solid #dbdbdb;border-bottom:2px solid #dbdbdb;padding-bottom: 25px;} .footer-bottom-content{padding: 0 10px 0px !important;border:none;} .footer-bottom .box-footer h1{font-size:22px;} .footer-bottom .box-footer:nth-child(2){margin:0;width:30%;} .footer-copy{display:inline-block;width:100%;padding:10px 0 25px;} .footer-copy p{width: 100%; text-align: center;line-height:50px;} .footer-copy p:last-child{padding: 0;} .footer-copy-content{display:inline-block;width:100%;padding:0;} /* page home */ .pagewidth .header-top{display:none;} .pagewidth .header-content .logo-content{float:none;margin:20px 0 20px;display:inline-block;} .pagewidth .header-content .text-shipping{display:none;} .pagewidth .header-content .search-content{margin:60px 10px 20px 0;width:80%;} .pagewidth .header-content .search-content p{display:none;} .pagewidth .search-container{width:50%;} .intro-page{margin-top:-15px;} .intro-page .banner-auto .container{padding:0;} .search-container{float: right ; margin: 0 auto;width: 40%;} .search-content .v5sbox{height:40px; width:40px;} .gallery .banner-slides .item img{width:100%;} .cat-box li{margin: 0px 0 10px 0 ; width:50%; padding: 0 5px;} .cat-box li img{min-height: 278px;} .cat-box li:nth-child(2n+1){padding: 0 5px 0 0;clear: left;} .cat-box li:nth-child(2n){padding: 0 0 0 5px;} .cat-box li:nth-child(3n+1){clear:none;} .intro-page .product-list{margin: 25px 0;} .brand-list{margin-top: 11px;} .brand-list .brand-img{border:none;} .brand-list .brand-img img{display:none;} .brand-list { border-top: 1px solid #cccccc;min-height:140px;background:url("../images/PetersofKensington-tablet-favbrands.png") no-repeat center;} .featured-head h2{font-size: 24px; line-height: 30px; } .pagewidth .footer{margin-top:10px;background:#eeeeee;} /* page store */ table.tb_v4bc tr td{padding:0 10px;} td#LeftPanel + td{display: none} td#LeftPanel + td +td{display: block; width: 100%;} td#LeftPanel{width: 100%; padding: 0 10px 10px; display: inline-block;} #LeftPanel .v4acpcont > tbody > tr:first-child + tr{display:none} #LeftPanel .v4acpcont:hover > tbody > tr:first-child + tr{display:block} #LeftPanel .v4acpcont table, #LeftPanel .v4acpcont tbody, #LeftPanel .v4acpcont tr, #LeftPanel .v4acpcont td{width:100%; display:block} table.v4acpcont .v4title h2{position:relative; text-align:left; } table.v4acpcont .v4title h2:after{color: #222222;font-size:35px;position:absolute; top:20px; right:10px; text-align: right; width:30px; height:30px; content:"+"; font-weight: bold;} table.v4acpcont:hover .v4title h2:after{content: ""} .v4acp_head .v4title h2::before{padding: 20px 0 5px 20px;} .v4acp_head .v4title h2{padding-bottom: 0} table.gallery .mi{padding-left: 10px} table.gallery tr td.details{padding: 10px; height: 176px;} table.v4acpcont{margin-bottom:0px !important;} .pagewidth div.r3_cm{padding:10px 10px 0 10px; } .pagewidth div.r3_cm div.rs_box div.ctrlbr span.pdmt span.cur::after{right:5px} .pagewidth div.r3_cm div.rs_box div.ctrlbr span.pdmt span.cur{padding-right: 15px} /* subpage*/ .sub-page{padding:0 10px; margin-top: -5px} .sub-page .col-left, .sub-page .subpage-container{display: inline-block; width: 100%; padding: 0 } .subpage-content{margin-top:50px;} .menu-left-subpage ul {display:none} .menu-left-subpage input:checked ~ ul{display:block; padding:0} .sub-page .col-left input + label{position:relative; width:100%;cursor:pointer;padding:35px 20px 30px;line-height: 24px;background:#F8F8F8 url("../images/PetersofKensington-subpage-customer.png")no-repeat 97% 45px;} .sub-page .col-left input:checked + label{padding:35px 20px 15px;background:#F8F8F8 url("../images/PetersofKensington-subpage-customer-open.png")no-repeat 97% 45px;} .subpage-content{margin-top: 40px;} .sub-page .col-left ul li a{background:none;} .sub-page .col-left ul li:last-child{padding:0 0 25px 0;} /*.menu-left-subpage input + label:after{position:absolute; top:0px; right:10px; content:"";font-family:arial, sans-serif; font-size:24px; font-weight:700; color:#222222;}*/ /*.menu-left-subpage input:checked + label:after{top:0px; content:""; }*/ .subpage-container ol{margin-left:14px;} } @media(max-width:736px){ .pagewidth .header-content .logo-content{margin: 20px 0 20px 20px;} } @media(max-width:667px){ .pagewidth .header-content .logo-content{margin: 20px 0 20px 30px;} } @media(max-width:640px){ .pagewidth .header-content .logo-content{margin: 20px 0 20px 45px;} } @media(max-width:639px){ /* page listing */ .header-content{text-align:center; } .header-content .text-shipping p span{display: none} .header-content .text-shipping p a img{width: 22px} .header-content .text-shipping p a:last-child{padding-right: 12px} .main-container{padding-top: 13px;} .product-view-name{font-size: 20px; line-height: 25px} .slider .grid-wrapper, .slider .img-details{height: 460px;} .slider .img-details{max-height: 458px} /* style home*/ .pagewidth .search-container{width:100%;} .pagewidth .header-content .logo-content{margin: 15px 0 0;} .pagewidth .header-content .search-content{width:100%;margin:12px 0 20px;} .banner .container{padding: 0} .cat-box .container{padding: 0 10px} .cat-box li{width:100%; padding:0 !important;margin: 0 0 10px; } .cat-box li img{width:100%;} .intro-page .product-list{margin: 5px 0;} .brand-list{margin: 25px 0 15px;background:url("../images/PetersofKensington-mobile-favbrands.png") no-repeat center;} /* style store*/ .pagewidth table.gallery{margin-bottom:-15px;} div.itemseparator{margin:0;} #v4-3 #cbtf-btm{ margin-top: 15px;} .pagewidth .menu-header .navigation{margin-top:0;} .col-left .box-brand ul li{width:50%} .pagewidth td.gallery{padding:10px 0 0 !important; width:100%; display:block} table.gallery tr td.details div.ttl{height:auto;} .box-trustmakers .box p strong{font-size:12px; line-height:15px;} table.gallery tr td.details div.ttl{height:auto;} table.v4acpcont{margin-bottom:0px !important} table.gallery tr td.details{height:auto;} .pagewidth .fpcc, .pagewidth div.r3_cm div.rs_box div.ctrlbr{text-align:center;padding-bottom: 15px;} td#CentralArea span.pdmt{position:inherit; } td#CentralArea div.dynpg .m .pager{margin-top: 0} .pagewidth table.gallery {border: 1px solid #dcdcdc !important;} .pagewidth div.r3_cm div.rs_box .dynpg .m .pager .pages a{margin: 0 7px; font-size: 18px;} .pagewidth div.r3_cm div.rs_box .dynpg .m .pager .next a.enabled:last-child{} .pagewidth div.r3_cm div.rs_box .dynpg .m .pager .prev a.enabled:last-child{margin-right: -3px;} .footer{margin-top: 30px;} .footer-bottom{border-bottom:2px solid #dbdbdb;padding-bottom: 25px;} .footer-bottom-content{padding: 0 10px 0px !important;border:none;} .footer-bottom .box-footer{width:100% !important;} .footer-bottom .box-footer h1{font-size:30px;padding: 0 0 10px;} .footer-bottom .box-footer:first-child{padding: 23px 0 0;} .footer-bottom .box-footer:nth-child(2){padding: 30px 0 0;margin-left:0px;} .footer-bottom .box-footer:last-child{padding: 30px 0 0;} .footer-copy{display:inline-block;width:100%;padding:10px 0 25px;} .footer-copy p{width: 100%; text-align: center;line-height:50px;} .footer-copy p:last-child{padding: 0;} .footer-copy-content{display:inline-block;width:100%;padding:0;} } @media(max-width:568px){ /* home */ } @media(max-width:480px){ /* home */ .trust-marker-content{text-align: center; padding: 10px 0; margin: 30px 0 0} .trust-marker-content > div{display: inline-block; width:260px; margin: 0 auto; text-align: left} .trust-marker .box{ width: 100%; padding: 7px 0} .trust-marker .box p{font-size: 20px; line-height: 26px;} .trust-marker .box img{width:50px; margin-right: 15px} } @media(max-width:479px){ /*home*/ .pagewidth .logo-content > img{width:80%;} .nav-trigger + label{top: 40px;} .pagewidth .header-content .logo-content{ margin: 15px 0 0 45px;} .slider .grid-wrapper, .slider .img-details{height: 396px;max-width: 460px;} /* page listing */ .slider .img-details{max-height:395px} } @media(max-width:414px){ /* home */ .pagewidth .header-content .logo-content{ margin-left: 45px;} .cat-box .featured-head span{width: 243px; line-height: 24px} .cat-box .featured-head h2::before {top:24px} .cat-box li{width:100%; padding: 0 !important} .cat-box li img{width:100%;} /* store*/ .pagewidth div.r3_cm div.rs_box .dynpg .m .pager .pages a{font-size:18px; margin: 0 3px} #PreviewLayer_olp_pad > div{height: auto !important} #PreviewLayer{ max-width: 90% !important; display: inline-block; } #PreviewLayer .ic-w400.ic-m { display: inline-block; width:100%; } #PreviewLayer .ic-w400.ic-m center{ width: 100% !important; height: auto !important; display: inline-block;} #PreviewLayer .ic-w400.ic-m center img{ width: 100% !important; float: left; height: auto !important; } .olp-cnt,div.vsc,.ic-cp{max-width: 310px !important;} div.vsc table,div.vsc tr,div.vsc td,div.vsc div{max-width: 310px !important;} .ic-w400.ic-m { height:auto;width:100%;} .ic-w400{ height:auto;width:98% !important; overflow: inherit;} .ic-cntr .ic-b1{ padding:10px;max-width: 310px !important; height:auto !important; border:0 !important} #v4-56{ height:auto !important} .ic-cp{border:1px solid #ececec; display:inline-block; width:100%;} .olp-mn.ml-pm{margin-left: 10px} /*listing*/ .slider .grid-item ~ .img-details img{padding-top:0;} .box-images-details{padding-bottom:0;} .slider .grid-wrapper, .slider .img-details{height:392px;} } @media(max-width:400px){ /*home*/ /* store*/ .olp-mn{margin-left:0} .ml-pm .olp-cnt{ margin-left:0px;} } @media(max-width:399px){ /*home*/ /* store*/ .olp-mn{margin-left:10px} #PreviewLayer > table{ max-width: 270px !important; } div.vsc table,div.vsc tr,div.vsc td,div.vsc div{max-width: 270px !important;} .olp-cnt,div.vsc,.ic-cp{max-width: 270px !important;} .ic-cntr .ic-b1{ max-width: 270px !important; } .tg-tb.tg-clp tr td img{width:23px !important; height:23px !important} #gh{min-width:300px} } @media(max-width:320px){ /*home*/ .pagewidth .logo-content > img{width:63%;} .pagewidth .header-content .logo-content{ margin-left: 90px;} .nav-trigger + label{top: 30px;} /*listing*/ .wrappage .header-container .header-content .logo-content{padding:14px 0 11px 0;} .wrappage .logo-content > img{max-width:100%;height:70px;} .wrappage .header-content .text-shipping{padding: 45px 5px 0 0;} .wrappage .main-container{padding-top: 21px;} .wrappage .product-view-name{line-height:30px;} .wrappage .description{margin-top:7px;} .wrappage .price{margin: 15px 0 0;} .wrappage .price .price-new span{font-size:18px;margin: 8px 0 0;} .price .price-new{font-size:26px;} .box-images-details{margin-top:15px;} .slider .grid-wrapper{height:298px ;} .slider .img-details{max-height:298px} /*subpage*/ .sub-page .col-left input + label{background-position:96% 43px;} .sub-page .col-left input:checked + label{background-position:95% 45px;} } /*********STYLE MAIN CAROUSEL ******************/ #slider { text-align: center; } .catch { display: block; height: 0; overflow: hidden; } #slider { margin: 0 auto; position:relative; width:100%; display:inline-block } #description { margin: 25px auto; text-align: left; max-width: 650px; padding: 0 25px; } .respond { margin: 0 auto; max-width: 370px; } /* NEW EXPERIMENT */ /* Slider Setup */ #slider input { display: none; } #slider #slide1:checked ~ #slides .inner { margin-left:0; } #slider #slide2:checked ~ #slides .inner { margin-left:-100%; } #slider #slide3:checked ~ #slides .inner { margin-left:-200%; } #slider #slide4:checked ~ #slides .inner { margin-left:-300%; } #slider #slide5:checked ~ #slides .inner { margin-left:-400%; } #slider #slide6:checked ~ #slides .inner { margin-left:-500%; } #slider #slide7:checked ~ #slides .inner { margin-left:-600%; } #slider #slide8:checked ~ #slides .inner { margin-left:-700%; } #slider #slide9:checked ~ #slides .inner { margin-left:-800%; } #slider #slide10:checked ~ #slides .inner { margin-left:-900%; } #slider #slide11:checked ~ #slides .inner { margin-left:-1000%; } #slider #slide12:checked ~ #slides .inner { margin-left:-1100%; } #overflow { width: 100%; overflow: hidden; } #slider article img { width: 100%; } #slides .inner { width: 500%; line-height: 0; } #slides article { width: 20%; float: left; position:relative } /* Slider Styling */ /* Control Setup */ #slides article a{display:inline-block; width:100%;} #active { text-align: center; left:0; z-index:9; margin:16px 0 0 0; width:100%; text-align:center; } #active label { display: inline-block; width: 18px; height: 18px; margin: 0 3px; cursor: pointer; background: none; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; background: #245699; opacity: 0.5 } #active label:hover { opacity: 1 } #slider #slide1:checked ~ #active label:nth-child(1), #slider #slide2:checked ~ #active label:nth-child(2), #slider #slide3:checked ~ #active label:nth-child(3), #slider #slide4:checked ~ #active label:nth-child(4), #slider #slide5:checked ~ #active label:nth-child(5), #slider #slide6:checked ~ #active label:nth-child(6), #slider #slide7:checked ~ #active label:nth-child(7), #slider #slide8:checked ~ #active label:nth-child(8), #slider #slide9:checked ~ #active label:nth-child(9), #slider #slide10:checked ~ #active label:nth-child(10), #slider #slide11:checked ~ #active label:nth-child(11), #slider #slide12:checked ~ #active label:nth-child(12){ opacity: 1 } #controls {position:absolute; bottom:70%; width:100%;} #controls label { position:absolute; width: 34px; height: 94px; opacity: 1; z-index:9; cursor:pointer; margin:0; } #controls label:hover { } #slider input ~ #controls label:first-child{ background:none; background: url('../images/DM-bg.png') no-repeat 0 -148px; right:0; display: block; } #slider #slide1:checked ~ #controls label:nth-child(2), #slider #slide2:checked ~ #controls label:nth-child(3), #slider #slide3:checked ~ #controls label:nth-child(4), #slider #slide4:checked ~ #controls label:nth-child(5), #slider #slide5:checked ~ #controls label:nth-child(6), #slider #slide6:checked ~ #controls label:nth-child(7), #slider #slide7:checked ~ #controls label:nth-child(8), #slider #slide8:checked ~ #controls label:nth-child(9), #slider #slide9:checked ~ #controls label:nth-child(10), #slider #slide10:checked ~ #controls label:nth-child(11), #slider #slide11:checked ~ #controls label:nth-child(12), #slider #slide12:checked ~ #controls label:nth-child(1){ background:none; background: url('../images/DM-bg.png') no-repeat 0 -148px; right:0; display: block; z-index:17; } #slider #slide1:checked ~ #controls label:nth-child(2):hover, #slider #slide2:checked ~ #controls label:nth-child(3):hover, #slider #slide3:checked ~ #controls label:nth-child(4):hover, #slider #slide4:checked ~ #controls label:nth-child(5):hover, #slider #slide5:checked ~ #controls label:nth-child(6):hover, #slider #slide6:checked ~ #controls label:nth-child(7):hover, #slider #slide7:checked ~ #controls label:nth-child(8):hover, #slider #slide8:checked ~ #controls label:nth-child(9):hover, #slider #slide9:checked ~ #controls label:nth-child(10):hover, #slider #slide10:checked ~ #controls label:nth-child(11):hover, #slider #slide11:checked ~ #controls label:nth-child(12):hover, #slider #slide12:checked ~ #controls label:nth-child(1):hover{ } #slider #slide1:checked ~ #controls label:nth-child(12), #slider #slide2:checked ~ #controls label:nth-child(1), #slider #slide3:checked ~ #controls label:nth-child(2), #slider #slide4:checked ~ #controls label:nth-child(3), #slider #slide5:checked ~ #controls label:nth-child(4), #slider #slide6:checked ~ #controls label:nth-child(5), #slider #slide7:checked ~ #controls label:nth-child(6), #slider #slide8:checked ~ #controls label:nth-child(7), #slider #slide9:checked ~ #controls label:nth-child(8), #slider #slide10:checked ~ #controls label:nth-child(9), #slider #slide11:checked ~ #controls label:nth-child(10), #slider #slide12:checked ~ #controls label:nth-child(11) { background:none; background: url('../images/DM-bg.png') no-repeat 0 -44px; left:0; display: block; z-index:17; } #slider #slide1:checked ~ #controls label:nth-child(12):hover, #slider #slide2:checked ~ #controls label:nth-child(1):hover, #slider #slide3:checked ~ #controls label:nth-child(2):hover, #slider #slide4:checked ~ #controls label:nth-child(3):hover, #slider #slide5:checked ~ #controls label:nth-child(4):hover, #slider #slide6:checked ~ #controls label:nth-child(5):hover, #slider #slide7:checked ~ #controls label:nth-child(6):hover, #slider #slide8:checked ~ #controls label:nth-child(7):hover, #slider #slide9:checked ~ #controls label:nth-child(8):hover, #slider #slide10:checked ~ #controls label:nth-child(9):hover, #slider #slide11:checked ~ #controls label:nth-child(10):hover, #slider #slide12:checked ~ #controls label:nth-child(11):hover { } #slider #slide1 + #slides + #controls{display:none;} #slider #slide1 + #slides + #controls + #active{display:none;} /* Info Box */ #slider .info { line-height: 32px; margin:0; position: absolute; padding:0; opacity: 0; color: #fff; font-weight: 400; font-size: 27.7px; font-style: normal; font-family:'Lato', sans-serif; text-align: left; top:30%; right:44px; z-index:9; display:none; } #slider .info h3 { color: #fff; margin: 0; font-weight: 600; font-size: 41px; font-style: normal; font-family:'Lato', sans-serif; text-transform:uppercase; line-height:42px; } #slider .info a{font-size:14px; line-height:36px; color:#fff !important; font-family:'Lato', sans-serif; font-weight:600; background:#f46619; border-radius:3px; padding:0 19px 0 11px; display:block; width:102px; position:relative ; margin-top:12px;} #slider .info a:before { position:absolute; top:0 ; right:8px; content:""; width:5px; height:100%;} /* Slider Styling */ #slides { margin: 0; background: #fff; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#dbdac9',GradientType=0 ); /* IE6-9 */ } /* Animation */ #slides .inner { -webkit-transform: translateZ(0); -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */ -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */ } #slider { -webkit-transform: translateZ(0); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } #controls label{ -webkit-transform: translateZ(0); -webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; } #slider #slide1:checked ~ #slides article:nth-child(1) .info, #slider #slide2:checked ~ #slides article:nth-child(2) .info, #slider #slide3:checked ~ #slides article:nth-child(3) .info, #slider #slide4:checked ~ #slides article:nth-child(4) .info, #slider #slide5:checked ~ #slides article:nth-child(5) .info, #slider #slide6:checked ~ #slides article:nth-child(6) .info, #slider #slide7:checked ~ #slides article:nth-child(7) .info, #slider #slide8:checked ~ #slides article:nth-child(8) .info, #slider #slide9:checked ~ #slides article:nth-child(9) .info, #slider #slide10:checked ~ #slides article:nth-child(10) .info, #slider #slide11:checked ~ #slides article:nth-child(11) .info, #slider #slide12:checked ~ #slides article:nth-child(12) .info { opacity: 1; -webkit-transition: all 1s ease-out 0.6s; -moz-transition: all 1s ease-out 0.6s; -o-transition: all 1s ease-out 0.6s; transition: all 1s ease-out 0.6s; } #slider .info, #controls, #slides, #active, #active label,#slider .info h3, .desktop, .tablet, .mobile { -webkit-transform: translateZ(0); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } @media (max-width: 1024px) { } @media (width: 768px) { } @media (max-width: 767px) { #controls label{width: 21px; height: 60px;} #slider input ~ #controls label:first-child{ background:none; background: url('../images/DM-bg.png') no-repeat 0 -91px; background-size: 25px; right:0; display: block; } #slider #slide1:checked ~ #controls label:nth-child(2), #slider #slide2:checked ~ #controls label:nth-child(3), #slider #slide3:checked ~ #controls label:nth-child(4), #slider #slide4:checked ~ #controls label:nth-child(5), #slider #slide5:checked ~ #controls label:nth-child(6), #slider #slide6:checked ~ #controls label:nth-child(7), #slider #slide7:checked ~ #controls label:nth-child(8), #slider #slide8:checked ~ #controls label:nth-child(9), #slider #slide9:checked ~ #controls label:nth-child(10), #slider #slide10:checked ~ #controls label:nth-child(11), #slider #slide11:checked ~ #controls label:nth-child(12), #slider #slide12:checked ~ #controls label:nth-child(1){ background:none; background: url('../images/DM-bg.png') no-repeat 0 -91px; background-size: 25px; right:0; display: block; } #slider #slide1:checked ~ #controls label:nth-child(12), #slider #slide2:checked ~ #controls label:nth-child(1), #slider #slide3:checked ~ #controls label:nth-child(2), #slider #slide4:checked ~ #controls label:nth-child(3), #slider #slide5:checked ~ #controls label:nth-child(4), #slider #slide6:checked ~ #controls label:nth-child(5), #slider #slide7:checked ~ #controls label:nth-child(6), #slider #slide8:checked ~ #controls label:nth-child(7), #slider #slide9:checked ~ #controls label:nth-child(8), #slider #slide10:checked ~ #controls label:nth-child(9), #slider #slide11:checked ~ #controls label:nth-child(10), #slider #slide12:checked ~ #controls label:nth-child(11) { background:none; background: url('../images/DM-bg.png') no-repeat 0 -26px; background-size: 25px; left:0; display: block; } /* Info Box */ #slider .info {font-size:20px; line-height:24px;} #slider .info h3 {font-size:30px; line-height:32px;} } @media (max-width: 850px) and (min-width: 450px) { #slider #slides { padding: 0; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } } @media (max-width: 639px) { #active{margin: 10px 0 0} #active label{width: 12px; height: 12px;} #controls{bottom: 59%} } @media (max-width: 480px) { #controls {bottom: 57%;} #controls label{width: 11px; height: 31px;} #slider input ~ #controls label:first-child{ background:none; background: url('../images/DM-bg.png') no-repeat 0 -47px; background-size: 13px; right:0; display: block; } #slider #slide1:checked ~ #controls label:nth-child(2), #slider #slide2:checked ~ #controls label:nth-child(3), #slider #slide3:checked ~ #controls label:nth-child(4), #slider #slide4:checked ~ #controls label:nth-child(5), #slider #slide5:checked ~ #controls label:nth-child(6), #slider #slide6:checked ~ #controls label:nth-child(7), #slider #slide7:checked ~ #controls label:nth-child(8), #slider #slide8:checked ~ #controls label:nth-child(9), #slider #slide9:checked ~ #controls label:nth-child(10), #slider #slide10:checked ~ #controls label:nth-child(11), #slider #slide11:checked ~ #controls label:nth-child(12), #slider #slide12:checked ~ #controls label:nth-child(1){ background:none; background: url('../images/DM-bg.png') no-repeat 0 -47px; background-size: 13px; right:0; display: block; } #slider #slide1:checked ~ #controls label:nth-child(12), #slider #slide2:checked ~ #controls label:nth-child(1), #slider #slide3:checked ~ #controls label:nth-child(2), #slider #slide4:checked ~ #controls label:nth-child(3), #slider #slide5:checked ~ #controls label:nth-child(4), #slider #slide6:checked ~ #controls label:nth-child(5), #slider #slide7:checked ~ #controls label:nth-child(6), #slider #slide8:checked ~ #controls label:nth-child(7), #slider #slide9:checked ~ #controls label:nth-child(8), #slider #slide10:checked ~ #controls label:nth-child(9), #slider #slide11:checked ~ #controls label:nth-child(10), #slider #slide12:checked ~ #controls label:nth-child(11) { background:none; background: url('../images/DM-bg.png') no-repeat 0 -14px; background-size: 13px; left:0; display: block; } } @media (max-width: 390px) { #controls {bottom: 70%;} } /*********STYLE ADDITIONAL CAROUSEL ******************/ .slider-additional { text-align: center; } .slider-additional { margin: 0 auto; position:relative; width:100%; display:inline-block } /* NEW EXPERIMENT */ /* Slider Setup */ .slider-additional input { display: none; } .slider-additional #slide-additional1:checked ~ #slides-additional .inner { margin-left:0; } .slider-additional #slide-additional2:checked ~ #slides-additional .inner { margin-left:-100%; } .slider-additional #slide-additional3:checked ~ #slides-additional .inner { margin-left:-200%; } .slider-additional #slide-additional4:checked ~ #slides-additional .inner { margin-left:-300%; } .slider-additional #slide-additional5:checked ~ #slides-additional .inner { margin-left:-400%; } .slider-additional #slide-additional6:checked ~ #slides-additional .inner { margin-left:-500%; } .slider-additional #slide-additional7:checked ~ #slides-additional .inner { margin-left:-600%; } .slider-additional #slide-additional8:checked ~ #slides-additional .inner { margin-left:-700%; } .slider-additional #slide-additional9:checked ~ #slides-additional .inner { margin-left:-800%; } .slider-additional #slide-additional10:checked ~ #slides-additional .inner { margin-left:-900%; } .slider-additional #slide-additional11:checked ~ #slides-additional .inner { margin-left:-1000%; } .slider-additional #slide-additional12:checked ~ #slides-additional .inner { margin-left:-1100%; } #overflow-additional { width: 100%; overflow: hidden; } .slider-additional article img { width: 100%; } #slides-additional .inner { width: 500%; line-height: 0; } #slides-additional article { width: 20%; float: left; position:relative } /* Slider Styling */ #slides-additional .info{display: none} /* Control Setup */ #slides-additional article a{display:inline-block; width:100%;} #active-additional { text-align: center; left:0; z-index:9; margin:16px 0 0 0; width:100%; text-align:center; display: none; } #active-additional label { display: inline-block; width: 18px; height: 18px; margin: 0 3px; cursor: pointer; background: none; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; background: #4c2c77 } #active-additional label:hover { background: #74459b; } #controls-additional {position:absolute; bottom:57%; width:100%; display: none;} #controls-additional label { position:absolute; width: 22px; height: 57px; opacity: 1; z-index:17; cursor:pointer; margin:0; } #controls-additional label:hover {} .slider-additional input ~ #controls-additional label:first-child{ background:none; background: url('../images/DM-bg.png') no-repeat 0 -148px; right:0; display: block; } .slider-additional #slide-additional1:checked ~ #controls-additional label:nth-child(2), .slider-additional #slide-additional2:checked ~ #controls-additional label:nth-child(3), .slider-additional #slide-additional3:checked ~ #controls-additional label:nth-child(4), .slider-additional #slide-additional4:checked ~ #controls-additional label:nth-child(5), .slider-additional #slide-additional5:checked ~ #controls-additional label:nth-child(6), .slider-additional #slide-additional6:checked ~ #controls-additional label:nth-child(7), .slider-additional #slide-additional7:checked ~ #controls-additional label:nth-child(8), .slider-additional #slide-additional8:checked ~ #controls-additional label:nth-child(9), .slider-additional #slide-additional9:checked ~ #controls-additional label:nth-child(10), .slider-additional #slide-additional10:checked ~ #controls-additional label:nth-child(11), .slider-additional #slide-additional11:checked ~ #controls-additional label:nth-child(12), .slider-additional #slide-additional12:checked ~ #controls-additional label:nth-child(1){ background:none; background: url('../images/DM-bg.png') no-repeat 0 -148px; right:0; display: block; z-index:17; } .slider-additional #slide-additional1:checked ~ #controls-additional label:nth-child(2):hover, .slider-additional #slide-additional2:checked ~ #controls-additional label:nth-child(3):hover, .slider-additional #slide-additional3:checked ~ #controls-additional label:nth-child(4):hover, .slider-additional #slide-additional4:checked ~ #controls-additional label:nth-child(5):hover, .slider-additional #slide-additional5:checked ~ #controls-additional label:nth-child(6):hover, .slider-additional #slide-additional6:checked ~ #controls-additional label:nth-child(7):hover, .slider-additional #slide-additional7:checked ~ #controls-additional label:nth-child(8):hover, .slider-additional #slide-additional8:checked ~ #controls-additional label:nth-child(9):hover, .slider-additional #slide-additional9:checked ~ #controls-additional label:nth-child(10):hover, .slider-additional #slide-additional10:checked ~ #controls-additional label:nth-child(11):hover, .slider-additional #slide-additional11:checked ~ #controls-additional label:nth-child(12):hover, .slider-additional #slide-additional12:checked ~ #controls-additional label:nth-child(1):hover{ } .slider-additional #slide-additional1:checked ~ #controls-additional label:nth-child(12), .slider-additional #slide-additional2:checked ~ #controls-additional label:nth-child(1), .slider-additional #slide-additional3:checked ~ #controls-additional label:nth-child(2), .slider-additional #slide-additional4:checked ~ #controls-additional label:nth-child(3), .slider-additional #slide-additional5:checked ~ #controls-additional label:nth-child(4), .slider-additional #slide-additional6:checked ~ #controls-additional label:nth-child(5), .slider-additional #slide-additional7:checked ~ #controls-additional label:nth-child(6), .slider-additional #slide-additional8:checked ~ #controls-additional label:nth-child(7), .slider-additional #slide-additional9:checked ~ #controls-additional label:nth-child(8), .slider-additional #slide-additional10:checked ~ #controls-additional label:nth-child(9), .slider-additional #slide-additional11:checked ~ #controls-additional label:nth-child(10), .slider-additional #slide-additional12:checked ~ #controls-additional label:nth-child(11) { background:none; background: url('../images/DM-bg.png') no-repeat 0 -44px; left:0; display: block; z-index:17; } .slider-additional #slide-additional1:checked ~ #controls-additional label:nth-child(12):hover, .slider-additional #slide-additional2:checked ~ #controls-additional label:nth-child(1):hover, .slider-additional #slide-additional3:checked ~ #controls-additional label:nth-child(2):hover, .slider-additional #slide-additional4:checked ~ #controls-additional label:nth-child(3):hover, .slider-additional #slide-additional5:checked ~ #controls-additional label:nth-child(4):hover, .slider-additional #slide-additional6:checked ~ #controls-additional label:nth-child(5):hover, .slider-additional #slide-additional7:checked ~ #controls-additional label:nth-child(6):hover, .slider-additional #slide-additional8:checked ~ #controls-additional label:nth-child(7):hover, .slider-additional #slide-additional9:checked ~ #controls-additional label:nth-child(8):hover, .slider-additional #slide-additional10:checked ~ #controls-additional label:nth-child(9):hover, .slider-additional #slide-additional11:checked ~ #controls-additional label:nth-child(10):hover, .slider-additional #slide-additional12:checked ~ #controls-additional label:nth-child(11):hover { } .slider-additional #slide-additional1 + #slides-additional + #controls-additional{display:none;} .slider-additional #slide-additional1 + #slides-additional + #controls-additional + #active-additional{display:none;} /* Slider Styling */ #slides-additional { margin: 0; background: #fff; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#dbdac9',GradientType=0 ); /* IE6-9 */ } /* Animation */ #slides-additional .inner { -webkit-transform: translateZ(0); -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */ -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */ } .slider-additional { -webkit-transform: translateZ(0); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } #controls-additional label{ -webkit-transform: translateZ(0); -webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; } .slider-additional #slide-additional1:checked ~ #slides-additional article:nth-child(1) .info, .slider-additional #slide-additional2:checked ~ #slides-additional article:nth-child(2) .info, .slider-additional #slide-additional3:checked ~ #slides-additional article:nth-child(3) .info, .slider-additional #slide-additional4:checked ~ #slides-additional article:nth-child(4) .info, .slider-additional #slide-additional5:checked ~ #slides-additional article:nth-child(5) .info, .slider-additional #slide-additional6:checked ~ #slides-additional article:nth-child(6) .info, .slider-additional #slide-additional7:checked ~ #slides-additional article:nth-child(7) .info, .slider-additional #slide-additional8:checked ~ #slides-additional article:nth-child(8) .info, .slider-additional #slide-additional9:checked ~ #slides-additional article:nth-child(9) .info, .slider-additional #slide-additional10:checked ~ #slides-additional article:nth-child(10) .info, .slider-additional #slide-additional11:checked ~ #slides-additional article:nth-child(11) .info, .slider-additional #slide-additional12:checked ~ #slides-additional article:nth-child(12) .info { opacity: 1; -webkit-transition: all 1s ease-out 0.6s; -moz-transition: all 1s ease-out 0.6s; -o-transition: all 1s ease-out 0.6s; transition: all 1s ease-out 0.6s; } #controls-additional, #slides-additional, #active-additional, #active-additional label { -webkit-transform: translateZ(0); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } @media (max-width: 1024px) {} @media (width: 768px) {} @media (max-width: 767px) {} @media (max-width: 850px) and (min-width: 450px) { .slider-additional #slides-additional { padding: 0; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } } @media (max-width: 639px) { #active-additional{margin: 10px 0 0} #active-additional label{width: 12px; height: 12px;} #controls-additional{bottom: 68%} } @media (max-width: 450px) {} .slider-product { text-align: center; } .slider-product { margin: 0 auto; position:relative; width:500px; } /* Slider Setup */ .slider-product input { display: none; } .slider-product .overflow { width: 100%; overflow: hidden; background: #fff; } .slider-product .slides article img { max-width: 100%; } .slider-product .slides .inner{ width:100%; background: #fff; } .slider-product .slides article { width: 6.25%; float: left; position:relative } /* Slider Styling */ /* Control Setup */ .slider-product .slides article a{display:inline-block; width:100%;} .slider-product .active { text-align: center; position:absolute; left:0; z-index:9; bottom: 30px; margin: 0; width:100%; text-align:center } .slider-product .active label { display: inline-block; width: 21px; height: 21px; margin: 0 5px; cursor: pointer; background: #ccc; -webkit-border-radius: 21px; -moz-border-radius: 21px; border-radius: 21px; } .slider-product .active label:hover { background: #57bee8; } .slider-product .controls { position:absolute; bottom:67%; width:100%; left:0; } .slider-product .controls label { position:absolute; top:-27px; display: none; width: 44px; height: 44px; opacity: 0; z-index:9; cursor:pointer; } .slider-product .controls label:hover { } /* Slider Styling */ .slider-product .slides { margin: 0; background: #fff; padding:0 20px; position: relative; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#dbdac9',GradientType=0 ); /* IE6-9 */ } /* Animation */ .slider-product .slides .inner{ -webkit-transform: translateZ(0); -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */ -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */ } .slider-product { -webkit-transform: translateZ(0); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .slider-product .controls label{ -webkit-transform: translateZ(0); -webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; } .slider-product #product1:checked ~ .slides article:nth-child(1) .info, .slider-product #product2:checked ~ .slides article:nth-child(2) .info, .slider-product #product3:checked ~ .slides article:nth-child(3) .info, .slider-product #product4:checked ~ .slides article:nth-child(4) .info, .slider-product #product5:checked ~ .slides article:nth-child(5) .info, .slider-product #product6:checked ~ .slides article:nth-child(6) .info, .slider-product #product7:checked ~ .slides article:nth-child(7) .info, .slider-product #product8:checked ~ .slides article:nth-child(8) .info, .slider-product #product9:checked ~ .slides article:nth-child(9) .info, .slider-product #product10:checked ~ .slides article:nth-child(10) .info, .slider-product #product11:checked ~ .slides article:nth-child(11) .info, .slider-product #product12:checked ~ .slides article:nth-child(12) .info{ opacity: 1; -webkit-transition: all 1s ease-out 0.6s; -moz-transition: all 1s ease-out 0.6s; -o-transition: all 1s ease-out 0.6s; transition: all 1s ease-out 0.6s; } .slider-product .controls, .slider-product .slides, .slider-product .active, .slider-product .active label { -webkit-transform: translateZ(0); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .slider-product .active{display:none;} .slider-product{width:100%;} .slider-product .slides{padding:0; position:relative} .slider-product .slides article{width:25%; padding:0 10px; text-align: center;} .slider-product .slides article > div{ padding: 10px} .slider-product .slides article .images-product{ text-align:center; width:100%;min-height:144px;} .slider-product .slides article .images-product a{max-width:100%;} .slider-product .slides article .images-product img { max-width: 100%; width: auto; min-height: 146px; max-height: 132px; } .slider-product .slides article .name-product{ overflow:hidden; margin-top:19px; height: 39px;margin-bottom: 10px;} .slider-product .slides article .name-product a {font-size:13px; font-family:Arial; color:#333333; font-weight: 400; line-height:20px;} .slider-product .slides article:hover .name-product a {text-decoration:underline;} .slider-product .slides article .price-product{ width:100%; margin-top:2px;} .slider-product .slides article .price-product span{font-size:18px; font-family:Arial; font-weight:400; color:#000; line-height:20px; } .slider-product .slides article > div >p{margin-top: 20px; display: none !important} .slider-product .slides article > div >p a {display:inline-block; float: left; height: 37px; width: 150px; position: relative;} .slider-product .slides article > div >p a:after{background: #28b740; content:"VIEW DETAILS"; color: #fff; position: absolute; top:0; left: 0; width: 100%; line-height: 37px; font-size: 14px; font-family: 'Lato', sans-serif; font-weight: 700; text-transform: uppercase;} .slider-brand .active{display:none; } .slider-brand .slides{padding:0 10px; } .slider-brand .slides article{ display:inline-block; height:75px; text-align: center; width:16.6%; margin: 20px 0 0 0; padding: 0 10px;} .slider-brand .slides article img{width:auto; max-height: 73px; max-width: 80%} .slider-brand .slides article > div{height:100%; width: 100%; display:table; margin:0 auto; border: 0} .slider-brand .slides article > div a{ display:table-cell; vertical-align:middle;} @media only screen and (min-width: 768px) { /************************** Cross sell 1 ******************/ /* Info Box */ .slider-product .slides{margin:0 20px} .product-list .slider-product .controls {display:block} .product-list .slider-product .slides .inner{width:600%;} .product-list .slider-product{width:100%;} .product-list .slider-product .slides article{width:3.25%;} .product-list .slider-product .controls{bottom:52%} .product-list .slider-product .active {bottom:-20px; display:none} .product-list .slider-product .active label{ width:10px; height:10px; margin:0 2px} .slider-product #product1:checked ~ .slides .inner{ margin-left:1%; } .slider-product #product2:checked ~ .slides .inner{ margin-left:-18.5%; } .slider-product #product3:checked ~ .slides .inner{ margin-left:-38%; } .slider-product #product4:checked ~ .slides .inner{ margin-left:-57%; } .slider-product #product5:checked ~ .slides .inner{ margin-left:-77%; } .slider-product #product6:checked ~ .slides .inner{ margin-left:-96%; } .slider-product #product7:checked ~ .slides .inner{ margin-left:-116%; } .slider-product #product8:checked ~ .slides .inner{ margin-left:-135%; } .slider-product #product9:checked ~ .slides .inner{ margin-left:-155%; } .slider-product #product10:checked ~ .slides .inner{ margin-left:-174%; } .slider-product #product11:checked ~ .slides .inner{ margin-left:-194%;} .slider-product #product12:checked ~ .slides .inner{ margin-left:-214%;} .slider-product .active label{display:inline-block !important;} .slider-product #product1:checked ~ .controls label:nth-child(2), .slider-product #product2:checked ~ .controls label:nth-child(3), .slider-product #product3:checked ~ .controls label:nth-child(4), .slider-product #product4:checked ~ .controls label:nth-child(5), .slider-product #product5:checked ~ .controls label:nth-child(6), .slider-product #product6:checked ~ .controls label:nth-child(7), .slider-product #product7:checked ~ .controls label:nth-child(8), .slider-product #product8:checked ~ .controls label:nth-child(9), .slider-product #product9:checked ~ .controls label:nth-child(10), .slider-product #product10:checked ~ .controls label:nth-child(11), .slider-product #product11:checked ~ .controls label:nth-child(12), .slider-product #product12:checked ~ .controls label:first-child{ background:none ; background: url('../images/for.png') no-repeat center; display: block; opacity: 1; right: 10px; padding: 0px; } .slider-product #product1:checked ~ .controls label:nth-child(12), .slider-product #product2:checked ~ .controls label:nth-child(1), .slider-product #product3:checked ~ .controls label:nth-child(2), .slider-product #product4:checked ~ .controls label:nth-child(3), .slider-product #product5:checked ~ .controls label:nth-child(4), .slider-product #product6:checked ~ .controls label:nth-child(5), .slider-product #product7:checked ~ .controls label:nth-child(6), .slider-product #product8:checked ~ .controls label:nth-child(7), .slider-product #product9:checked ~ .controls label:nth-child(8), .slider-product #product10:checked ~ .controls label:nth-child(9), .slider-product #product11:checked ~ .controls label:nth-child(10), .slider-product #product12:checked ~ .controls label:nth-child(11){ background:none ; background: url('../images/pre.png') no-repeat center; left:10px; display: block; opacity: 1; padding: 0px; } /*.slider-product input ~ .slider-product .active label:nth-child(1){background:#57bee8;}*/ .slider-product #product1:checked ~ .active label:nth-child(1), .slider-product #product2:checked ~ .active label:nth-child(2), .slider-product #product3:checked ~ .active label:nth-child(3), .slider-product #product4:checked ~ .active label:nth-child(4), .slider-product #product5:checked ~ .active label:nth-child(5), .slider-product #product6:checked ~ .active label:nth-child(6), .slider-product #product7:checked ~ .active label:nth-child(7), .slider-product #product8:checked ~ .active label:nth-child(8), .slider-product #product9:checked ~ .active label:nth-child(9), .slider-product #product10:checked ~ .active label:nth-child(10), .slider-product #product11:checked ~ .active label:nth-child(11), .slider-product #product12:checked ~ .active label:nth-child(12) { background:none; background: #000; } .slider-product #product4 + .slides + .controls{display:none;} .slider-product #product4 + .slides + .controls + .active{display:none;} .slider-product .controls label:last-child, .slider-product .controls label:nth-last-child(2), .slider-product .controls label:nth-last-child(3){display: none !important;} /************************** Cross sell 2 ******************/ /* Info Box */ .slider-product #product2-1:checked ~ .slides .inner{ margin-left:0; } .slider-product #product2-2:checked ~ .slides .inner{ margin-left:-25%; } .slider-product #product2-3:checked ~ .slides .inner{ margin-left:-50%; } .slider-product #product2-4:checked ~ .slides .inner{ margin-left:-75%; } .slider-product #product2-5:checked ~ .slides .inner{ margin-left:-100%; } .slider-product #product2-6:checked ~ .slides .inner{ margin-left:-125%; } .slider-product #product2-7:checked ~ .slides .inner{ margin-left:-150%; } .slider-product #product2-8:checked ~ .slides .inner{ margin-left:-175%; } .slider-product #product2-9:checked ~ .slides .inner{ margin-left:-200%; } .slider-product #product2-10:checked ~ .slides .inner{ margin-left:-200%; } .slider-product #product2-11:checked ~ .slides .inner{ margin-left:-200%;} .slider-product #product2-12:checked ~ .slides .inner{ margin-left:-200%;} .slider-product #product2-1:checked ~ .controls label:nth-child(2), .slider-product #product2-2:checked ~ .controls label:nth-child(3), .slider-product #product2-3:checked ~ .controls label:nth-child(4), .slider-product #product2-4:checked ~ .controls label:nth-child(5), .slider-product #product2-5:checked ~ .controls label:nth-child(6), .slider-product #product2-6:checked ~ .controls label:nth-child(7), .slider-product #product2-7:checked ~ .controls label:nth-child(8), .slider-product #product2-8:checked ~ .controls label:nth-child(9), .slider-product #product2-9:checked ~ .controls label:nth-child(10), .slider-product #product2-10:checked ~ .controls label:nth-child(11), .slider-product #product2-11:checked ~ .controls label:nth-child(12), .slider-product #product2-12:checked ~ .controls label:first-child{ background:none ; background: url('../images/DM-bg.png') no-repeat 0 -283px; display: block; opacity: 1; right: 0px; } .slider-product #product2-1:checked ~ .controls label:nth-child(2):hover, .slider-product #product2-2:checked ~ .controls label:nth-child(3):hover, .slider-product #product2-3:checked ~ .controls label:nth-child(4):hover, .slider-product #product2-4:checked ~ .controls label:nth-child(5):hover, .slider-product #product2-5:checked ~ .controls label:nth-child(6):hover, .slider-product #product2-6:checked ~ .controls label:nth-child(7):hover, .slider-product #product2-7:checked ~ .controls label:nth-child(8):hover, .slider-product #product2-8:checked ~ .controls label:nth-child(9):hover, .slider-product #product2-9:checked ~ .controls label:nth-child(10):hover, .slider-product #product2-10:checked ~ .controls label:nth-child(11):hover, .slider-product #product2-11:checked ~ .controls label:nth-child(12):hover, .slider-product #product2-12:checked ~ .controls label:first-child:hover{ } .slider-product #product2-1:checked ~ .controls label:nth-child(12), .slider-product #product2-2:checked ~ .controls label:nth-child(1), .slider-product #product2-3:checked ~ .controls label:nth-child(2), .slider-product #product2-4:checked ~ .controls label:nth-child(3), .slider-product #product2-5:checked ~ .controls label:nth-child(4), .slider-product #product2-6:checked ~ .controls label:nth-child(5), .slider-product #product2-7:checked ~ .controls label:nth-child(6), .slider-product #product2-8:checked ~ .controls label:nth-child(7), .slider-product #product2-9:checked ~ .controls label:nth-child(8), .slider-product #product2-10:checked ~ .controls label:nth-child(9), .slider-product #product2-11:checked ~ .controls label:nth-child(10), .slider-product #product2-12:checked ~ .controls label:nth-child(11){ background:none ; background: url('../images/DM-bg.png') no-repeat 0 -252px; left:0px; display: block; opacity: 1; } .slider-product #product2-1:checked ~ .controls label:nth-child(12):hover, .slider-product #product2-2:checked ~ .controls label:nth-child(1):hover, .slider-product #product2-3:checked ~ .controls label:nth-child(2):hover, .slider-product #product2-4:checked ~ .controls label:nth-child(3):hover, .slider-product #product2-5:checked ~ .controls label:nth-child(4):hover, .slider-product #product2-6:checked ~ .controls label:nth-child(5):hover, .slider-product #product2-7:checked ~ .controls label:nth-child(6):hover, .slider-product #product2-8:checked ~ .controls label:nth-child(7):hover, .slider-product #product2-9:checked ~ .controls label:nth-child(8):hover, .slider-product #product2-10:checked ~ .controls label:nth-child(9):hover, .slider-product #product2-11:checked ~ .controls label:nth-child(10):hover, .slider-product #product2-12:checked ~ .controls label:nth-child(11):hover{ } .slider-product #product2-1:checked ~ .active label:nth-child(1), .slider-product #product2-2:checked ~ .active label:nth-child(2), .slider-product #product2-3:checked ~ .active label:nth-child(3), .slider-product #product2-4:checked ~ .active label:nth-child(4), .slider-product #product2-5:checked ~ .active label:nth-child(5), .slider-product #product2-6:checked ~ .active label:nth-child(6), .slider-product #product2-7:checked ~ .active label:nth-child(7), .slider-product #product2-8:checked ~ .active label:nth-child(8), .slider-product #product2-9:checked ~ .active label:nth-child(9), .slider-product #product2-10:checked ~ .active label:nth-child(10), .slider-product #product2-11:checked ~ .active label:nth-child(11), .slider-product #product2-12:checked ~ .active label:nth-child(12) { background:none; background: #000; } .slider-product-2 #product2-4 + .slides + .controls{display:none;} .slider-product-2 #product2-4 + .slides + .controls + .active{display:none;} /*********************** brand /************************/ .slider-brand .controls{bottom:50% ;} .slider-brand .slides .inner{width: 800%} .slider-brand .slides article{width:2.495%;} .slider-brand #brand1:checked ~ .slides .inner { margin-left:0; } .slider-brand #brand2:checked ~ .slides .inner { margin-left:-20%; } .slider-brand #brand3:checked ~ .slides .inner { margin-left:-40%; } .slider-brand #brand4:checked ~ .slides .inner { margin-left:-60%; } .slider-brand #brand5:checked ~ .slides .inner { margin-left:-80%; } .slider-brand #brand6:checked ~ .slides .inner { margin-left:-100%; } .slider-brand #brand7:checked ~ .slides .inner { margin-left:-120%; } .slider-brand #brand8:checked ~ .slides .inner { margin-left:-140%; } .slider-brand #brand9:checked ~ .slides .inner { margin-left:-160%; } .slider-brand #brand10:checked ~ .slides .inner { margin-left:-180%; } .slider-brand #brand11:checked ~ .slides .inner { margin-left:-200%; } .slider-brand #brand12:checked ~ .slides .inner { margin-left:-220%; } .slider-brand #brand13:checked ~ .slides .inner { margin-left:-240%; } .slider-brand #brand14:checked ~ .slides .inner { margin-left:-260%; } .slider-brand #brand15:checked ~ .slides .inner { margin-left:-280%; } .slider-brand #brand16:checked ~ .slides .inner { margin-left:-300%; } .slider-brand #brand17:checked ~ .slides .inner { margin-left:-300%; } .slider-brand #brand18:checked ~ .slides .inner { margin-left:-300%; } .slider-brand #brand19:checked ~ .slides .inner { margin-left:-300%; } .slider-brand #brand20:checked ~ .slides .inner { margin-left:-300%; } /*#slider input ~ #controls label:first-child,*/ .slider-brand #brand1:checked ~ .controls label:nth-child(2), .slider-brand #brand2:checked ~ .controls label:nth-child(3), .slider-brand #brand3:checked ~ .controls label:nth-child(4), .slider-brand #brand4:checked ~ .controls label:nth-child(5), .slider-brand #brand5:checked ~ .controls label:nth-child(6), .slider-brand #brand6:checked ~ .controls label:nth-child(7), .slider-brand #brand7:checked ~ .controls label:nth-child(8), .slider-brand #brand8:checked ~ .controls label:nth-child(9), .slider-brand #brand9:checked ~ .controls label:nth-child(10), .slider-brand #brand10:checked ~ .controls label:nth-child(11), .slider-brand #brand11:checked ~ .controls label:nth-child(12), .slider-brand #brand12:checked ~ .controls label:nth-child(13), .slider-brand #brand13:checked ~ .controls label:nth-child(14), .slider-brand #brand14:checked ~ .controls label:nth-child(15), .slider-brand #brand15:checked ~ .controls label:nth-child(16), .slider-brand #brand16:checked ~ .controls label:nth-child(17), .slider-brand #brand17:checked ~ .controls label:nth-child(18), .slider-brand #brand18:checked ~ .controls label:nth-child(19), .slider-brand #brand19:checked ~ .controls label:nth-child(20), .slider-brand #brand20:checked ~ .controls label:nth-child(20){ background:none ; background: url('../images/DM-bg.png') no-repeat 0 -283px; display: block; opacity: 1; right:0px; } .slider-brand #brand1:checked ~ .controls label:nth-child(2):hover, .slider-brand #brand2:checked ~ .controls label:nth-child(3):hover, .slider-brand #brand3:checked ~ .controls label:nth-child(4):hover, .slider-brand #brand4:checked ~ .controls label:nth-child(5):hover, .slider-brand #brand5:checked ~ .controls label:nth-child(6):hover, .slider-brand #brand6:checked ~ .controls label:nth-child(7):hover, .slider-brand #brand7:checked ~ .controls label:nth-child(8):hover, .slider-brand #brand8:checked ~ .controls label:nth-child(9):hover, .slider-brand #brand9:checked ~ .controls label:nth-child(10):hover, .slider-brand #brand10:checked ~ .controls label:nth-child(11):hover, .slider-brand #brand11:checked ~ .controls label:nth-child(12):hover, .slider-brand #brand12:checked ~ .controls label:nth-child(13):hover, .slider-brand #brand13:checked ~ .controls label:nth-child(14):hover, .slider-brand #brand14:checked ~ .controls label:nth-child(15):hover, .slider-brand #brand15:checked ~ .controls label:nth-child(16):hover, .slider-brand #brand16:checked ~ .controls label:nth-child(17):hover, .slider-brand #brand17:checked ~ .controls label:nth-child(18):hover, .slider-brand #brand18:checked ~ .controls label:nth-child(19):hover, .slider-brand #brand19:checked ~ .controls label:nth-child(20):hover, .slider-brand #brand20:checked ~ .controls label:first-child:hover{ } /*#product1:checked ~ #controls label:nth-last-child(2),*/ .slider-brand #brand1:checked ~ .controls label:nth-child(20), .slider-brand #brand2:checked ~ .controls label:nth-child(1), .slider-brand #brand3:checked ~ .controls label:nth-child(2), .slider-brand #brand4:checked ~ .controls label:nth-child(3), .slider-brand #brand5:checked ~ .controls label:nth-child(4), .slider-brand #brand6:checked ~ .controls label:nth-child(5), .slider-brand #brand7:checked ~ .controls label:nth-child(6), .slider-brand #brand8:checked ~ .controls label:nth-child(7), .slider-brand #brand9:checked ~ .controls label:nth-child(8), .slider-brand #brand10:checked ~ .controls label:nth-child(9), .slider-brand #brand11:checked ~ .controls label:nth-child(10), .slider-brand #brand12:checked ~ .controls label:nth-child(11), .slider-brand #brand13:checked ~ .controls label:nth-child(12), .slider-brand #brand14:checked ~ .controls label:nth-child(13), .slider-brand #brand15:checked ~ .controls label:nth-child(14), .slider-brand #brand16:checked ~ .controls label:nth-child(15), .slider-brand #brand17:checked ~ .controls label:nth-child(16), .slider-brand #brand18:checked ~ .controls label:nth-child(17), .slider-brand #brand19:checked ~ .controls label:nth-child(18), .slider-brand #brand20:checked ~ .controls label:nth-child(19){ background:none ; background: url('../images/DM-bg.png') no-repeat 0 -252px; left:0px; display: block; opacity: 1; } .slider-brand #brand1:checked ~ .controls label:nth-child(20):hover, .slider-brand #brand2:checked ~ .controls label:nth-child(1):hover, .slider-brand #brand3:checked ~ .controls label:nth-child(2):hover, .slider-brand #brand4:checked ~ .controls label:nth-child(3):hover, .slider-brand #brand5:checked ~ .controls label:nth-child(4):hover, .slider-brand #brand6:checked ~ .controls label:nth-child(5):hover, .slider-brand #brand7:checked ~ .controls label:nth-child(6):hover, .slider-brand #brand8:checked ~ .controls label:nth-child(7):hover, .slider-brand #brand9:checked ~ .controls label:nth-child(8):hover, .slider-brand #brand10:checked ~ .controls label:nth-child(9):hover, .slider-brand #brand11:checked ~ .controls label:nth-child(10):hover, .slider-brand #brand12:checked ~ .controls label:nth-child(11):hover, .slider-brand #brand13:checked ~ .controls label:nth-child(12):hover, .slider-brand #brand14:checked ~ .controls label:nth-child(13):hover, .slider-brand #brand15:checked ~ .controls label:nth-child(14):hover, .slider-brand #brand16:checked ~ .controls label:nth-child(15):hover, .slider-brand #brand17:checked ~ .controls label:nth-child(16):hover, .slider-brand #brand18:checked ~ .controls label:nth-child(17):hover, .slider-brand #brand19:checked ~ .controls label:nth-child(18):hover, .slider-brand #brand20:checked ~ .controls label:nth-child(19):hover{ } .slider-brand #brand1:checked ~ .active label:nth-child(1), .slider-brand #brand2:checked ~ .active label:nth-child(2), .slider-brand #brand3:checked ~ .active label:nth-child(3), .slider-brand #brand4:checked ~ .active label:nth-child(4), .slider-brand #brand5:checked ~ .active label:nth-child(5), .slider-brand #brand6:checked ~ .active label:nth-child(6), .slider-brand #brand7:checked ~ .active label:nth-child(7), .slider-brand #brand8:checked ~ .active label:nth-child(8), .slider-brand #brand9:checked ~ .active label:nth-child(9), .slider-brand #brand10:checked ~ .active label:nth-child(10), .slider-brand #brand11:checked ~ .active label:nth-child(11), .slider-brand #brand12:checked ~ .active label:nth-child(12), .slider-brand #brand13:checked ~ .active label:nth-child(13), .slider-brand #brand14:checked ~ .active label:nth-child(14), .slider-brand #brand15:checked ~ .active label:nth-child(15), .slider-brand #brand16:checked ~ .active label:nth-child(16), .slider-brand #brand17:checked ~ .active label:nth-child(17), .slider-brand #brand18:checked ~ .active label:nth-child(18), .slider-brand #brand19:checked ~ .active label:nth-child(19), .slider-brand #brand20:checked ~ .active label:nth-child(19) { background:none; background: #000; } .slider-brand .controls label:last-child ,.slider-brand .controls label:nth-last-child(2) ,.slider-brand .controls label:nth-last-child(3) ,.slider-brand .controls label:nth-last-child(4) {display:none !important;} .slider-brand .active label:last-child,.slider-brand .active label:nth-last-child(2),.slider-brand .active label:nth-last-child(3),.slider-brand .active label:nth-last-child(4){display:none !important;} .slider-brand #brand1 + .slides + .controls{display:none;} .slider-brand #brand1 + .slides + .controls + .active{display:none;} } @media (min-width: 991px) and (max-width:1024px){ .slider-product .controls label{top:-30px;} .slider-product .slides article .name-product{margin-top:30px;} } @media (min-width: 939px) and (max-width: 990px) { .slider-product .slides article .images-product img{max-height: 180px} .slider-product .slides article .name-product{margin-top:20px;} .slider-product .controls label{top:-20px;} .slider-product .slides article .images-product{min-height:144px;} } @media (min-width: 768px) and (max-width: 938px){ .slider-product .slides article .images-product{min-height: 125px;} .slider-product .slides article .name-product{margin-top:0;} } @media (min-width: 640px) and (max-width: 767px) { /************************** Cross sell 1 ******************/ .slider-product .slides{padding: 0 20px} /* Info Box */ .product-list .slider-product .controls {display:block} .product-list .slider-product .slides .inner{width:1500%;} .product-list .slider-product{width:100%; } .product-list .slider-product .slides article{width:2.22%;} .product-list .slider-product .controls{bottom:52%} .product-list .slider-product .active {bottom:-20px; display:none} .product-list .slider-product .active label{ width:10px; height:10px; margin:0 2px} .slider-product #product1:checked ~ .slides .inner{ margin-left:0; } .slider-product #product2:checked ~ .slides .inner{ margin-left:-33%; } .slider-product #product3:checked ~ .slides .inner{ margin-left:-67%; } .slider-product #product4:checked ~ .slides .inner{ margin-left:-100%; } .slider-product #product5:checked ~ .slides .inner{ margin-left:-133%; } .slider-product #product6:checked ~ .slides .inner{ margin-left:-165%; } .slider-product #product7:checked ~ .slides .inner{ margin-left:-200%; } .slider-product #product8:checked ~ .slides .inner{ margin-left:-233%; } .slider-product #product9:checked ~ .slides .inner{ margin-left:-266%; } .slider-product #product10:checked ~ .slides .inner{ margin-left:-300%; } .slider-product #product11:checked ~ .slides .inner{ margin-left:-330%;} .slider-product #product12:checked ~ .slides .inner{ margin-left:-330%;} .slider-product input[name="slider-product"]:checked + .slides .inner { margin-left:0 !important; } .slider-product #product1:checked ~ .controls label:nth-child(2), .slider-product #product2:checked ~ .controls label:nth-child(3), .slider-product #product3:checked ~ .controls label:nth-child(4), .slider-product #product4:checked ~ .controls label:nth-child(5), .slider-product #product5:checked ~ .controls label:nth-child(6), .slider-product #product6:checked ~ .controls label:nth-child(7), .slider-product #product7:checked ~ .controls label:nth-child(8), .slider-product #product8:checked ~ .controls label:nth-child(9), .slider-product #product9:checked ~ .controls label:nth-child(10), .slider-product #product10:checked ~ .controls label:nth-child(11), .slider-product #product11:checked ~ .controls label:nth-child(12), .slider-product #product12:checked ~ .controls label:first-child{ background:none ; background: url('../images/PetersofKensington-newpeoducts-nav-next.png') no-repeat center; display: block; opacity: 1; right: 0px; } .slider-product #product1:checked ~ .controls label:nth-child(12), .slider-product #product2:checked ~ .controls label:nth-child(1), .slider-product #product3:checked ~ .controls label:nth-child(2), .slider-product #product4:checked ~ .controls label:nth-child(3), .slider-product #product5:checked ~ .controls label:nth-child(4), .slider-product #product6:checked ~ .controls label:nth-child(5), .slider-product #product7:checked ~ .controls label:nth-child(6), .slider-product #product8:checked ~ .controls label:nth-child(7), .slider-product #product9:checked ~ .controls label:nth-child(8), .slider-product #product10:checked ~ .controls label:nth-child(9), .slider-product #product11:checked ~ .controls label:nth-child(10), .slider-product #product12:checked ~ .controls label:nth-child(11){ background:none ; background: url('../images/PetersofKensington-newpeoducts-nav-pre.png') no-repeat center; left:0px; display: block; opacity: 1; } /*.slider-product input ~ .slider-product .active label:nth-child(1){background:#57bee8;}*/ .slider-product #product1:checked ~ .active label:nth-child(1), .slider-product #product2:checked ~ .active label:nth-child(2), .slider-product #product3:checked ~ .active label:nth-child(3), .slider-product #product4:checked ~ .active label:nth-child(4), .slider-product #product5:checked ~ .active label:nth-child(5), .slider-product #product6:checked ~ .active label:nth-child(6), .slider-product #product7:checked ~ .active label:nth-child(7), .slider-product #product8:checked ~ .active label:nth-child(8), .slider-product #product9:checked ~ .active label:nth-child(9), .slider-product #product10:checked ~ .active label:nth-child(10), .slider-product #product11:checked ~ .active label:nth-child(11), .slider-product #product12:checked ~ .active label:nth-child(12) { background:none; background: #000; } .slider-product input[name="slider-product"]:checked + .slides + .controls label{display: none !important} .slider-product input[name="slider-product"]:checked + .slides + .controls label:nth-child(2){ background:none ; background: url('../images/DM-bg.png') no-repeat 0 -283px; display: block !important; opacity: 1; right: 0px; } .slider-product #product2 + .slides + .controls{display:none;} .slider-product #product2 + .slides + .controls + .active{display:none;} .slider-product .controls label:last-child{display: none !important;} /************************** Cross sell 2 ******************/ /* Info Box */ .slider-product #product2-1:checked ~ .slides .inner{ margin-left:0; } .slider-product #product2-2:checked ~ .slides .inner{ margin-left:-50%; } .slider-product #product2-3:checked ~ .slides .inner{ margin-left:-100%; } .slider-product #product2-4:checked ~ .slides .inner{ margin-left:-150%; } .slider-product #product2-5:checked ~ .slides .inner{ margin-left:-200%; } .slider-product #product2-6:checked ~ .slides .inner{ margin-left:-250%; } .slider-product #product2-7:checked ~ .slides .inner{ margin-left:-300%; } .slider-product #product2-8:checked ~ .slides .inner{ margin-left:-350%; } .slider-product #product2-9:checked ~ .slides .inner{ margin-left:-400%; } .slider-product #product2-10:checked ~ .slides .inner{ margin-left:-450%; } .slider-product #product2-11:checked ~ .slides .inner{ margin-left:-500%;} .slider-product #product2-12:checked ~ .slides .inner{ margin-left:-500%;} .slider-product input[name="slider-product2"]:checked + .slides .inner { margin-left:0 !important; } .slider-product #product2-1:checked ~ .controls label:nth-child(2), .slider-product #product2-2:checked ~ .controls label:nth-child(3), .slider-product #product2-3:checked ~ .controls label:nth-child(4), .slider-product #product2-4:checked ~ .controls label:nth-child(5), .slider-product #product2-5:checked ~ .controls label:nth-child(6), .slider-product #product2-6:checked ~ .controls label:nth-child(7), .slider-product #product2-7:checked ~ .controls label:nth-child(8), .slider-product #product2-8:checked ~ .controls label:nth-child(9), .slider-product #product2-9:checked ~ .controls label:nth-child(10), .slider-product #product2-10:checked ~ .controls label:nth-child(11), .slider-product #product2-11:checked ~ .controls label:nth-child(12), .slider-product #product2-12:checked ~ .controls label:first-child{ background:none ; background: url('../images/DM-bg.png') no-repeat 0 -283px; display: block; opacity: 1; right: -5px; } .slider-product #product2-1:checked ~ .controls label:nth-child(2):hover, .slider-product #product2-2:checked ~ .controls label:nth-child(3):hover, .slider-product #product2-3:checked ~ .controls label:nth-child(4):hover, .slider-product #product2-4:checked ~ .controls label:nth-child(5):hover, .slider-product #product2-5:checked ~ .controls label:nth-child(6):hover, .slider-product #product2-6:checked ~ .controls label:nth-child(7):hover, .slider-product #product2-7:checked ~ .controls label:nth-child(8):hover, .slider-product #product2-8:checked ~ .controls label:nth-child(9):hover, .slider-product #product2-9:checked ~ .controls label:nth-child(10):hover, .slider-product #product2-10:checked ~ .controls label:nth-child(11):hover, .slider-product #product2-11:checked ~ .controls label:nth-child(12):hover, .slider-product #product2-12:checked ~ .controls label:first-child:hover{ } .slider-product #product2-1:checked ~ .controls label:nth-child(12), .slider-product #product2-2:checked ~ .controls label:nth-child(1), .slider-product #product2-3:checked ~ .controls label:nth-child(2), .slider-product #product2-4:checked ~ .controls label:nth-child(3), .slider-product #product2-5:checked ~ .controls label:nth-child(4), .slider-product #product2-6:checked ~ .controls label:nth-child(5), .slider-product #product2-7:checked ~ .controls label:nth-child(6), .slider-product #product2-8:checked ~ .controls label:nth-child(7), .slider-product #product2-9:checked ~ .controls label:nth-child(8), .slider-product #product2-10:checked ~ .controls label:nth-child(9), .slider-product #product2-11:checked ~ .controls label:nth-child(10), .slider-product #product2-12:checked ~ .controls label:nth-child(11){ background:none ; background: url('../images/DM-bg.png') no-repeat 0 -252px; left:-5px; display: block; opacity: 1; } .slider-product #product2-1:checked ~ .controls label:nth-child(12):hover, .slider-product #product2-2:checked ~ .controls label:nth-child(1):hover, .slider-product #product2-3:checked ~ .controls label:nth-child(2):hover, .slider-product #product2-4:checked ~ .controls label:nth-child(3):hover, .slider-product #product2-5:checked ~ .controls label:nth-child(4):hover, .slider-product #product2-6:checked ~ .controls label:nth-child(5):hover, .slider-product #product2-7:checked ~ .controls label:nth-child(6):hover, .slider-product #product2-8:checked ~ .controls label:nth-child(7):hover, .slider-product #product2-9:checked ~ .controls label:nth-child(8):hover, .slider-product #product2-10:checked ~ .controls label:nth-child(9):hover, .slider-product #product2-11:checked ~ .controls label:nth-child(10):hover, .slider-product #product2-12:checked ~ .controls label:nth-child(11):hover{ } /*.slider-product input ~ .slider-product .active label:nth-child(1){background:#57bee8;}*/ .slider-product #product2-1:checked ~ .active label:nth-child(1), .slider-product #product2-2:checked ~ .active label:nth-child(2), .slider-product #product2-3:checked ~ .active label:nth-child(3), .slider-product #product2-4:checked ~ .active label:nth-child(4), .slider-product #product2-5:checked ~ .active label:nth-child(5), .slider-product #product2-6:checked ~ .active label:nth-child(6), .slider-product #product2-7:checked ~ .active label:nth-child(7), .slider-product #product2-8:checked ~ .active label:nth-child(8), .slider-product #product2-9:checked ~ .active label:nth-child(9), .slider-product #product2-10:checked ~ .active label:nth-child(10), .slider-product #product2-11:checked ~ .active label:nth-child(11), .slider-product #product2-12:checked ~ .active label:nth-child(12) { background:none; background: #000; } .slider-product input[name="slider-product2"]:checked + .slides + .controls label{display: none !important} .slider-product input[name="slider-product2"]:checked + .slides + .controls label:nth-child(2){ background:none ; background: url('../images/DM-bg.png') no-repeat 0 -283px; display: block !important; opacity: 1; right: 0px; } .slider-product-2 #product2-2 + .slides + .controls{display:none;} .slider-product-2 #product2-2 + .slides + .controls + .active{display:none;} /*********************** brand /************************/ .slider-brand .controls{bottom:50% ;} .slider-brand .slides .inner{width: 800%} .slider-brand .slides article{width:4.15%;} .slider-brand #brand1:checked ~ .slides .inner { margin-left:0; } .slider-brand #brand2:checked ~ .slides .inner { margin-left:-33.3%; } .slider-brand #brand3:checked ~ .slides .inner { margin-left:-66.7%; } .slider-brand #brand4:checked ~ .slides .inner { margin-left:-100%; } .slider-brand #brand5:checked ~ .slides .inner { margin-left:-133.3%; } .slider-brand #brand6:checked ~ .slides .inner { margin-left:-166.7%; } .slider-brand #brand7:checked ~ .slides .inner { margin-left:-200%; } .slider-brand #brand8:checked ~ .slides .inner { margin-left:-233.3%; } .slider-brand #brand9:checked ~ .slides .inner { margin-left:-266.7%; } .slider-brand #brand10:checked ~ .slides .inner { margin-left:-300%; } .slider-brand #brand11:checked ~ .slides .inner { margin-left:-333.3%; } .slider-brand #brand12:checked ~ .slides .inner { margin-left:-366.7%; } .slider-brand #brand13:checked ~ .slides .inner { margin-left:-400%; } .slider-brand #brand14:checked ~ .slides .inner { margin-left:-433.3%; } .slider-brand #brand15:checked ~ .slides .inner { margin-left:-466.7%; } .slider-brand #brand16:checked ~ .slides .inner { margin-left:-500%; } .slider-brand #brand17:checked ~ .slides .inner { margin-left:-533.3%; } .slider-brand #brand18:checked ~ .slides .inner { margin-left:-566.7%; } .slider-brand #brand19:checked ~ .slides .inner { margin-left:-566.7%; } .slider-brand #brand20:checked ~ .slides .inner { margin-left:-566.7%; } .slider-brand input[name="brand"]:checked + input + .slides .inner { margin-left:0 !important; } /*#slider input ~ #controls label:first-child,*/ .slider-brand #brand1:checked ~ .controls label:nth-child(2), .slider-brand #brand2:checked ~ .controls label:nth-child(3), .slider-brand #brand3:checked ~ .controls label:nth-child(4), .slider-brand #brand4:checked ~ .controls label:nth-child(5), .slider-brand #brand5:checked ~ .controls label:nth-child(6), .slider-brand #brand6:checked ~ .controls label:nth-child(7), .slider-brand #brand7:checked ~ .controls label:nth-child(8), .slider-brand #brand8:checked ~ .controls label:nth-child(9), .slider-brand #brand9:checked ~ .controls label:nth-child(10), .slider-brand #brand10:checked ~ .controls label:nth-child(11), .slider-brand #brand11:checked ~ .controls label:nth-child(12), .slider-brand #brand12:checked ~ .controls label:nth-child(13), .slider-brand #brand13:checked ~ .controls label:nth-child(14), .slider-brand #brand14:checked ~ .controls label:nth-child(15), .slider-brand #brand15:checked ~ .controls label:nth-child(16), .slider-brand #brand16:checked ~ .controls label:nth-child(17), .slider-brand #brand17:checked ~ .controls label:nth-child(18), .slider-brand #brand18:checked ~ .controls label:nth-child(19), .slider-brand #brand19:checked ~ .controls label:nth-child(20), .slider-brand #brand20:checked ~ .controls label:nth-child(1){ background:none ; background: url('../images/DM-bg.png') no-repeat 0 -283px; display: block; opacity: 1; right:0px; } .slider-brand #brand1:checked ~ .controls label:nth-child(2):hover, .slider-brand #brand2:checked ~ .controls label:nth-child(3):hover, .slider-brand #brand3:checked ~ .controls label:nth-child(4):hover, .slider-brand #brand4:checked ~ .controls label:nth-child(5):hover, .slider-brand #brand5:checked ~ .controls label:nth-child(6):hover, .slider-brand #brand6:checked ~ .controls label:nth-child(7):hover, .slider-brand #brand7:checked ~ .controls label:nth-child(8):hover, .slider-brand #brand8:checked ~ .controls label:nth-child(9):hover, .slider-brand #brand9:checked ~ .controls label:nth-child(10):hover, .slider-brand #brand10:checked ~ .controls label:nth-child(11):hover, .slider-brand #brand11:checked ~ .controls label:nth-child(12):hover, .slider-brand #brand12:checked ~ .controls label:nth-child(13):hover, .slider-brand #brand13:checked ~ .controls label:nth-child(14):hover, .slider-brand #brand14:checked ~ .controls label:nth-child(15):hover, .slider-brand #brand15:checked ~ .controls label:nth-child(16):hover, .slider-brand #brand16:checked ~ .controls label:nth-child(17):hover, .slider-brand #brand17:checked ~ .controls label:nth-child(18):hover, .slider-brand #brand18:checked ~ .controls label:nth-child(19):hover, .slider-brand #brand19:checked ~ .controls label:nth-child(20):hover, .slider-brand #brand20:checked ~ .controls label:first-child:hover{ } /*#product1:checked ~ #controls label:nth-last-child(2),*/ .slider-brand #brand1:checked ~ .controls label:nth-child(20), .slider-brand #brand2:checked ~ .controls label:nth-child(1), .slider-brand #brand3:checked ~ .controls label:nth-child(2), .slider-brand #brand4:checked ~ .controls label:nth-child(3), .slider-brand #brand5:checked ~ .controls label:nth-child(4), .slider-brand #brand6:checked ~ .controls label:nth-child(5), .slider-brand #brand7:checked ~ .controls label:nth-child(6), .slider-brand #brand8:checked ~ .controls label:nth-child(7), .slider-brand #brand9:checked ~ .controls label:nth-child(8), .slider-brand #brand10:checked ~ .controls label:nth-child(9), .slider-brand #brand11:checked ~ .controls label:nth-child(10), .slider-brand #brand12:checked ~ .controls label:nth-child(11), .slider-brand #brand13:checked ~ .controls label:nth-child(12), .slider-brand #brand14:checked ~ .controls label:nth-child(13), .slider-brand #brand15:checked ~ .controls label:nth-child(14), .slider-brand #brand16:checked ~ .controls label:nth-child(15), .slider-brand #brand17:checked ~ .controls label:nth-child(16), .slider-brand #brand18:checked ~ .controls label:nth-child(17), .slider-brand #brand19:checked ~ .controls label:nth-child(18), .slider-brand #brand20:checked ~ .controls label:nth-child(19){ background:none ; background: url('../images/DM-bg.png') no-repeat 0 -252px; left:0px; display: block; opacity: 1; } .slider-brand #brand1:checked ~ .controls label:nth-child(20):hover, .slider-brand #brand2:checked ~ .controls label:nth-child(1):hover, .slider-brand #brand3:checked ~ .controls label:nth-child(2):hover, .slider-brand #brand4:checked ~ .controls label:nth-child(3):hover, .slider-brand #brand5:checked ~ .controls label:nth-child(4):hover, .slider-brand #brand6:checked ~ .controls label:nth-child(5):hover, .slider-brand #brand7:checked ~ .controls label:nth-child(6):hover, .slider-brand #brand8:checked ~ .controls label:nth-child(7):hover, .slider-brand #brand9:checked ~ .controls label:nth-child(8):hover, .slider-brand #brand10:checked ~ .controls label:nth-child(9):hover, .slider-brand #brand11:checked ~ .controls label:nth-child(10):hover, .slider-brand #brand12:checked ~ .controls label:nth-child(11):hover, .slider-brand #brand13:checked ~ .controls label:nth-child(12):hover, .slider-brand #brand14:checked ~ .controls label:nth-child(13):hover, .slider-brand #brand15:checked ~ .controls label:nth-child(14):hover, .slider-brand #brand16:checked ~ .controls label:nth-child(15):hover, .slider-brand #brand17:checked ~ .controls label:nth-child(16):hover, .slider-brand #brand18:checked ~ .controls label:nth-child(17):hover, .slider-brand #brand19:checked ~ .controls label:nth-child(18):hover, .slider-brand #brand20:checked ~ .controls label:nth-child(19):hover{ } .slider-brand #brand1:checked ~ .active label:nth-child(1), .slider-brand #brand2:checked ~ .active label:nth-child(2), .slider-brand #brand3:checked ~ .active label:nth-child(3), .slider-brand #brand4:checked ~ .active label:nth-child(4), .slider-brand #brand5:checked ~ .active label:nth-child(5), .slider-brand #brand6:checked ~ .active label:nth-child(6), .slider-brand #brand7:checked ~ .active label:nth-child(7), .slider-brand #brand8:checked ~ .active label:nth-child(8), .slider-brand #brand9:checked ~ .active label:nth-child(9), .slider-brand #brand10:checked ~ .active label:nth-child(10), .slider-brand #brand11:checked ~ .active label:nth-child(11), .slider-brand #brand12:checked ~ .active label:nth-child(12), .slider-brand #brand13:checked ~ .active label:nth-child(13), .slider-brand #brand14:checked ~ .active label:nth-child(14), .slider-brand #brand15:checked ~ .active label:nth-child(15), .slider-brand #brand16:checked ~ .active label:nth-child(16), .slider-brand #brand17:checked ~ .active label:nth-child(17), .slider-brand #brand18:checked ~ .active label:nth-child(18), .slider-brand #brand19:checked ~ .active label:nth-child(19), .slider-brand #brand20:checked ~ .active label:nth-child(19) { background:none; background: #000; } .slider-brand input[name="brand"]:checked + input + .slides + .controls label{display: none !important} .slider-brand input[name="brand"]:checked + input + .slides + .controls label:nth-child(2){ background:none ; background: url('../images/DM-bg.png') no-repeat 0 -283px; display: block !important; opacity: 1; right: 0px; } .slider-brand .controls label:last-child ,.slider-brand .controls label:nth-last-child(2) {display:none !important;} .slider-brand .active label:last-child,.slider-brand .active label:nth-last-child(2){display:none !important;} .slider-brand #brand3 + .slides + .controls{display:none;} .slider-brand #brand3 + .slides + .controls + .active{display:none;} } @media only screen and (max-width: 639px) { /************************** Cross sell 1 ******************/ /* Info Box */ .product-list .slider-product .controls {display:block} .product-list .slider-product .slides .inner{width:1500%;} .product-list .slider-product{width:100%; padding:0 10px} .product-list .slider-product .slides article{width:6.67%; } .product-list .slider-product .controls{bottom:52%} .product-list .slider-product .active {bottom:-20px; display:none} .product-list .slider-product .active label{ width:10px; height:10px; margin:0 2px} .slider-product #product1:checked ~ .slides .inner{ margin-left:0; } .slider-product #product2:checked ~ .slides .inner{ margin-left:-100%; } .slider-product #product3:checked ~ .slides .inner{ margin-left:-200%; } .slider-product #product4:checked ~ .slides .inner{ margin-left:-300%; } .slider-product #product5:checked ~ .slides .inner{ margin-left:-400%; } .slider-product #product6:checked ~ .slides .inner{ margin-left:-500%; } .slider-product #product7:checked ~ .slides .inner{ margin-left:-600%; } .slider-product #product8:checked ~ .slides .inner{ margin-left:-700%; } .slider-product #product9:checked ~ .slides .inner{ margin-left:-800%; } .slider-product #product10:checked ~ .slides .inner{ margin-left:-900%; } .slider-product #product11:checked ~ .slides .inner{ margin-left:-1000%;} .slider-product #product12:checked ~ .slides .inner{ margin-left:-1100%;} .slider-product #product1:checked ~ .controls label:nth-child(2), .slider-product #product2:checked ~ .controls label:nth-child(3), .slider-product #product3:checked ~ .controls label:nth-child(4), .slider-product #product4:checked ~ .controls label:nth-child(5), .slider-product #product5:checked ~ .controls label:nth-child(6), .slider-product #product6:checked ~ .controls label:nth-child(7), .slider-product #product7:checked ~ .controls label:nth-child(8), .slider-product #product8:checked ~ .controls label:nth-child(9), .slider-product #product9:checked ~ .controls label:nth-child(10), .slider-product #product10:checked ~ .controls label:nth-child(11), .slider-product #product11:checked ~ .controls label:nth-child(12), .slider-product #product12:checked ~ .controls label:first-child{ background:none ; background: url('../images/for.png') no-repeat center; display: block; opacity: 1; right: 0px; } .slider-product #product1:checked ~ .controls label:nth-child(12), .slider-product #product2:checked ~ .controls label:nth-child(1), .slider-product #product3:checked ~ .controls label:nth-child(2), .slider-product #product4:checked ~ .controls label:nth-child(3), .slider-product #product5:checked ~ .controls label:nth-child(4), .slider-product #product6:checked ~ .controls label:nth-child(5), .slider-product #product7:checked ~ .controls label:nth-child(6), .slider-product #product8:checked ~ .controls label:nth-child(7), .slider-product #product9:checked ~ .controls label:nth-child(8), .slider-product #product10:checked ~ .controls label:nth-child(9), .slider-product #product11:checked ~ .controls label:nth-child(10), .slider-product #product12:checked ~ .controls label:nth-child(11){ background:none ; background: url('../images/pre.png') no-repeat center; left:0px; display: block; opacity: 1; } /*.slider-product input ~ .slider-product .active label:nth-child(1){background:#57bee8;}*/ .slider-product #product1:checked ~ .active label:nth-child(1), .slider-product #product2:checked ~ .active label:nth-child(2), .slider-product #product3:checked ~ .active label:nth-child(3), .slider-product #product4:checked ~ .active label:nth-child(4), .slider-product #product5:checked ~ .active label:nth-child(5), .slider-product #product6:checked ~ .active label:nth-child(6), .slider-product #product7:checked ~ .active label:nth-child(7), .slider-product #product8:checked ~ .active label:nth-child(8), .slider-product #product9:checked ~ .active label:nth-child(9), .slider-product #product10:checked ~ .active label:nth-child(10), .slider-product #product11:checked ~ .active label:nth-child(11), .slider-product #product12:checked ~ .active label:nth-child(12) { background:none; background: #000; } .slider-product #product1 + .slides + .controls{display:none;} .slider-product #product1 + .slides + .controls + .active{display:none;} /************************** Cross sell 2 ******************/ /* Info Box */ .slider-product #product2-1:checked ~ .slides .inner{ margin-left:0; } .slider-product #product2-2:checked ~ .slides .inner{ margin-left:-100%; } .slider-product #product2-3:checked ~ .slides .inner{ margin-left:-200%; } .slider-product #product2-4:checked ~ .slides .inner{ margin-left:-300%; } .slider-product #product2-5:checked ~ .slides .inner{ margin-left:-400%; } .slider-product #product2-6:checked ~ .slides .inner{ margin-left:-500%; } .slider-product #product2-7:checked ~ .slides .inner{ margin-left:-600%; } .slider-product #product2-8:checked ~ .slides .inner{ margin-left:-700%; } .slider-product #product2-9:checked ~ .slides .inner{ margin-left:-800%; } .slider-product #product2-10:checked ~ .slides .inner{ margin-left:-900%; } .slider-product #product2-11:checked ~ .slides .inner{ margin-left:-1000%;} .slider-product #product2-12:checked ~ .slides .inner{ margin-left:-1100%;} .slider-product #product2-1:checked ~ .controls label:nth-child(2), .slider-product #product2-2:checked ~ .controls label:nth-child(3), .slider-product #product2-3:checked ~ .controls label:nth-child(4), .slider-product #product2-4:checked ~ .controls label:nth-child(5), .slider-product #product2-5:checked ~ .controls label:nth-child(6), .slider-product #product2-6:checked ~ .controls label:nth-child(7), .slider-product #product2-7:checked ~ .controls label:nth-child(8), .slider-product #product2-8:checked ~ .controls label:nth-child(9), .slider-product #product2-9:checked ~ .controls label:nth-child(10), .slider-product #product2-10:checked ~ .controls label:nth-child(11), .slider-product #product2-11:checked ~ .controls label:nth-child(12), .slider-product #product2-12:checked ~ .controls label:first-child{ background:none ; background: url('../images/DM-bg.png') no-repeat 0 -283px; display: block; opacity: 1; right: -5px; } .slider-product #product2-1:checked ~ .controls label:nth-child(2):hover, .slider-product #product2-2:checked ~ .controls label:nth-child(3):hover, .slider-product #product2-3:checked ~ .controls label:nth-child(4):hover, .slider-product #product2-4:checked ~ .controls label:nth-child(5):hover, .slider-product #product2-5:checked ~ .controls label:nth-child(6):hover, .slider-product #product2-6:checked ~ .controls label:nth-child(7):hover, .slider-product #product2-7:checked ~ .controls label:nth-child(8):hover, .slider-product #product2-8:checked ~ .controls label:nth-child(9):hover, .slider-product #product2-9:checked ~ .controls label:nth-child(10):hover, .slider-product #product2-10:checked ~ .controls label:nth-child(11):hover, .slider-product #product2-11:checked ~ .controls label:nth-child(12):hover, .slider-product #product2-12:checked ~ .controls label:first-child:hover{ } .slider-product #product2-1:checked ~ .controls label:nth-child(12), .slider-product #product2-2:checked ~ .controls label:nth-child(1), .slider-product #product2-3:checked ~ .controls label:nth-child(2), .slider-product #product2-4:checked ~ .controls label:nth-child(3), .slider-product #product2-5:checked ~ .controls label:nth-child(4), .slider-product #product2-6:checked ~ .controls label:nth-child(5), .slider-product #product2-7:checked ~ .controls label:nth-child(6), .slider-product #product2-8:checked ~ .controls label:nth-child(7), .slider-product #product2-9:checked ~ .controls label:nth-child(8), .slider-product #product2-10:checked ~ .controls label:nth-child(9), .slider-product #product2-11:checked ~ .controls label:nth-child(10), .slider-product #product2-12:checked ~ .controls label:nth-child(11){ background:none ; background: url('../images/DM-bg.png') no-repeat 0 -252px; left:-5px; display: block; opacity: 1; } .slider-product #product2-1:checked ~ .controls label:nth-child(12):hover, .slider-product #product2-2:checked ~ .controls label:nth-child(1):hover, .slider-product #product2-3:checked ~ .controls label:nth-child(2):hover, .slider-product #product2-4:checked ~ .controls label:nth-child(3):hover, .slider-product #product2-5:checked ~ .controls label:nth-child(4):hover, .slider-product #product2-6:checked ~ .controls label:nth-child(5):hover, .slider-product #product2-7:checked ~ .controls label:nth-child(6):hover, .slider-product #product2-8:checked ~ .controls label:nth-child(7):hover, .slider-product #product2-9:checked ~ .controls label:nth-child(8):hover, .slider-product #product2-10:checked ~ .controls label:nth-child(9):hover, .slider-product #product2-11:checked ~ .controls label:nth-child(10):hover, .slider-product #product2-12:checked ~ .controls label:nth-child(11):hover{ } .slider-product #product2-1:checked ~ .active label:nth-child(1), .slider-product #product2-2:checked ~ .active label:nth-child(2), .slider-product #product2-3:checked ~ .active label:nth-child(3), .slider-product #product2-4:checked ~ .active label:nth-child(4), .slider-product #product2-5:checked ~ .active label:nth-child(5), .slider-product #product2-6:checked ~ .active label:nth-child(6), .slider-product #product2-7:checked ~ .active label:nth-child(7), .slider-product #product2-8:checked ~ .active label:nth-child(8), .slider-product #product2-9:checked ~ .active label:nth-child(9), .slider-product #product2-10:checked ~ .active label:nth-child(10), .slider-product #product2-11:checked ~ .active label:nth-child(11), .slider-product #product2-12:checked ~ .active label:nth-child(12) { background:none; background: #000; } .slider-product-2 #product2-1 + .slides + .controls{display:none;} .slider-product-2 #product2-1 + .slides + .controls + .active{display:none;} /*********************** brand /************************/ .slider-brand .controls{bottom:50% ;} .slider-brand .slides{padding:0 10px;} .slider-brand .slides .inner{width: 1500%} .slider-brand .slides article{width:3.33%; float:left;} .slider-brand #brand1:checked ~ .slides .inner { margin-left:0; } .slider-brand #brand2:checked ~ .slides .inner { margin-left:-50%; } .slider-brand #brand3:checked ~ .slides .inner { margin-left:-100%; } .slider-brand #brand4:checked ~ .slides .inner { margin-left:-150%; } .slider-brand #brand5:checked ~ .slides .inner { margin-left:-200%; } .slider-brand #brand6:checked ~ .slides .inner { margin-left:-250%; } .slider-brand #brand7:checked ~ .slides .inner { margin-left:-300%; } .slider-brand #brand8:checked ~ .slides .inner { margin-left:-350%; } .slider-brand #brand9:checked ~ .slides .inner { margin-left:-400%; } .slider-brand #brand10:checked ~ .slides .inner { margin-left:-450%; } .slider-brand #brand11:checked ~ .slides .inner { margin-left:-500%; } .slider-brand #brand12:checked ~ .slides .inner { margin-left:-550%; } .slider-brand #brand13:checked ~ .slides .inner { margin-left:-600%; } .slider-brand #brand14:checked ~ .slides .inner { margin-left:-650%; } .slider-brand #brand15:checked ~ .slides .inner { margin-left:-700%; } .slider-brand #brand16:checked ~ .slides .inner { margin-left:-750%; } .slider-brand #brand17:checked ~ .slides .inner { margin-left:-800%; } .slider-brand #brand18:checked ~ .slides .inner { margin-left:-850%; } .slider-brand #brand19:checked ~ .slides .inner { margin-left:-900%; } .slider-brand #brand20:checked ~ .slides .inner { margin-left:-950%; } /*#slider input ~ #controls label:first-child,*/ .slider-brand #brand1:checked ~ .controls label:nth-child(2), .slider-brand #brand2:checked ~ .controls label:nth-child(3), .slider-brand #brand3:checked ~ .controls label:nth-child(4), .slider-brand #brand4:checked ~ .controls label:nth-child(5), .slider-brand #brand5:checked ~ .controls label:nth-child(6), .slider-brand #brand6:checked ~ .controls label:nth-child(7), .slider-brand #brand7:checked ~ .controls label:nth-child(8), .slider-brand #brand8:checked ~ .controls label:nth-child(9), .slider-brand #brand9:checked ~ .controls label:nth-child(10), .slider-brand #brand10:checked ~ .controls label:nth-child(11), .slider-brand #brand11:checked ~ .controls label:nth-child(12), .slider-brand #brand12:checked ~ .controls label:nth-child(13), .slider-brand #brand13:checked ~ .controls label:nth-child(14), .slider-brand #brand14:checked ~ .controls label:nth-child(15), .slider-brand #brand15:checked ~ .controls label:nth-child(16), .slider-brand #brand16:checked ~ .controls label:nth-child(17), .slider-brand #brand17:checked ~ .controls label:nth-child(18), .slider-brand #brand18:checked ~ .controls label:nth-child(19), .slider-brand #brand19:checked ~ .controls label:nth-child(20), .slider-brand #brand20:checked ~ .controls label:nth-child(20){ background:none ; background: url('../images/DM-bg.png') no-repeat 0 -283px; display: block; opacity: 1; right:0px; } .slider-brand #brand1:checked ~ .controls label:nth-child(2):hover, .slider-brand #brand2:checked ~ .controls label:nth-child(3):hover, .slider-brand #brand3:checked ~ .controls label:nth-child(4):hover, .slider-brand #brand4:checked ~ .controls label:nth-child(5):hover, .slider-brand #brand5:checked ~ .controls label:nth-child(6):hover, .slider-brand #brand6:checked ~ .controls label:nth-child(7):hover, .slider-brand #brand7:checked ~ .controls label:nth-child(8):hover, .slider-brand #brand8:checked ~ .controls label:nth-child(9):hover, .slider-brand #brand9:checked ~ .controls label:nth-child(10):hover, .slider-brand #brand10:checked ~ .controls label:nth-child(11):hover, .slider-brand #brand11:checked ~ .controls label:nth-child(12):hover, .slider-brand #brand12:checked ~ .controls label:nth-child(13):hover, .slider-brand #brand13:checked ~ .controls label:nth-child(14):hover, .slider-brand #brand14:checked ~ .controls label:nth-child(15):hover, .slider-brand #brand15:checked ~ .controls label:nth-child(16):hover, .slider-brand #brand16:checked ~ .controls label:nth-child(17):hover, .slider-brand #brand17:checked ~ .controls label:nth-child(18):hover, .slider-brand #brand18:checked ~ .controls label:nth-child(19):hover, .slider-brand #brand19:checked ~ .controls label:nth-child(20):hover, .slider-brand #brand20:checked ~ .controls label:first-child:hover{ } /*#product1:checked ~ #controls label:nth-last-child(2),*/ .slider-brand #brand1:checked ~ .controls label:nth-child(20), .slider-brand #brand2:checked ~ .controls label:nth-child(1), .slider-brand #brand3:checked ~ .controls label:nth-child(2), .slider-brand #brand4:checked ~ .controls label:nth-child(3), .slider-brand #brand5:checked ~ .controls label:nth-child(4), .slider-brand #brand6:checked ~ .controls label:nth-child(5), .slider-brand #brand7:checked ~ .controls label:nth-child(6), .slider-brand #brand8:checked ~ .controls label:nth-child(7), .slider-brand #brand9:checked ~ .controls label:nth-child(8), .slider-brand #brand10:checked ~ .controls label:nth-child(9), .slider-brand #brand11:checked ~ .controls label:nth-child(10), .slider-brand #brand12:checked ~ .controls label:nth-child(11), .slider-brand #brand13:checked ~ .controls label:nth-child(12), .slider-brand #brand14:checked ~ .controls label:nth-child(13), .slider-brand #brand15:checked ~ .controls label:nth-child(14), .slider-brand #brand16:checked ~ .controls label:nth-child(15), .slider-brand #brand17:checked ~ .controls label:nth-child(16), .slider-brand #brand18:checked ~ .controls label:nth-child(17), .slider-brand #brand19:checked ~ .controls label:nth-child(18), .slider-brand #brand20:checked ~ .controls label:nth-child(19){ background:none ; background: url('../images/DM-bg.png') no-repeat 0 -252px; left:0px; display: block; opacity: 1; } .slider-brand #brand1:checked ~ .controls label:nth-child(20):hover, .slider-brand #brand2:checked ~ .controls label:nth-child(1):hover, .slider-brand #brand3:checked ~ .controls label:nth-child(2):hover, .slider-brand #brand4:checked ~ .controls label:nth-child(3):hover, .slider-brand #brand5:checked ~ .controls label:nth-child(4):hover, .slider-brand #brand6:checked ~ .controls label:nth-child(5):hover, .slider-brand #brand7:checked ~ .controls label:nth-child(6):hover, .slider-brand #brand8:checked ~ .controls label:nth-child(7):hover, .slider-brand #brand9:checked ~ .controls label:nth-child(8):hover, .slider-brand #brand10:checked ~ .controls label:nth-child(9):hover, .slider-brand #brand11:checked ~ .controls label:nth-child(10):hover, .slider-brand #brand12:checked ~ .controls label:nth-child(11):hover, .slider-brand #brand13:checked ~ .controls label:nth-child(12):hover, .slider-brand #brand14:checked ~ .controls label:nth-child(13):hover, .slider-brand #brand15:checked ~ .controls label:nth-child(14):hover, .slider-brand #brand16:checked ~ .controls label:nth-child(15):hover, .slider-brand #brand17:checked ~ .controls label:nth-child(16):hover, .slider-brand #brand18:checked ~ .controls label:nth-child(17):hover, .slider-brand #brand19:checked ~ .controls label:nth-child(18):hover, .slider-brand #brand20:checked ~ .controls label:nth-child(19):hover{ } .slider-brand #brand1:checked ~ .active label:nth-child(1), .slider-brand #brand2:checked ~ .active label:nth-child(2), .slider-brand #brand3:checked ~ .active label:nth-child(3), .slider-brand #brand4:checked ~ .active label:nth-child(4), .slider-brand #brand5:checked ~ .active label:nth-child(5), .slider-brand #brand6:checked ~ .active label:nth-child(6), .slider-brand #brand7:checked ~ .active label:nth-child(7), .slider-brand #brand8:checked ~ .active label:nth-child(8), .slider-brand #brand9:checked ~ .active label:nth-child(9), .slider-brand #brand10:checked ~ .active label:nth-child(10), .slider-brand #brand11:checked ~ .active label:nth-child(11), .slider-brand #brand12:checked ~ .active label:nth-child(12), .slider-brand #brand13:checked ~ .active label:nth-child(13), .slider-brand #brand14:checked ~ .active label:nth-child(14), .slider-brand #brand15:checked ~ .active label:nth-child(15), .slider-brand #brand16:checked ~ .active label:nth-child(16), .slider-brand #brand17:checked ~ .active label:nth-child(17), .slider-brand #brand18:checked ~ .active label:nth-child(18), .slider-brand #brand19:checked ~ .active label:nth-child(19), .slider-brand #brand20:checked ~ .active label:nth-child(19) { background:none; background: #000; } .slider-brand .controls label:last-child {display:none !important;} .slider-brand .active label:last-child{display:none !important;} .slider-brand #brand1 + .slides + .controls{display:none;} .slider-brand #brand1 + .slides + .controls + .active{display:none;} }/* Theme controls how everything looks in Gallery CSS. */ .gallery { position: relative; margin: 0 0 20px ; } .gallery .banner-slides {position: relative;} .gallery .banner-slides .item { overflow: hidden; text-align: center; margin:0 } .overflow { width: 100%; overflow: hidden; } .gallery .banner-slides .info{ display:none;position: absolute; top:30%; left:40%; color: #fff; font-size: 20px; } .gallery .banner-slides .info h3{padding: 5px 0; background: #000} .gallery .banner-slides .item a{display:inline-block ; width:100%;} .gallery .banner-slides .item img{max-width:100%} .gallery .controls-banner { position: absolute; bottom:7px; width: 100%; text-align: center; } .gallery .controls-banner .control-button { display: inline-block; margin: 0 .02em; font-size: 3em; text-align: center; text-decoration: none; transition: background .1s; width:10px; height:10px; background: rgba(255, 255, 255, 0.5); border-radius: 5px; border:1px solid #776D69; } .gallery .controls-banner .control-button:hover { background: rgba(255, 255, 255, 1) !important; } .gallery .control-operator:target ~ .controls-banner .control-button { background: rgba(255, 255, 255, 0.5); } .gallery .controls-banner .control-button:first-of-type, .gallery .control-operator:nth-of-type(1):target ~ .controls-banner .control-button:nth-of-type(1), .gallery .control-operator:nth-of-type(2):target ~ .controls-banner .control-button:nth-of-type(2), .gallery .control-operator:nth-of-type(3):target ~ .controls-banner .control-button:nth-of-type(3), .gallery .control-operator:nth-of-type(4):target ~ .controls-banner .control-button:nth-of-type(4), .gallery .control-operator:nth-of-type(5):target ~ .controls-banner .control-button:nth-of-type(5), .gallery .control-operator:nth-of-type(6):target ~ .controls-banner .control-button:nth-of-type(6), .gallery .control-operator:nth-of-type(7):target ~ .controls-banner .control-button:nth-of-type(7), .gallery .control-operator:nth-of-type(8):target ~ .controls-banner .control-button:nth-of-type(8), .gallery .control-operator:nth-of-type(9):target ~ .controls-banner .control-button:nth-of-type(9), .gallery .control-operator:nth-of-type(10):target ~ .controls-banner .control-button:nth-of-type(10), .gallery .control-operator:nth-of-type(11):target ~ .controls-banner .control-button:nth-of-type(11), .gallery .control-operator:nth-of-type(12):target ~ .controls-banner .control-button:nth-of-type(12) { background: rgba(255, 255, 255, 1); } .gallery .banner-slides .item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; -webkit-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s; } .gallery .banner-slides .item:first-of-type { position: static; pointer-events: auto; opacity: 1; } .gallery .control-operator { display: none; } .gallery .control-operator:target ~ .banner-slides .item { pointer-events: none; opacity: 0; -webkit-animation: none; -o-animation: none; animation: none; } .gallery .control-operator:target ~ .controls-banner .control-button { -webkit-animation: none; -o-animation: none; animation: none; } .gallery div#item-1 + .banner-slides + .controls-banner { display: none;} .gallery div#item-1:target ~ .banner-slides .item:nth-of-type(1) { pointer-events: auto; opacity: 1; } .gallery div#item-2:target ~ .banner-slides .item:nth-of-type(2) { pointer-events: auto; opacity: 1; } .gallery div#item-3:target ~ .banner-slides .item:nth-of-type(3) { pointer-events: auto; opacity: 1; } .gallery div#item-4:target ~ .banner-slides .item:nth-of-type(4) { pointer-events: auto; opacity: 1; } .gallery div#item-5:target ~ .banner-slides .item:nth-of-type(5) { pointer-events: auto; opacity: 1; } .gallery div#item-6:target ~ .banner-slides .item:nth-of-type(6) { pointer-events: auto; opacity: 1; } .gallery div#item-7:target ~ .banner-slides .item:nth-of-type(7) { pointer-events: auto; opacity: 1; } .gallery div#item-8:target ~ .banner-slides .item:nth-of-type(8) { pointer-events: auto; opacity: 1; } .gallery div#item-9:target ~ .banner-slides .item:nth-of-type(9) { pointer-events: auto; opacity: 1; } .gallery div#item-10:target ~ .banner-slides .item:nth-of-type(10) { pointer-events: auto; opacity: 1; } .gallery div#item-11:target ~ .banner-slides .item:nth-of-type(11) { pointer-events: auto; opacity: 1; } .gallery div#item-12:target ~ .banner-slides .item:nth-of-type(12) { pointer-events: auto; opacity: 1; } .gallery .controls-banner .control-button:nth-of-type(1), .gallery .banner-slides .item:nth-of-type(1) { -webkit-animation-delay: -2s !important; -o-animation-delay: -2s !important; animation-delay: -2s !important; } .gallery .controls-banner .control-button:nth-of-type(2), .gallery .banner-slides .item:nth-of-type(2) { -webkit-animation-delay: 3s !important; -o-animation-delay: 3s !important; animation-delay: 3s !important; } .gallery .controls-banner .control-button:nth-of-type(3), .gallery .banner-slides .item:nth-of-type(3) { -webkit-animation-delay: 8s !important; -o-animation-delay: 8s !important; animation-delay: 8s !important; } .gallery .controls-banner .control-button:nth-of-type(4), .gallery .banner-slides .item:nth-of-type(4) { -webkit-animation-delay: 13s !importants; -o-animation-delay: 13s !important; animation-delay: 13s !important; } .gallery .controls-banner .control-button:nth-of-type(5), .gallery .banner-slides .item:nth-of-type(5) { -webkit-animation-delay: 18s !important; -o-animation-delay: 18s !important; animation-delay: 18s !important; } .gallery .controls-banner .control-button:nth-of-type(6), .gallery .banner-slides .item:nth-of-type(6) { -webkit-animation-delay: 23s !important; -o-animation-delay: 23s !important; animation-delay: 23s !important; } .gallery .controls-banner .control-button:nth-of-type(7), .gallery .banner-slides .item:nth-of-type(7) { -webkit-animation-delay: 28s !important; -o-animation-delay: 28s !important; animation-delay: 28s !important; } .gallery .controls-banner .control-button:nth-of-type(8), .gallery .banner-slides .item:nth-of-type(8) { -webkit-animation-delay: 33s !important; -o-animation-delay: 33s !important; animation-delay: 33s !important; } .gallery .controls-banner .control-button:nth-of-type(9), .gallery .banner-slides .item:nth-of-type(9) { -webkit-animation-delay: 38s !important; -o-animation-delay: 38s !important; animation-delay: 38s !important; } .gallery .controls-banner .control-button:nth-of-type(10), .gallery .banner-slides .item:nth-of-type(10) { -webkit-animation-delay: 43s !important; -o-animation-delay: 43s !important; animation-delay: 43s !important; } .gallery .controls-banner .control-button:nth-of-type(11), .gallery .banner-slides .item:nth-of-type(11) { -webkit-animation-delay: 48s !important; -o-animation-delay: 48s !important; animation-delay: 48s !important; } .gallery .controls-banner .control-button:nth-of-type(12), .gallery .banner-slides .item:nth-of-type(12) { -webkit-animation-delay: 53s !important; -o-animation-delay: 53s !important; animation-delay: 53s !important; } /************* BANNER HAVE 2 IMAGES ****************/ @-webkit-keyframes controlAnimation-2 { 0% { background: rgba(255, 255, 255, 0.5); } 14.3%, 50% { background: rgba(255, 255, 255, 1); } 64.3%, 100% { background: rgba(255, 255, 255, 0.5); } } @-o-keyframes controlAnimation-2 { 0% { background: rgba(255, 255, 255, 0.5); } 14.3%, 50% { background: rgba(255, 255, 255, 1); } 64.3%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-2 { 0% { background: rgba(255, 255, 255, 0.5); } 14.3%, 50% { background: rgba(255, 255, 255, 1); } 64.3%, 100% { background: rgba(255, 255, 255, 0.5); } } @-webkit-keyframes galleryAnimation-2 { 0% { opacity: 0; } 14.3%, 50% { opacity: 1; } 64.3%, 100% { opacity: 0; } } @-o-keyframes galleryAnimation-2 { 0% { opacity: 0; } 14.3%, 50% { opacity: 1; } 64.3%, 100% { opacity: 0; } } @keyframes galleryAnimation-2 { 0% { opacity: 0; } 14.3%, 50% { opacity: 1; } 64.3%, 100% { opacity: 0; } } .gallery.item-2 .controls-banner .control-button { -webkit-animation: controlAnimation-2 10s infinite; -o-animation: controlAnimation-2 10s infinite; animation: controlAnimation-2 10s infinite; } .gallery.item-2 .banner-slides .item { -webkit-animation: galleryAnimation-2 10s infinite; -o-animation: galleryAnimation-2 10s infinite; animation: galleryAnimation-2 10s infinite; } @keyframes controlAnimation-2-target { 0%, 14.3% { background: rgba(255, 255, 255, 0.5); } 14.3%, 50% { background: rgba(255, 255, 255, 1); } 64.3%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes galleryAnimation-2-target{ 0%, 14.3% { opacity: 0; } 14.3%, 50% { opacity: 1; } 64.3%, 100% { opacity: 0; } } .gallery.item-2 div#item-1:target ~ .banner-slides .item { animation: galleryAnimation-2-target 10s infinite; } .gallery.item-2 div#item-1:target ~ .controls-banner .control-button { animation: controlAnimation-2-target 10s infinite; } .gallery.item-2 div#item-2:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-2 div#item-2:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: -2s !important; } .gallery.item-2 div#item-2:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-2 div#item-2:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 3s !important; } .gallery.item-2 div#item-2:target ~ .banner-slides .item { animation: galleryAnimation-2 10s infinite; } .gallery.item-2 div#item-2:target ~ .controls-banner .control-button { animation: controlAnimation-2 10s infinite; } /************* BANNER HAVE 3 IMAGES ****************/ @-webkit-keyframes controlAnimation-3 { 0% { background: rgba(255, 255, 255, 0.5); } 9.5%, 33.3% { background: rgba(255, 255, 255, 1); } 42.9%, 100% { background: rgba(255, 255, 255, 0.5); } } @-o-keyframes controlAnimation-3 { 0% { background: rgba(255, 255, 255, 0.5); } 9.5%, 33.3% { background: rgba(255, 255, 255, 1); } 42.9%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-3 { 0% { background: rgba(255, 255, 255, 0.5); } 9.5%, 33.3% { background: rgba(255, 255, 255, 1); } 42.9%, 100% { background: rgba(255, 255, 255, 0.5); } } @-webkit-keyframes galleryAnimation-3 { 0% { opacity: 0; } 9.5%, 33.3% { opacity: 1; } 42.9%, 100% { opacity: 0; } } @-o-keyframes galleryAnimation-3 { 0% { opacity: 0; } 9.5%, 33.3% { opacity: 1; } 42.9%, 100% { opacity: 0; } } @keyframes galleryAnimation-3 { 0% { opacity: 0; } 9.5%, 33.3% { opacity: 1; } 42.9%, 100% { opacity: 0; } } .gallery.item-3 .controls-banner .control-button { -webkit-animation: controlAnimation-3 15s infinite; -o-animation: controlAnimation-3 15s infinite; animation: controlAnimation-3 15s infinite; } .gallery.item-3 .banner-slides .item { -webkit-animation: galleryAnimation-3 15s infinite; -o-animation: galleryAnimation-3 15s infinite; animation: galleryAnimation-3 15s infinite; } @keyframes controlAnimation-3-target { 0%,9.5% { background: rgba(255, 255, 255, 0.5); } 9.5%, 33.3% { background: rgba(255, 255, 255, 1); } 42.9%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-3-target2 { 0%,9.5% { background: rgba(255, 255, 255, 0.5); } 9.5%, 33.3% { background: rgba(255, 255, 255, 1); } 42.9%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-3-target3 { 0%,9.5% { background: rgba(255, 255, 255, 0.5); } 9.5%, 33.3% { background: rgba(255, 255, 255, 1); } 42.9%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes galleryAnimation-3-target{ 0%, 9.5% { opacity: 0; } 9.5%, 33.3% { opacity: 1; } 42.9%, 100% { opacity: 0; } } @keyframes galleryAnimation-3-target2{ 0%, 9.5% { opacity: 0; } 9.5%, 33.3% { opacity: 1; } 42.9%, 100% { opacity: 0; } } @keyframes galleryAnimation-3-target3{ 0%, 9.5% { opacity: 0; } 9.5%, 33.3% { opacity: 1; } 42.9%, 100% { opacity: 0; } } .gallery.item-3 div#item-1:target ~ .banner-slides .item { animation: galleryAnimation-3-target 15s infinite; } .gallery.item-3 div#item-1:target ~ .controls-banner .control-button { animation: controlAnimation-3-target 15s infinite; } /* set animation delay when click #item-2 */ .gallery.item-3 div#item-2:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-3 div#item-2:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: -2s !important; } .gallery.item-3 div#item-2:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-3 div#item-2:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 3s !important; } .gallery.item-3 div#item-2:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-3 div#item-2:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 8s !important; } .gallery.item-3 div#item-2:target ~ .banner-slides .item { animation: galleryAnimation-3-target2 15s infinite; } .gallery.item-3 div#item-2:target ~ .controls-banner .control-button { animation: controlAnimation-3-target2 15s infinite; } /* set animation delay when click #item-3 */ .gallery.item-3 div#item-3:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-3 div#item-3:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: -2s !important; } .gallery.item-3 div#item-3:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-3 div#item-3:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 3s !important; } .gallery.item-3 div#item-3:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-3 div#item-3:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 8s !important; } .gallery.item-3 div#item-3:target ~ .banner-slides .item { animation: galleryAnimation-3-target3 15s infinite; } .gallery.item-3 div#item-3:target ~ .controls-banner .control-button { animation: controlAnimation-3-target3 15s infinite; } /************* BANNER HAVE 4 IMAGES *****************/ @-webkit-keyframes controlAnimation-4 { 0% { background: rgba(255, 255, 255, 0.5); } 7.1%, 25% { background: rgba(255, 255, 255, 1); } 32.1%, 100% { background: rgba(255, 255, 255, 0.5); } } @-o-keyframes controlAnimation-4 { 0% { background: rgba(255, 255, 255, 0.5); } 7.1%, 25% { background: rgba(255, 255, 255, 1); } 32.1%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-4 { 0% { background: rgba(255, 255, 255, 0.5); } 7.1%, 25% { background: rgba(255, 255, 255, 1); } 32.1%, 100% { background: rgba(255, 255, 255, 0.5); } } @-webkit-keyframes galleryAnimation-4 { 0% { opacity: 0; } 7.1%, 25% { opacity: 1; } 32.1%, 100% { opacity: 0; } } @-o-keyframes galleryAnimation-4 { 0% { opacity: 0; } 7.1%, 25% { opacity: 1; } 32.1%, 100% { opacity: 0; } } @keyframes galleryAnimation-4 { 0% { opacity: 0; } 7.1%, 25% { opacity: 1; } 32.1%, 100% { opacity: 0; } } .gallery.item-4 .controls-banner .control-button { -webkit-animation: controlAnimation-4 20s infinite -o-animation: controlAnimation-4 20s infinite ; animation: controlAnimation-4 20s infinite ; } .gallery.item-4 .banner-slides .item { -webkit-animation: galleryAnimation-4 20s infinite ; -o-animation: galleryAnimation-4 20s infinite ; animation: galleryAnimation-4 20s infinite ; } @keyframes controlAnimation-4-target { 0%, 7.1% { background: rgba(255, 255, 255, 0.5); } 7.1%, 25% { background: rgba(255, 255, 255, 1); } 32.1%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-4-target2 { 0%, 7.1% { background: rgba(255, 255, 255, 0.5); } 7.1%, 25% { background: rgba(255, 255, 255, 1); } 32.1%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-4-target3 { 0%, 7.1% { background: rgba(255, 255, 255, 0.5); } 7.1%, 25% { background: rgba(255, 255, 255, 1); } 32.1%, 100% { background: rgba(255, 255, 255, 0.5); } }@keyframes controlAnimation-4-target4 { 0%, 7.1% { background: rgba(255, 255, 255, 0.5); } 7.1%, 25% { background: rgba(255, 255, 255, 1); } 32.1%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes galleryAnimation-4-target{ 0%, 7.1% { opacity: 0; } 7.1%, 25% { opacity: 1; } 32.1%, 100% { opacity: 0; } } @keyframes galleryAnimation-4-target2{ 0%, 7.1% { opacity: 0; } 7.1%, 25% { opacity: 1; } 32.1%, 100% { opacity: 0; } } @keyframes galleryAnimation-4-target3{ 0%, 7.1% { opacity: 0; } 7.1%, 25% { opacity: 1; } 32.1%, 100% { opacity: 0; } } @keyframes galleryAnimation-4-target4{ 0%, 7.1% { opacity: 0; } 7.1%, 25% { opacity: 1; } 32.1%, 100% { opacity: 0; } } .gallery.item-4 div#item-1:target ~ .banner-slides .item { animation: galleryAnimation-4-target 20s infinite; } .gallery.item-4 div#item-1:target ~ .controls-banner .control-button { animation: controlAnimation-4-target 20s infinite; } /* set animation delay when click #item-2 */ .gallery.item-4 div#item-2:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-4 div#item-2:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: -2s !important; } .gallery.item-4 div#item-2:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-4 div#item-2:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 3s !important; } .gallery.item-4 div#item-2:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-4 div#item-2:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 8s !important; } .gallery.item-4 div#item-2:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-4 div#item-2:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 13s !important; } .gallery.item-4 div#item-2:target ~ .banner-slides .item { animation: galleryAnimation-4-target2 20s infinite; } .gallery.item-4 div#item-2:target ~ .controls-banner .control-button { animation: controlAnimation-4-target2 20s infinite; } /* set animation delay when click #item-3 */ .gallery.item-4 div#item-3:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-4 div#item-3:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: -2s !important; } .gallery.item-4 div#item-3:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-4 div#item-3:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 3s !important; } .gallery.item-4 div#item-3:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-4 div#item-3:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 8s !important; } .gallery.item-4 div#item-3:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-4 div#item-3:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 13s !important; } .gallery.item-4 div#item-3:target ~ .banner-slides .item { animation: galleryAnimation-4-target3 20s infinite; } .gallery.item-4 div#item-3:target ~ .controls-banner .control-button { animation: controlAnimation-4-target3 20s infinite; } /* set animation delay when click #item-4 */ .gallery.item-4 div#item-4:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-4 div#item-4:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: -2s !important; } .gallery.item-4 div#item-4:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-4 div#item-4:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 3s !important; } .gallery.item-4 div#item-4:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-4 div#item-4:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 8s !important; } .gallery.item-4 div#item-4:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-4 div#item-4:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 13s !important; } .gallery.item-4 div#item-4:target ~ .banner-slides .item { animation: galleryAnimation-4-target4 20s infinite; } .gallery.item-4 div#item-4:target ~ .controls-banner .control-button { animation: controlAnimation-4-target4 20s infinite; } /************* BANNER HAVE 5 IMAGES *****************/ @-webkit-keyframes controlAnimation-5 { 0% { background: rgba(255, 255, 255, 0.5); } 5.7%, 20% { background: rgba(255, 255, 255, 1); } 25.7%, 100% { background: rgba(255, 255, 255, 0.5); } } @-o-keyframes controlAnimation-5 { 0% { background: rgba(255, 255, 255, 0.5); } 5.7%, 20% { background: rgba(255, 255, 255, 1); } 25.7%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-5 { 0% { background: rgba(255, 255, 255, 0.5); } 5.7%, 20% { background: rgba(255, 255, 255, 1); } 25.7%, 100% { background: rgba(255, 255, 255, 0.5); } } @-webkit-keyframes galleryAnimation-5 { 0% { opacity: 0; } 5.7%, 20% { opacity: 1; } 25.7%, 100% { opacity: 0; } } @-o-keyframes galleryAnimation-5 { 0% { opacity: 0; } 5.7%, 20% { opacity: 1; } 25.7%, 100% { opacity: 0; } } @keyframes galleryAnimation-5 { 0% { opacity: 0; } 5.7%, 20% { opacity: 1; } 25.7%, 100% { opacity: 0; } } .gallery.item-5 .controls-banner .control-button { -webkit-animation: controlAnimation-5 25s infinite; -o-animation: controlAnimation-5 25s infinite; animation: controlAnimation-5 25s infinite; } .gallery.item-5 .banner-slides .item { -webkit-animation: galleryAnimation-5 25s infinite; -o-animation: galleryAnimation-5 25s infinite; animation: galleryAnimation-5 25s infinite; } @keyframes controlAnimation-5-target { 0%,5.7% { background: rgba(255, 255, 255, 0.5); } 5.7%, 20% { background: rgba(255, 255, 255, 1); } 25.7%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-5-target2 { 0%,5.7% { background: rgba(255, 255, 255, 0.5); } 5.7%, 20% { background: rgba(255, 255, 255, 1); } 25.7%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-5-target3 { 0%,5.7% { background: rgba(255, 255, 255, 0.5); } 5.7%, 20% { background: rgba(255, 255, 255, 1); } 25.7%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-5-target4 { 0%,5.7% { background: rgba(255, 255, 255, 0.5); } 5.7%, 20% { background: rgba(255, 255, 255, 1); } 25.7%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-5-target5 { 0%,5.7% { background: rgba(255, 255, 255, 0.5); } 5.7%, 20% { background: rgba(255, 255, 255, 1); } 25.7%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes galleryAnimation-5-target{ 0%, 5.7% { opacity: 0; } 5.7%, 20% { opacity: 1; } 25.7%, 100% { opacity: 0; } } @keyframes galleryAnimation-5-target2{ 0%, 5.7% { opacity: 0; } 5.7%, 20% { opacity: 1; } 25.7%, 100% { opacity: 0; } } @keyframes galleryAnimation-5-target3{ 0%, 5.7% { opacity: 0; } 5.7%, 20% { opacity: 1; } 25.7%, 100% { opacity: 0; } } @keyframes galleryAnimation-5-target4{ 0%, 5.7% { opacity: 0; } 5.7%, 20% { opacity: 1; } 25.7%, 100% { opacity: 0; } } @keyframes galleryAnimation-5-target5{ 0%, 5.7% { opacity: 0; } 5.7%, 20% { opacity: 1; } 25.7%, 100% { opacity: 0; } } .gallery.item-5 div#item-1:target ~ .banner-slides .item { animation: galleryAnimation-5-target 25s infinite; } .gallery.item-5 div#item-1:target ~ .controls-banner .control-button { animation: controlAnimation-5-target 25s infinite; } /* set animation delay when click #item-2 */ .gallery.item-5 div#item-2:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-5 div#item-2:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: -2s !important; } .gallery.item-5 div#item-2:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-5 div#item-2:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 3s !important; } .gallery.item-5 div#item-2:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-5 div#item-2:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 8s !important; } .gallery.item-5 div#item-2:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-5 div#item-2:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 13s !important; } .gallery.item-5 div#item-2:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-5 div#item-2:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 18s !important; } .gallery.item-5 div#item-2:target ~ .banner-slides .item { animation: galleryAnimation-5-target2 25s infinite; } .gallery.item-5 div#item-2:target ~ .controls-banner .control-button { animation: controlAnimation-5-target2 25s infinite; } /* set animation delay when click #item-3 */ .gallery.item-5 div#item-3:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-5 div#item-3:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: -2s !important; } .gallery.item-5 div#item-3:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-5 div#item-3:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 3s !important; } .gallery.item-5 div#item-3:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-5 div#item-3:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 8s !important; } .gallery.item-5 div#item-3:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-5 div#item-3:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 13s !important; } .gallery.item-5 div#item-3:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-5 div#item-3:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 18s !important; } .gallery.item-5 div#item-3:target ~ .banner-slides .item { animation: galleryAnimation-5-target3 25s infinite; } .gallery.item-5 div#item-3:target ~ .controls-banner .control-button { animation: controlAnimation-5-target3 25s infinite; } /* set animation delay when click #item-4 */ .gallery.item-5 div#item-4:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-5 div#item-4:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: -2s !important; } .gallery.item-5 div#item-4:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-5 div#item-4:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 3s !important; } .gallery.item-5 div#item-4:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-5 div#item-4:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 8s !important; } .gallery.item-5 div#item-4:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-5 div#item-4:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 13s !important; } .gallery.item-5 div#item-4:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-5 div#item-4:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 18s !important; } .gallery.item-5 div#item-4:target ~ .banner-slides .item { animation: galleryAnimation-5-target4 25s infinite; } .gallery.item-5 div#item-4:target ~ .controls-banner .control-button { animation: controlAnimation-5-target4 25s infinite; } /* set animation delay when click #item-5 */ .gallery.item-5 div#item-5:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-5 div#item-5:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: -2s !important; } .gallery.item-5 div#item-5:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-5 div#item-5:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 3s !important; } .gallery.item-5 div#item-5:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-5 div#item-5:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 8s !important; } .gallery.item-5 div#item-5:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-5 div#item-5:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 13s !important; } .gallery.item-5 div#item-5:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-5 div#item-5:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 18s !important; } .gallery.item-5 div#item-5:target ~ .banner-slides .item { animation: galleryAnimation-5-target5 25s infinite; } .gallery.item-5 div#item-5:target ~ .controls-banner .control-button { animation: controlAnimation-5-target5 25s infinite; } /************* BANNER HAVE 6 IMAGES *****************/ @-webkit-keyframes controlAnimation-6 { 0% { background: rgba(255, 255, 255, 0.5); } 4.8%, 16.67% { background: rgba(255, 255, 255, 1); } 21.47%, 100% { background: rgba(255, 255, 255, 0.5); } } @-o-keyframes controlAnimation-6 { 0% { background: rgba(255, 255, 255, 0.5); } 4.8%, 16.67% { background: rgba(255, 255, 255, 1); } 21.47%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-6 { 0% { background: rgba(255, 255, 255, 0.5); } 4.8%, 16.67% { background: rgba(255, 255, 255, 1); } 21.47%, 100% { background: rgba(255, 255, 255, 0.5); } } @-webkit-keyframes galleryAnimation-6 { 0% { opacity: 0; } 4.8%, 16.67% { opacity: 1; } 21.47%, 100% { opacity: 0; } } @-o-keyframes galleryAnimation-6 { 0% { opacity: 0; } 4.8%, 16.67% { opacity: 1; } 21.47%, 100% { opacity: 0; } } @keyframes galleryAnimation-6 { 0% { opacity: 0; } 4.8%, 16.67% { opacity: 1; } 21.47%, 100% { opacity: 0; } } .gallery.item-6 .controls-banner .control-button { -webkit-animation: controlAnimation-6 30s infinite; -o-animation: controlAnimation-6 30s infinite; animation: controlAnimation-6 30s infinite; } .gallery.item-6 .banner-slides .item { -webkit-animation: galleryAnimation-6 30s infinite; -o-animation: galleryAnimation-6 30s infinite; animation: galleryAnimation-6 30s infinite; } /* click item */ @keyframes controlAnimation-6-target { 0%, 4.8% { background: rgba(255, 255, 255, 0.5); } 4.8%, 16.67% { background: rgba(255, 255, 255, 1); } 21.47%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-6-target2 { 0%, 4.8% { background: rgba(255, 255, 255, 0.5); } 4.8%, 16.67% { background: rgba(255, 255, 255, 1); } 21.47%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-6-target3 { 0%, 4.8% { background: rgba(255, 255, 255, 0.5); } 4.8%, 16.67% { background: rgba(255, 255, 255, 1); } 21.47%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-6-target4 { 0%, 4.8% { background: rgba(255, 255, 255, 0.5); } 4.8%, 16.67% { background: rgba(255, 255, 255, 1); } 21.47%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-6-target5 { 0%, 4.8% { background: rgba(255, 255, 255, 0.5); } 4.8%, 16.67% { background: rgba(255, 255, 255, 1); } 21.47%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-6-target6 { 0%, 4.8% { background: rgba(255, 255, 255, 0.5); } 4.8%, 16.67% { background: rgba(255, 255, 255, 1); } 21.47%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes galleryAnimation-6-target{ 0%, 4.8% { opacity: 0; } 4.8%, 16.67% { opacity: 1; } 21.47%, 100% { opacity: 0; } } @keyframes galleryAnimation-6-target2{ 0%, 4.8% { opacity: 0; } 4.8%, 16.67% { opacity: 1; } 21.47%, 100% { opacity: 0; } } @keyframes galleryAnimation-6-target3{ 0%, 4.8% { opacity: 0; } 4.8%, 16.67% { opacity: 1; } 21.47%, 100% { opacity: 0; } } @keyframes galleryAnimation-6-target4{ 0%, 4.8% { opacity: 0; } 4.8%, 16.67% { opacity: 1; } 21.47%, 100% { opacity: 0; } } @keyframes galleryAnimation-6-target5{ 0%, 4.8% { opacity: 0; } 4.8%, 16.67% { opacity: 1; } 21.47%, 100% { opacity: 0; } } @keyframes galleryAnimation-6-target6{ 0%, 4.8% { opacity: 0; } 4.8%, 16.67% { opacity: 1; } 21.47%, 100% { opacity: 0; } } .gallery.item-6 div#item-1:target ~ .banner-slides .item { animation: galleryAnimation-6-target 30s infinite; } .gallery.item-6 div#item-1:target ~ .controls-banner .control-button { animation: controlAnimation-6-target 30s infinite; } /* set animation delay when click #item-2 */ .gallery.item-6 div#item-2:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-6 div#item-2:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: -2s !important; } .gallery.item-6 div#item-2:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-6 div#item-2:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 3s !important; } .gallery.item-6 div#item-2:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-6 div#item-2:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 8s !important; } .gallery.item-6 div#item-2:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-6 div#item-2:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 13s !important; } .gallery.item-6 div#item-2:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-6 div#item-2:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 18s !important; } .gallery.item-6 div#item-2:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-6 div#item-2:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 23s !important; } .gallery.item-6 div#item-2:target ~ .banner-slides .item { animation: galleryAnimation-6-target2 30s infinite; } .gallery.item-6 div#item-2:target ~ .controls-banner .control-button { animation: controlAnimation-6-target2 30s infinite; } /* set animation delay when click #item-3 */ .gallery.item-6 div#item-3:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-6 div#item-3:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: -2s !important; } .gallery.item-6 div#item-3:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-6 div#item-3:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 3s !important; } .gallery.item-6 div#item-3:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-6 div#item-3:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 8s !important; } .gallery.item-6 div#item-3:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-6 div#item-3:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 13s !important; } .gallery.item-6 div#item-3:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-6 div#item-3:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 18s !important; } .gallery.item-6 div#item-3:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-6 div#item-3:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 23s !important; } .gallery.item-6 div#item-3:target ~ .banner-slides .item { animation: galleryAnimation-6-target3 30s infinite; } .gallery.item-6 div#item-3:target ~ .controls-banner .control-button { animation: controlAnimation-6-target3 30s infinite; } /* set animation delay when click #item-4 */ .gallery.item-6 div#item-4:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-6 div#item-4:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: -2s !important; } .gallery.item-6 div#item-4:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-6 div#item-4:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 3s !important; } .gallery.item-6 div#item-4:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-6 div#item-4:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 8s !important; } .gallery.item-6 div#item-4:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-6 div#item-4:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 13s !important; } .gallery.item-6 div#item-4:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-6 div#item-4:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 18s !important; } .gallery.item-6 div#item-4:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-6 div#item-4:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 23s !important; } .gallery.item-6 div#item-4:target ~ .banner-slides .item { animation: galleryAnimation-6-target4 30s infinite; } .gallery.item-6 div#item-4:target ~ .controls-banner .control-button { animation: controlAnimation-6-target4 30s infinite; } /* set animation delay when click #item-5 */ .gallery.item-6 div#item-5:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-6 div#item-5:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: -2s !important; } .gallery.item-6 div#item-5:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-6 div#item-5:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 3s !important; } .gallery.item-6 div#item-5:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-6 div#item-5:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 8s !important; } .gallery.item-6 div#item-5:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-6 div#item-5:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 13s !important; } .gallery.item-6 div#item-5:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-6 div#item-5:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 18s !important; } .gallery.item-6 div#item-5:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-6 div#item-5:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 23s !important; } .gallery.item-6 div#item-5:target ~ .banner-slides .item { animation: galleryAnimation-6-target5 30s infinite; } .gallery.item-6 div#item-5:target ~ .controls-banner .control-button { animation: controlAnimation-6-target5 30s infinite; } /* set animation delay when click #item-6 */ .gallery.item-6 div#item-6:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-6 div#item-6:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: -2s !important; } .gallery.item-6 div#item-6:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-6 div#item-6:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 3s !important; } .gallery.item-6 div#item-6:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-6 div#item-6:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 8s !important; } .gallery.item-6 div#item-6:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-6 div#item-6:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 13s !important; } .gallery.item-6 div#item-6:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-6 div#item-6:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 18s !important; } .gallery.item-6 div#item-6:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-6 div#item-6:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 23s !important; } .gallery.item-6 div#item-6:target ~ .banner-slides .item { animation: galleryAnimation-6-target6 30s infinite; } .gallery.item-6 div#item-6:target ~ .controls-banner .control-button { animation: controlAnimation-6-target6 30s infinite; } /************* BANNER HAVE 7 IMAGES *****************/ @-webkit-keyframes controlAnimation-7 { 0% { background: rgba(255, 255, 255, 0.5); } 4.1%, 14.28% { background: rgba(255, 255, 255, 1); } 18.38%, 100% { background: rgba(255, 255, 255, 0.5); } } @-o-keyframes controlAnimation-7 { 0% { background: rgba(255, 255, 255, 0.5); } 4.1%, 14.28% { background: rgba(255, 255, 255, 1); } 18.38%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-7 { 0% { background: rgba(255, 255, 255, 0.5); } 4.1%, 14.28% { background: rgba(255, 255, 255, 1); } 18.38%, 100% { background: rgba(255, 255, 255, 0.5); } } @-webkit-keyframes galleryAnimation-7 { 0% { opacity: 0; } 4.1%, 14.28% { opacity: 1; } 18.38%, 100% { opacity: 0; } } @-o-keyframes galleryAnimation-7 { 0% { opacity: 0; } 4.1%, 14.28% { opacity: 1; } 18.38%, 100% { opacity: 0; } } @keyframes galleryAnimation-7 { 0% { opacity: 0; } 4.1%, 14.28% { opacity: 1; } 18.38%, 100% { opacity: 0; } } .gallery.item-7 .controls-banner .control-button { -webkit-animation: controlAnimation-7 35s infinite; -o-animation: controlAnimation-7 35s infinite; animation: controlAnimation-7 35s infinite; } .gallery.item-7 .banner-slides .item { -webkit-animation: galleryAnimation-7 35s infinite; -o-animation: galleryAnimation-7 35s infinite; animation: galleryAnimation-7 35s infinite; } /* click item */ @keyframes controlAnimation-7-target { 0%, 4.1% { background: rgba(255, 255, 255, 0.5); } 4.1%, 14.28% { background: rgba(255, 255, 255, 1); } 18.38%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-7-target2 { 0%, 4.1% { background: rgba(255, 255, 255, 0.5); } 4.1%, 14.28% { background: rgba(255, 255, 255, 1); } 18.38%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-7-target3 { 0%, 4.1% { background: rgba(255, 255, 255, 0.5); } 4.1%, 14.28% { background: rgba(255, 255, 255, 1); } 18.38%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-7-target4 { 0%, 4.1% { background: rgba(255, 255, 255, 0.5); } 4.1%, 14.28% { background: rgba(255, 255, 255, 1); } 18.38%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-7-target5 { 0%, 4.1% { background: rgba(255, 255, 255, 0.5); } 4.1%, 14.28% { background: rgba(255, 255, 255, 1); } 18.38%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-7-target6 { 0%, 4.1% { background: rgba(255, 255, 255, 0.5); } 4.1%, 14.28% { background: rgba(255, 255, 255, 1); } 18.38%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-7-target7 { 0%, 4.1% { background: rgba(255, 255, 255, 0.5); } 4.1%, 14.28% { background: rgba(255, 255, 255, 1); } 18.38%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes galleryAnimation-7-target{ 0%, 4.1% { opacity: 0; } 4.1%, 14.28% { opacity: 1; } 18.38%, 100% { opacity: 0; } } @keyframes galleryAnimation-7-target2{ 0%, 4.1% { opacity: 0; } 4.1%, 14.28% { opacity: 1; } 18.38%, 100% { opacity: 0; } } @keyframes galleryAnimation-7-target3{ 0%, 4.1% { opacity: 0; } 4.1%, 14.28% { opacity: 1; } 18.38%, 100% { opacity: 0; } } @keyframes galleryAnimation-7-target4{ 0%, 4.1% { opacity: 0; } 4.1%, 14.28% { opacity: 1; } 18.38%, 100% { opacity: 0; } } @keyframes galleryAnimation-7-target5{ 0%, 4.1% { opacity: 0; } 4.1%, 14.28% { opacity: 1; } 18.38%, 100% { opacity: 0; } } @keyframes galleryAnimation-7-target6{ 0%, 4.1% { opacity: 0; } 4.1%, 14.28% { opacity: 1; } 18.38%, 100% { opacity: 0; } } @keyframes galleryAnimation-7-target7{ 0%, 4.1% { opacity: 0; } 4.1%, 14.28% { opacity: 1; } 18.38%, 100% { opacity: 0; } } .gallery.item-7 div#item-1:target ~ .banner-slides .item { animation: galleryAnimation-7-target 35s infinite; } .gallery.item-7 div#item-1:target ~ .controls-banner .control-button { animation: controlAnimation-7-target 35s infinite; } /* set animation delay when click #item-2 */ .gallery.item-7 div#item-2:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-7 div#item-2:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: -2s !important; } .gallery.item-7 div#item-2:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-7 div#item-2:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 3s !important; } .gallery.item-7 div#item-2:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-7 div#item-2:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 8s !important; } .gallery.item-7 div#item-2:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-7 div#item-2:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 13s !important; } .gallery.item-7 div#item-2:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-7 div#item-2:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 18s !important; } .gallery.item-7 div#item-2:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-7 div#item-2:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 23s !important; } .gallery.item-7 div#item-2:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-7 div#item-2:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 28s !important; } .gallery.item-7 div#item-2:target ~ .banner-slides .item { animation: galleryAnimation-7-target2 35s infinite; } .gallery.item-7 div#item-2:target ~ .controls-banner .control-button { animation: controlAnimation-7-target2 35s infinite; } /* set animation delay when click #item-3 */ .gallery.item-7 div#item-3:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-7 div#item-3:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: -2s !important; } .gallery.item-7 div#item-3:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-7 div#item-3:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 3s !important; } .gallery.item-7 div#item-3:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-7 div#item-3:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 8s !important; } .gallery.item-7 div#item-3:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-7 div#item-3:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 13s !important; } .gallery.item-7 div#item-3:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-7 div#item-3:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 18s !important; } .gallery.item-7 div#item-3:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-7 div#item-3:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 23s !important; } .gallery.item-7 div#item-3:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-7 div#item-3:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 28s !important; } .gallery.item-7 div#item-3:target ~ .banner-slides .item { animation: galleryAnimation-7-target3 35s infinite; } .gallery.item-7 div#item-3:target ~ .controls-banner .control-button { animation: controlAnimation-7-target3 35s infinite; } /* set animation delay when click #item-4 */ .gallery.item-7 div#item-4:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-7 div#item-4:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: -2s !important; } .gallery.item-7 div#item-4:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-7 div#item-4:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 3s !important; } .gallery.item-7 div#item-4:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-7 div#item-4:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 8s !important; } .gallery.item-7 div#item-4:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-7 div#item-4:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 13s !important; } .gallery.item-7 div#item-4:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-7 div#item-4:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 18s !important; } .gallery.item-7 div#item-4:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-7 div#item-4:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 23s !important; } .gallery.item-7 div#item-4:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-7 div#item-4:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 28s !important; } .gallery.item-7 div#item-4:target ~ .banner-slides .item { animation: galleryAnimation-7-target4 35s infinite; } .gallery.item-7 div#item-4:target ~ .controls-banner .control-button { animation: controlAnimation-7-target4 35s infinite; } /* set animation delay when click #item-5 */ .gallery.item-7 div#item-5:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-7 div#item-5:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: -2s !important; } .gallery.item-7 div#item-5:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-7 div#item-5:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 3s !important; } .gallery.item-7 div#item-5:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-7 div#item-5:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 8s !important; } .gallery.item-7 div#item-5:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-7 div#item-5:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 13s !important; } .gallery.item-7 div#item-5:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-7 div#item-5:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 18s !important; } .gallery.item-7 div#item-5:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-7 div#item-5:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 23s !important; } .gallery.item-7 div#item-5:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-7 div#item-5:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 28s !important; } .gallery.item-7 div#item-5:target ~ .banner-slides .item { animation: galleryAnimation-7-target5 35s infinite; } .gallery.item-7 div#item-5:target ~ .controls-banner .control-button { animation: controlAnimation-7-target5 35s infinite; } /* set animation delay when click #item-6 */ .gallery.item-7 div#item-6:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-7 div#item-6:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: -2s !important; } .gallery.item-7 div#item-6:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-7 div#item-6:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 3s !important; } .gallery.item-7 div#item-6:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-7 div#item-6:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 8s !important; } .gallery.item-7 div#item-6:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-7 div#item-6:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 13s !important; } .gallery.item-7 div#item-6:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-7 div#item-6:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 18s !important; } .gallery.item-7 div#item-6:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-7 div#item-6:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 23s !important; } .gallery.item-7 div#item-6:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-7 div#item-6:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 28s !important; } .gallery.item-7 div#item-6:target ~ .banner-slides .item { animation: galleryAnimation-7-target6 35s infinite; } .gallery.item-7 div#item-6:target ~ .controls-banner .control-button { animation: controlAnimation-7-target6 35s infinite; } /* set animation delay when click #item-7 */ .gallery.item-7 div#item-7:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-7 div#item-7:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: -2s !important; } .gallery.item-7 div#item-7:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-7 div#item-7:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 3s !important; } .gallery.item-7 div#item-7:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-7 div#item-7:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 8s !important; } .gallery.item-7 div#item-7:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-7 div#item-7:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 13s !important; } .gallery.item-7 div#item-7:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-7 div#item-7:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 18s !important; } .gallery.item-7 div#item-7:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-7 div#item-7:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 23s !important; } .gallery.item-7 div#item-7:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-7 div#item-7:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 28s !important; } .gallery.item-7 div#item-7:target ~ .banner-slides .item { animation: galleryAnimation-7-target7 35s infinite; } .gallery.item-7 div#item-7:target ~ .controls-banner .control-button { animation: controlAnimation-7-target7 35s infinite; } /************* BANNER HAVE 8 IMAGES *****************/ @-webkit-keyframes controlAnimation-8 { 0% { background: rgba(255, 255, 255, 0.5); } 3.6%, 12.5% { background: rgba(255, 255, 255, 1); } 16.1%, 100% { background: rgba(255, 255, 255, 0.5); } } @-o-keyframes controlAnimation-8 { 0% { background: rgba(255, 255, 255, 0.5); } 3.6%, 12.5% { background: rgba(255, 255, 255, 1); } 16.1%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-8 { 0% { background: rgba(255, 255, 255, 0.5); } 3.6%, 12.5% { background: rgba(255, 255, 255, 1); } 16.1%, 100% { background: rgba(255, 255, 255, 0.5); } } @-webkit-keyframes galleryAnimation-8 { 0% { opacity: 0; } 3.6%, 12.5% { opacity: 1; } 16.1%, 100% { opacity: 0; } } @-o-keyframes galleryAnimation-8 { 0% { opacity: 0; } 3.6%, 12.5% { opacity: 1; } 16.1%, 100% { opacity: 0; } } @keyframes galleryAnimation-8 { 0% { opacity: 0; } 3.6%, 12.5% { opacity: 1; } 16.1%, 100% { opacity: 0; } } .gallery.item-8 .controls-banner .control-button { -webkit-animation: controlAnimation-8 40s infinite; -o-animation: controlAnimation-8 40s infinite; animation: controlAnimation-8 40s infinite; } .gallery.item-8 .banner-slides .item { -webkit-animation: galleryAnimation-8 40s infinite; -o-animation: galleryAnimation-8 40s infinite; animation: galleryAnimation-8 40s infinite; } /* click item */ @keyframes controlAnimation-8-target { 0%,3.6% { background: rgba(255, 255, 255, 0.5); } 3.6%, 12.5% { background: rgba(255, 255, 255, 1); } 16.1%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-8-target2 { 0%,3.6% { background: rgba(255, 255, 255, 0.5); } 3.6%, 12.5% { background: rgba(255, 255, 255, 1); } 16.1%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-8-target3 { 0%,3.6% { background: rgba(255, 255, 255, 0.5); } 3.6%, 12.5% { background: rgba(255, 255, 255, 1); } 16.1%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-8-target4 { 0%,3.6% { background: rgba(255, 255, 255, 0.5); } 3.6%, 12.5% { background: rgba(255, 255, 255, 1); } 16.1%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-8-target5 { 0%,3.6% { background: rgba(255, 255, 255, 0.5); } 3.6%, 12.5% { background: rgba(255, 255, 255, 1); } 16.1%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-8-target6 { 0%,3.6% { background: rgba(255, 255, 255, 0.5); } 3.6%, 12.5% { background: rgba(255, 255, 255, 1); } 16.1%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-8-target7 { 0%,3.6% { background: rgba(255, 255, 255, 0.5); } 3.6%, 12.5% { background: rgba(255, 255, 255, 1); } 16.1%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-8-target8 { 0%,3.6% { background: rgba(255, 255, 255, 0.5); } 3.6%, 12.5% { background: rgba(255, 255, 255, 1); } 16.1%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes galleryAnimation-8-target{ 0%,3.6% { opacity: 0; } 3.6%, 12.5% { opacity: 1; } 16.1%, 100% { opacity: 0; } } @keyframes galleryAnimation-8-target2{ 0%,3.6% { opacity: 0; } 3.6%, 12.5% { opacity: 1; } 16.1%, 100% { opacity: 0; } } @keyframes galleryAnimation-8-target3{ 0%,3.6% { opacity: 0; } 3.6%, 12.5% { opacity: 1; } 16.1%, 100% { opacity: 0; } } @keyframes galleryAnimation-8-target4{ 0%,3.6% { opacity: 0; } 3.6%, 12.5% { opacity: 1; } 16.1%, 100% { opacity: 0; } } @keyframes galleryAnimation-8-target5{ 0%,3.6% { opacity: 0; } 3.6%, 12.5% { opacity: 1; } 16.1%, 100% { opacity: 0; } } @keyframes galleryAnimation-8-target6{ 0%,3.6% { opacity: 0; } 3.6%, 12.5% { opacity: 1; } 16.1%, 100% { opacity: 0; } } @keyframes galleryAnimation-8-target7{ 0%,3.6% { opacity: 0; } 3.6%, 12.5% { opacity: 1; } 16.1%, 100% { opacity: 0; } } @keyframes galleryAnimation-8-target8{ 0%,3.6% { opacity: 0; } 3.6%, 12.5% { opacity: 1; } 16.1%, 100% { opacity: 0; } } .gallery.item-8 div#item-1:target ~ .banner-slides .item { animation: galleryAnimation-8-target 40s infinite; } .gallery.item-8 div#item-1:target ~ .controls-banner .control-button { animation: controlAnimation-8-target 40s infinite; } /* set animation delay when click #item-2 */ .gallery.item-8 div#item-2:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-8 div#item-2:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: -2s !important; } .gallery.item-8 div#item-2:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-8 div#item-2:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 3s !important; } .gallery.item-8 div#item-2:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-8 div#item-2:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 8s !important; } .gallery.item-8 div#item-2:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-8 div#item-2:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 13s !important; } .gallery.item-8 div#item-2:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-8 div#item-2:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 18s !important; } .gallery.item-8 div#item-2:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-8 div#item-2:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 23s !important; } .gallery.item-8 div#item-2:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-8 div#item-2:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 28s !important; } .gallery.item-8 div#item-2:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-8 div#item-2:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 33s !important; } .gallery.item-8 div#item-2:target ~ .banner-slides .item { animation: galleryAnimation-8-target2 40s infinite; } .gallery.item-8 div#item-2:target ~ .controls-banner .control-button { animation: controlAnimation-8-target2 40s infinite; } /* set animation delay when click #item-3 */ .gallery.item-8 div#item-3:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-8 div#item-3:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: -2s !important; } .gallery.item-8 div#item-3:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-8 div#item-3:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 3s !important; } .gallery.item-8 div#item-3:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-8 div#item-3:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 8s !important; } .gallery.item-8 div#item-3:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-8 div#item-3:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 13s !important; } .gallery.item-8 div#item-3:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-8 div#item-3:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 18s !important; } .gallery.item-8 div#item-3:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-8 div#item-3:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 23s !important; } .gallery.item-8 div#item-3:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-8 div#item-3:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 28s !important; } .gallery.item-8 div#item-3:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-8 div#item-3:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 33s !important; } .gallery.item-8 div#item-3:target ~ .banner-slides .item { animation: galleryAnimation-8-target3 40s infinite; } .gallery.item-8 div#item-3:target ~ .controls-banner .control-button { animation: controlAnimation-8-target3 40s infinite; } /* set animation delay when click #item-4 */ .gallery.item-8 div#item-4:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-8 div#item-4:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: -2s !important; } .gallery.item-8 div#item-4:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-8 div#item-4:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 3s !important; } .gallery.item-8 div#item-4:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-8 div#item-4:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 8s !important; } .gallery.item-8 div#item-4:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-8 div#item-4:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 13s !important; } .gallery.item-8 div#item-4:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-8 div#item-4:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 18s !important; } .gallery.item-8 div#item-4:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-8 div#item-4:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 23s !important; } .gallery.item-8 div#item-4:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-8 div#item-4:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 28s !important; } .gallery.item-8 div#item-4:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-8 div#item-4:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 33s !important; } .gallery.item-8 div#item-4:target ~ .banner-slides .item { animation: galleryAnimation-8-target4 40s infinite; } .gallery.item-8 div#item-4:target ~ .controls-banner .control-button { animation: controlAnimation-8-target4 40s infinite; } /* set animation delay when click #item-5 */ .gallery.item-8 div#item-5:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-8 div#item-5:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: -2s !important; } .gallery.item-8 div#item-5:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-8 div#item-5:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 3s !important; } .gallery.item-8 div#item-5:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-8 div#item-5:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 8s !important; } .gallery.item-8 div#item-5:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-8 div#item-5:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 13s !important; } .gallery.item-8 div#item-5:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-8 div#item-5:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 18s !important; } .gallery.item-8 div#item-5:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-8 div#item-5:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 23s !important; } .gallery.item-8 div#item-5:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-8 div#item-5:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 28s !important; } .gallery.item-8 div#item-5:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-8 div#item-5:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 33s !important; } .gallery.item-8 div#item-5:target ~ .banner-slides .item { animation: galleryAnimation-8-target5 40s infinite; } .gallery.item-8 div#item-5:target ~ .controls-banner .control-button { animation: controlAnimation-8-target5 40s infinite; } /* set animation delay when click #item-6 */ .gallery.item-8 div#item-6:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-8 div#item-6:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: -2s !important; } .gallery.item-8 div#item-6:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-8 div#item-6:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 3s !important; } .gallery.item-8 div#item-6:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-8 div#item-6:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 8s !important; } .gallery.item-8 div#item-6:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-8 div#item-6:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 13s !important; } .gallery.item-8 div#item-6:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-8 div#item-6:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 18s !important; } .gallery.item-8 div#item-6:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-8 div#item-6:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 23s !important; } .gallery.item-8 div#item-6:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-8 div#item-6:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 28s !important; } .gallery.item-8 div#item-6:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-8 div#item-6:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 33s !important; } .gallery.item-8 div#item-6:target ~ .banner-slides .item { animation: galleryAnimation-8-target6 40s infinite; } .gallery.item-8 div#item-6:target ~ .controls-banner .control-button { animation: controlAnimation-8-target6 40s infinite; } /* set animation delay when click #item-7 */ .gallery.item-8 div#item-7:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-8 div#item-7:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: -2s !important; } .gallery.item-8 div#item-7:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-8 div#item-7:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 3s !important; } .gallery.item-8 div#item-7:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-8 div#item-7:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 8s !important; } .gallery.item-8 div#item-7:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-8 div#item-7:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 13s !important; } .gallery.item-8 div#item-7:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-8 div#item-7:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 18s !important; } .gallery.item-8 div#item-7:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-8 div#item-7:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 23s !important; } .gallery.item-8 div#item-7:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-8 div#item-7:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 28s !important; } .gallery.item-8 div#item-7:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-8 div#item-7:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 33s !important; } .gallery.item-8 div#item-7:target ~ .banner-slides .item { animation: galleryAnimation-8-target7 40s infinite; } .gallery.item-8 div#item-7:target ~ .controls-banner .control-button { animation: controlAnimation-8-target7 40s infinite; } /* set animation delay when click #item-8 */ .gallery.item-8 div#item-8:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-8 div#item-8:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: -2s !important; } .gallery.item-8 div#item-8:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-8 div#item-8:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 3s !important; } .gallery.item-8 div#item-8:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-8 div#item-8:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 8s !important; } .gallery.item-8 div#item-8:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-8 div#item-8:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 13s !important; } .gallery.item-8 div#item-8:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-8 div#item-8:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 18s !important; } .gallery.item-8 div#item-8:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-8 div#item-8:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 23s !important; } .gallery.item-8 div#item-8:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-8 div#item-8:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 28s !important; } .gallery.item-8 div#item-8:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-8 div#item-8:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 33s !important; } .gallery.item-8 div#item-8:target ~ .banner-slides .item { animation: galleryAnimation-8-target8 40s infinite; } .gallery.item-8 div#item-8:target ~ .controls-banner .control-button { animation: controlAnimation-8-target8 40s infinite; } /************* BANNER HAVE 9 IMAGES *****************/ @-webkit-keyframes controlAnimation-9 { 0% { background: rgba(255, 255, 255, 0.5); } 3.17%, 11.11% { background: rgba(255, 255, 255, 1); } 14.28%, 100% { background: rgba(255, 255, 255, 0.5); } } @-o-keyframes controlAnimation-9 { 0% { background: rgba(255, 255, 255, 0.5); } 3.17%, 11.11% { background: rgba(255, 255, 255, 1); } 14.28%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-9 { 0% { background: rgba(255, 255, 255, 0.5); } 3.17%, 11.11% { background: rgba(255, 255, 255, 1); } 14.28%, 100% { background: rgba(255, 255, 255, 0.5); } } @-webkit-keyframes galleryAnimation-9 { 0% { opacity: 0; } 3.17%, 11.11% { opacity: 1; } 14.28%, 100% { opacity: 0; } } @-o-keyframes galleryAnimation-9 { 0% { opacity: 0; } 3.17%, 11.11% { opacity: 1; } 14.28%, 100% { opacity: 0; } } @keyframes galleryAnimation-9 { 0% { opacity: 0; } 3.17%, 11.11% { opacity: 1; } 14.28%, 100% { opacity: 0; } } .gallery.item-9 .controls-banner .control-button { -webkit-animation: controlAnimation-9 45s infinite; -o-animation: controlAnimation-9 45s infinite; animation: controlAnimation-9 45s infinite; } .gallery.item-9 .banner-slides .item { -webkit-animation: galleryAnimation-9 45s infinite; -o-animation: galleryAnimation-9 45s infinite; animation: galleryAnimation-9 45s infinite; } /* click item */ @keyframes controlAnimation-9-target { 0%,3.17% { background: rgba(255, 255, 255, 0.5); } 3.17%, 11.11% { background: rgba(255, 255, 255, 1); } 14.28%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-9-target2 { 0%,3.17% { background: rgba(255, 255, 255, 0.5); } 3.17%, 11.11% { background: rgba(255, 255, 255, 1); } 14.28%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-9-target3 { 0%,3.17% { background: rgba(255, 255, 255, 0.5); } 3.17%, 11.11% { background: rgba(255, 255, 255, 1); } 14.28%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-9-target4 { 0%,3.17% { background: rgba(255, 255, 255, 0.5); } 3.17%, 11.11% { background: rgba(255, 255, 255, 1); } 14.28%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-9-target5 { 0%,3.17% { background: rgba(255, 255, 255, 0.5); } 3.17%, 11.11% { background: rgba(255, 255, 255, 1); } 14.28%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-9-target6 { 0%,3.17% { background: rgba(255, 255, 255, 0.5); } 3.17%, 11.11% { background: rgba(255, 255, 255, 1); } 14.28%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-9-target7 { 0%,3.17% { background: rgba(255, 255, 255, 0.5); } 3.17%, 11.11% { background: rgba(255, 255, 255, 1); } 14.28%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-9-target8 { 0%,3.17% { background: rgba(255, 255, 255, 0.5); } 3.17%, 11.11% { background: rgba(255, 255, 255, 1); } 14.28%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-9-target9 { 0%,3.17% { background: rgba(255, 255, 255, 0.5); } 3.17%, 11.11% { background: rgba(255, 255, 255, 1); } 14.28%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes galleryAnimation-9-target{ 0%,3.17% { opacity: 0; } 3.17%, 11.11% { opacity: 1; } 14.28%, 100% { opacity: 0; } } @keyframes galleryAnimation-9-target2{ 0%,3.17% { opacity: 0; } 3.17%, 11.11% { opacity: 1; } 14.28%, 100% { opacity: 0; } } @keyframes galleryAnimation-9-target3{ 0%,3.17% { opacity: 0; } 3.17%, 11.11% { opacity: 1; } 14.28%, 100% { opacity: 0; } } @keyframes galleryAnimation-9-target4{ 0%,3.17% { opacity: 0; } 3.17%, 11.11% { opacity: 1; } 14.28%, 100% { opacity: 0; } } @keyframes galleryAnimation-9-target5{ 0%,3.17% { opacity: 0; } 3.17%, 11.11% { opacity: 1; } 14.28%, 100% { opacity: 0; } } @keyframes galleryAnimation-9-target6{ 0%,3.17% { opacity: 0; } 3.17%, 11.11% { opacity: 1; } 14.28%, 100% { opacity: 0; } } @keyframes galleryAnimation-9-target7{ 0%,3.17% { opacity: 0; } 3.17%, 11.11% { opacity: 1; } 14.28%, 100% { opacity: 0; } } @keyframes galleryAnimation-9-target8{ 0%,3.17% { opacity: 0; } 3.17%, 11.11% { opacity: 1; } 14.28%, 100% { opacity: 0; } } @keyframes galleryAnimation-9-target9{ 0%,3.17% { opacity: 0; } 3.17%, 11.11% { opacity: 1; } 14.28%, 100% { opacity: 0; } } .gallery.item-9 div#item-1:target ~ .banner-slides .item { animation: galleryAnimation-9-target 45s infinite; } .gallery.item-9 div#item-1:target ~ .controls-banner .control-button { animation: controlAnimation-9-target 45s infinite; } /* set animation delay when click #item-2 */ .gallery.item-9 div#item-2:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-9 div#item-2:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: -2s !important; } .gallery.item-9 div#item-2:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-9 div#item-2:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 3s !important; } .gallery.item-9 div#item-2:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-9 div#item-2:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 8s !important; } .gallery.item-9 div#item-2:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-9 div#item-2:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 13s !important; } .gallery.item-9 div#item-2:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-9 div#item-2:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 18s !important; } .gallery.item-9 div#item-2:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-9 div#item-2:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 23s !important; } .gallery.item-9 div#item-2:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-9 div#item-2:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 28s !important; } .gallery.item-9 div#item-2:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-9 div#item-2:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 33s !important; } .gallery.item-9 div#item-2:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-9 div#item-2:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 38s !important; } .gallery.item-9 div#item-2:target ~ .banner-slides .item { animation: galleryAnimation-9-target2 45s infinite; } .gallery.item-9 div#item-2:target ~ .controls-banner .control-button { animation: controlAnimation-9-target2 45s infinite; } /* set animation delay when click #item-3 */ .gallery.item-9 div#item-3:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-9 div#item-3:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: -2s !important; } .gallery.item-9 div#item-3:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-9 div#item-3:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 3s !important; } .gallery.item-9 div#item-3:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-9 div#item-3:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 8s !important; } .gallery.item-9 div#item-3:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-9 div#item-3:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 13s !important; } .gallery.item-9 div#item-3:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-9 div#item-3:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 18s !important; } .gallery.item-9 div#item-3:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-9 div#item-3:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 23s !important; } .gallery.item-9 div#item-3:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-9 div#item-3:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 28s !important; } .gallery.item-9 div#item-3:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-9 div#item-3:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 33s !important; } .gallery.item-9 div#item-3:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-9 div#item-3:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 38s !important; } .gallery.item-9 div#item-3:target ~ .banner-slides .item { animation: galleryAnimation-9-target3 45s infinite; } .gallery.item-9 div#item-3:target ~ .controls-banner .control-button { animation: controlAnimation-9-target3 45s infinite; } /* set animation delay when click #item-4 */ .gallery.item-9 div#item-4:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-9 div#item-4:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: -2s !important; } .gallery.item-9 div#item-4:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-9 div#item-4:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 3s !important; } .gallery.item-9 div#item-4:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-9 div#item-4:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 8s !important; } .gallery.item-9 div#item-4:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-9 div#item-4:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 13s !important; } .gallery.item-9 div#item-4:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-9 div#item-4:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 18s !important; } .gallery.item-9 div#item-4:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-9 div#item-4:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 23s !important; } .gallery.item-9 div#item-4:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-9 div#item-4:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 28s !important; } .gallery.item-9 div#item-4:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-9 div#item-4:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 33s !important; } .gallery.item-9 div#item-4:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-9 div#item-4:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 38s !important; } .gallery.item-9 div#item-4:target ~ .banner-slides .item { animation: galleryAnimation-9-target4 45s infinite; } .gallery.item-9 div#item-4:target ~ .controls-banner .control-button { animation: controlAnimation-9-target4 45s infinite; } /* set animation delay when click #item-5 */ .gallery.item-9 div#item-5:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-9 div#item-5:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: -2s !important; } .gallery.item-9 div#item-5:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-9 div#item-5:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 3s !important; } .gallery.item-9 div#item-5:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-9 div#item-5:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 8s !important; } .gallery.item-9 div#item-5:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-9 div#item-5:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 13s !important; } .gallery.item-9 div#item-5:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-9 div#item-5:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 18s !important; } .gallery.item-9 div#item-5:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-9 div#item-5:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 23s !important; } .gallery.item-9 div#item-5:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-9 div#item-5:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 28s !important; } .gallery.item-9 div#item-5:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-9 div#item-5:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 33s !important; } .gallery.item-9 div#item-5:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-9 div#item-5:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 38s !important; } .gallery.item-9 div#item-5:target ~ .banner-slides .item { animation: galleryAnimation-9-target5 45s infinite; } .gallery.item-9 div#item-5:target ~ .controls-banner .control-button { animation: controlAnimation-9-target5 45s infinite; } /* set animation delay when click #item-6 */ .gallery.item-9 div#item-6:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-9 div#item-6:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: -2s !important; } .gallery.item-9 div#item-6:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-9 div#item-6:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 3s !important; } .gallery.item-9 div#item-6:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-9 div#item-6:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 8s !important; } .gallery.item-9 div#item-6:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-9 div#item-6:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 13s !important; } .gallery.item-9 div#item-6:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-9 div#item-6:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 18s !important; } .gallery.item-9 div#item-6:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-9 div#item-6:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 23s !important; } .gallery.item-9 div#item-6:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-9 div#item-6:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 28s !important; } .gallery.item-9 div#item-6:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-9 div#item-6:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 33s !important; } .gallery.item-9 div#item-6:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-9 div#item-6:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 38s !important; } .gallery.item-9 div#item-6:target ~ .banner-slides .item { animation: galleryAnimation-9-target6 45s infinite; } .gallery.item-9 div#item-6:target ~ .controls-banner .control-button { animation: controlAnimation-9-target6 45s infinite; } /* set animation delay when click #item-7 */ .gallery.item-9 div#item-7:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-9 div#item-7:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: -2s !important; } .gallery.item-9 div#item-7:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-9 div#item-7:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 3s !important; } .gallery.item-9 div#item-7:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-9 div#item-7:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 8s !important; } .gallery.item-9 div#item-7:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-9 div#item-7:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 13s !important; } .gallery.item-9 div#item-7:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-9 div#item-7:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 18s !important; } .gallery.item-9 div#item-7:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-9 div#item-7:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 23s !important; } .gallery.item-9 div#item-7:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-9 div#item-7:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 28s !important; } .gallery.item-9 div#item-7:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-9 div#item-7:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 33s !important; } .gallery.item-9 div#item-7:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-9 div#item-7:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 38s !important; } .gallery.item-9 div#item-7:target ~ .banner-slides .item { animation: galleryAnimation-9-target7 45s infinite; } .gallery.item-9 div#item-7:target ~ .controls-banner .control-button { animation: controlAnimation-9-target7 45s infinite; } /* set animation delay when click #item-8 */ .gallery.item-9 div#item-8:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-9 div#item-8:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: -2s !important; } .gallery.item-9 div#item-8:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-9 div#item-8:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 3s !important; } .gallery.item-9 div#item-8:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-9 div#item-8:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 8s !important; } .gallery.item-9 div#item-8:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-9 div#item-8:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 13s !important; } .gallery.item-9 div#item-8:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-9 div#item-8:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 18s !important; } .gallery.item-9 div#item-8:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-9 div#item-8:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 23s !important; } .gallery.item-9 div#item-8:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-9 div#item-8:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 28s !important; } .gallery.item-9 div#item-8:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-9 div#item-8:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 33s !important; } .gallery.item-9 div#item-8:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-9 div#item-8:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 38s !important; } .gallery.item-9 div#item-8:target ~ .banner-slides .item { animation: galleryAnimation-9-target8 45s infinite; } .gallery.item-9 div#item-8:target ~ .controls-banner .control-button { animation: controlAnimation-9-target8 45s infinite; } /* set animation delay when click #item-9 */ .gallery.item-9 div#item-9:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-9 div#item-9:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: -2s !important; } .gallery.item-9 div#item-9:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-9 div#item-9:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 3s !important; } .gallery.item-9 div#item-9:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-9 div#item-9:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 8s !important; } .gallery.item-9 div#item-9:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-9 div#item-9:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 13s !important; } .gallery.item-9 div#item-9:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-9 div#item-9:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 18s !important; } .gallery.item-9 div#item-9:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-9 div#item-9:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 23s !important; } .gallery.item-9 div#item-9:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-9 div#item-9:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 28s !important; } .gallery.item-9 div#item-9:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-9 div#item-9:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 33s !important; } .gallery.item-9 div#item-9:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-9 div#item-9:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 38s !important; } .gallery.item-9 div#item-9:target ~ .banner-slides .item { animation: galleryAnimation-9-target9 45s infinite; } .gallery.item-9 div#item-9:target ~ .controls-banner .control-button { animation: controlAnimation-9-target9 45s infinite; } /************* BANNER HAVE 10 IMAGES *****************/ @-webkit-keyframes controlAnimation-10 { 0% { background: rgba(255, 255, 255, 0.5); } 2.85%, 10% { background: rgba(255, 255, 255, 1); } 12.85%, 100% { background: rgba(255, 255, 255, 0.5); } } @-o-keyframes controlAnimation-10 { 0% { background: rgba(255, 255, 255, 0.5); } 2.85%, 10% { background: rgba(255, 255, 255, 1); } 12.85%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-10 { 0% { background: rgba(255, 255, 255, 0.5); } 2.85%, 10% { background: rgba(255, 255, 255, 1); } 12.85%, 100% { background: rgba(255, 255, 255, 0.5); } } @-webkit-keyframes galleryAnimation-10 { 0% { opacity: 0; } 2.85%, 10% { opacity: 1; } 12.85%, 100% { opacity: 0; } } @-o-keyframes galleryAnimation-10 { 0% { opacity: 0; } 2.85%, 10% { opacity: 1; } 12.85%, 100% { opacity: 0; } } @keyframes galleryAnimation-10 { 0% { opacity: 0; } 2.85%, 10% { opacity: 1; } 12.85%, 100% { opacity: 0; } } .gallery.item-10 .controls-banner .control-button { -webkit-animation: controlAnimation-10 50s infinite; -o-animation: controlAnimation-10 50s infinite; animation: controlAnimation-10 50s infinite; } .gallery.item-10 .banner-slides .item { -webkit-animation: galleryAnimation-10 50s infinite; -o-animation: galleryAnimation-10 50s infinite; animation: galleryAnimation-10 50s infinite; } /* click item */ @keyframes controlAnimation-10-target { 0%,2.85% { background: rgba(255, 255, 255, 0.5); } 2.85%, 10% { background: rgba(255, 255, 255, 1); } 12.85%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-10-target2 { 0%,2.85% { background: rgba(255, 255, 255, 0.5); } 2.85%, 10% { background: rgba(255, 255, 255, 1); } 12.85%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-10-target3 { 0%,2.85% { background: rgba(255, 255, 255, 0.5); } 2.85%, 10% { background: rgba(255, 255, 255, 1); } 12.85%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-10-target4 { 0%,2.85% { background: rgba(255, 255, 255, 0.5); } 2.85%, 10% { background: rgba(255, 255, 255, 1); } 12.85%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-10-target5 { 0%,2.85% { background: rgba(255, 255, 255, 0.5); } 2.85%, 10% { background: rgba(255, 255, 255, 1); } 12.85%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-10-target6 { 0%,2.85% { background: rgba(255, 255, 255, 0.5); } 2.85%, 10% { background: rgba(255, 255, 255, 1); } 12.85%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-10-target7 { 0%,2.85% { background: rgba(255, 255, 255, 0.5); } 2.85%, 10% { background: rgba(255, 255, 255, 1); } 12.85%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-10-target8 { 0%,2.85% { background: rgba(255, 255, 255, 0.5); } 2.85%, 10% { background: rgba(255, 255, 255, 1); } 12.85%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-10-target9 { 0%,2.85% { background: rgba(255, 255, 255, 0.5); } 2.85%, 10% { background: rgba(255, 255, 255, 1); } 12.85%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-10-target10 { 0%,2.85% { background: rgba(255, 255, 255, 0.5); } 2.85%, 10% { background: rgba(255, 255, 255, 1); } 12.85%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes galleryAnimation-10-target{ 0%,2.85% { opacity: 0; } 2.85%, 10% { opacity: 1; } 12.85%, 100% { opacity: 0; } } @keyframes galleryAnimation-10-target2{ 0%,2.85% { opacity: 0; } 2.85%, 10% { opacity: 1; } 12.85%, 100% { opacity: 0; } } @keyframes galleryAnimation-10-target3{ 0%,2.85% { opacity: 0; } 2.85%, 10% { opacity: 1; } 12.85%, 100% { opacity: 0; } } @keyframes galleryAnimation-10-target4{ 0%,2.85% { opacity: 0; } 2.85%, 10% { opacity: 1; } 12.85%, 100% { opacity: 0; } } @keyframes galleryAnimation-10-target5{ 0%,2.85% { opacity: 0; } 2.85%, 10% { opacity: 1; } 12.85%, 100% { opacity: 0; } } @keyframes galleryAnimation-10-target6{ 0%,2.85% { opacity: 0; } 2.85%, 10% { opacity: 1; } 12.85%, 100% { opacity: 0; } } @keyframes galleryAnimation-10-target7{ 0%,2.85% { opacity: 0; } 2.85%, 10% { opacity: 1; } 12.85%, 100% { opacity: 0; } } @keyframes galleryAnimation-10-target8{ 0%,2.85% { opacity: 0; } 2.85%, 10% { opacity: 1; } 12.85%, 100% { opacity: 0; } } @keyframes galleryAnimation-10-target9{ 0%,2.85% { opacity: 0; } 2.85%, 10% { opacity: 1; } 12.85%, 100% { opacity: 0; } } @keyframes galleryAnimation-10-target10{ 0%,2.85% { opacity: 0; } 2.85%, 10% { opacity: 1; } 12.85%, 100% { opacity: 0; } } .gallery.item-10 div#item-1:target ~ .banner-slides .item { animation: galleryAnimation-10-target 50s infinite; } .gallery.item-10 div#item-1:target ~ .controls-banner .control-button { animation: controlAnimation-10-target 50s infinite; } /* set animation delay when click #item-2 */ .gallery.item-10 div#item-2:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-10 div#item-2:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: -2s !important; } .gallery.item-10 div#item-2:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-10 div#item-2:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 3s !important; } .gallery.item-10 div#item-2:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-10 div#item-2:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 8s !important; } .gallery.item-10 div#item-2:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-10 div#item-2:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 13s !important; } .gallery.item-10 div#item-2:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-10 div#item-2:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 18s !important; } .gallery.item-10 div#item-2:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-10 div#item-2:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 23s !important; } .gallery.item-10 div#item-2:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-10 div#item-2:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 28s !important; } .gallery.item-10 div#item-2:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-10 div#item-2:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 33s !important; } .gallery.item-10 div#item-2:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-10 div#item-2:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 38s !important; } .gallery.item-10 div#item-2:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-10 div#item-2:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 43s !important; } .gallery.item-10 div#item-2:target ~ .banner-slides .item { animation: galleryAnimation-10-target2 50s infinite; } .gallery.item-10 div#item-2:target ~ .controls-banner .control-button { animation: controlAnimation-10-target2 50s infinite; } /* set animation delay when click #item-3 */ .gallery.item-10 div#item-3:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-10 div#item-3:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: -2s !important; } .gallery.item-10 div#item-3:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-10 div#item-3:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 3s !important; } .gallery.item-10 div#item-3:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-10 div#item-3:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 8s !important; } .gallery.item-10 div#item-3:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-10 div#item-3:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 13s !important; } .gallery.item-10 div#item-3:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-10 div#item-3:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 18s !important; } .gallery.item-10 div#item-3:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-10 div#item-3:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 23s !important; } .gallery.item-10 div#item-3:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-10 div#item-3:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 28s !important; } .gallery.item-10 div#item-3:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-10 div#item-3:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 33s !important; } .gallery.item-10 div#item-3:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-10 div#item-3:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 38s !important; } .gallery.item-10 div#item-3:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-10 div#item-3:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 43s !important; } .gallery.item-10 div#item-3:target ~ .banner-slides .item { animation: galleryAnimation-10-target3 50s infinite; } .gallery.item-10 div#item-3:target ~ .controls-banner .control-button { animation: controlAnimation-10-target3 50s infinite; } /* set animation delay when click #item-4 */ .gallery.item-10 div#item-4:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-10 div#item-4:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: -2s !important; } .gallery.item-10 div#item-4:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-10 div#item-4:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 3s !important; } .gallery.item-10 div#item-4:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-10 div#item-4:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 8s !important; } .gallery.item-10 div#item-4:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-10 div#item-4:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 13s !important; } .gallery.item-10 div#item-4:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-10 div#item-4:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 18s !important; } .gallery.item-10 div#item-4:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-10 div#item-4:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 23s !important; } .gallery.item-10 div#item-4:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-10 div#item-4:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 28s !important; } .gallery.item-10 div#item-4:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-10 div#item-4:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 33s !important; } .gallery.item-10 div#item-4:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-10 div#item-4:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 38s !important; } .gallery.item-10 div#item-4:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-10 div#item-4:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 43s !important; } .gallery.item-10 div#item-4:target ~ .banner-slides .item { animation: galleryAnimation-10-target4 50s infinite; } .gallery.item-10 div#item-4:target ~ .controls-banner .control-button { animation: controlAnimation-10-target4 50s infinite; } /* set animation delay when click #item-5 */ .gallery.item-10 div#item-5:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-10 div#item-5:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: -2s !important; } .gallery.item-10 div#item-5:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-10 div#item-5:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 3s !important; } .gallery.item-10 div#item-5:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-10 div#item-5:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 8s !important; } .gallery.item-10 div#item-5:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-10 div#item-5:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 13s !important; } .gallery.item-10 div#item-5:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-10 div#item-5:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 18s !important; } .gallery.item-10 div#item-5:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-10 div#item-5:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 23s !important; } .gallery.item-10 div#item-5:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-10 div#item-5:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 28s !important; } .gallery.item-10 div#item-5:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-10 div#item-5:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 33s !important; } .gallery.item-10 div#item-5:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-10 div#item-5:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 38s !important; } .gallery.item-10 div#item-5:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-10 div#item-5:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 43s !important; } .gallery.item-10 div#item-5:target ~ .banner-slides .item { animation: galleryAnimation-10-target5 50s infinite; } .gallery.item-10 div#item-5:target ~ .controls-banner .control-button { animation: controlAnimation-10-target5 50s infinite; } /* set animation delay when click #item-6 */ .gallery.item-10 div#item-6:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-10 div#item-6:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: -2s !important; } .gallery.item-10 div#item-6:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-10 div#item-6:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 3s !important; } .gallery.item-10 div#item-6:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-10 div#item-6:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 8s !important; } .gallery.item-10 div#item-6:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-10 div#item-6:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 13s !important; } .gallery.item-10 div#item-6:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-10 div#item-6:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 18s !important; } .gallery.item-10 div#item-6:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-10 div#item-6:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 23s !important; } .gallery.item-10 div#item-6:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-10 div#item-6:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 28s !important; } .gallery.item-10 div#item-6:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-10 div#item-6:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 33s !important; } .gallery.item-10 div#item-6:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-10 div#item-6:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 38s !important; } .gallery.item-10 div#item-6:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-10 div#item-6:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 43s !important; } .gallery.item-10 div#item-6:target ~ .banner-slides .item { animation: galleryAnimation-10-target6 50s infinite; } .gallery.item-10 div#item-6:target ~ .controls-banner .control-button { animation: controlAnimation-10-target6 50s infinite; } /* set animation delay when click #item-7 */ .gallery.item-10 div#item-7:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-10 div#item-7:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: -2s !important; } .gallery.item-10 div#item-7:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-10 div#item-7:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 3s !important; } .gallery.item-10 div#item-7:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-10 div#item-7:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 8s !important; } .gallery.item-10 div#item-7:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-10 div#item-7:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 13s !important; } .gallery.item-10 div#item-7:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-10 div#item-7:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 18s !important; } .gallery.item-10 div#item-7:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-10 div#item-7:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 23s !important; } .gallery.item-10 div#item-7:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-10 div#item-7:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 28s !important; } .gallery.item-10 div#item-7:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-10 div#item-7:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 33s !important; } .gallery.item-10 div#item-7:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-10 div#item-7:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 38s !important; } .gallery.item-10 div#item-7:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-10 div#item-7:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 43s !important; } .gallery.item-10 div#item-7:target ~ .banner-slides .item { animation: galleryAnimation-10-target7 50s infinite; } .gallery.item-10 div#item-7:target ~ .controls-banner .control-button { animation: controlAnimation-10-target7 50s infinite; } /* set animation delay when click #item-8 */ .gallery.item-10 div#item-8:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-10 div#item-8:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: -2s !important; } .gallery.item-10 div#item-8:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-10 div#item-8:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 3s !important; } .gallery.item-10 div#item-8:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-10 div#item-8:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 8s !important; } .gallery.item-10 div#item-8:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-10 div#item-8:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 13s !important; } .gallery.item-10 div#item-8:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-10 div#item-8:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 18s !important; } .gallery.item-10 div#item-8:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-10 div#item-8:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 23s !important; } .gallery.item-10 div#item-8:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-10 div#item-8:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 28s !important; } .gallery.item-10 div#item-8:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-10 div#item-8:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 33s !important; } .gallery.item-10 div#item-8:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-10 div#item-8:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 38s !important; } .gallery.item-10 div#item-8:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-10 div#item-8:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 43s !important; } .gallery.item-10 div#item-8:target ~ .banner-slides .item { animation: galleryAnimation-10-target8 50s infinite; } .gallery.item-10 div#item-8:target ~ .controls-banner .control-button { animation: controlAnimation-10-target8 50s infinite; } /* set animation delay when click #item-9 */ .gallery.item-10 div#item-9:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-10 div#item-9:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: -2s !important; } .gallery.item-10 div#item-9:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-10 div#item-9:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 3s !important; } .gallery.item-10 div#item-9:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-10 div#item-9:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 8s !important; } .gallery.item-10 div#item-9:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-10 div#item-9:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 13s !important; } .gallery.item-10 div#item-9:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-10 div#item-9:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 18s !important; } .gallery.item-10 div#item-9:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-10 div#item-9:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 23s !important; } .gallery.item-10 div#item-9:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-10 div#item-9:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 28s !important; } .gallery.item-10 div#item-9:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-10 div#item-9:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 33s !important; } .gallery.item-10 div#item-9:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-10 div#item-9:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 38s !important; } .gallery.item-10 div#item-9:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-10 div#item-9:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 43s !important; } .gallery.item-10 div#item-9:target ~ .banner-slides .item { animation: galleryAnimation-10-target9 50s infinite; } .gallery.item-10 div#item-9:target ~ .controls-banner .control-button { animation: controlAnimation-10-target9 50s infinite; } /* set animation delay when click #item-10 */ .gallery.item-10 div#item-10:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-10 div#item-10:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: -2s !important; } .gallery.item-10 div#item-10:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-10 div#item-10:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 3s !important; } .gallery.item-10 div#item-10:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-10 div#item-10:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 8s !important; } .gallery.item-10 div#item-10:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-10 div#item-10:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 13s !important; } .gallery.item-10 div#item-10:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-10 div#item-10:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 18s !important; } .gallery.item-10 div#item-10:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-10 div#item-10:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 23s !important; } .gallery.item-10 div#item-10:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-10 div#item-10:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 28s !important; } .gallery.item-10 div#item-10:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-10 div#item-10:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 33s !important; } .gallery.item-10 div#item-10:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-10 div#item-10:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 38s !important; } .gallery.item-10 div#item-10:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-10 div#item-10:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 43s !important; } .gallery.item-10 div#item-10:target ~ .banner-slides .item { animation: galleryAnimation-10-target10 50s infinite; } .gallery.item-10 div#item-10:target ~ .controls-banner .control-button { animation: controlAnimation-10-target10 50s infinite; } /************* BANNER HAVE 11 IMAGES *****************/ @-webkit-keyframes controlAnimation-11 { 0% { background: rgba(255, 255, 255, 0.5); } 2.6%, 9.1% { background: rgba(255, 255, 255, 1); } 11.7%, 100% { background: rgba(255, 255, 255, 0.5); } } @-o-keyframes controlAnimation-11 { 0% { background: rgba(255, 255, 255, 0.5); } 2.6%, 9.1% { background: rgba(255, 255, 255, 1); } 11.7%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-11 { 0% { background: rgba(255, 255, 255, 0.5); } 2.6%, 9.1% { background: rgba(255, 255, 255, 1); } 11.7%, 100% { background: rgba(255, 255, 255, 0.5); } } @-webkit-keyframes galleryAnimation-11 { 0% { opacity: 0; } 2.6%, 9.1% { opacity: 1; } 11.7%, 100% { opacity: 0; } } @-o-keyframes galleryAnimation-11 { 0% { opacity: 0; } 2.6%, 9.1% { opacity: 1; } 11.7%, 100% { opacity: 0; } } @keyframes galleryAnimation-11 { 0% { opacity: 0; } 2.6%, 9.1% { opacity: 1; } 11.7%, 100% { opacity: 0; } } .gallery.item-11 .controls-banner .control-button { -webkit-animation: controlAnimation-11 55s infinite; -o-animation: controlAnimation-11 55s infinite; animation: controlAnimation-11 55s infinite; } .gallery.item-11 .banner-slides .item { -webkit-animation: galleryAnimation-11 55s infinite; -o-animation: galleryAnimation-11 55s infinite; animation: galleryAnimation-11 55s infinite; } /* click item */ @keyframes controlAnimation-11-target { 0%,2.6% { background: rgba(255, 255, 255, 0.5); } 2.6%, 9.1% { background: rgba(255, 255, 255, 1); } 11.7%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-11-target2 { 0%,2.6% { background: rgba(255, 255, 255, 0.5); } 2.6%, 9.1% { background: rgba(255, 255, 255, 1); } 11.7%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-11-target3 { 0%,2.6% { background: rgba(255, 255, 255, 0.5); } 2.6%, 9.1% { background: rgba(255, 255, 255, 1); } 11.7%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-11-target4 { 0%,2.6% { background: rgba(255, 255, 255, 0.5); } 2.6%, 9.1% { background: rgba(255, 255, 255, 1); } 11.7%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-11-target5 { 0%,2.6% { background: rgba(255, 255, 255, 0.5); } 2.6%, 9.1% { background: rgba(255, 255, 255, 1); } 11.7%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-11-target6 { 0%,2.6% { background: rgba(255, 255, 255, 0.5); } 2.6%, 9.1% { background: rgba(255, 255, 255, 1); } 11.7%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-11-target7 { 0%,2.6% { background: rgba(255, 255, 255, 0.5); } 2.6%, 9.1% { background: rgba(255, 255, 255, 1); } 11.7%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-11-target8 { 0%,2.6% { background: rgba(255, 255, 255, 0.5); } 2.6%, 9.1% { background: rgba(255, 255, 255, 1); } 11.7%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-11-target9 { 0%,2.6% { background: rgba(255, 255, 255, 0.5); } 2.6%, 9.1% { background: rgba(255, 255, 255, 1); } 11.7%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-11-target10 { 0%,2.6% { background: rgba(255, 255, 255, 0.5); } 2.6%, 9.1% { background: rgba(255, 255, 255, 1); } 11.7%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-11-target11 { 0%,2.6% { background: rgba(255, 255, 255, 0.5); } 2.6%, 9.1% { background: rgba(255, 255, 255, 1); } 11.7%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes galleryAnimation-11-target{ 0%,2.6% { opacity: 0; } 2.6%, 9.1% { opacity: 1; } 11.7%, 100% { opacity: 0; } } @keyframes galleryAnimation-11-target2{ 0%,2.6% { opacity: 0; } 2.6%, 9.1% { opacity: 1; } 11.7%, 100% { opacity: 0; } } @keyframes galleryAnimation-11-target3{ 0%,2.6% { opacity: 0; } 2.6%, 9.1% { opacity: 1; } 11.7%, 100% { opacity: 0; } } @keyframes galleryAnimation-11-target4{ 0%,2.6% { opacity: 0; } 2.6%, 9.1% { opacity: 1; } 11.7%, 100% { opacity: 0; } } @keyframes galleryAnimation-11-target5{ 0%,2.6% { opacity: 0; } 2.6%, 9.1% { opacity: 1; } 11.7%, 100% { opacity: 0; } } @keyframes galleryAnimation-11-target6{ 0%,2.6% { opacity: 0; } 2.6%, 9.1% { opacity: 1; } 11.7%, 100% { opacity: 0; } } @keyframes galleryAnimation-11-target7{ 0%,2.6% { opacity: 0; } 2.6%, 9.1% { opacity: 1; } 11.7%, 100% { opacity: 0; } } @keyframes galleryAnimation-11-target8{ 0%,2.6% { opacity: 0; } 2.6%, 9.1% { opacity: 1; } 11.7%, 100% { opacity: 0; } } @keyframes galleryAnimation-11-target9{ 0%,2.6% { opacity: 0; } 2.6%, 9.1% { opacity: 1; } 11.7%, 100% { opacity: 0; } } @keyframes galleryAnimation-11-target10{ 0%,2.6% { opacity: 0; } 2.6%, 9.1% { opacity: 1; } 11.7%, 100% { opacity: 0; } } @keyframes galleryAnimation-11-target11{ 0%,2.6% { opacity: 0; } 2.6%, 9.1% { opacity: 1; } 11.7%, 100% { opacity: 0; } } .gallery.item-11 div#item-1:target ~ .banner-slides .item { animation: galleryAnimation-11-target 55s infinite; } .gallery.item-11 div#item-1:target ~ .controls-banner .control-button { animation: controlAnimation-11-target 55s infinite; } /* set animation delay when click #item-2 */ .gallery.item-11 div#item-2:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-11 div#item-2:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: -2s !important; } .gallery.item-11 div#item-2:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-11 div#item-2:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 3s !important; } .gallery.item-11 div#item-2:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-11 div#item-2:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 8s !important; } .gallery.item-11 div#item-2:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-11 div#item-2:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 13s !important; } .gallery.item-11 div#item-2:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-11 div#item-2:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 18s !important; } .gallery.item-11 div#item-2:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-11 div#item-2:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 23s !important; } .gallery.item-11 div#item-2:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-11 div#item-2:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 28s !important; } .gallery.item-11 div#item-2:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-11 div#item-2:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 33s !important; } .gallery.item-11 div#item-2:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-11 div#item-2:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 38s !important; } .gallery.item-11 div#item-2:target ~ .controls-banner .control-button:nth-of-type(11), .gallery.item-11 div#item-2:target ~ .banner-slides .item:nth-of-type(11) { animation-delay: 43s !important; } .gallery.item-11 div#item-2:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-11 div#item-2:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 48s !important; } .gallery.item-11 div#item-2:target ~ .banner-slides .item { animation: galleryAnimation-11-target2 55s infinite; } .gallery.item-11 div#item-2:target ~ .controls-banner .control-button { animation: controlAnimation-11-target2 55s infinite; } /* set animation delay when click #item-3 */ .gallery.item-11 div#item-3:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-11 div#item-3:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: -2s !important; } .gallery.item-11 div#item-3:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-11 div#item-3:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 3s !important; } .gallery.item-11 div#item-3:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-11 div#item-3:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 8s !important; } .gallery.item-11 div#item-3:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-11 div#item-3:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 13s !important; } .gallery.item-11 div#item-3:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-11 div#item-3:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 18s !important; } .gallery.item-11 div#item-3:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-11 div#item-3:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 23s !important; } .gallery.item-11 div#item-3:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-11 div#item-3:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 28s !important; } .gallery.item-11 div#item-3:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-11 div#item-3:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 33s !important; } .gallery.item-11 div#item-3:target ~ .controls-banner .control-button:nth-of-type(11), .gallery.item-11 div#item-3:target ~ .banner-slides .item:nth-of-type(11) { animation-delay: 38s !important; } .gallery.item-11 div#item-3:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-11 div#item-3:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 43s !important; } .gallery.item-11 div#item-3:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-11 div#item-3:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 48s !important; } .gallery.item-11 div#item-3:target ~ .banner-slides .item { animation: galleryAnimation-11-target3 55s infinite; } .gallery.item-11 div#item-3:target ~ .controls-banner .control-button { animation: controlAnimation-11-target3 55s infinite; } /* set animation delay when click #item-4 */ .gallery.item-11 div#item-4:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-11 div#item-4:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: -2s !important; } .gallery.item-11 div#item-4:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-11 div#item-4:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 3s !important; } .gallery.item-11 div#item-4:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-11 div#item-4:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 8s !important; } .gallery.item-11 div#item-4:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-11 div#item-4:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 13s !important; } .gallery.item-11 div#item-4:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-11 div#item-4:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 18s !important; } .gallery.item-11 div#item-4:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-11 div#item-4:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 23s !important; } .gallery.item-11 div#item-4:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-11 div#item-4:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 28s !important; } .gallery.item-11 div#item-4:target ~ .controls-banner .control-button:nth-of-type(11), .gallery.item-11 div#item-4:target ~ .banner-slides .item:nth-of-type(11) { animation-delay: 33s !important; } .gallery.item-11 div#item-4:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-11 div#item-4:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 38s !important; } .gallery.item-11 div#item-4:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-11 div#item-4:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 43s !important; } .gallery.item-11 div#item-4:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-11 div#item-4:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 48s !important; } .gallery.item-11 div#item-4:target ~ .banner-slides .item { animation: galleryAnimation-11-target4 55s infinite; } .gallery.item-11 div#item-4:target ~ .controls-banner .control-button { animation: controlAnimation-11-target4 55s infinite; } /* set animation delay when click #item-5 */ .gallery.item-11 div#item-5:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-11 div#item-5:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: -2s !important; } .gallery.item-11 div#item-5:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-11 div#item-5:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 3s !important; } .gallery.item-11 div#item-5:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-11 div#item-5:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 8s !important; } .gallery.item-11 div#item-5:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-11 div#item-5:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 13s !important; } .gallery.item-11 div#item-5:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-11 div#item-5:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 18s !important; } .gallery.item-11 div#item-5:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-11 div#item-5:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 23s !important; } .gallery.item-11 div#item-5:target ~ .controls-banner .control-button:nth-of-type(11), .gallery.item-11 div#item-5:target ~ .banner-slides .item:nth-of-type(11) { animation-delay: 28s !important; } .gallery.item-11 div#item-5:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-11 div#item-5:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 33s !important; } .gallery.item-11 div#item-5:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-11 div#item-5:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 38s !important; } .gallery.item-11 div#item-5:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-11 div#item-5:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 43s !important; } .gallery.item-11 div#item-5:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-11 div#item-5:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 48s !important; } .gallery.item-11 div#item-5:target ~ .banner-slides .item { animation: galleryAnimation-11-target5 55s infinite; } .gallery.item-11 div#item-5:target ~ .controls-banner .control-button { animation: controlAnimation-11-target5 55s infinite; } /* set animation delay when click #item-6 */ .gallery.item-11 div#item-6:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-11 div#item-6:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: -2s !important; } .gallery.item-11 div#item-6:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-11 div#item-6:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 3s !important; } .gallery.item-11 div#item-6:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-11 div#item-6:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 8s !important; } .gallery.item-11 div#item-6:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-11 div#item-6:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 13s !important; } .gallery.item-11 div#item-6:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-11 div#item-6:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 18s !important; } .gallery.item-11 div#item-6:target ~ .controls-banner .control-button:nth-of-type(11), .gallery.item-11 div#item-6:target ~ .banner-slides .item:nth-of-type(11) { animation-delay: 23s !important; } .gallery.item-11 div#item-6:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-11 div#item-6:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 28s !important; } .gallery.item-11 div#item-6:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-11 div#item-6:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 33s !important; } .gallery.item-11 div#item-6:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-11 div#item-6:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 38s !important; } .gallery.item-11 div#item-6:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-11 div#item-6:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 43s !important; } .gallery.item-11 div#item-6:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-11 div#item-6:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 48s !important; } .gallery.item-11 div#item-6:target ~ .banner-slides .item { animation: galleryAnimation-11-target6 55s infinite; } .gallery.item-11 div#item-6:target ~ .controls-banner .control-button { animation: controlAnimation-11-target6 55s infinite; } /* set animation delay when click #item-7 */ .gallery.item-11 div#item-7:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-11 div#item-7:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: -2s !important; } .gallery.item-11 div#item-7:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-11 div#item-7:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 3s !important; } .gallery.item-11 div#item-7:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-11 div#item-7:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 8s !important; } .gallery.item-11 div#item-7:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-11 div#item-7:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 13s !important; } .gallery.item-11 div#item-7:target ~ .controls-banner .control-button:nth-of-type(11), .gallery.item-11 div#item-7:target ~ .banner-slides .item:nth-of-type(11) { animation-delay: 18s !important; } .gallery.item-11 div#item-7:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-11 div#item-7:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 23s !important; } .gallery.item-11 div#item-7:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-11 div#item-7:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 28s !important; } .gallery.item-11 div#item-7:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-11 div#item-7:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 33s !important; } .gallery.item-11 div#item-7:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-11 div#item-7:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 38s !important; } .gallery.item-11 div#item-7:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-11 div#item-7:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 43s !important; } .gallery.item-11 div#item-7:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-11 div#item-7:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 48s !important; } .gallery.item-11 div#item-7:target ~ .banner-slides .item { animation: galleryAnimation-11-target7 55s infinite; } .gallery.item-11 div#item-7:target ~ .controls-banner .control-button { animation: controlAnimation-11-target7 55s infinite; } /* set animation delay when click #item-8 */ .gallery.item-11 div#item-8:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-11 div#item-8:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: -2s !important; } .gallery.item-11 div#item-8:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-11 div#item-8:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 3s !important; } .gallery.item-11 div#item-8:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-11 div#item-8:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 8s !important; } .gallery.item-11 div#item-8:target ~ .controls-banner .control-button:nth-of-type(11), .gallery.item-11 div#item-8:target ~ .banner-slides .item:nth-of-type(11) { animation-delay: 13s !important; } .gallery.item-11 div#item-8:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-11 div#item-8:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 18s !important; } .gallery.item-11 div#item-8:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-11 div#item-8:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 23s !important; } .gallery.item-11 div#item-8:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-11 div#item-8:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 28s !important; } .gallery.item-11 div#item-8:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-11 div#item-8:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 33s !important; } .gallery.item-11 div#item-8:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-11 div#item-8:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 38s !important; } .gallery.item-11 div#item-8:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-11 div#item-8:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 43s !important; } .gallery.item-11 div#item-8:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-11 div#item-8:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 48s !important; } .gallery.item-11 div#item-8:target ~ .banner-slides .item { animation: galleryAnimation-11-target8 55s infinite; } .gallery.item-11 div#item-8:target ~ .controls-banner .control-button { animation: controlAnimation-11-target8 55s infinite; } /* set animation delay when click #item-9 */ .gallery.item-11 div#item-9:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-11 div#item-9:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: -2s !important; } .gallery.item-11 div#item-9:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-11 div#item-9:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 3s !important; } .gallery.item-11 div#item-9:target ~ .controls-banner .control-button:nth-of-type(11), .gallery.item-11 div#item-9:target ~ .banner-slides .item:nth-of-type(11) { animation-delay: 8s !important; } .gallery.item-11 div#item-9:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-11 div#item-9:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 13s !important; } .gallery.item-11 div#item-9:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-11 div#item-9:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 18s !important; } .gallery.item-11 div#item-9:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-11 div#item-9:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 23s !important; } .gallery.item-11 div#item-9:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-11 div#item-9:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 28s !important; } .gallery.item-11 div#item-9:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-11 div#item-9:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 33s !important; } .gallery.item-11 div#item-9:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-11 div#item-9:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 38s !important; } .gallery.item-11 div#item-9:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-11 div#item-9:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 43s !important; } .gallery.item-11 div#item-9:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-11 div#item-9:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 48s !important; } .gallery.item-11 div#item-9:target ~ .banner-slides .item { animation: galleryAnimation-11-target9 55s infinite; } .gallery.item-11 div#item-9:target ~ .controls-banner .control-button { animation: controlAnimation-11-target9 55s infinite; } /* set animation delay when click #item-10 */ .gallery.item-11 div#item-10:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-11 div#item-10:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: -2s !important; } .gallery.item-11 div#item-10:target ~ .controls-banner .control-button:nth-of-type(11), .gallery.item-11 div#item-10:target ~ .banner-slides .item:nth-of-type(11) { animation-delay: 3s !important; } .gallery.item-11 div#item-10:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-11 div#item-10:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 8s !important; } .gallery.item-11 div#item-10:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-11 div#item-10:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 13s !important; } .gallery.item-11 div#item-10:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-11 div#item-10:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 18s !important; } .gallery.item-11 div#item-10:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-11 div#item-10:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 23s !important; } .gallery.item-11 div#item-10:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-11 div#item-10:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 28s !important; } .gallery.item-11 div#item-10:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-11 div#item-10:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 33s !important; } .gallery.item-11 div#item-10:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-11 div#item-10:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 38s !important; } .gallery.item-11 div#item-10:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-11 div#item-10:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 43s !important; } .gallery.item-11 div#item-10:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-11 div#item-10:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 48s !important; } .gallery.item-11 div#item-10:target ~ .banner-slides .item { animation: galleryAnimation-11-target10 55s infinite; } .gallery.item-11 div#item-10:target ~ .controls-banner .control-button { animation: controlAnimation-11-target10 55s infinite; } /* set animation delay when click #item-11 */ .gallery.item-11 div#item-11:target ~ .controls-banner .control-button:nth-of-type(11), .gallery.item-11 div#item-11:target ~ .banner-slides .item:nth-of-type(11) { animation-delay: -2s !important; } .gallery.item-11 div#item-11:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-11 div#item-11:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 3s !important; } .gallery.item-11 div#item-11:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-11 div#item-11:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 8s !important; } .gallery.item-11 div#item-11:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-11 div#item-11:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 13s !important; } .gallery.item-11 div#item-11:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-11 div#item-11:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 18s !important; } .gallery.item-11 div#item-11:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-11 div#item-11:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 23s !important; } .gallery.item-11 div#item-11:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-11 div#item-11:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 28s !important; } .gallery.item-11 div#item-11:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-11 div#item-11:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 33s !important; } .gallery.item-11 div#item-11:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-11 div#item-11:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 38s !important; } .gallery.item-11 div#item-11:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-11 div#item-11:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 43s !important; } .gallery.item-11 div#item-11:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-11 div#item-11:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 48s !important; } .gallery.item-11 div#item-11:target ~ .banner-slides .item { animation: galleryAnimation-11-target11 55s infinite; } .gallery.item-11 div#item-11:target ~ .controls-banner .control-button { animation: controlAnimation-11-target11 55s infinite; } /************* BANNER HAVE 12 IMAGES *****************/ @-webkit-keyframes controlAnimation-12 { 0% { background: rgba(255, 255, 255, 0.5); } 2.37%, 8.3% { background: rgba(255, 255, 255, 1); } 10.67%, 100% { background: rgba(255, 255, 255, 0.5); } } @-o-keyframes controlAnimation-12 { 0% { background: rgba(255, 255, 255, 0.5); } 2.37%, 8.3% { background: rgba(255, 255, 255, 1); } 10.67%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-12 { 0% { background: rgba(255, 255, 255, 0.5); } 2.37%, 8.3% { background: rgba(255, 255, 255, 1); } 10.67%, 100% { background: rgba(255, 255, 255, 0.5); } } @-webkit-keyframes galleryAnimation-12 { 0% { opacity: 0; } 2.37%, 8.3% { opacity: 1; } 10.67%, 100% { opacity: 0; } } @-o-keyframes galleryAnimation-12 { 0% { opacity: 0; } 2.37%, 8.3% { opacity: 1; } 10.67%, 100% { opacity: 0; } } @keyframes galleryAnimation-12 { 0% { opacity: 0; } 2.37%, 8.3% { opacity: 1; } 10.67%, 100% { opacity: 0; } } .gallery.item-12 .controls-banner .control-button { -webkit-animation: controlAnimation-12 60s infinite; -o-animation: controlAnimation-12 60s infinite; animation: controlAnimation-12 60s infinite; } .gallery.item-12 .banner-slides .item { -webkit-animation: galleryAnimation-12 60s infinite; -o-animation: galleryAnimation-12 60s infinite; animation: galleryAnimation-12 60s infinite; } /* click item */ @keyframes controlAnimation-12-target { 0%,2.37% { background: rgba(255, 255, 255, 0.5); } 2.37%, 8.3% { background: rgba(255, 255, 255, 1); } 10.67%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-12-target2 { 0%,2.37% { background: rgba(255, 255, 255, 0.5); } 2.37%, 8.3% { background: rgba(255, 255, 255, 1); } 10.67%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-12-target3 { 0%,2.37% { background: rgba(255, 255, 255, 0.5); } 2.37%, 8.3% { background: rgba(255, 255, 255, 1); } 10.67%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-12-target4 { 0%,2.37% { background: rgba(255, 255, 255, 0.5); } 2.37%, 8.3% { background: rgba(255, 255, 255, 1); } 10.67%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-12-target5 { 0%,2.37% { background: rgba(255, 255, 255, 0.5); } 2.37%, 8.3% { background: rgba(255, 255, 255, 1); } 10.67%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-12-target6 { 0%,2.37% { background: rgba(255, 255, 255, 0.5); } 2.37%, 8.3% { background: rgba(255, 255, 255, 1); } 10.67%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-12-target7 { 0%,2.37% { background: rgba(255, 255, 255, 0.5); } 2.37%, 8.3% { background: rgba(255, 255, 255, 1); } 10.67%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-12-target8 { 0%,2.37% { background: rgba(255, 255, 255, 0.5); } 2.37%, 8.3% { background: rgba(255, 255, 255, 1); } 10.67%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-12-target9 { 0%,2.37% { background: rgba(255, 255, 255, 0.5); } 2.37%, 8.3% { background: rgba(255, 255, 255, 1); } 10.67%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-12-target10 { 0%,2.37% { background: rgba(255, 255, 255, 0.5); } 2.37%, 8.3% { background: rgba(255, 255, 255, 1); } 10.67%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-12-target11 { 0%,2.37% { background: rgba(255, 255, 255, 0.5); } 2.37%, 8.3% { background: rgba(255, 255, 255, 1); } 10.67%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes controlAnimation-12-target12 { 0%,2.37% { background: rgba(255, 255, 255, 0.5); } 2.37%, 8.3% { background: rgba(255, 255, 255, 1); } 10.67%, 100% { background: rgba(255, 255, 255, 0.5); } } @keyframes galleryAnimation-12-target{ 0%,2.37% { opacity: 0; } 2.37%, 8.3% { opacity: 1; } 10.67%, 100% { opacity: 0; } } @keyframes galleryAnimation-12-target2{ 0%,2.37% { opacity: 0; } 2.37%, 8.3% { opacity: 1; } 10.67%, 100% { opacity: 0; } } @keyframes galleryAnimation-12-target3{ 0%,2.37% { opacity: 0; } 2.37%, 8.3% { opacity: 1; } 10.67%, 100% { opacity: 0; } } @keyframes galleryAnimation-12-target4{ 0%,2.37% { opacity: 0; } 2.37%, 8.3% { opacity: 1; } 10.67%, 100% { opacity: 0; } } @keyframes galleryAnimation-12-target5{ 0%,2.37% { opacity: 0; } 2.37%, 8.3% { opacity: 1; } 10.67%, 100% { opacity: 0; } } @keyframes galleryAnimation-12-target6{ 0%,2.37% { opacity: 0; } 2.37%, 8.3% { opacity: 1; } 10.67%, 100% { opacity: 0; } } @keyframes galleryAnimation-12-target7{ 0%,2.37% { opacity: 0; } 2.37%, 8.3% { opacity: 1; } 10.67%, 100% { opacity: 0; } } @keyframes galleryAnimation-12-target8{ 0%,2.37% { opacity: 0; } 2.37%, 8.3% { opacity: 1; } 10.67%, 100% { opacity: 0; } } @keyframes galleryAnimation-12-target9{ 0%,2.37% { opacity: 0; } 2.37%, 8.3% { opacity: 1; } 10.67%, 100% { opacity: 0; } } @keyframes galleryAnimation-12-target10{ 0%,2.37% { opacity: 0; } 2.37%, 8.3% { opacity: 1; } 10.67%, 100% { opacity: 0; } } @keyframes galleryAnimation-12-target11{ 0%,2.37% { opacity: 0; } 2.37%, 8.3% { opacity: 1; } 10.67%, 100% { opacity: 0; } } @keyframes galleryAnimation-12-target12{ 0%,2.37% { opacity: 0; } 2.37%, 8.3% { opacity: 1; } 10.67%, 100% { opacity: 0; } } .gallery.item-12 div#item-1:target ~ .banner-slides .item { animation: galleryAnimation-12-target 60s infinite; } .gallery.item-12 div#item-1:target ~ .controls-banner .control-button { animation: controlAnimation-12-target 60s infinite; } /* set animation delay when click #item-2 */ .gallery.item-12 div#item-2:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-12 div#item-2:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: -2s !important; } .gallery.item-12 div#item-2:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-12 div#item-2:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 3s !important; } .gallery.item-12 div#item-2:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-12 div#item-2:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 8s !important; } .gallery.item-12 div#item-2:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-12 div#item-2:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 13s !important; } .gallery.item-12 div#item-2:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-12 div#item-2:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 18s !important; } .gallery.item-12 div#item-2:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-12 div#item-2:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 23s !important; } .gallery.item-12 div#item-2:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-12 div#item-2:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 28s !important; } .gallery.item-12 div#item-2:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-12 div#item-2:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 33s !important; } .gallery.item-12 div#item-2:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-12 div#item-2:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 38s !important; } .gallery.item-12 div#item-2:target ~ .controls-banner .control-button:nth-of-type(11), .gallery.item-12 div#item-2:target ~ .banner-slides .item:nth-of-type(11) { animation-delay: 43s !important; } .gallery.item-12 div#item-2:target ~ .controls-banner .control-button:nth-of-type(12), .gallery.item-12 div#item-2:target ~ .banner-slides .item:nth-of-type(12) { animation-delay: 48s !important; } .gallery.item-12 div#item-2:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-12 div#item-2:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 53s !important; } .gallery.item-12 div#item-2:target ~ .banner-slides .item { animation: galleryAnimation-12-target2 60s infinite; } .gallery.item-12 div#item-2:target ~ .controls-banner .control-button { animation: controlAnimation-12-target2 60s infinite; } /* set animation delay when click #item-3 */ .gallery.item-12 div#item-3:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-12 div#item-3:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: -2s !important; } .gallery.item-12 div#item-3:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-12 div#item-3:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 3s !important; } .gallery.item-12 div#item-3:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-12 div#item-3:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 8s !important; } .gallery.item-12 div#item-3:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-12 div#item-3:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 13s !important; } .gallery.item-12 div#item-3:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-12 div#item-3:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 18s !important; } .gallery.item-12 div#item-3:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-12 div#item-3:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 23s !important; } .gallery.item-12 div#item-3:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-12 div#item-3:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 28s !important; } .gallery.item-12 div#item-3:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-12 div#item-3:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 33s !important; } .gallery.item-12 div#item-3:target ~ .controls-banner .control-button:nth-of-type(11), .gallery.item-12 div#item-3:target ~ .banner-slides .item:nth-of-type(11) { animation-delay: 38s !important; } .gallery.item-12 div#item-3:target ~ .controls-banner .control-button:nth-of-type(12), .gallery.item-12 div#item-3:target ~ .banner-slides .item:nth-of-type(12) { animation-delay: 43s !important; } .gallery.item-12 div#item-3:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-12 div#item-3:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 48s !important; } .gallery.item-12 div#item-3:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-12 div#item-3:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 53s !important; } .gallery.item-12 div#item-3:target ~ .banner-slides .item { animation: galleryAnimation-12-target3 60s infinite; } .gallery.item-12 div#item-3:target ~ .controls-banner .control-button { animation: controlAnimation-12-target3 60s infinite; } /* set animation delay when click #item-4 */ .gallery.item-12 div#item-4:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-12 div#item-4:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: -2s !important; } .gallery.item-12 div#item-4:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-12 div#item-4:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 3s !important; } .gallery.item-12 div#item-4:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-12 div#item-4:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 8s !important; } .gallery.item-12 div#item-4:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-12 div#item-4:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 13s !important; } .gallery.item-12 div#item-4:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-12 div#item-4:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 18s !important; } .gallery.item-12 div#item-4:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-12 div#item-4:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 23s !important; } .gallery.item-12 div#item-4:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-12 div#item-4:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 28s !important; } .gallery.item-12 div#item-4:target ~ .controls-banner .control-button:nth-of-type(11), .gallery.item-12 div#item-4:target ~ .banner-slides .item:nth-of-type(11) { animation-delay: 33s !important; } .gallery.item-12 div#item-4:target ~ .controls-banner .control-button:nth-of-type(12), .gallery.item-12 div#item-4:target ~ .banner-slides .item:nth-of-type(12) { animation-delay: 38s !important; } .gallery.item-12 div#item-4:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-12 div#item-4:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 43s !important; } .gallery.item-12 div#item-4:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-12 div#item-4:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 48s !important; } .gallery.item-12 div#item-4:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-12 div#item-4:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 53s !important; } .gallery.item-12 div#item-4:target ~ .banner-slides .item { animation: galleryAnimation-12-target4 60s infinite; } .gallery.item-12 div#item-4:target ~ .controls-banner .control-button { animation: controlAnimation-12-target4 60s infinite; } /* set animation delay when click #item-5 */ .gallery.item-12 div#item-5:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-12 div#item-5:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: -2s !important; } .gallery.item-12 div#item-5:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-12 div#item-5:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 3s !important; } .gallery.item-12 div#item-5:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-12 div#item-5:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 8s !important; } .gallery.item-12 div#item-5:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-12 div#item-5:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 13s !important; } .gallery.item-12 div#item-5:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-12 div#item-5:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 18s !important; } .gallery.item-12 div#item-5:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-12 div#item-5:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 23s !important; } .gallery.item-12 div#item-5:target ~ .controls-banner .control-button:nth-of-type(11), .gallery.item-12 div#item-5:target ~ .banner-slides .item:nth-of-type(11) { animation-delay: 28s !important; } .gallery.item-12 div#item-5:target ~ .controls-banner .control-button:nth-of-type(12), .gallery.item-12 div#item-5:target ~ .banner-slides .item:nth-of-type(12) { animation-delay: 33s !important; } .gallery.item-12 div#item-5:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-12 div#item-5:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 38s !important; } .gallery.item-12 div#item-5:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-12 div#item-5:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 43s !important; } .gallery.item-12 div#item-5:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-12 div#item-5:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 48s !important; } .gallery.item-12 div#item-5:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-12 div#item-5:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 53s !important; } .gallery.item-12 div#item-5:target ~ .banner-slides .item { animation: galleryAnimation-12-target5 60s infinite; } .gallery.item-12 div#item-5:target ~ .controls-banner .control-button { animation: controlAnimation-12-target5 60s infinite; } /* set animation delay when click #item-6 */ .gallery.item-12 div#item-6:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-12 div#item-6:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: -2s !important; } .gallery.item-12 div#item-6:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-12 div#item-6:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 3s !important; } .gallery.item-12 div#item-6:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-12 div#item-6:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 8s !important; } .gallery.item-12 div#item-6:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-12 div#item-6:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 13s !important; } .gallery.item-12 div#item-6:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-12 div#item-6:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 18s !important; } .gallery.item-12 div#item-6:target ~ .controls-banner .control-button:nth-of-type(11), .gallery.item-12 div#item-6:target ~ .banner-slides .item:nth-of-type(11) { animation-delay: 23s !important; } .gallery.item-12 div#item-6:target ~ .controls-banner .control-button:nth-of-type(12), .gallery.item-12 div#item-6:target ~ .banner-slides .item:nth-of-type(12) { animation-delay: 28s !important; } .gallery.item-12 div#item-6:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-12 div#item-6:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 33s !important; } .gallery.item-12 div#item-6:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-12 div#item-6:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 38s !important; } .gallery.item-12 div#item-6:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-12 div#item-6:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 43s !important; } .gallery.item-12 div#item-6:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-12 div#item-6:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 48s !important; } .gallery.item-12 div#item-6:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-12 div#item-6:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 53s !important; } .gallery.item-12 div#item-6:target ~ .banner-slides .item { animation: galleryAnimation-12-target6 60s infinite; } .gallery.item-12 div#item-6:target ~ .controls-banner .control-button { animation: controlAnimation-12-target6 60s infinite; } /* set animation delay when click #item-7 */ .gallery.item-12 div#item-7:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-12 div#item-7:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: -2s !important; } .gallery.item-12 div#item-7:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-12 div#item-7:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 3s !important; } .gallery.item-12 div#item-7:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-12 div#item-7:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 8s !important; } .gallery.item-12 div#item-7:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-12 div#item-7:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 13s !important; } .gallery.item-12 div#item-7:target ~ .controls-banner .control-button:nth-of-type(11), .gallery.item-12 div#item-7:target ~ .banner-slides .item:nth-of-type(11) { animation-delay: 18s !important; } .gallery.item-12 div#item-7:target ~ .controls-banner .control-button:nth-of-type(12), .gallery.item-12 div#item-7:target ~ .banner-slides .item:nth-of-type(12) { animation-delay: 23s !important; } .gallery.item-12 div#item-7:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-12 div#item-7:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 28s !important; } .gallery.item-12 div#item-7:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-12 div#item-7:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 33s !important; } .gallery.item-12 div#item-7:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-12 div#item-7:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 38s !important; } .gallery.item-12 div#item-7:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-12 div#item-7:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 43s !important; } .gallery.item-12 div#item-7:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-12 div#item-7:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 48s !important; } .gallery.item-12 div#item-7:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-12 div#item-7:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 53s !important; } .gallery.item-12 div#item-7:target ~ .banner-slides .item { animation: galleryAnimation-12-target7 60s infinite; } .gallery.item-12 div#item-7:target ~ .controls-banner .control-button { animation: controlAnimation-12-target7 60s infinite; } /* set animation delay when click #item-8 */ .gallery.item-12 div#item-8:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-12 div#item-8:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: -2s !important; } .gallery.item-12 div#item-8:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-12 div#item-8:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 3s !important; } .gallery.item-12 div#item-8:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-12 div#item-8:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 8s !important; } .gallery.item-12 div#item-8:target ~ .controls-banner .control-button:nth-of-type(11), .gallery.item-12 div#item-8:target ~ .banner-slides .item:nth-of-type(11) { animation-delay: 13s !important; } .gallery.item-12 div#item-8:target ~ .controls-banner .control-button:nth-of-type(12), .gallery.item-12 div#item-8:target ~ .banner-slides .item:nth-of-type(12) { animation-delay: 18s !important; } .gallery.item-12 div#item-8:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-12 div#item-8:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 23s !important; } .gallery.item-12 div#item-8:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-12 div#item-8:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 28s !important; } .gallery.item-12 div#item-8:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-12 div#item-8:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 33s !important; } .gallery.item-12 div#item-8:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-12 div#item-8:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 38s !important; } .gallery.item-12 div#item-8:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-12 div#item-8:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 43s !important; } .gallery.item-12 div#item-8:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-12 div#item-8:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 48s !important; } .gallery.item-12 div#item-8:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-12 div#item-8:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 53s !important; } .gallery.item-12 div#item-8:target ~ .banner-slides .item { animation: galleryAnimation-12-target8 60s infinite; } .gallery.item-12 div#item-8:target ~ .controls-banner .control-button { animation: controlAnimation-12-target8 60s infinite; } /* set animation delay when click #item-9 */ .gallery.item-12 div#item-9:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-12 div#item-9:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: -2s !important; } .gallery.item-12 div#item-9:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-12 div#item-9:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 3s !important; } .gallery.item-12 div#item-9:target ~ .controls-banner .control-button:nth-of-type(11), .gallery.item-12 div#item-9:target ~ .banner-slides .item:nth-of-type(11) { animation-delay: 8s !important; } .gallery.item-12 div#item-9:target ~ .controls-banner .control-button:nth-of-type(12), .gallery.item-12 div#item-9:target ~ .banner-slides .item:nth-of-type(12) { animation-delay: 13s !important; } .gallery.item-12 div#item-9:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-12 div#item-9:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 18s !important; } .gallery.item-12 div#item-9:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-12 div#item-9:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 23s !important; } .gallery.item-12 div#item-9:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-12 div#item-9:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 28s !important; } .gallery.item-12 div#item-9:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-12 div#item-9:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 33s !important; } .gallery.item-12 div#item-9:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-12 div#item-9:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 38s !important; } .gallery.item-12 div#item-9:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-12 div#item-9:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 43s !important; } .gallery.item-12 div#item-9:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-12 div#item-9:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 48s !important; } .gallery.item-12 div#item-9:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-12 div#item-9:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 53s !important; } .gallery.item-12 div#item-9:target ~ .banner-slides .item { animation: galleryAnimation-12-target9 60s infinite; } .gallery.item-12 div#item-9:target ~ .controls-banner .control-button { animation: controlAnimation-12-target9 60s infinite; } /* set animation delay when click #item-10 */ .gallery.item-12 div#item-10:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-12 div#item-10:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: -2s !important; } .gallery.item-12 div#item-10:target ~ .controls-banner .control-button:nth-of-type(11), .gallery.item-12 div#item-10:target ~ .banner-slides .item:nth-of-type(11) { animation-delay: 3s !important; } .gallery.item-12 div#item-10:target ~ .controls-banner .control-button:nth-of-type(12), .gallery.item-12 div#item-10:target ~ .banner-slides .item:nth-of-type(12) { animation-delay: 8s !important; } .gallery.item-12 div#item-10:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-12 div#item-10:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 13s !important; } .gallery.item-12 div#item-10:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-12 div#item-10:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 18s !important; } .gallery.item-12 div#item-10:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-12 div#item-10:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 23s !important; } .gallery.item-12 div#item-10:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-12 div#item-10:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 28s !important; } .gallery.item-12 div#item-10:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-12 div#item-10:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 33s !important; } .gallery.item-12 div#item-10:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-12 div#item-10:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 38s !important; } .gallery.item-12 div#item-10:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-12 div#item-10:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 43s !important; } .gallery.item-12 div#item-10:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-12 div#item-10:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 48s !important; } .gallery.item-12 div#item-10:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-12 div#item-10:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 53s !important; } .gallery.item-12 div#item-10:target ~ .banner-slides .item { animation: galleryAnimation-12-target10 60s infinite; } .gallery.item-12 div#item-10:target ~ .controls-banner .control-button { animation: controlAnimation-12-target10 60s infinite; } /* set animation delay when click #item-11 */ .gallery.item-12 div#item-11:target ~ .controls-banner .control-button:nth-of-type(11), .gallery.item-12 div#item-11:target ~ .banner-slides .item:nth-of-type(11) { animation-delay: -2s !important; } .gallery.item-12 div#item-11:target ~ .controls-banner .control-button:nth-of-type(12), .gallery.item-12 div#item-11:target ~ .banner-slides .item:nth-of-type(12) { animation-delay: 3s !important; } .gallery.item-12 div#item-11:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-12 div#item-11:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 8s !important; } .gallery.item-12 div#item-11:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-12 div#item-11:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 13s !important; } .gallery.item-12 div#item-11:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-12 div#item-11:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 18s !important; } .gallery.item-12 div#item-11:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-12 div#item-11:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 23s !important; } .gallery.item-12 div#item-11:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-12 div#item-11:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 28s !important; } .gallery.item-12 div#item-11:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-12 div#item-11:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 33s !important; } .gallery.item-12 div#item-11:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-12 div#item-11:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 38s !important; } .gallery.item-12 div#item-11:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-12 div#item-11:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 43s !important; } .gallery.item-12 div#item-11:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-12 div#item-11:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 48s !important; } .gallery.item-12 div#item-11:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-12 div#item-11:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 53s !important; } .gallery.item-12 div#item-11:target ~ .banner-slides .item { animation: galleryAnimation-12-target11 60s infinite; } .gallery.item-12 div#item-11:target ~ .controls-banner .control-button { animation: controlAnimation-12-target11 60s infinite; } /* set animation delay when click #item-12 */ .gallery.item-12 div#item-12:target ~ .controls-banner .control-button:nth-of-type(12), .gallery.item-12 div#item-12:target ~ .banner-slides .item:nth-of-type(12) { animation-delay: -2s !important; } .gallery.item-12 div#item-12:target ~ .controls-banner .control-button:nth-of-type(1), .gallery.item-12 div#item-12:target ~ .banner-slides .item:nth-of-type(1) { animation-delay: 3s !important; } .gallery.item-12 div#item-12:target ~ .controls-banner .control-button:nth-of-type(2), .gallery.item-12 div#item-12:target ~ .banner-slides .item:nth-of-type(2) { animation-delay: 8s !important; } .gallery.item-12 div#item-12:target ~ .controls-banner .control-button:nth-of-type(3), .gallery.item-12 div#item-12:target ~ .banner-slides .item:nth-of-type(3) { animation-delay: 13s !important; } .gallery.item-12 div#item-12:target ~ .controls-banner .control-button:nth-of-type(4), .gallery.item-12 div#item-12:target ~ .banner-slides .item:nth-of-type(4) { animation-delay: 18s !important; } .gallery.item-12 div#item-12:target ~ .controls-banner .control-button:nth-of-type(5), .gallery.item-12 div#item-12:target ~ .banner-slides .item:nth-of-type(5) { animation-delay: 23s !important; } .gallery.item-12 div#item-12:target ~ .controls-banner .control-button:nth-of-type(6), .gallery.item-12 div#item-12:target ~ .banner-slides .item:nth-of-type(6) { animation-delay: 28s !important; } .gallery.item-12 div#item-12:target ~ .controls-banner .control-button:nth-of-type(7), .gallery.item-12 div#item-12:target ~ .banner-slides .item:nth-of-type(7) { animation-delay: 33s !important; } .gallery.item-12 div#item-12:target ~ .controls-banner .control-button:nth-of-type(8), .gallery.item-12 div#item-12:target ~ .banner-slides .item:nth-of-type(8) { animation-delay: 38s !important; } .gallery.item-12 div#item-12:target ~ .controls-banner .control-button:nth-of-type(9), .gallery.item-12 div#item-12:target ~ .banner-slides .item:nth-of-type(9) { animation-delay: 43s !important; } .gallery.item-12 div#item-12:target ~ .controls-banner .control-button:nth-of-type(10), .gallery.item-12 div#item-12:target ~ .banner-slides .item:nth-of-type(10) { animation-delay: 48s !important; } .gallery.item-12 div#item-12:target ~ .controls-banner .control-button:nth-of-type(11), .gallery.item-12 div#item-12:target ~ .banner-slides .item:nth-of-type(11) { animation-delay: 53s !important; } .gallery.item-12 div#item-12:target ~ .banner-slides .item { animation: galleryAnimation-12-target12 60s infinite; } .gallery.item-12 div#item-12:target ~ .controls-banner .control-button { animation: controlAnimation-12-target12 60s infinite; }