/*
Theme Name: Divi child wtko
Description: Mein Child Theme für wtko
Author: consecu
Author URI: http://www.consecu.com
Template: Divi
Version: 1.0 vom 25.04.2019
Text Domain: Divi-child-wtko
*/

@import url("../Divi/style.css");
 
 /* =Theme customization starts here
------------------------------------------------------- */
/* --noblecolor: #a39666; */

:root {
--noblecolor: #a39666;
--noblecolordark: #a37d00;
}

.headerlogo { width: 130px; height:130px;}

img#logo{
    box-shadow: 0px 0px 5px 2px #FFFFFF;
    border-radius: 100%;
    border: 1px solid white;
}

/*** nach-oben-button-style ***/
.et_pb_scroll_top.et-pb-icon {
	background-color: var(--noblecolordark) !important;
	color: #ffffff !important;
}

/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}

/*** Hide Sidebar ***/
#sidebar {display:none;}

/*** Expand the content area to fullwidth ***/
@media (min-width: 981px){
#left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
	float: none !important;
	}
}

/*Chance Header size on Display*/
@media only screen and ( min-width:981px ) {
#main-header { min-height: 86px !important; } /* normal */
#main-header.et-fixed-header { 
	min-height:40px !important; 
	max-height:40px;
	padding-top:0px;
	}
	/* shrunken header */
/** Align menu to the left (near logo) **/
   #‎top-menu-nav { padding-top:0px;margin-top:0px;}
   #‎top-menu-nav a { padding-top:0px;margin-top:0px;}
}

/*original state*/
#main-header {background-color: white;}

@media only screen and ( min-width:790px ) {
	#main-header #logo { min-height:130px !important; padding:0px; margin:0px;}
	/*** hier ! ***/
}

@media only screen and ( max-width:779px ) {
	#main-header #logo { min-height:130px !important; padding:0px; margin:0px;}
	.ten-columns .et_pb_module {width: 33%; float: left;}
}

@media only screen and ( max-width:500px ) {
	#main-header #logo { min-height:130px !important; padding:0px; margin:0px;}
}


@media screen and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)  {
	#main-header #logo { min-height:130px !important; padding:0px; margin:0px;}
}


/* iPhone 4 and high pixel devices  */
@media screen and (-webkit-min-device-pixel-ratio : 2)
and (device-width: 683px)
and (orientation: landscape),
screen and (device-pixel-ratio : 1.5) 
and (device-width: 400px)
and (orientation: portrait) { 
	#main-header #logo { min-height:30px !important; padding:0px; margin:0px;}
	.ten-columns .et_pb_module {width: 50%; float: left;}
}


#main-header.et-fixed-header #logo { display:none; }


/*** more Columns ***/
.ten-columns .et_pb_module {width: 10%; float: left;}
.nine-columns .et_pb_module {width: 11.11%; float: left;}
.eight-columns .et_pb_module {width: 12.5%; float: left;}


.et_pb_accordion.custom-accordion:before {
	background-color: var(--noblecolor)0;}

.et_pb_accordion.custom-accordion .et_pb_toggle .et_pb_toggle_title,
.et_pb_accordion.custom-accordion .et_pb_toggle .et_pb_toggle_title:hover  {
    color: var(--noblecolor);}

.et_pb_accordion.custom-accordion .et_pb_toggle.et_pb_toggle_open .et_pb_toggle_title {
   color: var(--noblecolor)0 !important; }

.et_pb_accordion.custom-accordion:before {
    background-color: var(--noblecolor); }

.et_pb_accordion.custom-accordion .et_pb_toggle.et_pb_toggle_open .et_pb_toggle_title:before {
     background-color: var(--noblecolor); }

.et_pb_accordion.custom-accordion .et_pb_toggle .et_pb_toggle_title:before {
      border: 1px solid var(--noblecolor);}

.et_pb_post_extra.el_dbe_block_extended.image-top {
	flex-direction: row;}



/*** custom-accordion-style ***/
/* https://www.webcontempo.com/create-awesome-custom-accordions-in-divi-in-under-5-minutes/ 
 * Add Accordion Items: advanced tab → TOGGLE ICON → content: “\e0b0”; (select own icon-code)
 * icon-codes: https://dividezigns.com/divi-icon-codes/
 * in Divi-Options!
 */



