/*
Theme Name: Bridge Child
Theme URI: http://demo.qodeinteractive.com/bridge/
Description: A child theme of Bridge Theme
Author: Qode Interactive
Author URI: http://www.qodethemes.com/
Version: 1.0.0
Template: bridge
*/
@import url("../bridge/style.css");



/*
 * 
 * Anpassungen an Elemente
 * vom Theme
 * 
 */




/* Logo Size auf 50% setzen und Abstand von oben anpassen */
.q_logo img{
	height: 50% !important;
	top: -15px; 
}


/* Style für Button default */
.qbutton{
	height: 52px;
}


/* Setzt das Margin Left/Right allgemein für Rows auf 0px */
.vc_row{
	margin-left: 0px;
	margin-right: 0px;
}

.vc_column-inner{
	padding-left: 0px !important;
	padding-right: 0px !important;
}


/* Rückt das Menü 46px weiter nach unten bzw. gibt oben mehr Abstand */
nav.main_menu{
	top: 46px;
}


.mobile_menu_button{
	float: right;
}


/* Stylt den Text für das Footer-Menü */
#menu-footer-menu a{
	font-size: 14px;
	line-height: 21px;
	letter-spacing: 5px;
	font-weight: 700;
	text-transform: uppercase;
}


/* Setzt den Abstand der einzelnen Menüpunkte voneinander auf 60px bzw. den rechten Abstand eines Menüpunktes */
.footer_bottom ul li{
	margin-right: 60px;
}


/* Setzt den Hover beim Button "White" auf transparent */
.qbutton.white:hover{
	background-color: transparent;
}


/* Setzt den Hover beim Button auf transparent */
.qbutton:hover{
	background-color: transparent;
}


.section_inner_margin{
	margin-left: 0;
	margin-right: 0;
}


/* Ändert die Breite der ersten Spalte des Jetzt buchen Moduls von 66.6666% auf 60% */
.q_elements_holder.two_columns.eh_two_columns_66_33 .q_elements_item:first-child{
	width: 60%;
}


/* Ändert die Breite der ersten Spalte des Jetzt buchen Moduls von 33.3333% auf 40% */
.q_elements_holder.two_columns.eh_two_columns_33_66 .q_elements_item:first-child, .q_elements_holder.two_columns.eh_two_columns_66_33 .q_elements_item:last-child{
	width: 40%;
}


/* Definiert den Style des Kontrollkästchens im Kontaktformular */
input[type="checkbox" i]{
	float: left;
	margin: 0 10px 0 0 !important;
}


/* Passt die Schrift der Ausgabenachricht über dem jeweiligen Feld des Kontaktformulars an, wenn z.B. eine Eingabe fehlt */
.wpcf7-not-valid-tip{
	color: #FF1744;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
	padding-bottom: 10px;
	padding-top: 10px;
}


/* Passt die Schrift der Ausgabenachricht unter dem Button des Kontaktformulars an */
div.wpcf7-response-output{
	color: #222222;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
	text-transform: none;
}


/* Ändert die Abstände der Ausgabenachricht unter dem Button des Formulars außen und innen */
.wpcf7 form .wpcf7-response-output{
	margin: 0 0 4em;
	padding: 0.5em 1em;
	border: 2px solid;
	color: #222222;
}


/* Ändert die Farbe vom Rahmen der Bestätigungsnachricht des Kontaktformulars unter dem Button des Kontaktformulars */
.wpcf7 form.sent .wpcf7-response-output{
	border-color: #00E676;
	background-color: transparent;
}


/* Ändert die Farbe vom Rahmen der Fehlernachricht des Kontaktformulars unter dem Button des Kontaktformulars */
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output{
	border-color: #FF1744;
	background-color: transparent;
}


/* Entfernt jedes Margin im Kontaktformular */
span.wpcf7-list-item{
	margin: 0 0;
}


/* Blendet das Daumen hoch Icon in der Ausgabe unter dem Formularbutton aus */
div.wpcf7-response-output:before{
	display: none;
}


.drop_down .second .inner>ul, li.narrow .second .inner ul{
	background-color: #FAFAFA;
}


header.sticky .drop_down .second{
	margin-top: 15px;
}



/*
 * 
 * Eigene Styles
 * definiert
 * 
 */




/* Style für Body Text BIG */
.bodybig p{
	font-size: 24px;
	line-height: 40px;
	font-weight: 200;
}


/* Style für Body Text SMALL */
.bodysmall p{
	font-size: 12px;
	line-height: 20px;	
	font-weight: 400;
}
	

