/* 
	
	VARIABLES
	
*/

@color-brand: #e62a2a;
@color-brand-hover: darken(@color-brand, 15%);
@color-black: #000;
@color-white: #FFFFFF;
@color-green: #70a83b;
@color-dark-blue: #31383d;
@color-gray: #8b8b8b;
@color-light-blue: #f5f8fa;


@pixels-s: 10px;
@pixels-m: 30px;
@pixels-l: 40px;
@pixels-xl: 50px;
@pixels-xxl: 100px;

@screen-xs: 520px;
@screen-s: 640px;
@screen-m: 960px;
@screen-l: 1200px;
@screen-xl: 1600px;


/*

	FONTS
	
*/

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

@font-face {
    font-family: 'Replica Light';
    src: url('../fonts/ReplicaLL-Light.woff2') format('woff2'),
        url('../fonts/ReplicaLL-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

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



.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, h1, h2, h3, h4, h5, h6{
	font-family: 'Replica Light', sans-serif;
}



.font-w-light {
	font-weight: 300;
}


/* 
	
	GENERALES   
	
*/

#cta .bg-black {
	background-image: url(../img/FONDO_CTA.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 50% auto;
	
	@media screen and (max-width:1024px) {
		& {
			background-image: none;
		}
	}
	
}

.uk-label-secondary {
	background-color: @color-black;
}

a:hover {
	text-decoration: none;
}

a:hover img {
	opacity: 0.7;
	transition: all linear 0.2s;
}

strong {
	font-weight: bold!important;
}

.degradado-servicios {
	background: -prefix-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1));
	background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
	@media screen and (max-width:480px) {
		& {
			display: none;
		}
	}
}

.degradado-servicios-gris {
	background: -prefix-linear-gradient(left, rgba(248,248,248,0), rgba(248,248,248,1));
	background: linear-gradient(to right, rgba(248,248,248,0), rgba(248,248,248,1));
	@media screen and (max-width:480px) {
		& {
			display: none;
		}
	}
}

#offcanvas-nav-primary ul li ul li a {
	color: @color-black!important;
	@media screen and (max-width:640px) {
		& {
			color: @color-black!important;
		}
	}
}

.uk-width-2xlarge {
    width: 750px;
    max-width: calc 70vw;
}

#profesionales-confianza {
	background-image: url(../img/PROFESIONALES.jpg);
	background-position: center center;
	background-size: cover;
}

.uk-container-yannick {
	margin-left: auto;
	width: calc( ( (100vw - 1200px) / 2 ) + 1200px);
	max-width: calc(100vw - 40px);
	@media screen and (max-width:1024px) {
		& {
			max-width: calc(100vw - 30px);
		}
	}
	@media screen and (max-width:639px) {
		& {
			max-width: calc(100vw - 20px);
		}
	}
	@media screen and (max-width:480px) {
		& {
			padding-left: 15px;
			padding-right: 15px;
			margin-left: 0;
			max-width: calc(100vw - 20px);
		}
	}
	
}

body {
	overflow-x: hidden;
	font-family: 'Replica Light', sans-serif;
	color: #000;
	font-size: 16px;
}

b, strong, .strong, .uk-text-bold {
	font-family: 'Replica Bold', sans-serif;
}

.uk-navbar li a {
	font-size: 18px!important;
}

.text-black{
	color:@color-black!important;
}

.text-white{
	color:@color-white;
}

.text-gray{
	color: @color-gray!important;
}

.color-brand{
	color:@color-brand!important;
}

.bg-black{
	background: @color-black;
}

.bg-white{
	background: @color-white;
}

.bg-dark-blue{
	background: @color-dark-blue;
}

.bg-generic{
	background-image: url(../img/BG_GENERICO.jpg);
	background-position: cover;
	background-repeat: no-repeat;
}

.color-dark-blue{
	color:@color-dark-blue!important;
}

