/*
 Theme Name:     MT Divi Child
 Theme URI:      
 Description:    Divi Child Theme
 Author:         Georg Schmitz
 Template:       Divi
 Version:        1.0.0
*/
 
 
/* =Theme customization starts here
 * 
 * 
 * 
/*_________________________________________________________________________________________________________________________________________________

/*
RUB colors 
#98b632 green
#003560 blue
*/

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on January 6, 2023 */
@font-face {
    font-family: 'rub_scala_mzbold_italic';
    src: url('https://www.mt.rub.de/wp-content/uploads/fonts/rubfonts/rub_scala_mz_bold_italic-webfont.woff2') format('woff2'),
         url('https://www.mt.rub.de/wp-content/uploads/fonts/rubfonts/rub_scala_mz_bold_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'rub_scala_mzbold';
    src: url('https://www.mt.rub.de/wp-content/uploads/fonts/rubfonts/rub_scala_mz_bold-webfont.woff2') format('woff2'),
         url('https://www.mt.rub.de/wp-content/uploads/fonts/rubfonts/rub_scala_mz_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'rub_scala_mzitalic';
    src: url('https://www.mt.rub.de/wp-content/uploads/fonts/rubfonts/rub_scala_mz_italic-webfont.woff2') format('woff2'),
         url('https://www.mt.rub.de/wp-content/uploads/fonts/rubfonts/rub_scala_mz_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'rub_scala_mzregular';
    src: url('https://www.mt.rub.de/wp-content/uploads/fonts/rubfonts/rub_scala_mz-webfont.woff2') format('woff2'),
         url('https://www.mt.rub.de/wp-content/uploads/fonts/rubfonts/rub_scala_mz-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'rubflamabold';
    src: url('https://www.mt.rub.de/wp-content/uploads/fonts/rubfonts/rubflama-bold-webfont.woff2') format('woff2'),
         url('https://www.mt.rub.de/wp-content/uploads/fonts/rubfonts/rubflama-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'rubflamabold_italic';
    src: url('https://www.mt.rub.de/wp-content/uploads/fonts/rubfonts/rubflama-bolditalic-webfont.woff2') format('woff2'),
         url('https://www.mt.rub.de/wp-content/uploads/fonts/rubfonts/rubflama-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'rubflamaitalic';
    src: url('https://www.mt.rub.de/wp-content/uploads/fonts/rubfonts/rubflama-italic-webfont.woff2') format('woff2'),
         url('https://www.mt.rub.de/wp-content/uploads/fonts/rubfonts/rubflama-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'rubflama_lightregular';
    src: url('https://www.mt.rub.de/wp-content/uploads/fonts/rubfonts/rubflamalight-regular-webfont.woff2') format('woff2'),
         url('https://www.mt.rub.de/wp-content/uploads/fonts/rubfonts/rubflamalight-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/*edit the Divi mobile hamburger icon*/
.mobile_menu_bar_toggle:before {
	color: #003560 !important;
}




/*  T R Y   T O   U S E   H Y P H E N S  
 * 
 * but only when switched on.
*/ 

.mt-hyphens{
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}





/*_________________________________________________________________________________________________________________________________________________
 *  
 * U N I   B I B L I O T H E K   P U B L I K A T I O N E N
 * 
 * CSS code für das Universitätsbibliotheks-Widget mit Publikationen
 */
 
.ub-widget {color: #003560; font-family: Open Sans, Arial, sans-serif; }
.ub-widget a {color: #0070A0; font-weight: bold; }
.ub-widget h1 {font-size: 150%; }
.ub-widget h2 {font-size: 120%; color: #8dae10; text-transform: uppercase;  font-weight: bold; margin-top: 2em; }
.ub-widget h3 {font-size: 120%;  }
.ub-widget h4 {font-size: 150%; color: #003560; font-weight: bold; margin-bottom: -1em; margin-top: 2em;}
.linked-csl-entry {}
.csl-toc {}
.csl-bib-body {margin-bottom: 2em;}
.csl-entry {margin-top: 2em; margin-bottom: 1em;}
.csl-left-margin {display: inline; font-weight: bold;}
.csl-right-inline {display: inline; margin-left: 1em;}
.ext-bib-links {margin-top: -0.5em;}
.ub-widget li + li::before {content: " ";}
.ub-widget ul li {display: inline; margin-left: 0em; line-height: 200% }
.ub-widget ul li a {background-color: #003560; color: #fff; padding: 0.25em 0.5em; text-decoration: none; }
.ub-widget ul {margin-left: -2.5em; font-size: 100%; margin-bottom: 0em;}
.toc_return {margin-top: 0em; font-size: 90%;}
/* Dieser css code funktioniert nur mit der eigenen lokalen angepassten Version des publig.js, weil dort die Fehlermeldung eine zugeordnete CSS-Klasse bekommen hat */
.ubWidgetError {display:none;}


/* Text module indentation */
.mt-indent-2em p { 
	padding-left:2em; 
}
.mt-indent-2em ul { 
	padding-left:4em; 
}

/*________________________________________________________________________________________________________________
 * 
 *    B L U E   T O G G L E S  
 * /
/* Styling the blue toggles text color and background 
 * on which they appear, e.g., in the privacy policy
 * 
 * Somebody forgot to enter this setting to be changed in the DIVI Builder
 */
/* set all texts in white */
.mt-toggle-blue h1,
.mt-toggle-blue h2,
.mt-toggle-blue h3,
.mt-toggle-blue h4,
.mt-toggle-blue h5,
.mt-toggle-blue h6,
.mt-toggle-blue p,
.mt-toggle-blue ul,
.mt-toggle-blue ol 
{color:white;}
.mt-toggle-blue {background-color:#003560;}

/*_________________________________________________________________________________________________________________________________________________
 * 
 *  T E X T   S T Y L I N G   F O R   L A R G E   I N I T I A L S
 * 
 */

.mt-initial-large p:first-child::first-letter {
  padding: 0 0;
  margin: -0.3rem 0.5rem 0 0;  
  font-size: 4.5rem;
  float: left;
  line-height: 1;
  font-style: bold;
}

/*_________________________________________________________________________________________________________________________________________________
 * 
 *  T E X T   S T Y L I N G   F O R   C O L O R E D   B A C K G R O U N D   T E X T   W I T H   N O   P A D D I N G
 * 
 */
.mt-callout-nopad {
  position: relative;
  color: #193d2c;
  background-color: #ffffff;
  font-size: inherit;
  padding: 0em 0em 0em 0em;
  border-radius: 0px;
  margin: 0 0px;
}


/*_________________________________________________________________________________________________________________________________________________
 * 
 *  F L U I D   L A Y O U T   C A R D S   F O R   C O U R S E S ,   T E A M ,   A N D   N E W S   
 * 
*/

.mt-card-section {
	padding: 0px !important;
	border-radius: 8px;
	overflow: hidden;
}

/* The row that contains the thumbnail image must have the css class mt-card-thumbnail 
 * set the aspect ratio of the image of the card here and for all children below up to the image itself */ 

.mt-card-thumbnail, .mt-card-thumbnail *{
	margin: 0px !important;
	padding: 0px !important;
	width: 100% !important;
}
.mt-card-thumbnail *{
	height: 100%;
}


.mt-card-course .mt-card-thumbnail *{
	aspect-ratio: 16 / 9;
}

/*
.mt-course{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
*/

.mt-course img{
	aspect-ratio: 16 / 9;
}

.mt-project-image *{
	aspect-ratio: 3 / 2;
}


.mt-card-team .mt-card-thumbnail *{
	aspect-ratio: 3 / 2;
}

.mt-card-news .mt-card-thumbnail *{
	aspect-ratio: 3 / 2;
}


/* The position shift assumes that the focus in the images is put two-thirds from the left
 * of the image and not in the middle. When scaling the cards small, they keep the focus in view  */

.mt-card-thumbnail img{
	object-position: 67% 50%;
    object-fit: cover;
}

.mt-card-text {
	margin: 0px;
	padding: 0px;
	width: 100%;
}

/* some indent of the text left/right compared to the image */
.mt-card-text .et_pb_column{
	padding: 0px 1em 1em 1em !important;
}


/* This takes care of equal height for all grid rows 
.divi-filter-archive-loop.grid {
    grid-auto-rows: 1fr !important;
}
*/

/* F l u i d    t e x t   s e t t i n g s   f o r    t h e   c a r d s */


.mt-card-text p{
  font-size: 12px !important;
  padding-bottom: 0px !important;
  padding-top:0 !important;
  margin: auto 0 !important;
  line-height: 1.3em;
}
  
.mt-card-text h1{
  font-size: 14px !important;
  padding-bottom: 1em !important;
  padding-top:14px !important;
  margin: auto 0 !important;
  line-height: 1.3em;
}

/* For the news cards make larger headings, we have more space here */ 
.mt-card-news .mt-card-text h1{
  font-size: 16px !important;
}


/* set font size for tablet size */
@media all and (min-width: 480px) {
 
  /* calculation: text will not be smaller than first entry and not larger than the last
     The viewport size is typically 1080px, the switchpoints are 480 and 767
     e.g. min size 12 px at 480 is 12/480 = 2.5 vw (2.5 % of 480) 
     
  	at the next switch point 767, the size is 19.175, then the fonts jump back to a 
  	smaller fixed size (14px), because the number of columns also increases
  */
  .mt-card-text p{
  	  font-size: clamp(12px, 2.5vw, 20px) !important;
  }
    .mt-card-text h1{
  		font-size: clamp(14px, 2.6vw, 24px) !important;
  }
	
  .mt-card-news .mt-card-text h1{
  		font-size: clamp(16px, 2.6vw, 24px) !important;
  }
	
  .mt-card-news .mt-card-text p{
  		font-size: clamp(12px, 2.5vw, 16px) !important;
  }
}  
   
@media all and (min-width: 767px){
  .mt-card-text p{
    font-size: 14px !important; 
  }
  .mt-card-text h1{
    font-size: 16px !important; 
	padding-top: 14px !important;
  }
  .mt-card-news .mt-card-text h1{
    font-size: 20px !important;
  }
	
}

/* switch for mobile devices to a side-by-side grid 
 * 
 * The section becomes the grid container.
 * 
 * */
@media (max-width: 766px) {
	.mt-card-course{
		display : grid;
		grid-template-columns : 33% 1fr; /* ignore errors! 1fr exists ... */
		justify-items: stretch !important;
		align-items: stretch !important;
	}
	.mt-card-team{
		display : grid;
		grid-template-columns : 40% 1fr; /* ignore errors! 1fr exists ... */
		justify-items: stretch !important;
		align-items: stretch !important;
	}
}	


/* Address problems of cards with the Divi Machine carousel container
 * 
 */
/* height is forced to 100% of the outer section for all rows, columns etc. by divi machine, 
 * which causes complete chaos in the design
 */
.same-height-cards .post_content_wrapper .et_pb_row{
	height:auto !important;
}



/*
 * 
 * S e m e s t e r   T a g s   f o r   t h e   c a r d s
 * 
 *  Settings to show conditional information on the course loop layout cards for the semester
 *  The CSS-classes mt-semester-xxxx are set by an ACF-item module on the card layouts depending on the semester
 *  ACF selector field in the course description.
 
 * The selection for the field Semester is ws ss wsss or none. In the ACF field group the labels and the values are identical because for
 * some reason DIVI Machine reads the labels and not the values of the choices. This could be fixed (see below) but would need servicing 
 * everytime that the DIVI Machine plugin gets an update. Therefore, this fix described below was not done anymore and we hope users understand
 * what ss ws wsss and none mean.

 * ---- Potential fix for the problem that is not done anymore:
 * 
 *  Remember that a line in the ACFItem module of DIVI machine had to be debugged to make it work. File ACFItem.php around line 3551
 *  or search for "$acf_type=="select":
_________________
ACFItem.php: 

  } else if ($acf_type == "select") {
                    
       $value = $acf_get['value'];


       // This takes the choices (Labels) instead of the values. We do not want that and we do not know who would want that ... (!!! FIND MY CHANGES !!!)
       // $getselected_name = $acf_get['choices'][ $value ]; <- this would return Sommersemester instead of ss
       $getselected_name = $value; // rather take the value ( e.g. ws/ss/wsss)
 
 * ----- end of fix */

.mt-summer, .mt-winter{ display:none;}
.mt-semester-ss .mt-summer, 
.mt-semester-wsss .mt-summer, 
.mt-semester-ws  .mt-winter,
.mt-semester-wsss .mt-winter {display:inline-block;}




/*_________________________________________________________________________________________________________________________________________________
 *  
 * Additional styling of Zotpress bibliographies
 * 
 *  Z O T P R E S S 
 * 
 */ 
.mt-zotpress-tight .csl-entry{
	margin-top: 0;
	margin-bottom: 0;
    display:grid;
	grid-template-columns : 3em auto;
}

.mt-zotpress-tight div.zp-List .csl-right-inline{
	margin-left:0 !important;
}
.mt-zotpress-tight .csl-bib-body{
	margin-bottom: 0.5em;
}





/*_______________________________________________________________________________________________________________________________________
 * 
 *  L I N E   B R E A K I N G   F O R   S M A L L   D I S P L A Y S
 * 
 * a class that can be added to text items that have the risk of words longer than one line on small displays 
 * This is needed, e.g., in bibliographies when long URLs or DOIs would extend the text out of the mobile screens */
.mt-dont-break-layout {

	/* These are technically the same, but better use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead overwrite with this non-standard one as long as it is accepted: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

/*_______________________________________________________________________________________________________________________________________
 * 
 * R E M O V E   P A D D I N G   O F   O L   I N   B L U R B S 
 * 
 * quick removal of unnecessary padding of ordered lists in raw html in blurb texts */
.et_pb_blurb_description ol{padding:0;}

/*_______________________________________________________________________________________________________________________________________
 * 
 * S T Y L E   U L   
 */

.mt-ul ul{
	list-style-type: square;
}

.mt-ul li::marker{
	color: #98b632;
}



/*_______________________________________________________________________________________________________________________________________
 *
 * S T Y L E   H E A D E R 
 * 
 */
/*
header{
	margin-bottom:-2em;
}
*/
.et_pb_menu .et_mobile_nav_menu{
	margin-right:7.5px !important;
}
/* Doing this in Divi seems to have a bug 
 */
.mt-border-rb-round {
		border-radius: 0px  0px 8px 0px;
}
/* Divi has a bug with a sticky placeholder covering the menu items and making them unclickable 
 * This code makes them clickable again */
.et_pb_sticky_placeholder {
    pointer-events: none!important;
}


.mt-no-column-margin-bottom .et_pb_column {
	margin-bottom: 0 !important;
}

/*_______________________________________________________________________________________________________________________________________
 *
 * S T Y L E   T E X T   F O R   P R E S E T   M T - T E X T
 * 
 */
.mt-text li + li{
	margin-top: 1em;
} 




/*_______________________________________________________________________________________________________________________________________
 *
 * G E N E R A L   F L U I D   T E X T   F O R   P A G E S 
 *
 * General Fluid text for the webpage texts with class mt-fluid-text
 */

/* start with default settings in relative unit em, fontsize of em is determined by display size */

:root {
	--h1base : 2rem; 
	--h2base : 1.5rem;
	--h3base : 1.2rem;
	--pbase : 1rem;
	--h1inc : 24;
	--h2inc : 16;
	--h3inc : 10;
	--pinc : 8;
}

.mt-fluid-text p, .mt-fluid-text ol{
  font-size: var(--pbase) !important;
  padding-bottom: 0px !important;
  padding-top:0 !important;
  margin: auto 0 !important;
  line-height: 1.3em !important;
}


.mt-fluid-text h1{
  font-size: var(--h1base) !important;
  padding-bottom: 1em !important;
  padding-top:1.5em !important;
  margin: auto 0 !important;
  line-height: 1.3em;
}

.mt-fluid-text h2{
  font-size: var(--h2base) !important;
  padding-bottom: 1em !important;
  padding-top: 1.5em !important;
  margin: auto 0 !important;
  line-height: 1.3em;
}

.mt-fluid-text h3{
  font-size: var(--h3base) !important;
  padding-bottom: 1em !important;
  padding-top: 1.5em !important;
  margin: auto 0 !important;
  line-height: 1.3em;
}

   
@media all and (min-width: 480px) {
 
  .mt-fluid-text h1 { 
    font-size: calc(var(--h1base) + var(--h1inc) * ((100vw - 480px) / 500)) !important;
  	}  
  .mt-fluid-text h2 { 
    font-size: calc(var(--h2base) + var(--h2inc)  * ((100vw - 480px) / 500)) !important;
  	}
  .mt-fluid-text h3 { 
    font-size: calc(var(--h3base) + var(--h3inc)  * ((100vw - 480px) / 500)) !important;
  	}
  .mt-fluid-text p, .mt-fluid-text ol {
    font-size: calc(var(--pbase) + var(--pinc)  * ((100vw - 480px) / 500)) !important;
  	}
}  
   
@media all and (min-width: 980px){
  .mt-fluid-text h1 {
    font-size: calc(var(--h1base) + var(--h1inc) * 1px) !important;
	}
  .mt-fluid-text h2 {
    font-size: calc(var(--h2base) + var(--h2inc) * 1px ) !important;
	}
  .mt-fluid-text h3 {
    font-size: calc(var(--h3base) + var(--h3inc) * 1px ) !important;
	}
  .mt-fluid-text p, .mt-fluid-text ol {
    font-size: calc(var(--pbase) + var(--pinc) * 1px) !important;
  	}
}

.mt-fluid-text sup{
	font-size : 0.6em;
}

/*_______________________________________________________________________________________________________________________________________
 *
 * C H A N G E S   F O R   C O N T A C T   F O R M S
 * 
 */

/* force tick mark color in check box */
.et_pb_contact_field input[type=checkbox]:checked+label i:before {
color: #000000!important;
}