/* Setzt die @2x Bilder auf die Hälfte */
.img2x img{
	width: 50%;
	height: auto;
}


/* Style für weißen transparenten Button */
.button-transparent-white{
	color: #ffffff;
	border-color: #ffffff;
	background-color: transparent;
}


/* Style für Hover des weißen transparenten Buttons */
.button-transparent-white:hover{
	color: #222222;
	border-color: #ffffff;
	background-color: #ffffff;
}



/* Style für dunklen transparenten Button */
.button-transparent-dark{
	color: #222222;
	border-color: #222222;
	background-color: transparent;
}


/* Style für Hover des dunklen transparenten Buttons */
.button-transparent-dark:hover{
	color: #ffffff;
	border-color: #222222;
	background-color: #222222;
}


/* Diese Klasse bitte nicht bei den Kacheln der Kurse verwenden! Gibt einem Bereich mit dieser Klasse runden Ecken von 40px */
.rounded-border,
.rounded-border img{
	border-radius: 40px;
}


/* Diese Klasse bitte NUR bei den Kacheln der Kurse verwenden! Gibt einem Bereich mit dieser Klasse runden Ecken von 40px */
.rounded-border-kacheln, 
.rounded-border-kacheln img{
	border-radius: 40px;
}


/* Erbt die hier enthaltenen Einstellungen der Klasse an .rounded-border-kacheln an die Klasse .q_elements_item_inner weiter */
.rounded-border-kacheln>.q_elements_item_inner{
	background-image: linear-gradient(to bottom, transparent 50%, black 130%);
	border-radius: 40px;
}


/* Diese Klasse bitte NUR bei den Desktop Intros verwenden! Gibt einem Bereich mit dieser Klasse runden Ecken von 40px */
.rounded-border-intro, 
.rounded-border-intro img{
	border-radius: 40px;
}


/* Erbt die hier enthaltenen Einstellungen der Klasse an .rounded-border-intro an die Klasse .vc_column-inner weiter */
.rounded-border-intro>.vc_column-inner{
	background-image: linear-gradient(to bottom, transparent 40%, black 120%);
	border-radius: 40px;
}


/* Gibt dem Bereich mit dieser Klasse (alle Bereiche die einen Rahmen um sich haben sollen, wie z.B. dem Formularbereich) eine feste Maximalbreite von 920px und runde Ecken mit einem 40px Radius + automatisches Margin für links/rechts Abstände */
	.rounded-solid-border{
		max-width: 920px;
		margin-left: auto;
		margin-right: auto;
		border-radius: 40px;
}


/* Gibt dem Bereich mit dieser Klasse einen rechten Rand */
.border-right{
	border-right: 1px solid rgba(34,34,34,0.3);
}


/* Diese Klasse bitte allen ROWS (oben rechts an der ROW der Stift und dem ersten Stift mittig) indenen sich Formulare ohne Rahmen befinden geben! Gibt Bereichen mit dieser Klasse eine maximale Breite von 920px und automatische Abstände links und rechts */
.form-width{
	max-width: 920px;
	margin-left: auto;
	margin-right: auto;
}


/* Definiert den Style für den Text der Datenschutzerklärung im Kontaktformular und ebenso die Position */
.datenschutz-zustimmung{
	font-family: Poppins, sans-serif !important;
	font-size: 11px !important;
	line-height: 18px !important;	
	font-weight: 400 !important;
	color: #222222 !important;	
	margin-left: 30px;
	margin-top: -5px;
	display: block;
}








/*
 * 
 * Styleanpassungen nach
 * Bildschirmbreite
 * 
 */



/* Blendet den header_inner-right Bereich generell aus */
.header_inner_right{
    display:none;
}


/* Definition für diverse Styles bis Bildschirmbreite >=769px */
@media only screen and (min-width: 769px){

	/* Gibt den Spalten mit dieser Klasse links/rechts ein Padding von 5% (z.B. den Kursspalten) */
	.kurs-div-padding{
		padding-left: 5%;
		padding-right: 5%;
	}	
	
	
}



