/*! ------------------------------------------------
 * Project Name: Ramio Coming Soon Template
 * Project Description: Ramio - awesome coming soon template to kick-start your project
 * Tags: Ramio, coming soon, under construction, template, coming soon page, html5, css3
 * Version: 2.0.0
 * Build Date: April 2018
 * Last Update: September 2021
 * This product is available exclusively on Themeforest
 * Author: mix_design
 * Author URI: http://mixdesign.club
 * File name: loader-clor-1.css
 * ------------------------------------------------ */
.loader{position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 1000;background-color: #0c0c0c;opacity: 1;visibility: visible;-webkit-transition: visibility 0.4s 0s, opacity 0.4s, background-color 0.6s ease-in-out;-o-transition: visibility 0.4s 0s, opacity 0.4s, background-color 0.6s ease-in-out;-moz-transition: visibility 0.4s 0s, opacity 0.4s, background-color 0.6s ease-in-out;transition: visibility 0.4s 0s, opacity 0.4s, background-color 0.6s ease-in-out}.loader.loaded{opacity: 0;visibility: hidden}.loader-content{position: absolute;left: 50%;top: 50%;bottom: auto;right: auto;-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%)}.loader-logo{position: relative;display: block;margin: 0 auto 5px;overflow: hidden}.loader-logo img{display: block;width: auto;height: auto;z-index: 0}.loader-caption{margin: 0 auto;text-align: center}.loader-caption p{position: relative;line-height: 2;display: inline-block;text-align: center;overflow: hidden}.loader-caption p, .loading-dots{left:3px}.loading-dots{position: relative;line-height: 1;display: inline-block;width: 36px;height: 13px;text-align: center;overflow: hidden}.loading-dots::after{clear: both;content: "";display: table}.loading-dots .dot{display: block;float: left;width: 3px;height: 3px;margin: 0px 3px 0 3px;background: #FFFFFF;opacity: 0;-moz-border-radius: 50%;border-radius: 50%;-webkit-animation: fade 1s infinite;-moz-animation: fade 1s infinite;animation: fade 1s infinite}.loading-dots .dot:nth-of-type(1){-webkit-animation-delay: 0s;-moz-animation-delay: 0s;animation-delay: 0s}.loading-dots .dot:nth-of-type(2){-webkit-animation-delay: 0.1s;-moz-animation-delay: 0.1s;animation-delay: 0.1s}.loading-dots .dot:nth-of-type(3){-webkit-animation-delay: 0.2s;-moz-animation-delay: 0.2s;animation-delay: 0.2s}@-webkit-keyframes fade{0%{opacity: 0}50%{opacity: 0.8}100%{opacity: 0}}@-moz-keyframes fade{0%{opacity: 0}50%{opacity: 0.8}100%{opacity: 0}}@keyframes fade{0%{opacity: 0}50%{opacity: 0.8}100%{opacity: 0}}@-webkit-keyframes slideInDown{from{-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);visibility: visible}to{-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0)}}@-moz-keyframes slideInDown{from{-moz-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);visibility: visible}to{-moz-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0)}}@keyframes slideInDown{from{-webkit-transform: translate3d(0, -100%, 0);-moz-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);visibility: visible}to{-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0)}}.slideInDown{-webkit-animation: 0.6s 1 both slideInDown;-moz-animation: 0.6s 1 both slideInDown;animation: 0.6s 1 both slideInDown}@-webkit-keyframes slideInUp{from{-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);visibility: visible}to{-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0)}}@-moz-keyframes slideInUp{from{-moz-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);visibility: visible}to{-moz-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0)}}@keyframes slideInUp{from{-webkit-transform: translate3d(0, 100%, 0);-moz-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);visibility: visible}to{-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0)}}.slideInUp{-webkit-animation: 0.6s 1 both slideInUp;-moz-animation: 0.6s 1 both slideInUp;animation: 0.6s 1 both slideInUp}@-webkit-keyframes fadeOutUp{from{opacity: 1}to{opacity: 0;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0)}}@-moz-keyframes fadeOutUp{from{opacity: 1}to{opacity: 0;-moz-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0)}}@keyframes fadeOutUp{from{opacity: 1}to{opacity: 0;-webkit-transform: translate3d(0, -100%, 0);-moz-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0)}}.fadeOutUp{-webkit-animation: 0.6s 1 both fadeOutUp;-moz-animation: 0.6s 1 both fadeOutUp;animation: 0.6s 1 both fadeOutUp}@-webkit-keyframes fadeOutDown{from{opacity: 1}to{opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0)}}@-moz-keyframes fadeOutDown{from{opacity: 1}to{opacity: 0;-moz-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0)}}@keyframes fadeOutDown{from{opacity: 1}to{opacity: 0;-webkit-transform: translate3d(0, 100%, 0);-moz-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0)}}.fadeOutDown{-webkit-animation: 0.6s 1 both fadeOutDown;-moz-animation: 0.6s 1 both fadeOutDown;animation: 0.6s 1 both fadeOutDown}