* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  background: white;
  font-family: 'Roboto', sans-serif;
  text-align: center;
  font-weight: 800;
  letter-spacing: 2px;
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
}


/* Logo/boton
********************************************************************* */

.btn:link,
.btn:visited {
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 40px;
    display: inline-block;
    border-radius: 100px;
    transition: all .2s;
    position: absolute;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.btn-white {
    background-color: #a0cc3a;
    color: white;
}

.btn::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
    border-radius: 100px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all .4s;
}

.btn-white::after {
    background-color: #7fa024;
}

.btn:hover::after {
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0;
}

.btn-animated {
    animation: moveInBottom 5s ease-out;
    animation-fill-mode: backwards;
}

@keyframes moveInBottom {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

/* Responsivo
********************************************************************* */
/* 
  ##Dispositivo = Desktops
  ##Resolucion = 1281pxo mayorresolusion desktops
*/

@media (min-width: 1281px) {
  .centrado{
  margin-left: -36%;
  margin-top: -70%;
  z-index: 99;
  position: absolute;
  width: 600px;
}
.text-box {
  align-items: center;
  z-index: 9999;
  position: absolute;
  left: 72%;
}
  
}

/* 
  ##Dispositivo = Laptops, Desktops
  ##Resolucion = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  
.centrado{
  margin-left: -36%;
  margin-top: -60%;
  z-index: 99;
  position: absolute;
  width: 447px;
}
.text-box {
  align-items: center;
  z-index: 9999;
  position: absolute;
  left: 52%;
}
  
}

/* 
  ##Dispositivo = Tablets, Ipads (vertical)
  ##Resolucion = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  .centrado{
  margin-left: 2%;
  margin-top: -70%;
  z-index: 99;
  position: absolute;
  width: 557px;
}
.text-box {
  align-items: center;
  z-index: 9999;
  position: absolute;
  left: 95%;
}
.btn:link{
  font-size: 2em;
}

}

/* 
  ##Dispositivo = Tablets, Ipads (horizontal)
  ##Resolucion = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: horizontal) {
  
  .centrado{
  margin-left: 2%;
  margin-top: -70%;
  z-index: 99;
  position: absolute;
  width: 557px;
}
.text-box {
  align-items: center;
  z-index: 9999;
  position: absolute;
  left: 95%;
}
.btn:link{
  font-size: 2em;
}
}

/* 
  ##Dispositivo = Tablets de baja resolucion y telefnos Mobiles (horizontal)
  ##Resolucion = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {

  .centrado{
  margin-left: -36%;
  margin-top: -55%;
  z-index: 99;
  position: absolute;
  width: 447px;
}
.text-box {
  align-items: center;
  z-index: 9999;
  position: absolute;
  left: 50%;
}
.btn:link{
  font-size: 1em;
}

}

/* 
  ##Dispositivo = Mayoria de telefonos moviles (vertical)
  ##Resolucion = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
   .centrado{
  margin-left: 2%;
  margin-top: -70%;
  z-index: 99;
  position: absolute;
  width: 557px;
}
.text-box {
  align-items: center;
  z-index: 9999;
  position: absolute;
  left: 95%;
}
.btn:link{
  font-size: 2em;
}
  
}


/* Video
********************************************************************* */

#video-viewport {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}
video {
  display: block;
  width: 100%;
  height: auto;
}

.fullsize-video-bg {
  height: 100%;
  overflow: hidden;
}

.fullsize-video-bg:before {
  content: "";
  background: rgba(182, 226, 236, 0.35);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.fullsize-video-bg .inner {
  display: table;
  width: 100%;
  max-width: 24em;
  height: 100%;

  padding: 0;
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
.fullsize-video-bg .inner > div {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  padding: 0 2em;
}

/* Footer Section
********************************************************************* */
.footer-basic-centered{
	background-color: #000;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	width: 100%;
	height: 11%;
	text-align: center;
	font: normal 18px sans-serif;
	padding: 5px;
	margin-top: 80px;
    z-index: 999;
}
.footer-basic-centered .footer-santillana{
	color: #b0b2b6;
	font-size: 0.7em;
	margin: 0;
	padding: 5px;
}
.footer-basic-centered img{
	max-width:80%;
}
/* footer responsive*/
@media (max-width: 600px) {

	.footer-basic-centered{
		padding: 5px;
	}
	.footer-basic-centered .footer-santillana{
		font-size: 12px;
	}
	main section form input[type="button"] {
  margin-bottom:300px;
}
}
footer{
	position: fixed;
	bottom: 0;
}