/* Definiert Styles/Eigenschaften für eine Breite von <= 1200px */
@media only screen and (max-width: 1200px){
	
	/* Blendet das normale Desktop-Menü aus */
    .main_menu {
        display: none!important;
    }
	
	/* Blendet das Mobile-Menü als Blockelement ein */
    nav.mobile_menu {
        display: block;
    }
	
	/* Positioniert den Bereich header_inner_left neu */
    .header_inner_left {
        position: relative!important;
        left: 0!important;
        margin-bottom: 0;
    }
    
	/* Setzt die Hintergrundfarbe des Header auf der Goldschmiede-Seite */
    body.goldschmiede nav.mobile_menu{
        background-color:rgba(7,24,18,1) !important;
    }
	
	/* Setzt die Hintergrundfarbe des Header auf der no2-Seite */
    body.no2 nav.mobile_menu{
        background-color:rgba(15, 17, 19,1) !important;
    }
	
	
	/* Setzt eine 2-spaltige Reihe (z.B. Kurse) zu 1-spaltig */
	.vc_col-sm-6{
		width: 100%;
	}	
	
	
	/* Bestimmt den oberen Abstand der Kurskachelzeile zur vorherigen, wenn diese auf 1-spaltig umspringen */
	.spacer-between-kurskacheln{
		padding-top: 180px;
	}
    
}




/* Definiert Styles/Eigenschaften für eine Breite zwischen >=1000px und <= 1500px */
@media only screen and (min-width:1000px) and (max-width: 1200px){
	
	/* Setzt die Höhe des Logos und Burgermenü-Button auf 140px */
    .logo_wrapper, .mobile_menu_button {		
        height:120px;
    }
	
	/* Wandelt den logo_wrapper in ein Blockelement und blendet diesen, falls ausgeblendet, ein */
    .logo_wrapper{
        display:block;
    }
	
	/* Wandelt den Bereich des Mobile-Menü-Buttons in table um udn blendet diesen, falls ausgeblendet, ein */
    .mobile_menu_button {
        display: table;
		margin: 0 0 0 20px;
    }
}





@media only screen and (max-width: 1024px){
	
	/* Setzt das padding-top für alle anthaltenen Klassen auf 0% */
	.paspartu_bottom, 
	.paspartu_on_top_fixed .fixed_top_header .top_header, 
	.paspartu_on_top_fixed .paspartu_outer .content_wrapper, 
	.paspartu_on_top_fixed header, 
	.paspartu_top, body:not(.paspartu_on_top_fixed) .paspartu_outer .content:not(.has_slider) .content_inner{
		padding-top: 0% !important;
	}	
	
	
	.q_elements_holder.responsive_mode_from_1000.five_columns .q_elements_item, .q_elements_holder.responsive_mode_from_1000.four_columns .q_elements_item, .q_elements_holder.responsive_mode_from_1000.six_columns .q_elements_item, .q_elements_holder.responsive_mode_from_1000.three_columns .q_elements_item, .q_elements_holder.responsive_mode_from_1000.three_columns.eh_three_columns_25_25_50 .q_elements_item:last-child, .q_elements_holder.responsive_mode_from_1000.three_columns.eh_three_columns_50_25_25 .q_elements_item:first-child, .q_elements_holder.responsive_mode_from_1000.two_columns .q_elements_item, .q_elements_holder.responsive_mode_from_1000.two_columns.eh_two_columns_25_75 .q_elements_item:first-child, .q_elements_holder.responsive_mode_from_1000.two_columns.eh_two_columns_25_75 .q_elements_item:last-child, .q_elements_holder.responsive_mode_from_1000.two_columns.eh_two_columns_33_66 .q_elements_item:first-child, .q_elements_holder.responsive_mode_from_1000.two_columns.eh_two_columns_33_66 .q_elements_item:last-child, .q_elements_holder.responsive_mode_from_1000.two_columns.eh_two_columns_66_33 .q_elements_item:first-child, .q_elements_holder.responsive_mode_from_1000.two_columns.eh_two_columns_66_33 .q_elements_item:last-child, .q_elements_holder.responsive_mode_from_1000.two_columns.eh_two_columns_75_25 .q_elements_item:first-child, .q_elements_holder.responsive_mode_from_1000.two_columns.eh_two_columns_75_25 .q_elements_item:last-child{
		width: 100%;
   		display: inline-block;
    	height: auto;
	}


	/* Gibt dem Bereich mit dieser Klasse (alle Bereiche die einen Rahmen um sich haben sollen, wie z.B. dem Formularbereich) eine feste Maximalbreite von 720px */	
	.rounded-solid-border{
		max-width: 720px;
	}
	
	.border-right{
		border-right: 0px;
	}
	
	
	/* Setzt das padding-top vom Paspartu auf 4% */
	body:not(.paspartu_on_top_fixed) .paspartu_outer .content:not(.has_slider) .content_inner{
		padding-top: 4% !important;
	}
	
}



