html {background-color: #fefefe; background-image: radial-gradient(circle at 60% 10%, #bbb 0%, transparent 50%), radial-gradient(circle at 30% 70%, #bbb 0%, transparent 50%);}
body {font: 1.4em/1.2em "Open Sans", Helvetica, "Helvetica Neue", Arial, sans-serif; padding: 0; margin: 0; hyphens: auto; color: #666;}
.view {width: 66%; max-width: 1280px; margin: 0 auto; position: relative;  overflow: hidden;}

header, footer, section {padding: 1em 0 0em 0; overflow: hidden;}
header {margin-top: 5em;}

nav {text-align: right;}
nav a {font-size: 0.9em; display: inline-block; padding: 1em 0.5em;}

a {text-decoration: none; color: #fff; font-weight: bold;}
a:hover {color: blue; transition: all 1s ease-out;}

header img {width: 10rem; height: 10rem; border-radius: 50%; float: left; margin-right: 3rem; position: relative; top: -1.2rem;}
h1 {font-size: 3.5em; line-height: 0.8em; position: relative; margin: 0; color: #fff; hyphens: none;}
h1 span {font-weight: 300; font-size: 0.81em; letter-spacing: 0.3rem; display: block;}
h1 span:after {position: absolute; content: "_"; color: blue; animation: 2s blink_effect infinite}
@keyframes blink_effect { 0% {visibility: hidden;} 50% {visibility: hidden;} 100% {visibility: visible;}}

h2 {font-size: 2em; line-height: 0.8em; letter-spacing: -0.02em; color: #fff; margin: 0; padding: 2em 0 0.3em ;}
h3 {font-size: 1.3em; line-height: 1em; margin: 0.5rem 0 0;}

.boxs {width: 33.3%; box-sizing: border-box; float: left; padding: 2rem; overflow: hidden;}
.boxm {width: 50%; box-sizing: border-box; float: left; padding: 0 2rem;}
.padding {padding-left: 2rem;}

a.boximg {position: relative; display: block; background-size: cover; background-position: 50% 50%; min-height: 24rem; color: inherit; font-weight: inherit;}
.boximg:hover {background-size: 0;}
.boxtext {position: absolute; box-sizing: border-box; opacity: 0; min-height: 24rem;}
.boxtext:hover {opacity: 1; transition: all 1.5s ease-out;}
.boxtext:before {position: absolute; content: ""; width: 1.45em; border-top: 3.5px solid blue; top: 0; left: 0;}
.boxtext:after {position: absolute; content: ""; width: 1.45em; border-bottom: 3.5px solid blue; bottom: 0; right: 0;}
.boxtext h3 {color: #fff;}

address {font-style: normal;}

#social {margin: 3em 0; text-align: center;}
#social a {display: inline-block; width: 4rem; height: 4rem; padding: 0 1rem;}
#social svg {border-radius: 100%; fill: #dedede; background: #fff; }
#social svg:hover {transform: scale(1.25); transition: transform .5s ease-out;}

::selection {background: blue; color: white;}
@media screen and (max-width: 1500px){.view {width: 80%;}}
@media screen and (max-width: 1200px){.view {width: 85%;} .boxm {padding: 1rem;} .boxs {padding: 1rem;} .padding {padding-left: 1rem;}}
@media screen and (max-width: 992px) {.view {width: 90%;} body {font-size: 1.2em;} .boxm {width: 100%;} .boxs {width: 50%;} header img {width: 7em; height: 7em;}}
@media screen and (max-width: 768px) {.view {width: 95%;} .boxs {width: 100%;} nav {font-size: smaller;} header img {display: none;} h1 {font-size: 2.3em;} h1 span {font-size: 0.7em;}}