.bg-brand{
	background: @color-brand;
}

.bg-green{
	background: @color-green;
}

.bg-light-blue{
	background: @color-light-blue;
}

.color-green{
	color:@color-green!important;
}

.text-light{
	font-weight:100!important;
}

.text-bold{
	font-weight:700;
}

.text-italic{
	font-style:italic;
}

.uk-text-xsmall{
	font-size:0.7em;
}


.logo{
	width:220px;
	
	@media screen and (max-width:639px) {
		& {
			width:170px;
		}
	}
}

.z-index{
	z-index: 1!important;
}


.circulo{
	border-radius: 50%;
	width: 80px;
	height: 80px;
	background:@color-white;
}

.dark-link:hover{
	color:@color-dark-blue;
	text-decoration:none;
}

.light-link:hover{
	color:@color-brand;
	text-decoration:none;
}

.overflow-auto{
	overflow-y: auto;
}

.uk-text-xsmall{
	font-size:0.7em;
}

#main-slider .uk-text-lead{
	color:white!important;
	text-shadow:0px 0px 2px black;
}

.texto-imagen-portada{
	margin-top:0;
	@media screen and (min-width:@screen-m) {
		& {
			margin-top:-50px!important;
		}
	}
}


.pt-30{
	padding-top:30px!important;
}

.restar-padding-m{
	padding-left:inherit;
	@media screen and (min-width:@screen-m) {
		& {
			padding-left:0px!important;
		}
	}
}




#sobre{
	max-width:inherit!important;
	right:250px;
	bottom:100px;
	img{
		max-width:inherit!important;
	}
	
	@media screen and (max-width:1199px) {
		&{
			top:200px;
		}
		
	}
}

#sobre.en-buzon {
	right:90%;
}


#sobre.animate{
	-webkit-transition: all 1.0s linear;
    -moz-transition: all 1.0s linear;
    -o-transition: all 1.0s linear;
    -ms-transition: all 1.0s linear;    
    transition: all 1.0s linear!important;
}


/* 
	
	ANIMACIONES   
	
*/

.animacion-rotar{
	-webkit-animation-name: spin;
    -webkit-animation-duration: 40000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;
    -moz-animation-duration: 40000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;
    -ms-animation-duration: 40000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 40000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    @-ms-keyframes spin { 
        from { 
            -ms-transform: rotate(0deg); 
        } to { 
            -ms-transform: rotate(360deg); 
        }
    }
    @-moz-keyframes spin { 
        from { 
            -moz-transform: rotate(0deg); 
        } to { 
            -moz-transform: rotate(360deg); 
        }
    }
    @-webkit-keyframes spin { 
        from { 
            -webkit-transform: rotate(0deg); 
        } to { 
            -webkit-transform: rotate(360deg); 
        }
    }
    @keyframes spin { 
        from { 
            transform: rotate(0deg); 
        } to { 
            transform: rotate(360deg); 
        }
    }
}




.dashed{
  stroke-dasharray: 5px;
  animation: dash 1s linear infinite;

}


@keyframes dash {

  to {
    stroke-dashoffset: 10;
  }
}








/* 
	
	SLIDESHOW   
	
*/

#main-slider .uk-slideshow-items {
	height: 80vh!important;
	max-height: 80vh!important;
	min-height: 0!important;
	@media screen and (max-width:640px) {
		& {
			height:100vh!important;
		}
	}
}



.uk-card .uk-slideshow-items {
	@media screen and (min-width:639px) {
		& {
			height:100%!important;
		}
	}
}

.uk-dotnav li {
	padding-left: 0!important;
	margin-right: 0px;
}

.uk-dotnav li a {
	clip-path: polygon(50% 0, 100% 0%, 50% 100%, 0 100%);
}

