body{
 margin: 0 auto;
background-color: #0f99a8;
background-image: linear-gradient(4deg, #0f99a8 0%, #8fdde0 50%);
	font-family: 'Roboto', sans-serif;
	height: 100%;
	padding-bottom: 150px;
}

/* Header
********************************************************************* */

.cajablc{
  background-color: #ffffff;
  box-shadow: 7px 10px 17px 0px rgba(0,66,81,0.3);
  border-radius: 20px;
  margin-top: 50px;
  margin-bottom: 50px;
  padding:40px;
  margin-bottom:30px;
}

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

@media (min-width: 1401px) {
  .titulo1{
	width: 104%;
    padding-bottom: 28px;
    transform: translateX(-99px);
}
.titulo2{
	width: 145%;
	transform: translateY(-20px);
}

.scroll-down {
	bottom: 5vh;
}
}

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

@media (min-width: 1200px) and (max-width: 1400px) {
 .titulo1{
	width: 125%;
	padding-bottom: 35px;
	transform: translateX(-85px);
}
.titulo2{
	width: 170%;
}
.scroll-down {
	bottom: 5vh;
}
}

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

@media (min-width: 992px) and (max-width: 1999px) {
   .titulo1{
	width: 112%;
    padding-bottom: 35px;
    transform: translateX(-92px);
}
.titulo2{
	width: 165%;
	transform: translateX(-20px);
}
.scroll-down {
	bottom: 5vh;
}
}

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

@media (min-width: 768px) and (max-width: 991px) { 
    .titulo1{
	width: 145%;
    padding-bottom: 35px;
    transform: translateX(-92px);
}
.titulo2{
	    width: 148%;
    transform: translateY(78px);
}
.scroll-down {
	bottom: 5vh;
}
}
/* 
  ##Dispositivo = Tablets de baja resolucion y telefnos Mobiles (horizontal)
  ##Resolucion = B/w 481px to 767px
*/

@media (min-width: 617px) and (max-width: 767px) {
    .titulo1{
	width: 142%;
    padding-bottom: 35px;
    transform: translateX(-77px);
}
.titulo2{
	width: 105%;
}

.cajablc{
	height: 800px;
}
.scroll-down {
	bottom: -40vh;
}
}

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

@media (min-width: 320px) and (max-width: 616px) {
  
      .titulo1{
	width: 100%;
	padding-bottom: 35px;
}
.titulo2{
	width: 95%;
	padding-left: 20px;
}

.cajablc{
	height: 670px;
}
.scroll-down {
	bottom: -20vh;
}
}

/* FLECHA
********************************************************************* */


.scroll-down {
	position: absolute;
	left: 50%;
	display: block;
	text-align: center;
	font-size: 60px;
	z-index: 100;
	text-decoration: none;
	text-shadow: 0;
	width: 30px;
	height: 30px;
	border-bottom: 5px solid #fff;
	border-right: 5px solid #fff;
	z-index: 9;
	-webkit-transform: translate(-50%, 0%) rotate(45deg);
	-moz-transform: translate(-50%, 0%) rotate(45deg);
	transform: translate(-50%, 0%) rotate(45deg);
	-webkit-animation: fade_move_down 2s ease-in-out infinite;
	-moz-animation: fade_move_down 2s ease-in-out infinite;
	animation: fade_move_down 2s ease-in-out infinite;
}


/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
 0% {
-webkit-transform:translate(0, -10px) rotate(45deg);
opacity: 0;
}
 50% {
opacity: 1;
}
 100% {
-webkit-transform:translate(0, 10px) rotate(45deg);
opacity: 0;
}
}
@-moz-keyframes fade_move_down {
 0% {
-moz-transform:translate(0, -10px) rotate(45deg);
opacity: 0;
}
 50% {
opacity: 1;
}
 100% {
-moz-transform:translate(0, 10px) rotate(45deg);
opacity: 0;
}
}
@keyframes fade_move_down {
 0% {
transform:translate(0, -10px) rotate(45deg);
opacity: 0;
}
 50% {
opacity: 1;
}
 100% {
transform:translate(0, 10px) rotate(45deg);
opacity: 0;
}
}

/* Botones HD
********************************************************************* */

.habilidades{
	padding-top:110px;
}
.hd1{
	display: flex;
  justify-content: center;
  align-items: center;
	
}

.hd2{
	display: flex;
  justify-content: center;
  align-items: center;
	
}

.hd3{
	display: flex;
  justify-content: center;
  align-items: center;
	
}



.wrapper {
  padding-top: 100px;
  padding-bottom: 40px;
  float: left;
  padding-left: 40px;
  display: inline-block;
}



.clash-card {
  background: white;
  width: 300px;
  display: inline-block;
  margin: auto;
  border-radius: $border-radius-size + 5;
  position: relative;
  text-align: center;
  box-shadow: -1px 15px 30px -12px black;
  z-index: 9999;
    border-radius: 25px;
}

.clash-card__image {
  position: relative;
  height: 230px;
  margin-bottom: 35px;
  border-top-left-radius: $border-radius-size;
  border-top-right-radius: $border-radius-size;

}

.clash-card__image--barbarian {
  background-image: url("../img/hd/hd1_1.jpg"); /* The image used */
  height: 260px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container*/
  border-radius: 25px 25px 0  0;
}

.clash-card__image--barbarian2 {
  background-image: url("../img/hd/hd2_1.jpg"); /* The image used */
  height: 260px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container*/
  border-radius: 25px 25px 0  0;
}

.clash-card__image--barbarian3 {
  background-image: url("../img/hd/hd3_1.jpg"); /* The image used */
  height: 260px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container*/
  border-radius: 25px 25px 0  0;
}


