/*

Theme Name: Hector & Tilda
Theme URI: http://hectorundtilda.de
Author: Clément Tischer
Author URI: clement@lespaufs.de - www.lespaufs.de
Description: Hector & Tilda. Healthfood
Version: 1.0
Template: x

*/

/*
/////////////////////////////////////////////////
	GENERAL LAYOUT SETTINGS
/////////////////////////////////////////////////
*/

/* CUSTOM FONT */
@font-face {
	font-family:'DidotLTStd-Roman';
	src: url('FONTS/DidotLTStd/DidotLTStd-Roman/DidotLTStd-Roman_gdi.eot');
	src: url('FONTS/DidotLTStd/DidotLTStd-Roman/DidotLTStd-Roman_gdi.eot?#iefix') format('embedded-opentype'),
		url('FONTS/DidotLTStd/DidotLTStd-Roman/DidotLTStd-Roman_gdi.woff') format('woff'),
		url('FONTS/DidotLTStd/DidotLTStd-Roman/DidotLTStd-Roman_gdi.ttf') format('truetype'),
		url('FONTS/DidotLTStd/DidotLTStd-Roman/DidotLTStd-Roman_gdi.svg#DidotLTStd-Roman') format('svg');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-25CA;
}

@font-face {
	font-family:'DidotLTStd-Headline';
	src: url('FONTS/DidotLTStd/DidotLTStd-Headline/DidotLTStd-Headline_gdi.eot');
	src: url('FONTS/DidotLTStd/DidotLTStd-Headline/DidotLTStd-Headline_gdi.eot?#iefix') format('embedded-opentype'),
		url('FONTS/DidotLTStd/DidotLTStd-Headline/DidotLTStd-Headline_gdi.woff') format('woff'),
		url('FONTS/DidotLTStd/DidotLTStd-Headline/DidotLTStd-Headline_gdi.ttf') format('truetype'),
		url('FONTS/DidotLTStd/DidotLTStd-Headline/DidotLTStd-Headline_gdi.svg#DidotLTStd-Headline') format('svg');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-25CA;
}

