@media only screen and (min-width: 900px) and (max-width: 1239px)
{
    .inner {width: 100%;padding:0 15px 0 15px;box-sizing: border-box;}
    #hp-left, #country, #traffic-info, #search {width:100%;padding-right: 20px;}
    #search-form {width: 320px;}
    .sidebar.right {padding-left: 20px;}

    #hp-infoboxes .infobox {width:calc(50% - 7px);}

    #bottom-boxes .inner {justify-content: space-between;}
    #bottom-boxes .infobox {width:23%;}
}

@media only screen and (max-width: 1099px)
{
    #european-fuel .fuel-price-small {display: block;position: initial;text-align: center;line-height: 10px;}
}

@media only screen and (min-width: 900px) and (max-width: 1099px)
{
    #search-form {margin: 0 20px;}
}

@media only screen and (min-width: 900px) and (max-width: 1023px)
{
    #search-form {width: 260px;}
    #suggest-results {width: 202px;}
    .suggest-row {padding: 10px 5px 10px 15px;}
    .suggest-icon {width:40px;}
    .suggest-name {font-size:12px;}
    .suggest-category {font-size:11px;}
    .sidebar.right {width: 270px;font-size:12px;}

    #country-map {width:100%;height:480px;}
}

@media only screen and (min-width: 900px) and (max-width: 999px)
{
    #topmenu ul li {margin:0 5px}
    #topmenu ul li:first-of-type {margin: 0 5px 0 0;}
    #topmenu ul li:last-of-type {margin: 0 0 0 5px;}
    #topmenu .submenu:hover {margin:0;padding:0 5px;}
}

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

    /* one column design */

    .inner {width:100%;padding:0 15px 0 15px;box-sizing: border-box;}
    .main.country .inner, .main.content .inner, .main.traffic-info .inner, .main.search .inner, #content-gray .inner, #info-map, #fuel-prices-container {width:100%;display:block;}
    .main .sidebar {width:100%;padding:0;}
    #hp-left, #traffic-info, #search, #content-gray #faq {width:100%;margin-bottom: 0;padding-right: 0;box-sizing: border-box;}
    #country, #traffic-info  {border:0;margin-bottom: 0;}
    #content {padding-bottom: 80px;}
    #content, #country, #traffic-info, #search {margin-top:30px;}
    #content-gray .inner {padding:0;}



    /* header */

    #header .inner {height:auto;flex-wrap: wrap;padding-top:20px;}
    #search-container {width:100%;}
    #search-form {margin:0 0 0 15px;}
    #suggest-results {top:30px;}

    #search-form {width: 260px;}
    #suggest-results {width: 202px;}
    .suggest-row {padding: 10px 5px 10px 15px;}
    .suggest-icon {width:40px;}
    .suggest-name {font-size:12px;}
    .suggest-category {font-size:11px;}
    .suggest-row.no-results {font-size:11px;}

    #topmenu {margin: 0 auto;}
    #topmenu ul li:first-of-type {margin: 0 10px 0 0;}
    #topmenu ul li:last-of-type {margin: 0 0 0 10px;}
    #topmenu .submenu {display: none;}



    /* outside padding */

    .main.country .inner {padding:0;}
    .main.country .sidebar.right {background-color: #fbfbfb;padding:0 0 40px 0;border-top: 1px solid #ededed;}
    .main.country #content-gray .sidebar.right, #fuel-prices-container .sidebar.right {padding:0;border:0;}
    #country {width:100%;padding: 0 15px 40px 15px;box-sizing: border-box;}
    .main.traffic-info .sidebar.right {padding: 0 0 40px 0;}
    .main.country .sidebar.right, #fuel-prices-container .sidebar.right {width:100%;box-sizing: border-box;}
    #content-gray {padding: 30px 15px 40px 15px;border-top: 1px solid #ededed;}



    /* responsive country sidebar */

    #country-info {padding: 0 15px 40px 15px;}
    #country-name {margin-top:30px;padding:0;border:0;font-size:16px;}
    .sidebar-box {margin-top:40px;}
    #country-info-links, #country-useful-links {margin-top: 20px;}
    #sidebar-country-links, #current-traffic-info {display:flex;justify-content: space-between;flex-wrap: wrap;}
    #sidebar-country-links .sidebar-box:first-child, #traffic-problems {padding-right: 20px;}
    #countries-menu-ul {columns: 4;}
    #country-sidebar-menu {display:none;}
    .bottom-link {margin-top:60px;}



    /* info map */

    .main.info-map #map, #country-info-short, #info-map-notice {width:100%;}
    .main.info-map .sidebar.left {width:100%;border:0;}
    .main.info-map {padding-bottom: 80px;}
    #europe-map {padding-left:0;}



    /* country page */

    #faq h2 {font-size:18px;}
    #faq h3, #no-toll-countries h3 {margin-top:45px;font-size:16px;}



    /* content */

    h2 {margin-top:50px;}



    /* hp content */

    .hp-container {display: block;padding-bottom: 50px;}
    .banner.hp-large {width:100%;margin: 40px 0 0 0;}
    #hp-infoboxes {width:100%;flex-wrap: nowrap;margin-top: 60px;float:none;}
    #hp-infoboxes .infobox  {width:23%;}
    #hp-left {border:0;}



    /* fuel prices */

    .banner.fuel-table {margin-top:80px;}



    /* contact */

    .main.contact .inner #content {flex-wrap: wrap;}
    #contact-form {margin-top:40px;}
    #contact-form h3 {margin-top:80px;}



    /* bottom boxes */

    #bottom-boxes {padding:70px 0;}
    #bottom-boxes .inner {justify-content: space-between;}
    .infobox {width:23%;height:120px;}
    .infobox h3 {margin-top:10px;font-size:11px;}



    /* footer */

    #footer-content {flex-wrap: wrap;justify-content: space-between;padding-top:40px;}
    #footer-content .footer-menu {flex-basis: 33%;}



    /* ads */

    .banner.content-wide img {width:100%;}

}

@media only screen and (max-width: 699px)
{
    .banner.overview-legend {margin-top: 22px;}
}

@media only screen and (max-width: 599px)
{
    h1 {font-size: 18px;}
    #topmenu ul {margin-bottom: 5px;}
    #topmenu ul li {margin:0 5px}
    #topmenu ul li:first-of-type {margin: 0 5px 0 0;}
    #topmenu ul li:last-of-type {margin: 0 0 0 5px;}
    #topmenu .submenu:hover {margin:0;padding:0 5px;}

    #content-links {margin: 7px 0 10px 15px;padding-left: 20px;}
    #regions h2 {font-size:15px;}
    #european-fuel .fuel-price-small {font-size: 9px;}
    #country-overview-legend {flex-wrap: wrap;}
}

@media only screen and (max-width: 499px)
{
    body {font-size:14px;}
    #opt-notice #button {width:120px;}

    #topmenu ul {margin-bottom: 10px;}
    #topmenu ul li {margin:0 1px}
    #topmenu ul li:first-of-type {margin: 0 1px 0 0;}
    #topmenu ul li:last-of-type {margin: 0 0 0 1px;}
    #topmenu .submenu:hover {margin:0;padding:0 2px;}
    #topmenu ul li a {font-size:10px;}
    .bottom-box h3 {font-size:10px;}
    #footer-bottom #ft-right {font-size: 9px;}
}

@media only screen and (max-width: 398px)
{
    #topmenu ul li a {font-size:9px;}
    .bottom-box h3 {font-weight:400;}
    #suggest-results {left:0;}
}

@media only screen and (max-width: 359px)
{
    #suggest-results {left:-20px;}
}