@media screen and (min-width: 2000px) {

    .container { width: 100%; max-width: 1650px; height: 100%; float: none; margin: 0 auto; overflow: hidden; }
}

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

    .col2 { width: calc(100% - 250px); max-width: 100%; position: relative; left: 250px; }
}

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

    * { box-sizing: border-box; margin: 0; padding: 0; }

    .boxtop h1 { font-size: 22px; font-weight: 300; }

    .openNav { display: block; }
    .closebtn { display: block; }
    .topleft { display: block; }

    .col0 { width: 0; height: 100%; position: fixed; z-index: 1; top: 0; left: 0; overflow-x: hidden; transition: 0.5s; display: block; z-index: 10; }
    .col1 { width: 100%; max-width: 100%; position: relative; left: 0; margin-bottom: 0; }
    .col2 { width: 100%; max-width: 100%; position: relative; left: 0; padding: 10px; }

    header { width: 100%; height: 80px; background: #fff; position: relative; }
    .topleft { height: 100px; position: absolute; top: 10px; left: 13px; background: url(/Content/image/logo.jpg) no-repeat; cursor: pointer; display: block; }


    .maingrid { width: 100%; display: grid; grid-template-columns: minmax(300px, 1fr); gap: 0px 20px; grid-template-areas:
            "slider"
            "bolum"
            "detail"
            "list"; }


    .detailgrid { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; grid-template-areas:
            "image"
            "statement" }

    .mainbox1 img { width: 100%; max-width: 100%; height: 100%; max-height: 180px; margin-bottom: 10px; }
}

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



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


    .maingrid { width: 100%; display: grid; grid-template-columns: minmax(300px, 1fr); gap: 30px 20px; grid-template-areas:
            "slider"
            "bolum"
            "detail"
            "list"; }

    .contactgrid { width: 100%; display: grid; grid-template-columns: 1fr; gap: 20px; grid-template-areas:
            "form"
            "adres" }

    .phgrid4 { grid-template-columns: repeat(2, minmax(300px, 1fr)); gap: 20px; }

    .mainbox2 img { width: auto; max-width: 100%; height: auto; max-height: 440px; float: left; margin-bottom: 20px; }
}


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

    .topmiddle { display: none; }

    .mainbox2 img { margin-bottom: 20px; }

    fieldset#birthdate input[type=tel] { width: 98%; background: #E2EAF2; color: #444; }
    fieldset#birthdate select { width: 32%; background: #E2EAF2; color: #444; }
}


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

    .phgrid4 { grid-template-columns: repeat(1, minmax(300px, 1fr)); gap: 20px; }

    .mainbox6 img { width: 100%; max-width: 160px; height: auto; max-height: 100px; float: left; margin-right: 10px; }
    .mainbox6 h2 { padding: 5px; color: #444; font-size: 14px; font-weight: 400; display: block; }
}

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

    fieldset { background: #fff; }
    fieldset#name input[type=text] { width: 99%; margin-bottom: 10px; }
    fieldset#contact input[type=tel], fieldset#contact input[type=email] { width: 99%; display: inline-flex; margin-bottom: 10px; box-sizing: inherit; }
    fieldset#contact input[type=text] { width: 99%; display: inline-flex; margin-bottom: 10px; box-sizing: inherit; }
    fieldset#contact select { width: 99%; display: inline-flex; margin-bottom: 10px; box-sizing: inherit; }

    .mainbox3 p { font-size: 12px; }
    .login { width: 100%; }
}


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

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