@font-face {
    font-family: 'saissant';
    src: url('FONTS/saissant/saissant-webfont.eot');
    src: url('FONTS/saissant/saissant-webfont.eot?#iefix') format('embedded-opentype'),
         url('FONTS/saissant/saissant-webfont.woff2') format('woff2'),
         url('FONTS/saissant/saissant-webfont.woff') format('woff'),
         url('FONTS/saissant/saissant-webfont.ttf') format('truetype'),
         url('FONTS/saissant/saissant-webfont.svg#saissantregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'FontAwesome-new';
  src: url('/wp-content/themes/Hector&Tilda/FONTS/fontawesome-webfont.eot?v=4.6.3');
  src: url('/wp-content/themes/Hector&Tilda/FONTS/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('/wp-content/themes/Hector&Tilda/FONTS/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('/wp-content/themes/Hector&Tilda/FONTS/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('/wp-content/themes/Hector&Tilda/FONTS/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('/wp-content/themes/Hector&Tilda/FONTS/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}



h1, h2, h3, h4, h5, h6{
	font-family: 'saissant' !important;

}

p, body, input, button, select, textarea, .x-navbar .x-nav > li > a {
	font-family: 'DidotLTStd-Roman' !important;
}

/* FONT SIZE */
h1, h2 {
	font-size: 5em !important;
}

h3 {
	font-size: 2em !important;
}

.x-under-construction h1 {
	font-size: 10em !important;
}

/*PAGETITLE CENTERED*/
.entry-title {
text-align: center;
}


/* NO BORDERS */
.x-boxed-layout-active .site {
    border: none;
    box-shadow: none;
    background-color: #fff !important;
}


.x-topbar, .x-logobar {
    border: medium none !important;
    box-shadow: none !important;
}

.x-navbar {
	box-shadow: none !important;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 0px solid rgba(174,  174,  174, 0.20);
}

.x-colophon.bottom {
    border: medium none !important;
    box-shadow: none !important;
}

.x-logobar {
	border: none; !important;
}

/* SOCIAL COLORS */
.x-topbar .x-social-global a.facebook { color:#0a0a0a; }
.x-topbar .x-social-global a.facebook:hover { color:#3b5998;
}

i.x-icon-instagram:before {
	font-family: 'FontAwesome-new';
	content: "\f16d" !important;
}


/* SCROLL TOP ARROW */
.x-scroll-top .x-icon-angle-up:before {
content: url('http://www.hectorundtilda.de/wp-content/uploads/2015/09/Icon_scroll-top2.png');
}
.x-scroll-top {
width: 20px;
height: 20px;
padding: 10px;
padding-right: 50px;
padding-bottom: 50px;
border: none !important;
}

/* FOOTER MENU */
.footer-menu {
	line-height: 20px !important;
	margin-top: -15px !important;
	margin-bottom: -20px !important;
}

#impr, #kont {
	padding-left: 5px;
	padding-right: 5px;
}

.x-colophon.bottom .x-social-global a {
    margin: 5px !important;
    font-size: 21px;
}

/*	NAVBAR & LOGOBAR
////////////////////////////////////////////////
*/

/*  NAVBAR TRANSITION */
.x-navbar {
	border-bottom: none;
	box-shadow: none;
    width: 100%;
    position: relative;
    top: -300px;
    }

.x-navbar-fixed-top {
	margin-top: 0px;
	background-color: rgba(255, 255, 255, 1) !important;
	box-shadow: 0 1px 5px rgba(136, 136, 136, 0.33);
    position: fixed;
    top: 0;
    z-index: 1030;
    width: 100%;
	-webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.fixed {
    top: -580px;
    transition: top 0.5s ease-in-out;
}


/* NAVBAR BG COLOR */
.x-navbar.x-navbar-fixed-top {
    background-color: rgba(255,  255,  255, 0.9);
    z-index: 9999999 !important;
}

.x-navbar-wrap {
	margin-bottom: 0px !important;
}

@media screen and (max-width: 979px) {
.x-navbar-wrap {
	margin-bottom: -80px !important;
}
}

/* LOGO HOVER EFFECT */
.x-navbar.x-navbar-fixed-top .x-brand:hover, .x-logobar .x-brand:hover img {
    opacity: 0.6 !important;
}


/* HERO MENU
////////////////////////////////////////////////
*/

@media screen and (max-width: 768px) {
.hmenu_left {
	height: 80px !important;
}

.logo_main {
	margin-top: 10px !important;
}

.hmenu_wrap {
	margin-top: 25px !important;
}
}

#hmenu_load_3 {
	background-color: white !important;
}


@media screen and (min-width: 768px) {
	#hmenu_load_2 .hmenu_underline_hover a:after {
		content: '';
		position: absolute;
		top: 48%;
		left: 15%;
		width: 70%;
		height: 3px;
		background: #CAA766 /*#b4cbb2 GREEN */;
		-webkit-transform: scale3d(0, 1, 1);
		transform: scale3d(0, 1, 1);
		-webkit-transition: -webkit-transform 0.1s;
		transition: transform 0.1s;
	}
	#hmenu_load_2 .hmenu_underline_hover a:hover:after {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
		-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		-webkit-transition-duration: 0.4s;
		transition-duration: 0.4s;
		width: 70%;
		background: #CAA766 /*#b4cbb2 GREEN */;
	}
	
	
	#hmenu_load_3 .hmenu_underline_hover a:after {
		content: '';
		position: absolute;
		top: 48%;
		left: 15%;
		width: 70%;
		height: 3px;
		background: #CAA766 /*#b4cbb2 GREEN */;
		-webkit-transform: scale3d(0, 1, 1);
		transform: scale3d(0, 1, 1);
		-webkit-transition: -webkit-transform 0.1s;
		transition: transform 0.1s;
	}
	#hmenu_load_3 .hmenu_underline_hover a:hover:after {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
		-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		-webkit-transition-duration: 0.4s;
		transition-duration: 0.4s;
		width: 70%;
		background: #CAA766 /*#b4cbb2 GREEN */;
	}
}


/* MOBILE NAVBAR SETTINGS
////////////////////////////////////////////////
*/


@media screen and (max-width: 769px) {
	.x-navbar-inner {
		display: none;
	}
	.x-logobar {
		margin-bottom: 75px !important;
	}
	
}

@media screen and (max-width: 769px) {
	.x-logobar {
	margin-top: 0px; /* 50px */
	}
}

@media screen and (min-width: 769px) {
	.sfm-navicon-button, #sfm-mob-navbar {
		display: none !important;
	}
}



