h6{

  margin: 8px;

}



h5{

  font-weight: bold;

  margin-bottom: 20px;

}



#samplerInfo{

  text-align: center;

  margin: 6px;

  padding: 24px;

  border-top: 1px solid #BBB;

  border-bottom: 1px solid #BBB;

}



#samplerInfo a{

  display: inline-block;

}



@font-face {

  font-family: 'gidoleregular';

  src: url('fonts/gidole/gidole-regular-webfont.woff2') format('woff2'),

    url('fonts/gidole/gidole-regular-webfont.woff') format('woff');

  font-weight: normal;

  font-style: normal;

}



* {

  margin: 0;

  padding: 0;

}



body, html {

  margin-top: 20px;

  height: 100%;

  font-family: 'gidoleregular', Arial, sans-serif;

  font-weight: normal;

  font-style: normal;

  font-size: 16px;

}



video{

  display: block;

  width: 100% !important;

  height: auto !important;

}



video::-webkit-media-controls-volume-slider {

display:none;

}



video::-webkit-media-controls-mute-button {

display:none;

}



/* NAVIAGTION */



#navbar .dropdown-menu {

  background-color: inherit;

  border: none;

}



#navbar .dropdown-item {

  background-color: inherit;

  color: #aaa;

}



#navbar .dropdown-item:hover {

  color: #f4f4f4;

}



.navbar-brand img {

  max-height: 50px;

}



/* --------- */

#showcase {

  background-image: url('images/showcase.jpg');

  display: flex;

  height: 100%;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  color: #fff;

  font-size: 32px;

  padding: 0 20px;

}



#showcase h1 {

  font-size: 64px;

  font-weight: bold;

}



#showcase .button {

  font-size: 32px;

  text-decoration: none;

  color: #fff;

  border: #fff 1px solid;

  padding: 10px 20px;

  border-radius: 10px;

  margin-top: 20px;

  width: 420px;

}



#showcase .button:hover {

  background: #fff;

  color: #000;

}



.pimg1, .pimg2, .pimg3, .pimg4, .pimg5, .pimg6, #showcase {

  position: relative;

  opacity: 0.70;

  background-position: center;

  background-size: cover;

  background-repeat: no-repeat;

  background-attachment: scroll;

}



.pimg1 {

  background-image: url('images/overview1.jpg');

  min-height: 400px;

}



.pimg2 {

  background-image: url('images/overview2.jpg');

  min-height: 400px;

}



.pimg3 {

  background-image: url('images/overview3.jpg');

  min-height: 400px;

}



.pimg4 {

  background-image: url('images/overview4.jpg');

  min-height: 400px;

}



.pimg5 {

  background-image: url('images/overview5.jpg');

  min-height: 400px;

}



.pimg6 {

  background-image: url('images/overview6.jpg');

  min-height: 400px;

}



.section {

  text-align: center;

  padding: 50px 80px;

}



.section span{

  color: #32cd32;

}



.section li{

  list-style: none;

  color: #777;

}



.section a{

  text-decoration: none;

  color: #777;

  /* font-weight: bold; */

}



.section a:hover{

  color: #fff;

}



.section-light {

  background-color: #f4f4f4;

  color: #666;

}



.section-dark {

  background-color: #282e34;

  color: #ddd;

}



.box-pm {

  border-top: #ddd 1px solid;

  padding-top: 20px;

}



.ptext {

  position: absolute;

  top: 40%;

  width: 100%;

  text-align: center;

  color: #fff;

  font-size: 48px;

  letter-spacing: 8px;

  text-transform: uppercase;

  font-size: 80px;

  font-weight: bold;

}



.pimg6 .ptext .border {

  background-color: #111;

  color: #fff;

  padding: 20px;

  font-size: 32px;

}



.pimg6 .ptext a {

  text-decoration: none;

}



.pimg6 .ptext a:hover {

  background-color: #fff;

  color: #111;

}



.resources a {

  color: #428bca;

  text-decoration: none;

}



.resources a:hover {

  color: #777;

}



.page-header {

  margin: 26px auto;

  font-size: 3em;

  text-align: center;

  padding-top: 50px;

}



.sub-header {

  font-size: 32px;

  font-weight: bold;

  padding-top: 10px;

  padding-bottom: 10px;

  border-top: 5px solid #eee;

  border-bottom: 5px solid #eee;

  text-align: center;

}



.main {

  padding-left: 0px;

  width: 100%;

}



.main ul {

  list-style: none;

}



.lesson p {

  text-align: center;

}



.lesson a {

  color: #428bca;

  text-decoration: none;

}



.lesson a:hover {

  color: #777;

}



/* .lessonNav h2{

  margin:auto;

  max-width: 70%;

} */

.lessonNav {

  display: none;

  text-align: center;

}



.lessonNav>ul {

  padding-top: 50px;

  margin: auto;

}



.lessonNav>ul>li {

  width: 300px;

  margin: auto;

}



.lessonNav>ul>li>a {

  color: #777;

}



.lessonNav>ul>li>a:hover {

  color: #428bca;

}



.lesson p{

  max-width: 70%;

  margin: auto;

}



.step {

  padding-top: 20px;

  margin: auto;

  max-width: 70%;

}



pre>ol{

  margin-left: 50px;

}



.prettyprint ol.linenums > li {

  list-style-type: decimal;

  padding: 0;

  background-color: #fff;

}



