*{padding: 0; margin: 0;transition:  0.5s; box-sizing: border-box;}

span {font-family: 'Montserrat', sans-serif;}
body {font-family: 'Montserrat', sans-serif;}
header  {  position: fixed; width: 100%; z-index: 1000;box-shadow: 0 10px 20px 0 rgba(0,0,0,0.2);}
header h1 { text-align: center;     font-size: 55px;}
a {text-decoration: none;}
nav { background: #2e9bf0; padding: 0rem;text-align: center;}
nav ul li{ display: inline-block;     padding: 1em 3em 1em 3em;}
nav ul li :hover{padding: 1em 3em 1em 3em; background: #bcdcff; transition: 0.3s;} 
nav ul li a {color: #ffff; text-decoration: none;     font-weight: bold;}
main section article {padding: 2rem; background: #fff;}
footer{background: #000000; padding: 1rem;}
footer p{font-size: 0.8rem; color: #3e3e3e; text-align: center;}

.accordion { background-color: #2e9bf0; border: none; color: #fff; cursor: pointer; padding: 18px; width: 100%; text-align: center; outline: none; font-weight: bold; font-size: 18px; transition: 0.4s;}
.activematerias, .accordion:hover { background-color: #087fdc;}
.panel {background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out;}
.materias {margin: 0em 3rem 10rem 3em;}
.materias a  {text-decoration: underline; color: #2e9bf0;}
.panel p{     margin: 2px 0px;   text-align: center; background: #99d2ff; padding: 1rem; color: #096ebd; font-weight: 500;}

.card {  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s;width: 25%;padding: 1rem; margin: 1rem;}
.card:hover {box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);}
.card img {-webkit-filter: grayscale(100%); filter: grayscale(100%);}

.container {background: #2e9bf0;}
.container :hover {background: #bcdcff; transition: 0.3s;}
.container h4 { text-align: center;  padding: 1rem;  color: white;}

.header {padding: 0rem;}

.parallax {background-attachment: fixed; background-position: top;background-repeat: no-repeat; height: 20rem; background-image: url('../header.jpg');}
.parallax2 {background-attachment: fixed; background-position: top;background-repeat: no-repeat; height: 20rem; background-image: url('../header2.jpg');}
.parallax3 {background-attachment: fixed; background-position: top;background-repeat: no-repeat; height: 20rem; background-image: url('../header3.jpg');}

.all-browsers {background-color: white; display: inline-flex; width: 100%;}
.all-browsers > h1, .browser {padding: 2rem;}

.browser {background: #2e9bf0; color: #fff; display: inline-block;  width: 50%;}
.browser > h2, p {margin: 1rem;}
.browser > p > a {color: #fff; font-weight: bold;  text-decoration: revert;}

.plan img {margin: 5em 5em 5em 5em; border: 1px solid #7b8fa7; display: block; margin-left: auto; margin-right: auto; width: 80%;}

.avatar img {border-radius: 50%; border: 5px solid #fff; display: block; margin-left: auto; margin-right: auto; margin-top: -5rem; width: 18%;}
.avatar img:hover { box-shadow: 0px 0px 25px #2e9bf0; transition: 0.6s;}
.avatar h1 {text-align: center; margin: 1rem;}
.avatar h2 { text-align: center; background: #096ebe; padding: 1rem; margin: 0rem 2rem; color: #fff;}

.encurso {background: #ffbcbc;}

.alumnos {display: inline-flex; width; 100%;}

.titulo {text-align: left;  padding: 2rem 2rem 0rem 2rem;}
.titulo2 {text-align: left;  padding: 2rem; font-size: 45px; color: #2e9bf0;}

.plan p {text-align: left; padding: 1em 20em 3em 3em; margin-bottom: 0em;}


.topnav {
  overflow: hidden;
  background-color: #2e9bf0;;
}

.topnav a {
  display: inline-block;
    padding: 1em 3em 1em 3em;
  color: #f2f2f2;
text-align: center;
font-weight:bold;
  text-decoration: none;
  font-size: 18px;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}


.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #096ebe;
  color: white;
}
@media screen and (max-width: 600px) {
  .topnav a {
    display: none;
  }
  .materias {
    margin: 0em 3rem 5rem 3em;
}
  .topnav a.icon {
    display: block;
  }
  .avatar img {margin-top: -3rem; width: 50%;}
  .all-browsers{display: block;}
  .browser {width: 100%;}
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}