/*
/////////////////////////////////////////////////
	CUSTOM CSS STYLES
////////////////////////////////////////////////
*/


.text-shadow {
	text-shadow: 9px 9px 13px rgba(0, 0, 0, 1);
}

@media screen and (min-width: 769px) {
	.big-font {
		font-size: 1.5em
	}
	.bigger-font {
		font-size: 8em;
	}
}

@media screen and (max-width: 768px) {
	.logo-philo{
		max-width: 70%;
	}
}


/* BOUNCING ARROW DOWN 
////////////////////////////////////////////////
*/
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  60% {
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  60% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  60% {
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}

.arrow {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -21px;
  width: 40px;
  height: 32px;
  background-image: url('http://www.hectorundtilda.de/wp-content/uploads/2015/09/Pfeil-Runter.png');
  background-size:cover;
}

.bounce {
  -moz-animation: bounce 3s infinite;
  -webkit-animation: bounce 3s infinite;
  animation: bounce 3s infinite;
}


/* BUTTON HOVER
////////////////////////////////////////////////
*/

/* HOVER BUTTON*/

.hover-button {
	position: relative;
	width: 100%;
	height: 30vh;
	transform-style: preserve-3d;
}

.container-hb {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
}

.cta {
	display: inline-block;
	font-size: 1.5em;
	color: #CAA766 /*#b4cbb2 GREEN */;
	border: 0px solid rgb(195, 157, 85) /*#b4cbb2 GREEN */;
	overflow: hidden;
	transition: color .5s ease-in-out;
}
.cta span {
	display: block;
	position: relative;
	z-index: 1;
	padding: 12px 38px;
}
.cta span:before {
	display: block;
	position: absolute;
	top: -20%;
	right: 0;
	left: -20%;
	z-index: -1;
	content: '';
	width: 140%;
	height: 140%;
	border-radius: 40px;
	background: #CAA766 /*#b4cbb2 GREEN */;
	opacity: 0;
	transform: translate(0%) rotate(120deg) scale(0.4);
	transition: opacity 0.1s ease-in, transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.cta:hover {
	color: #ffffff;
}
.cta:hover span:before {
	opacity: 1;
	transform: translate(0) rotate(0deg) scale(1.4);
}


/*	SCROLLORAMA
////////////////////////////////////////////////
*/

/* KUPFERSTICHE */
ht-parallax {
	padding-top: 0px;
	height: 800px;
	overflow: hidden;
}
#parallax-granatapfel {
	padding: 0;
	left: 60%;
	position: relative;
}

#parallax-strauch {
	position: relative;
	left: -45%;
	z-index: 9 !important;
	overflow: hidden;
}

#parallax-granatapfel_2-left {
	position: relative;
	left: -70%;
	overflow: hidden;
}

#parallax-brush {
	position: relative;
	left: 20px;
	z-index: 1 !important;
	overflow: hidden;
}

#parallax-strich {
	position: relative;
	top: -20px;
	right: 0%;
	z-index: 1 !important;
	overflow: hidden;
}

#parallax-karotte {
	padding: 0;
	left: -40%;
	position: relative;
}


p.ht-z, a.ht-z, img.ht-z, {
    z-index:0;
    position:relative;
}

@media screen and (min-width: 518px) and (max-width: 787px) {
	.parallax-row1 {
		margin-bottom: -300px !important;
	}
	#parallax-brush {
		position: relative;
		left: 40px;
		z-index: 1 !important;
		overflow: hidden;
	}
}
@media screen and (max-width: 518px) {
	.parallax-row1 {
		margin-bottom: -550px !important;
	}
	#parallax-brush {
		position: relative;
		left: 60px;
		z-index: 1 !important;
		overflow: hidden;
	}

}


/* BRUSH LEAFS */

#parallax-leaf-1 {
	padding: 0;
	left: 80%;
	position: relative;
}

#parallax-leaf-2 {
	position: relative;
	left: -5%;
	overflow: hidden;
}

#parallax-leaf-3 {
	position: relative;
	left: 12%;
	overflow: hidden;
}