/* 
	FONTS
		- Harriet Display Regular
		Verwendung: Headline, Ausrichtung: linksbündig, Spationierung: metrisch 20, Zeilenabstand: 90% */

		@font-face {
		  font-family: Gilroy;
		  src: url('https://6b47.craftandvalue.com/files/img/_fonts/gilroy-regular-webfont.woff2') format('woff2'), url('https://6b47.craftandvalue.com/img/_fonts/gilroy-regular-webfont.woff') format('woff');}
		  
		@font-face {
		  font-family: GilroyBold;
		  src: url('https://6b47.craftandvalue.com/files/img/_fonts/gilroy-bold-webfont.woff2') format('woff2'), url('https://6b47.craftandvalue.com/img/_fonts/gilroy-bold-webfont.woff') format('woff');}			  	  

		  /* - Gilroy Regular */


* {margin: 0; padding: 0;}
body {color: #333; padding: 0; font-family: Gilroy; background: transparent url(http://www.hinterleithner.at/tl_files/design/background.jpg) left 0 no-repeat; background-size: 100%;}
div, p, td, tr {font-size: 1rem; color: #333;}

a:link, a:visited, a:focus {color: #C2AC83 !important; outline: none;}
a:hover {color: #c4c4c4; text-decoration: none;}

.clear {clear: both; display: block; height: 0; visibility: hidden;}

.mod_article p {margin-bottom: 22px; font-size: 1.05rem; line-height: 1.5rem;    letter-spacing: 0.8px;}
.mod_article ul {margin-left: 20px;}
.mod_article ul li {margin: 0 0 8px 0;    letter-spacing: 0.8px;}
.mod_article h3 {text-transform: uppercase; margin-bottom: 5px; letter-spacing: 2px;}

/* - - -  */

.logo {position: relative; top: 50px; margin: 0 auto; width: 255px; display: block; background: transparent; background: transparent url(http://www.hinterleithner.at/tl_files/hinterleithnerLogo.svg) left 0 no-repeat; background-size: 100%; 
    display: block;    height: 110px;
    margin-bottom: 35px;}

#kontakttop {text-align: center; font-size: 0.8rem; color: #333; text-transform: uppercase; position: relative; padding-top: 50px; letter-spacing: 2px; line-height: 1.6rem;} 
#kontakttop h2 {font-size: 14px; margin: 0; padding: 0;}

#kontakttop.bottom {color: #FFF;}

.willkommen {position: absolute; top: 50px; left: 340px; width: 380px; font-family: times; font-size: 20px; text-align: center; color: #593934; line-height: 26px;}
#copyright {text-align: center; font-size: 11px; color: #737373; padding-top: 0px; padding-bottom: 70px; color: #FFF;    letter-spacing: 2px; opacity: 0.5;}
#copyright a {color: #fff;}

/* - - -  */

#aktivIn {width: 250px; float: left;}
#neuesModulFront {width: 200px; float: left; position: relative; left: 330px;}

#news h1 {font-size: 19px; line-height: 24px;}


h2 {    color: #333;
    letter-spacing: 4px;
    font-size: 1.5rem;
    line-height: 2rem;
    font-family: GilroyBold;
    text-transform: uppercase;    margin: 70px 0 40px;}

h3 {margin: 50px 0 30px 0;}
h5 {color: #333; padding: 0; margin: 0;}

.ce_gallery img {border-radius: 4px; margin-right: 4px;}


#wrapper {position: relative; width: 100%; background: #FFF;}

#left {width: 78px; height: 300px;}
#right {width: 195px; position: relative; top: 60px; margin-left: 30px; display: inline;}
#main {}

#header {    padding: 0 15%;}
#container2 {    padding: 0 15%;}

#main {display: block;}

#footer {background: #333;    margin-top: -50px;}
#footer .inside {    padding: 0 15%;}


.kontaktundanfahrt #main {}
.kontaktundanfahrt #right {margin: 15px 10px 0 0;}
.anfahrtbox {color: gray; font-size: 11px;}

#newsBottomTeaser {width: 400px; border: 1px solid #000; position: relative; left: 78px;}

#newsBottomTeaser h2 a {color: #000;}

#zimmer .preise li {width: 230px; float: left; border-top: 1px solid #6C3109; border-left: 1px solid #6C3109; padding: 10px; margin: 5px; list-style: none; background: #E1e6cf;}

#zimmer .preise .europreis {font-size: 15px; font-weight: bold; text-align: right; color: #6C3109; position: relative; top: -22px;}


div.toggler {    cursor: pointer;
    color: #333;
    margin: 0 0 20px 0;
    padding: 15px;
    font-weight: bold;
    background: rgba(194, 172, 131, 0.6) url(http://www.hinterleithner.at/tl_files/design/arrowToggler.gif) left 3px no-repeat;
    text-transform: uppercase;
    letter-spacing: 2px;}


/* - - - - - - NAVIGATION - - - - .mod_customnav li .wien:visited - - -  */


/* News */

.mod_newslist h2 a:link, .mod_newslist h2 a:visited {color: #678037;text-decoration: none;}
.mod_newslist h2 a:hover {color: #eeae55;}
.mod_newslist img {border: 1px solid #ccc; margin-right: 10px; margin-bottom: 10px;}
.mod_newslist h1 {margin: 0; color: #333; width: 100%;}
.mod_newslist p.info {color: #a3a3a3; margin-bottom: 10px; font-size: 11px;}
.mod_newslist .ce_text {border-bottom: 1px solid #a3a3a3; padding-bottom: 10px;}

/* Formular */

#f1 {margin-bottom: 150px;}

#f1 input, #f1 textarea {width: 100%; background: #eee; border: 0;    padding: 8px;margin: 8px 0 0 0px; border-radius: 3px;}

#f1 input.submit {margin-top: 20px; display: block; background: #C2AC83;}
#f1 input.submit:hover {background: #333; color: #FFF;}

#f1 .widget-select {margin-top: 10px;}
	#f1 .widget-select select {width: 100%;}

/* - - - NAVI - - - - - - - - - */


.mod_customnav {background: #333; padding: 0 15%; margin-top: 70px;}

.mod_customnav ul {display: flex; justify-content: space-between; flex-wrap: nowrap; font-size: 1rem;     width: 100%;}
.mod_customnav li {flex-basis: 10%; }
.mod_customnav ul li a:link, a:visited {    position: relative;
    font-size: 0.9rem;
    text-decoration: none;
    color: #fff;
    font-family: Gilroy;
    letter-spacing: 2px; width: 100%; text-transform: uppercase; font-size: 1rem;     display: block;
  text-align: center;    line-height: 3rem;}
.mod_customnav ul li a:hover {color: #FFF;}
.mod_customnav ul li .active, .mod_customnav ul li.trail a {color: #FFF; font-family: GilroyBold; text-transform: uppercase;letter-spacing: 2px; padding: 10px;     line-height: 3rem;    font-size: 1rem;}
.mod_customnav ul li.trail a {padding: 0;}


.mod_navigationSub  {background: #FFF; padding: 0 15%; border-bottom: 1px solid rgba(194, 172, 131, 0.6);}

.mod_navigationSub ul {display: flex; justify-content: space-between; flex-wrap: nowrap; font-size: 1rem;  width: 100%;}
.mod_navigationSub li {list-style: none;}
.mod_navigationSub  ul li a:link, a:visited {    position: relative;
   font-size: 0.9rem;
    text-decoration: none;
    color: #C2AC83; list-style: none;
    font-family: Gilroy;
    letter-spacing: 2px; width: 100%; text-transform: uppercase; font-size: 1rem;     display: block;
  text-align: center;    line-height: 3rem;}
.mod_navigationSub  ul li a:hover {color: #333;}
.mod_navigationSub  ul li .active {color: #C2AC83; font-family: GilroyBold; text-transform: uppercase;letter-spacing: 2px; padding: 10px;     line-height: 3rem;    color: #C2AC83;    font-size: 0.9rem;}


a.button:link, a.button:visited {
    display: table;
    background: #FFF;
    border: 1px solid #D4AA6F;
    border-radius: 3px;
    padding: 12px 25px;
    text-transform: uppercase;
    text-decoration: none;
    color: #D4AA6F;
}
a.button:hover {
    background: #333;
    border: 1px solid #333;
}

.mod_article.first {}

.mod_article:nth-child(3) {background: rgba(194, 172, 131, 0.2);}
.umgebung .mod_article:nth-child(3) {background: #FFF;}
.umgebung .mod_article:nth-child(4) {background: rgba(194, 172, 131, 0.2);}


.flex {display: flex; justify-content: space-between; flex-wrap: wrap;}
	
.flex img {width: 100%;}

.flex .ce_image {width: 48%; line-height: 0;}
.flex .ce_text {width: 48%; padding-top: 40px; padding-bottom: 40px;} 

.flexAll {width: 70%; padding: 60px 15%; }

.flex .ce_image div {line-height: 0;}


.flex > div.ce_text.flexOne {margin-left: 15%; width: 30%; padding-right: 7%;}
.flex > div.ce_image.flexOne {padding-left: 0;}

.flex > div.ce_text.flexTwo, .flex > div.ce_form.flexTwo {    margin-left: 5%;
    width: 35%;
    padding-right: 10%;}
    .flex > div.ce_form.flexTwo {width: 33%;}
    
.flex > div.ce_image.flexTwo {padding-right: 0;}

.ce_form {    margin-top: 40px;}

.flexCenter {width: 60%; margin: 0 20%;}
.flexCenter .ce_text {width: 100%; padding-bottom: 0px;}

.ce_text .ce_accordion {width: 100%; margin-bottom: -30px; padding-bottom: 0px;}


.home .flex.row {justify-content: space-between;
    max-width: 100%;
    margin: 0 auto;
    padding: 80px 15%; border: none;}
.home .flex.row .ce_image {width: 150px;}
.home .flex.row img {width: 200px;}

.caption {position: relative; top: -30px; left: 10px; font-size: 0.8rem; color: #fff;}

.fotos {    padding: 10px 0;
    background: rgba(194, 172, 131, 0.3);}

.fotos div {width: 16%; border-right: 3px solid transparent; line-height: 0;}
    .fotos div:last-child {border-right: 0;}
   
.banderole {    background: rgba(194, 172, 131, 0.2);
    width: 100% !important;
    padding: 0px 15%;
    text-align: center;
    color: #333;}
	.banderole h2 {margin-top: 20px;}
	.banderole li {list-style: none; color: #333;}
	.banderole p, .banderole h2 {text-align: center; color: #333;}
	.banderole a:link, .banderole a:visited {background: #333; border: 1px solid #333; border-radius: 3px; padding: 12px 25px; text-transform: uppercase; text-decoration: none;}
	.banderole a:hover {background: #FFF; border: 1px solid #FFF; border: 1px solid #C2AC83;}
	
.banderole.white {
    background: #FFF;
    padding: 70px 15% 60px;
}	

.banderole.white form {
    padding: 0px 25% 60px;
}
	
.flex .ce_text.maps {
    padding: 0;
    line-height: 0;
}	

/* Socials */

#socials {color: #7E96B3; padding: 1px 0 65px; text-align: center; margin-top: 60px;}
#socials a {width: 40px; height: 40px; display: inline-block; border-radius: 30px; margin: 8px 20px; opacity: 0.7;}
#socials a.facebook {background: transparent url(/tl_files/design/socialFacebook.svg) 0 0 no-repeat; background-size: 100%;}
#socials a.instagram {background: transparent url(/tl_files/design/socialInstagram.svg) 0 0 no-repeat; background-size: 100%;}
#socials a:hover {opacity: 1;}

	
.home .mod_article:nth-child(3) {background: #FFF;}	
	

	
.umgebung .flex > div.ce_text.flexTwo {width: 33%;}	


@media only screen and (max-width: 900px) {

	h2 {margin-top: 40px;}

	.logo {width: 200px; height: 90px; margin-bottom: 0px; top: 35px;}
	#kontakttop {font-size: 0.75rem; line-height: 1.2rem;}

	.mod_customnav, .mod_navigationSub {padding-top: 10px; padding-bottom: 10px;}
	.mod_customnav {margin-top: 45px;}
	.mod_customnav ul, .mod_navigationSub ul {display: block;}
	.mod_customnav ul li a:link, a:visited, .mod_navigationSub ul li a:link, a:visited {line-height: 2rem;}
	.mod_customnav ul li .active, .mod_navigationSub ul li .active {line-height: 2rem;}
	.mod_customnav ul li.active, .mod_navigationSub ul li.active {text-align: center;}

	.flex {display: block;}
	.flexAll {margin-left: 7%; margin-right: 7%; width: 86%; padding: 60px 0;}
	.fotos.flex {display: flex; padding: 0;}
	.fotos.flex div {width: 50%; border: none;}
	.flex .ce_text, .flex .ce_image  {width: 100%;}
	
	.flex > div {padding-left: 0 !important; padding-right: 0 !important;}
	
	.flex .ce_text {}
	
	.flex > div.ce_text.flexTwo, .flex > div.ce_form.flexTwo {margin-left: 7%; margin-right: 7%; width: 86%;}	
	.flex > div.ce_text.flexOne {margin-left: 7%;}
	.flex > div.ce_text.flexOne { width: 86%; }
	.flex > div.ce_image.flexOne {padding-left: 0;}
	
	.flex > div.ce_text.flexTwo {width: 86%; }
	.flex > div.ce_image.flexTwo {padding-right: 0;}
	
	.home .flex.row .ce_image {width: 26%; margin: 3%; display: inline-block; vertical-align: middle;}
	.flexCenter {width: 86%; margin: 0 7%;}

	}