/*main*/

	*{
	    -webkit-box-sizing: border-box;
	            box-sizing: border-box;
	}

	html, body {
	    font-size: 16px;
	    margin:0px;
	    padding: 0px;
	    font-family: Roboto;
	    font-weight: normal;
	    background-color: var(--color__fill-4);
	    -webkit-font-smoothing: antialiased;
	    color: var(--color__dark);
	}

	ul, ol {padding: 0px;margin: 0px;list-style: none;
	}

	h2, h3, h1, p {
	    margin: 0px;
	}

	main {
	    overflow: hidden;
	}
	
	.js-no-scroll {
	    overflow:hidden;
	}



/* centred wraper*/

	.center-wrap {
	    max-width: 70rem;
	    position: relative;
	    margin: 0px auto;
	    display: block;
	    width: 100%;
	}


/*outside step*/

	.mrg {
		margin: 5rem auto;
	}

	.mrg.--min {
		margin: 4rem auto;
	}

	.mrg.--top {
		margin-top: 5rem;
		margin-bottom: 0rem;
	}

	.mrg.--bottom {
		margin-top: 0rem;
		margin-bottom: 5rem;
	}

	.mrg.--min.--top {
		margin-top: 4rem;
		margin-bottom: 0rem;
	}

	.mrg.--min.--bottom {
		margin-top: 0rem;
		margin-bottom: 4rem;
	}

	.mrg-side {
		margin-left: 4rem;
		margin-right: 4rem;
	}

	.--no-pdg {
		padding: 0px !important;
	}

	.--no-pdg-top {
		padding-top: 0px !important;
	}

	.--no-pdg-bottom {
		padding-bottom: 0px !important;
	}

	.--no-pdg-left {
		padding-left: 0px !important;
	}

	.--no-pdg-right {
		padding-right: 0px !important;
	}


/*insite step*/

	.pdg {
		padding: 5rem 0px;
	}

	.pdg.--min {
		padding: 4rem 0px;
	}

	.pdg.--top {
		padding-top: 5rem;
		padding-bottom: 0rem;
	}

	.pdg.--bottom {
		padding-top: 0rem;
		padding-bottom: 5rem;
	}

	.pdg.--min.--top {
		padding-top: 4rem;
		padding-bottom: 0rem;
	}

	.pdg.--min.--bottom {
		padding-top: 0rem;
		padding-bottom: 4rem;
	}

	.pdg-side {
		padding-left: 4rem;
		padding-right: 4rem;
	}
	
	.--no-mrg {
		margin: 0px !important;
	}

	.--no-mrg-top {
		margin-top: 0px !important;
	}

	.--no-mrg-bottom {
		margin-bottom: 0px !important;
	}

	.--no-mrg-left {
		margin-left: 0px !important;
	}

	.--no-mrg-right {
		margin-right: 0px !important;
	}


/*colls*/
	.colls {
		width: 100%;
	}

	.col.--auto {
		flex: 1;
		
	}

	.col.--1 {
		width: 100%;
		max-width: 4rem;
		
	}

	.col.--2 {
		width: 100%;
		max-width: calc(4rem * 2 + (2rem));
		
	}

	.col.--3 {
		width: 100%;
		max-width: calc(4rem * 3 + (2rem * 2));
		
	}

	.col.--4 {
		width: 100%;
		max-width: calc(4rem * 4 + (2rem * 3));
		
	}

	.col.--5 {
		width: 100%;
		max-width: calc(4rem * 5 + (2rem * 4));
		
	}

	.col.--6 {
		width: 100%;
		max-width: calc(4rem * 6 + (2rem * 5));
		
	}

	.col.--7 {
		width: 100%;
		max-width: calc(4rem * 7 + (2rem * 6));
		
	}

	.col.--8 {
		width: 100%;
		max-width: calc(4rem * 8 + (2rem * 7));
		
	}

	.col.--9 {
		width: 100%;
		max-width: calc(4rem * 9 + (2rem * 8));
		
	}

	.col.--10 {
		width: 100%;
		max-width: calc(4rem * 10 + (2rem * 9));
		
	}

	.col.--11 {
		width: 100%;
		max-width: calc(4rem * 11 + (2rem * 10));
		
	}

	.col.--12 {
		width: 100%;
		max-width: calc(4rem * 12 + (2rem * 11));
		
	}

	.col.--13 {
		width: 100%;
		max-width: calc(4rem * 13 + (2rem * 12));
		
	}

	.col.--14 {
		width: 100%;
		max-width: calc(4rem * 14 + (2rem * 13));
		
	}

	.col.--15 {
		width: 100%;
		max-width: calc(4rem * 15 + (2rem * 14));
		
	}
	
	.col.--16 {
		width: 100%;
		max-width: calc(4rem * 16 + (2rem * 15));
		
	}



