@media only screen and (max-width:1920px) { 

}


/*-- --*/


@media only screen and (max-width:1200px) { 

	.flow-arrow {
		width: 22px;
	}
	.payment-flow {
		flex-wrap: wrap;
		justify-content: center;
	}
	.fs-outside {
		display: flex;
		max-width: 220px;
		flex: 1 1 0;
	}
	.flow-arrow {
		margin: auto 0;
	}
	.payment-flow {
    	row-gap: 30px;
    	column-gap: 20px;
    }

}

/*-- --*/



@media only screen and (max-width: 1080px) { 

	.advantages-payments > div {
		padding: 22px;
	}
	.advantages-payments p {
		font-size: 90%;
	}
	h2 {
    	font-size: 1.8rem;
	}
	.accordion .ui-accordion-header-icon {
		margin-right: 5px;
	}

}


/*-- --*/
@media only screen and (max-width:828px) { 

	.main-monitor-title h1 {
		font-size: 2rem;
	}

}


/*-- --*/
@media only screen and (max-width: 750px) { 

 
}


/*-- --*/
@media only screen and (max-width: 680px) { 

	.header-inside {
		grid-template-columns: auto 1fr auto;
	}
	.lang-switcher {
		font-size: 0.85rem;
		gap: 6px;
	}
	.lang-link {
		padding: 3px 6px;
	}

	.main-monitor-title, .main-monitor-images {
		width: 100%;
	}
	.main-monitor-title {
		padding-bottom: 2rem;
	}
	.main-monitor-images {
		margin-inline-start: 0;
	}
	.payment-systems {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 45px;
	}
	.advantages-payments {
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: 5px;
	}
	.advantages-payments > div {
		height: auto;
	}
	.best-partner-description {
		width: 100%;
		padding-bottom: 2rem;
	}
	.best-partner-images {
		width: 100%;
		margin-inline-start: 0;
	}
	.application-connection-description {
		width: 100%;
		padding-bottom: 2rem;
	}
	.application-connection-images {
		width: 100%;
		margin-inline-start: 0;
	}
	.fs-outside {
		max-width: 50%;
	}
	
	.accordion .ui-accordion-header-icon {
        margin-right: 10px;
    }
    .footer {
    	padding: 28px;
    }
    .footer-inside {
        grid-template-areas:
        "logo"
        "links"
        "divider"
        "icons"
        "footnote";
        grid-template-columns: 1fr;
        justify-content: flex-start;
    }
    .super-footer.corners .super-footer__links, .super-footer.floating .super-footer__links {
        justify-content: flex-start;
    }
    .super-footer.corners .super-footer__icons, .super-footer.floating .super-footer__icons {
        justify-content: flex-start;
    }
    .super-footer__icons {
    	justify-content: flex-start;
    }

}


/*-- --*/
@media only screen and (max-width: 546px) { 

	:root {--padding-block-inside: 0 24px;}

	.payment-systems {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .notion-collection-images img {
    	height: 250px;
    }
    .payment-process h2.notion-heading {
		font-size: 1.5rem;
	}
	.payment-process .process-subtitle {
		font-size: 1.1rem;
	}
	.payment-process .process-description {
		font-size: 0.9rem;
	}
	.payment-flow {
		flex-direction: column;
		align-items: center;
		padding: 30px 15px;
		row-gap: 20px;
	}
	.step-title {
		font-size: 0.85rem;
		min-height: auto;
	}
	.step-desc {
		font-size: 0.7rem;
		min-height: auto;
	}
	.payment-process .process-note {
		font-size: 0.85rem;
		padding: 15px;
	}
	.fs-outside {
        max-width: 100%;
    }
	.flow-arrow {
		width: 12px;
		transform: rotate(90deg);
		margin: 0;
	}
	.step-desc br {
		display: none;
	}

    .b-popup {
    	max-width: 88%;
    }
    .title-form {
		margin-bottom: 1.5rem;
		font-size: 1.5rem;
	}
	.form-line-1 {
		display: grid;
		grid-template-columns: 1fr;
	}
	.form-line-2 {
		gap: 0;
	}
	.modal-form p {
		font-size: 0.7rem;
	}
	.modal-form input[type="submit"] {
		margin: 1rem auto 0;
	}

}

@media only screen and (max-width: 480px) {

	.lang-link {
		padding: 3px 3px;
    }
    .connect {
    	padding: 8px 10px;
    	font-size: 16px;
    }

	.b-popup {
		padding: 30px 20px;
	}
	.input-error {
		height: 5px;
		margin-top: 2px;
	}

	.title-form {
		margin-bottom: 1.2rem;
		font-size: 1.2rem;
	}
	#myform input[type="text"], #myform input[type="tel"] {
		height: 35px;
	}
	.form-line-1 {
		gap: 10px;
		margin-bottom: 10px;
	}
	.modal-form p {
		padding-left: 20px;
	}

}


