body{background: #333 url("bg.jpg") no-repeat fixed left; background-size:cover; font-size: 16px; line-height: 26px; font-family: Lato, sans-serif; color:#fff; padding:0; margin:0;}
a{color:#ccc; text-decoration:none; transition-timing-function: ease; transition-duration: 0.5s;}
h1{text-transform: uppercase; margin:0; font-size: 1em; line-height: 1em;}
h2{text-transform: uppercase; margin:20px 0 10px 0; line-height: normal;}
ul, p{margin:0 0 30px 0; max-width: 600px;}
address{font-style:normal;}
img{transition-timing-function: ease; transition-duration: 0.5s; width: 100%; max-width: 300px; display:inline-block; margin: 25px 0; }
.addressBox{width: 33.3%; min-height:calc(100vh - 70px); height:calc(100% - 70px); padding: 35px; box-shadow: 4px 2px 10px 4px #2a4162; float: right; background: rgba(0, 0, 0, .6);  transition-timing-function: ease; transition-duration: 0.5s;}
.icon{display:inline-block; font-size: 26px; margin:20px 10px 0 0;}

@media only screen and (min-width: 1099px) {
	/* Hover effects only on big screens*/
	img:hover{transform: scale(1.1);}
	a:hover{color:#eee;}
	.addressBox:hover{background: rgba(0, 0, 0, .9); }
}

@media only screen and (max-width: 979px) {
	h1{font-size: 1em;}
}

@media only screen and (max-width: 979px) {
	.addressBox{width: 50%;}
}

@media only screen and (max-width: 650px) {
	.addressBox{width: 60%;}
}

@media only screen and (max-width: 450px) {
	.addressBox{width: calc(100% - 50px); min-height:calc(100vh - 50px); height:calc(100% - 50px); padding: 25px;}
}

@media only screen and (max-width: 350px) {
	img{max-width: 100%; }
}