/* Main stylesheet code4ct by Miguel Jacobs*/
/* Mobile First View */
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed");
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
@import url(header.css);
@import url(footer.css);
* {
  margin: 0;
  padding: 0;
  font-family: 'Roboto Condensed', Helvetica, Arial, Lucida, serif;
  transition: 0.5s; }

.lore_container {
  display: grid;
  height: 470px;
  position: relative;
  top: 80px;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding-bottom: 40px;
  overflow: hidden; }
  .lore_container .bg_wrapper {
    grid-column: 1/7;
    grid-row: 1/6;
    width: 100%;
    height: 100%; }
  .lore_container .slide {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: -1; }
    .lore_container .slide .img_one {
      width: 100%;
      height: 100%; }
  .lore_container h2 {
    letter-spacing: 2px;
    font-size: 1.4em;
    font-family: 'Roboto Condensed',Helvetica,Arial,Lucida,sans-serif; }
  .lore_container .lore {
    grid-column: 1/6;
    grid-row: 1/2;
    font-size: .9em;
    line-height: 1.7em;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    color: white;
    padding: 30px;
    background-color: rgba(0, 0, 0, 0.5); }
  .lore_container .btn {
    width: 150px;
    height: 50px;
    font-size: 1.45em;
    color: white;
    border-radius: 5px;
    margin: auto; }
  .lore_container .btn:hover {
    cursor: pointer; }
  .lore_container #sc_btn {
    grid-column: 3/4;
    grid-row: 2/3;
    margin: auto; }
    .lore_container #sc_btn .startCoding_btn {
      border: 2px #e38f84 solid;
      background-color: #e38f84; }
  .lore_container #au_btn {
    grid-column: 2/5;
    grid-row: 3/4;
    margin: auto; }
    .lore_container #au_btn .aboutUs_btn {
      border: 2px white solid;
      background-color: transparent; }

.size {
  width: 100%;
  height: 100%; }
  .size:hover {
    animation: animate .5s linear 1; }
@keyframes animate {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.5); }
  100% {
    transform: scale(1); } }
.whoWeAre_container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 1fr);
  height: 800px;
  position: relative;
  top: 80px; }
  .whoWeAre_container .whoWeAre_text {
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
    color: #515151;
    padding: 20px; }
    .whoWeAre_container .whoWeAre_text .first {
      border-bottom: 3px solid #e38f84; }
    .whoWeAre_container .whoWeAre_text .restOf {
      border-bottom: 3px solid #dadada; }
    .whoWeAre_container .whoWeAre_text h3 {
      padding: 10px; }
    .whoWeAre_container .whoWeAre_text h5 {
      padding: 5px;
      font-size: .9em; }
    .whoWeAre_container .whoWeAre_text p {
      padding: 15px 15px 30px 15px;
      font-size: .8em;
      line-height: 20px; }
    .whoWeAre_container .whoWeAre_text .btn {
      width: 150px;
      height: 50px;
      font-size: 1.45em;
      color: white;
      border-radius: 5px;
      margin: auto; }
    .whoWeAre_container .whoWeAre_text #rm_btn .readMore_btn {
      color: #515151;
      background-color: #999;
      border: none; }
    .whoWeAre_container .whoWeAre_text .btn:hover {
      cursor: pointer;
      width: 170px;
      animation: expand .3s linear 1; }
@keyframes expand {
  0% {
    position: static;
    transform: translate(0); }
  100% {
    position: static;
    transform: translate(20px); } }
  .whoWeAre_container .whoWeAre_images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    height: 400px;
    text-align: center;
    color: #515151;
    box-shadow: 0 0 5px black; }
    .whoWeAre_container .whoWeAre_images #image_1_div {
      grid-column: 1/2;
      grid-row: 1/2;
      height: 200px;
      overflow: hidden; }
    .whoWeAre_container .whoWeAre_images #image_2_div {
      grid-column: 2/3;
      grid-row: 1/2;
      height: 200px;
      overflow: hidden; }
    .whoWeAre_container .whoWeAre_images #image_3_div {
      grid-column: 1/2;
      grid-row: 2/3;
      height: 200px;
      overflow: hidden; }
    .whoWeAre_container .whoWeAre_images #image_4_div {
      grid-column: 2/3;
      grid-row: 2/3;
      height: 200px;
      overflow: hidden; }

