@media screen and (max-width: 1500px){
	.container{padding: 0 120px;}

	.back .wrapper .wrap .number{font-size: 30px; margin: 5px 0;}

}



@media screen and (max-width: 1400px){
	.back .chart .line:first-of-type div {font-size: 14px;}

}


@media screen and (max-width: 1300px){
	.container{padding: 0 90px;}
	.grid {grid-row-gap: 30px; grid-column-gap: 30px; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(24, 1fr);}

	.grid .item:nth-of-type(1) { grid-area: 1 / 1 / 4 / 2; }
	.grid .item:nth-of-type(2) { grid-area: 4 / 1 / 7 / 3; }
	.grid .item:nth-of-type(3) { grid-area: 1 / 2 / 4 / 3; }
	.grid .item:nth-of-type(4) { grid-area: 7 / 1 / 10 / 2; }
	.grid .item:nth-of-type(5) { grid-area: 7 / 2 / 10 / 3; }
	.grid .item:nth-of-type(6) { grid-area: 10 / 1 / 13 / 3; }
	.grid .item:nth-of-type(7) { grid-area: 13 / 1 / 16 / 2; }
	.grid .item:nth-of-type(8){ grid-area: 13 / 2 / 16 / 3; }
	.grid .item:nth-of-type(9) { grid-area: 16 / 1 / 19 / 3; }
	.grid .item:nth-of-type(10) { grid-area: 19 / 1 / 22 / 3; }
	.grid .item:nth-of-type(11) { grid-area: 22 / 1 / 25 / 2; }


}




/*@media screen and (max-width: 1100px){
	.outer{max-width: 600px;}
	.outer .inner {padding: 50px 30px;}
	.outer .inner h2 {font-size: 45px; margin: 0 0 10px;}
}
*/


@media screen and (max-width: 1000px){
	.container{padding: 0 80px;}
	.banner{height: 550px; background-size: 1200px auto;}
}

@media screen and (max-width: 850px){
	.grid {display: block;}
	.grid .item{margin: 0 0 50px;}

	.front .intro,
	.back .intro{height: unset;}
	.front .main, .back .main{display: block; padding: 1em;}

	ul.lined li {padding: 10px 0;}
	ul.lined li .label{font-size: 20px;}
	ul.lined li .data{font-size: 20px;}

	.back .wrapper{display: block;}
	.back .wrapper .wrap{width: unset; padding: 10px 0; border-right: none; display: flex; flex-wrap: wrap; border-bottom: 2px solid #fff;}
	.back .wrapper .wrap:last-of-type{padding: 10px 0 0; border-bottom: none;}
	.back .wrapper .wrap .number{width: fit-content; font-size: 30px; line-height: 1em; margin: 5px 0 0;}
	.back .wrapper .wrap .label{width: fit-content; margin: 10px 0 0 15px; font-size: 14px; line-height: 1.1em;} 
	.back .wrapper .wrap .first{width: 100%;}

	.item:nth-of-type(2) .front .main, 
	.item:nth-of-type(2) .back .main {height: 340px; position: relative;}

	.grid .item:nth-of-type(2) .front .text{text-align: center; padding: 0; line-height: 1.3em;}
	.grid .item:nth-of-type(2) .front .text span{float: unset; display: block;}
	.grid .item:nth-of-type(2) .front .text span br{display: none;}

	.grid .item:nth-of-type(2) .front .graphic{position: absolute; bottom: 15%; width: calc(100% - 2em); left:50%; transform:translateX(-50%); margin:0; }


	.item:nth-of-type(3) .front .main,
	.item:nth-of-type(3) .back .main{height: 300px;}
/*	.item:nth-of-type(6) .front .main, 
	.item:nth-of-type(6) .back .main {height: 400px;}*/

	.item:nth-of-type(9) .front .main, 
	.item:nth-of-type(9) .back .main {height: 450px;}

	.item:nth-of-type(9) .front .main .graphic{text-align: center;}
	.item:nth-of-type(9) .front .graphic .mob{display: inline; max-height: 420px;}
	.item:nth-of-type(9) .front .graphic .desk{display: none;}

	.item:nth-of-type(10) .front .main {  display: flex;
  flex-direction: column;
  justify-content: center;
   height: calc(100% - 90px);}



/*.card:active > .front {
  transform: rotateY(180deg);
}
.card:hover > .front{transform: none;}

.card:active > .back {
  opacity: 1;
  transform: rotateY(0deg);
}

.card:hover > .back {
  opacity: 0;
  transform: none;
}*/

}

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

	.container{padding:0 60px }

}


