@font-face {
    font-family: 'HKGrotesk SemiBold';
    src: url(types/HKGrotesk/WEB/HKGrotesk-SemiBold.woff);
}/* Alfredo Marco Pradil (hello@hanken.co), with Reserved Font Name HK Grotesk. http://scripts.sil.org/OFL*/

@font-face {font-family:'VT323';
src:url("https://fonts.googleapis.com/css?family=Lato|VT323")}

/* code {
src:url(scripts/packery.pkgd.js);
src:url(scripts/packery.pkgd.min.js);
src: url("https://code.jquery.com/jquery-3.1.1.min.js");} */

body {
  background-image: url(img/INDEX/BACKGROUND01.jpg);
	background-position: center;
	font-family:'VT323', 'Century Schoolbook', 'Courier New', serif, monospace;
	background-attachment: fixed;
  width: 100%;
}

li {
    margin-top: 3%;
    list-style:none;
    }

#draggable-nav {
  align-content:center;
  margin-bottom:10%;
  padding:1%;
  text-align: center;
  width: 12%;
  height:auto;
  min-width: inherit;
  cursor:move;
  font-family:'VT323', 'Century Schoolbook', 'Courier New', serif, monospace;
  font-size:120%;
  position:fixed;
  background-color:#41f3d4;
  }

.navbar navbar-default{
  margin-top:1%;
}

.license {
      /*width: inherit;*/
      font-family:'HKGrotesk SemiBold', 'Helvetica Neue SemiBold', 'Hevetica Neue', 'Helvetica SemiBold', 'Helvetica', 'Arial SemiBold', 'Arial', 'OpenSans', sans-serif;
      font-size:40%;
    }

.grid {
    width:83%;
    position: relative;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 16%;
    margin-right: 1%;
    }

.rotate90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.rotate270 {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}


p {
  font-family:'HKGrotesk SemiBold', 'Helvetica Neue SemiBold', 'Hevetica Neue', 'Helvetica SemiBold', 'Helvetica', 'Arial SemiBold', 'Arial', 'OpenSans', sans-serif;
  background-color:#cbf3ec;
  font-size:100%;
   /* text-transform:lowercase; */
  padding-left:10px;
  padding-right:10px;
  padding-bottom:10px;
  padding-top:10px;
  }

h1 {
  float:left;
  background-color:#41f3d4;
  font-size:200%;
  font-family:'VT323', 'Century Schoolbook', 'Courier New Bold', 'Courier New SemiBold', 'Courier Bold', 'Courier SemiBold', 'Times Bold', 'Times SemiBold', serif, monospace;
  text-transform: uppercase;
  padding-left:10px;
  padding-right:10px;}

h2 {
  background-color:#41f3d4;
  font-size:175%;
  font-family:'VT323', 'Century Schoolbook', 'Courier New Bold', serif, monospace;
  text-transform:uppercase;
  padding-left:10px;
  padding-right:10px;}

h3
  {
  background-color:#41f3d4;
  font-size:140%;
  font-family:'VT323', 'Century Schoolbook', 'Courier New Bold', serif, monospace;
  text-transform: uppercase;
  padding-left:10px;
  padding-right:10px;}

h4
  {
  background-color:#41f3d4;
  font-size:125%;
  font-family:'VT323', 'Century Schoolbook', 'Courier New Bold', serif, monospace;
  text-transform: uppercase;
  padding-left:10px;
  padding-right:10px;}

img {
  max-width:90%;
  margin-left:15%;
  margin-right:15%;
  width: 70%;
  margin-top:2%;
  margin-bottom:2%;
}

/* .twoimg {
align-content: center;
align-self: center;
background-color:#cbf3ec;
}*/

pre {
border: solid;
border-width: medium;
border-color: #41f3d4;
background-color: #cbf3ec;
margin: 0 auto;
padding:2%;
width: inherit;
}

iframe {
  margin-top:10px;
  margin-bottom:10px;
  margin-left:10%;
  margin-right:10%;
  width:80%;
}

video {
  margin-top:10px;
  margin-bottom:10px;
  margin-left:10%;
  margin-right:10%;
  width:80%;
}

blockquote {
  margin: 4%;
  padding:2%;
  background-color: #81f1b8;
  font-size:110%;
  font-family:'HKGrotesk SemiBold', 'Helvetica Neue SemiBold', 'Hevetica Neue', 'Helvetica SemiBold', 'Helvetica', 'Arial SemiBold', 'Arial', 'OpenSans', sans-serif;
  font-weight: bold;
}

/*.grid-item {
float:left;
position:absolute;
width:30%;
padding-right:5%;
}

.grid-item-2 {
float:left;
position:absolute;
width:30%;
padding-right:5%;
}

.grid-item-3 {
float:left;
cursor:move;
position:absolute;
width:30%;
}
*/

/* grid container just for index.html*/

.grid-container {
  display: inline-grid;
  width: 100%;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto auto auto auto auto auto;
  grid-auto-flow: row;
  grid-gap: 15px;
}

.grid-container > div {
  background-color: #cbf3ec;
  text-align: center;
  padding: 10px;
  font-size: 75%;
  font-family:'HKGrotesk SemiBold', 'Helvetica Neue SemiBold', 'Hevetica Neue', 'Helvetica SemiBold', 'Helvetica', 'Arial SemiBold', 'Arial', 'OpenSans', sans-serif;
}

.grid-container > img {
  width:120%;
}

  .intro

  .item0 {
    align-content: center;
    max-width: 120%;
  }
   .itemtext0 {
     width: 100%;
     overflow:auto;
     height: 200px;
   }

  .item1 {
    /* grid-column-start: 1;
    grid-column-end: 2; */
  }

  .item2 {
    /* grid-column-start: 2;
    grid-column-end: 3; */
  }

  .item3 {
    /* grid-column-start: 3;
    grid-column-end: 4; */
  }

  .item4 {
    /* grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;*/
  }

  .item5 {
    /* grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;*/
  }

  .item6 {
    /* grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;*/
  }

  .item7 {
    /* grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;*/
  }

  .item8 {
    /* grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;*/
  }

  .item9 {
    /* grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;*/
  }

  .item10 {
    /* grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 5;*/
  }

  .item11 {
    /* grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;*/
  }
  .item11 > img {
    width:200px;
    height: 200px;
  }
  .item12 {
    /* grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 5;*/
  }

  .item13 {
    /* grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 5;
    grid-row-end: 6;*/
  }

  .item14 {
    /* grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 5;
    grid-row-end: 6;*/
  }

  .item15 {
    /* grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 5;
    grid-row-end: 6;*/
  }

  .item16 {
    /* grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 6;
    grid-row-end: 7;*/
  }

  .item17 {
    /* grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 6;
    grid-row-end: 7;*/
  }

  .item18 {
    /* grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 6;
    grid-row-end: 7;*/
  }
  /* end grid container*/


#grid-week-title {width:100%;
position:absolute;
}

 #draggable {
cursor:move;
position: relative;
}
/*
#draggable2 {
cursor:move;
}
#draggable3 {
cursor:move;
}

#draggable4 {
cursor:move;
}
*/

#draggable-index1 {
font-size:150%;
cursor:move;
/*line-height:40px;*/
}

.draggable {
  cursor:move;
}

.trello-board-compact{
  width: 80%;
}
/* .sticker{
  width:20%;
  position:fixed;
} */