i've got logo plays nicely except safari, ignoring css assigned logo. i've tried changing vw % ignored, well. i've tried various different permutations of display & positioning no avail - i've rebuilt header section 3 times in many days, trying find issue little show higher coffee bill. can please take minute me figure out i'm going wrong?
<!doctype html> <html lang="en"> <head> <link href='http://fonts.googleapis.com/css?family=muli' rel='stylesheet' type='text/css'> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>welcome </title> <!-- bootstrap --> <link rel="stylesheet" href="http://waywarddesignco.com/css/bootstrap.min.css"> <link rel="stylesheet" href="http://waywarddesignco.com/css/style.css"> <link rel="icon" type="image/png" href="http://waywarddesignco.com/wp-content/uploads/2015/04/favicon.png"> <script src="http://waywarddesignco.com/js/jquery.min.js"></script> <script src="http://waywarddesignco.com/js/bootstrap.min.js"></script> </head> <body class="bkg_img img-responsive" background="http://waywarddesignco.com/wp-content/uploads/2015/04/background.jpg"> <div id="container"> <div id="xsg" class="visible-xs"> </div> <div class="logo hidden-xs"> <a href="http://waywarddesignco.com"> <img src="http://waywarddesignco.com/wp-content/uploads/2015/04/logo_final_png.png" class="hvr-pulse img-responsive"> </a> </div> here's css:
img.alignright { float: right; margin: 0 0 1em 1em; } img.alignleft { float: left; margin: 0 1em 1em 0; } img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignright { float: right; } .alignleft { float: left; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } body { background-repeat: no-repeat; background-size: 100% auto; background-attachment: fixed; } .entry-content p { text-align: justify; } .hom_lnk { height: 50px; position: fixed; top: 0; } @media screen , (min-width: 770px) { .navbar-inverse { border: 0; background-color: rgba(0,0,0,0); } } @media screen , (min-width: 770px) { .navbar-fixed-top { position: relative; margin-top: -7.25%; } } @media screen , (min-width: 1080px) { .navbar-fixed-top { position: relative; margin-top: -7%; padding-left: 5%; } } @media screen , (min-width: 1540px) { .navbar-fixed-top { position: relative; margin-top: -7%; padding-left: 5%; } } #xsg { height: 25px; width: 100%; } .nav_bar { max-height: 60px; position: relative; float: left; width: 100%; margin-top: -7%; z-index: -2; } .logo { display: block; max-width: 40vw; position: relative; float: right; top: 4%; z-index: 15; border-radius: 100%; } .hdr_img { width: 100%; height: auto; z-index: 10; position: absolute; top: 0; } .bkg_img { width: 100%; height: 100%; } ul.nav li.dropdown:hover > ul.dropdown-menu { display: block; } .dropdown-menu > li > { background-color: white; border: 0; color: #431e87; font-family: 'muli', sans-serif; } .dropdown-menu > li > a:hover { color: #c83938; font-family: 'muli', sans-serif; } .navbar-nav > li > .dropdown-menu { border: 1.5em solid white; box-shadow: 10px 10px 5px #888888; padding: 0; border-radius: 25px 25px 5px 25px; position: absolute; top: 12vh; } @media screen , (min-width: 770px) { .nav > li > a:hover:after { content: url("http://waywarddesignco.com/wp-content/uploads/2015/04/smallheart_100pix.png"); position: absolute; right: -10%; top: -20px; } } .navbar-inverse .navbar-nav > li > { font-family: 'muli', sans-serif; font-size: 1.5em; color: white; } @media screen , (max-width: 1080px) { .navbar-inverse .navbar-nav > li > { font-family: 'muli', sans-serif; font-size: 1.25em; color: white; } } .navbar-inverse .navbar-nav > li > a:hover { color: #eda93f; font-size: 1.5em; } ul.xoxo { list-style: none; padding-left: 0; margin: 2px auto; } #content { float: left; width: 75%; padding-left: 35px; padding-right: 35px; } @media screen , (max-width: 770px) { #content { width: 100%; padding-top: 25px; } } #sidebar { float: right; width: 24%; margin-right: 1%; border-left: .5vw solid rgba(67, 31, 132,.5); border-top: .5vw solid rgba(67, 31, 132,.5); border-radius: 25px; padding-top: 7px; } .smb { width: 2.5vw; height: 2.5vw; margin-right: 2px; } @-webkit-keyframes hvr-pulse { 25% { -webkit-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes hvr-pulse { 25% { -webkit-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: scale(0.9); transform: scale(0.9); } } .hvr-pulse { position: relative; top: 4%; float: right; display: block; vertical-align: middle; -webkit-transform: translatez(0); transform: translatez(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } .hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active { -webkit-animation-name: hvr-pulse; animation-name: hvr-pulse; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }
