body { margin: 0; } .zdzTabs *, .img-holder .lightbox:before { -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } .zdzBody ul { margin: 0; padding: 0; } .zdzBody ul li { list-style-type: none; } .zdzBody { display: block !important; font-size: 13px; background:url(../img/bg1.jpg); background-repeat:repeat; background-size: 100%;} .zdz-page{ } .zdzBody a { text-decoration: none; } #aboutzdz { display: none; } .main{ position: relative; } .main > * + * { padding-left: 15px; } .mdl-Box { margin-bottom: 15px; font-size: 14px; text-align:left } .mdl-Box .pad { padding: 15px; border: 1px solid #e6e6e6; background-color: #fff; } .zdz-colRight { width: auto !important; } .col-mdl > div { margin-bottom: 15px; } .enlarge { padding: 10px 0; text-align: center; border-top: 1px solid #e6e6e6; } .enlarge span { display: inline-block; background: url('../svg/icon-zoom.svg') right center no-repeat; -webkit-background-size: contain; background-size: contain; padding-right: 18px; font-size: 11px; text-transform: uppercase; color: #555; } .itemTitle { color: #333; font-weight: normal; font-size: 20px; line-height: normal; margin-top: 0; margin-bottom: 15px; border-bottom: 1px solid #e6e6e6; padding-bottom: 15px; text-transform:capitalize } .itemTitle * { margin: 0; padding: 0; color: #424242; font-weight: normal; font-size: 20px; line-height: normal; } .zdz-gallery .img-box { border: 1px solid #e6e6e6; width: 100%; margin-left: auto; margin-right: auto; } .img-holder { text-align: center; overflow: hidden; background: #fff; display: none; } .img-holder .imgBox { cursor: zoom-in; text-align: center; height:500px; overflow: hidden; background: #fff; display: block; position: relative; } .img-holder img { text-align: center; display: inline-block; border: 0; max-width: 90%; max-height: 90%; } .thumb { font-size: 0; text-align: center; width:100%; margin-top:15px } .thumb label { display: inline-block; width:100px; } .thumb label .box { cursor: pointer; cursor: cell;overflow: hidden; text-align: center; position: relative; margin: 0 0 15px 15px; height: 80px;} .thumb .imgBox:first-child .box{ margin-left:0} .thumb label img { display: inline-block; border:1px solid #e6e6e6; } .thumb label .box img[src=""] { display: none; } #imgView1:checked ~ .img-box #content1, #imgView2:checked ~ .img-box #content2, #imgView3:checked ~ .img-box #content3, #imgView4:checked ~ .img-box #content4, #imgView5:checked ~ .img-box #content5, #imgView6:checked ~ .img-box #content6, #imgView7:checked ~ .img-box #content7, #imgView8:checked ~ .img-box #content8, #imgView9:checked ~ .img-box #content9, #imgView10:checked ~ .img-box #content10, #imgView11:checked ~ .img-box #content11, #imgView12:checked ~ .img-box #content12, #imgView13:checked ~ .img-box #content13, #imgView14:checked ~ .img-box #content14, #imgView15:checked ~ .img-box #content15, #imgView16:checked ~ .img-box #content16, #imgView17:checked ~ .img-box #content17, #imgView18:checked ~ .img-box #content18, #imgView19:checked ~ .img-box #content19, #imgView20:checked ~ .img-box #content20 { display: block; } .tabs{ margin-top: 20px; background-color: #1b1b1b; } .tabs .tab-control{ display: none; } .tabs label { float: left; padding: 15px 23px; margin-bottom: 0; margin-right: 0; font-size: 13px; color: #fff; text-transform: uppercase; background-color: #1b1b1b; font-weight: 600; letter-spacing: 0.5px; } @media (max-width: 800px) { .tabs label{ float: none; display: block; margin: 0; border-bottom: 0; padding: 17px 15px; } } .tabs label:hover{ color: #fff; background-color: #02436d; cursor: pointer; } .tabs .tab-control:checked + label{ background-color: #02436d; color: #fff; } .tabs .tab-contents, .tabs .tab-contents-mobile{ background-color: #fff; } .tabs .tab-contents-mobile{ border-top: 0; } .tab-contents img, .tabs .tab-contents-mobile img {max-width:100%;} .tabs .tab-contents .tab-content, .tabs .tab-contents-mobile .tab-content-mobile{ animation-name: fadeIn; animation-duration: 1.0s; display: none; padding: 15px; font-size: 14px; background: #fff; border: 1px solid #e4e4e4; } @media (max-width: 800px) { .tabs .tab-contents .tab-content, .tabs .tab-contents-mobile .tab-content-mobile{ padding: 15px 15px; } .tabs .tab-contents{ display: none; } #tab-control-1:checked ~ .tab-contents-mobile #tab-content-1-mobile, #tab-control-2:checked ~ .tab-contents-mobile #tab-content-2-mobile, #tab-control-3:checked ~ .tab-contents-mobile #tab-content-3-mobile, #tab-control-4:checked ~ .tab-contents-mobile #tab-content-4-mobile, #tab-control-5:checked ~ .tab-contents-mobile #tab-content-5-mobile{ display: block; border-top: 1px solid #e8e8e2; } #tab-2-control-1:checked ~ .tab-contents-mobile #tab-2-content-1-mobile, #tab-2-control-2:checked ~ .tab-contents-mobile #tab-2-content-2-mobile, #tab-2-control-3:checked ~ .tab-contents-mobile #tab-2-content-3-mobile, #tab-2-control-4:checked ~ .tab-contents-mobile #tab-2-content-4-mobile, #tab-2-control-5:checked ~ .tab-contents-mobile #tab-2-content-5-mobile{ display: block; border-top: 1px solid #e8e8e2; } } @media (min-width: 801px) { .tabs .tab-contents-mobile{ display: none; } #tab-control-1:checked ~ .tab-contents #tab-content-1, #tab-control-2:checked ~ .tab-contents #tab-content-2, #tab-control-3:checked ~ .tab-contents #tab-content-3, #tab-control-4:checked ~ .tab-contents #tab-content-4, #tab-control-5:checked ~ .tab-contents #tab-content-5{ display: block; } #tab-2-control-1:checked ~ .tab-contents #tab-2-content-1, #tab-2-control-2:checked ~ .tab-contents #tab-2-content-2, #tab-2-control-3:checked ~ .tab-contents #tab-2-content-3, #tab-2-control-4:checked ~ .tab-contents #tab-2-content-4, #tab-2-control-5:checked ~ .tab-contents #tab-2-content-5{ display: block; } } .dec h1, .dec h2, .dec h3, .dec h4, .dec h5, .dec h6 { margin: 15px 0 5px; } .dec h1 { font-size: 30px; } .dec h2 { font-size: 20px; } .dec h3 { font-size: 14px; color:#000 } .dec h4 { font-size: 18px; } .dec h5 { font-size: 16px; } .dec h6 { font-size: 14px; } /* ----------------------------------------------------------------------------------- POPUP GALLERY -----------------------------------------------------------------------------------*/ @-webkit-keyframes zoom { from { -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); opacity: 0; } to { -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes zoom { from { -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); opacity: 0; } to { -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .img-holder .lightbox:before { content: ""; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); opacity: 0; visibility: hidden; overflow: hidden; z-index: 999; } .img-holder input:checked ~ .lightbox:before { position: fixed; opacity: 1; visibility: visible; top: 0; } .img-holder input:checked ~ .lightbox { position: static; cursor: zoom-out; } .img-holder input:checked ~ .lightbox .img-popup { position: absolute; top: 10vh; left: 0; right: 0; bottom: 0; margin: 0 auto; border: 10px solid #333; background-color: #fff; z-index: 9999; width: 90%; width: calc(100% - 30px); max-width: 800px; max-height: 600px; -webkit-animation: zoom 0.5s ease-out; animation: zoom 0.5s ease-out; } .img-holder input:checked ~ .lightbox .img-popup:after { content: ""; cursor: pointer; display: block; width: 40px; height: 40px; background: url() center center no-repeat #fff; -webkit-background-size: contain; background-size: contain; position: absolute; top: 5px; right: 5px; } .zdzBody [id^="popup"]:checked ~ .popup-bg { background-color: red; height: 10px; } #zdzContentsContainer .itemDescriptionC *, .tabBox * { } @media only screen and (min-width:1020px){ .zdzTabs .tabBox:first-child{ } }