/*@media only screen and (min-width: 1025px) and (max-width: 1280px) {

    //CSS
}*/


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

    header { width: 100%; height: auto; }
    main { width: 100%; margin-top: 10px; display: table; }

    .navbar { display: none; }

    article#leftside { width: 98%; float: left; margin-bottom: 20px; }
    article#rightside { width: 98%; float: left; padding: 10px; background: #FAFBFD; }

    article#leftside1 { width: 98%; float: left; margin-bottom: 20px; }
    article#rightside1 { width: 98%; float: left; padding: 10px; background: #fff; }
    aside#sidebar { display: none; }

    article#detail { width: 100%; min-height: 350px; float: left; }

    .topleft1 { width: 50px; float: left; display: block; }
    .topleft2 { height: 60px; background-size: 180px; }
    .topright { display: none; }


    .detailPage img { max-width: 100%; height: auto; float: left; }

    .contact td:first-child { width: 90px; }

    .boxtop { width: 100%; float: left; margin-bottom: 15px; border-bottom: 1px solid #ccc; }
    .boxtop h1 { width: auto; float: left; font-size: 26px; font-weight: 300; }
    .boxtop a { width: auto; float: right; margin-top: 15px; font-size: 12px; color: #1C3039; }
    .boxtop a:hover { text-decoration: underline; }

    .leftfooter { width: 95%; float: left; color: #fff; font-size: 13px; }
    .rightfooter { width: 95%; float: left; margin-top: 20px; color: #2F2B2A; font-size: 13px; }

    .openNav { width: 30px; float: left; margin: 10px 0 0 10px; font-size: 26px; cursor: pointer; color: #333 }
    .sidenav { height: 80%; width: 0; position: fixed; z-index: 1; top: 100px; left: 0; background-color: #274472; overflow-x: hidden; transition: 0.5s; padding-top: 50px; display: block; }
    .sidenav a { display: block; margin: 10px; color: #fff; }
    .sidenav .closebtn { font-size: 36px; color: #fff; }
}


@media only screen and (min-width: 320px) and (max-width: 480px) {

    .topslider .bigslider { width: 100%; margin: 0 auto; display: none; min-height: 200px; }

    .container { width: 95%; float: left; padding: 20px 10px; }

    .mainbox2 { width: 100%; float: none; }
    .mainbox2 img { width: 100%; margin-bottom: 10px; }
    .mainbox2 a { width: 100%; }
    .mainbox2 p { width: 100%; margin-top: 5px; }
     

    .mainbox4 { width: 100%; max-width: 98%; height: auto; margin-left: 0; margin-bottom: 10px; }
    .mainbox4 img { width: 100%; height: auto; display: block; }
}


@media only screen and (min-width: 481px) and (max-width: 767px) {

    .topslider .bigslider { width: 100%; margin: 0 auto; display: none; min-height: 300px; }

    .container { width: 95%; float: left; padding: 20px 10px; }
    article#rightside { width: 97%; float: left; padding: 10px; background: #FAFBFD; }

    .mainbox2 { width: 100%; float: left; }
    .mainbox2 img { width: 45%; }
    .mainbox2 a { width: 45%; }
    .mainbox2 p { width: 100%; float: none; margin-top: 5px; } 

    .mainbox4 { width: 100%; max-width: 28%; height: auto; }
    .mainbox4 img { width: 100%; height: auto; display: block; }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {

    .topslider .bigslider { width: 100%; margin: 0 auto; display: none; min-height: 400px; }

    .container { width: 98%; float: left; padding: 10px 10px; }

    .mainbox2 { width: 100%; float: left; }
    .mainbox2 img { width: 45%; margin-bottom: 10px; }
    .mainbox2 a { width: 45%; }
    .mainbox2 p { width: 45%; margin-top: 5px; }
     

    .mainbox4 { width: 100%; max-width: 30%; height: auto; }
    .mainbox4 img { width: 100%; height: auto; display: block; }
}