@media (orientation: landscape) {
    
    main#login{
        left: 0;
        width: 100%;
        top: 0;
        height: 100vh;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .banner{
        width: calc(100% - 60vh);
        height: 100vh;
        position: relative;
    }

    .banner__image{
        width: 100%;
        height: 100vh;
        background-image: var(--banner);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        filter: grayscale(100%);
    }

    .banner__background{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.8;
        background: linear-gradient(135deg, var(--color) 0%, var(--color2) 100%);
    }

    .banner__info{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-direction: column;
        color: white;
        padding: 5vh;
        box-sizing: border-box;
        text-align: center;
    }

    .banner__title{
        font-size: 250%;
        font-weight: 700;
        line-height: 120%;
    }

    .banner__text{
        font-size: 150%;
        font-weight: 400;
        line-height: 120%;
        margin-top: 2vh;
    }

    .login{
        width: 60vh;
        height: 100vh;
        background-color: var(--background);
        padding: 5vh;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .login__logo{
        background-image: var(--logo);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 100%;
        height: 4vh;
    }

    .login__main{
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        width: 100%;
        flex-wrap: wrap;
    }

    .login__title{
        font-size: 150%;
        font-weight: 700;
        margin-bottom: 1vh;
        color: var(--color);
    }

    .login__text{
        color: var(--font2);
        font-size: 90%;
        margin-bottom: 1vh;
    }

    .login__name{
        font-weight: 700;
        margin-top: 2vh;
    }

    .login__flex{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .login__link{
        color: var(--font2);
        font-size: 90%;
        margin-top: 2vh;
    }

    .login__link:hover{
        color: var(--color);
        cursor: pointer;
    }

    .login__input{
        width: 100%;
        margin-top: 1vh;
        position: relative;
    }

    .login__input input{
        width: 100%;
        border-radius: 1vh;
        border: 1px solid var(--background2);
        outline: none;
        padding: 1.5vh 1.5vh 1.5vh 4.5vh;
        box-sizing: border-box;
        font-size: 90%;
    }

    .login__input input::-webkit-input-placeholder{
        color: var(--font2);
    }
    
    .login__input input:-ms-input-placeholder{
        color: var(--font2);
    }
    
    .login__input input::placeholder{
        color: var(--font2);
    }

    .login__input svg{
        position: absolute;
        width: 2vh;
        height: 2vh;
        left: 1.5vh;
        top: 1.5vh;
    }

    .login__input path{
        fill: var(--color);
    }

    .login__button{
        background-color: var(--color);
        color: white;
        padding: 1.5vh;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        width: 100%;
        border-radius: 1vh;
        font-size: 90%;
        font-weight: 700;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 2vh;
        border: none;
    }

    .login__button:hover{
        cursor: pointer;
        background-color: var(--background2);
        color: var(--color);
    }

    .login__button svg{
        width: 2vh;
        height: 2vh;
        display: block;
        margin-right: 1vh;
    }

    .login__button path{
        fill: white;
    }

    .login__button:hover path{
        fill: var(--color);
    }

    .login__subtext{
        text-align: center;
        margin-top: 3vh;
        color: var(--font2);
        font-size: 90%;
        width: 100%;
    }

    .login__social{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-top: 1vh;
    }

    .login__social__item{
        width: 4vh;
        height: 4vh;
        margin: 0 0.5vh;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .login__social__item svg{
        width: 2.5vh;
        height: 2.5vh;
        display: block;
    }

    .login__social__item path{
        fill: white;
    }

    .login__social__item.facebook{
        background-color: #1877F2;
    }

    .login__social__item.google{
        background-color: #DD4C39;
    }

    .login__social__item.twitter{
        background-color: #00ABF0;
    }

    .login__social__item.apple{
        background-color: #000000;
    }

    .login__social__item:hover{
        background-color: var(--background2);
        cursor: pointer;
    }

    .login__social__item.facebook:hover path{
        fill: #1877F2;
    }

    .login__social__item.google:hover path{
        fill: #DD4C39;
    }

    .login__social__item.apple:hover path{
        fill: #000000;
    }

    .login__social__item.twitter:hover path{
        fill: #00ABF0;
    }

    .login__footer{
        color: var(--font2);
    }

    .login__footer span{
        font-weight: 700;
        color: var(--font);
    }

    .login__footer span:hover{
        cursor: pointer;
        color: var(--color);
    }

}

@media (orientation: portrait) {

    main#login{
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        height: 100%;
        z-index: 99;
    }

    .banner{
        width: 100%;
        height: 30%;
        position: relative;
    }
    
    .banner__image{
        width: 100%;
        height: 100%;
        background-image: var(--banner);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        filter: grayscale(100%);
    }
    
    .banner__background{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.8;
        background: linear-gradient(135deg, var(--color) 0%, var(--color2) 100%);
    }
    
    .banner__info{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: white;
        padding: 3vh;
        box-sizing: border-box;
        text-align: center;
    }
    
    .banner__title{
        font-size: 200%;
        font-weight: 700;
        line-height: 120%;
    }
    
    .banner__text{
        font-size: 120%;
        font-weight: 400;
        line-height: 120%;
        margin-top: 2vh;
    }
   
    .login{
        width: 100%;
        height: 70%;
        background-color: var(--background);
        padding: 3vh;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    
    .login__logo{
        background-image: var(--logo);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 100%;
        height: 4vh;
    }
    
    .login__main{
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        width: 100%;
        flex-wrap: wrap;
    }
    
    .login__title{
        font-size: 150%;
        font-weight: 700;
        margin-bottom: 1vh;
        color: var(--color);
    }
    
    .login__text{
        color: var(--font2);
        font-size: 90%;
        margin-bottom: 1vh;
    }
    
    .login__name{
        font-weight: 700;
        margin-top: 2vh;
    }
    
    .login__div{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    
    .login__link{
        color: var(--font2);
        font-size: 90%;
        margin-top: 2vh;
    }
    
    .login__input{
        width: 100%;
        margin-top: 1vh;
        position: relative;
    }
    
    .login__input input{
        width: 100%;
        border-radius: 1vh;
        border: 1px solid var(--background2);
        outline: none;
        padding: 1.5vh 1.5vh 1.5vh 4.5vh;
        box-sizing: border-box;
        font-size: 90%;
    }
    
    .login__input input::-webkit-input-placeholder{
        color: var(--font2);
    }
    
    .login__input input:-ms-input-placeholder{
        color: var(--font2);
    }
    
    .login__input input::placeholder{
        color: var(--font2);
    }
    
    .login__input svg{
        position: absolute;
        width: 2vh;
        height: 2vh;
        left: 1.5vh;
        top: 1.5vh;
    }
    
    .login__input path{
        fill: var(--color);
    }
    
    .login__button{
        background-color: var(--color);
        color: white;
        padding: 1.5vh;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        width: 100%;
        border-radius: 1vh;
        font-size: 90%;
        font-weight: 700;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 2vh;
        border: none;
    }
    
    .login__button svg{
        width: 2vh;
        height: 2vh;
        display: block;
        margin-right: 1vh;
    }
    
    .login__button path{
        fill: white;
    }
    
    .login__subtext{
        text-align: center;
        margin-top: 3vh;
        color: var(--font2);
        font-size: 90%;
        width: 100%;
    }
    
    .login__social{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-top: 1vh;
    }
    
    .login__social__item{
        width: 4vh;
        height: 4vh;
        margin: 0 0.5vh;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .login__social__item svg{
        width: 2.5vh;
        height: 2.5vh;
        display: block;
    }
    
    .login__social__item path{
        fill: white;
    }
    
    .login__social__item.facebook{
        background-color: #1877F2;
    }
    
    .login__social__item.google{
        background-color: #DD4C39;
    }
    
    .login__social__item.twitter{
        background-color: #00ABF0;
    }
    
    .login__social__item.apple{
        background-color: #000000;
    }
    
    .login__footer{
        color: var(--font2);
    }
    
    .login__footer span{
        font-weight: 700;
        color: var(--font);
    }

}