@media screen and (max-width: 600px){
	    .banner {height: 460px; background-size: 850px auto;}


	.banner a.home {width: 40px; top: 20px; right: 20px;}


	.item:nth-of-type(9) .front .main, 
	.item:nth-of-type(9) .back .main {height: 500px;}

	.item:nth-of-type(10) .front .main, 
	.item:nth-of-type(10) .back .main {height: 200px}

	.grid .item:nth-of-type(9) ul.lined li,
	.grid .item:nth-of-type(10) ul.lined li,
	.grid .item:nth-of-type(3) ul.lined li{ display: block; padding: 5px 0;}
	.grid .item:nth-of-type(9) ul.lined li .label,
	.grid .item:nth-of-type(10) ul.lined li .label,
	.grid .item:nth-of-type(3) ul.lined li .label{font-size: 16px; line-height: 1.3em; width: unset; margin: 0;}
	.grid .item:nth-of-type(9) ul.lined li .data,
	.grid .item:nth-of-type(10) ul.lined li .data,
	.grid .item:nth-of-type(3) ul.lined li .data{font-size: 16px; display: block; width: unset; margin: 0;}



	.grid .item:nth-of-type(1) .front .text,
	.grid .item:nth-of-type(3) .front .text,
	.grid .item:nth-of-type(6) .front .text,
	.grid .item:nth-of-type(2) .front .text{font-size: 45px;}

	.grid .item:nth-of-type(7) .front .text {font-size: 100px;}


	.grid .item:nth-of-type(1) .front .text span,
	.grid .item:nth-of-type(3) .front .text span,
	.grid .item:nth-of-type(6) .front .text span,
	.grid .item:nth-of-type(7) .front .text span,
	.grid .item:nth-of-type(2) .front .text span{font-size: 18px;}

	.grid .item:nth-of-type(6) .front .main, .grid .item:nth-of-type(6) .back .main{height: 320px;}

	.item:nth-of-type(3) .front .main,
	.item:nth-of-type(3) .back .main{height: 230px;}

	.back .chart .line div {font-size: 15px; padding: .4rem;}
	.back .chart .line:first-of-type div{font-size: 14px;}

	.item:nth-of-type(5) .front .graphic,
	.item:nth-of-type(4) .front .graphic,
	.item:nth-of-type(3) .front .graphic,
	.item:nth-of-type(7) .front .graphic,
	.item:nth-of-type(1) .front .graphic{max-width: 200px;}

	.back .main h3,
	.item:nth-of-type(3) .back .main h3 {margin: 0 0 5px; font-size: 30px;}


	.grid .item:nth-of-type(4) .front .text, .grid .item:nth-of-type(5) .front .text {font-size: 100px;}


	.front .intro,
	.back .intro{font-size: 16px;}

	  ul.lined li .label{font-size: 16px;}
	ul.lined li .data{font-size: 16px;}

	.back .main p.small{margin-top: 10px;}


}



@media screen and (max-width: 500px){
	.container{padding:0 40px }
    .outer .inner .text p { font-size:16px; }

    .back .wrapper .wrap .first {font-size: 14px;}
    .back .wrapper .wrap .number {font-size: 25px;}
    .back .wrapper .wrap .label {font-size: 12px; margin: 9px 0 0 10px;}

        .item:nth-of-type(2) .front .main, .item:nth-of-type(2) .back .main {height: 310px;}




  

}


@media screen and (max-width: 370px){
	.container{padding: 0 25px;}
}