/*Fonts Import*/
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700,900&display=swap');

/*Main Styles*/
body{
	font-family: 'Montserrat', sans-serif;
}
.section-1{
	background: #004269;
	position: relative;
}
.section-1 .logo{
	padding: 8rem 0;
	width: 35vw;
}
.section-1 .section-1-img{
	background-image: url(../images/gruas-1.jpg);
	background-size: cover;
	background-position: center;
	min-height: 600px;
	position: relative;
	z-index: 1;
}
.grua-content-1{
	padding-right: 0;
	position: relative;
	padding-left: 30px;
}
.grua-content-1 .col-md-5{
	background: #E2E2E2;
	position: relative;
}
.circle-point-1{
	top: 20px;
    position: absolute;
    left: calc(100% - 122.5px);
    z-index: 2;
}
.grua-content-1 .cuadro-blue{
	background: #004269;
    width: 200px;
    height: 200px;
    z-index: 1;
    position: absolute;
    left: 30px;
    top: 0;
}
.grua-content-1 h1{
	font-family: Arial;
    font-size: 4rem;
    text-transform: uppercase;
    color: #fff;
    position: absolute;
    font-weight: 900;
    left: 10%;
    z-index: 2;
    top: calc(50% + 40px);
}
.description-company{
	padding-left: 30px;
	padding-right: 0;
}
.description-company .col-md-12{
	color: #606060;
	font-size: 18px;
	background: #E2E2E2;
}
.description-company .col-md-5{
	padding: 3rem 15px;
}
.valor-add{
	color: #FDDF00;
	padding: 4rem 0;
}
.valor-add p{
	margin-bottom: 0;
	text-align: justify;
	font-size: 18px;
	position: relative;
	font-style: italic;
}
.valor-add p:before{
	content: '';
	width: 40px;
	height: 8px;
	background: #fff;
	position: absolute;
	top: 0;
	left: -60px;
}
.valor-add img{
	border: 2px solid #fff;
	border-radius: 50%;
	padding: 10px;
}
.section-2{
	background: #E2E2E2;
	padding: 4rem 0;
	padding-bottom: 0;
}
.section-2 .container{
	position: relative;
}
.section-2 .container .row{
	position: relative;
	z-index: 1;
}
.content-sec-2 p{
	color: #606060;
	text-align: justify;
	padding-right: 8rem;
	margin-bottom: 0;
	padding-bottom: 18rem;
}
.type-black{
	background: #000000;
	color: #FDDF00;
	padding: 0;
	min-height: 190px;
	text-align: center;
}
.type-blue{
	color: #FDDF00;
	background: #004269;
	padding: 0;
	min-height: 190px;
	text-align: center;
}
.type-yellow{
	background: #FDDF00;
	color: #000;
	padding: 0;
	min-height: 190px;
	text-align: center;
}
.type-black p, .type-yellow p, .type-blue p{
	margin-bottom: 0;
	font-weight: 900;
	text-transform: uppercase;
	font-family: Arial;
	font-size: 20px;
}
.type-absolute{
	position: absolute;
	width: 100%;
	left: 0;
	top: -50%;
}
.about-us{
	background: #FDDF00;
	padding: 3rem 8rem 3rem 3rem;
	position: relative;
	z-index: 1;
}
.about-us p{
	color: #000;
}
.background-size{
	background-size: 120%;
	background-position: center;
	background-image: url(../images/gruas-2.png)
}
.content-circles{
	width: 278px;
	height: 139px;
	overflow: hidden;
    position: relative;
    margin-top: 20px;
}
/*Circle 2*/
.content-circles-2{
    position: relative;
    margin-top: 20px;
    padding: 15px;
	text-align: right;
}
.content-circles-2 .circle-points{
	width: 100%;
	max-width: 240px;
}
.circle-blue-sec-2{
	position: absolute;
	right: 0;
	top: 15px;
	width: 120px;
}
.circle-yellow-3{
	position: absolute;
    top: -30px;
    right: 90px;
}
/*End Circle 2*/
.circle-line{
	position: absolute;
    left: 0;
    top: -100%;
}
.circle-blue-4{
	width: 139px;
	position: relative;
	z-index: 1;
}
.footer-services{
	margin-top: 3rem;
}
.footer-services .background-size{
	min-height: 380px;
}
/*Section 3*/
.section-3{
	position: relative;
	overflow: hidden;
	background: #004269;
}
.download-catalogo{
	border: 2px solid #FDDF00;
    font-family: Arial;
    border-radius: 20px;
    padding: 1rem;
    font-size: 24px;
    width: 100%;
    max-width: 400px;
    font-weight: 900;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 auto;
    margin-top: 3rem;
    margin-bottom: 3rem;
    transition: all .3s;
}
.download-catalogo:hover{
	text-decoration: none;
	background: #FDDF00;
}
.contact-site{
	background: #fff;
	position: relative;
	overflow: hidden;
	min-height: 300px;
}
.contact-site form{
	padding: 5rem 2rem 2rem 2rem;
	background: #e2e2e2;
}
.contact-site form input[type="number"], .contact-site form input[type="text"], .contact-site form input[type="email"]{
	width: 100%;
	display: block;
	background: #FFFFFF;
	border: none;
	padding: 10px;
	margin-bottom: 20px;
	border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
	font-family: Arial;
}
.contact-site form input[type="number"]::placeholder, .contact-site form input[type="text"]::placeholder, .contact-site form input[type="email"]::placeholder{
	color: #E2E2E2;
	font-weight: 900;
	text-transform: uppercase;
}
.contact-site form input[type="submit"]{
	background: #000;
	font-family: Arial;
	font-weight: 900;
	color: #fddf00;
	text-align: center;
	border: 0;
	border-radius: 20px;
	display: block;
	margin: 0 auto;
	margin-top: 2rem;
	margin-bottom: 2rem;
	padding: 10px;
	cursor: pointer;
	text-transform: uppercase;
	width: 100%;
}
input:focus{
	outline: none;
}
.contact-site .row{
	padding: 3rem;
}
.contact-site .link-phone{
	color: #004269;
	text-transform: uppercase;
	font-weight: 900;
	font-family: Arial;
	font-size: 2rem;
}
.contact-site .link-email{
	color: #000;
	text-transform: uppercase;
	font-weight: normal;
	font-family: Arial;
	font-size: 1rem;
}
.contact-site .col-md-5{
	position: relative;
}
.img-float{
	position: absolute;
    right: 0;
    width: 50%;
    z-index: 2;
    height: 50%;
    background-image: url(../images/gruas-3.jpg);
    background-size: cover;
    background-position: center;
}
/*Circle 3*/
.circle-content-3{
	position: absolute;
    right: -200px;
    bottom: 0;
}
.blue-content-3{
	position: absolute;
    bottom: 30px;
    left: -27px;
    width: 94px;
}
.yellow-content-3{
	position: absolute;
    left: calc(50% - 44px);
    bottom: -44px;
}
/*End Circle 3*/

