/* -- ----------START-ACADEMIC-CSS------------ -- */
.academic {
  display: grid;
  grid-template-columns: 30% 60% 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "column1Container column2Container .";
  height: 90vh;
  width: 100%;
  background: linear-gradient(
      135deg,
      rgba(50, 151, 203, 1) 0%,
      rgba(49, 49, 100, 1) 100%
      );
  justify-items: center;
  align-items: center;
  color: white;
  position: relative;
}
.academic h1 {
  display: inherit;
  text-align: center;
  align-items: center;
  color: gold;
}
.column1Container {
  grid-area: column1Container;
}
.column2Container {
  width: 100%;
  height: 100%;
  grid-area: column2Container;
  display: flex;
}
.column1Container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "buttonsContainer";
  height: 90vh;
  width: 100%;
  background: linear-gradient(
      135deg,
      rgba(50, 151, 203, 1) 0%,
      rgba(49, 49, 100, 1) 100%
      );
  justify-items: center;
  align-items: center;
  color: white;
  font-family: Segoe UI;
  font-weight: 400;
  font-size: 1.4em
}
.buttonsContainer {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 20% 1fr 20% 1fr 20% 1fr 20% 1fr;
  grid-template-areas: "."
                       "titleAcademic"
                       "."
                       "studyPlan"
                       "."
                       "studyProgram"
                       "."
                       "infoTeachers"
                       ".";
  height: 90vh;
  width: 100%;
  justify-items: center;
  align-items: center;
}
.titleAcademic{
  width: 70%;
  height: 60%;
  grid-area: titleAcademic;
  border-radius: 100px;
  background: #314D81;    
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.studyPlan{
  width: 70%;
  height: 60%;
  grid-area: studyPlan;
  border-radius: 100px;
  background: #314D81;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.studyProgram{
  width: 70%;
  height: 60%;
  grid-area: studyProgram;
  border-radius: 100px;
  background: #314D81;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.infoTeachers{
  width: 70%;
  height: 60%;
  grid-area: infoTeachers;
  border-radius: 100px;
  background: #314D81;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.titleContent {
  width: 100%;
  height: 100%;
  display: none;
  /* display: flex; */
}
.studyPlanContent {
  width: 100%;
  height: 100%;
  display: none;
}
/* -- ----------START-STUDY-PROGRAM-CONTENT------------ -- */
.studyProgramContent {
  width: 100%;
  height: 100%;
  display: none;
}
.studyProgramContent h1 {
  font-size: 1.8em;
  margin: .5em;
}
.studyProgramContent p {
  font-size: 1.4em;
  font-weight: 600;
  margin: 1em;
}
.optionsStudyProgramContent {
  height: 10%;
  width: auto;
}
.optionsStudyProgramContent button{
  background: rgba(49, 49, 100, 1);
  width: 15%;
}
.firstYearContentCB {
  display: none;
  /* margin: 0 3%; */
}
.secondYearContentCB {
  display: none;
  /* margin: 0 3%; */
}
.firstYearContentCS {
  display: none;
  /* margin: 0 3%; */
}
.secondYearContentCS {
  display: none;
  /* margin: 0 3%; */
}
.thirdYearContentCS {
  display: none;
  /* margin: 0 3%; */
}
.fourthYearContentCS {
  display: none;
  /* margin: 0 3%; */
}
/* -- ----------END-STUDY-PROGRAM-CONTENT------------ -- */

.infoTeachersContent {
  width: 100%;
  height: 100%;
  display: none;
}
.infoTeachersContent1 {
  display: none;
  /* margin: 0 3%; */
}
.infoTeachersContent2 {
  display: none;
  /* margin: 0 3%; */
}
.infoTeachersContent p {
  font-size: 1.4em;
  font-weight: 600;
  margin: 1em;
}
.infoTeachersContent h1 {
  font-size: 1.8em;
  margin: 0;
  margin: .5em;
}
.optionInfoTeachersContent {
  width: auto;
}
.optionInfoTeachersContent button {
  background: rgba(49, 49, 100, 1);
  width: 15%;
} 
.academic button {
  outline: none;
  border: none;
  color: white;
  font-family: Segoe UI;
  font-weight: 400;
  font-size: 1.4em;
  cursor: pointer;
}
button:hover {
  background: #3297CB;
}
button:active {
  background: #16162D;
}
.academic a:hover {
  background: #3297CB;
}
.academic a:active {
  background: #16162D;
}
.column2Container a {
  outline: none;
  border: none;
  color: revert;
  font-family: Barlow Condensed;
  font-weight: 500;
  font-size: 1em;
  cursor: pointer;
  display: inline;
}
.backButtonDivices425px {
  display: none;
}
.max-width-425px {
  display: none;
}
/* -- ----------END-ACADEMIC-CSS------------ -- */

/* ----------------------------START-ACADEMIC-RESPONSIVE--------------------- */
@media screen and (max-width:1024px) {
  .column1Container {
    font-size: 1.4em;
  }
}
@media screen and (max-width:768px) {
  .column1Container {
    font-size: 1em;
  }
  .academic {
    grid-template-columns: 30% 68% 1fr;
  }

  .academic button {
    font-size: 1.3em;
  }
}

@media screen and (max-width:425px) {
  .academic {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "column1Container";                  
    justify-items: center;
    align-items: center;
    color: white;
  }
  .column1Container a{
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
  }
  .buttonsContainer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 20% 1fr 20% 1fr 20% 1fr 20% 1fr;
    grid-template-areas: "."
                         "titleAcademic"
                         "."
                         "studyPlan"
                         "."
                         "studyProgram"
                         "."
                         "infoTeachers"
                         ".";
    height: 90vh;
    width: 100%;
    justify-items: center;
    align-items: center;
    font-size: 1.4em;
  }
  .titleAcademic{
    width: 60%;
  }
  .studyPlan{
    width: 60%;
  }
  .studyProgram{
    width: 60%;
  }
  .infoTeachers{
    width: 60%;
  }
  .studyProgramContent {
    font-family: Barlow Condensed;
    overflow-y: scroll;
  }
  .studyProgramContent p a {
    outline: none;
    border: none;
    color: revert;
    font-family: Barlow Condensed;
    /* font-weight: 500; */
    /* font-size: 30px; */
    cursor: pointer;
  }
  .infoTeachersContent {
    font-family: Barlow Condensed;
    overflow-y: scroll;
    cursor: pointer;
    outline: none;
    border: none;
  }
  .infoTeachersContent a {
    color: revert;
  }
  .infoTeachersContent h1 {
    margin: .5em;
}
  .backButtonDivices425px {
    background: #3297CB;
    z-index: 0;
    border-radius: 100px;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 40px;
    right: 0;
  }
}
@media screen and (max-width:321px) {
  .column1Container {
    font-size: 1.2em;
  }
  .academic button {
    font-size: .85em;
  }
  .academic h1 p {
    margin: .5em;
    font-size: 1.4em;

  }
  .column1Container a {
    font-size: .9em;
  }
  .buttonsContainer {
    font-size: 1.2em;
  }
  .optionsStudyProgramContent {
    height: 5%;
  }
  .studyProgramContent {
    width: 100%;
    height: 100%;
    display: none;
  }
  .studyProgramContent h1 {
    font-size: 1.4em;
    margin: .5em;
  }
  .studyProgramContent p {
    font-size: 1.2em;
  }
  .infoTeachersContent h1 {
    font-size: 1.4em;
    margin: .5em;
  }
  .infoTeachersContent p {
    font-size: 1.2em;
  }
}
/* ----------------------------END-ACADEMIC-RESPONSIVE--------------------- */