html, body {margin: 0; padding: 0; height: 100%; } body, h1 {font: 400 16px Helvetica, Verdana, Tahoma, Arial,  sans-serif; color: #FFF; text-align: center; background: #9CBEEB; } h1 {margin: 15px 0; font-size: 20px; color:#FFF; } a, a:link, a:active, a:visited {color: #FFF; text-decoration: none; } a:hover {color: #FFF; } #marissa {margin: 0 auto; text-align: center } .matilda {width: 300px; } .anaya {position: absolute; top: 0; left: 0; width: 300px; min-height: 85px; border: none !important; } div.jolie {display: inline-block; width: 300px; position: absolute; top: -9999px; padding: 0; margin: 2px auto; border: 0px solid #FFF; } .jolie.breanna {border: 1px solid transparent; } .jolie img {display: block; width: 100%; } .haven {height: 250px; border: 1px solid #FFF; } .haven>iframe {border: 0; overflow: hidden; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; } .judith {display: none; } .elin h2 {display: block; position: absolute; right: 2px; top: 2px; margin: 0; padding: 5px 10px; font: 20px Helvetica, Verdana, Tahoma, Arial, sans-serif; color: #FFF; font-weight: 400; background: rgba(0, 0, 0, .75); z-index: 99;border-radius: 6px;-webkit-border-radius: 6px;-moz-border-radius: 6px;-o-border-radius: 6px; } .elin {display: block; position: relative; width: 100%; height: auto; } .jolie:hover {opacity: 0.75;} .jolie:hover h2 {color: #F8F3B1;} .finley {display: inline-block; width: 1850px; width: 96%; margin-bottom: 15px; text-align: justify; color: #000000; } @media screen and (min-width:1921px) { #marissa {width: 1850px !important; }}@media screen and (min-width:2560px) { #marissa {width: 2450px !important;}} @media screen and (max-width:1849px) {.finley {width: 1540px; } } @media screen and (max-width:1539px) {.finley {width: 1230px; } } @media screen and (max-width:1229px) {.finley {width: 920px; } } @media screen and (max-width:919px) {.finley {width: 610px; } } @media screen and (max-width:760px) {#marissa {display: inline-block; width: 460px !important; height: auto !important; margin: 0 auto; text-align: center; } div.jolie {display: inline-block; position: static !important; width: 100%; height: auto; margin: 0 auto; padding: 0; } .jolie img {height: auto; border: 0; } .judith {position: static !important; width: 100%; height: 250px; margin: 0 0 5px 0; padding: 0; } .jolie.haven {margin: 0 0 5px 0; } .matilda {display: inline-block; width: 300px; } .matilda h1 {margin: -6px 0 5px; font-size: 22px; } .elin h2 {font-size: 22px; } .finley {width: 460px !important; } div.jolie.katherine {display: none; } } @media screen and (max-width:460px) {div.jolie {display: block; width: 100%; height: auto; margin: 0 0 -5px 0; position: static !important; border: 0; } .jolie img {display: inline-block; width: 100%; height: auto; } #marissa {width: 100% !important; } .finley {width: 96% !important; } .jolie.haven, .judith {margin: 0; } }