@media only screen and (max-width: 1500px){
    .main-center{
        grid-template-columns: 1fr;
    }
    .box-pc{
        display: none;
    }
    .box-mobile{
        display: block;
    }
    .main-box ul.phones{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .main-box .phones li {
        position: relative;
    }
    .main-box .phones li:after {
        height: 100%;
        width: 1px;
        position: absolute;
        top: 0;
        right: 20px;
    }
}
@media only screen and (max-width: 1300px){    
    .main-top{
        grid-template-columns: 1fr;
        gap:16px;
    }
    .page-order .main-box .orders > div {
        grid-template-columns: 1fr 150px;
        gap: 16px;
    }
    .page-order .main-box .orders > div:first-child {
        display: none;
    }
    .page-order .main-box .orders > div > div:nth-child(2){
        grid-row: 2;
        grid-column: 1;
    }
    .form-step {
        grid-template-columns: 1fr 1fr 180px;
    }
}
@media only screen and (max-width: 1200px){
    .form-step {
        grid-template-columns: minmax(200px, 500px);
    }
}
@media only screen and (max-width: 1024px){
    #content .container-box,
    .main-box .heading {
        grid-template-columns: 1fr;
    }
    header .logo .bar-menu{        
        display: block;
    }
    #container-left {
        position: fixed;
        width: 285px;
        top: 72px;
        z-index: 11;
        left: -285px;       
        transition: left 1s ease-in-out;
    }
    header{
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1;
        border-bottom: 1px solid #FCFCFC;
    }
    header .logo,
    #container-right{
        border: none;
    }
    #content{
        padding-top: 72px;
    }
    .main-box .heading .btn{
        max-width: 290px;
    }
}
@media only screen and (max-width: 800px){
    .page-account .main-box{
        padding:26px 16px;
    }
    .main-box .account-edit .list > div {
        grid-template-columns: 1fr auto;
        gap: 16px;
        padding: 8px;;
    }
    .main-box .account-edit .list > div > div:nth-child(2) {
        grid-row: 2;
        grid-column: 1/3;
    }
    .main-box .account-edit .list input{
        font-size: 18px;
        padding: 0;
    }
    .main-box .account-edit .list input:focus{
        padding: 10px 20px;
    }    
    .main-box .step .upload-box {
        grid-template-columns: 1fr;
    }
    .main-box .step .upload {
        padding: 20px;
    }
}
@media only screen and (max-width: 700px){
    .main-box .sites ul,
    .main-top .buttons {
        grid-template-columns: 1fr;
    }
    .main-box .orders > div:first-child {
        display: none;
    }
    .main-box .orders > div {
        grid-template-columns: 1fr;
        gap:16px;
    }
    .main-box .orders > div .btn {
        display: inline-block;
    }
    .main-box ul.phones {
        grid-template-columns: auto;
    }
    .main-box .phones li:after {
        height: 1px;
        width: 100%;
        position: relative;
        top: 0;
        right: 0;
    }
    .page-order .main-box .orders > div {
        grid-template-columns: 1fr auto;
        padding: 18px;
    }
    .page-order .main-box .orders > div > div:nth-child(2){
        grid-row: 2;
        grid-column: 1/3;
    }
    .page-order .main-box .orders > div > div:nth-child(4){
        grid-row: 3;
        grid-column: 1/3;
    }
    .modal-body .order-info {
        grid-template-columns: 1fr;
    }
    .modal-body .order-info > div:nth-child(3) {
        grid-column: 1;
        grid-row: 3;
    }
    .modal{
        left: 0;
        top: 72px;
        transform: translate(0,0);
        margin: 0 16px;
        width:calc(100% - 32px);
        padding: 16px;
        max-width: 100%;
    }
    .modal-close{
        font-size: 0px;
    }
    .modal-body .order-info .main-box{
        padding: 16px;
    }
    .modal-body .main-box .order-info-total .total{
        padding: 25px 0;
    }
}
@media only screen and (max-width: 600px){
    .main-top .buttons {
        display: grid;
    }
    #container-right,
    .page-order .main-box {
        padding: 26px 16px;
    }
    header{
        height: 48px;
        min-height: 48px;
    }
    header .list-box {
        padding: 7px 14px 0 14px;
        margin-top: 6px;
    }
    #container-left {
        top: 48px;
    }
    header .list-box > span {
        margin-bottom: 9px;
    }
    #content{
        padding-top: 48px;
    }
    header .container-box {
        grid-template-columns: auto 1fr;
    }
    header .logo {
        padding: 0 0 0 16px;
    }
    .modal-body .order-info .main-box .order-info-downloads .list > div{
        grid-template-columns: 1fr;
    }
    .modal-body .order-info .btn{
        max-width: 160px;
    }
    .form-box.master .inline-box {
        grid-template-columns: 1fr;
    }
}
@media only screen and (max-width: 400px){
    .main-box .sites ul li a {
        flex-direction: column;
    }
}