.iconSection_container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(8, 1fr);
  height: 1500px;
  position: relative;
  top: 80px;
  background-color: black;
  padding: 10px 10px 50px 10px; }
  .iconSection_container .iconSection, .iconSection_container .iconSection_text {
    display: grid;
    width: 250px;
    text-align: center;
    color: white;
    font-size: .9em;
    padding: 10px 20px 10px 20px;
    line-height: 2em;
    font-size: .8em;
    margin: auto; }
    .iconSection_container .iconSection h3, .iconSection_container .iconSection_text h3 {
      height: 75px;
      font-size: 2em;
      font-weight: 100;
      letter-spacing: 2px;
      margin: 0; }
  .iconSection_container .screen {
    grid-column: 1/2;
    grid-row: 1/2;
    width: 250px; }
  .iconSection_container #screen_div {
    padding-top: 25px;
    height: 100px;
    width: 250px;
    margin: auto; }
    .iconSection_container #screen_div .icon {
      height: 100%;
      width: 40%; }
  .iconSection_container .screen_text {
    grid-column: 1/2;
    grid-row: 2/3; }
    .iconSection_container .screen_text p {
      padding: 0 40px;
      font-size: 1em;
      line-height: 1.7em; }
  .iconSection_container .speaker {
    grid-column: 1/2;
    grid-row: 3/4;
    width: 250px; }
  .iconSection_container #speaker_div {
    padding-top: 25px;
    height: 100px;
    width: 250px;
    margin: auto; }
    .iconSection_container #speaker_div .icon {
      height: 100%;
      width: 40%; }
  .iconSection_container .speaker_text {
    grid-column: 1/2;
    grid-row: 4/5; }
    .iconSection_container .speaker_text p {
      padding: 0 40px;
      font-size: 1em;
      line-height: 1.7em; }
  .iconSection_container .wrench {
    grid-column: 1/2;
    grid-row: 5/6;
    width: 250px; }
  .iconSection_container #wrench_div {
    padding-top: 25px;
    height: 100px;
    width: 250px;
    margin: auto; }
    .iconSection_container #wrench_div .icon {
      height: 100%;
      width: 40%; }
  .iconSection_container .wrench_text {
    grid-column: 1/2;
    grid-row: 6/7; }
    .iconSection_container .wrench_text p {
      padding: 0 40px;
      font-size: 1em;
      line-height: 1.7em; }
  .iconSection_container .document {
    grid-column: 1/2;
    grid-row: 7/8;
    width: 250px; }
  .iconSection_container #document_div {
    padding-top: 25px;
    height: 100px;
    width: 250px;
    margin: auto; }
    .iconSection_container #document_div .icon {
      height: 100%;
      width: 40%; }
  .iconSection_container .document_text {
    grid-column: 1/2;
    grid-row: 8/9; }
    .iconSection_container .document_text p {
      padding: 0 40px;
      font-size: 1em;
      line-height: 1.7em; }

.portfolioSection_container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  height: 750px;
  position: relative;
  top: 80px; }
  .portfolioSection_container .portfolioSection_text {
    grid-column: 1/3;
    grid-row: 1/2;
    text-align: center;
    padding: 0px 20px 20px 20px;
    display: grid;
    grid-template-columns: 1fr; }
    .portfolioSection_container .portfolioSection_text h3 {
      padding-top: 50px; }
    .portfolioSection_container .portfolioSection_text .first {
      border-bottom: 3px solid #e38f84; }
    .portfolioSection_container .portfolioSection_text .restOf {
      border-bottom: 3px solid #dadada; }
    .portfolioSection_container .portfolioSection_text p {
      padding: 20px 30px 0 30px;
      font-size: .8em;
      line-height: 20px; }
  .portfolioSection_container .portfolioSection_images {
    grid-column: 1/3;
    grid-row: 2/3;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    height: 100%; }
    .portfolioSection_container .portfolioSection_images #image_one {
      grid-column: 1/2;
      grid-row: 1/2;
      height: 150px;
      overflow: hidden; }
    .portfolioSection_container .portfolioSection_images #image_two {
      grid-column: 2/3;
      grid-row: 1/2;
      height: 150px;
      overflow: hidden; }
    .portfolioSection_container .portfolioSection_images #image_three {
      grid-column: 1/2;
      grid-row: 2/3;
      height: 150px;
      overflow: hidden; }
    .portfolioSection_container .portfolioSection_images #image_four {
      grid-column: 2/3;
      grid-row: 2/3;
      height: 150px;
      overflow: hidden; }
  .portfolioSection_container #image_large {
    grid-column: 1/3;
    grid-row: 3/4;
    height: 150px;
    overflow: hidden; }

