/***********************/
/* Animation Shortcode */
/***********************/
.editor-content .animation-area {max-width: 100%; margin: 0 auto; position: relative;}

.editor-content .animation-area .toggle-area {display: flex; justify-content: center; margin-bottom: 40px;}
.editor-content .animation-area .toggle-area a {padding: 20px 35px; text-align: center; text-transform: uppercase; display: flex; align-items: center; justify-content: center; background-color: #ffffff; color: #000000; text-decoration: none; border: 1px solid #ffffff; outline: none !important;}
.editor-content .animation-area .toggle-area a.show {}
.editor-content .animation-area .toggle-area a.delivery {background-color: #0087b6; color: #ffffff; border-color: #0087b6;}
.editor-content .animation-area .toggle-area a.electric {background-color: #ffcb05; border-color: #ffcb05;}
.editor-content .animation-area .toggle-area a.mechanical {background-color: #25347a; color: #ffffff; border-color: #25347a;}
.editor-content .animation-area .toggle-area a:hover {background-color: #000000; color: #ffffff; border-color: #000000;}
.editor-content .animation-area .toggle-area a.show:hover {color: #0087b6; background-color: #ffffff; border-color: #ffffff;}

.editor-content .animation-area .image-holder {position: relative;}
.editor-content .animation-area .image-area:not(.full) {position: absolute; left: 0; right: 0; top: 0; opacity: 0; z-index: 2;}
.editor-content .animation-area .image-area.active {opacity: 1;}
.editor-content .animation-area .image-area img {max-width: 100%; margin: 0 auto; display: block;}

.editor-content .animation-area .image-area {-webkit-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out;}

@media (max-width: 991px) {
	.editor-content .animation-area .toggle-area {flex-direction: column; align-items: center;} 
	.editor-content .animation-area .toggle-area {max-width: 500px; width: 100%;}
}