html,
body {
 	      /*background-color: #85b9dd; /** --- Primavera*/
        /*background-color: #19084C; /***--- Otoño***/
        /*background-color: #043f7b; /***--- Verano ***/
        background-color: #0D1F47; /***--- Invierno */
        /*background-color: #2A258B; /***--- Otoño***/
        /*background-color: #031930; /* For browsers that do not support gradients 
        background-image: linear-gradient(to bottom right, #2B1127, #2D142A ,#281C32, #031930, #130F28); /***--- Otoño***/
 	margin: 0;
 	padding: 0;
 	width: 100%;
 	height: 100%;
	overflow: hidden;
   
}
#profile-img{
    display: none !important;
}

* {
  position: relative;
}

.frame {
  	width: 500px;
  	height: auto;
  	/*margin: 15% auto 0;*/
	margin: 5% -50% 0;
  	position: absolute;
  	width: 100%;
}

svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/**
 * Paper Plane
 */
/*Paper Plane: Container*/
.plane-container {
  width: 200px;
  margin: 0px auto;
  z-index: 3;
}
 /*Paper Plane: Image*/
.plane {
  width: 100%;
  height: 60px;
}

/*Paper Plane: Animation*/
.plane-container {
  	-webkit-animation: paper-plane-scoping 15s alternate infinite;
  	-moz-animation: paper-plane-scoping 15s alternate infinite;
	-o-animation: paper-plane-scoping 15s alternate infinite;
	-ms-animation:paper-plane-scoping 15s alternate infinite;
  	animation: paper-plane-scoping 15s alternate infinite;

  	-webkit-animation-timing-function: linear;
  	-moz-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	-ms-animation-timing-function: linear;
  	animation-timing-function: linear;
}

@-webkit-keyframes paper-plane-scoping {
	0% {
		-webkit-transform: translate(0px,0px);
		-moz-transform: translate(0px,0px);
		transform: translate(0px,0px);
 	}
	20% {
		-webkit-transform: translate(300px,300px);
		-moz-transform: translate(300px,300px);
		-o-transform: translate(300px,300px);
		-ms-transform: translate(300px,300px);
		transform: translate(300px,300px);
	} 
	40% {
		-webkit-transform: translate(600px,0px);
		-moz-transform: translate(600px,0px);
		-o-transform: translate(600px,0px);
		-ms-transform: translate(600px,0px);
		transform: translate(600px,0px);
 	} 
	60% {
		-webkit-transform: translate(900px,300px);
		-moz-transform: translate(900px,300px);
		-o-transform: translate(900px,300px);
		-ms-transform: translate(900px,300px);
		transform: translate(900px,300px);
  	} 
	80% {
		-webkit-transform: translate(1200px,0px);
		-moz-transform: translate(1200px,0px);
		-o-transform: translate(1200px,0px);
		-ms-transform: translate(1200px,0px);
		transform: translate(1200px,0px);
  	} 
	100% {
		-webkit-transform: translate(1450px,300px);
		-moz-transform: translate(1450px,300px);
		-o-transform: translate(1450px,300px);
		-ms-transform: translate(1450px,300px);
		transform: translate(1450px,300px);
  	}
}

.plane {
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;

  -webkit-animation: paper-plane-soaring 5s forwards infinite;
  -moz-animation: paper-plane-soaring 5s forwards infinite;
  animation: paper-plane-soaring 5s forwards infinite;
}
@-webkit-keyframes paper-plane-soaring {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  40% {
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  50% {
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  60% {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

/**
 * Clouds
 */
.clouds {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  transform: translateZ(0);
}

.cloud {
  position: absolute;
  top: 20%;
  width: 300px;
  right: 0;
  opacity: 1;
}

.cloud.front {
  z-index: 9;
}

.cloud.distant {
  z-index: 1;
}

.cloud.background {
  z-index: 1;
}

/*Cloud Sizing*/
.cloud.smaller {
  margin-right: 400px;
  width: 100px;
  margin-top: 50px;
}

.cloud.small {
  margin-right: 200px;
  width: 150px;
}

.cloud.big {
  width: 500px;
  margin-top: 50px;
  margin-right: 150px;
}

.cloud.massive {
  width: 600px;
  margin-top: 20px;
  margin-right: 0px;
}


/*Cloud: Animation*/
.cloud {
  -webkit-animation-name: cloud-movement;
  -webkit-animation-timing-function: linear;
  -webkit-animation-direction: forwards;
  -webkit-animation-iteration-count: infinite;
  /*-webkit-animation-duration: 8s;*/
  -webkit-animation-duration: 16s;
  -moz-animation-name: cloud-movement;
  -moz-animation-timing-function: linear;
  -moz-animation-direction: forwards;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 16s;

  animation-name: cloud-movement;
  animation-timing-function: linear;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-duration: 16s;
}

.slow {
  /*-webkit-animation-duration: 15.2s;*/
  -webkit-animation-duration: 25.2s;
  -moz-animation-duration: 25.2s;
  animation-duration: 25.2s;
}

.slower {
  -webkit-animation-duration: 21.2s;
  -moz-animation-duration: 21.2s;
  animation-duration: 21.2s;
}

.slowest {
  -webkit-animation-duration: 25.5s;
  -moz-animation-duration: 25.5s;
  animation-duration: 25.5s;
}

.super-slow {
  -webkit-animation-duration: 24.5s;
  -moz-animation-duration: 24.5s;
  animation-duration: 24.5s;
}

@-webkit-keyframes cloud-movement {
  0% {
    opacity: 0.1;
    -webkit-transform: translateX(300px);
    -moz-transform: translateX(300px);
    transform: translateX(300px);
  }
  10% {

    opacity: 0.7;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-1500px);
    -moz-transform: translateX(-1500px);
    transform: translateX(-1500px);
  }
}