# Empty CSS file for your own CSS
.principales{

}

@font-face {
  font-family: "Tango";
  src: url("../fonts/TangoSans.ttf") format('truetype');
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}

@font-face {
	font-family: "Tango Italic";
	src: url("../fonts/TangoSansItalic.ttf") format('truetype');
	font-display: swap;
	font-weight: normal;
	font-style: italic;
  }

@font-face {
  font-family: "Roboto Bold";
  src: url("../fonts/Roboto-Bold.ttf") format('truetype');
  font-display: swap;
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Roboto Medium";
  src: url("../fonts/Roboto-Medium.ttf") format('truetype');
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}

@font-face {
	font-family: "Roboto Regular";
	src: url("../fonts/Roboto-Regular.ttf") format('truetype');
	font-display: swap;
	font-weight: normal;
	font-style: normal;
  }


@font-face {
  font-family: "Roboto Light";
  src: url("../fonts/Roboto-Light.ttf") format('truetype');
  font-display: swap;
  font-weight: lighter;
  font-style: normal;
}

#headerTop{
	background: #45ab34;
	color: #fff;
	padding: 10px 50px;
}

.nav-link, form h3, h2.titulo, #productos p, #nosotros2 h2{
	font-family: "Tango Italic" !important;
}

#productos2{
	font-family: "Tango" !important;
}

.btn-primary, h6.industria, p, .footerBottom{
	font-family: "Roboto Regular" !important;
}

form p, label, .form-control, #headerTop{
	font-family: "Roboto Light" !important;
}

.card-link h5, footer h6, .descripcion span, b{
	font-family: "Roboto Bold" !important;
}

#nosotros span{
	font-family: "Roboto Regular" !important;
}

h1{
	font-size: 3.5rem;
}

label{
	font-size: .8rem;
}

.form-control{
	background: #f1f1f1;
}

.fondoBlanco{
	background: #fff;
	padding: 100px 50px;
}

.fondoGris{
	background: #f1f1f1;
	padding: 100px 50px;
}

.fondoImagen{
	background: url(../images/DT-Ex_LP_Fondo_PuntoVenta.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 100px 50px;
}

.principales{
	text-align: center;
}

.principales img{
	width: 100%;
	margin:0 auto;
}

h2.titulo{
	color: #294697;
	font-size: 3rem;
	margin-top: 10px;
}

h6.industria{
	color: #294697;
}

h6.industria:before{
	content: "";
    width: .8em;
    height: .8em;
    border-radius: 50px;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
    background: #f4901e;
}

p.descripcion{
	text-align: justify;
}

.descripcion span{
	color: #294697;
	font-weight: bold;
}

.card{
	border: 0;
	border-bottom: 2px solid #294697;
	border-radius: 0;
}

.primera{
	border-top: 2px solid #294697;
}

.fondoGris .card{
	background: #f1f1f1;
}

.card-header{
	background: transparent;
	border: 0;
}

.card-header i{
	float: right;
}

.card-link{
	color: #00c2f3;
	font-weight: bold;
}

.footerTop{
	background: #f1f1f1;
	padding: 50px;
}

.footerTop h6{
	color: #294697;
	font-weight: bold;
}

.footerBottom{
	background: #45ab34;
	color: #fff;
	padding: 30px 50px;
}

.footerBottom a{
	color: #fff;
}

#formulario{
	background: url(../images/DT-Ex_LP_Banner.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	color: #fff;
	padding-top: 100px;
	padding-bottom: 100px;
}

#formulario .col-md-6{
	margin: auto 0;
	padding: 0 50px;
}

#header{
	padding: 0 50px;
}

footer i{
	font-size: 24px;
	margin-left: 10px;
	float: right;
}

form{
	background: #294697;
	border-radius: 20px;
	margin: auto 40px;
	padding: 50px;
	color: #fff;
	text-align: center;
}

form h3{
	color: #fff;
}

.btn-primary{
	background: #00c2f3;
	color: #fff;
	border-radius: 30px;
	border: 0;
	padding: 15px 45px;
}

.btn-primary:hover{
	background: #049CC2;
}

.bg-light{
	background: #fff;
	background-color: #fff !important;
}

.navbar{
	padding: 10px 50px;
}

ul.navbar-nav{
	float: right;
}

a.nav-link{
	text-transform: uppercase;
	color: #294697 !important;
	font-size: 1rem;
}

a.nav-link:hover{
	color: #00c2f3 !important;
}

.nav-item{
	float: right;
}

#productos p{
	color: #45ab34;
	margin: 1rem 0;
	font-size: 1.5rem;
	text-align: center;
}

.productos{
	margin: 1rem 0;
}

.productos p{
	margin: 0 !important;
	line-height: 1.5rem;
	text-align: left !important;
}

#productos h2{
	margin-bottom: 2rem;
}

#nosotros2 h2{
	color: #294697;
	margin: 2rem 0;
}

#nosotros span{
	color: #294697;
}

#mapa a{
	background: #00c2f3;
	color: #fff;
	border-radius: 30px;
	border: 0;
	padding: 5px 30px;
}