.uk-dotnav>*>* {
	border: 0!important;
	border-radius: 0 !important;
	height: 26px !important;
	width: 30px!important;
	background-color: rgba(255,255,255, 0.35)!important;
	display: block;
	box-sizing: border-box;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	transition: .2s ease-in-out;
	transition-property: background-color;
	&:hover {
		background-color: @color-white !important;
	}

	@media screen and (min-width: @screen-l) {
		& {
			margin-top: 5px;
		}
	}
}

.uk-dotnav .uk-active a{
	background-color:@color-white!important;
}

/*
	
	GRID SERVICIOS 
	
*/

.servicio {
	
	position: relative;
	background-color: @color-black;
	overflow-x: visible;

	
	& .texto {
		position: absolute;
		color: @color-white;
		z-index: 120;
		top: 0;
		margin-right: 30px;
		
		& .uk-h3 {
			color: @color-white!important;
			min-height: 66px;
			margin-top: 20px!important;
			
		}
		
		& p {
			opacity: 1;
			transition: opacity 0.25s linear;
		}
		
	}
	
	& .img{
		opacity: 0;
		transition: opacity 0.25s linear;
		margin-left: -42px;
		margin-right: -1px;
	}
	
	&::after {
		content: "";
		height: 96%;
		width:1px;
		top: 2%;
		margin-left: -40px;
		position: absolute;
		right: 1px;
		background-color: @color-white;
		z-index: 0;
		opacity: 1;
		transition: opacity 0.25s linear;
	}
	
	&:hover{
		& .img{
			opacity: 1;
			z-index: 100;
		}
		& .texto p {
			opacity: 0;
			z-index: 102;
		}
		&::after {
			opacity: 0;	
		}
	
	}

}

.servicio .img::after {
	background: rgba(0,0,0,0.5);
	background: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.5)), color-stop(100%, rgba(0,0,0,0)));
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
	background: -ms-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );

	height:  100px;
	width: 102%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	content: "";
	margin-left: -2px;
	margin-right: -2px;
}

.servicio.uk-active:last-child::after {
	
		display: none;	
	
}

.uk-height-custom-70{
	padding-bottom:70%;
}

#ventajas .uk-grid-divider div::before, #contacto-portada .uk-grid-divider div::before {
	
		border-color: white!important;
	
}

#ventajas {
	
	p {
		color: @color-white;
		max-width: 75%;
	}
	
}


/* 
	
	NAVBAR     
	
*/

body.portada .logo{
	opacity: 0;
}

#sticky-header {
	
	
	background: @color-white;
	
	
	
	&.uk-sticky-fixed.uk-active{
		background-color: @color-white;

		padding:0!important;
		transition:padding ease 0.4s;
		.logo{
			display: block!important;
			width:220px;
			opacity: 1;
			transition: opacity linear 0.2s;
		}
		
		
		
	}
}

.logo-slider-container {
	max-width: 65vw;
}

.logo-slider-container .claim h1 {	
	@media screen and (max-width:480px) {
		& {
			font-size: 0.7rem!important;
			margin-top: 5px!important;
		}
	}
}

.logo-slider {
	width: 580px; 
	max-width: 65vw;
	
	@media screen and (max-width:480px) {
		& {
			width:250px!important;
		}
	}
	
}

.portada #sticky-header {
	
	position: absolute;
	background: transparent;
	z-index: 1000;
	
	.uk-navbar-nav>li>a {
		color: @color-white;
	}
	
	
	.uk-navbar-nav>li>a {
		color: @color-white;
	}
	
	&.uk-sticky-fixed.uk-active{
		background-color: @color-white;

		padding:0!important;
		transition:padding ease 0.4s;
		.logo{
			display: block!important;
			width:220px;
			opacity: 1;
			transition: opacity linear 0.2s;
		}
		
		.uk-navbar-nav>li>a, .uk-navbar-toggle {
			color: @color-black!important;
		}
		
	}
}

body:not(.portada) .wrapper {
	margin-top: 100px;
}

