/*----------------------------------------------

[Index]

1. Color
2. Typography

----------------------------------------------*/

/*----------------------------------------------
1. Color
----------------------------------------------*/

/* #region Color */

:root {
	

    
	/* Primary */
	--primary-color: #D39407;
	--primary-15-color: #d3940726;
	--primary-25-color: #d3940740;
	--primary-50-color: #d3940780;
	--primary-75-color: #d39407bf;

	/* Secondary */
	--secondary-color: #073D94;
	--secondary-15-color: #4d0f8f26;
	--secondary-25-color: #4d0f8f40;
	--secondary-50-color: #4d0f8f80;
	--secondary-75-color: #4d0f8fbf;

	/* Tertiary */
	--tertiary-color: #058C60;
	--tertiary-15-color: #058c6026;
	--tertiary-25-color: #058c6040;
	--tertiary-50-color: #058c6080;
	--tertiary-75-color: #058c60bf;

	/* Auxiliary */
	--accent-color: #0081A7;
	--success-color: #007a4d;
	--info-color: #023e8a;
	--warning-color: #ff9800;
	--danger-color: #e63946;

	/* White */
	--white-color: #fff;
	--white-10-color: rgba(255, 255, 255, 0.1);
	--white-25-color: rgba(255, 255, 255, 0.25);
	--white-50-color: rgba(255, 255, 255, 0.50);
	--white-65-color: rgba(255, 255, 255, 0.65);
	--white-75-color: rgba(255, 255, 255, 0.75);
	--white-85-color: rgba(255, 255, 255, 0.85);

	/* Gray */	
	--gray-color: #8f93a5;
	--gray-10-color: rgba(143, 147, 165, 0.1);
	--gray-25-color: rgba(143, 147, 165, 0.25);
	--gray-50-color: rgba(143, 147, 165, 0.50);
	--gray-65-color: rgba(143, 147, 165, 0.65);
	--gray-75-color: rgba(143, 147, 165, 0.75);
	--gray-85-color: rgba(143, 147, 165, 0.85);

	/* Black */
	--black-color: #1a1a20;
	--black-10-color: rgba(26, 26, 32, 0.1);
	--black-25-color: rgba(26, 26, 32, 0.25);
	--black-50-color: rgba(26, 26, 32, 0.50);
	--black-65-color: rgba(26, 26, 32, 0.65);
	--black-75-color: rgba(26, 26, 32, 0.75);
	--black-85-color: rgba(26, 26, 32, 0.85);

	--degrade-color-1:#D39407;
	--degrade-color-2:var(--danger-color); 
}

/* #endregion Color */

/*----------------------------------------------
2. Typography
----------------------------------------------*/

/* #region Typography */

:root {
	--primary-font: "Open Sans", sans-serif;
	--secondary-font: "Balthazar", serif;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 1.5rem;
	font-family: var(--primary-font);  
  line-height: 1.2;
}

.text-style-1, 
.text-style-2, 
.text-style-3, 
.text-style-4, 
.text-style-5, 
.text-style-6, 
.text-style-7, 
.text-style-8 {
	font-family: var(--primary-font);  
	line-height: 1.2;
}

.text-style-1 { font-size: 6.2rem; font-weight: 800; }
.text-style-2 { font-size: 5.2rem; font-weight: 800; }
.text-style-3 { font-size: 4.2rem; font-weight: 800; }
.text-style-4 { font-size: 4.2rem; font-weight: 100; }
.text-style-5 { font-size: 3.2rem; font-weight: 800; }
.text-style-6 { font-size: 3.2rem; font-weight: 100; }
.text-style-7 { font-size: 2.2rem; font-weight: 700; }
.text-style-8 { font-size: 2.2rem; font-weight: 100; }
.text-style-9 { font-size: 1.75rem; font-weight: 700; }
.text-style-10 { font-size: 1.75rem; font-weight: 100; }
.text-style-11 { font-size: 1.2rem; font-weight: 700; }
.text-style-12 { font-size: 1.2rem; font-weight: 400; }

