body{
    --padding-x: 5px;
    --placeholder-font-size: 18px;
    --placeholder-font-weight: 400;
    --letter-space: 2px;
    --letter-space-2: 2px;
    --form-padding: 12px 15px;
    --form-font-size: 18px;
}

html{ height: 100vh; }
body{ height: 100vh;}
.wrapper{ height: 100vh; display: flex; }
.wrapper .left{
    height: 100vh;
    background-image: url(../../../file/img/tanitim/sirius-background_min.jpg);
    background-position: 21% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    width: 68%;
}
.wrapper .left .top-wrapper{ display: flex; }
.wrapper .left .top-wrapper .logo{  filter: brightness(1.3); margin-top: 50px; margin-left: 100px;}
.wrapper .left .top-wrapper .content{ margin-left: auto; margin-right: 382px; margin-top: 53px; }
.wrapper .left .top-wrapper .motto{ font-size: 50px; font-weight: 300; text-align: right;}
.wrapper .left .top-wrapper .desc{ font-size: 20px; text-align: right; color: #777; letter-spacing: var(--letter-space); }
.wrapper .right{ height: 100vh; background-color: #336894; width: 32%; padding-left: 45px; padding-right: 45px; }
.wrapper .right > div{ display: flex; flex-direction: column; height: 100%; }
.wrapper .right .content{ margin-top: auto; margin-bottom: auto; }
.wrapper .right .line-1{ color: #FFF; font-size: 36px; font-weight: 600; text-align: center; margin-bottom: 30px; }
.wrapper .right .line-2{ color: #FFF; font-size: 40px; font-weight: 300; text-align: center; margin-bottom: 40px; margin-top: 0; letter-spacing: var(--letter-space); }

.wrapper .right .application-form{  }
.wrapper .right .application-form input{
    border-radius: 0; background-color: #d8d8d8; transition: .5s; min-height: auto;
    padding: var(--form-padding); font-size: var(--form-font-size);
}
.wrapper .right .application-form input::placeholder{
    font-weight: var(--placeholder-font-weight); letter-spacing: var(--letter-space);
    font-size: var(--placeholder-font-size);
}
.wrapper .right .application-form input:focus{ background-color: #FFF; }
.wrapper .right .application-form textarea{
    border-radius: 0; background-color: #d8d8d8; transition: .5s; padding: var(--form-padding);
    font-size: var(--placeholder-font-size);
}
.wrapper .right .application-form textarea::placeholder{
    font-weight: var(--placeholder-font-weight); letter-spacing: var(--letter-space);
    font-size: var(--placeholder-font-size);
}
.wrapper .right .application-form textarea:focus{ background-color: #fff; }
.wrapper .right .application-form .btn-wrapper{ margin-top: 30px; text-align: center; }
.wrapper .right .application-form .btn-submit{
    border-radius: 20px; background-color: #767575; border: none; letter-spacing: var(--letter-space-2);
    padding: 10px 25px; font-size: 20px;
}
.wrapper .right .application-form .btn-submit:hover{ background-color: #6b6b6b; border: none; }


.wrapper .right .application-form .row{ padding-left: var(--padding-x); padding-right: var(--padding-x); }
.wrapper .right .application-form .form-group{
    margin-bottom: calc(var(--padding-x) * 2); padding-left: var(--padding-x); padding-right: var(--padding-x);
}
.wrapper .right .sirius-logo{ text-align: center; margin-bottom: auto; }
.wrapper .right .sirius-logo img{ width: 400px; }

.invalid-feedback{ color: pink !important; }




/**********************************************************************************************************************/
/******************************************************* DESKTOP ******************************************************/
/**********************************************************************************************************************/
/* 6- DESKTOP SCREEN - 4K SCREEN */
@media only screen and (max-width: 2560px){

}
/* 5- DESKTOP SCREEN - 2K SCREEN */
@media only screen and (max-width: 2048px){

}
/* 1- DESKTOP SCREEN - FULL HD SCREEN */
@media only screen and (max-width: 1920px){
    .wrapper .left{
        background-position: 21% 50%;
        background-size: cover;
    }
    .wrapper .right .sirius-logo img{ width: 320px; }
}
/* 4- DESKTOP SCREEN - 1440 x 900 */
@media only screen and (max-width: 1730px){
    body{
        --padding-x: 5px;
        --placeholder-font-size: 14px;
        --placeholder-font-weight: 400;
        --letter-space: 2px;
        --form-padding: 5px 10px;
        --form-font-size: 16px;
    }

    .wrapper .left{ width: 65%; background-position: 41% 50%; }
    .wrapper .right{ width: 35%; }

    .wrapper .left .top-wrapper .logo{ margin-top: 50px; margin-left: 50px; width: 150px; height: 135px; }
    .wrapper .left .top-wrapper .content{ margin-top: 34px; margin-right:277px; }
    .wrapper .left .top-wrapper .motto{ font-size: 38px; }
    .wrapper .left .top-wrapper .desc{ font-size: 14px; }
    .wrapper .right .line-1{ font-size: 28px; margin-bottom: 30px; }
    .wrapper .right .line-2{ font-size: 32px; margin-bottom: 40px; }
    .wrapper .right .application-form .btn-submit{padding: 8px 25px;font-size: 14px;}
    .wrapper .right .sirius-logo img{ width: 250px; }
}
/* 2- DESKTOP SCREEN - HD SCREEN */
@media only screen and (max-width: 1366px){

    .wrapper .left{ width: 65%; background-position: 25% 50%; }
    .wrapper .right{ width: 35%; }

    .wrapper .left .top-wrapper .logo{ margin-top: 50px; margin-left: 50px; width: 150px; height: 135px; }
    .wrapper .left .top-wrapper .content{ margin-top: 34px; margin-right:258px; }
    .wrapper .left .top-wrapper .motto{ font-size: 34px; }
    .wrapper .left .top-wrapper .desc{ font-size: 12px; }
    .wrapper .right .line-1{ font-size: 28px; margin-bottom: 30px; }
    .wrapper .right .line-2{ font-size: 32px; margin-bottom: 40px; }
    .wrapper .right .application-form .btn-submit{padding: 8px 25px;font-size: 14px;}
    .wrapper .right .sirius-logo img{ width: 250px; }

}
/* 3- DESKTOP SCREEN - 1280 x 720 */
@media only screen and (max-width: 1280px) {

}




/**********************************************************************************************************************/
/******************************************************* TABLET *******************************************************/
/**********************************************************************************************************************/
/*!*04*! @media only screen and (width: 1536px) and (height: 864px){
    .wrapper .left{ width: 65%; background-position: 41% 50%; }
    .wrapper .right{ width: 35%; }

    .wrapper .left .top-wrapper .logo{ margin-top: 50px; margin-left: 50px; width: 150px; height: 135px; }
    .wrapper .left .top-wrapper .content{ margin-top: 34px; margin-right:300px; }
    .wrapper .left .top-wrapper .motto{ font-size: 42px; }
    .wrapper .left .top-wrapper .desc{ font-size: 16px; }
    .wrapper .right .line-1{ font-size: 28px; margin-bottom: 30px; }
    .wrapper .right .line-2{ font-size: 32px; margin-bottom: 40px; }
    .wrapper .right .application-form .btn-submit{padding: 8px 25px;font-size: 14px;}
    .wrapper .right .sirius-logo img{ width: 250px; }
}
!*10*! @media only screen and (max-width: 1280px) and (max-height: 720px){}*/




/**********************************************************************************************************************/
/******************************************************* PHONE *******************************************************/
/**********************************************************************************************************************/
/* ALL PHONE */ @media only screen and (max-width: 1024px){
    .wrapper .left{ display: none;}
    .wrapper .right{ width: 100%; }
}
/*/!*03*! @media only screen and (max-width: 414px) and (max-height: 896px){}
!*07*! @media only screen and (max-width: 412px) and (max-height: 915px){}
!*08*! @media only screen and (max-width: 375px) and (max-height: 812px){}
!*06*! @media only screen and (max-width: 375px) and (max-height: 667px){}
!*01*! @media only screen and (max-width: 360px) and (max-height: 800px){}
!*05*! @media only screen and (max-width: 360px) and (max-height: 780px){}
!*09*! @media only screen and (max-width: 360px) and (max-height: 760px){}
!*02*! @media only screen and (max-width: 360px) and (max-height: 640px){}*!*/