/* Definition für diverse Styles bis Bildschirmbreite <=1000px */
@media only screen and (max-width: 1000px){
 
	/* Blendet das Footer-Menü aus */
	.menu-footer-menu-container{
		display: none;
	}

	
	/* Blendet alle Elemente oder Zeilen mit dieser Klasse aus */
	.disable-below-1000px{
		display: none;
	}
	
	
	header{
		height: 180px;
	}

	
	nav.mobile_menu{
		text-align: center;
	}
	
	#menu-main-menu-1{
		padding-bottom: 40px;
	}
	
	/* Logo Size auf 50% setzen und Abstand von oben anpassen */
	.q_logo img{
		height: 60% !important;
		top: -15px; 
	}	
	
	
	.logo_wrapper{
		left: 100px;
		top: 50px;
	}
	
	.header_bottom_right_widget_holder{
		height: 180px;
	}
	
	
	.mobile_menu_button{
		height: 180px;
		margin: 0 0 0 20px;
	}
	

	/* Setzt das padding-top vom Paspartu auf 0% */
	body:not(.paspartu_on_top_fixed) .paspartu_outer .content:not(.has_slider) .content_inner{
		padding-top: 0% !important;
	}	
	
	
	/* Bestimmt den oberen Abstand der Kurskachelzeile zur vorherigen, wenn diese auf 1-spaltig umspringen */
	.spacer-between-kurskacheln{
		padding-top: 140px;
	}

}




/* Definition für diverse Styles bis Bildschirmbreite <=768px */
@media only screen and (max-width: 768px){
	
	.qbutton{
		font-size: 12px;
		line-height: 46px;
		height: 46px;
		padding-left: 25px;
		padding-right: 25px;		
	}

	
	
	/* Style für Body Text BIG mobile */
	.bodybig p{
		font-size: 22px;
		line-height: 36px;
	}


	/* Style für Body Text SMALL mobile */
	.bodysmall p{
		font-size: 11px;
		line-height: 18px;
	}
	
	
	.logo_wrapper{
		left: 50%;
		top: 50px;
	}

	
	/* Gibt dem Bereich mit dieser Klasse (alle Bereiche die einen Rahmen um sich haben sollen, wie z.B. dem Formularbereich) eine feste Maximalbreite von 600px */
	.rounded-solid-border{
		max-width: 600px;
	}
	
	
	/* Passt die Schrift der Ausgabenachricht unter dem Button des Kontaktformulars an */
	.wpcf7-not-valid-tip,
	div.wpcf7-response-output{
		font-size: 16px;
	}
	
	
	/* Ändert die Schriftgröße der Eingabefelder des Formulars */
	.cf7_custom_style_1 input.wpcf7-form-control.wpcf7-text, 
	.cf7_custom_style_1 input.wpcf7-form-control.wpcf7-number, 
	.cf7_custom_style_1 input.wpcf7-form-control.wpcf7-date, 
	.cf7_custom_style_1 textarea.wpcf7-form-control.wpcf7-textarea, 
	.cf7_custom_style_1 select.wpcf7-form-control.wpcf7-select, 
	.cf7_custom_style_1 input.wpcf7-form-control.wpcf7-quiz{
		font-size: 16px;
	}
	
	
	/* Bestimmt den oberen Abstand der Kurskachelzeile zur vorherigen, wenn diese auf 1-spaltig umspringen */
	.spacer-between-kurskacheln{
		padding-top: 120px;
	}
	
}


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

	/* Style für Body Text BIG mobile */
	.bodybig p{
		font-size: 20px;
		line-height: 32px;
	}


	/* Style für Body Text SMALL mobile */
	.bodysmall p{
		font-size: 10px;
		line-height: 16px;
	}
	
	
	.qbutton{
		font-size: 10px;
		line-height: 40px;
		height: 40px;
		padding-left: 20px;
		padding-right: 20px;		
	}
	
	
	/* Gibt dem Bereich mit dieser Klasse (alle Bereiche die einen Rahmen um sich haben sollen, wie z.B. dem Formularbereich) eine feste Maximalbreite von 480px */
	.rounded-solid-border{
		max-width: 480px;
	}


	/* Passt die Schrift der Ausgabenachricht unter dem Button des Kontaktformulars an */
	.wpcf7-not-valid-tip,
	div.wpcf7-response-output{
		font-size: 14px;
	}
	
	
	/* Ändert die Schriftgröße der Eingabefelder des Formulars */
	.cf7_custom_style_1 input.wpcf7-form-control.wpcf7-text, 
	.cf7_custom_style_1 input.wpcf7-form-control.wpcf7-number, 
	.cf7_custom_style_1 input.wpcf7-form-control.wpcf7-date, 
	.cf7_custom_style_1 textarea.wpcf7-form-control.wpcf7-textarea, 
	.cf7_custom_style_1 select.wpcf7-form-control.wpcf7-select, 
	.cf7_custom_style_1 input.wpcf7-form-control.wpcf7-quiz{
		font-size: 14px;
	}
	
	
	/* Bestimmt den oberen Abstand der Kurskachelzeile zur vorherigen, wenn diese auf 1-spaltig umspringen */
	.spacer-between-kurskacheln{
		padding-top: 90px;
	}
	
}