.teamSection_container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(9, 1fr);
  height: 2750px;
  position: relative;
  top: 80px; }
  .teamSection_container .teamSection_text {
    grid-column: 1/2;
    grid-row: 1/2;
    text-align: center;
    padding: 40px 20px 20px 20px; }
    .teamSection_container .teamSection_text h3 {
      padding-bottom: 30px; }
    .teamSection_container .teamSection_text .first {
      border-bottom: 3px solid #e38f84; }
    .teamSection_container .teamSection_text .restOf {
      border-bottom: 3px solid #dadada; }
    .teamSection_container .teamSection_text p {
      padding: 10px 30px 0 30px;
      font-size: .9em;
      line-height: 20px; }
  .teamSection_container .photoOne {
    grid-column: 1/2;
    grid-row: 2/3;
    height: 250px;
    width: 250px;
    padding: 20px 30px;
    margin: auto; }
  .teamSection_container .team_img {
    width: 100%;
    height: 100%;
    border-radius: 50%; }
  .teamSection_container .infoOne {
    grid-column: 1/2;
    grid-row: 3/4;
    padding: 10px;
    text-align: center; }
    .teamSection_container .infoOne hr {
      margin: auto;
      width: 30%; }
    .teamSection_container .infoOne:hover hr {
      margin: auto;
      width: 50%; }
    .teamSection_container .infoOne .teamMemberName {
      padding: 10px; }
    .teamSection_container .infoOne .teamMemberPosition {
      padding: 10px; }
    .teamSection_container .infoOne .teamMemberDetails {
      padding: 20px 70px 20px 70px;
      font-size: .75em;
      line-height: 1.8em; }
  .teamSection_container .photoTwo {
    grid-column: 1/2;
    grid-row: 4/5;
    height: 250px;
    width: 250px;
    padding: 20px 30px;
    margin: auto; }
  .teamSection_container .team_img {
    width: 100%;
    height: 100%;
    border-radius: 50%; }
  .teamSection_container .infoTwo {
    grid-column: 1/2;
    grid-row: 5/6;
    padding: 10px;
    text-align: center; }
    .teamSection_container .infoTwo hr {
      margin: auto;
      width: 30%; }
    .teamSection_container .infoTwo:hover hr {
      margin: auto;
      width: 50%; }
    .teamSection_container .infoTwo .teamMemberName {
      padding: 10px; }
    .teamSection_container .infoTwo .teamMemberPosition {
      padding: 10px; }
    .teamSection_container .infoTwo .teamMemberDetails {
      padding: 20px 70px 20px 70px;
      font-size: .75em;
      line-height: 1.8em; }
  .teamSection_container .photoThree {
    grid-column: 1/2;
    grid-row: 6/7;
    height: 250px;
    width: 250px;
    padding: 20px 30px;
    margin: auto; }
  .teamSection_container .team_img {
    width: 100%;
    height: 100%;
    border-radius: 50%; }
  .teamSection_container .infoThree {
    grid-column: 1/2;
    grid-row: 7/8;
    padding: 10px;
    text-align: center; }
    .teamSection_container .infoThree hr {
      margin: auto;
      width: 30%; }
    .teamSection_container .infoThree:hover hr {
      margin: auto;
      width: 50%; }
    .teamSection_container .infoThree .teamMemberName {
      padding: 10px; }
    .teamSection_container .infoThree .teamMemberPosition {
      padding: 10px; }
    .teamSection_container .infoThree .teamMemberDetails {
      padding: 20px 70px 20px 70px;
      font-size: .75em;
      line-height: 1.8em; }
  .teamSection_container .photoFour {
    grid-column: 1/2;
    grid-row: 8/9;
    height: 250px;
    width: 250px;
    padding: 20px 30px;
    margin: auto; }
  .teamSection_container .team_img {
    width: 100%;
    height: 100%;
    border-radius: 50%; }
  .teamSection_container .infoFour {
    grid-column: 1/2;
    grid-row: 9/10;
    padding: 10px;
    text-align: center; }
    .teamSection_container .infoFour hr {
      margin: auto;
      width: 30%; }
    .teamSection_container .infoFour:hover hr {
      margin: auto;
      width: 50%; }
    .teamSection_container .infoFour .teamMemberName {
      padding: 10px; }
    .teamSection_container .infoFour .teamMemberPosition {
      padding: 10px; }
    .teamSection_container .infoFour .teamMemberDetails {
      padding: 20px 70px 20px 70px;
      font-size: .75em;
      line-height: 1.8em; }

.counter_container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, 1fr);
  position: relative;
  top: 80px;
  background-color: black;
  padding: 50px 0 20px 0; }
  .counter_container .counter {
    height: 400px;
    margin: auto;
    width: 120px;
    height: 70px;
    padding: 5px;
    color: white;
    text-align: center; }
    .counter_container .counter .p_top {
      width: 20px;
      padding-top: 10px;
      border-top: 3px solid #e38f84;
      font-weight: bold;
      font-size: 1.2em; }
    .counter_container .counter .p_style {
      padding-top: 10px;
      text-align: left;
      font-size: .8em; }
  .counter_container .coffees {
    grid-column: 1/2;
    grid-row: 1/2; }
  .counter_container .girls {
    grid-column: 1/2;
    grid-row: 2/3; }
  .counter_container .projects {
    grid-column: 1/2;
    grid-row: 3/4; }
  .counter_container .hours {
    grid-column: 1/2;
    grid-row: 4/5; }

