@keyframes rotate3d {
    from { 
        transform: rotate3d(1, 0, 0, 0deg); 
        opacity: 0;
    }
    100% { 
        opacity: 1;
    }
    to { 
        transform: rotate3d(1, 0, 0, 360deg); 
        opacity: 1;
    }
}

@keyframes rotate3d_vertical {
    from { 
        transform: rotate3d(0, 1, 0, 0deg); 
        opacity: 0;
    }
    100% { 
        opacity: 1;
    }
    to { 
        transform: rotate3d(0, 1, 0, 360deg); 
        opacity: 1;
    }
}


@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoomIn {
    from { transform: scale(0.5); }
    to { transform: scale(1); }
}

@keyframes zoomOut {
    from {
        transform: scale(2);
        opacity: 0.3;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}


@keyframes slideDown {
    from { top: -100%; opacity: 1; }
    to { top: 0; opacity: 1; }
}

@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes overlayZoomIn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(1.3);
    }
    90% { 
        transform: scale(1.15);
    }
}


#innodigi-logo-container {
    opacity: 0;
    transition: opacity 0.5s ease;
}

#innodigi-logo-container.outside-border {
    opacity: 1;
}

#innodigi-logo-container.inside-border {
    padding: var(--logo-padding) !important;
    border: var(--logo-border-width) solid var(--logo-border-color) !important;
}

#innodigi-logo {
	margin: auto;
}

#innodigi-logo {
    transition: background-color 0.5s ease;
}

#innodigi-overlay {
	padding: 20px;
}

body.innodigi-disable-hover a:hover {
    transition: none !important;
    color: inherit !important;
    background: inherit !important;
}

body.innodigi-disable-hover .uk-light .uk-navbar-nav>li:hover>a::before {
	background: none;
}

body.innodigi-disable-hover .uk-navbar-transparent .uk-navbar-nav>li:not(.uk-active):hover>a {
	color: #fff;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #888;
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #ff643a;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.disable-transitions a,
.disable-transitions #innodigi-logo,
.disable-transitions #innodigi-overlay {
  transition: none !important;
  animation: none !important;
}

#toggle-transition {
    background-color: #eee;
    padding: 20px;
    padding-left: 100px;
    position: fixed;
    width: 200px;
    bottom: 0px;
    right: 0px;
    transform: translate(260px, 90px);
    z-index: 1039;
    border-radius: 8px;
    transition: transform 0.3s ease;
    line-height: 30px;
    color: #fff;
}

@media screen and (max-width: 768px) {
	#toggle-transition {
		display: none;
	}
}

#toggle-transition.no-hover-move:hover {
    transform: translate(0px, 90px);
}

#toggle-transition::before {
    content: url('/wp-content/plugins/innodigi-pagina-overgangen/images/tandwiel-icoon.svg');
    position: absolute;
    top: 12px;
    left: 12px;
    width: 40px;
    height: 40px;
}

#toggle-transition:hover {
    transform: translate(0, 0); 
}