.step ul p{

  margin: 0;

  padding: 50px 0 ;

}



.lesson li>p{

  text-align: left;

}



.step ul>li {

  padding: 50px 0;

}



.step ol>li {

  padding: 20px 0;

}



.step img {

  max-width: 100%;

}



.resp-container{

  width: 70%;

}



.lesson .table {

  font-size: 16px;

}



table {

  max-width: 90%;

}



th {

  background-color: #428bca;

}



tr:nth-child(even) {

  background-color: #daeef7;

}



.two-columns {

  margin-top: 40px;

  display: flex;

  flex-direction: row;

}



.two-columns .column-one {

  display: none;

  border-right: #ddd 1px solid;

  padding-right: 30px;

  max-width: 500px;

}



.two-columns .column-two {

  margin-left: 30px;

  align-self: center;

}



textarea {

  position: absolute;

  left: -100%;

}



.codetooltip {

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  text-align: center;

  width: 40%;

  margin: auto;

}



.codetooltip button{

  font-size: 32px;

  text-decoration: none;

  color: #fff;

  border: #fff 1px solid;

  padding: 10px 20px;

  border-radius: 10px;

  width: 300px;

  background-color: #000;

}



.codetooltip button:hover{

  background-color: #888;

  color: #000;

  cursor: pointer;

}



.codetooltip .codetooltiptext {

  visibility: hidden;

  width: 140px;

  background-color: #555;

  color: #fff;

  text-align: center;

  border-radius: 6px;

  padding: 5px;

  position: absolute;

  z-index: 1;

  bottom: 150%;

  left: 50%;

  margin-left: -75px;

  opacity: 0;

  transition: opacity 0.3s;

}



.codetooltip .codetooltiptext::after {

  content: "";

  position: absolute;

  top: 100%;

  left: 50%;

  margin-left: -5px;

  border-width: 5px;

  border-style: solid;

  border-color: #555 transparent transparent transparent;

}



.codetooltip:hover .codetooltiptext {

  visibility: visible;

  opacity: 1;

}



.sample-images{

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  grid-gap: 10px;

  justify-content: center;

}



.img-thumbnail{

}



.sample-image{

  text-align: center;

  max-width:600px;

}



.exploreGames{

  text-align: center;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

}



.exploreGames-img{

  margin: auto;

  padding: 50px;

}



.lesson-info{

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  grid-gap: 10px;

  justify-content:space-between;

  font-size: 14px;

}



.lesson-info-part1{

  justify-self: start;

}

.lesson-info-part2{

  justify-self: end;

}



.explore-games{

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  grid-gap: 50px;

  justify-content:center;

  font-size: 14px;

  margin-top: 50px;

}



.explore-games-part1{

  justify-self: center;

  align-self: center;

  text-align: center;

}

.explore-games-part2{

  justify-self: left;

  align-self: center;

}



@-moz-document url-prefix() {

  fieldset {

    display: table-cell;

  }

}



@media(max-height: 850px){

  .fixed-top .navbar-collapse {

		min-height: calc(100vh - 56px);

		max-height: calc(100vh - 56px);

		overflow-y: auto;

	}

  #showcase{

    padding-top: 100px;

    padding-bottom: 100px;

    font-size: 21px;

  }



  #showcase h1{

    font-size: 2em;

  }

}



/*

 * MEDIA QUERY FOR SCREEN SIZES 768PX+ (IPAD SCREEN AND BIGGER)

 */

@media (min-width: 769px) {



  body, html {

    font-size: 24px;

  }



  .lesson-info{

    font-size: 21px;

  }



  .explore-games{

    font-size: 24px;

  }



  .pimg1, .pimg2, .pimg3, .pimg4, .pimg5, .pimg6, #showcase {

    background-attachment: fixed;

  }



  .pimg6 .ptext .border{

      font-size: 64px;

  }



  .page-header {

    font-size: 5em;

  }



  .section {

    display: flex;

    justify-content: center;

  }



  .box-am {

    border-right: #ddd 1px solid;

    padding-right: 30px;

  }



  .box-pm {

    border: none;

    padding-left: 30px;

    padding-top: 0;

  }



  .box-am, .box-pm {

    max-width: 600px;

  }



  .full {

    width: 100%;

  }



  .lesson {

    margin-right: 290px;

  }



  .lessonNav {

    position: fixed;

    top: 80px;

    bottom: 0;

    right: 0;

    z-index: 1000;

    display: block;

    overflow-x: hidden;

    overflow-y: auto;

    border-left: 6px solid #428bca;

    border-right: 1px solid #eee;

    width: 250px;

    padding-left: 10px;

    text-align: left;

  }



  .lessonNav>ul {

    max-width: 100%;

  }



  .lesson .table {

    font-size: 24px;

  }



  .step {

    max-width: 70%;

  }



  .tutorial-part {

    margin-top: 40px;

    display: flex;

    justify-content: center;

  }



  .tutorial-part>li {

    border-right: #ddd 1px solid;

    padding-right: 30px;

    padding-top: 50px;

    max-width: 500px;

  }



  .tutorial-part>img {

    border: #ddd 5px solid;

    border-radius: 50px;

    margin-left: 30px;

    max-width: 200px;

    align-self: center;

  }



  .two-columns .column-one {

    display: block;

  }



  .sample-images{

    grid-template-columns: repeat(3, 1fr);

  }

}



/* END OF MEDIA QUERY */