/************************
 * Font size and colours
 ************************/

/*      LaTeX style       */
.Large       , .Large .remark-code, .Large .remark-inline-code { font-size: 144%; }
.large       , .large .remark-code, .large .remark-inline-code { font-size: 120%; }
.small       , .small .remark-code, .small .remark-inline-code { font-size: 90%; }
.footnotesize, .footnotesize .remark-code, .footnotesize .remark-inline-code { font-size: 80%; }
.scriptsize  , .scriptsize .remark-code, .scriptsize .remark-inline-code { font-size: 70%; }
.tiny        , .tiny .remark-code, .tiny .remark-inline-code { font-size: 60%; }

/* or you can be more specific */
.font10 , .code10 .remark-code, .code10 .remark-inline-code{ font-size: 10%; }
.font20 , .code20 .remark-code, .code20 .remark-inline-code{ font-size: 20%; }
.font30 , .code30 .remark-code, .code30 .remark-inline-code{ font-size: 30%; }
.font40 , .code40 .remark-code, .code40 .remark-inline-code{ font-size: 40%; }
.font50 , .code50 .remark-code, .code50 .remark-inline-code{ font-size: 50%; }
.font60 , .code60 .remark-code, .code60 .remark-inline-code{ font-size: 60%; }
.font70 , .code70 .remark-code, .code70 .remark-inline-code{ font-size: 70%; }
.font75 , .code75 .remark-code, .code75 .remark-inline-code{ font-size: 75%; }
.font80 , .code80 .remark-code, .code80 .remark-inline-code{ font-size: 80%; }
.font90 , .code90 .remark-code, .code90 .remark-inline-code{ font-size: 90%; }
.font100, .code100 .remark-code, .code100 .remark-inline-code{ font-size: 100%; }
.font110, .code110 .remark-code, .code110 .remark-inline-code{ font-size: 110%; }
.font120, .code120 .remark-code, .code120 .remark-inline-code{ font-size: 120%; }
.font130, .code130 .remark-code, .code130 .remark-inline-code{ font-size: 130%; }
.font140, .code140 .remark-code, .code140 .remark-inline-code{ font-size: 140%; }
.font150, .code150 .remark-code, .code150 .remark-inline-code{ font-size: 150%; }
.font160, .code160 .remark-code, .code160 .remark-inline-code{ font-size: 160%; }
.font170, .code170 .remark-code, .code170 .remark-inline-code{ font-size: 170%; }
.font175, .code175 .remark-code, .code175 .remark-inline-code{ font-size: 175%; }
.font180, .code180 .remark-code, .code180 .remark-inline-code{ font-size: 180%; }
.font190, .code190 .remark-code, .code190 .remark-inline-code{ font-size: 190%; }
.font200, .code200 .remark-code, .code200 .remark-inline-code{ font-size: 200%; }

