body,html{
	margin: 0;
	padding: 0;
}

/*** header ***/

.fix {

	position: fixed;
	bottom: 15px;
	left: 15px; 
	max-width: 100px;
	cursor: pointer;
	
}


.fix:hover{

	text-shadow: 0px 0px 5px #999; 
	max-width: 120px;
	cursor: pointer;
}


	.header-w{
		margin: 0%;
		padding: 0%;
		width: 100%;
		display: flex;
		top: 0%;
		background-color: #fff;
		justify-content: center;
		position: fixed;
		z-index: 2;
		border-bottom: 5px solid #ba3a3f;
	}
	.menu-header{
		width: 80%;
	    margin: 0% 0% 0% 0%;
	    padding: 1%;
	    border-radius: 100px 100px 100px 100px;
	    background-color: #0000;
	    font-family: 'Red Hat Display', sans-serif;
	}
	.menu-header img{
		width: 55%;
		float: left;
		cursor: pointer;
	}
	.menu-header ul{
		list-style: none;
		display: flex;
		justify-content: space-between;
		margin: 0%;
		padding: 0%;
	}
	.menu-header li{
		text-align: center;
	}

	.menu-header h2{
		padding: 5% 0% 0% 0%;
		font-size: 45px;
		color: #ba3a3f;
		font-weight: bold;
	}
	.menu-header p{
		padding: 0% 0% 0% 0%;
	    margin: 0%;
	    font-size: 20px;
	    letter-spacing: 1px;
	    cursor: pointer; 
	}

	.header-mobil{
		position: fixed;
		z-index: 5;
		width: 100%;
		top: 0px;
		right: 0px;
		padding: 0%;
		display: none;
		background-color: #fff;
		border-bottom: 1.5px solid #bc3a3f52;
	}


	.header-mobil ul{
		width: 100%;
		margin: 0%;
		padding: 0%;
		display: flex;
		justify-content: space-between;
		list-style: none;
	}

	.header-mobil ul>li{
		width: 50%;
		margin: auto 0%;
		padding: 0%;
	}

	.header-mobil ul>li>img{
		width: 35%;
		margin-left: 5%;
	}

	.header-mobil p{
		padding: 0%;
	    margin: auto 0%;
	    display: flex;
	    font-family: 'Red Hat Display', sans-serif;
	    font-size: 22px;
	    color: #ba3a3f;
	    font-weight: bold;
	    text-align: center;
	    letter-spacing: 1px;
	    line-height: 22px;
	}

	.header-mobil p>span{
		margin: 5px auto;
	    padding: 5px 10px;
	    border: 2px solid #ba3a3f;
	    border-radius: 10px;
	}

	.header-mobil p>span>a{
		color: #333!important;
		font-size: 20px!important;
	}

	.header-mobil img{
		margin: auto;
		width: 50%;
	}

	.content-garantia{
	width: 100%;
	text-align: center;
}

.content-garantia h1{
	font-family: 'Red Hat Display', sans-serif;
	padding: 3% 0% 3% 0%;
	font-size: 35px;
	color: #0052a4;
	font-weight: bold;
	text-align: left;
}

.content-garantia div{
	width: 100%;
}

.content-garantia p {
	font-family: 'Red Hat Display', sans-serif;
	font-size: 25px;

}

.content-garantia img {
	width: 50%;
    padding: 10%;
    transition: 0.3s;
}

.content-garantia img:hover{
	transform: scale(1.2);
	transition: 0.3s;
}
.content-service{
	width: 100%;
	text-align: center;
}

.content-service h1{
	font-family: 'Red Hat Display', sans-serif;
	padding: 3% 0% 3% 0%;
	font-size: 35px;
	color: #0052a4;
	font-weight: bold;
	text-align: left;
}

.content-service ul{
	width: 100%;
	list-style: none;
	text-align: left;
}

.content-service li{
	font-family: 'Red Hat Display', sans-serif;	
	font-size: 25px;
	padding: 2% 0%;
}

.content-service i{
	font-size: 25px;
	color: #ba3a3f;
	margin-right: 1%;
}