.subscribe_container {
  position: relative;
  top: 80px;
  padding: 50px 30px 40px 30px;
  text-align: center; }
  .subscribe_container h4 {
    padding: 20px;
    color: #595959; }
    .subscribe_container h4 span {
      color: #e38f84; }
  .subscribe_container p {
    padding: 10px 10px 30px 10px;
    font-size: .8em; }
  .subscribe_container form {
    padding: 20px; }
    .subscribe_container form input {
      height: 40px;
      width: 200px;
      border: none;
      border-radius: 4px;
      background-color: #e0dfdf; }
    .subscribe_container form ::placeholder {
      text-align: center; }
    .subscribe_container form span {
      padding: 20px; }
    .subscribe_container form button {
      height: 40px;
      width: 120px;
      color: white;
      background-color: #e38f84;
      border: none;
      border-radius: 5px;
      font-size: 1.3em; }
      .subscribe_container form button:hover {
        cursor: pointer; }

#backToTop {
  height: 40px;
  width: 40px;
  background-color: rgba(0, 0, 0, 0.3);
  border: 0.5px solid black;
  border-radius: 25px;
  box-shadow: 0 0 10px #e38f8450;
  z-index: 5;
  padding: 5px;
  display: none;
  bottom: 80px;
  right: 10px;
  position: fixed; }
  #backToTop:hover {
    cursor: pointer;
    background-color: #e38f8450; }
  #backToTop #toTop {
    width: 100%;
    height: 100%; }

/* ABOUT US PAGE STYLING */
.aboutUs_container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, 1fr);
  height: 1540px;
  position: relative;
  top: 80px;
  text-align: center;
  grid-column: 1/3; }
  .aboutUs_container .aboutUs {
    grid-column: 1/2;
    grid-row: 1/2;
    padding: 40px 20px 0 20px;
    height: 350px; }
    .aboutUs_container .aboutUs h3 {
      padding-bottom: 30px; }
    .aboutUs_container .aboutUs .first {
      border-bottom: 3px solid #e38f84; }
    .aboutUs_container .aboutUs .restOf {
      border-bottom: 3px solid #dadada; }
    .aboutUs_container .aboutUs p {
      padding: 10px 40px 40px 40px;
      font-size: .8em;
      line-height: 20px; }
    .aboutUs_container .aboutUs .btn {
      width: 150px;
      height: 50px;
      font-size: 1.45em;
      border-radius: 5px;
      margin: auto;
      border: 2px #e38f84 solid;
      background-color: #e38f84; }
    .aboutUs_container .aboutUs .ourServices_btn {
      color: white; }
  .aboutUs_container .about_image {
    grid-column: 1/2;
    grid-row: 2/3;
    height: 250px;
    width: 100%; }
    .aboutUs_container .about_image #image {
      height: 100%;
      width: 100%; }
  .aboutUs_container .about {
    grid-column: 1/2;
    grid-row: 3/4;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
    height: 600px;
    background-color: #e9e9e9;
    color: #595959; }
    .aboutUs_container .about .heading {
      grid-column: 1/3;
      grid-row: 1/2;
      padding: 40px; }
    .aboutUs_container .about .first {
      border-bottom: 3px solid #e38f84;
      padding-bottom: 15px; }
    .aboutUs_container .about .restOf {
      border-bottom: 3px solid #dadada;
      padding-bottom: 15px; }
    .aboutUs_container .about p {
      grid-column: 1/3;
      grid-row: 2/3;
      padding: 20px 20px 20px 20px;
      font-size: .8em;
      line-height: 20px; }
    .aboutUs_container .about .subHead {
      color: #ee534f;
      font-size: .8em;
      text-align: left;
      padding-left: 20px; }
    .aboutUs_container .about .paras {
      font-size: .7em;
      text-align: left; }
    .aboutUs_container .about .h_vision {
      grid-column: 1/2;
      grid-row: 3/4; }
    .aboutUs_container .about .p_vision {
      grid-column: 1/2;
      grid-row: 3/4; }
    .aboutUs_container .about .h_mission {
      grid-column: 2/3;
      grid-row: 3/4; }
    .aboutUs_container .about .p_mission {
      grid-column: 2/3;
      grid-row: 3/4; }
    .aboutUs_container .about .h_help {
      grid-column: 1/2;
      grid-row: 4/5; }
    .aboutUs_container .about .p_help {
      grid-column: 1/2;
      grid-row: 4/5; }
    .aboutUs_container .about .h_support {
      grid-column: 2/3;
      grid-row: 4/5; }
    .aboutUs_container .about .p_support {
      grid-column: 2/3;
      grid-row: 4/5; }
  .aboutUs_container .video {
    grid-column: 1/2;
    grid-row: 4/5;
    height: 300px;
    width: 95%;
    margin: auto; }
    .aboutUs_container .video #about_vid {
      height: 100%;
      width: 100%; }

.stats_container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, 1fr);
  height: 600px;
  position: relative;
  top: 80px;
  background-color: black;
  padding: 0 0 20px 0; }
  .stats_container .counter {
    height: 400px;
    margin: auto;
    width: 120px;
    height: 120px;
    padding: 5px;
    color: white;
    text-align: center; }
    .stats_container .counter .p_style {
      padding-top: 10px;
      font-size: .65em;
      color: #e38f84; }
  .stats_container .stats_one {
    grid-column: 1/2;
    grid-row: 1/2; }
  .stats_container .stats_two {
    grid-column: 1/2;
    grid-row: 2/3; }
  .stats_container .stats_three {
    grid-column: 1/2;
    grid-row: 3/4; }
  .stats_container .stats_four {
    grid-column: 1/2;
    grid-row: 4/5; }

/* COURSES PAGE STYLING */
.intro_coding_wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(20, 1fr);
  grid-gap: 10px;
  position: relative;
  top: 80px; }
  .intro_coding_wrapper strong {
    color: #e38f84; }
  .intro_coding_wrapper .icons {
    height: 100%;
    width: 100%;
    margin: auto;
    height: 100px;
    width: 150px; }
    .intro_coding_wrapper .icons img {
      width: 100%;
      margin: auto; }

.wrapper .courses {
  height: 400px;
  width: 300px;
  text-align: center;
  line-height: 1.7em;
  padding: 10px;
  box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.3);
  margin: auto; }
  .wrapper .courses .title {
    font-size: 1.7em;
    padding: 20px; }
  .wrapper .courses .brief {
    padding: 20px; }
  .wrapper .courses .price {
    padding-bottom: 20px; }
  .wrapper .courses .add {
    width: 100px;
    height: 50px;
    line-height: 50px;
    margin: auto;
    border-radius: 7px;
    border: 1px solid black; }
    .wrapper .courses .add:hover {
      cursor: pointer;
      background-color: #e38f84; }
.wrapper .desktop {
  grid-column: 1/2;
  grid-row: 1/2;
  margin: auto;
  height: 100px;
  width: 150px; }
  .wrapper .desktop img {
    height: 100%;
    width: 100%;
    margin: auto; }
.wrapper .intro_coding_web {
  grid-column: 1/2;
  grid-row: 2/3; }
.wrapper .create_with_web {
  grid-column: 1/2;
  grid-row: 3/4; }
.wrapper .getting_started_web {
  grid-column: 1/2;
  grid-row: 4/5; }
.wrapper .music {
  grid-column: 1/2;
  grid-row: 5/6;
  margin: auto;
  height: 100px;
  width: 150px; }
  .wrapper .music img {
    width: 100%;
    margin: auto; }
.wrapper .intro_coding_music {
  grid-column: 1/2;
  grid-row: 6/7; }
.wrapper .create_with_music {
  grid-column: 1/2;
  grid-row: 7/8; }
.wrapper .animation {
  grid-column: 1/2;
  grid-row: 8/9;
  margin: auto;
  height: 100px;
  width: 150px; }
  .wrapper .animation img {
    height: 100%;
    width: 100%;
    margin: auto; }
.wrapper .intro_coding_animation {
  grid-column: 1/2;
  grid-row: 9/10; }
.wrapper .create_with_animation {
  grid-column: 1/2;
  grid-row: 11/12; }
.wrapper .beginner_js {
  grid-column: 1/2;
  grid-row: 11/12;
  margin: auto;
  height: 100px;
  width: 150px; }
  .wrapper .beginner_js img {
    height: 100%;
    width: 100%;
    margin: auto; }
.wrapper .beginner_javascript {
  grid-column: 1/2;
  grid-row: 13/14; }
.wrapper .beginner_front {
  grid-column: 1/2;
  grid-row: 14/15;
  margin: auto;
  height: 100px;
  width: 150px; }
  .wrapper .beginner_front img {
    height: 100%;
    width: 100%;
    margin: auto; }
.wrapper .beginner_front_end {
  grid-column: 1/2;
  grid-row: 15/16; }
.wrapper .beginner_py {
  grid-column: 1/2;
  grid-row: 16/17;
  margin: auto;
  height: 100px;
  width: 150px; }
  .wrapper .beginner_py img {
    height: 100%;
    width: 100%;
    margin: auto; }
.wrapper .beginner_python {
  grid-column: 1/2;
  grid-row: 17/18; }
.wrapper .full_stack_js {
  grid-column: 1/2;
  grid-row: 16/17;
  margin: auto;
  height: 100px;
  width: 150px; }
  .wrapper .full_stack_js img {
    height: 100%;
    width: 100%;
    margin: auto; }
.wrapper .full_stack_javascript {
  grid-column: 1/2;
  grid-row: 17/18; }
.wrapper .web_deploy {
  grid-column: 1/2;
  grid-row: 18/19;
  margin: auto;
  height: 100px;
  width: 150px; }
  .wrapper .web_deploy img {
    height: 100%;
    width: 100%;
    margin: auto; }
.wrapper .web_deployment {
  grid-column: 1/2;
  grid-row: 19/20; }

.cart_icon {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  top: 200px;
  z-index: 3;
  background-color: rgba(255, 255, 255, 0.85);
  border: 1px solid #e38f84;
  border-radius: 30px 0 0 30px; }
  .cart_icon:hover {
    cursor: pointer; }
  .cart_icon img {
    position: absolute;
    top: 10px;
    right: 8px;
    width: 30px;
    height: 30px; }

.shopping_container {
  display: none;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  width: 89%;
  position: fixed;
  right: 0;
  top: 100px;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid black;
  border-radius: 10px 0 0 10px;
  margin: auto;
  z-index: 2; }
  .shopping_container h4 {
    grid-column: 1/2;
    grid-row: 1/2;
    text-align: center;
    padding: 50px 20px 50px 20px;
    font-size: 1.6em;
    color: #e38f84; }
  .shopping_container .courses {
    grid-column: 1/2;
    grid-row: auto;
    text-align: center; }
    .shopping_container .courses .course {
      padding: 50px; }
  .shopping_container .total_wrapper {
    grid-column: 1/2;
    grid-row: auto;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin: auto;
    border: 1px solid black;
    border-radius: 10px; }
    .shopping_container .total_wrapper .total {
      height: 50px;
      width: 150px;
      padding: 10px; }
  .shopping_container .btn {
    height: 50px;
    padding: 10px;
    margin: auto; }
    .shopping_container .btn .clear_btn {
      height: 50px;
      width: 100px;
      position: relative;
      color: #e38f84;
      background-color: transparent;
      border-radius: 7px;
      border: 1px solid #e38f84;
      z-index: 1; }
      .shopping_container .btn .clear_btn:hover {
        background-color: #e38f84;
        color: white;
        cursor: pointer; }

/* PORTFOLIO PAGE STYLING */
.pageTitle {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  height: 200px;
  background-color: rgba(190, 190, 190, 0.589);
  position: relative;
  top: 80px;
  text-align: center;
  color: #575757; }
  .pageTitle h3 {
    height: 30px;
    padding: 80px 50px 0 50px;
    font-size: 1.4em; }
  .pageTitle .center_link {
    float: left;
    padding-bottom: 70px;
    font-size: .8em; }
    .pageTitle .center_link a {
      text-decoration: none;
      color: #e38f84; }

.banner {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  position: relative;
  top: 80px;
  height: 100px; }
  .banner .heading {
    text-align: center;
    margin: auto; }
    .banner .heading h3 {
      padding-bottom: 30px; }
    .banner .heading .first {
      border-bottom: 3px solid #e38f84; }
    .banner .heading .restOf {
      border-bottom: 3px solid #dadada; }

.gallery_container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  border-radius: 50px;
  overflow: hidden;
  position: relative;
  top: 80px; }
  .gallery_container .slider {
    grid-column: 1/5;
    grid-row: 1/4;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr); }
    .gallery_container .slider .dir_btn {
      height: 100%;
      width: 50px;
      background-color: rgba(0, 0, 0, 0.4);
      margin: auto;
      z-index: 4;
      position: absolute;
      transition: 1s; }
      .gallery_container .slider .dir_btn img {
        width: 100%;
        height: 100%;
        margin: auto; }
      .gallery_container .slider .dir_btn:hover {
        cursor: pointer;
        background-color: rgba(0, 0, 0, 0.7); }
  .gallery_container .image_block {
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center; }
@keyframes sizeUp {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.5); }
  100% {
    transform: scale(1); } }
    .gallery_container .image_block img {
      height: 100%;
      width: 100%; }
      .gallery_container .image_block img:hover {
        cursor: zoom-in;
        animation: sizeUp 1s linear 1; }
    .gallery_container .image_block .one {
      grid-column: 1/2;
      grid-row: 1/2;
      width: 100%;
      height: 100%; }
    .gallery_container .image_block .two {
      grid-column: 2/3;
      grid-row: 1/2;
      width: 100%;
      height: 100%; }
    .gallery_container .image_block .three {
      grid-column: 3/4;
      grid-row: 1/2;
      width: 100%;
      height: 100%; }
    .gallery_container .image_block .four {
      grid-column: 4/5;
      grid-row: 1/2;
      width: 100%;
      height: 100%; }
    .gallery_container .image_block .five {
      grid-column: 1/2;
      grid-row: 2/3;
      width: 100%;
      height: 100%; }
    .gallery_container .image_block .six {
      grid-column: 2/3;
      grid-row: 2/3;
      width: 100%;
      height: 100%; }
    .gallery_container .image_block .seven {
      grid-column: 3/4;
      grid-row: 2/3;
      width: 100%;
      height: 100%; }
    .gallery_container .image_block .eight {
      grid-column: 4/5;
      grid-row: 2/3;
      width: 100%;
      height: 100%; }
    .gallery_container .image_block .nine {
      grid-column: 1/2;
      grid-row: 3/4;
      width: 100%;
      height: 100%; }
    .gallery_container .image_block .ten {
      grid-column: 2/3;
      grid-row: 3/4;
      width: 100%;
      height: 100%; }
    .gallery_container .image_block .eleven {
      grid-column: 3/4;
      grid-row: 3/4;
      width: 100%;
      height: 100%; }
    .gallery_container .image_block .twelve {
      grid-column: 4/5;
      grid-row: 3/4;
      width: 100%;
      height: 100%; }

.dir_btn {
  height: 100%;
  width: 50px;
  background-color: rgba(0, 0, 0, 0.4);
  margin: auto;
  z-index: 4;
  position: absolute;
  transition: 1s; }
  .dir_btn img {
    width: 100%;
    height: 100%;
    margin: auto; }
  .dir_btn:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.7); }