.brand-red { color: #e64626; }
.brand-blue { color: #0148A4; }
.brand-yellow { color: #FFB800; }
.brand-charcoal {color: #424242; }
.brand-gray {color: #F1F1F1;}
.brand-grey {color: #F1F1F1;}
.black { color: black; }
.white { color: white; }
.red { color: red; }
.blue { color: blue; }
.green { color: green; }
.yellow { color: yellow; }
.orange { color: orange; }
.purple { color: purple; }
.gray { color: gray; }
.grey { color: gray; }

.bold { font-weight: bold; }
.bolder { font-weight: bolder; }



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

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


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

/***********
 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;
}


/* 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;
  }
}


/* USYD blockquote */
blockquote, .blockquote {
  display: block;
  margin-top: 0.1em;
  margin-bottom: 0.2em;
  margin-left: 5px;
  margin-right: 5px;
  border-left: solid 10px grey;
  border-top: solid 2px grey;
  border-bottom: solid 2px grey;
  border-right: solid 2px grey;
  box-shadow: 0 0 6px rgba(0,0,0,0.5);
  background-color: #e8e8f6;
  /* color: #e64626; */
  padding: 0.5em;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.blockquote p {
  margin-top: 0px;
  margin-bottom: 5px;
}
.blockquote > h1:first-of-type {
  margin-top: 0px;
  margin-bottom: 5px;
}
.blockquote > h2:first-of-type {
  margin-top: 0px;
  margin-bottom: 5px;
}
.blockquote > h3:first-of-type {
  margin-top: 0px;
  margin-bottom: 5px;
}
.blockquote > h4:first-of-type {
  margin-top: 0px;
  margin-bottom: 5px;
}

.text-shadow {
  text-shadow: 0 0 4px #424242;
}


.tip {
 background-image: url("https://emitanaka.org/slides/SIA2019/images/blub.png");
}

.tip.box {
  width:70%;
  display: table;
  margin: 0 auto;
  text-align: left;
}

.tip.font-65 {
  font-size: 0.65em;
}

.tip.font-70 {
  font-size: 0.7em;
}

.tip.font-80 {
  font-size: 0.8em;
}

.tip.font-90 {
  font-size: 0.9em;
}

.tip > ul li::before {
  color: #003F7F;
}

div.tool {
  background-color: #f3ecdd;
}

/* two column type */

.pull-left-30 {
  float: left;
  width: 29%;
}
.pull-right-70 {
  float: right;
  width: 69%;
}

.pull-left-35 {
  float: left;
  width: 34%;
}
.pull-right-65 {
  float: right;
  width: 64%;
}

.pull-left-40 {
  float: left;
  width: 39%;
}
.pull-right-60 {
  float: right;
  width: 59%;
}

.pull-left-45 {
  float: left;
  width: 44%;
}
.pull-right-55 {
  float: right;
  width: 54%;
}

.pull-left-50 {
  float: left;
  width: 49%;
}
.pull-right-50 {
  float: right;
  width: 49%;
}

.pull-left-55 {
  float: left;
  width: 54%;
}
.pull-right-45 {
  float: left;
  width: 44%;
}

.pull-left-60 {
  float: left;
  width: 59%;
}
.pull-right-40 {
  float: right;
  width: 39%;
}

.pull-left-65 {
  float: left;
  width: 64%;
}
.pull-right-35 {
  float: right;
  width: 34%;
}

.pull-left-70 {
  float: left;
  width: 69%;
}
.pull-right-30 {
  float: right;
  width: 29%;
}


/* copy from bling-rladies-theme.css */
/*************

   adjust

****************/

.hoverborder { }
.hoverborder:hover {
  border: 3px solid black;
   cursor: pointer;
}

.pad1 {
  padding: 1em!important;
}

.col_t1 {
  padding: 1em!important;
}

.margin1 {
  margin: 1em;
}

.shade_main  {
    background-color:rgba(86,36,87,0.7);
    color: white;
    width: 100%;
    padding: 0;
}

.boxshadow
{
  -moz-box-shadow: 3px 3px 5px #535353;
  -webkit-box-shadow: 3px 3px 5px #535353;
  box-shadow: 3px 3px 5px #535353;
}


.bgcolor_main {
  background-color: #6A1B9A;
  color: white;
}

.bgcolor_alert {
  background-color: #CF3C18!important;
  color: white;
}


.width100 {
  width:100%;
}

.nopadding {
  padding: 0!important;
}



.vmiddle {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
/*
  clip-path: polygon(2.5% 0,98.8% 0, 98.8% 100%, 2.5% 100%);
  vertical-align: middle;
  display: table-cell!important;
.vadd {
  display: table!important;
}
*/
}



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

.remark-visible .remark-slide-scaler {overflow-y: auto;}
.remark-code {font-size: 20px; line-height: 1.25;}

/* ul li { padding: 5px 0px; } */

.reverse .remark-code-line { font-weight: bold; }

/* .remark-slide-content .vmiddle h1 {margin-top: 0;} */

/*************

   code

****************/

pre {
  background-color: transparent ;
  border: 0 ;
  border-radius: 0 ;
  padding: 10px 0;
  font-family: monospace;
}

code { font-family: monospace; }
pre code { background-color: #fff; border-top: 5px solid #ddd; border-bottom: 5px solid #ddd; margin-top: 10px;}
h1 code { font-weight: 300; font-size: 1em !important; background-color: #eee; padding: 0px 5px; border-radius: 5px; }

.fullcode pre code {
  overflow-y: scroll;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 20px 20px !important;
}

.remark-code-line-highlighted {
  background-color: rgba(136, 57, 138, 0.3);
}

/*************

   font

****************/
/* fira-mono-regular - latin */
/* @font-face { */
  /* font-family: 'Fira Mono'; */
  /* font-style: normal; */
  /* font-weight: 400; */
  /* src: url('../fonts/fira-mono-v6-latin-regular.eot'); [> IE9 Compat Modes <] */
  /* src: local('Fira Mono Regular'), local('FiraMono-Regular'), */
       /* url('../fonts/fira-mono-v6-latin-regular.eot?#iefix') format('embedded-opentype'), [> IE6-IE8 <] */
       /* url('../fonts/fira-mono-v6-latin-regular.woff2') format('woff2'), [> Super Modern Browsers <] */
       /* url('../fonts/fira-mono-v6-latin-regular.woff') format('woff'), [> Modern Browsers <] */
       /* url('../fonts/fira-mono-v6-latin-regular.ttf') format('truetype'), [> Safari, Android, iOS <] */
       /* url('../fonts/fira-mono-v6-latin-regular.svg#FiraMono') format('svg'); [> Legacy iOS <] */
/* } */
/* [> caveat-brush-regular - latin <] */
/* @font-face { */
  /* font-family: 'Caveat Brush'; */
  /* font-style: normal; */
  /* font-weight: 400; */
  /* src: url('../fonts/caveat-brush-v3-latin-regular.eot'); [> IE9 Compat Modes <] */
  /* src: local('Caveat Brush'), local('CaveatBrush-Regular'), */
       /* url('../fonts/caveat-brush-v3-latin-regular.eot?#iefix') format('embedded-opentype'), [> IE6-IE8 <] */
       /* url('../fonts/caveat-brush-v3-latin-regular.woff2') format('woff2'), [> Super Modern Browsers <] */
       /* url('../fonts/caveat-brush-v3-latin-regular.woff') format('woff'), [> Modern Browsers <] */
       /* url('../fonts/caveat-brush-v3-latin-regular.ttf') format('truetype'), [> Safari, Android, iOS <] */
       /* url('../fonts/caveat-brush-v3-latin-regular.svg#CaveatBrush') format('svg'); [> Legacy iOS <] */
/* } */

/* @font-face { */
  /* font-family: 'Gloria Hallelujah'; */
  /* font-style: normal; */
  /* font-weight: 400; */
  /* src: url('../fonts/gloria-hallelujah-v9-latin-regular.eot'); [> IE9 Compat Modes <] */
  /* src: local('Gloria Hallelujah'), local('GloriaHallelujah'), */
       /* url('../fonts/gloria-hallelujah-v9-latin-regular.eot?#iefix') format('embedded-opentype'), [> IE6-IE8 <] */
       /* url('../fonts/gloria-hallelujah-v9-latin-regular.woff2') format('woff2'), [> Super Modern Browsers <] */
       /* url('../fonts/gloria-hallelujah-v9-latin-regular.woff') format('woff'), [> Modern Browsers <] */
       /* url('../fonts/gloria-hallelujah-v9-latin-regular.ttf') format('truetype'), [> Safari, Android, iOS <] */
       /* url('../fonts/gloria-hallelujah-v9-latin-regular.svg#GloriaHallelujah') format('svg'); [> Legacy iOS <] */
/* } */

/* [> fira-sans-regular - latin <] */
/* @font-face { */
  /* font-family: 'Fira Sans'; */
  /* font-style: normal; */
  /* font-weight: 400; */
  /* src: url('../fonts/fira-sans-v8-latin-regular.eot'); [> IE9 Compat Modes <] */
  /* src: local('Fira Sans Regular'), local('FiraSans-Regular'), */
       /* url('../fonts/fira-sans-v8-latin-regular.eot?#iefix') format('embedded-opentype'), [> IE6-IE8 <] */
       /* url('../fonts/fira-sans-v8-latin-regular.woff2') format('woff2'), [> Super Modern Browsers <] */
       /* url('../fonts/fira-sans-v8-latin-regular.woff') format('woff'), [> Modern Browsers <] */
       /* url('../fonts/fira-sans-v8-latin-regular.ttf') format('truetype'), [> Safari, Android, iOS <] */
       /* url('../fonts/fira-sans-v8-latin-regular.svg#FiraSans') format('svg'); [> Legacy iOS <] */
/* } */

/* body { */
  /* font-family: 'Caveat Brush'; */
/* } */

/* h1, h2, h3, h4 { */
    /* font-family: 'Caveat Brush'; */
    /* font-weight: 400; */
    /* margin-bottom: 0; */
    /* margin-top: 10px; */
/* } */
/* h1 { */
  /* font-family: 'Gloria Hallelujah'; */
  /* font-size: 3.5em; */
/* } */
/* h2 { font-size: 3em; } */
/* h3 { font-size: 1.6em; } */
/* h4 { font-size: 1em; } */

a {
    color: #ecadec;
    text-decoration: none;
}

/* .fira_font {font-family: "Fira Sans";} */

.remark-code,
.remark-inline-code {
	color: #FFD740;
  background-color: transparent;
}


.fonth2 {font-size: 3em;}
.fonth3 {font-size: 2.4em;}
.fonth4 {font-size: 2em;}
.fonth5 {font-size: 1.4em;}

/* h1 .fsize175 {font-size: 175px !important;} */
/* h1 .fsize150 {font-size: 150px !important;} */
/* h1 .fsize140 {font-size: 150px !important;} */
/* h1 .fsize125 {font-size: 125px !important;} */
/* h1 .fsize115 {font-size: 115px !important;} */
/* h1 .fsize105 {font-size: 105px !important;} */
/* h1 .fsize95 {font-size: 95px !important;} */
/* h1 .fsize85 {font-size: 85px !important;} */
/* h1 .fsize75 {font-size: 75px !important;} */


/*************

   color

****************/

.done-true {
  text-decoration: line-through;
  color: grey;
}

.fillblue   { fill: #41C8F0; }
.fillwhite  { fill: white; }

.pink100   { color: #F8BBD0; }
.red    { color: #FF4943; }
.gray   { color: #787878; }
.green  { color: #87A558; }
.blue   { color: #41C8F0; }
.white  { color: #FFFFFF; }
.black  { color: #000000 !important; }
.yellow {color: #FFD740;}
.bluelight {color: #B3E5FC;}
.purplelight {color: #ecadec;}
.dark1 {color: #B6B6B6;}
.or1 {color: #FFD740;}
/*************

   cover box

****************/
.fgtransparent h1 {
  color:rgba(255,255,255,0.8) !important;
  text-shadow: none;
}

.shade {
    padding: 0;
    background-color:rgba(0,0,0,0.7);
    color: white;
    width: 100%;
    padding: 1em 0;
}
.shadelight  {
    background-color:rgba(0,0,0,0.5);
    color: white;
    width: 100%;
    padding: 0;
}
.shadelightdark  {
    background-color:rgba(0,0,0,0.7);
    color: white;
    width: 100%;
    padding: 0;
}
.shadelightdark11  {
    background-color:rgba(86,87,87,0.7);
    color: white;
    width: 100%;
    padding: 0;
}
.shadelightdark1  {
    background-color:rgba(86,86,87,0.7);
    border-left: white solid 0.5em;
    color: white;
    width: 100%;
    padding: 0;
    -webkit-animation: slideInFromRight 3s ease;
    animation: slideInFromRight 3s ease;
}
.shadelightdark3  {
    background-color:rgba(86,36,87,0.7);
    border-right: white solid 0.5em;
    color: white;
    width: 100%;
    padding: 0;
    -webkit-animation: slideInFromLeft 3s ease ;
    animation: slideInFromLeft 3s ease ;
}
.shadelightblack  {
    background-color:rgba(0,0,0,0.7);
    color: white;
    width: 100%;
    padding: 0;
}
.shadewhite  {
    background-color:rgba(255,255,255,0.7);
    color: black;
    width: 100%;
    padding: 0;
}
.shadetrans  {
    background-color:rgba(255,255,255,0);
    color: black;
    width: 100%;
    padding: 0;
}

.boxtitle1 {
  padding:1em;
  text-align: left;
  border-right: white solid 0em;
}



.noborder {
  border-style: none !important;
}
.boxtitle2 {
  padding:1em;
  text-align: left;
  border-left: white solid 0.5em;
  border-right: white solid 0em;
  border-bottom: white solid 0.5em;
}

.boxtitle3 {
  padding:1em;
  text-align: center;
  /* -webkit-animation: slideInFromLeft 3s ease; */
  /* animation: slideInFromLeft 3s ease ; */
}
.boxtitle4 {
  padding:1em;
  text-align: left;
  border-bottom: #999 dashed 2px;
}
.add-left-border {
  border-left: rgba(86,36,87,1) solid 0.5em;
}

/*************

   figures

****************/
.fig img {
  width: 100%;
  padding: 0;
  margin: 0;
}
.fig90 img {
  width: 90% !important;
}
.fig95 img {
  width: 95% !important;
}
.noborder img {border:none !important;}

/*************

   overlay position

****************/
.align-left { text-align: left; }
.align-right { text-align: right;}
.right {
    float: right;
    padding-left: 1em;
}
.left {
    float: left;
    margin-right: 1em;
}

.pushdown { margin-top: 12em; }
.pushfront { z-index: 2; }
.pushfront3 { z-index: 3!important; }

.opacity5 { opacity: .5; }
.opacity7 { opacity: .7; }
.opacity10 { opacity: 1; }

.overlayc {
  opacity: 0.7;
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.overlay {
  position: absolute;
  z-index: 3;
  opacity: 0.8;
}

.pos-bl-1 {
  bottom: 0;
  left: -12%;
}
.pos-tr-1 {
  top: -40%;
  right: -12%;
}
.pos-tr-2 {
  top: -20%;
  right: -12%;
}

.pos-br-1 {
  bottom: 0;
  right: -12%;
}
.pos-br-2 {
  bottom: 5%;
  right: -12%;
}
.pos-tl-1 {
  top: -40%;
  left: -12%;
}
.pos-tl-2 {
  top: -20%;
  left: -12%;
}

.top_40 { top: 40% !important;}
.top_60 { top: 60% !important;}
.top_70 { top: 70% !important;}
.top_80 { top: 80% !important;}

.bottom_abs { position: absolute; bottom: 0; }
.top_abs    { position: absolute; top: 0; }

/*************

   size

****************/
.fullwidth, .fullwidth table {width: 100% !important;}
.fullheight {max-height: 100% !important;}

.remark-slide-content {padding: 0em; }

.size_300_200 {
  margin: 0px;
  width: 400px;
  height: 300px;
}
.size512 {
  margin: 0px;
  width: 512px;
  height: 512px;
}
.size800 {
  margin: 0px;
  width: 800px;
  height: 800px;
}

/*************

   split-column

****************/
.nosplit>div:first-of-type {width: 100%; height:100%; position: absolute; top: 10%; left: 0; }
/* .split-30>div:first-of-type {width: 30%; height:100%; position: absolute; top: 20%; left: 0; } */
/* .split-30>div:nth-of-type(3) {width: 30%;height:100%;position: absolute;top: 0;right: 0;} */
/* .split-30>div:nth-of-type(4) {width: 70%;height:100%;position: absolute;top: 0;right: 0;} */
/* .split-40>div:first-of-type {width: 40%; height:100%; position: absolute; top: 0; left: 0; } */
/* .split-40>div:nth-of-type(2) {width: 60%; height:100%; position: absolute; top: 0; right: 0;} */
/* .split-50>div:first-of-type {width: 50%; height:100%; position: absolute; top: 0; left: 0; } */
/* .split-50>div:nth-of-type(2) {width: 50%; height:100%; position: absolute; top: 0; right: 0;} */
/* .split-60>div:first-of-type {width: 60%; height:100%; position: absolute; top: 0; left: 0;} */
/* .split-60>div:nth-of-type(2) {width: 40%; height:100%; position: absolute; top: 0; right: 0;} */
/* .split-70>div:first-of-type {width: 70%; height:100%; position: absolute; top: 0; left: 0; } */
/* .split-70>div:nth-of-type(2) {width: 30%; height:100%; position: absolute; top: 0; right: 0;} */

.split-30>column_t1:first-of-type {width:30%;height:100%;position:absolute;top:0;right:0;}


.column_t1 {
  background-color: #800080;
  color: white;
}
.bkgpos_00 {
  background-position: 0 0;
  background-size: cover;
}
.column_wt {
  position: relative;
}
.column_wt:after {
  content: "";
  background-color: white;
  opacity: 0.7;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: 1;
}
.column_wt2 {
  position: relative;
}
.column_wt2:after {
  content: "";
  background-color: white;
  opacity: 0.85;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: 1;
}
.column_bt {
  position: relative;
  color: white;
}
.column_bt:after {
  content: "";
  background-color: black;
  opacity: 0.7;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: 1;
}
.column_bt2 {
  position: relative;
  color: white;
}
.column_bt2:after {
  content: "";
  background-color: black;
  opacity: 0.85;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: 1;
}
.column_t1t {
  position: relative;
  color: white;
}
.column_t1t:after {
  content: "";
  background-color: #2aa9df;
  opacity: 0.7;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: 1;
}

/*************

   table

****************/

.tabtype1 table {
  background: rgba(255, 255, 255, 0.12);
  border: 4px solid #eeeeee;
  margin: 0px auto;
  border-collapse:collapse;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }

.tabtype1 table td, .tabtype1 table th {
  border: 1px solid white;
  padding: 0.25em 1em;
  }

.tabtype1 table th {
  opacity: 1;
  background-color:#ff6600;
  vertical-align:middle;
}

.tabtype2 table {
  background: rgba(255, 255, 255, 0.12);
  border: 4px solid #eeeeee;
  margin: 0px auto;
  border-collapse:collapse;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }

.tabtype2 table td, .tabtype2 table th {
  border: 1px solid #eee;
  padding: 0.25em 1em;
  }

.tabtype2 table th {
  opacity: 1;
  background-color:#ff6600;
  vertical-align:middle;
}

/*************

   animation

****************/

.animateSlideInFromRight {
  /* -webkit-animation: slideInFromRight 3s ease; */
  /* animation: slideInFromRight 3s ease; */
  /* transform-origin: 0% 20%; */
}

.animateSlideR {
    text-align: center;
  -webkit-animation: rollingR 10s ease;
  animation: rollingR 10s ease;
}

.animateSlideTextR {
    text-align: center;
  -webkit-animation: rollingR 4s ease;
  animation: rollingTextR 4s ease;
}


@-webkit-keyframes rollingTextR {
  0% {
    transform: translateX(-100%) rotate(0);
  }
  70% {
    transform: translateX(100%) rotate(-10deg);
  }
  100% {
    transform: translateX(0%) rotate(-20deg);
  }
}

@keyframes rollingTextR {
  0% {
    transform: translateX(-100%) rotate(0);
  }
  70% {
    transform: translateX(100%) rotate(-10deg);
  }
  100% {
    transform: translateX(0%) rotate(-20deg);
  }
}


@-webkit-keyframes rollingR {
  0% {
    transform: translateX(-100%);
  }
  70% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes rollingR {
  0% {
    transform: translateX(-100%);
  }
  70% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}




@-webkit-keyframes slideInFromRight {
  0% {
    /* -webkit-clip-path: polygon(100% 0%,  100% 0%, 100% 100%, 100% 100%); */
    /* clip-path: polygon(100% 0%,  100% 0%, 100% 100%, 100% 100%); */
    /* width: 0%; */
    transform: translateX(100%);
  }
  100% {
    /* -webkit-clip-path: polygon(0% 0%,  100% 0%, 100% 100%, 0% 100%); */
    /* clip-path: polygon(0% 0%,  100% 0%, 100% 100%, 0% 100%); */
    /* width: 100%; */
  }
}

@keyframes slideInFromRight {
  0% {
    /* -webkit-clip-path: polygon(100% 0%,  100% 0%, 100% 100%, 100% 100%); */
    /* clip-path: polygon(100% 0%,  100% 0%, 100% 100%, 100% 100%); */
    /* width: 0%; */
    transform: translateX(100%);
  }
  100% {
    /* -webkit-clip-path: polygon(0% 0%,  100% 0%, 100% 100%, 0% 100%); */
    /* clip-path: polygon(0% 0%,  100% 0%, 100% 100%, 0% 100%); */
    /* width: 100%; */
  }
}

@-webkit-keyframes slideInFromLeft {
  0% {
    /* -webkit-clip-path: polygon(100% 0%,  100% 0%, 100% 100%, 100% 100%); */
    /* clip-path: polygon(100% 0%,  100% 0%, 100% 100%, 100% 100%); */
    /* width: 0%; */
    transform: translateX(100%);
  }
  100% {
    /* -webkit-clip-path: polygon(0% 0%,  100% 0%, 100% 100%, 0% 100%); */
    /* clip-path: polygon(0% 0%,  100% 0%, 100% 100%, 0% 100%); */
    /* width: 100%; */
  }
}

@keyframes slideInFromLeft {
  0% {
    /* -webkit-clip-path: polygon(0% 0%,  0% 0%, 0% 100%, 0% 100%); */
    /* clip-path: polygon(0% 0%,  0% 0%, 0% 100%, 0% 100%); */
    /* width: 0%; */
    transform: translateX(-100%);
  }
  100% {
    /* -webkit-clip-path: polygon(0% 0%,  100% 0%, 100% 100%, 0% 100%); */
    /* clip-path: polygon(0% 0%,  100% 0%, 100% 100%, 0% 100%); */
    /* width: 100%; */
  }
}

/*************

   print

****************/



/*************

   speech bubbles

****************/

.speech-bubble {
  width: 300px;
  margin: 10px;
  border-radius: 15px;
  background: #8E24AA;
  color: #fff;
  padding: 10px;
  font-family: 'Fira Sans';
  font-size: 18pt;
  text-align: center;
  font-weight: 300;
  position: relative;
}

.speech-right:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 15px solid #8E24AA;
  border-right: 15px solid transparent;
  border-top: 15px solid #8E24AA;
  border-bottom: 15px solid transparent;
  right: -16px;
  top: 0px;
}


.speech-left:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 15px solid transparent;
  border-right: 15px solid #8E24AA;
  border-top: 15px solid #8E24AA;
  border-bottom: 15px solid transparent;
  left: -16px;
  top: 0px;
}


.dot {
  font-family: 'Fira Sans';
  font-weight: bold;
  height: 25px;
  width: 25px;
  background-color: gray;
  color: white;
  border-radius: 50%;
  text-align:center;
  display: inline-block;
  padding: 5px;
}

.dot-large {
  font-family: 'Fira Sans';
  font-weight: bold;
  height: 42px;
  width: 42px;
  background-color: gray;
  border-radius: 50%;
  color: white;
  text-align:center;
  display: inline-block;
  padding: 5px;
}


/*****


****/

.stamp {
  position: relative;
   z-index: 100;
}
.stamp:after {
  border: solid 0.1em #d00;
  font-size: 200px;
  border-radius: .2em;
  color: #d00;
  content: 'FAIL';
  font-weight: bold;
  line-height: 1;
  opacity: 0;
  position: absolute;
  padding: .1em .5em;
  margin: 0 auto;
  top: 10%;
  left: 10%;
  text-transform: uppercase;
  opacity: 0;
  transform-origin: 50% 50%;
  transform: rotate(-2deg) scale(5);
  -webkit-animation-name: pulse2;
  animation-name: pulse2;
  animation-delay:2.5s;
  -webkit-animation-delay:2.5s;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  opacity: 0;
  -webkit-animation-fill-mode:forwards;
   animation-fill-mode:forwards;
   z-index: 100;
}

.good {
    border: solid;
    border-color: black;
    position: absolute;
    font-size: 36px;
    padding: 4px;
    background-color: white;
    color: black;
    transform:rotate(-10deg);
}


@-webkit-keyframes pulse2{
  0%{
    opacity: 0;
  }
  10%{
    opacity:.50;
    transform-origin: 50% 50%;
    transform: rotate(-2deg) scale(5);
    transition: all .3s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  100%{
    opacity:1;
    transform: rotate(-15deg) scale(1);
  }
}

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    width: 120pt;
    font-size: 20pt;
    opacity: 0.5;
}

.button:hover {
  border: solid;
  border-color: black;
  opacity: 1;
}

.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */

.great{
    border:solid;
    border-color:black;
    position:absolute;
    top:80%;
    left:45%;
    font-size:36px;
    padding:4px;
    background-color:white;
    color:black;
    transform:rotate(-20deg);"
    }