/*Circle 4*/
.content-circle-4{
	    width: 278px;
    height: 139px;
    overflow: hidden;
    position: absolute;
    margin-top: 20px;
    top: -120px;
    left: 17%;
    z-index: 1;
}
/*End Circle 4*/

.img-float-1{
	position: absolute;
    top: 7%;
    width: 100%;
    max-width: 830px;
    left: -24%;
}
.img-float-2{
	position: absolute;
    top: 40%;
    width: 100%;
}
.img-float-3{
	position: absolute;
    top: 70%;
    right: 0;
    width: 50%;
    max-width: 630px;
}
.img-float-4{
	position: absolute;
	bottom: 0;
    right: -20%;
    width: 100%;
}
.img-float-5{
	position: absolute;
    top: 12%;
    width: 100%;
    max-width: 290px;
    right: 0;
}
.img-float-6{
	position: absolute;
    top: -40%;
    width: 100%;
    max-width: 500px;
    right: 0;
}
/*Animation*/
@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 20s linear infinite;
  -moz-animation: rotating 20s linear infinite;
  -ms-animation: rotating 20s linear infinite;
  -o-animation: rotating 20s linear infinite;
  animation: rotating 20s linear infinite;
}

@media only screen and (max-width:500px){
	.grua-content-1 h1{
		font-size: 2rem;
	}
	.section-1 .logo {
	    padding: 4rem 0;
	    width: 90vw;
	}
	.d-none-movil{
		display: none;
	}
	.img-float-1{
		display: none;
	}
	.img-float-2{
		display: none;
	}
	.img-float-3{
		display: none;
	}
	.img-float-5{
		display: none;
	}
	.img-float{
		display: none;
	}
	.content-sec-2 p{
		padding-right: 0;
		padding-top: 5rem;
		padding-bottom: 5rem;
	}
	.about-us {
	    background: #FDDF00;
	    padding: 2rem 1rem 2rem 1rem;
	    position: relative;
	    z-index: 1;
	}
	.circle-content-3{
		display: none;
	}
	.contact-site .row{
		padding: 1rem 0;
	}
	.background-size{
		background-size: cover;
	}
	.contact-site form {
	    padding: 1rem 1rem 1rem 1rem;
	    background: #e2e2e2;
	}
	.img-float-4{
		display: none;
	}
	.description-company{
		padding-left: 0;
	}
}