.portada .uk-sticky-placeholder {
	position: absolute!important;
	width: 100%!important;
}

body:not(.portada) .uk-sticky-placeholder {
	display: none!important;
}

#contacto-portada {
	
	& a:hover {
		color: @color-brand;
	}
	
}

header{
	padding-top:10px;
	padding-bottom:10px;
	
	&.logo{
		display: none;
	}
	
	
}



.uk-navbar {
	
	@media screen and (max-width:639px) {
		& {
			padding:0px;
		}
	}
	
	li a{
		font-size:1em;
		font-weight:400;
	}
	.uk-navbar-nav li a{
		text-decoration:none;
		text-transform: none;
	}	
	.uk-navbar-right a:hover{
		text-decoration:none;
		color:@color-brand!important;
	}
	
	.uk-navbar-toggle {
		color: white!important;
	}
	
}


.uk-navbar-dropdown {
    display: none;
    position: absolute;
    z-index: 1020;
    box-sizing: border-box;
    width: 240px;
    padding: 25px;
    background: #fff;
    color: #666;
    box-shadow: 0 5px 12px rgba(0,0,0,.15);
    margin-top:-20px;
}


/* 
	
	OFFCANVAS
	
*/







#offcanvas-nav-primary{

	.uk-icon-button{
		color:@color-white;
		margin-bottom:5px;
	}
	.uk-icon-button:hover{
		background-color:@color-brand;
		color:@color-white;
		
	}

	.uk-offcanvas-bar{
    background-size: cover;
    background-position: center bottom;
	background-color:@color-black;
	}
	ul li a{
		color:@color-white!important;
		transition: color ease 0.4s;
		&:hover{
		color:@color-brand!important;
		}
	}
	
}






/* 
	
	BOTONES
	
*/


.btn-brand{
	background-color: @color-brand;
	color: @color-white;
	padding: 12px 23px;
	font-size:0.8em!important;
	text-transform: uppercase;
	cursor: pointer;
	border:none;
	&:hover{
		background-color: @color-brand-hover;
		color:white!important;
		text-decoration:none!important;
		transition:all ease 0.4s; 
	}
}	


.btn-secundario{
	background-color: transparent;
	color: @color-white;
	padding: 12px 25px;
	font-size:1em!important;
	text-transform: uppercase;
	cursor: pointer;
	border:2px solid @color-white;
	border-radius: 500px;
	
	&:hover{
		background-color: @color-white;
		border:2px solid @color-white;
		color:@color-black!important;
		text-decoration:none!important;
		transition:all ease 0.4s;
	}
}	


.btn-slider{
	background-color: transparent;
	color: @color-white;
	padding: 12px 25px;
	font-size:1em!important;
	text-transform: uppercase;
	cursor: pointer;
	border:2px solid @color-white;
	border-radius: 500px;
	
	&:hover{
		background-color: @color-white;
		border:2px solid @color-white;
		color:@color-black!important;
		text-decoration:none!important;
		transition:all ease 0.4s; 
	}
}	


.uk-button.uk-button-brand{
	background:@color-brand;
	color:white;
	border: 1px solid @color-brand;
	&:hover{
		background-color: @color-brand-hover;
		color:white!important;
	}
}




/* 
	
	OVERLAYS
	
*/



.uk-overlay-hover{
    background:rgba(221, 94, 78, 0.8);
    opacity:0;
    cursor:pointer;
    &:hover{
		opacity:1;
		transition:opacity ease-in-out 0.4s;
	
	}
	
}










/* 
	
	Footer
	
*/


footer {
	background: @color-black;
	a {
		color: inherit;
		&:hover {
			color:@color-brand!important;
			text-decoration:none;
		}
	}
}

footer .uk-icon-button{
	background:transparent;
	border:1px solid @color-brand;
	color:inherit;
	&:hover{
		background:@color-brand;
		border:1px solid @color-brand;
		color:white!important;
	}
}