@media(max-width:1600px){
    .atp-txt-box {height: 100%;}
    .atp-canvas li {height: 25.2vh;}
    .atp-container {box-sizing: border-box;padding: 1.5% 5%;}
}

@media(max-width:1440px){
	.atp-container {padding-top: 7%;}
	.atp-txt-box {width: 37%;padding: 3%;height: 100%;}
	.atp-txt-box h1 {font-size: 350%;}
	.atp-canvas li {height: 22.3vh;}
	.atp-overlay h3 {font-size: 130%;}

}
@media(max-width:1366px){
	.atp-container {padding-top: 4%;}
	.atp-txt-box {width: 37%;padding: 3%;height: 100%;}
	.atp-txt-box h1 {font-size: 350%;}
	.atp-canvas li {height: 22.3vh;}
	.atp-overlay h3 {font-size: 130%;}
	.modal-container .modal-background .modal {height: 76vh;}

}
@media(max-width:1280px){
  	.atp-container {padding-top: 7%;}
	.atp-txt-box {width: 37%;padding: 3%;height: 100%;}
	.atp-txt-box h1 {font-size: 300%;}
	.atp-canvas li {height: 22.6vh;}
	.atp-overlay h3 {font-size: 130%;}
}
@media(max-width:1024px){
  	.atp-container {padding-top: 5%;}
	.atp-txt-box {width: 35%;padding: 3%;height: 100%;}
	.atp-txt-box h1 {font-size: 240%;line-height: 90%;}
	.atp-txt-box p {line-height: 150%;font-size: 95%;}
	.atp-canvas li {height: 20vh;}
	.atp-overlay h3 {font-size: 100%;}
	.atp-info h2{font-size: 200%;}
	footer font{font-size: 90%;}
}
@media(max-width:800px){
  .atp-container {padding-top: 35%;}
  .atp-txt-box {width: 55%;height: 100%;}
  .atp-canvas li {height: 10.8vh;}
  .modal-container .modal-background .modal {height: 100%;}
}
@media(max-width:768px){
  .atp-container {padding-top: 35%;}
  .atp-txt-box {width: 55%;height: 100%;}
  .atp-canvas li {height: 10.8vh;}
  .atp-md-box {width: 40%;}
}
@media(max-width:640px){
  .atp-container {padding-top: 2%;}
  .atp-txt-box {width: 50%;height: 100%;}
  .atp-txt-box h1 {font-size: 190%;line-height: 100%;}
  .atp-txt-box p {line-height: 110%;font-size: 90%;}
  .atp-canvas li {width: 45%;height: 37.8vh;margin: 1% 2.5%;}
  .atp-canvas li.atp-mid {margin: 1% 2.5%;}
}
@media(max-width:480px){
  .atp-container {padding-top: 35%;}
  .atp-txt-box {width: 60%;}
  .atp-txt-box h1 {font-size: 200%;line-height: 100%;}
  .atp-canvas li {width: 45%;height: 11.8vh;margin: 1% 2.5%;}
  .atp-canvas li.atp-mid {margin: 1% 2.5%;}
  .atp-info h2{font-size: 200%}
  .atp-info img {width: 15%;}
  footer font{font-size: 85%;}
  .atp-close{top: -10%;z-index: 9;}
}
@media(max-width:430px){
  .atp-container {padding-top: 10%;}
  .atp-txt-box {width: 100%;height: 100%;}
  .atp-txt-box h1 {font-size: 305%;line-height: 100%;}
  .atp-canvas li {width: 95%;height: 22.1vh;margin: 6% 2.5%;}
  .atp-canvas li.atp-mid {margin: 6% 2.5%;}
  .atp-txt-box p {line-height: 160%;font-size: 100%;}
  .atp-md-box {width: 100%;margin-bottom: 5%;}
  .atp-close{top: -10%;z-index: 9;}
  .atp-item {height: 150vh;}
  .atp-info h2 {font-size: 160%;}
  .atp-header p {font-size: 100%;line-height: 135%;}
  .atp-header::before {top: 22%;}
  .atp-hlt-col {width: 100%;height: 70vh;}
  .atp-hlt-col h4{font-size: 110%;padding-top: 10%;}
  .atp-row-field {  width: 100%;text-align: center;}
  .atp-label , .atp-field, .atp-field input, .atp-field textarea{width: 100%;}
  .atp-label {float: left;padding: 2px;font-weight: normal;}
  .atp-spt-hlt-col{}
  .atp-wrapper{height: 163vh;}
  footer {padding: 1% 5%;box-sizing: border-box;}
}
@media(max-width:390px){
    .atp-txt-box {height: 100%;}
    .atp-item {height: 150vh;}
    .atp-info h2 {font-size: 140%;}
    .atp-header::before {top: 16%;  }
    .atp-list-symbl {  width: 10%;}
    .atp-contain h2 {font-size: 260%;}
}
@media(max-width:380px){
  .atp-canvas li {width: 95%;height: 20.1vh;margin: 2% 2.5%;}

}
@media(max-width:375px){
  .atp-canvas li {width: 95%;height: 20.1vh;margin: 2% 2.5%;}
  .blg-cnvas li {height: 39vh;}
  .atp-item {height: 130vh;}
  .atp-contain h2 {font-size: 250%;}
  .atp-header::before {top: 16%;  }
  .atp-list-symbl {  width: 8%;}
}
@media(max-width:360px){
  .atp-canvas li {width: 95%;height: 27vh;;margin: 2% 2.5%;}
  .blg-cnvas li {height: 50vh;}
  .atp-container {padding-top: 12%;}
  .atp-txt-box h1 {font-size: 210%;line-height: 100%;}
  .atp-txt-box {height: 100%;}
  .atp-item {height: 160vh;  }
}