/*** tool-Tip-Styling***/

.et-tooltip  {
        Cursor: help;
        border-bottom:none !important;
}

.et-tooltip-box { width: 340px !important; }

.et-tooltip:after {
	content: "p";
	font-family: 'ETmodules';
	/* color: #777; */
	color:var(--noblecolor) !important;
	padding-left: 2px;
	font-size: 0.9em;   
	vertical-align: super;
    font-size: 75%;
    opacity: 0.6;
    color:red;
    position: relative;
    line-height: 0;
    vertical-align: baseline; 
    top: -0.3em;
    z-index: 255;
    text-align:center;
	}

.koblenzansprechpartner h2 { font-size:14px; font-style: italic;}
.koblenzansprechpartner h3 { font-size:13px; font-weight:bold; }
.koblenzansprechpartner h4 { font-size:13px; font-weight:bold; }
.koblenzansprechpartner h6 { font-size:12px; }
.koblenzansprechpartner p { font-size:12px; }

/*** Sparten-Angebots-Anzeige ***/

.sparten_angebot { 
	padding-left:30px; margin-right:30px;
	display: flex; 
	flex-flow: row wrap;
	align-items: center!important;
	justify-content: space-between !important;
	align-content: center!important;
	}
 		
.sparte {
	display: block;
	position: relative;
	width:220px;
	margin: 3px 1px 3px 1px;
	z-index:100;
	transition: all .4s;
	}

.sparte img {
	margin: 5px 0 5px 0;
	border: 4px solid var(--noblecolor);
	border-radius: 100%;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	box-shadow: 2px 2px 6px #aaa;
	width:165px;
	height:165px;
	}
		
.sparte img:hover {
	transition: all .4s;
	width: 180px;
	height: 180px;
	font-size: 12px; color:green;
	border: 4px solid#f5e79f;
	box-shadow: 5px 5px 15px #aaa;
	}


/*** Tabellenkonfiguration Zeitplaene ***/

