/* Fonts */
@font-face {
    font-family: 'opensans_bold';
    src: url('opensans-bold.eot');
    src: url('opensans-bold.eot?#iefix') format('embedded-opentype'),
         url('opensans-bold.woff2') format('woff2'),
         url('opensans-bold.woff') format('woff'),
         url('opensans-bold.ttf') format('truetype'),
         url('opensans-bold.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'opensans_regular';
    src: url('opensans-regular.eot');
    src: url('opensans-regular.eot?#iefix') format('embedded-opentype'),
         url('opensans-regular.woff2') format('woff2'),
         url('opensans-regular.woff') format('woff'),
         url('opensans-regular.ttf') format('truetype'),
         url('opensans-regular.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Common */
body {font-family: 'opensans_regular', sans-serif;}
h1, h2, h3, h4, h5, h6, strong {font-family: 'opensans_bold', sans-serif;}
.lacave-color {color: #47382f;}
.marcelin-color {color: #604737;}
.arte-color {color: #9dc418;}
.americani-color {color: #a2185b;}

/* Header */
#logo {background-image: url("../img/logo.png"); background-position: center; background-repeat: no-repeat; height: 200px;}
#logo .square-link {width: 80px; height: 80px;}

/* Main */
#lacave .block-link:hover, #lacave .block-link:active, #lacave .block-link:focus {background-color: rgba(71,56,47,0.7);}
#marcelin .block-link:hover, #marcelin .block-link:active, #marcelin .block-link:focus {background-color: rgba(96,71,55,0.7);}
#arte .block-link:hover, #arte .block-link:active, #arte .block-link:focus {background-color: rgba(157,196,24,0.7);}
#americani .block-link:hover, #americani .block-link:active, #americani .block-link:focus {background-color: rgba(162,24,91,0.7);}

/* Footer */
footer {text-align: center;}
footer ul {list-style: none; padding: 15px 0 0; list-style-position: inside; margin-left: -1em; border-top: 1px solid #000;}
footer ul>li>a {color: #000;}
footer ul>li>a:hover, footer ul>li>a:active, footer ul>li>a:focus {color: #000;}
footer h4 a {color: #000;}
footer h4 a:hover, footer h4 a:active, footer h4 a:focus {color: #000;}

/* Media screen */
@media (max-width: 767px) {
    #logo {margin: 60px 0;}
    #img-container {height:300px; margin: 0 -15px 200px; padding-top:300px; background-image:url("../img/home-roerosquare.jpg"); background-size: cover; background-position: center top; background-repeat: no-repeat;}
    #img-container .block-link {display: block; padding: 15px 0; margin: auto -15px;}
    #img-container .block-link img {margin: auto;}
}

@media (min-width: 768px) {
    #logo {margin: 110px 0;}
    #img-container {margin-bottom: 200px; background-image:url("../img/home-roerosquare.jpg"); background-size: 100%; background-position: center top; background-repeat: no-repeat;}
    #img-container .block-link {display: block; height: 100%; position: relative;}
    #img-container .block-link img {position: absolute; bottom: -150px;; left: 0; right: 0; margin: auto;}
    #lacave, #marcelin, #arte, #americani {height: 100%; padding: 0;}
}

@media (min-width: 768px) and (max-width: 991px) {
    #img-container {height: 175px;}
}

@media (min-width: 992px) and (max-width: 1199px) {
    #img-container {height: 225px;}
}

@media (min-width: 1200px) {
    #img-container {height: 275px;}
}