/* 
	
	VARIABLES
	
*/

@color-brand: #dd5e4e;
@color-brand-hover: darken(@color-brand, 15%);
@color-black: #211915;
@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;




.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, h1, h2, h3, h4, h5, h6{
	font-family:inherit!important;
}


/* 
	
	GENERALES   
	
*/

body {
	overflow-x: hidden;
	font-family: 'Poppins', sans-serif;	
}

.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-gradient{
	background:linear-gradient(to top right, #425b76, #0091b0, #00a4bd, #7fd1de);
}

.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:85px;
	@media screen and (max-width:639px) {
		& {
			width:70px;
		}
	}
}

.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;
  }
}



/* 
	
	IMAGEN BACKGROUND PORTADA   
	
*/


#worker{
	position:absolute;
	right:50%;
	bottom:0;
	@media screen and (max-width:1560px) {
		& {
			right:0;
			margin-right:60px;
		}
	}
}

#truck{
	@media screen and (max-width:1395px) {
		& {
		
			margin-left:450px;			
		}
	}
	
	@media screen and (max-width:1095px) {
		& {

			margin-bottom:120px;		
		}
	}
	
	@media screen and (min-width:1095px) {
		& {

			margin-bottom:100px;		
		}
	}
	
	@media screen and (min-width:1170px) {
		& {

			margin-bottom:50px;		
		}
	}
	


}






/* 
	
	SLIDESHOW   
	
*/



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


.uk-dotnav>*>* {
	border-radius: 0 !important;
	height: 5px !important;
	background-color: white;
	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-brand !important;
	}

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



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




.servicio-gif{
	display:none;
}

.card-servicio:hover{
	& .servicio-img{
	display:none;
	}
	& .servicio-gif{
		display:block;
		margin:0 auto;
		
	}
}

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


/* 
	
	NAVBAR     
	
*/


header{
	background-color:white;
	padding-top:30px;
	padding-bottom:30px;
	
	&.uk-sticky-fixed.uk-active{
		padding:0!important;
		transition:padding ease 0.4s;
		.logo{
			width:60px;
			transition:width ease-in-out 0.4s;
		}
	}
}



.uk-navbar {
	background:@color-white;
	@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-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-dark-blue;
	}
	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;
	border:2px solid @color-black;
	color: @color-black;
	padding: 18px 25px;
	font-size:1em!important;
	text-transform: uppercase;
	cursor: pointer;
	&:hover{
		background-color:@color-black;
		color:white!important;
		text-decoration:none!important;
		transition:all ease 0.4s; 
	}
}	


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


.uk-button.uk-button-default{
	background:@color-brand;
	color:white;
	border: 1px solid @color-brand;
}




/* 
	
	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: white;
		&:hover {
			color:@color-brand!important;
			text-decoration:none;
		}
	}
}

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