/*
Eduardo Arenilla Lobo - UX Designer
https://eduardoarenilla.com -
*/

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

@font-face {
    font-family: "Avenir-Bold";
    src: url("../fonts/avenir/AvenirNextLTPro-Bold.otf");
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;1,400&family=Roboto:ital,wght@0,300;1,100;1,300&display=swap');
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
	clear:both;	
	}

html {
	font-size: 16px;
	font-family: 'Avenir-Regular', sans-serif;
	overflow-y: scroll;	
	scroll-snap-type: y mandatory;
}

body {
	color: #1B2B7C;
}
	
h1 {font-size: 3.0rem; line-height: 4.5rem; font-family:'Avenir-Bold', sans-serif;}
h2 {font-size: 1.9rem; line-height: 2.4rem; font-family:'Avenir-Regular', sans-serif;}
h3 {font-size: 1.25rem; line-height: 1.75rem; color: #646A89 !important; font-weight: 400; font-family: 	'Roboto', sans-serif; }
		

header {
	display:flex;
	justify-content: center;
	align-items: center;
	height:100vh;	
	background-image: url(../images/bg-3.svg);	
 	background-repeat: no-repeat;
 	background-size: cover;
	 background-position: center; 
	 scroll-snap-align: start;
}

		.header-content {
			display:flex;
			flex-direction: row;
		}

		.div-photo {
			display:flex;
			align-items: flex-start;
		}
		.photo-tarjet {
			width:160px;
			height:160px;
			border-radius: 50%;
			padding: 5px;
			border: solid 10px rgba(236,238,248,0.9);
			box-shadow: 0px 1rem 2.6rem rgba(36, 73, 168, 0.15);
			margin-right:5rem;	
		}
		.h3-tarjet {
			width: 500px;
			margin-top:2rem;
		}
		.links-tarjet {
			margin-top: 4rem;
			display: flex;	
		}

		.links-tarjet a:hover{
			background-color: #1a2438;
		}
		.info-bussines a:hover{
			background-color: #1a2438;
		}
		

		.button {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 4px;
			background-color: #1B2B7C;
			border: solid 1px hsl(212, 52%, 94%);
			color:  #fff;
			border-radius: 50px;
			width: 180px;
			height: 50px;
			transition: background-color 0.5s;
			box-shadow: 0px 1.5rem 2.5rem rgb(27 43 124 / 25%);
		}

		.rosa {
			background-color: #ea5443;
		}

 		

		.button .a-content {
			display: flex;
			flex-direction: column;
			
		}

				.button .a-large{
					color:#fff;
					font-family:'Avenir-Bold', sans-serif;
					font-size: 1.2em;
					line-height: 1.2em;
					letter-spacing: 1px;
					text-align: left;
					
				}
				.button .a-small {
					font-family:'Avenir-lt', sans-serif;
					text-align: left;
					font-size: 0.7em;
					line-height: 1em;
					
				}

		.button .a-img {
			display: flex;
			align-items: center;
			margin-right: 10px;
		}

		.button img {
			width: 42px;
			height: 42px;
			
		}

		.social-media{
			margin-top:60px;
			text-align:center;
		}
		.social-media a{
			padding:0 10px 0;
			color: rgba(16,23,40,0.7);
			font-size: 1.5rem;
		}
		.social-media a:hover{
			color: rgb(16,23,40);
		}

		.footer-social{
			margin-top: 20px;
			margin-bottom: 20px;
		}

		.footer-social a{
			color: #646A89;
		}
		.hide{
			display: none;
		}
		.contact{	
			display:none;	
		}

		
section{
	display:flex;
	justify-content: center;
	align-items: center;
	height:100vh;
	text-align: center;
	background-image: url(../images/bg-section.jpg); !important
	background-color: #191d2c;
	background-position: center;
	background-size::content;
	color: #e9f0f8;	
	scroll-snap-align: start;
	}


	.info-bussines{
		display:flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	

		section .h2-section { 
			width: 50%;
			text-align: center;
			margin-bottom: 50px;
		}
		
.section-2{
	background-image: url(../images/bg-3.svg);	
 	background-repeat: no-repeat;
 	background-size: cover;
	 background-position: center;
	color: #646A89;
	scroll-snap-align: start;
}

footer{
	display:flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	text-align: center;
	height:100vh;
	background-color: #fff;
	padding: 2%;
	scroll-snap-align: start;
	
}
.footer-info{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
}
.footer-info p{
	display: flex;
	align-items: center;
	letter-spacing: 1px;
	font-size: small;	
	margin: 20px 0;
	color: #646A89;
}
.footer-by{
	flex-grow: 0;

}
.footer-by p{
	display: flex;
	align-items: center;
	font-size: small;	
	margin-top: 20px;
	color:#b4c2ca;
}

.footer-by a{
	color:#b4c2ca;
	transition: color 0.5s;
}

.footer-by a:hover{
	color: #646A89;
}

	

	p img{
		margin: 0 5px;
		
	}

	.margin-relative{
		margin-right: 20px;
	}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

                              /*960*/ 

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

	@media only screen and (max-width: 960px) {

		.photo-tarjet {
			width:140px;
			height:140px;
			margin-right:3rem;
			
		}

		section{
			background-image: url(../images/bg-section-1024.jpg);
			}

		section .h2-section { 
			width: 50%;
			text-align: center;
			margin-bottom: 50px;
		}

	.margin-relative{
		margin-right: 20px;
	}
				
	}


/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

                              /*768*/ 

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

@media only screen and (max-width: 768px) {

	h1 {font-size: 2.8rem; line-height: 4.0rem; }
	h2 {font-size: 1.6rem; line-height: 2.0rem; }
	h3 {font-size: 1.2rem; line-height: 1.6rem; }
	h4 {font-size: 1.2rem; line-height: 1.6rem; }
		
	.photo-tarjet {
		width:130px;
		height:130px;
		margin-right:2rem;
	}
	


.h4-footer{
	width: 60%;	
}

.margin-relative{
	margin-right: 20px;
}
			
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

                              /*728*/ 

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

@media only screen and (max-width: 728px) {

	h1 {font-size: 2.5rem; line-height: 3.0rem; }
	h2 {font-size: 1.5rem; line-height: 1.8rem; }
	h3 {font-size: 1.125rem; line-height: 1.5rem; }
	h4 {font-size: 1.125rem; line-height: 1.5rem; }

	.header-content {
		flex-direction: column;
		text-align: center;
			
	}		

	.photo-tarjet{
		margin:auto;
		margin-bottom: 20px;
		
	}
	.links-tarjet {
		justify-content: center;		
	}


	section .h2-section { 
		width: 70%;
	}
	

	.margin-relative{
	margin-right: 20px;
	}
			
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

                              /*525*/ 

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

@media only screen and (max-width: 525px) {


	.margin-header{
		margin-top: -70px;
	}
	.h3-tarjet {
		width: 80%;
		margin: auto;
		margin-top:2rem;
	}
	.links-tarjet {
		display: none;
	}
	.hide{
		display: block;
	}
	.contact{
		position:fixed;
		display:flex;
		flex-flow:row nowrap;
		min-width:100%;
		height: 70px;
		text-align:center;
		border-top: 1px solid rgba(255,255,255,0.3);
		bottom:0;
		left:0;
	}
	.contact a{
		color: rgba(255,255,255,0.8);
		font-size: 14px;
		font-weight: 400;
		line-height: 28px;
		letter-spacing:1px;
		text-transform: uppercase;
	}

	.call{

		flex: 1 1 auto;	
		background-color:rgba(27,43,124,0.9);
	}
	.whatsapp{
		flex: 1 1 auto;
		background-color:rgba(27,43,124,0.9);
		border-left:1px solid rgba(255,255,255,0.3);
		border-right:1px solid rgba(255,255,255,0.3);
	}
	.email{
		fleX: 1 1 auto;	
		background-color:rgba(27,43,124,0.9);
	}
	.call:before{
		font-size:2em;
		content:"\f10b";
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		display:block;
		padding-top:10px;
		
	}
	.whatsapp:before{
		font-size:2em;
		content:"\f232";
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		display:block;
		padding-top:10px;	
	}
	.email:before{
		font-size:2em;
		content:"\f0e0";
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		text-decoration: inherit;
		display:block;
		padding-top:10px;
	}
	section{
		background-image: url(../images/bg-section-525.jpg); !important
		}
	section .h2-section { 
		width: 80%;
	}

	.info-bussines {
		margin-bottom: 60px;
	}
	.footer-by{
		margin-bottom: 120px;
	}
				
}