/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/

.tab.tab-col .excerpt-info .preloader .img.user img {

    object-fit: contain !important;
    margin-top: 0.5vw;
}
.col-md-offset-1{
    margin-left: 25% !important;
    margin-bottom: 15vw;
    font-weight: 400;
}
#main #main-buttons {
    margin-top: 16vh; 
}

#header .brand.company-logo-and-name .logo>a img, #header .brand.company-logo-only .logo>a img {
    max-height: 110px;
    margin-top: 1vw;
}

#header .nav-wrapper {
    margin-top: 3vw;
}

div.content > .cap:hover {
    animation:  shake 1.5s  ;
  }
  
  @keyframes shake{
     0% { transform: skewX(-15deg); }
  5% { transform: skewX(15deg); }
  10% { transform: skewX(-15deg); }
  15% { transform: skewX(15deg); }
  20% { transform: skewX(0deg); }
  100% { transform: skewX(0deg); } 
  }

.btn.custom  a:hover{
background-color: white !important;
    border-color: #f27edb;
    color: black !important;

}



.btn.custom a{
}

#sb-timeline #steps #time-settings {
    padding: 5px 0 15px;
}




a.popup-hide {
  text-decoration: none;
  color: inherit;
}

.popup-hide {
  display: inline-block;
  padding-bottom: 0.25rem; /* defines the space between text and underline */
  position: relative;
}

.popup-hide::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #f27edb;
  transition: width 0.25s ease-out;
}
.popup-hide:hover::before {
  width: 100%;
}

.container-fluid  > .row.row-eq-height {

    background-image: url(https://media1.giphy.com/media/da6mxsjwhjreC7J7S0/giphy.gif);
    background-size: 5.5vw;
    background-position-y: -1vw;
    background-repeat: repeat-x;
}




div.service-step > div.service-item > .tab {
height: 25vh;
  --border-size: 3px;
  --border-angle: 0turn;
  background-image: conic-gradient(from var(--border-angle), #fff, #fff 50%, #fff), conic-gradient(from var(--border-angle), transparent 20%, lightyellow, pink);
}

div.service-step > div.service-item > .tab:hover {
    width: 400px;
    height: 38vh;
    right: 1vw;
    position: relative;
 background-size: calc(100% - (var(--border-size) * 2)) calc(100% - (var(--border-size) * 2)), cover;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-animation: bg-spin 3s linear infinite;
          animation: bg-spin 3s linear infinite;
}
@-webkit-keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}
@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}


@media (max-width: 900px){

#main #main-buttons .wrapper .inner .bar .btn {
    background-color: #f27edb;
    left: 23vw;
}

.container-fluid > .row.row-eq-height {
    background-size: 11.5vw;
    background-position-y: -2vw;
    background-repeat: repeat-x;
}

.logo > a > img {
    padding-top: 21px;
}

#header{
padding-bottom: 10px;
}

header .brand.company-logo-and-name .logo>a img, #header .brand.company-logo-only .logo>a img {
    max-height: 127px;
}

.title-main {
    text-align: center;

  background: url(https://media.giphy.com/media/ociWQl2KTrBtCNxkho/giphy.gif);
  background-size: contain;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

.col-md-offset-1 {
    margin-left: 6% !important;
margin-left: 0px !important;
}

#main #main-buttons {
background-size: contain !important;
    background-size: 195px 196px !important;
    background-position: center;
    margin-top: 100px;
    background-position: center !important;



   
}

.txt {
 margin-right: 20vw;
    font-weight: 500;
}

#main #main-buttons .column {
    margin-top: 0;
    margin-bottom: auto;
}

#header .brand.company-logo-and-name .logo>a img, #header .brand.company-logo-only .logo>a img {
        margin: -20px 31vw;
}

#time-settings{
    display: none;
}

}

 #events h3   {
	/* add your css rule here */
}


 #events p.duration, #events div.duration   {
	/* add your css rule here */
}


 #events p.description, #events div.description   {
	/* add your css rule here */
}


 #events .selectedEvent   {
	/* add your css rule here */
}


 #events input.reserve_time_btn   {
	/* add your css rule here */
}


 #events input.select_another_btn   {
	/* add your css rule here */
}


 #eventForm #start_date-block-container h3, #eventForm #timeline-container h3   {
	/* add your css rule here */
}


 #eventForm #save_button   {
	/* add your css rule here */
}


 div.ui-widget-content   {
	/* add your css rule here */
}


 div.ui-widget-header   {
	/* add your css rule here */
}


 #timeline-container table.timeline   {
	/* add your css rule here */
}


 .timeline td.not_worked_time   {
	/* add your css rule here */
}


 .timeline td.free_time   {
	/* add your css rule here */
}


 .timeline td.selected_time   {
	/* add your css rule here */
}


 .timeline td.reserved_time   {
	/* add your css rule here */
}


 div#loading   {
	/* add your css rule here */
}


 #start_date-block-container .zend_form dt, start_date-block-container .zend_form dt b, start_date-block-container .zend_form dd label   {
	/* add your css rule here */
}