.btnleft {
  grid-column: 1/2;
  grid-row: 2/3;
  left: 0; }

.btnright {
  grid-column: 4/5;
  grid-row: 2/3;
  right: 0; }

ul {
  grid-column: 2/4;
  grid-row: 4/5;
  width: 100%;
  text-align: center;
  margin: auto;
  z-index: 1; }
  ul .g_list {
    display: inline-block;
    width: 10px;
    height: 10px;
    padding: 5px;
    margin: 2px;
    font-size: .6em;
    text-align: center;
    border: 1px black solid;
    background-color: rgba(0, 0, 0, 0.3); }
    ul .g_list:hover, ul .g_list :active, ul .g_list :focus {
      cursor: pointer;
      background-color: #ee534f; }

.hiddenWindow_container {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
  padding-top: 100px;
  top: 0;
  left: 0;
  overflow: none;
  background-color: rgba(0, 0, 0, 0.5);
  margin: auto; }
  .hiddenWindow_container .hiddenWindow_wrapper {
    width: 70%;
    height: 30%;
    background-color: rgba(0, 0, 0, 0.8);
    margin: auto;
    padding: 20px;
    opacity: 0;
    animation: load 1s forwards;
    /* Close Button (Top-Right Corner) */ }
    .hiddenWindow_container .hiddenWindow_wrapper #img_holder {
      width: 100%;
      height: 80%; }
      .hiddenWindow_container .hiddenWindow_wrapper #img_holder img {
        margin: auto;
        width: 100%;
        height: 100%; }
