body,html{
	width: 100%;
	height: 100%;

}
.row{
 	margin: 0%;
 	padding: 0%;
 	justify-content: center;
}

/*** INICIO ***/

	.container-sections{
		width: 100%;
		height: 100%;
		margin: 0% 0% 0% 0%;
		padding: 0% 0% 0% 0%;
		background-color: #fff;
		display: flex;
		position: relative;
	}

	.body-coontent{
		width: 100%;
		padding: 0%;
		margin: auto;
	}

	.body-lateral-content{
		width: 0%;
		height: 100%;
		padding: 0%;
		background-color: #ffffffeb;
		margin: auto;
		position: absolute;
		display: flex;
		top: 0%;
		right: 0%;
		opacity:0;
		transition: 0.8s;
	}

	.body-id{
		background-color: #0000;
		text-align: center;
	}
	.body-id h2{
		font-family: 'Questrial', sans-serif;
		margin: 5%;
	}
	.body-id p{
		font-family: 'Questrial', sans-serif;
		font-size: 17px;
		text-align: justify;
		margin: 5%;
	}
	.body-id button{
		width: 68%;
		font-size: 17px;
		background-color: #333;
		outline: none;
		text-decoration: none;
		border-radius: 4px;
		color: #ddd;
		border: none;
		padding: 2%;
		margin: 4%;
	}
	.return{
		position: fixed;
		bottom: 0;
	}
	.return img{
		width: 13%;
		float: right;
		position: relative;
		margin: 3%;
	}

	.dicard-logo{
		position: absolute;
		font-family: 'Questrial', sans-serif;
		bottom: 0.5%;
		right: 1%;
		color: #ffffff29;
		font-size: 12px;
		letter-spacing: 1px;
	}

	.dicard-logo:hover{
		color:#fff;
	}

	/*** ETERPRISE LOGO ***/

		.enterprise-logo{
			margin: auto;
			padding: 0%;
			display: flex;
		}

		.enterprise-logo img{
			margin: 5% auto;
		    padding: 0%;
		    width: 60%;
		    height: 50px;
		    cursor: pointer;
		}

		@media(max-width:720px){
			.enterprise-logo img{
				
			}
		}

	/*** PICTURE **/

		.picture-id{
			margin: auto;
			width: 100%;
			padding: 0%;
			display: flex;
		}

		.picture-id img{
			margin: 0% auto;
			padding: 0%;
			width: 200px;
			height: 200px;
			border-radius: 100%;
			cursor: pointer;
			border: 4px solid #042e8be3;
			box-shadow: 0px 0px 10px #0006;

		}

		@media(max-width:720px){
			.picture-id img{
				width: 180px;
				height: 180px;
				border: 3px solid #042e8be3;
			}
		}

	/*** INFO ***/

		.info-id{
			width: 100%;
			margin: 0%;
			padding: 0%;
		}

		.info-id h1{
			font-family: 'Questrial', sans-serif;
			width: 100%;
			margin: 5% auto 0% auto;
			padding: 0% 2%;
			text-align: center;
			font-size: 30px;
			color: #333;
			letter-spacing: 0.5px;
		}

		.info-id h2{
			font-family: 'Questrial', sans-serif;
			width: 100%;
			margin: 0% auto 0% auto;
			padding: 0%;
			text-align: center;
			font-size: 22px;
			color: #333;
			letter-spacing: 0.5px;
		}

	/*** SERVICES ***/

		.services-id{
			width: 100%;
			margin: 0%;
			padding: 0%;
			text-align: center;
		}

		.services-id button{
			font-family: 'Questrial', sans-serif;
			width: 60%;
			margin: 4% auto 0%;
			padding: 1%;
			text-align: center;
			font-size: 22px;

			color: #fff;
			background-color: #f37422; 
			border-radius: 5px;
			letter-spacing: 1px;
			border: none;
			outline: none;
			cursor: pointer;
		}

	/*** CONTACT ***/

		.contact-id{
			width: 100%;
			margin: 5% 0% 0% 0%;
			padding: 0%;
			text-align: center;
		}

		.contact-id ul{
			width: 100%;
			margin: 0%;
			padding: 0%;
			display: flex;
			list-style: none;
			justify-content: center;
		}

		.contact-id li{
			width: 50px;
			height: 50px;
			display: flex;
			background-color: #ffffffde;
			margin: 1% 2%;
			border-radius: 5px;
		}

		.contact-id i{
			margin: auto;
			font-size: 28px;
			color: #f37422;
		}
		
	/*** LATERAL CONTENT ***/

		.laterl-content-resume{
			margin: auto;
			width: 100%;
			height: 100%;
			padding: 0%;
			
		}

		.active-lateral-content{
			display: flex;
			width: 100%;
			opacity: 1;
			transition: 0.8s;
		}

		.row-lateral-content{
			display: none;
			margin: auto;
			height: 100%;
			width: 100%;
		}

		.close{
			color: #111;
			position: absolute;
			right: 10%;
			top: 5%;
			z-index: 2;
			cursor: pointer;
		}


		.active-row-lateral-content{
			display: block;
		}

		/*** RESUME CONTENT ***/

		.resume-content{
			margin: auto;
			width: 100%;
			height: 100%;
			padding: 0%;
			display: none;
		}

		.resume-content h1{
			font-family: 'Questrial', sans-serif;
			width: 100%;
			letter-spacing: 0.5px;
 			margin: auto;
 			color: #111;
 			text-align: center;
 			font-size: 32px;
 			padding: 0% 2%;
		}

		.resume-content h2{
			font-family: 'Questrial', sans-serif;
			width: 100%;
			letter-spacing: 0.5px;
 			margin: auto;
 			text-align: center;
 			color: #111;
 			font-size: 22px;
		}

		.resume-content p{
			font-family: 'Questrial', sans-serif;
			width: 80%;
			padding: 5% 5% 5% 5%;
			letter-spacing:0.5px;
 			margin: auto;
 			text-align: center;
 			color: #111;
 			font-size: 15px;
		}


		/*** SERVICES CONTENT ***/

		.services-content{
			margin: auto;
			width: 100%;
			height: 100%;
			padding: 0%;
			display: none;
		}

		.services-content h2{
			font-family: 'Questrial', sans-serif;
			width: 100%;
			letter-spacing: 0.5px;
 			margin: 15% auto 15% auto;
 			text-align: center;
 			color: #111;
 			font-size: 25px;
 			line-height: 30px;
 			cursor: pointer;
		}

		.services-content h2>i{
			font-size: 18px;
		}

		/*** SERVICES CONTENT ***/

		.share-content{
			margin: auto;
			width: 100%;
			height: 100%;
			padding: 0%;
			display: none;
		}

		.share-content h2{
			font-family: 'Questrial', sans-serif;
			width: 100%;
			letter-spacing: 0.5px;
 			margin: 15% auto 15% auto;
 			text-align: center;
 			color: #111;
 			font-size: 22px;
 			cursor: pointer;
		}

		.share-content h2>i{
			font-size: 18px;
		}


		/*****/

		.active-content{
			display: flex;
		}

		#snackbar {
		visibility: hidden;
	    min-width: 200px;
	    margin-left: -125px;
	    background-color: #000000bf;
	    color: #fff;
	    text-align: center;
	    border-radius: 20px;
	    padding: 6px;
	    position: fixed;
	    z-index: 1;
	    left: 58%;
	    bottom: 30px;
	    font-size: 16px;
		}

		#snackbar.show {
		  visibility: visible;
		  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
		  animation: fadein 0.5s, fadeout 0.5s 2.5s;
		}

		@-webkit-keyframes fadein {
		  from {bottom: 0; opacity: 0;} 
		  to {bottom: 30px; opacity: 1;}
		}

		@keyframes fadein {
		  from {bottom: 0; opacity: 0;}
		  to {bottom: 30px; opacity: 1;}
		}

		@-webkit-keyframes fadeout {
		  from {bottom: 30px; opacity: 1;} 
		  to {bottom: 0; opacity: 0;}
		}

		@keyframes fadeout {
		  from {bottom: 30px; opacity: 1;}
		  to {bottom: 0; opacity: 0;}
		}
		a:hover {
		    text-decoration: none;
		}