@import url(https://fonts.googleapis.com/css?family=Fira+Sans:300,300i,400,400i,500,500i,700,700i);
@import url(https://cdn.rawgit.com/tonsky/FiraCode/1.204/distr/fira_code.css);

body {
  font-family: 'Fira Sans','Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
  text-align: justify;
}

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

.remark-code, .remark-inline-code {
  font-family: 'Fira Code', 'Lucida Console', Monaco, monospace;
  font-size: 90%;
}

.inverse {
  background-color: #122140;
}

/************************
 * 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%; }
.font300, .code300 .remark-code, .code300 .remark-inline-code{ font-size: 300%; }

.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: #005F60; }
.yellow { color: yellow; }
.orange { color: #DB7227; }
.purple { color: #702963; }
.gray { color: gray; }
.grey { color: gray; }

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








/*-- EXPERIMENTAL -----------------------------------------------------------*/

/*-- 3 column layout --*/
.left-col {
  width: 29%;
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
  float: left;
}

.center-col {
  width: 29%;
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
  float: left;
}

.right-col {
  width: 29%;
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
  float: left;
}

/* five-column layout */

/*.flex {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.column {
  float: left;
  width: 25%;
  text-align: center;
}*/

/*.columns { display: flex; }*/

.pull-left {
  padding-top: 0px;
}

.pull-left-narrow {
  float: left;
  width: 20%;
}

.pull-right-wide {
  float: right;
  width: 75%;
}

/* Clear floats after the columns */
.pull-right-wide + * { clear: both; }


.rotate {
  animation: rotation 60s infinite linear;
  background-image: url("img/city1.jpg");
  background-size: contain;
  top: 90px;
  right:   80px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  position: absolute
}


.city-360-top {
  top: -60%;
  left: 250px
}

.city-360-bottom {
  top: 60%;
  left: 250px
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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