@keyframes load {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
    .hiddenWindow_container .hiddenWindow_wrapper .closeButton {
      color: #1b1b81;
      float: right;
      font-size: 25px;
      padding: 0 8px;
      border-radius: 40px;
      transition: 500ms; }
      .hiddenWindow_container .hiddenWindow_wrapper .closeButton:hover, .hiddenWindow_container .hiddenWindow_wrapper .closeButton:focus {
        color: white;
        border: none;
        background-color: rgba(0, 0, 0, 0.7);
        text-decoration: none;
        cursor: pointer; }

/* CONTACT PAGE STYLING */
.form_container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  height: 1110px;
  width: 100%;
  position: relative;
  top: 80px; }
  .form_container form {
    grid-column: 1/3;
    grid-row: 1/2;
    padding: 40px;
    text-align: center;
    margin: auto; }
    .form_container form .h_message {
      color: gray; }
      .form_container form .h_message .first {
        border-bottom: 3px solid #e38f84;
        padding-bottom: 15px; }
      .form_container form .h_message .restOf {
        border-bottom: 3px solid #dadada;
        padding-bottom: 15px; }
    .form_container form .input_style {
      height: 35px;
      width: 100%;
      border: 1px solid rgba(0, 0, 0, 0.3);
      border-radius: 4px; }
    .form_container form ::placeholder {
      text-align: center; }
    .form_container form #message {
      height: 180px;
      padding-top: 20px; }
    .form_container form .btn {
      width: 150px;
      height: 50px;
      font-size: 1.45em;
      border-radius: 5px;
      margin: auto;
      border: 2px #e38f84 solid;
      background-color: #e38f84; }
    .form_container form .email_btn {
      color: white; }
  .form_container .c_info_container {
    grid-column: 1/3;
    grid-row: 2/3;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    height: 450px;
    width: 100%;
    position: relative;
    top: 80px; }
    .form_container .c_info_container .h_message {
      grid-column: 1/2;
      grid-row: 1/2;
      padding: 20px 20px 0 20px;
      color: gray;
      text-align: center; }
      .form_container .c_info_container .h_message .first {
        border-bottom: 3px solid #e38f84;
        padding-bottom: 15px; }
      .form_container .c_info_container .h_message .restOf {
        border-bottom: 3px solid #dadada;
        padding-bottom: 15px; }
    .form_container .c_info_container p {
      grid-column: 1/2;
      grid-row: 2/3;
      padding: 0 30px 0 30px;
      color: #515151;
      font-size: .8em;
      line-height: 1.8em; }
    .form_container .c_info_container .contact_details {
      padding: 30px; }
      .form_container .c_info_container .contact_details .holder .icon {
        width: 30px;
        height: 30px;
        color: #ee534f;
        margin: auto;
        float: left; }
        .form_container .c_info_container .contact_details .holder .icon #phone {
          width: 100%;
          height: 100%;
          padding: 15px; }
        .form_container .c_info_container .contact_details .holder .icon #email {
          width: 100%;
          height: 100%;
          padding: 15px; }
        .form_container .c_info_container .contact_details .holder .icon #time {
          width: 100%;
          height: 100%;
          padding: 15px; }
        .form_container .c_info_container .contact_details .holder .icon #location {
          width: 100%;
          height: 100%;
          padding: 15px; }
      .form_container .c_info_container .contact_details .holder .details {
        padding: 20px 0 20px 60px; }
      .form_container .c_info_container .contact_details .holder .d_loc {
        padding: 8px 20px 0 60px;
        line-height: 1.3em; }

.map_container {
  display: grid;
  grid-template-areas: "map";
  height: 700px;
  width: 100%;
  position: relative;
  top: 80px;
  background-color: #999; }
  .map_container .map {
    grid-area: map;
    height: 100%;
    width: 100%;
    border: 0; }

/* END OF MAIN STYLING */

/*# sourceMappingURL=main.css.map */