*{ margin: 0; box-sizing: border-box; }
html, body{ margin: 0; padding: 0; height: 100%; font-family: 'Open Sans', Arial, Helvetica, sans-serif; position: relative; }
a{ color: #62377a; transition: color .2s ease; }
a:hover, a:active{ color: #7d4d97; }
body{ background-color: #F9F0F5; }

.container{ max-width: 1250px; margin: 0 auto; padding: 35px; position: relative; display: flex; justify-content: center; flex-direction: column; height: 100%; }

#header{ padding-bottom: 35px; }
@media only screen and (min-width:801px){
  #header #logo{ max-width: 300px; }
}
@media only screen and (max-width:800px){
  #header #logo{ max-width: 200px; max-height: 75px; }
}

#main{ padding-bottom: 26px; }
#main h1{ font-size: 2.125rem; font-weight: 300; color: #202020; padding: 0 0 18px }
#main p{ color: #202020; font-size: 0.9rem; padding-bottom: 14px; line-height: 1.6; }

#footer{ width: 100%; }

.networks{ list-style: none; margin: 0; padding: 0; }
.networks li{ display: inline-block; margin: 0 0 5px 0; }
.networks .email{ width: 100%; }
.networks a{ display: block; text-decoration: none; color: #202020; transition: all .2s ease; border-radius: 3px; width: fit-content; }
.networks a:hover{ background-color: #293852; color: #FFF; border-radius: 5px; }
.networks .icon{ width: 36px; line-height: 36px; text-align: center; }
.networks .data{ line-height: 36px; padding: 0 12px 0 6px; }
#contacts.networks{ padding-top: 8px; }

@media only screen and (min-width: 1025px){
  #content{ width: 50%; padding: 25px 80px 25px 25px; }
  body::after{ content:""; background-image: url('../images/sean-oulashin-KMn4VEeEPR8-unsplash.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; bottom: 0; left: 50%; right: 0; width: 50%; z-index: 2; }
  #wrap #photo{ position: absolute; width: fit-content; height: fit-content; top: 50%; transform: translate(-50px,-50%); left: 50%; box-shadow: 0 2px 5px rgba(0,0,0,.25); margin: 0; z-index: 5; }
  #wrap #photo img{ max-height: 500px; max-width: 400px; height: auto; width: auto; vertical-align: bottom; }
}
@media only screen and (min-width: 801px) and (max-width: 1024px){
  .container{ padding: 0; }
  #content{ width: 50%; padding: 25px; }
  body::after{ content:""; background-image: url('../images/sean-oulashin-KMn4VEeEPR8-unsplash.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; bottom: 0; left: 50%; right: 0; width: 50%; z-index: 2; }
  #main h1{ font-size: 2.125rem; }
  #main p, .networks a{ font-size: 0.875rem; }
  #wrap #photo{ display: none; }
}
@media only screen and (max-width: 800px){
  #header #logo{ max-height: 65px; }
  #content{ width: 100%; padding: 35px 0; }
  #main h1{ font-size: 1.75rem; }
  #main p, .networks a{ font-size: 0.875rem; }
  #wrap #photo{ display: none; }
}