/* Style just for redirecting */
@import url('lib.css');
/* cblAirplainIcon.css */
@import url('cblAirplainIcon.css');

*{
	margin:0px;
	padding: 0px;
}

body
{
   /* background: blue;*/
   width:100%;
   height: 100vh;
   background-image: linear-gradient(rgba(54, 142, 224,.7) 100%,
                                     rgba(54, 142, 224,.7) 100%),
                                     url('../DocumentStorage/CustomerFiles/l_CBL_loginAspx.jpg');
   background-repeat: no-repeat;
   background-size: cover; /* #1C2833; */
}

#CBLPageRedirecting{
    width:100%;
    height: 100vh;	
    color: #1C2833;
        /* using flex box*/
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


h1 {
    font-family: 'Roboto Flex Variable', 'Roboto', sans-serif;
    font-weight: lighter;
    font-size: 2em;
    color: #fff;
    margin-top: 12px;
}

#CBL_loading
{   
}


/* cbl-Airplain */
.cbl-Airplain
{
    color: #fff;
    
        text-shadow: 0em 0em .95em rgba(0,0,0,.91);
  

    font-size: 10em;
}




/* Class: .cbl-Airplain */
.cbl-Airplain
{


       transform: rotate(26deg);
    
            
    animation-name: redirecting;
    animation-duration: 3s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    

        position: relative;
}



    /* Class : .CblPointTitle */
   .CblPointTitle
    {
        width: 1em;
        height: 1em;
        float: left;
        margin-top: .25em;
        margin-bottom: .25em;
        margin-left: .25em;   
        margin-right: .25em;            
        display: inline !important;
        border: solid 1px green;
        border-radius: 100%;
        
            background: #368ee0;

            box-shadow: 0em 0em .25em rgba(54, 142, 224,.7);
          

                animation-name: CblScaling;
                animation-duration: 3s;
                animation-direction: alternate;
                animation-iteration-count: infinite;
                
            
     
                    position: relative;
    }
   /* ++++++++++++++++++++++++++++++++++++++++++++
           START: CBlAnimationAirplain
    ++++++++++++++++++++++++++++++++++++++++++++ */  

    @keyframes redirecting
    {
       
        10%
        {
            transform: rotate(0deg);   
          
        }

        from
        {
            opacity: 0;
            margin-left: -3.25em;

            transform: rotate(0deg);
           
        }
 

        50%
        {
            transform: rotate(26deg);              
               
        }
 
        40%
        {
                            
          margin-top: -2em;  
          margin-left: 1em;            
        }

        to
        {
             transform: rotate(26deg);                
          

             margin-left: 0em;
            
        }

        5%
        {
            opacity: 0;
        }

       
    }



    @keyframes CblScaling
    {

        from
        {
            transform: scale(0.25);                
         
        }

        to
        {
            transform: scale(1.25);                
           
        }
    }


 

    

     /* ++++++++++++++++++++++++++++++++++++++++++++
           END: CBlAnimationAirplain
    ++++++++++++++++++++++++++++++++++++++++++++ */  



    /* ++++++++++++++++++++++++++++++++++++++++++++
           START: TRANSITION 
    ++++++++++++++++++++++++++++++++++++++++++++ */  
     body,
     /* Id : CBLPageRedirecting */
     #CBLPageRedirecting,
     /* title */
     h1,
     /* Class: .cbl-Airplain */
    .cbl-Airplain
    {
        transition: all 0.5s ease-out;
         
    }

    /* ++++++++++++++++++++++++++++++++++++++++++++
            END: TRANSITION 
    ++++++++++++++++++++++++++++++++++++++++++++ */  


 /* ++++++++++++++++++++++++++++++++++++++++++++
        START: RESPONSIVE 
    ++++++++++++++++++++++++++++++++++++++++++++ */    

    @media only  screen and ( max-width: 1024px)
    {
       
        /* title */
        h1       
        {
            font-size: 4em;
            color:#fff;
        }

         /* cbl-Airplain */
         .cbl-Airplain
         {
             font-size: 12em;
             color: #fff;                
         }


         .CblPointTitle
         {
             width: 3em;
             height: 3em;
             margin-top: 1em;
             margin-bottom: 1em;
         }
    }


    @media only  screen and ( max-width: 940px)
    {
        
        /* title */
        h1      
        {
            font-size: 4em;
            color:  #fff;
        }

          /* cbl-Airplain */
          .cbl-Airplain
          {
              font-size: 12em;
              color: #fff;                
          }

    }



    @media only  screen and ( max-device-width: 780px)
    {
          /* title */
          h1         
          {
              font-size: 4em;
              color:  #fff;
          }

           /* cbl-Airplain */
           .cbl-Airplain
           {
               font-size: 12em;
               color: #fff;                
           }
    }


    @media only  screen and ( max-device-width: 500px)
    {
          /* title */
          h1        
          {
              font-size: 6em;
              color:  #fff;
          }

          /* cbl-Airplain */
          .cbl-Airplain
          {
              font-size: 16em;
              color: #fff;                
          }
    }
 /* ++++++++++++++++++++++++++++++++++++++++++++
        END: RESPONSIVE 
    ++++++++++++++++++++++++++++++++++++++++++++ */