/* Let's load some fonts */

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Titillium+Web:200,200i,300,300i,400,400i,600,600i');
@import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700');
@import url('https://fonts.googleapis.com/css?family=Palatino');
@import url('https://fonts.googleapis.com/css2?family=Raleway');
@import url('https://fonts.googleapis.com/css2?family=Montserrat');
@import url('https://fonts.googleapis.com/css2?family=Roboto');
@import url('https://fonts.googleapis.com/css2?family=Lato');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display');
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');
@import url('https://fonts.googleapis.com/css?family=Garamond:200,200i,300,300i,400,400i,600,600i');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro');
@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic');
@import url('https://cdn.rawgit.com/tonsky/FiraCode/1.204/distr/fira_code.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css');

/* Generic stuff */

/* .remark-code, .remark-inline-code { font-family: 'Source Code Pro'; } */
/* .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; } */
.remark-code, .remark-inline-code { font-family: 'Fira Code'; }
/* .remark-code, .remark-inline-code { 
	font-family: 'Inconsolata', 'Lucida Console', Monaco, monospace; 
	color: #13294B
	} */

body { font-family: 'Garamond' }

.huge{font-size: 140%}

.big{font-size: 120%}

.small{font-size: 80%}

.tiny{font-size: 40%}
/*Centers non text objects in the middle of the slide*/
.center2 {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.red {
color: red;
}

.blue {
color: blue;
}

.green {
color: #3B7A57;
}

.grViz {
  margin-left:auto; margin-right:auto; display:block;
}

.footnote{font-size: 50%;}

.smallcaps{
  font-variant: small-caps;
}

.caption {
  text-align: center;
  font-size: 80%;
}

.left-caption {
  text-align: left;
  font-size: 80%;
}
.right-caption {
  text-align: right;
  font-size: 80%;
}

/* Logos */

/*NB: Logos need to be specified near the top of the CSS file to avoid being
hidden behind other background information.*/

.with-logo::before {
	content: '';
	width: 220px;
	height: 252px;
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	background-size: contain;
	background-repeat: no-repeat;
}
.logo-iheid::before {
	  background-image: url(https://raw.githubusercontent.com/jhollway/iheiddown/develop/inst/logos/Logo_IHEID_couleur.png);
}
.logo-cies::before {
	  background-image: url(https://raw.githubusercontent.com/jhollway/iheiddown/develop/inst/logos/logo_CIES_rvb.png);
}
.logo-ctei::before {
	  background-image: url(https://raw.githubusercontent.com/jhollway/iheiddown/develop/inst/logos/logo_CTEI_rvb.png);
}
.logo-ggc::before {
	  background-image: url(https://raw.githubusercontent.com/jhollway/iheiddown/develop/inst/logos/logo_GGC_RVB.png);
}
.logo-ahcd::before {
	  background-image: url(https://raw.githubusercontent.com/jhollway/iheiddown/develop/inst/logos/logo_AHCD_RVB.png);
}
.logo-ccdp::before {
	  background-image: url(https://raw.githubusercontent.com/jhollway/iheiddown/develop/inst/logos/logo_CCDP_rvb.png);
}
.logo-cfd::before {
	  background-image: url(https://raw.githubusercontent.com/jhollway/iheiddown/develop/inst/logos/logo_CFD_rvb.png);
}
.logo-gender::before {
	  background-image: url(https://raw.githubusercontent.com/jhollway/iheiddown/develop/inst/logos/logo_GENDER_RVB.png);
}
.logo-ghc::before {
	  background-image: url(https://raw.githubusercontent.com/jhollway/iheiddown/develop/inst/logos/logo_GHC_rvb.png);
}
.logo-gmc::before {
	  background-image: url(https://raw.githubusercontent.com/jhollway/iheiddown/develop/inst/logos/logo_GMC_rvb.png);
}
.logo-iheid_BW::before {
	  background-image: url(https://raw.githubusercontent.com/jhollway/iheiddown/develop/inst/logos/Logo_IHEID_nb.png);
}
.logo-iheid_white::before {
  	background-image: url(https://raw.githubusercontent.com/jhollway/iheiddown/develop/inst/logos/logo_IHEID_couleur_tx_blanc.png);
}
.logo-econ::before {
  	background-image: url(https://raw.githubusercontent.com/jhollway/iheiddown/develop/inst/logos/logo_INTL_ECO_engl_2022_RGB_color.png);
}
.logo-law::before {
  	background-image: url(https://raw.githubusercontent.com/jhollway/iheiddown/develop/inst/logos/logo_INTL_LAW_engl_2022_RGB_color.png);
}
.logo-history::before {
  	background-image: url(https://raw.githubusercontent.com/jhollway/iheiddown/develop/inst/logos/logo_IHP_engl_2022_RGB_color.png);
}
.logo-irps::before {
  	background-image: url(https://raw.githubusercontent.com/jhollway/iheiddown/develop/inst/logos/logo_IRPS_engl_2022_RGB_color.png);
}
.logo-mint::before {
  	background-image: url(https://raw.githubusercontent.com/jhollway/iheiddown/develop/inst/logos/logo_MINT_engl_2022_RGB_color.png);
}

/* Tables */

.remark-slide thead, .remark-slide tfoot, .remark-slide tr:nth-child(even) { background: none }

/* Title slide */

div.remark-slide-container h1 {
	font-family: 'Open Sans', sans-serif;
	color: #e10020;
	letter-spacing: -1px;
  font-size: 2.25em
}

a, a > code {
  color: #e10020;
  text-decoration: none;
}

div.remark-slide-container h2 {
	font-family: 'Open Sans', sans-serif;
	color: #535353;
	letter-spacing: -1px;
	font-size: 1.5em
}

div.remark-slide-container h3 {
	font-family: 'Open Sans', sans-serif;
	color: #000;
	letter-spacing: -1px;
	font-size: 1.25em;
	padding-top: 1.3em
}

div.remark-slide-container p {
	font-size: 1.1em;
}

.title-slide {
  background-image: url(https://raw.githubusercontent.com/jhollway/iheiddown/develop/inst/logos/Logo_IHEID_couleur.png);
  background-position: 95% 90%;
	background-size: 30%;
  background-color: #FFFFFF;
	text-align:left;
  vertical-align: top;
  text-shadow: none;
	border-bottom: 0 solid  #522D80;
}

/* Slide numbering */

.remark-slide-number {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	color: #522D80;
	position: inherit;
}

/* Okay, now let's add a progress bar https://github.com/yihui/xaringan/wiki/Progressbar */ 

.remark-slide-number .progress-bar-container {
  position: absolute;
  bottom: 0;
  height: 4px;
  display: block;
  left: 0;
  right: 0;
}

.remark-slide-number .progress-bar {
  height: 100%;
  background-color: red;
}

/* Let's play with .inverse and a new class, .fullscale, a little more */

.inverse {
    color: ff0000;
    text-shadow: 0 0 0 #333;
}

div.remark-slide-container .fullscale {
    color: #d6d6d6;
    text-shadow: 0 0 20px #333;
}

div.remark-slide-container .fullscale h1 {
	color: #fff;

}

div.remark-slide-container .fullscale p {
	color: #000;

}

/***********
 Slide margins and spacings
 ***********/
.remark-slide-content {
  font-size: 24px;
	text-shadow: 0 0 0 #333;
  padding-top: 25px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 25px;
}
/* 
To specify the margin of the first title h1
*/
.remark-slide-content > h1:first-of-type {
  margin-top: 5px;
  margin-bottom: 10px;
}
.remark-slide-content > h2:first-of-type {
  color: #535353;
  margin-top: 5px;
  margin-bottom: 10px;
}
.remark-slide-content > h3:first-of-type {
  margin-top: 5px;
  margin-bottom: 10px;
}
.remark-slide-content > h4:first-of-type {
  margin-top: 5px;
  margin-bottom: 10px;
}


th, td {
  border-bottom: 1px solid #ddd;
}


/* Text wrapping for code output */
pre {
  white-space: pre-wrap;
}

/*************************
  Custom classes 
**************************/

.pull-left-2 {
  float: left;
  width: 60%;
}
.pull-right-1 {
  float: right;
  width: 36%;
}

.pull-left-1 {
  float: left;
  width: 36%;
}
.pull-right-2 {
  float: right;
  width: 60%;
}

.pull-1 {
  float: left;
  width: 33%;
}
.pull-2 {
  float: inherit;
  width: 33%;
}
.pull-3 {
  float: right;
  width: 33%;
}


/* use to position text at the bottom */
.pull-down {
  position: absolute;
  bottom: 50px;
}

.inverse .remark-slide-number {
  display: none;
}

/* background colour classes */
.iheid-red {
  background-color: #E20020;
  color: white;
}
.writing-grey {
  background-color: #5c666f;
  color: white;
}
.grayscale-grey {
  background-color: #6f7072;
}

/* segue */
.segue {
  text-align:center;
  vertical-align: middle;
  background-color: #0148A4;
  color: #ffffff;
  text-shadow: 0 0 20px #333;
}
.segue .remark-slide-number {
  display: none;
}

.segue-red {
  text-align:center;
  vertical-align: middle;
  background-color: #e64626;
  color: #ffffff;
  text-shadow: 0 0 20px #333;
}
.segue-red .remark-slide-number {
  display: none;
}

.segue-yellow {
  text-align:center;
  vertical-align: middle;
  background-color: #FFB800;
  color: #424242;
  text-shadow: 0 0 2px #333;
}
.segue-yellow .remark-slide-number {
  display: none;
}

/* example slide with background colour to distinguish
it from other content slides */
.eg {
  background-color: #F1F1F1;
  /* rgb(231, 238, 242); */
}
.eg.nobackground {
  background-color:white;
}

/* link colour */
a { 
    color: #0148A4; 
} 

.columns-2 {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
}

.columns-21 {
  -webkit-columns: 66%, 33%;
  -moz-columns: 66%, 33%;
  columns: 66%, 33%;
  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
}


/* From: https://github.com/emilyriederer/xaringan_columns */

/* Required: Clear floats after the columns */
.multicolrow:after {
    content: "";
    display: table;
    clear: both;
}

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

/* Progressive slide controls from https://www.garrickadenbuie.com/blog/better-progressive-xaringan/?panelset2=slides3&panelset=slides */
.highlight-last-item > ul > li, 
.highlight-last-item > ol > li {
  opacity: 0.5;
}
.highlight-last-item > ul > li:last-of-type,
.highlight-last-item > ol > li:last-of-type {
  opacity: 1;
}

/* Make the last element of the list bold instead of making the n-1 elements
more transparent. Uncomment to use and add the class .bold-last-item to the
beginning of the slide.*/
/*
.bold-last-item > ul > li:last-of-type,
.bold-last-item > ol > li:last-of-type {
  font-weight: bold;
}
*/

/* Render only last code result*/
.show-only-last-code-result pre + pre:not(:last-of-type) code[class="remark-code"] {
    display: none;
}
/******************
 * Slide scrolling
 * (non-functional)
 * not sure if it is a good idea anyway
slides > slide {
  overflow: scroll;
 padding: 5px 40px;
}
.scrollable-slide .remark-slide {
  height: 400px;
  overflow: scroll !important;
}
 ******************/

.scroll-box-8 {
  height:8em;
  overflow-y: scroll;
}
.scroll-box-10 {
  height:10em;
  overflow-y: scroll;
}
.scroll-box-12 {
  height:12em;
  overflow-y: scroll;
}
.scroll-box-14 {
  height:14em;
  overflow-y: scroll;
}
.scroll-box-16 {
  height:16em;
  overflow-y: scroll;
}
.scroll-box-18 {
  height:18em;
  overflow-y: scroll;
}
.scroll-box-20 {
  height:20em;
  overflow-y: scroll;
}
.scroll-output {
  height: 90%;
  overflow-y: scroll;
}



 
 /* inline code background */
 .remark-inline-code {
   /* until the link between code and mathjax 
   is broken, we need to use transparent */
  background: transparent; /* #F5F5F5; /* lighter */
  /* background: #e7e8e2; /* darker */
  border-radius: 3px;
  padding: 2px;
}



/******************
 * Coloured content boxes
 ****************/
.content-box { 
    box-sizing: border-box;
    background-color: #e2e2e2;
}
.content-box-blue,
.content-box-gray,
.content-box-grey,
.content-box-army,
.content-box-green,
.content-box-purple,
.content-box-orange,
.content-box-red,
.content-box-yellow {
  box-sizing: border-box;
  border-radius: 15px;
  margin: 0 0 15px;
  overflow: hidden;
  padding: 0 20px;
  width: 100%;
}
.content-box-blue { background-color: #F0F8FF; }
.content-box-gray { background-color: #e2e2e2; }
.content-box-grey {	background-color: #F5F5F5; }
.content-box-army {	background-color: #737a36; }
.content-box-green { background-color: #d9edc2; }
.content-box-purple { background-color: #e2e2f9; }
.content-box-red { background-color: #ffcccc; }
.content-box-yellow { background-color: #fef5c4; }
.content-box-orange { background-color: #ffa500; }
.content-box-blue .remark-inline-code,
.content-box-gray .remark-inline-code,
.content-box-grey .remark-inline-code,
.content-box-army .remark-inline-code,
.content-box-green .remark-inline-code,
.content-box-purple .remark-inline-code,
.content-box-orange .remark-inline-code,
.content-box-red .remark-inline-code,
.content-box-yellow .remark-inline-code { 
  background: none;
}

.full-width {
    display: flex;
    width: 100%;
    flex: 1 1 auto;
}

.circleon img {
  border-radius: 50%;
  border-style: solid;
  border-width: 8px;
  border-color: #ff0000;
  width: 220px;
  height: 220px;
  margin: 10px;
  }

.circleoff img {
  border-radius: 50%;
  border-style: solid;
  border-width: 8px;
  border-color: #ff0000;
  opacity: 0.2;
  width: 230px;
  height: 230px;
  margin: 10px;
  }
  
.squareon img {
  border-radius: 50%;
  border-style: solid;
  border-width: 8px;
  border-color: #ff0000;
  width: 220px;
  height: 220px;
  margin: 10px;
  }

.squareoff img {
  border-radius: 50%;
  border-style: solid;
  border-width: 8px;
  border-color: #ff0000;
  opacity: 0.2;
  width: 230px;
  height: 230px;
  margin: 10px;
  }

/* Check out https://github.com/BBieri/Design_Misc for square logos */

/***********
 Changed CSS
 **************/

.opacity{ opacity: 0.5; }
.blur {
    -webkit-filter: blur(5px);
    -moz-filter: blur(10px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}
.grayscale img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

/**************
 * Fancy stuff
 **************/
.rotate-left {
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    transform: rotate(-2deg); 
}
.rotate-right {
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    transform: rotate(2deg);     
}

/********** 
 * Image stuff
 ************/
.polaroid img {
    border: 10px solid #fff;
    border-bottom: 45px solid #fff;
    -webkit-box-shadow: 3px 3px 3px #111;
    -moz-box-shadow: 3px 3px 3px #111;
    box-shadow: 3px 3px 3px #111;
}
.shadow {
    -moz-border-radius: 5px;
    -moz-box-shadow: 5px 5px 5px #aaa;
    -webkit-box-shadow: 5px 5px 5px #aaa;
    box-shadow: 5px 5px 5px #aaa;
    border-radius: 2px;  
}
.half-image img {
  width: 50%;
}


/* disable background colour when printing */

@page { margin: 0; }
@media print {
  .inverse, .segue, .segue-yellow, .segue-red, .sydney-blue,
  .sydney-yellow, .sydney-red {
    background-color: transparent;
    color: black;
    text-shadow: none;
  }
  .inverse h1, .inverse h2, .inverse h3, .inverse h4, .inverse h5, .segue {
    background-color: transparent;
    color: black;
    text-shadow: none;
  }
  .eg {
    background-color: transparent;
  }
  .remark-slide-scaler {
    width: 100% !important;
    height: 100% !important;
    transform: scale(1) !important;
    top: 0 !important;
    left: 0 !important;
  }
}

/* xaringan_columns CSS Styling*/

/*Optional: Color header boxes*/
.multicolhead {
    background-color:#4B9CD3;
    color: #FFFFFF;
}

.multicolcol {
  min-height: 1px;
}


/*~~~~~~~~~~~~~~~~*/
/* IHEID additions */
/*~~~~~~~~~~~~~~~~*/

/* Title slide */
/* Add image and change bg color
.title-slide {
  background-image: url(.svg), url("title-image.jpg");
  /* background-image: url(https://.svg); */
  /*
  background-position: 10% 90%, 100% 50%;
  background-size: 160px, 50% 100%;
  background-color: #e64626;
  /*padding-left: 100px;   delete this for 4:3 aspect ratio */
/*
}
*/
 
/* H1 fonts  */
.title-slide h1 {
  color: #ffffff;
  font-weight: normal;
  font-size: 45px;
  padding: 20px;
  text-align: left;
  vertical-align: middle;
  margin-bottom: 18px;
}

/* H2 fonts */
.title-slide h2 {
  color: black !important; /* first of type is master brand red */
  font-size: 35px;
  padding-left: 20px;
  padding-bottom: 10px;
  margin-top: 0;
  text-align: left;
  vertical-align: middle;
}

/* H3 fonts */
.title-slide h3 {
  font-size: 28px;
  font-weight: normal;
  color: black;
  padding-left: 20px;
  margin: 0;
  line-height: 1;
  text-align: left;
  vertical-align: middle;
}

/* Remove slide count */
.title-slide .remark-slide-number {
  display: none;
}

/* IHEID blockquote */
blockquote, .blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
.blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
.blockquote p {
  display: inline;
}

/* if wanted to change mathjax formatting
*/
.remark-inline-code .mjx-chtml {
  color: blue;
}

/* References: many customisations adapted from the examples here:
https://github.com/yihui/xaringan/tree/master/inst/rmarkdown/templates/xaringan/resources
*/