@media (max-width: 767px) {
	.text-style-1 { font-size: 3rem; }
	.text-style-2 { font-size: 3rem; }
	.text-style-3 { font-size: 3rem; }
	.text-style-4 { font-size: 3rem; }
	.text-style-5 { font-size: 2.2rem; font-weight: 700; }
	.text-style-6 { font-size: 2.2rem; }
	.text-style-7 { font-size: 1.75rem; }
	.text-style-8 { font-size: 1.75rem; }	
	.text-style-9 { font-size: 1.5rem; }
	.text-style-10 { font-size: 1.5rem; }
	.text-style-11 { font-size: 1.2rem; }
	.text-style-12 { font-size: 1rem; }
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

p:last-child {
	margin-bottom: 0;
}

b,
strong {
  font-weight: 700;
}

small, .small {
  font-size: 0.85rem;
}

/* #endregion Typography */


/*CUSTOM 1 -Tattoo*/

.armado {
   
    margin: auto;
}
  
  #comparison {
	  width: 100%;
	  padding-bottom: 100%;
	  overflow: hidden; 
	position: relative;
  }
  
  figure { 
	position: absolute;
	  background-image: url(../images/tattoo/antes.jpeg);
	  background-size: contain;
	  background-repeat: no-repeat;
	  font-size: 0;
	  width: 100%;
	  height: 100%;
	  margin: 0; 
  }
  
  #divisor { 
	  background-image: url(../images/tattoo/ahora.jpeg);
	  background-size: cover;
	  position: absolute;
	  width: 50%; 
	  max-width: 100%;
	  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
	  bottom: 0; height: 100%;
	
	&::before,
	&::after {
	  content: '';
	  position: absolute;
	  right: -2px;
	  width: 4px;
	  height: calc(50% - 25px);
	  background: white;
	  z-index: 3;
	}
	&::before {
	  top: 0;
	  box-shadow: 0 -3px 8px 1px rgba(0,0,0,.3);
	}
	&::after {
	  bottom: 0;
	  box-shadow: 0 3px 8px 1px rgba(0,0,0,.3);
	}
  }
  #handle {
	position: absolute;
	height: 50px;
	width: 50px;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	z-index: 1;
	
	&::before,
	&::after {
	  content: '';
	  width: 0;
	  height: 0;
	  border: 6px inset transparent;
	  position: absolute;
	  top: 50%;
	  margin-top: -6px;
	}
	&::before {
	  border-right: 6px solid white;
	  left: 50%;
	  margin-left: -17px;
	}
	&::after {
	  border-left: 6px solid white;
	  right: 50%;
	  margin-right: -17px;
	}
  }
  
  input[type=range]{
	  -webkit-appearance:none;
	  -moz-appearance:none;
	  position: absolute;
	  top: 50%; left: -25px;
	transform: translateY(-50%);
	  background-color: transparent;
	  width: calc(100% + 50px); 
	z-index: 2;
	
	&:focus,
	&:active {
	  border: none;
	  outline: none;
	}
  }
  input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	border: none;
	height: 50px;
	width: 50px;
	border-radius: 50%;
	background: transparent;
	border: 4px solid white;
	box-shadow: 0 0 8px 1px rgba(0,0,0,.3);
  }
  input[type=range]::-moz-range-track {
	  -moz-appearance:none;
	  height:15px;
	  width: 100%;
	  background-color: transparent; 
	  position: relative;
	  outline: none;    
  }



  /* custom 2 - murals */

  
.armado_m {
   
    margin: auto;
	width: 75%;
	height: auto;
}
  
  #comparison_m {
	  width: 100%;
	  padding-bottom: 100%;
	  overflow: hidden; 
	position: relative;
  }
  
  figure { 
	position: absolute;
	  background-image: url(../images/tattoo/antes.jpeg);
	  background-size: contain;
	  background-repeat: no-repeat;
	  font-size: 0;
	  width: 100%;
	  height: 100%;
	  margin: 0; 
  }
  
  #divisor_m { 
	  background-image: url(../images/tattoo/ahora.jpeg);
	  background-size: cover;
	  position: absolute;
	  width: 50%; 
	  max-width: 100%;
	  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
	  bottom: 0; height: 100%;
	
	&::before,
	&::after {
	  content: '';
	  position: absolute;
	  right: -2px;
	  width: 4px;
	  height: calc(50% - 25px);
	  background: white;
	  z-index: 3;
	}
	&::before {
	  top: 0;
	  box-shadow: 0 -3px 8px 1px rgba(0,0,0,.3);
	}
	&::after {
	  bottom: 0;
	  box-shadow: 0 3px 8px 1px rgba(0,0,0,.3);
	}
  }
  #handle_m {
	position: absolute;
	height: 50px;
	width: 50px;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	z-index: 1;
	
	&::before,
	&::after {
	  content: '';
	  width: 0;
	  height: 0;
	  border: 6px inset transparent;
	  position: absolute;
	  top: 50%;
	  margin-top: -6px;
	}
	&::before {
	  border-right: 6px solid white;
	  left: 50%;
	  margin-left: -17px;
	}
	&::after {
	  border-left: 6px solid white;
	  right: 50%;
	  margin-right: -17px;
	}
  }

  .video-responsive{
	height: 500px;
  }

  .video-responsive-store{
	height: 600px;
  }