/*full*/
	.full {
		width: 100%;
		height: 100%;
	}

	.full.--width {
		width: 100%;
		height: auto;
	}

	.full.--height {
		width: auto;
		height: 100%;
	}


 
/*MEDIA*/

    @media screen and (max-width: 1680px) {  

    }

    @media screen and (max-width: 1440px) {  
		html, body {
		    /* font-size: 14px; */
		}
    }

    @media screen and (max-width: 1359px) {  

    }

    @media screen and (max-width: 1199px) {  


		.col.--1 {
			width: 100%;
			max-width: 4rem;
			
		}

		.col.--2 {
			width: 100%;
			max-width: calc(4rem * 2 + (2rem));
			
		}

		.col.--3 {
			width: 100%;
			max-width: calc(4rem * 3 + (2rem * 2));
			
		}

		.col.--4 {
			width: 100%;
			max-width: calc(4rem * 4 + (2rem * 3));
		}

		.col.--5 {
			width: 100%;
			max-width: calc(4rem * 5 + (2rem * 4));
		}

		.col.--6 {
			width: 100%;
			max-width: calc(4rem * 6 + (2rem * 5));
		}

		.col.--7 {
			width: 100%;
			max-width: calc(4rem * 7 + (2rem * 6));
		}

		.col.--8 {
			width: 100%;
			max-width: calc(4rem * 8 + (2rem * 7));
		}

		.col.--9 {
			width: 100%;
			max-width: calc(4rem * 9 + (2rem * 8));
		}

		.col.--10 {
			width: 100%;
			max-width: calc(4rem * 10 + (2rem * 9));
		}

		.col.--11 {
			width: 100%;
			max-width: calc(4rem * 11 + (2rem * 10));
		}

		.col.--12 {
			width: 100%;
			max-width: calc(4rem * 12 + (2rem * 11));
		}

		.col.--13 {
			width: 100%;
			max-width: calc(4rem * 13 + (2rem * 12));
		}

		.col.--14 {
			width: 100%;
			max-width: 100%;
		}

		.col.--15 {
			width: 100%;
			max-width: 100%;
			
		}
		
		.col.--16 {
			width: 100%;
			max-width: 100%;
			
		}

		html, body {
		    font-size: 12px;
		}
    }

    @media screen and (max-width: 1024px) {  

    }

    @media screen and (max-width: 991px) {  
		html, body {
		    font-size: 10px;
		}		
		main {
			overflow-x: hidden; 
		} 		

		.--mob__back-order > *:first-child {
		    order: 2;
		}

		.center-wrap {
		    max-width: 100%;
		    padding:0px 2rem;
		}

		.col.--1 {
			width: 100%;
			max-width: 4rem;
			
		}

		.col.--2 {
			width: 100%;
			max-width: calc(4rem * 2 + (2rem));
			
		}

		.col.--3 {
			width: 100%;
			max-width: calc(4rem * 3 + (2rem * 2));
			
		}

		.col.--4 {
			width: 100%;
			max-width: calc(4rem * 4 + (2rem * 3));
		}

		.col.--5 {
			width: 100%;
			max-width: calc(4rem * 5 + (2rem * 4));
		}

		.col.--6 {
			width: 100%;
			max-width: calc(4rem * 6 + (2rem * 5));
		}

		.col.--7 {
			width: 100%;
			max-width: calc(4rem * 7 + (2rem * 6));
		}

		.col.--8 {
			width: 100%;
			max-width: calc(4rem * 8 + (2rem * 7));
		}

		.col.--9 {
			width: 100%;
			max-width: calc(4rem * 9 + (2rem * 8));
		}

		.col.--10 {
			width: 100%;
			max-width: 100%;
		}

		.col.--11 {
			width: 100%;
			max-width: 100%;
		}

		.col.--12 {
			width: 100%;
			max-width: 100%;
		}

		.col.--13 {
			width: 100%;
			max-width: 100%;
		}

		.col.--14 {
			width: 100%;
			max-width: 100%;
		}

		.col.--15 {
			width: 100%;
			max-width: 100%;
			
		}
		
		.col.--16 {
			width: 100%;
			max-width: 100%;
			
		}


		/*outside step*/

			.mrg {
				margin: 5rem auto;
			}

			.mrg.--min {
				margin: 2.5rem auto;
			}

			.mrg.--top {
				margin-top: 5rem;
				margin-bottom: 0rem;
			}

			.mrg.--bottom {
				margin-top: 0rem;
				margin-bottom: 5rem;
			}

			.mrg.--min.--top {
				margin-top: 2.5rem;
				margin-bottom: 0rem;
			}

			.mrg.--min.--bottom {
				margin-top: 0rem;
				margin-bottom: 2.5rem;
			}


		/*insite step*/

			.pdg {
				padding: 5rem 0px;
			}

			.pdg.--min {
				padding: 2.5rem 0px;
			}

			.pdg.--top {
				padding-top: 5rem;
				padding-bottom: 0rem;
			}

			.pdg.--bottom {
				padding-top: 0rem;
				padding-bottom: 5rem;
			}

			.pdg.--min.--top {
				padding-top: 2.5rem;
				padding-bottom: 0rem;
			}

			.pdg.--min.--bottom {
				padding-top: 0rem;
				padding-bottom: 2.5rem;
			}
		}		
    }    

    @media screen and (max-width: 768px) {  

    }

    @media screen and (max-width: 640px) {  
		html, body {
		    font-size: 12px;
		}	
		.colls {
			margin-right: 0rem;
		}

		.mrg {
		    margin: 4rem auto;
		}

		.col.--1 {
			width: 100%;
			max-width: 4rem;
			
		}

		.col.--2 {
			width: 100%;
			max-width: calc(4rem * 2 + (2rem));
		}

		.col.--3 {
			width: 100%;
			max-width: calc(4rem * 3 + (2rem * 2));
		}

		.col.--4 {
			width: 100%;
			max-width: calc(4rem * 4 + (2rem * 3));
		}

		.col.--5 {
			width: 100%;
			max-width: 100%;
		}

		.col.--6 {
			width: 100%;
			max-width: 100%;
		}

		.col.--7 {
			width: 100%;
			max-width: 100%;
		}

		.col.--8 {
			width: 100%;
			max-width: 100%;
		}

		.col.--9 {
			width: 100%;
			max-width: 100%;
		}

		.col.--10 {
			width: 100%;
			max-width: 100%;
		}

		.col.--11 {
			width: 100%;
			max-width: 100%;
		}

		.col.--12 {
			width: 100%;
			max-width: 100%;
		}

		.col.--13 {
			width: 100%;
			max-width: 100%;
		}

		.col.--14 {
			width: 100%;
			max-width: 100%;
		}

		.col.--15 {
			width: 100%;
			max-width: 100%;
			
		}
		
		.col.--16 {
			width: 100%;
			max-width: 100%;
			
		}


    }