/* GoogleFont */
@import url(http://fonts.googleapis.com/css?family=Raleway:normal,bold,light);

html {font-size: 16px;}

* {margin: 0; box-sizing: border-box}

body {margin-top: 100px; background: #2A363B ; text-align: center; font-family: 'Raleway', sans-serif; font-weight: 600; color: #ffffff}

header { padding-top: 0.5rem; font-size: 0.5rem;  background: #45ADA8; height: auto; width: 100%; top: 0; position: fixed; z-index: 1; box-shadow: 0 1px 10px #000000;}

/* NAV */

#main-menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 35px;
    max-width: 600px;
    margin: 0 auto}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;}

nav li {
  position: relative;
    width: 100%;}

nav a {
  position: relative;
  z-index: 599;
  color: #fff;
  background: #45ADA8;
  text-decoration: none;
  padding: 0.5rem 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;}

nav a i[class*="caret"] {
  color: #00FFC0;
  margin-left: 0.2rem;}

nav a:hover {
  color: #00FFC0;}

nav a:hover + .submenu {
  opacity: 1;
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
  visibility: visible;}

nav .submenu {
  display: block;
  opacity: 0;
  position: absolute;
  visibility: hidden;
  z-index: 499;
  margin: 0 auto;
  top: 20px;
  left: 0;
  right: 0;
  box-shadow: 0 2px 5px rgba(68, 68, 68, 0.3);
  -webkit-transform-origin: top center;
  -moz-transform-origin: top center;
  -ms-transform-origin: top center;
  -o-transform-origin: top center;
  transform-origin: top center;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;}

nav .submenu li > .submenu {
  top: 0;
  left: 100%;}

nav .submenu:hover {
  opacity: 1;
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
  visibility: visible;}

nav .submenu li {
  display: block;}

nav .submenu a {
  width: 100%;
  display: block;
  padding: 1.4em 2em;}

nav .submenu a:hover {
    color: #fff;
  background: #00FFC0;}

/*=== Fade Dwn ===*/
nav.fd li:hover + .submenu {
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);}

nav.fd .submenu {
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: translateY(-50px);
  -moz-transform: translateY(-50px);
  -ms-transform: translateY(-50px);
  -o-transform: translateY(-50px);
  transform: translateY(-50px);}

nav.fd .submenu:hover {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);}

/* MAIN */

#info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    border: solid 0.1rem #00FFC0;
    box-shadow: 1rem 1rem 0rem #00FFC0}

/* foto */

.foto {
    width: 60%;}

.foto img {
    width: 200px;
    border-bottom: solid 0.1rem #ff0089;}

.foto h1 {
    color: #ff0089;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: }

.foto h1 span {font-weight: 400;}

.foto p {margin-bottom: 0.7rem;}

.foto a {text-decoration: none; color: #fff; font-size: 0.7rem; background-color: #ff0089; padding: 0.4rem 1rem; border-radius: 3px;}

/* materias */

.materias {
    width: 50%;
    text-align: left;}

.materias h2 {font-size: 1rem; border-bottom: solid 0.1rem #45ADA8; padding: 0.3rem; color: #fff;}

.materias ul {display: inline}

.materias ul li {
    list-style: none;
    font-size: 0.8rem;
    color: #fff;
    font-weight: 100;}

/* footer */

footer p {max-width: 800px; margin: 0 auto; font-size: 0.7rem; font-weight: 100; color: #909090; position: fixed; bottom: 0; padding: 1rem; left: 0; right: 0;}

@media (max-width: 550px) {
 
    nav a i[class*="caret"] {
        display: none;}
    }
    
@media (max-width: 400px) {
    
    #info {
        flex-direction: column;
        justify-content: center;
        width: 80%;
        padding: 2rem 0;
        margin-bottom: 3rem}
    
    .foto {margin-bottom: 3rem;
        width: 80%}
    
    .foto img {
    width: 100%;}
    
    .materias {text-align: center;}
    
    footer p {position: relative}
    
}