/* Blendet den header_inner_right Bereich ab einer Breite von >=540px ein */
@media(min-width:540px){
    .header_inner_right{
        display:block;
    }
}



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

	/* Gibt den Spalten mit dieser Klasse links/rechts ein Padding von 5% (z.B. den Kursspalten) */
	.kurs-div-padding{
		padding-left: 0%;
		padding-right: 0%;
	}	
	
	
	/* Gibt dem Mobile Button ein rechtes Margin von 20px */
	.mobile_menu_button{
		margin: 0 20px 0 0;
	}
	
	
	/* Gibt dem Bereich mit dieser Klasse (alle Bereiche die einen Rahmen um sich haben sollen, wie z.B. dem Formularbereich) eine feste Maximalbreite von 360px */
	.rounded-solid-border{
		max-width: 360px;
	}
	
	
	/* Bestimmt den oberen Abstand der Kurskachelzeile zur vorherigen, wenn diese auf 1-spaltig umspringen */
	.spacer-between-kurskacheln{
		padding-top: 20%;
	}	
	
	
	/* Setzt Inhalte, wie z.B: die Kurskacheln auf 90% der vollen Breite statt der vorherigen festen Pixelvorgabe */
	.paspartu_enabled .carousel-inner .slider_content_outer, 
	.paspartu_enabled .container_inner, 
	.paspartu_enabled .container_inner nav.content_menu, 
	.paspartu_enabled .elementor-container .elementor-widget-wrap>.qode_elementor_container_inner, 
	.paspartu_enabled .elementor-row .elementor-widget-wrap>.qode_elementor_container_inner, 
	.paspartu_enabled .full_width .parallax_content, 
	.paspartu_enabled .qode_elementor_container_inner, 
	.paspartu_enabled .steps_holder_inner, 
	.paspartu_enabled div.grid_section .section_inner, 
	.paspartu_enabled nav.content_menu ul, 
	.paspartu_enabled.boxed div.section .section_inner{
		width: 90%;
	}
	
}




//Anpassungen Cookie Plugin Buttons

a.vf-btn{
	border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 19px;
	border: 2px solid #2a2a2a !important;
	width: 100%;
    box-sizing: border-box;
}

a.vf-qode-btn-c2a{
	background-color: #2a2a2a !important;
	color: #ffffff !important;
	transition: background-color 0.5s ease-in-out !important;
	height: 48px !important;
	border: 2px solid #2a2a2a !important;

}

a.vf-qode-btn{
	background-color: #ffffff !important;
	color: #2a2a2a !important;
	transition: background-color 0.5s ease-in-out !important;
	height: 40px !important;
	border: 2px solid #2a2a2a !important;
}



a.vf-qode-btn:hover{
	background-color: #2a2a2a !important;
	color: #ffffff !important;
	transition: background-color 0.5s ease-in-out !important;
}

a.vf-qode-btn-c2a:hover{
	background-color: #ffffff !important;
	color: #2a2a2a !important;
	transition: background-color 0.5s ease-in-out !important;
}

//Anpassungen Cookie Plugin

.vf-cookie-optin-dialog-header > .h3 {
    font-size: 36px !important;
    line-height: 42px !important;
    letter-spacing: 0px !important;
}

.vf-cookie-optin-dialog-body p{
	font-size: 10px;
	line-height: 16px;
	font-weight: 400;
}

@media only screen and (min-width: 601px){
	
	.vf-cookie-optin-dialog-body p{
		font-size: 11px;
		line-height: 18px;
		font-weight: 400;
	}
}
	
@media only screen and (min-width: 769px){
	
	.vf-cookie-optin-dialog-body p{
		font-size: 12px;
		line-height: 20px;
		font-weight: 400;
	}
}