/* ======================================= Webfonts ======================================= */ @font-face { font-family: 'ZapfChanceryBold'; src: url('../font/ZapfChanceryBold.eot'); src: url('../font/ZapfChanceryBold.eot?#iefix') format('embedded-opentype'), url('../font/ZapfChanceryBold.woff') format('woff'), url('../font/ZapfChanceryBold.ttf') format('truetype'), url('../font/ZapfChanceryBold.svg#ZapfChanceryBold') format('svg'); font-weight: bold; font-style: normal; } /* ======================================= Reset ======================================= */ * { padding: 0; margin: 0; border: 0; } body { position: relative; font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 100%; color: #660000; } img { width: 100%; height: auto; } /* Typography =========================== */ p { font-size: 0.938em; line-height: 1.5em; font-weight: 400; } h1 { font-size: 2em; line-height: 1.125em; font-family: "ZapfChanceryBold", serif; margin-bottom: 15px; } h2 { font-size: 1.125em; line-height: 1.5em; font-family: "ZapfChanceryBold", serif; margin-bottom: 5px; } h3 { font-size: 1.25em; line-height: 1.25em; margin-bottom: 10px; } #nav { font-size: 1em; } sup { font-size: 0.689em; } header ul { list-style-type: none; } #content .hidden_content ul { list-style-type: disc; margin-left: 0.5em; padding-left: 0.5em; margin-bottom: 20px; } #content .hidden_content li { font-size: 0.938em; line-height: 1.375em; padding-bottom: 3px; } .btn_show_and_hide_zugeklappt_1 i, .btn_show_and_hide_zugeklappt_2 i { margin-left: 8px; } .btn_order i, .print_button i { font-size: 1.5em; margin-right: 8px; } /* Linkverhalten =========================== */ a:link, a:visited, a:active { color: #C00; text-decoration: none; } a:focus, a:hover { text-decoration: none; color: #C00; border-bottom: 1px solid #C00; } header a:link, header a:visited, header a:active { color: #660000; border-bottom: none; } header a:focus, header a:hover { color: #C00; border-bottom: none; } .flexslider a:focus, .flexslider a:hover { color: #fff; border-bottom: none; } .btn_show a { border-bottom: none; } /* Linkverhalten Booking.com =============== */ #bcom_review_widget a { border-bottom: none; } #bcom_review_widget { margin-top: 10px; } /* ======================================= Layout ======================================= */ /* Header =========================== */ #wrapper_header { position: absolute; top: 0; z-index: 10; width: 100%; background: url(../img/bg_header_80.png); background-repeat: repeat; -webkit-box-shadow: 0 10px 8px -2px rgba(25,0,0,0.3); -moz-box-shadow: 0 10px 8px -2px rgba(25,0,0,0.3); -ms-box-shadow: 0 10px 8px -2px rgba(25,0,0,0.3); -o-box-shadow: 0 10px 8px -2px rgba(25,0,0,0.3); box-shadow: 0 10px 8px -2px rgba(25,0,0,0.3); } header { position: relative; height: 70px; width: 100%; min-width: 300px; max-width: 1600px; margin: 0 auto; } #logo { width: 160px; position: absolute; right: 2.5%; top: 20px; z-index: 10; } #logo a { display: block; padding-bottom: 10px; background-image: url(../img/logo_chesa_michel.png); background-repeat: no-repeat; background-size: 100% auto; transition-duration: 0.25s; } #logo a:focus, #logo a:hover { background-image: url(../img/logo_chesa_michel_over.png); } /* Content ========================== */ #wrapper_content { width: 100%; min-width: 300px; max-width: 1600px; padding: 100px 0 40px 0; margin: 0 auto; transition-duration: 1s; } #content { margin: 0 3% 0 3%; padding: 2% 2% 4% 2%; background-color: #fff; } .video_links { float: left; width: 49%; margin-bottom: 2%; } .video_rechts { float: right; width: 49%; margin-bottom: 2%; } .clear { clear: both; } .google_fluid_wrapper { position: relative; padding-bottom: 200px; /* Padding bestimmt Kartenformat */ height: 0; width: 90%; margin: 20px 10% 7px 0; border: 1px solid #666; overflow: hidden; } .google_fluid_wrapper iframe { position: absolute; top: -70px; left: 0; width: 100%; height: 270px; border: none; } .kontakt_100 { width: 100%; margin: 0; } .trennlinie { border-top: 1px solid #ccc; margin: 20px 0; } .hinweis_links { display: none; } /* ======================================= Extras ======================================= */ html { height: 100% !important; background-position: center center !important; background-attachment: fixed !important; background-repeat: no-repeat !important; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; overflow: hidden !important; } body { height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } #home { background-image: url("../img/bg_home_2.jpg"); } #kontakt { background-image: url("../img/bg_kontakt_2.jpg"); } #umgebung { background-image: url("../img/bg_umgebung_2.jpg"); } #wohnung_palue { background-image: url(../img/bg_wohnung_palue_2.jpg); } #wohnung_bernina { background-image: url(../img/bg_wohnung_bernina_2.jpg); } #wohnung_roseg { background-image: url(../img/bg_wohnung_roseg_2.jpg); } #wohnung_diavolezza { background-image: url(../img/bg_wohnung_diavolezza_2.jpg); } #wohnung_nair { background-image: url(../img/bg_wohnung_nair_2.jpg); } #wohnung_morteratsch { background-image: url(../img/bg_wohnung_morteratsch_2.jpg); } #wohnung_muragl { background-image: url(../img/bg_wohnung_muragl_2.jpg); } #wohnung_grisch { background-image: url(../img/bg_wohnung_grisch_2.jpg); } .impressum { font-size: 0.814em; line-height: 1.25em; border-top: 1px solid #CCC; padding-top: 10px; margin-top: 20px; } .printadresse { display: none; } .addthis_toolbox .addthis_button_compact { margin-bottom: 0; } /* ======================================= Responsive ======================================= */ @media screen and (min-width: 769px) { /* Typography =========================== */ p { font-size: 1em; } h3 { font-size: 1.563em; } #nav { font-size: 1.25em; } #content .hidden_content li { font-size: 1em; } #logo { width: 200px; right: 4%; top: 17px; } /* ======================================= Layout ======================================= */ /* Header =========================== */ #wrapper_header { position: sticky; } /* Content ========================== */ #wrapper_content { padding: 130px 0 100px 0; overflow: hidden; } #content { float: right; width: 93%; max-width: 650px; margin: 0 3% 0 0; } .google_fluid_wrapper { position: relative; padding-bottom: 194px; /* Padding bestimmt Kartenformat */ height: 0; width: 100%; margin: 0 0 7px 0; } .google_fluid_wrapper iframe { position: absolute; top: -100px; width: 100%; height: 359px; border: none; transition-duration: 0.5s; } .kontakt_100 { width: 49%; margin-bottom: 2%; } .hinweis_links { display: block; font-family: "Open Sans", sans-serif; font-size: 0.875em; float: right; } /* ======================================= Extras ======================================= */ #home { background-image: url("../img/bg_home.jpg"); } #kontakt { background-image: url("../img/bg_kontakt.jpg"); } #umgebung { background-image: url("../img/bg_umgebung.jpg"); } #wohnung_palue { background-image: url(../img/bg_wohnung_palue.jpg); } #wohnung_bernina { background-image: url(../img/bg_wohnung_bernina.jpg); } #wohnung_roseg { background-image: url(../img/bg_wohnung_roseg.jpg); } #wohnung_diavolezza { background-image: url(../img/bg_wohnung_diavolezza.jpg); } #wohnung_nair { background: url(../img/bg_wohnung_nair.jpg); } #wohnung_morteratsch { background-image: url(../img/bg_wohnung_morteratsch.jpg); } #wohnung_muragl { background-image: url(../img/bg_wohnung_muragl.jpg); } #wohnung_grisch { background-image: url(../img/bg_wohnung_grisch.jpg); } .impressum { margin-top: 100px; } } /* Mobile only =========================== */ @media only screen and (min-device-width: 300px) and (max-device-width : 1024px) { #home { background-image: url("../img/bg_home_2.jpg"); } #kontakt { background-image: url("../img/bg_kontakt_2.jpg"); } #umgebung { background-image: url("../img/bg_umgebung_2.jpg"); } #wohnung_palue { background-image: url(../img/bg_wohnung_palue_2.jpg); } #wohnung_bernina { background-image: url(../img/bg_wohnung_bernina_2.jpg); } #wohnung_roseg { background-image: url(../img/bg_wohnung_roseg_2.jpg); } #wohnung_diavolezza { background-image: url(../img/bg_wohnung_diavolezza_2.jpg); } #wohnung_nair { background-image: url(../img/bg_wohnung_nair_2.jpg); } #wohnung_morteratsch { background-image: url(../img/bg_wohnung_morteratsch_2.jpg); } #wohnung_muragl { background-image: url(../img/bg_wohnung_muragl_2.jpg); } #wohnung_grisch { background-image: url(../img/bg_wohnung_grisch_2.jpg); } }