.clash-card__unit-name {
  font-family: 'Roboto', sans-serif;
  font-size: 26px;
  color: #ed367d;
  font-weight: 900;
  margin-bottom: 5px;
}

.clash-card__unit-name2 {
  font-family: 'Roboto', sans-serif;
  font-size: 26px;
  color: #31bbac;
  font-weight: 900;
  margin-bottom: 5px;
}

.clash-card__unit-name3 {
  font-family: 'Roboto', sans-serif;
  font-size: 26px;
  color: #00abd7;
  font-weight: 900;
  margin-bottom: 5px;
}
.imghd{
  width: 105%;
  margin-left: 25px;
}

.imghd2{
  width: 105%;
  margin-left: 15px;
  margin-top: 7px;
}

.ctn {
  display: block;
  margin: auto;
  text-align: center;
}


.button:after {
  background: white;
}

/*GRADIENTS*/
  /*GREEN*/
  .b-green, .b-green:before {
    background: rgb(237,54,125);
    background: -moz-linear-gradient(90deg, rgba(237,54,125,1) 0%, rgba(185,0,80,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(237,54,125,1) 0%, rgba(185,0,80,1) 100%);
    background: -o-linear-gradient(90deg, rgba(237,54,125,1) 0%, rgba(185,0,80,1) 100%);
    background: -ms-linear-gradient(90deg, rgba(237,54,125,1) 0%, rgba(185,0,80,1) 100%);
    background: linear-gradient(90deg, rgba(237,54,125,1) 0%, rgba(185,0,80,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#1abc9c', GradientType=1 );
  }
  /*PINK*/
  .b-pink, .b-pink:before {
    background: rgb(0,143,136);
    background: -moz-linear-gradient(90deg, rgba(0,143,136,1) 0%, rgba(49,187,172,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(0,143,136,1) 0%, rgba(49,187,172,1) 100%);
    background: -o-linear-gradient(90deg, rgba(0,143,136,1) 0%, rgba(49,187,172,1) 100%);
    background: -ms-linear-gradient(90deg, rgba(0,143,136,1) 0%, rgba(49,187,172,1) 100%);
    background: linear-gradient(90deg, rgba(0,143,136,1) 0%, rgba(49,187,172,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e748ea', endColorstr='#4b1abc', GradientType=1 );
  }
  /*RED*/
  .b-red, .b-red:before {
    background: rgb(0,130,157);
    background: -moz-linear-gradient(90deg, rgba(0,130,157,1) 0%, rgba(0,171,215,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(0,130,157,1) 0%, rgba(0,171,215,1) 100%);
    background: -o-linear-gradient(90deg, rgba(0,130,157,1) 0%, rgba(0,171,215,1) 100%);
    background: -ms-linear-gradient(90deg, rgba(0,130,157,1) 0%, rgba(0,171,215,1) 100%);
    background: linear-gradient(90deg, rgba(0,130,157,1) 0%, rgba(0,171,215,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea6e48', endColorstr='#bc1a63', GradientType=1 );
  }
/*END GRADIENTS*/
/*BASE BUTTON*/
.button {
  display: inline-block;
  position: relative;
  border-radius: 3px;
  text-decoration: none;
  padding: .5em;
  margin: .5em;
  font-size: 1em;
  font-weight: bold;
  transition: all .5s;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Roboto', sans-serif;
  margin-bottom: 40px;
}
.button:hover {
  text-shadow: 0px 0px 0px rgba(255, 255, 255, .75);
}
.button:hover:after {
  left: 100%;
  top: 100%;
  bottom: 100%;
  right: 100%;
}
.button:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  border-radius: 5px;
  transition: all .5s;
}
.button:after {
  content: '';
  display: block;
  position: absolute;
  left: 2px;
  top: 2px;
  bottom: 2px;
  right: 2px;
  z-index: -1;
  border-radius: 5px;
  transition: all .5s;
}
.button2 {
  display: inline-block;
  font-size: 2em;
  margin: .5em;
  padding: .5em;
  border-radius: 5px;
  transition: all .5s;
  filter: hue-rotate(0deg);
  color: #FFF;
  text-decoration: none;
}
/*END BASE BUTTON*/
/*ROTATE*/
.rot-360-noscoop:hover {
  filter: hue-rotate(360deg);
  transform: rotate(360deg);
}
.rot-135:hover {
  filter: hue-rotate(135deg);
}
.rot-90:hover {
  filter: hue-rotate(90deg);
}
/*END ROTATE*/


/* Botones finales
********************************************************************* */

.cards-list {
  z-index: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.card1 {
  margin: 30px auto;
  width: 200px;
  height: 200px;
  border-radius: 40px;
box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
  cursor: pointer;
  transition: 0.4s;
  background-color: none !important;

}

.card1 .card_image {
  width: inherit;
  height: inherit;
  border-radius: 40px;
}

.card1 .card_image img {
  width: inherit;
  height: inherit;
  border-radius: 40px;
  object-fit: cover;
}

.card1 .card_title {
  text-align: center;
  border-radius: 0px 0px 40px 40px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 30px;
  margin-top: -80px;
  height: 40px;
}

.card1:hover {
  transform: scale(0.9, 0.9);
  box-shadow: 5px 5px 30px 15px rgba(0,0,0,0.25),
    -5px -5px 30px 15px rgba(0,0,0,0.22);
}

.title-white {
  color: white;
}

.title-black {
  color: black;
}

@media all and (max-width: 500px) {
  .card-list {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}

.botones{
	padding-bottom: 100px;
}


/* 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: 9999;
}
.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;
}