#mapa iframe{
	margin-bottom: 2rem;
}

.page-scroll-on #header{
	top:0;
}

.materia img {
    width: 50px;
    height: 50px;
    display: inline-block;
	margin-right: 0.5rem;
}

.cremas img {
    width: 66px;
    height: 50px;
    display: inline-block;
	margin-right: 0.5rem;
}

.aceites img {
    width: 40px;
    height: 50px;
    display: inline-block;
	margin-right: 0.5rem;
}

.cuidado img, img.cuidado{
    width: 53px;
    height: 50px;
    display: inline-block;
	margin-right: 0.5rem;
}

.polvos img {
    width: 36px;
    height: 50px;
    display: inline-block;
	margin-right: 0.5rem;
}

.esencias img {
    width: 43px;
    height: 50px;
    display: inline-block;
	margin-right: 0.5rem;
}

.envases img {
    width: 84px;
    height: 50px;
    display: inline-block;
	margin-right: 0.5rem;
}

.grenetina img, img.grenetina{
    width: 50px;
    height: 50px;
    display: inline-block;
	margin-right: 0.5rem;
}

#gracias{
	margin: 10rem 0;
	text-align: center;
	color: #294697;
}

@media only screen and (max-width: 600px) {
	h1{
		font-size: 2.5rem;
	}
	.fondoGris, .fondoBlanco{
		padding: 100px 20px;
	}
	.fondoGris img{
		margin-top:30px;
	}
	/*.fondoBlanco img{
		margin-bottom: 30px;
	}*/
	#formulario{
		text-align: center;
	}
	footer{
		text-align: center;
	}
	footer i{
		float: unset;
	}

	.footerBottom .col-md-6:first-child{
		margin-bottom: 20px;
	}
	form{
		padding: 25px;
		margin: 0 auto;
	}
	#header{
		padding: 0;
	}
	ul.navbar-nav{
		width: 100%;
	}
	.navbar{
		padding: 10px;
	}
	#headerTop{
		padding: 10px;
		text-align: center;
	}
	#headerTop .col-md-2{
		margin-top: 10px;
	}
	h2.titulo{
		font-size: 1.5rem;
	}
	.fondoImagen, .fondoGris, .fondoBlanco{
		padding: 50px 15px;
	}
	#formulario{
		padding-top: 50px;
		padding-bottom: 50px;
	}
	#visitanos .col-md-6, #nosotros .col-md-6, #formulario .col-md-6{
		padding-top: 25px;
		padding-bottom: 25px;
	}
	.productos .col-md-1{
		-ms-flex: 0 0 8.333333%;
    	flex: 0 0 8.333333%;
    	max-width: 8.333333%;
	}
	.productos .col-md-3{
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%
	}
	.productos .col-md-7{
		-ms-flex: 0 0 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}
}
/* INICIO WHATS */

.whatsappme.whatsappme--show {
    transform: scale3d(1,1,1);
    transition: transform .5s cubic-bezier(.18,.89,.32,1.28);
}

.whatsappme__button {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    position: absolute;
    z-index: 2;
    bottom: 8px;
    right: 8px;
    height: 60px;
    min-width: 60px;
    max-width: 95vw;
    background-color: #25d366;
    color: #fff;
    border-radius: 30px;
    box-shadow: 1px 6px 24px 0 rgba(7,94,84,.24);
    cursor: pointer;
    transition: background-color .2s linear;
    -webkit-tap-highlight-color: transparent;
}

.whatsappme {
    position: fixed;
    z-index: 1000;
    right: 20px;
    bottom: 60px;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
    font-size: 16px;
    line-height: 1.625em;
    color: #262626;
    transform: scale3d(0,0,0);
    transition: transform .3s ease-in-out;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.whatsappme *, .whatsappme :after, .whatsappme :before {
    box-sizing: border-box;
}

.whatsappme__button svg {
    width: 36px;
    height: 36px;
    margin: 12px 12px;
}

.whatsappme svg, .whatsappme svg path {
    fill: currentColor!important;
}

.whatsappme--chatbox .whatsappme__button__send, .whatsappme__button__open {
    display: block;
}

.whatsappme *, .whatsappme :after, .whatsappme :before {
    box-sizing: border-box;
}

svg {
    overflow: hidden;
    vertical-align: middle;
}

.whatsappme__button__sendtext {
    padding: 0;
    max-width: 0;
    font-weight: 600;
    line-height: 60px;
    white-space: nowrap;
    opacity: 0;
    overflow: hidden;
    transition: none;
}

.whatsappme__copy {
    position: absolute;
    bottom: 9px;
    left: 28px;
    color: #2e8c7d;
    font-size: 11px;
    letter-spacing: .2px;
    line-height: 16px;
    opacity: .4;
    transition: opacity .25s;
}

.whatsappme--dark .whatsappme__copy {
    color: #25d366;
}

.whatsappme__button:hover {
    background-color: #128c7e;
    transition: background-color 1.5s linear;
}

.whatsappme__button:active {
    background-color: #075e54;
    transition: none;
}

/* FIN WHATS*/