.content-service img{
	width: 100%;
}


	@media( max-width: 1024px){
		.header-w ul>li {
		    font-size: 18px;
		}
	}

	@media( max-width: 768px){
		.header-w ul>li {
		    font-size: 15px;
		}
	}

	@media( max-width: 425px){
		.header-w {
		    display: none;
		}

		.header-mobil{
			display: block;
		}
	}

/*** slide ***/

	.slide-00{
		width: 100%;
		margin-top: 5.5%;
	}

	.slide-00 h2{
		font-family: 'Red Hat Display', sans-serif;
		position: absolute;
		width: 100%;
		top: 10%;
		font-size: 45px;
		letter-spacing: 1px;
		font-weight: bold;
		color: #fff;
		text-align: left;
		padding-left: 5%;
	}

	.img-pc{

	}

	.img-mobil{
		display: none!important;
	}

/*** button-phone ***/

	.button-phone{
		position: fixed;
	    right: 2%;
    	top: 2%;
	    z-index: 3;
	    font-size: 25px;
	    width: 55px;
	    height: 55px;
	    display: flex;
	    border-radius: 50px;
	    border: none;
	    background: #4CAF50;
	    color: #fff;
	    outline: none!important;
	    display: none;
	}

	.button-phone:hover{
		border: 2px solid #f44336c4;
	}

	.button-phone>i{
		margin: auto;
		transform: rotate(90deg);
	}

/*** whatsapp button ***/

	.button-whatsapp{
		margin: 0;
		padding: 0;
		border:none;
		outline: none!important;
		position: fixed;
		z-index: 5;
		bottom: 50px;
    	left: 20px;
		border-radius: 50px;
		display: flex;
		justify-content: flex-start;
		background-color: #0000;
	}

	.button-whatsapp p{
		width: 60px;
		height: 60px;
		margin: 0px;
		padding: 0px;
		display: flex;
		background-color: #28a745;
		border-radius: 50px;
	}

	.button-whatsapp p>i{
		margin: auto;
		font-size: 30px;
		color: #fff;
	}

	.button-whatsapp h2{
		background-color: #28a745;
		color: #fff;
		font-size: 20px;
		width: 0px;
		height: 40px;
		border-radius: 15px;
		margin: 10px 0px 10px 10px;
		padding: 5px 0px;
		visibility: hidden;
		opacity: 0;
		transition: 0.2s;
		transform: translateX(-30px);
	}

	.button-whatsapp-ative h2{
		background-color: #28a745;
		color: #fff;
		font-size: 20px;
		width: 180px;
		height: 40px;
		border-radius: 50px;
		margin: 10px 0px 10px 10px;
		padding: 5px 0px;
		visibility: visible;
		opacity:1;
		transition: 0.2s;
		transform: translateX(0px);
	}

