.overlay { display:none; position: fixed; width: 100%; height: 100%; background-color: rgba(0,0,0,.6); z-index:10000 !important; }
.loader { font-family: 'Roboto', sans-serif !important; width: 600px; height: 400px; background-color: #fff; border-radius: 10px; position: fixed; /*it can be fixed too*/ left: 0; right: 0; top: 0; bottom: 0; margin: auto;  /*this to solve "the content will not be cut when the window is smaller than the content": */ max-width: 100%; max-height: 100%; overflow: hidden; -webkit-box-shadow: 4px 3px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 4px 3px 5px 0px rgba(0,0,0,0.75); box-shadow: 4px 3px 5px 0px rgba(0,0,0,0.75); }
 .loader h1 { font-family: 'Roboto', sans-serif !important;text-align: center; font-size: 24px; color: #08487e; font-weight: 400 !important; margin-top: 0px; }
.loader-top {  width:100%; height: 230px; background-color: #a51e24; background-image: url(~/content/images/top-bg.jpg); display:block;-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;box-sizing: border-box !important; }
.l-dest {font-family: 'Roboto', sans-serif !important; font-size: 20px; color: #fff; text-align: center; margin-top: 55px; font-weight: 400 !important; }
.l-date {font-family: 'Roboto', sans-serif !important; font-size: 14px; color: #fff; text-align: center; margin-bottom: 10px; }
.mid-flight-img { margin-top: 115px; }
.loader-bottom { text-align: center; padding-top: 40px; padding-bottom: 20px; color: #fff; }
     .loader-bottom .lb-head-01 {font-family: 'Roboto', sans-serif !important; font-size: 24px; color: #bb2025; margin: 0px 0px 0px 0px; padding: 0px; font-weight: 400 !important; }
    .loader-bottom .lb-head-02 {font-family: 'Roboto', sans-serif !important; font-size: 14px!important; color: #010101!important; margin: 0px 0px 0px 0px!important; padding: 0px!important; font-weight: 400 !important; background:none !important; text-align:center !important; }
    .loader-bottom .lb-head-03 {font-family: 'Roboto', sans-serif !important; font-size: 28px; color: #1b1b1b; margin: 0px; padding: 0px; font-weight: 600 !important; text-align:center; }
#flight-img { position: absolute; top: 195px; z-index: 10000; }


#background-wrap { bottom: 0; left: 0; position: absolute; right: 0; top: 0; z-index: 1000; }

/* KEYFRAMES */

@-webkit-keyframes animateCloud {
    0% { margin-left: -800px; }
    100% { margin-left: 100%; }
}

@-moz-keyframes animateCloud {
    0% { margin-left: -800px; }
    100% { margin-left: 100%; }
}

@keyframes animateCloud {
    0% { margin-left: -800px; }
    100% { margin-left: 100%; }
}


@-webkit-keyframes animateFlight {
    0% { margin-left: 0px; }
    100% { margin-left: 100%; }
}

@-moz-keyframes animateFlight {
    0% { margin-left: 0px; }
    100% { margin-left: 100%; }
}

@keyframes animateFlight {
    0% { margin-left: 0px; }
    100% { margin-left: 100%; }
}

/* ANIMATIONS */

.x1 { -webkit-animation: animateCloud 45s linear infinite; -moz-animation: animateCloud 45s linear infinite; animation: animateCloud 45s linear infinite; -webkit-transform: scale(0.35); -moz-transform: scale(0.35); transform: scale(0.35); }

.x2 { -webkit-animation: animateCloud 25s linear infinite; -moz-animation: animateCloud 25s linear infinite; animation: animateCloud 25s linear infinite; -webkit-transform: scale(0.2); -moz-transform: scale(0.2); transform: scale(0.2); }

.x3 { -webkit-animation: animateFlight 1s linear infinite; -moz-animation: animateFlight 1s linear infinite; animation: animateFlight 1s linear infinite; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); margin-top: -50px; }

.x4 { -webkit-animation: animateCloud 18s linear infinite; -moz-animation: animateCloud 18s linear infinite; animation: animateCloud 18s linear infinite; -webkit-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1); }

.x5 { -webkit-animation: animateCloud 25s linear infinite; -moz-animation: animateCloud 25s linear infinite; animation: animateCloud 25s linear infinite; -webkit-transform: scale(0.25); -moz-transform: scale(0.25); transform: scale(0.25); }

/* OBJECTS */

.cloud { background: #fff; background: -moz-linear-gradient(top, #fff 5%, #f1f1f1 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#fff), color-stop(100%,#f1f1f1)); background: -webkit-linear-gradient(top, #fff 5%,#f1f1f1 100%); background: -o-linear-gradient(top, #fff 5%,#f1f1f1 100%); background: -ms-linear-gradient(top, #fff 5%,#f1f1f1 100%); background: linear-gradient(top, #fff 5%,#f1f1f1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1',GradientType=0 ); -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); height: 120px; position: relative; width: 350px; }

    .cloud:after, .cloud:before { background: #fff; content: ''; position: absolute; z-indeX: -1; }

    .cloud:after { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; height: 100px; left: 50px; top: -50px; width: 100px; }

    .cloud:before { -webkit-border-radius: 200px; -moz-border-radius: 200px; border-radius: 200px; width: 180px; height: 180px; right: 50px; top: -90px; }
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    .loader { width: 350px; }
    .map-icon { display: none; }
    .l-dest { margin-top: 15px; }
    .l-date { margin-top: 0px; }
    .mid-flight-img { margin-top: 10px; }
    .loader-bottom h1 { font-size: 18px; }
    .loader-bottom h2 { font-size: 13px; }
    .loader-bottom h3 { font-size: 17px; }
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
    .loader { width: 350px; }
    .map-icon { display: none; }
    .l-dest { margin-top: 15px; }
    .l-date { margin-top: 0px; }
    .mid-flight-img { margin-top: 10px; }
    .loader-bottom h1 { font-size: 18px; }
    .loader-bottom h2 { font-size: 13px; }
    .loader-bottom h3 { font-size: 17px; }
    .loader-bottom .lb-head-03{font-size:16px;}
}

@media only screen and (max-width : 320px) {
    .loader { width: 300px; }
    .map-icon { display: none; }
    .l-dest { margin-top: 15px; }
    .l-date { margin-top: 0px; }
    .mid-flight-img { margin-top: 10px; }
    .loader-bottom h1 { font-size: 18px; }
    .loader-bottom h2 { font-size: 13px; }
    .loader-bottom h3 { font-size: 17px; }
    .loader-bottom .lb-head-03{font-size:16px;}
}