@font-face {
    font-family: 'Gotham Book';
    src: url('fonts/Gotham-Book.woff2') format('woff2'),
        url('fonts/Gotham-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-Medium.woff2') format('woff2'),
        url('fonts/Gotham-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


.bg-header{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,bcbec0+100 */
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #bcbec0 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#bcbec0 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #ffffff 0%,#bcbec0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bcbec0',GradientType=0 ); /* IE6-9 */
	height: 25vw;
} 

.bg-path {
	background-color: #027555;
	clip-path: polygon(50% 46%, 100% 0, 100% 100%, 50% 68%, 0 100%, 0 0);
	padding: 20px;

}

body {
    color: #6d6e71;
    font-family: 'Gotham';
}

p {
    font-weight: 200;
}

h1, h2, h3, h4, h5, h6 {
    color: #6d6e71;
}

.box-usuario{
	background-image: url('../images/bg-header.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin-top: -165px;
	position: relative;
} 

.usuario {
	text-align: center;
} 

.usuario img{
	border: solid 10px #d1d3d4;
	border-radius: 90px;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.puesto{
	border: none;
} 

.puesto p{
	color: #d42d2a;
	font-weight: bold;
	font-size: 14px;
	border: solid 1px #d42d2a;
} 

.box-white {
	background-color: #FFFFFF;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	padding: 15px;
	border-radius: 15px;
}

.box-grey {
	background-color: #f1f2f2;
	border-radius: 15px;
	min-height: 320px;
}

.img-top {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.icono{
	padding: 35px 0;
}

.box-mail{
	margin-top: 5%;
}  

.box-qr{
	margin-top: 10%;
}

.llamar{	
	background-color: #d42d2a;
} 

.llamar:hover{
	background-color: #f9524f;
}

.compartir{
	background-color: #d42d2a;
} 

.compartir:hover{
	background-color: #f9524f;
}

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

	h1{
		font-size: 27px;
	} 

	.box-usuario {
    	margin-top: -80px;
	}

  	.bg-header {
    	height: 65vw;
	}

	.box-grey {
    	min-height: 155px;
    	padding: 0 15px;
	}

	.lead {
		font-size: 9px;
	}

	.icono {
		width: 70px;
    	padding: 10px 0 8px;
	}

	.correo{
		font-size: 8px;
	} 

	.box-qr{
		margin-top: 5%;
	} 

	.usuario img {
    	width: 35%;
	}

	.qr{
		width: 80%;
	} 
}