.wtko-table table {border:#FFDB00 solid 1px;}

.wtko-table table img { position: relative; top:4px;}

.wtko-table table img svg { fill: #FFDB00; background-color:red; }

.wtko-table th {	
	background:var(--noblecolor);
	color: #ffffff !important;
	font-size:14px !important;
	border-top:#fff solid 5px;
	}				

.wtko-table td {
	border-top:#ffdb00 solid 1px;
	font-size:12px;
	text-align:left;
	padding:2px;
	padding-left:5px;
	}
					
.wtko-table th td day { font-size:14px !important; }				
					
.tmobile td {text-align:center;}

.wtko-table a:link, a:visited, a:active, a:focus {
	color:#666666;
	opacity: 1;
	text-decoration: none;
	}

.wtko-table a:hover {
	color:#aaaaaa;
	}

.status {
	position: absolute;
	padding-left: 95px;
	margin-top:-1px;
	color:var(--noblecolor) !important;
	transform: rotate(330deg);
	font-size: 0.8em;
	}

.statusmobile {
	color:var(--noblecolor) !important;
	transform: rotate(350deg);
	font-size: 0.9em;
	}

/*** Anzeige von Teammembers ***/

.teamset { 
	display: flex; 
 	flex-flow: row wrap;
	align-items: center!important;
  	justify-content: space-between !important;
  	align-content: center!important;
 	}
	
.teammember {
  	display: block;
  	position: relative;
  	width:220px;
  	height:190px;
  	margin: 3px 1px 3px 1px;
  	z-index:100;
  	transition: all .4s;
  	}

.teammember img {
	margin: 5px 0 5px 0;
	border: 4px solid var(--noblecolor);
	border-radius: 100%;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	box-shadow: 2px 2px 6px #aaa;
	width:165px;
	height:165px;
	}

/* Custom Video Popup */
/* Popup Close Icon Tweak */
.mfp-wrap.mfp-close-btn-in.mfp-auto-cursor.mfp-fade.mfp-ready {
  top: 0px !important;
  position: fixed !important;
}
.mfp-iframe-holder .mfp-content {
    max-width: 70%;
}
.mfp-iframe-scaler button.mfp-close {
    top: -50px ;
}
.mfp-iframe-holder .mfp-close,
.mfp-image-holder .mfp-close,
.mfp-wrap .mfp-close:active {
    top: -50px !important;
}
.video_popup_lightbox .mfp-iframe-holder .mfp-close {
    top: -50px;
	}

.video_popup {
    position: relative;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
	}
	
.video_popup a:before {
    cursor: pointer;
    position: absolute;
    top: calc(50% - 55px);
    left: calc(50% - 54.5px);
    z-index: 20;
    padding: 55px 27px;
    border-radius: 50%;
    font-size: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0a2a3b;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
	}
	
.video_popup a:after {
    content: 'E';
    cursor: pointer;
    font-family: 'ETmodules';
    position: absolute;
    top: calc(50% - 55px);
    left: calc(50% - 47px);
    z-index: 20;
    background-color: #fff;
    padding: 55px 27px;
    border-radius: 50%;
    font-size: 40px;
    text-transform: uppercase;
    color: #0a2a3b;
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
	}

.video_popup.no_icon:before,
.video_popup.no_icon:after {
    display: none!important;
	}

.video_popup:not(.no_icon):hover {
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
	}
.video_popup:hover a:before {
    opacity: 0;
    padding: 65px 37px;
    left: calc(50% - 64.5px);
    top: calc(50% - 65px);
	}
	
.video_popup:hover a:after {
    opacity: 1;
    padding: 65px 37px;
    left: calc(50% - 64.5px);
    top: calc(50% - 65px);
    font-size: 56.5px;
	}
	
@media all and (max-width: 980px) {
    .video_popup a:before {
        top: calc(50% - 32.5px);
        left: calc(50% - 33px);
        padding: 33px 17px;
        font-size: 10px;
    	}
}
    
.video_popup a:after {
        top: calc(50% - 32.5px);
        left: calc(50% - 33px);
        padding: 33px 17px;
        font-size: 32px;
    }

.video_popup:hover a:before {
        opacity: 0;
        padding: 40px 22px;
        left: calc(50% - 43px);
        top: calc(50% - 42.5px);
    }

.video_popup:hover a:after {
        opacity: 1;
        padding: 40px 22px;
        left: calc(50% - 43px);
        top: calc(50% - 42.5px);
        font-size: 42px;
    }


/*** sideheader & sidetext = Unterrichtsangebots-Beschreibungen ***/
/***
dunkle Seite, Überschrift links und Text rechts:
class="side shead shleft shdark" und class="side stext stright stdark"

dunkle Seite, Überschrift rechts und Text links:
class="side shead shright shdark" und class="side stext stleft stdark"

helle Seite, Ü links T rechts:
class="side shead shleft shhell" und class="side stext stright sthell"

class="side shead shright shdark" und class="side stext stleft stdark"
***/ 
   
.side {
	display:block;
	position:relative;
	}

.shead {
	width: 34%;
	text-transform: uppercase;
	font-size:1.6em;
	font-weight:550;
	}

.stext {
	font-size:1.15em;
	text-align: justify;
	width:66%;
	padding: 8px 8px 8px 8px;
	border-radius: 8px 8px 8px 8px;
}

.shleft {
	float: left;
	text-align:right;
	padding: 5px 20px 0px 0px;
}

.shright {
	float: right;   
	text-align:left;
	padding: 5px 0px 0px 20px;
}

.stleft { float:left; }

.stright { float:right; }

.shdark { 
	color:var(--noblecolor);
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), -1px -1px 1px rgba(0, 0, 0, 0.7),  1px -1px 1px rgba(0, 0, 0, 0.7), -1px 1px 1px rgba(0, 0, 0, 0.7);
}

.stdark {
	color:var(--noblecolor);
	border: 1px rgba(163,150,102,0.57) dotted;
	background-color:rgba(0,0,0,0.68);
}

.shhell { 
	color:var(--noblecolor);
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7), -1px -1px 1px rgba(255, 255, 255, 0.7),  1px -1px 1px rgba(255, 255, 255, 0.7), -1px 1px 1px rgba(255, 255, 255, 0.7);
}

.sthell {
	color:var(--noblecolor);
	border: 1px rgba(163,150,102,0.57) dotted;
	background-color:rgba(255, 255, 255,0.68);
}


@media only screen and ( max-width:779px ) {
	.shead,
	.stext,
	.sleft,
	.sright {
		 float: none;
		 width:100%; 
		 padding: 5px;
		 
		 }
}