/*  Copyright timehubzone.com, do not use without permission*/
.content-color >div{ padding: 30px 0}
 .cssslideshow {  
    height: 217px;
    width:90%;
    overflow: hidden;  
    text-align: center; 
    position:relative; background:#FFF;
}
    .cssslideshow .csslabel {
    border: none;
        display: inline-block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        transition: left ease-in-out 0.3s, clip ease-in-out 0.3s ;
        -webkit-transition: left ease-in-out 0.3s, clip ease-in-out 0.3s;
        -moz-transition: left ease-in-out 0.3s, clip ease-in-out 0.3s;
        -o-transition: left ease-in-out 0.3s, clip ease-in-out 0.3s;
       left: -100%; 
       display: flex;
       flex-wrap: wrap;
    text-align: center;
    }
    /* Except all the ones after checked radio button, those are waiting on the right... */
    .cssslideshow input:checked ~ .csslabel {
        left: 100%;
          width:100%;
    }
    /* Except the one immediately after checked radio button, that is in the container */
    .cssslideshow input:checked + .csslabel {
        left: 0;
          width:100%;
    }
    /* Puts our indicator dots at the bottom */
    .cssslideshow input {
        position: relative;
        top: 200px; 
        z-index:99
    }
    /* Now for the arrows... Sweet Lord. */
    .cssslideshow .csslabel:before,
    .cssslideshow .csslabel:after {
        display: block;
        position: absolute;
        width: 40px;
        height: 40px;
        top: 85px;
        transition: right ease-in-out 0.3s , left ease-in-out 0.3s;
        -webkit-transition: right ease-in-out 0.3s , left ease-in-out 0.3s;
        -moz-transition: right ease-in-out 0.3s , left ease-in-out 0.3s;
        -o-transition: right ease-in-out 0.3s , left ease-in-out 0.3s;
        background: rgb(255, 165, 0);
        font-size: 34px;
        font-family: Consolas;
        font-weight: 800;
        line-height: 37px;
        color: white;
        z-index: 1;
    }
    .cssslideshow .csslabel:hover:before,
    .cssslideshow .csslabel:hover:after {
        /* Styling */
        background: rgb(255, 195, 30);
    }
    .cssslideshow .csslabel:before {
        content: '>';
    }
    .cssslideshow .csslabel:after {
        content: '<';
    }
    /* Slides on the left */
    .cssslideshow .csslabel:before {
        right: -100%;
        cursor: default;
    }
    .cssslideshow .csslabel:after {
        left: 100%;
        opacity: 1;
        cursor: pointer;
        cursor: hand;
        transition: left ease-in-out 0.3s /* animation speed */;
        -webkit-transition: left ease-in-out 0.3s;
        -moz-transition: left ease-in-out 0.3s;
        -o-transition: left ease-in-out 0.3s;
    }
    /* Slides on the right */
    .cssslideshow input:checked ~ .csslabel:before {
        right: 100%;
        opacity: 1;
        cursor: pointer;
        cursor: hand;
        transition: right ease-in-out 0.3s /* animation speed */;
        
        -webkit-transition: right ease-in-out 0.3s;
        -moz-transition: right ease-in-out 0.3s;
        -o-transition: right ease-in-out 0.3s;
    }
    .cssslideshow input:checked ~ .csslabel:after {
        left: -100%;
        cursor: default;
        transition: opacity 0s ease-in-out 0s;  
        -webkit-transition: opacity 0s ease-in-out 0s;
        -moz-transition: opacity 0s ease-in-out 0s;
        -o-transition: opacity 0s ease-in-out 0s;
    }
    /* Active slide */
    .cssslideshow input:checked + .csslabel:before {
        right: 0;
        opacity: 0;
        cursor: default;
        transition: opacity 0s ease-in-out 0s;
        -webkit-transition: opacity 0s ease-in-out 0s;
        -moz-transition: opacity 0s ease-in-out 0s;
        -o-transition: opacity 0s ease-in-out 0s;
    }
    .cssslideshow input:checked + .csslabel:after {
        left: 0;
        opacity: 0;
        cursor: default;
    }
    /* Move the "proper" buttons to the front */
    .cssslideshow input + .csslabel:after {
        z-index: 3;
    }
    .cssslideshow input:checked ~ .csslabel:after {
        z-index: 1;
    }
    .cssslideshow input:checked + .csslabel + input + .csslabel:before {
        z-index: 3;
    }
    
     
