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

   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,36,87,0.7);
    color: white;
    width: 100%;
    padding: 0;
}
.shadelightdark1  {
    background-color:rgba(86,36,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: 0; left: 0; }
.split-30>div:first-of-type {width: 30%; height:100%; position: absolute; top: 0; left: 0; }
.split-30>div:nth-of-type(2) {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;}
.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: red;
  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: red;
  border-radius: 50%;
  text-align:center;
  display: inline-block;
  padding: 5px;
}


/*****

stamp

****/

.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;
}

@-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 */