@font-face{
    font-family: 'markerfelt'; 
    src: url('fonts/marker_felt_thin.eot'); 
    src: url('fonts/marker_felt_thin.eot?#iefix') format('embedded-opentype'), 
        url('fonts/marker_felt_thin.woff') format('woff'), 
        url('fonts/marker_felt_thin.ttf') format('truetype'); }

body, html {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

body {
    background: linear-gradient(6deg, #c0c8d3 0%, #fff9e6 100%);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/open-sans-v28-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/open-sans-v28-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v28-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v28-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v28-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v28-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/open-sans-v28-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/open-sans-v28-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v28-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v28-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v28-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v28-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-700italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/open-sans-v28-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/open-sans-v28-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v28-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v28-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v28-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v28-latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}






/* GENERAL DEFINITIONS + COLORS */



a {
    text-decoration: none;
    color: inherit;
}

b {font-weight: 700;}

p {
    hyphens: auto;
}

ul, li, p {
    margin: 0; padding: 0;
}

h1,h2,h3,h4,h5,h6 {
    margin: 0;
    padding: 0;
}

h1,h2,h3 {
    font-family: 'markerfelt', cursive;
    text-transform: uppercase;
    border-bottom: 3px dotted #999;
    border-bottom: 3px dotted rgba(0,0,0,0.4);
    margin: 0 0 0.1em;
}


.t_blue {color: #295e80;}
.t_green1 {color: #347217;}
.t_green2 {color: #a5bc46;}
.t_red {color: #8c0a00;}

.b_blue {background-color: rgba(41,94,128,0.75);}
.b_green1 {background-color: rgba(52,114,23,0.75);}
.b_green2 {background-color: rgba(124, 144, 41, 0.75);}
.b_red {background-color: rgba(140,10,0,0.75);}

.bg_blue {
    background: #5a90b3; /* Old browsers */
    background: -moz-linear-gradient(top, #5a90b3 0%, #003659 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #5a90b3 0%,#003659 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(106,150,220,0.3) 0%, rgba(36,82,217,0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a90b3', endColorstr='#003659',GradientType=0 ); /* IE6-9 */
}

.bg_green1 {
    background: #478a27; /* Old browsers */
    background: -moz-linear-gradient(top, #478a27 0%, #1f5408 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #478a27 0%,#1f5408 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #478a27 0%,#1f5408 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#478a27', endColorstr='#1f5408',GradientType=0 ); /* IE6-9 */
}

.bg_green2 {
    background: #acbc6d; /* Old browsers */
    background: -moz-linear-gradient(top, #acbc6d 0%, #4e5c15 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #acbc6d 0%,#4e5c15 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #acbc6d 0%,#4e5c15 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#acbc6d', endColorstr='#4e5c15',GradientType=0 ); /* IE6-9 */
}

.bg_red {
    background: #a83129; /* Old browsers */
    background: -moz-linear-gradient(top, #a83129 0%, #5e0700 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #a83129 0%,#5e0700 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #a83129 0%,#5e0700 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a83129', endColorstr='#5e0700',GradientType=0 ); /* IE6-9 */
}

.house_name {
    display: block;
    position: absolute;
    bottom: 0;
    padding: 0.5em 0;
    width: 100%;
    color: #FFF;
    text-align: center;
    font-weight: bold;
}




/*NAVBAR AND NAVIGATION*/




#navbar {
    font-size: 1.5em;
    position: fixed;
    width: 100%;
    background-color: #FFF;
    height: 2.5em;
    top: 0;
    z-index: 88;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.8)
}

#navbar > ul {
    margin: 0.7em 0 0 0;
    padding: 0 1.5em 0 0;
    list-style: none;
    float: right;
    overflow: hidden;
    max-height: 1.3em;
    background-color: #FFF;
    transition: max-height 0.15s linear;
}


#navbar ul:hover {
    max-height: 16.2em;
}

#navbar ul li:last-of-type {padding-bottom: 0.5em;}
#navbar > ul > li > a:first-of-type {padding-top: 0.5em;}
#navbar ul a {margin: 0 0 0 1em;}
#navbar ul a:before {
    content:"";
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    background: #CCC;
    margin: 0.1em 0.2em;
}


#navbar ul li ul li:nth-of-type(1) a:before {background: #396e90;}
#navbar ul li ul li:nth-of-type(2) a:before {background: #65742e;}
#navbar ul li ul li:nth-of-type(3) a:before {background: #a9b450;}
#navbar ul li ul li:nth-of-type(4) a:before {background: #822d27;}

#navbar ul a:hover:before {background: #FFAA00;}
#navbar ul a:hover:before {background: #FFAA00;}
#navbar ul li ul li a:hover:before {background: #FFAA00;}

#navbar a:hover {}

#navbar ul li ul {
      list-style: none;
}

#navbar ul li ul li {
    font-size: 1.4rem;
    margin: 0 0 0 1em;
    padding: 0;
}

#navbar h3 {text-align: right; padding: 0 0 0.35em 0; transition: color 0.2s ease-in-out; color: #F80;}
#navbar ul:hover h3 {color: #000;}
#navbar h3:after {
    content: url(res/hamburger-01.svg);
    margin: 0 0 0 0.5em;
}

.link_more {
    font-weight: 600;
    text-align: right;
    transition: all 0.4s ease-in-out;
}

.link_more:hover {
    color: #FFF;
}








.content_center {
    width: 70%;
    margin: 7em auto;
}

.content_center a {font-style: italic; transition: color 0.2s ease-in-out;}
.content_center a:hover {color: #FA0;}

@media screen and (max-width: 1000px) {
    .content_center {width: 100%;}
}


.content_center p {
    margin: 0.5em 0;
}

.content_center ul li {
    margin: 0 0 0 1.5em;
    list-style: none;
    font-weight: 600;
}

.content_center ul li ul {
    border-top: 3px dotted rgba(0,0,0,0.5);
}

.content_center ul li ul li{
    display: inline-block;
    margin-right: 1em;
    font-weight: 300;
}

.content_center ul li ul li:before {
    content: "";
    display: inline-block;
    height: 0.8em;
    width: 0.8em;
    margin: 0.3em 0.3em 0 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(res/tickmark.svg);    
}

.content_center > div {
    width: 100%;
    max-width: 1000px;
    margin: 5em auto;
}

.content_center .block_text {
    background-color: rgba(255,255,255,0.9);
    margin:  2em auto;
    width: 80%;
    max-width: 800px;
    border-radius: 1em;
    box-shadow:  0 0 3em 0 rgba(0,0,0,0.1);
    overflow: hidden;
    position: relative;
}

#map {
    width: 100%;
    margin: 2em 0;
    padding: 0 0 8px 0;
    text-align: center;
}

#mapbutton {
    margin: 0 2em;
    border-radius: 0.5em ;
    border: 1px solid #666;
    transition: background 0.3s ease-in-out;
}
#mapbutton:hover {
    cursor: pointer;
    background: #f3f3f3;
}

@media screen and (max-width:640px) {
    .content_center .block_text {width: 95%;}
}

.content_center .block_text > div:not(.banner):not(.gallery){
    width: 80%;
    margin: 1em auto;
}

.content_center .block_text > div:first-of-type {margin-top: 2em}
.content_center .block_text > div:last-of-type {margin-bottom: 2em}


.bars_blue {border-top: 0.5em solid #598eb0; border-bottom: 0.5em solid #598eb0;}
.bars_green1 {border-top: 0.5em solid #65842e; border-bottom: 0.5em solid #65842e;}
.bars_green2 {border-top: 0.5em solid #B9C460; border-bottom: 0.5em solid #B9C460;}
.bars_red {border-top: 0.5em solid #923d37; border-bottom: 0.5em solid #923d37;}
.bars_orange {border-top: 0.5em solid #ADF; border-bottom: 0.5em solid #ADF;}

.banner {
    display: block;
    width: 100%;
    min-height: 15em;
    background-size: cover;
    background-position: center;
}




/* GALLERY */

.gallery {
    width: 100%;
    font-size: 0;
}

.gallery > a {
    position: relative;
    font-size: 1rem;
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid #FFF;
    width: 33.33333%;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

@media screen and (max-width: 1000px) {
    .gallery > a { width: 45%; margin: 0.2em 2.5%;}
}

.gallery > a:before, .gallery_inline > a:before {
    content: "";
    float: left;
    padding-bottom: 65%;
}

.gallery > a:after, .gallery_inline > a:after, #logo_topleft:after {
    content: "";
    display: table;
    clear: both;
}

.gallery > a p {
    font-size: 1rem
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 0.5em;
    font-weight: 600;
    color: #FFF;
}

.gallery > a p:before {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin: 0 0.1em 0 0;
    background: #FFF;
} 



/* INLINE GALLERY */

.gallery_inline {
    width: 100%;
    min-height: 0;
    font-size: 0;
}

.gallery_inline a {
    display: inline-block;
    box-sizing: border-box;
    border: 2px solid #FFF;
    font-size: 1rem;
    width: 50%;
    background-size: cover;
    background-position: center;
}

#logo_topleft {
    position: fixed;
    display: block;
    top: 0.2em;
    left: 1em;
    width: 10%;
    min-width: 100px;
    z-index: 99;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(res/logo.svg);
}

#logo_topleft:before {
    content: "";
    float: left;
    padding-bottom: 100%;
}

table.distance {
    width: 100%;
    border-collapse: collapse;
}

.distance tr {width: 100%;}
.distance tr td {padding: 3px 0;}
.distance tr td:nth-of-type(1) {text-align: left; padding-left: 0.5em;}
.distance tr td:nth-of-type(2) {text-align: right; padding-right: 0.5em; min-width: 5em;}

.distance tr:nth-of-type(2n-1){background-color: rgba(0,160,255,0.1)}
.distance tr:nth-of-type(2n){background-color: rgba(80,180,255,0.1)}

.button_topright {
    display: block;
    position: absolute;
    top: 0.75em;
    right: 1em;
    width: 4em;
    height: 4em;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}