/*
Theme Name: Makiol Lüken
Theme URI: http://www.topfmaler.de
Description: Child ThemeMakiol Lüken
Author: Topfmaler
Author URI: http://www.topfmaler.de
Template: Divi
Version: 1.0
*/

/* Start your custom CSS bellow this comment
============================================ */



/* Contact Form */

.contact {
	
}


input,textarea,button{
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.wpcf7-validation-errors {
	clear: both;
}

.contact form input,.contact form textarea {
	height: auto;
	padding: 12px 15px 12px;
	font-size: 16px;
	margin-bottom: 16px !important;
	color: #363636;
	letter-spacing: 0.5px;
	background: #fafafa;
	border: 1px solid #ebebeb;
	border-radius: 4px;
	outline: none;
}
.contact form select {
	height: auto;
	padding: 12px 25px 12px 15px;
	font-size: 16px;
	margin-bottom: 16px !important;
	color: #363636;
	letter-spacing: 0.5px;
	background: #fafafa;
	border: 1px solid #ebebeb;
	border-radius: 4px;
	outline: none;
	-webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  font-size: 1em;
  width: auto;
  background-image:url(images/select-arrow.png);
  background-position: right;
  background-repeat: no-repeat;
}
.contact form input.wpcf7-text,
.contact form textarea {
	width: 90%;
	
}
.contact form .wpcf7-number {
	width: 25%;
	
}

	.vntd-contact-form p {
		margin: 0px;
	}

	.contact-form-left {
		float: left;
		width: 370px
	}
	
	.contact-form-right {
		padding-left: 395px;
	}
	
	.contact form .wpcf7-submit {
		background:#485156;
		  width: auto;
		  display: inline-block;
		  color: #fff;
		  font-weight: bold;
		  border: 0;
		  padding: 13px 38px;
		  font-size: 16px;	}
		  
		 .contact form .wpcf7-submit:hover {
		  	background:rgba(149,149,149,1.00);
			 color: #fff;
			cursor:pointer;
		  }
		  
		 
.contact form textarea{
	height: 201px;
	max-width: 100%;
	max-height: 171px;
}
#respond #submit,
.contact form button.contact-form-button{
	margin-bottom:0 !important;
}

#subscribe form .subscribe-form{
	width:100%;
	height: auto;
	padding:15px 15px 12px;
	font-size:18px;
	margin-bottom:18px;
	color:#7f7f7f;
	letter-spacing: 0.5px;
}

/* Actives, Focuses and Rollovers */

.contact form input:active,
.contact form textarea:active,
.contact form input:focus,
.contact form textarea:focus{
	outline: none;
}
#respond #submit:hover,
.contact .wpcf7-submit:hover{
	color:white;
}

div.wpcf7-response-output {
	padding: 10px 14px;
	margin: 0 15px;
}

/*#page-content span.wpcf7-not-valid-tip {
	margin-top: -10px;
	margin-bottom: 10px;
}*/



.contact form input:hover,
.contact form textarea:hover{
	border-color:#dadada;
}

/* Message For Mail */

.mail-message-area{
	width:100%;
	padding:0 15px;
}

.mail-message{
	width: 100%;
	-webkit-transition: all 0.7s;
	-moz-transition: all 0.7s;
	transition: all 0.7s;
	margin:0 auto;
	border-radius: 0;
}

.not-visible-message{
	height:0px;
	opacity: 0;
}

.visible-message{
	height:auto;
	opacity: 1;
	margin:25px auto 0;
}


#top-menu li a{
	font-weight:300;
}


.et_pb_gutters2.et_pb_row.et_pb_row_fullwidth,
	.et_pb_gutters2 .et_pb_row.et_pb_row_fullwidth,
	.et_pb_gutters2.et_pb_specialty_fullwidth > .et_pb_row,
	.et_pb_gutters2 .et_pb_specialty_fullwidth > .et_pb_row {
		width: 100% !important;
		max-width: 100% !important;
	}
	



.et_overlay {
	border:none;
}

.nav li ul {
	position: absolute;
	padding: 20px 0;
	right:0px;
}


.et_pb_text_inner ul  {
	list-style:none;
	margin: 10px 0;
	
}

.et_pb_text_inner ul li {
	background: url(images/liste.png) no-repeat left 6px;
	padding:0 0 5px 20px;
	
}

.et_pb_scroll_top.et-pb-icon {
	background: #485156!important;
}

.et_pb_image img {
	width: 100%!important;
	max-width:auto!important;
	height: auto;
}

.wt h3,.wt h2 {
	color:rgba(255,255,255,1.00);
	font-size:40px;
}
.wth2 h2 {
	color:rgba(255,255,255,1.00)!important;
	font-size:40px
}


.et_pb_bg_layout_dark .et_pb_slide_description {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8)!important;
}

.grayimage  img {
	-webkit-filter: grayscale(1);
	filter: grayscale(1);
}
.grayimage img:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

.nav li ul {
	width: 270px!important;
}
#top-menu li li a {
	width: 230px!important;
}
@media (max-width: 980px) {
	
#top-header .container {
	width: 80%;
}
#main-header .container {
	width: 80%;
}

.container {
	width: 80%;
}

}



@media all and (min-width: 981px) {	

.et_pb_blurb_content {
    position: relative;
max-width:none!important;
margin: 0 auto;
	margin-left:5px!important;
}


}
@media only screen and (min-width: 981px) and (max-width : 1180px){ 
#logo { max-height: 55%!important; }


.container {
	width: 90%;
}

}
@media all and (min-width: 981px) {	
.headline {
	padding-top: 200px;
	padding-bottom: 200px;
	
}
}

