body {font-family: 'Source Sans Pro', Arial, sans-serif; font-size: 24px; color: #333; background: #fff; text-align: left;}
body, h2, h3, h4, p {font-weight: 300; margin: 0; padding: 0;}
header {padding: 0.5em 0;}
h1 {font-family: 'Lily Script One', cursive; font-size: 1.92em; font-weight: normal;}
h1, h2 {text-transform: lowercase; display: inline;}
h2 {font-size: 1em; color: #5d594c; margin-left: 0.71em;}
h3 {font-size: 2em; margin-bottom: 0.5em;}
h4, footer {font-weight: 400;}
ul {margin: 0.5em 0 1em;}
#photo {background-color: #0b1117;}
#photo img {padding: 0; display: block;}
.box {padding: 1.85em 0 3.5em;}
.content {margin-left: 255px;}
#contact {background-color: #f5f5f5;}
#contact .content {font-size: 0.75em;}
#contact p:last-child {margin-top: 1em;}
footer {font-size: 0.583em; color: #777; background-color: #0d0d0d; text-align: center; padding: 1.714em 0;}
footer a {color: #ccc;}

.rtls, .rtls span {unicode-bidi:bidi-override; direction: rtl;}
.rtls span {float: left; font-size: 0;}

/* MEDIA QUERIES */
@media screen and (min-width: 1024px) {
    header, #photo img, .box {width: 1024px; margin: 0 auto;}
}
@media screen and (max-width: 1024px) {
    header, .box {width: 95%; margin: 0 auto;}
    #photo img {width: 100%;}
    .content {margin-left: 25%;}
}

@media screen and (max-width: 800px) {
    .content {margin-left: 0;}
    body {font-size: 20px;}
}

@media screen and (max-width: 480px) {
    header, h3 {text-align: center;}
}