.countdown .item {  
  height:90px;
  width: 18.6%;
  margin: 5px;
  padding: 5px;
  display: inline-block;
  background-color: #1d7fa3;
  color: white; 
  cursor: pointer ; 
  border: 4px solid #fff;  
justify-content: center;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.countdown .item:hover { 
  border: 4px solid #FFC733;
} 
.countdown .active { 
  border: 4px solid #FFC733;
} 
.item a{ color: #fff; text-decoration: none}
.holidayc{margin-top: -5%;}
.mpo-modal{ line-height: 3;font-size: 18px; display: block}
.countryfm{font-size: 18px;}
.error{ color: red;}
.editlocation{ 
    background-image: url('http://localhost/timehubzone/uploads/settings.png') ; 
     background-repeat: no-repeat;
     width:80px;
     height:30px;
     cursor: pointer;
     background-position: right; 
     padding: 10px; 
}
.time1 ul{   
  z-index:222;  
  border:1px gray solid; 
  background-color:#FAFAFA;
  padding: 4px 2px;  
  position: absolute;  
  visibility: hidden;
  margin: 0;
  height: 250px; width: 147px;
}.time1 ul li{
	cursor: pointer;
	text-align: center;
     margin: 0;
  font-size: 13px;
  font-weight: normal;
  list-style: none;
  display: inline-block;
      padding: 3px 8px;
}.time1 ul li:hover{ background: #666; color: #fff;}
 #formdate .dp-month{ width:90px; padding:0 10% 0% 0%}
.time1 .inputbox{ width:70px;}
#formdate .year{ width: 55px;}
#formdate .month{ width: 115px; height:299px}
#formdate .day{ width: 140px;}
#formdate .hours{ width: 175px; height:299px;}
#formdate .minutes{ width: 210px;} 
#formdate .seconds{ width: 210px;}  
.btnbox{ margin-top: 4%;}
.eventtitle .inputbox{ width:77%; display: block} 
#formdate .lab{ font-weight: bold; font-size: 18px; line-height: 2;}
 .labradio {
  display : block;
  margin-bottom : 5px;
}  
/* tabs css */ main section{display:none;}
main .tabs{display:none;}
main .label1{background:#eee; float: left;display:inline-block;margin:0 0 -1px;padding:10px 18px;font-weight:600;text-align:center;color:#888;border:1px solid transparent;}
main .label1:before{font-family:fontawesome;font-weight:normal;margin-right:10px;}
main .label1:hover{color:#888;cursor:pointer;}
main input:checked + label{color:#555;border:1px solid #ddd;border-top:2px solid orange;border-bottom:1px solid #fff;background:#fff;}
main #tab1:checked ~ #content1,main #tab2:checked ~ #content2,main #tab3:checked ~ #content3,main #tab4:checked ~ #content4{display:block;}
@media screen and (max-width:650px){main label{font-size:10px;padding:4px 6px;}
 main .label1:before{margin:0;font-size:18px;} }
@media screen and (max-width:768px){
    .cssslideshow { width:100%; height: 432px;}
 .cssslideshow input { 
        top: 400px;  
    }
    .countdown .item {  
  height:100px;
  width: 28%;
    }
.mpo-modal{ line-height: 3;}

.eventtitle .inputbox{ width:99%;}
#formdate .seconds { margin-left: -40%;}
}
@media screen and (max-width:400px){.label1{font-size:10px;padding:0px 0px;font-weight:100;}}/* end tbs*/
 
.mpo-modal-open:checked ~ .mpo-modal-wrap {
  display: block;
}
.mpo-modal-open:checked ~ .mpo-modal-wrap:before,
.mpo-modal-open:checked ~ .mpo-modal-wrap .mpo-modal-overlay {
  display: block;
}
.mpo-modal-close {
  cursor: pointer;
  font-size: 35px;
  font-weight: bold;
  line-height: 20px;
  padding: 10px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
}
/* modal */
.mpo-modal-wrap {
  display: none;
}
.mpo-modal-wrap:before {
  content: "";
  display: none;
 background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 101;
}  
.mpo-modal-body .label:before{ top: 20px;}
.mpo-modal-body {
   position: absolute; 
   top: 20%;
  left: 18%;  
  height: auto;     
  width: 60%;
  z-index: 103; 
  clear: both; 
    background: #FEFEFE;   
    border-radius: 10px; 
    color: #444;
     border: 4px solid #52d29a; 
     padding: 20px 10px; 
}
@media only screen and (max-width: 767px) {
  .mpo-modal-body {
    width: 100%;
    width: 100%; 
    top: 35%;
  left: 0;
  }   #mpo-modal-body{
    width: 100%;
} 
}