/**
 *  All necessary media requires for media view style.
 *  Do not forget to initial that in _theme-files.php (theme directory/core/components/...).
 *  Do not repeat media require !
 */

/*------------- _ Desktop media styles _ -------------*/

/*Code begins to 991px*/

/*----------- _ End desktop media styles _ -----------*/
/*----------------------------------------------------*/
/*------------- _ Mobile media styles _ --------------*/
@media only screen and (max-width: 1450px) {

    h1 {
        font-size: 54px;
    }

    h2 {
        font-size: 30px;
    }

    h3 {
        font-size: 23px;
    }

    h4 {
        font-size: 21px;
    }


    #page-content #title-side .right-side,
    #page-content #title-side .left-side {
        width: 19.67%;
    }

    #page-content #advantages {
        max-width: 610px;
        margin: 45px auto 45px;
    }
    #page-content #advantages .item {
        padding: 17px;
    }

	#page-content #advantages,
	#page-content #title-side {
		zoom: .8;
	}
}

@media only screen and (min-width: 1301px) {
    #page-content #content {
        padding-left: 485px;
    }
}


@media only screen and (max-width: 1300px) {
    #page-content #title-side .left-side {
        margin-top: 15px;
    }
    #page-content #title-side .title {
        margin-top: 80px;
    }

    #form {
        width: 400px;
        min-width: 400px;
        padding: 45px 15px;
    }
}


@media only screen and (max-width: 1200px) {
		#page-content #advantages,
	#page-content #title-side {
		zoom: .7;
	}
}


@media only screen and (max-width: 991px) {
    #page-content #title-side {
        flex-wrap: wrap;
    }
    #page-content #title-side {
        flex-wrap: wrap;
    }
    #page-content #title-side .right-side,
    #page-content #title-side .left-side {
        width: 26.67%
    }

    #page-content #title-side .title {
        order: 3;
        width: 100%;
        padding: 0 20px;
        margin-top: -40px;
    }
}



@media only screen and (min-width: 992px) {

    #page-content {
        position: relative;
    }
    #content {
        padding-left: 400px;
    }
    #form {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
    }
}

@media only screen and (max-width: 991px) {
    #form .logo {
        position: absolute;
        top: 18vw;
        width: 20vw;
        right: 50%;
        min-height: 100px;
        transform: translateX(50%);
    }
    #page-content {
        position: relative;
        flex-direction: column;
    }
    #form {
        min-width: unset;
        max-width: 610px;
        padding: 38px 30px;
        position: unset;
        width: 100%;
        box-shadow: none;
    }
    #form .title {
        margin-top: 0;
    }

		#page-content #advantages,
	#page-content #title-side {
		zoom: 1;
	}
}


@media only screen and (max-width: 600px) {
    #page-content #title-side .right-side {
        margin-top: 20px;
    }
    #page-content #title-side .title {
        margin-top: 30px;
    }
    #page-content #advantages {
        row-gap: 28px;
        column-gap: 28px;
        grid-template-columns: repeat(2, 1fr);
        max-width: 500px;
    }
    #page-content #advantages .item {
        padding: 17px 5px;
    }
    #form {
        border-bottom: 6px solid #F5F5F5;
    }
	#page-content #advantages {
		padding-top: 30px;
		border-top: 6px solid #F5F5F5;
	}
}

@media only screen and (max-width: 540px) {
    #page-content #title-side .right-side, #page-content #title-side .left-side {
        width: 33.67%;
    }

    #form {
        padding: 30px 15px;
    }
    #form .logo {
        position: absolute;
        top: 23vw;
        width: 20vw;
        right: 50%;
        min-height: 100px;
        transform: translateX(50%);
    }
}

@media only screen and (max-width: 420px) {
    h1 {
        font-size: 48px;
    }

    h2 {
        font-size: 26px;
    }

    h3 {
        font-size: 21px;
    }

    h4 {
        font-size: 21px;
    }
}

@media only screen and (max-width: 350px) {
    h1 {
        font-size: 40px;
    }

    h2 {
        font-size: 22px;
    }

    h3 {
        font-size: 19px;
    }

    h4 {
        font-size: 19px;
    }
}

/*Code begins form 991px to 0px*/

/*----------- _ End mobile media styles _ ------------*/
/*----------------------------------------------------*/