Max-Width not rendering in Safari

Question

Please check this fiddle

This is how its look in Firefox and Chrome.. which is my original layout.

And this its how it looks in Safari, which i want to solve. Any Help would be appreciated.

.top {
    background: #edebe6;
    height: 80px;
}
.intop {

    max-width: 1080px;
    margin: 0 auto;
    display: table;
    width: 100%;
}
.logo {
    width: 20%;
    float: left;

}
.logo img {
    display: table-cell;
    vertical-align: middle;
    margin-top: 15px;
}
.svg-menu {
    display: none;
}
.nav-wrap {
    width: 68%;
    float: left;
    height: 80px;
    display: table;
}
ul.nav {
    list-style: none;
    float: right;
    margin-top: 23px;
    margin-right: 45px;

}
ul.nav li {
    display: inline-block;
    margin-left: 35px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
}
ul.nav li a {
    color: #403b33;
}
ul.nav li a:hover {
    background: none;
    color: #d3643b;
}

ul.nav li.current-menu-item a {
    color: #d3643b;
    position: relative;
}
ul.nav li a::after {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: auto;
    width: 60%;
    height: 1px;
    background: #d3643b;
    content: '';
    opacity: 0;
    -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
    transition: height 0.3s, opacity 0.3s, transform 0.3s;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
}
ul.nav li a:hover::after,
ul.nav li a:focus::after {
    height: 2px;
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
}
ul.nav li.current-menu-item a:after {
    content: '';
    height: 2px;
    width: 60%;
    background: #d3643b;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.top-cart {
    width: 12%;
    float: left;
    height: 80px;
    display: table;
    text-align: right;
    padding-right: 18px;
    background: #83b4a4 url(images/cart.png) no-repeat 20px center;
}
.top-cart a {
    vertical-align: middle;
    display: table-cell;
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
}


@media only screen and (max-width: 1080px) {
    .in-fea-home, #container, .logo {
        padding-left: 20px;
        padding-right: 20px;
    }    
    .top-cart {
        width: 65px;
        float: right;
        position: absolute;
        right: 0;
        padding: 0;
    }
    .top-cart a {
        margin-right: -25px;
        padding-right: 27px;
        padding-top: 14px;
    }.rhide {

        display: none;
    }
}
@media only screen and (max-width: 767px) {

    .nav-wrap {

        display: none;
    }

    .logo {
        width: 100%;
        text-align: center;
    }

    .svg-menu {
        display: block;
        width: 20%;
        float: left;
        position: absolute;
        left: 15px;
        padding-top: 27px;
    }
    .footer {

        text-align: center;
    }
    #container ul.products li {
    width: 70%;
    margin: 0 auto;
}
.ff, .gff {
    margin-bottom: 55px;
}
}

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


}


/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
   button.single_add_to_cart_button {
    background: #83b4a4;
    border: none;
    border-radius: 3px;
    padding: 10px 17px;
    padding-bottom: 9px;
    font-size: 13px;
    text-transform: uppercase;
    color: #fff;
    margin-left: 15px;
    font-weight: bold;
    display: block;
    float: left;
    margin-left: -120px;
    margin-top: 50px;
}

}

Answer 1

remove display: table-cell from .logo img and that should fix all of your problems on all the browsers.