body {
   display: block;
}

video {
   width: 100%;
   height: auto;
   object-fit: contain;
   -o-object-fit: contain;
   z-index: -999;
}

main {
   padding-bottom: 30px;
}

.div-container {
   display: flex;
   -ms-display: flex;
   -moz-display: flex;
   -webkit-display: flex;
   flex-direction: row;
   -ms-flex-direction: row;
   -moz-flex-direction: row;
   -webkit-flex-direction: row;
   flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   -moz-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   width: 100%;
}

.div-box {
   height: auto;
   width: calc(50% - 30px);
   padding: 15px;
}

.box-heading {
   display: flex;
   -ms-display: flex;
   -moz-display: flex;
   -webkit-display: flex;
   flex-direction: row;
   -ms-flex-direction: row;
   -moz-flex-direction: row;
   -webkit-flex-direction: row;
}

.div-box img {
   height: 64px;
   width: 64px;
   margin: 0px;
}

.div-box h3 {
   width: calc(100% - 64px);
   height: 100%;
   margin: auto 0px auto 10px;
   font-size: 20px;
   color: #273B7B;
   letter-spacing: 0px;
   line-height: normal;
}

.div-box p {
   width: 100%;
   height: 100%;
   font-size: 14px;
   color: #2F2E2E;
   letter-spacing: 0px;
   line-height: normal;
}

#section0 {
   display: flex;
   -ms-display: flex;
   -moz-display: flex;
   -webkit-display: flex;
   flex-direction: row;
   -ms-flex-direction: row;
   -moz-flex-direction: row;
   -webkit-flex-direction: row;
   flex-flow: row;
   -ms-flex-flow: row;
   -moz-flex-flow: row;
   -webkit-flex-flow: row;
   margin-top: auto;
}

#section0 .fp-tableCell {
   display: flex;
   -ms-display: flex;
   -moz-display: flex;
   -webkit-display: flex;
}

#info {
   width: 90%;
}

#anchor {
   margin-top: -100px;
   padding-top: 60px;
}

.temas {
   width: 40%;
   flex-direction: row;
   -ms-flex-direction: row;
   -moz-flex-direction: row;
   -webkit-flex-direction: row;
   flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   -moz-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   justify-content: flex-end;
   transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -webkit-transition: all 0.5s ease;
}

.temas ul {
   height: auto;
   margin: 15% 0px auto 0px;
}

.temas p, .temas a {
   font-size: 16px;
   color: #8F8F8F;
   text-align: right;
   cursor: pointer;
   line-height: normal;
   user-select: none;
   -ms-user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
   margin: 10px;
   margin-bottom: 0px;
   transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -webkit-transition: all 0.5s ease;
}

.temas p:hover, .temas a:hover {
   font-size: 16px;
   color: #50558B;
   transform: translateX(-5px);
   -o-transform: translateX(-5px);
   -ms-transform: translateX(-5px);
   -moz-transform: translateX(-5px);
   -webkit-transform: translateX(-5px);
   transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -webkit-transition: all 0.5s ease;
}

.temaSelected {
   font-size: 16px;
   color: #50558B !important;
   transform: translateX(-20px) !important;
   -o-transform: translateX(-20px) !important;
   -ms-transform: translateX(-20px) !important;
   -moz-transform: translateX(-20px) !important;
   -webkit-transform: translateX(-20px) !important;
   transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -webkit-transition: all 0.5s ease;
}

.content {
   width: 60%;
   transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -webkit-transition: all 0.5s ease;
}

.texto {
   height: 150px;
   text-align: center;
   font-size: 24px;
   color: #50558B;
   transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -webkit-transition: all 0.5s ease;
}

@media screen and (max-width: 870px) {
   .temas {
      width: 100%;
      justify-content: space-around;
      transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -webkit-transition: all 0.5s ease;
   }
   
   .temas ul {
      height: auto;
      margin: 10px auto; 
   }

   .temas p, .temas a {
      font-size: 18px;
      transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -webkit-transition: all 0.5s ease;
   }
   .temas p:hover, .temas a:hover {
      font-size: 18px;
      transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -webkit-transition: all 0.5s ease;
   }
   .temaSelected {
      font-size: 18px;
      transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -webkit-transition: all 0.5s ease;
   }

   .content {
      width: 100%;
      transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -webkit-transition: all 0.5s ease;
   }
}

@media screen and (max-width: 500px) {
   #info {
      width: 95%;
   }

   .temas p, .temas a {
      font-size: 15px;
      transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -webkit-transition: all 0.5s ease;
   }
   .temas p:hover, .temas a:hover {
      font-size: 15px;
      transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -webkit-transition: all 0.5s ease;
   }
   .temaSelected {
      font-size: 15px;
      transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -webkit-transition: all 0.5s ease;
   }
}

@media screen and (max-width: 950px) {
   .div-box {
      height: auto;
      width: 100%;
   }

   .texto {
      font-size: 20px;
      transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -webkit-transition: all 0.5s ease;
   }
}

@media screen and (max-width: 500px) {
   .navigation {
      margin: 20% 0px;
   }
}