@charset "utf-8";

/* Document Styles  */
#copyright-index{
    position:absolute;
    top: 930px;
    height: auto;
    width:100%;
    text-align:center;
  	margin-left: auto;
    margin-right: auto;
  	color:#0000FF;
  	background-color:#ccccff;
    z-index: 500;
  }
  #copyright{
      position:absolute;
      height: auto;
      width:100%;
      text-align:center;
    	margin-left: auto;
      margin-right: auto;
    	color:#0000FF;
    	background-color:#ccccff;
      z-index: 500;
    }
/* Class styles */
.img-horiz{
  position: relative;
  width: auto;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
  .img-bg {
    position: absolute;
    width: 100%;
    height: auto;
    top: 0px;
    left: 0px;
    right: 0px;
    border: 0px solid #000000;
  }
  .img1 {
    position: absolute;
    top: 10px;
    left: 2%;
    border: 1px solid #000000;
    z-index: 500;
  }
  .img2 {
    position: absolute;
    top: 180px;
    left: 21%;
    border: 1px solid #000000;
    z-index: 500;
  }
  .img3 {
    position: absolute;
    top: 350px;
    left: 40%;
    border: 1px solid #000000;
    z-index: 500;
  }
/* BUTTON styles */
.btn-toc-tct {
  position:absolute;
  top:330px;
  left: 11%;
  border-radius: 1.5em; border-color:#90C;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-size: .75em;
  padding: 1em 1em 1em 1em;
  width: 8em;
  cursor: pointer;
  background-color: #ccccff;
  text-align: center;
  z-index: 1000;
  }
.btn-toc-tct:hover  {
  background-color: #0f0;
  }
.btn-toc-tsol-1 {
  position:absolute;
  top:500px;
  left: 30%;
  border-radius: 2em; border-color:#90C;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-size: .75em;
  padding: 1em 1em 1em 1em;
  width: 8em;
  cursor: pointer;
  background-color: #ccccff;
  text-align: center;
  z-index: 1000;
  }
.btn-toc-tsol-1:hover  {
  background-color: #0f0;
  }
.btn-toc-tsol-2 {
  position:absolute;
  top: 670px;
  left: 49%;
  border-radius: 2em; border-color:#90C;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-size: .75em;
  padding: 1em 1em 1em 1em;
  width: 8em;
  cursor: pointer;
  background-color: #ccccff;
  text-align: center;
  z-index: 1000;
  }
.btn-toc-tsol-2:hover  {
  background-color: #0f0;
  }
.btn-amaz {
  position: absolute;
  top: 5%;
  left: 85%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-size: .75em;
	text-decoration: none;
  padding: 1em 1em;
  width:8em;
  cursor:pointer;
  background-color: #ccccff;
  border-radius: 2em; border-color:#90C;
  text-align: center;
  z-index: 1000;
}
.btn-amaz:hover {
background-color: #0f0;
}
.btn-description {
  position: absolute;
  top: 15%;
  left: 85%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-size: .75em;
	text-decoration: none;
  padding: 1em 1em;
  width:8em;
  cursor:pointer;
  background-color: #ccccff;
  border-radius: 2em; border-color:#90C;
  text-align: center;
  z-index: 1000;
}
.btn-description:hover {
background-color: #0f0;
}
.btn-toc {
  position: absolute;
  top: 25%;
  left: 85%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-size: .75em;
	text-decoration: none;
  padding: 1em 1em;
  width:8em;
  cursor:pointer;
  background-color: #ccccff;
  border-radius: 2em; border-color:#90C;
  text-align: center;
  z-index: 1000;
}
.btn-toc:hover {
background-color: #0f0;
}
.btn-sample {
  position: absolute;
  top: 35%;
  left: 85%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-size: .75em;
	text-decoration: none;
  padding: 1em 1em;
  width:8em;
  cursor:pointer;
  background-color: #ccccff;
  border-radius: 2em; border-color:#90C;
  text-align: center;
  z-index: 1000;
}
.btn-sample:hover {
background-color: #0f0;
}
.btn-intro {
  position: absolute;
  top: 45%;
  left: 85%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-size: .75em;
	text-decoration: none;
  padding: 1em 1em;
  width:8em;
  cursor:pointer;
  background-color: #ccccff;
  border-radius: 2em; border-color:#90C;
  text-align: center;
  z-index: 1000;
}
.btn-intro:hover {
background-color: #0f0;
}
.btn-blog {
  position: absolute;
  top: 55%;
  left: 85%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-size: .75em;
	text-decoration: none;
  padding: 1em 1em;
  width:8em;
  cursor:pointer;
  background-color: #ccccff;
  border-radius: 2em; border-color:#90C;
  text-align: center;
  z-index: 1000;
}
.btn-blog:hover {
background-color: #0f0;
}
.btn-udemy {
  position: absolute;
  top: 65%;
  left: 85%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-size: .75em;
	text-decoration: none;
  padding: 1em 1em;
  width:8em;
  cursor:pointer;
  background-color: #ccccff;
  border-radius: 2em; border-color:#90C;
  text-align: center;
  z-index: 1000;
}
.btn-udemy:hover {
background-color: #0f0;
}