@media only screen and (min-width: 1280px) { 

#main-footer .container  {
width: 100%;
max-width: 100%;
padding-right: 30px;
padding-left: 30px
}
}

/*-----Responsive Image Grid-----*/

/*Setting for the HTML*/

.ds-collection figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 0;
	min-width: 220px;
	width: 100%;
	background: #fff;
	text-align: center;
	cursor: pointer;
}

.ds-collection figure img {
	position: relative;
	display: block;
	min-width: 100%;
	opacity: 0.8;
	margin-bottom:-30px;
}

.ds-collection figure figcaption {
	padding: 2em;
	color: #fff;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.ds-collection figure figcaption::before,
.ds-collection figure figcaption::after {
	pointer-events: none;
}

.ds-collection figure figcaption,
.ds-collection figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.ds-collection-button a {
	color: #fff;
	background-color: #585758;
	padding: 5px 10px;
	text-transform: uppercase;
}

.ds-collection-button a:hover {
	color: #fff;
	background-color: #ce7715;
	padding: 5px 10px;
	border: 1px solid #585758;
	text-transform: uppercase;
}

.ds-collection figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
	text-transform: uppercase;
}

.ds-collection figure h3 {
	font-size: 20px;
	color: #fff;
	background-color: #000;
   	opacity: .7;
	padding: 10px;
	display: inline-block;
}

.ds-collection figure h3,
.ds-collection figure p {
	margin: 0;
}

.ds-collection figure p {
	font-size: 65% !important;
}

/*Media Queries*/
@media only screen and ( max-width: 1365px ) { 
.ds-collection figure h3 {
	font-size: 75%;
}
.ds-collection figure p {
	font-size: 58%;
}
}

@media only screen and ( max-width: 1280px ) { 
.ds-collection figure h3 {
	font-size: 65%;
	margin-top: 0toppx !important;
}
.ds-collection figure p {
	font-size: 45%;
    line-height: 1.4em
}
}

@media only screen and ( max-width: 1045px ) { 
.ds-collection figure h3 {
	font-size: 65%;
}
.ds-collection figure p {
	font-size: 45% !important;
	line-height: 1.4em
}
}

@media only screen and ( max-width: 980px ) { 
.ds-collection figure h3 {
	font-size: 20px;
}
.ds-collection figure p {
	font-size: 45% !important;
}
.ds-collection-row.et_pb_row {
    padding: 0 !important;
}
}

@media only screen and ( max-width: 625px ) { 
.ds-collection figure h3 {
	font-size: 75%;
}
.ds-collection figure p {
	font-size: 50% !important;
}
}

@media only screen and ( max-width: 560px ) {
.ds-collection figure h3 {
	font-size: 75% !important;
}
p.hide {
	display: none !important;
} 
}

@media only screen and ( max-width: 380px ) {
.ds-collection figure h3 {
	font-size: 65%;
    margin-top: 0;
}
p.hide {
	display: none;
} 
}

/*Display paragraph text on iPhone 6 landscape*/
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) { 
.ds-collection figure h3 {
	font-size: 75%;
    margin-top: 10% !important;
}    
    .ds-collection figure p {
    font-size: 40%;
    display: block;
}
}

/*Hide paragraph text on iPhone 5 landscape*/
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { 
.ds-collection figure h3 {
	font-size: 75%;
    margin-top: 10% !important;
}
p.hide {
	display: none;
}    
}

/*Hide paragraph text on iPhone 5 portrait*/
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { 
.ds-collection figure h3 {
	font-size: 75%;
    margin-top: 0% !important;
}
p.hide {
	display: none;
}    
}

/*Hover effects*/

figure.ds-collection-hover {
	background: #001423;
}

figure.ds-collection-hover img {
	opacity: 1;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.ds-collection-hover:hover img {
	opacity: 0.4;
}

figure.ds-collection-hover  figcaption::before,
figure.ds-collection-hover  figcaption::after {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.ds-collection-hover  figcaption::before {
	border-top: medium double #fff;
	border-bottom: medium double #fff;
    -webkit-transform: scale(0,1);
	transform: scale(0,1);
}

figure.ds-collection-hover  figcaption::after {
	border-right: medium double #fff;
	border-left: medium double #fff;
    -webkit-transform: scale(1,0);
	transform: scale(1,0);
}

figure.ds-collection-hover  h2 {
	margin-top: 10%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,-20px,0);
	transform: translate3d(0,-20px,0);
}

@media only screen and ( min-width: 320px ) {
figure.ds-collection-hover  h3 {
	margin-top: 10%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,-20px,0);
	transform: translate3d(0,-20px,0);
}


figure.ds-collection-hover  p {
	padding: 20px 2.5em;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

figure.ds-collection-hover:hover figcaption::before,
figure.ds-collection-hover:hover figcaption::after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.ds-collection-hover:hover h3,
figure.ds-collection-hover:hover p {
	opacity: 1;
	background-color: transparent;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
}

.mfp-arrow {
    background:#e09900!important;
    margin-top: -32px !important;
    width: 68px !important;
    height: 68px !important;
    line-height: 1em !important;
}

.mfp-arrow:after {
    margin: 0 !important;
    top: 0 !important;
    border: none !important;
    width: 68px !important;
    height: 68px !important;
    background: #e09900!important;
}