/*** Principal content ***/
	.container-sections{
		width: 100%;
		margin: 0% 0% 0% 0%;
		padding: 0% 10% 0% 10%;
	}

	.box-01 h2{
		font-family: 'Red Hat Display', sans-serif;
	    padding: 8% 0% 5% 0%;
	    font-size: 35px;
	    color: #5b82bc;
	    font-weight: bold;
	    text-align: center;
	    letter-spacing: 1px;
	}

	.box-01 h3{
		font-family: 'Red Hat Display', sans-serif;
	    padding: 5% 0% 2% 0%;
	    font-size: 35px;
	    color: #5b82bc;
	    font-weight: bold;
	    text-align: center;
	    letter-spacing: 1px;
	}

	.box-01 h4{
		font-family: 'Red Hat Display', sans-serif;
	    padding: 5% 0% 2% 0%;
	    font-size: 35px;
	    color: #5b82bc;
	    font-weight: bold;
	    text-align: left;
	    letter-spacing: 1px;
	}

	.box-01 h5{
		font-family: 'Red Hat Display', sans-serif;
	    padding: 8% 0% 0% 0%;
	    font-size: 55px;
	    color: #ba3a3f;
	    font-weight: bold;
	    text-align: center;
	    letter-spacing: 1px;
	}

	.box-01 p{
		font-family: 'Red Hat Display', sans-serif;
		margin: 0% 0% 3% 0%;
	    padding: 0% 0% 0% 0%;
	    font-size: 22px;
	    color: #212121;
	    text-align: center;
	    letter-spacing: 1px;
	}

	.box-01 img{
		width: 80%;
		margin: 0% 10%;
		border-radius: 5px;
	}

	.box-01 ol{
		width: 100%;
		list-style: none;
	}

	.box-01 ol>li{
		font-family: 'Red Hat Display', sans-serif;
	    margin: 1% 0% 3% 0%;
	    padding: 0% 0% 0% 0%;
	    font-size: 22px;
	    color: #212121;
	    text-align: left;
	    letter-spacing: 1px;
	}

	.box-01 ol>li>i{
		color: #ba3a3f;
	}


	.box-01 ul{
		width: 100%;
		margin: 0%;
		padding: 0%;
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.box-01 ul>li{
		text-align: center;
		width: 24%;
		margin-bottom: 5%;
	}

	.box-01 ul>li>img{
		transform: scale(1);
		transition: 0.3s;
		cursor: pointer;
	}

	.box-01 ul>li>img:hover{
		transform: scale(1.09);
		transition: 0.3s;
	}

	.box-01 ul>li>button{
		font-family: 'Red Hat Display', sans-serif;
	    width: 60%;
	    margin: 5% 20% 0% 20%;
	    padding: 2%;
	    text-align: center;
	    letter-spacing: 1.5px;
	    font-size: 20px;
	    background-color: #5b82bc;
	    color: #fff;
	    font-weight: bold;
	    border-radius: 5px;
	    cursor: pointer;
	    outline: none;
	    border: none;
	}


	.box-bann{
		width: 100%;
		padding: 30% 10%;
		background-color: #0000;
		background-image: url(../images/img/bann_1.jpg);
		background-size: cover;
		background-position: center;
	}

	.content-process{
		width: 100%;
		text-align: center;
		font-family: 'Red Hat Display', sans-serif;
	}

	.content-process h1{
		font-family: 'Red Hat Display', sans-serif;
		padding: 3% 0% 3% 0%;
		font-size: 35px;
		color: #0052a4;
		font-weight: bold;
		text-align: center;
	}
	.content-process h2{
		font-family: 'Red Hat Display', sans-serif;
		padding: 3% 0% 3% 0%;
		font-size: 35px;
		color: #0052a4;
		font-weight: bold;
		line-height: 55px;
	}

	.content-process div{
		width: 100%;
		margin: 0%;
		padding: 0%;
	}

	.content-process img{
		width: 100%;
		border-radius: 10px;
	}

	.content-process p{
		font-size: 20px;
	    width: 70%;
	    background-color: #ba3a3f;
	    color: #fff;
	    margin: 5% 15%;
	    padding: 1%;
	    border-radius: 5px;
	    cursor: pointer;
	    letter-spacing: 1px;
	    font-weight: bold;

	}

	.content-process h3{
		font-family: 'Red Hat Display', sans-serif;
		position: absolute;
		width: 50px;
		height: 50px;
		padding: 1.5%;
		top: 7%;
		left: 13%;
		font-size: 30px;
		font-weight: bold;
		color: #fff;
		background-color: #ba3a3f;
		border-radius: 100%;
	}

	.content-contact{
		width: 100%;
		text-align: center;
		font-family: 'Red Hat Display', sans-serif;
	}

	.content-contact h1{
		font-family: 'Red Hat Display', sans-serif;
		padding: 3% 0% 3% 0%;
		font-size: 35px;
		color: #0052a4;
		font-weight: bold;
		text-align: left;
	}

	.content-contact form{
		margin: 0%;
		padding: 0%;
		width: 100%;
	}

	.content-contact table{
		width: 100%;
		text-align: left;
	}

	.content-contact td{
		width: 50%;
	}

	.content-contact label{
		font-size: 25px;
		font-weight: bold;
		color: #ba3a3f;
		margin: 2% 0%;
	}

	.content-contact input{
		width: 100%;
		font-size: 25px;
		border-radius: 10px;
		border: 1px solid #00000078;
	}

	.content-contact textarea{
		width: 100%;
		font-size: 25px;
		border-radius: 10px;
		border: 1px solid #00000078;
		margin-bottom: 5%;
	}

	.content-contact button{
		width: 60%;
	    margin: 5% 20%;
	    padding: 1%;
	    border-radius: 10px;
	    border: none;
	    font-size: 25px;
	    font-weight: bold;
	    letter-spacing: 2px;
	    color: #fff;
	    background-color: #6084bc;
	    z-index: 3;
	}

	.iframe-maps{
		width: 100%;
		height: 100%;
		padding: 5%;
	}

/*** footer ****/

	.footer-W{
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		margin: 0% 0% 0% 0%;
		padding: 1% 0% 1% 0%;
		font-family: 'Red Hat Display', sans-serif;
		background-color: #111;
		text-align: center;
		justify-content: center;
	}

	.footer-W p{
		margin: 0%;
	    padding: 0%;
	    color: #ffffff36;
	    font-size: 15px;
	    letter-spacing: 1px;
	    cursor: pointer;
	}

	.footer-W p>span:hover{
		color: #fff;
	}


/*** mediasquery ***/

	@media (max-width: 1024px){

		.box-01 h5 {
    		font-size: 45px;
    	}

    	.content-process p {
		    font-size: 18px;
		    width: 90%;
		    margin: 5% 5%;
		    padding: 1%;
		}

		.box-01 ul>li>button {
		    width: 80%;
		    margin: 5% 10% 0% 10%;
		    padding: 2%;
		    font-size: 18px;
		}

		.box-01 p {
			font-size: 20px;
		}

		.content-contact label {
		    font-size: 22px;
		    letter-spacing: 1px;
		}
	}

	@media (max-width: 768px){

		.box-01 h2 {
		    font-size: 30px;
		}

		.box-01 h5 {
		    font-size: 30px;
		}

		.content-process h3 {
		    width: 30px;
		    height: 30px;
		    font-size: 22px;
		}

		.content-process p {
		    font-size: 15px;
		    width: 90%;
		    margin: 5% 5%;
		    padding: 1%;
		    letter-spacing: 1.5px;
		}

		.box-01 ul>li {
		    text-align: center;
		    width: 33%;
		    margin-bottom: 5%;
		}

		.box-01 h3 {
			font-size: 30px;
		}

		.box-01 p {
		    font-size: 18px;
		}

		.box-01 h4 {
    		font-size: 30px;
    	}

    	.box-01 ol>li {
    		font-size: 18px;
    	}
	}

	@media( max-width: 425px ){

		#tidio-chat-iframe{
			display: none!important;
		}

		.button-whatsapp{
			bottom: 10px;
			left: 10px;
		}

		.button-whatsapp h2{
			display: none;
		}

		.button-phone {	
			display: none;
		}

		.img-pc{
			display: none!important;
		}

		.img-mobil{
			display: block!important;
		}

		.slide-00 {
		    margin-top: 15%;
		}

		.slide-00 h2{
			font-size: 34px;
		    background: #fff9;
		    text-align: center;
		    color: #212121;
		}

		.box-01 ul>li {
		    width: 75%;
		}

	}


/*** PROMOTIONS ***/

	/*** PC ***/

		.modal-content{
			width: 100%;
		    position: relative;
		    background-color: #0000;
		    text-align: center;
		    border: none;
		}

		.content-promotions{
			width: 100%;
			margin: 0%;
			height: 0%;
		}

		.content-promotions img{
			width: 50%;
			padding: 1%;
			float: right;
		}

		.btn-close-modal{
			padding: 0%;
		    width: 100%;
		    text-align: right;
		    font-size: 25px;
		    margin: 0%;
		    color: #ffffef;
		}

		@media( max-width: 768px){
			.content-promotions img{
				width: 100%;
				padding: 1%;
				float: none;
			}
		}