@font-face {font-family: 'rubik_light'; src: url('../fonts/rubik-light-webfont.woff2') format('woff2'), url('../fonts/rubik-light-webfont.woff') format('woff'), url('../fonts/rubik-light-webfont.ttf') format('truetype'), url('../fonts/rubik-light-webfont.svg#rubiklight') format('svg'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'rubik_medium'; src: url('../fonts/rubik-medium-webfont.woff2') format('woff2'), url('../fonts/rubik-medium-webfont.woff') format('woff'), url('rubik-medium-webfont.ttf') format('truetype'), url('rubik-medium-webfont.svg#rubikmedium') format('svg'); font-weight: normal; font-style: normal;}

html, body, div, span, h1, h2, p, a {margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline;}
html {line-height: 1;}
a {color: rgb(51, 51, 51); text-decoration: underline;}
a:hover {text-decoration: none;}

img.background {min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0;}
#box {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 375px; padding: 30px; background: rgba(255, 255, 255, 0.65); -moz-box-shadow: 0 0 30px rgb(0, 0, 0); -webkit-box-shadow: 0 0 30px rgb(0, 0, 0); box-shadow: 0 0 30px rgb(0, 0, 0); border-radius: 5px;}

h1 {font: 27px/30px rubik_medium, sans-serif; text-align: center;}
h2 {font: 18px/24px rubik_light, sans-serif; text-align: center; margin: 10px 0 0 0;}
p {font: 14px/20px rubik_light, sans-serif; margin: 10px 0 0 0; color: rgb(51, 51, 51); text-align: center;}
p span {color: rgb(0, 0, 0);}
p a.mail {font-size: 18px; color: rgb(0,0,0);}

@media screen and (max-width: 1024px) {
	img.background {left: 50%; margin-left: -512px;}
}
@media screen and (max-width: 375px) {
    #box {width: 65%;}
}