:root{
	--main-color:#3498db;
    --second-color: #000000;
    --white-color:#fff;
    --gray-light-color:#f3f3f3;
    --gray-color: #ccc;
    --gray-dark-color: #666;
	--black-alpha-color:rgba(0,0,0,0.5);
}


/*Quita las propiedades por defecto*/
*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/*Cuerpo de la pagina*/
body
{
	background: #fff;
	font-family: "Open Sans",Sans-serif;
	font-size: 16px;
}

html{
    scroll-behavior: smooth;
}

/************************** Contenedor padre ******************************/
.container
{
	width:90%;
	max-width: 1000px;
	margin:auto;
	overflow: hidden;
}

/************************** Seccion header ******************************/
header
{
	background: url('../img/header.png') #77bfdf; /*Carga de la imagen*/
	background-repeat: no-repeat;
	background-position: center;
	max-height: 600px;
}

/*************************Seccion menu**********************************/
header .menu
{
	margin: 40px 0;
	text-align: right;
}

header .menu a
{
	margin: 0 20px;
	color: #fff;
	padding-bottom: 9px;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	font-size: 1em; /*hace referencia al contenedoor body 16 px*/
}

header .menu a:hover
{
	border-bottom: 2px solid #fff;
}

/********************** Contenedor del texto *****************************/
header .container-text
{
	display: flex; /*Propiedades flexbox*/
	justify-content: center;
	align-content: center;
	margin:190px 0;
}

header .container-text .text
{
	border: 2px solid rgba(255,255,255,0.5);
	border-radius: 3px;
	display: inline-block;
	text-align: center;
	padding: 20px 60px;
}

header .container-text .text h1,
header .container-text .text h2
{
	color: #fff;
	font-weight: 360;
	margin: 0;
}

header .container-text .text .name
{
	margin-bottom: 10px;
	font-size: 50px;
	line-height: 50px;
}

header .container-text .text .profession
{
	font-size: 25px;
	line-height: 25px;
}

/************************** Contenido del main **********************************************+*/

.about > article{
    margin-bottom: 2rem;
}

.main .container
{
	overflow: visible;
}
.main .acerca-de{
	text-align: center;
}

.main .acerca-de .foto
{
	margin-top: -60px;

}

.main .acerca-de .foto img
{
	vertical-align: top;
	border-radius: 50%;
	border: 5px solid rgba(255,255,255,0.5);
}

.main .acerca-de .text
{
	color: #5a5a5a;
	font-weight: 600;
	font-size: 1em;
	line-height: 30px;
	width: 80%;
	margin: 40px auto 60px auto;
}

.main .acerca-de .text .titulo
{
	font-size: 34px;
	line-height: 34px;
	margin-bottom: 40px;
	font-weight: 600;
	color:#dd820d;
	text-align: center;
}

.main .acerca-de .text .bold{
	color: #3895ea;
	text-decoration:underline;
}

.main .trabajos
{
	background: #f2f2f2;
	padding: 60px 0;
}

.main .trabajos .container
{
	overflow: hidden;
}

.main .trabajos .titulo
{
	font-size: 34px;
	line-height: 34px;
	margin-bottom: 40px;
	font-weight: 600;
	color:#323068;
	text-align: center;
}

.main .trabajos .container-trabajos
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;

}

.main .trabajos .container-trabajos .trabajo
{
	width: 23%;
	margin-bottom: 40px;
}

.main .trabajos .container-trabajos .trabajo .thumb
{
	width: 100%;
	margin-bottom: 10px;
	background: #fafafa;
	padding: 1rem;
}

.main .trabajos .container-trabajos .trabajo .thumb img
{
	width: 100%;
	vertical-align: top;
	border-radius: 3px;
}

.main .trabajos .container-trabajos .trabajo .descripcion
{
	text-align: center;
}

.main .trabajos .container-trabajos .trabajo .descripcion .nombre
{
	font-weight: 700;
	color: #3895ea;
	margin-bottom: 10px;
}

.main .trabajos .container-trabajos .trabajo .descripcion .categoria
{
	font-size: 14px;
	color: #636363;
}

progress{
    width: 100%;
    height: 1rem;
    background-color: var(--gray-color);
}

progress::-webkit-progress-bar{
    background-color: var(--gray-color);
}

progress::-webkit-progress-value{
    background-color: var(--gray-dark-color);
}

progress::-moz-progress-bar {
    background-color: var(--gray-dark-color); /*firefox*/
}

.progress{
    margin: 1rem auto;
}

.progress > p {
    margin: 0;
    display: flex;
    justify-content: space-between;
    font-size: .85rem;
}

/***************************** footer  ***************************************/
footer .contact
{
	padding: 60px 0;
}

footer .contact .title
{
	font-size: 34px;
	line-height: 34px;
	margin-bottom: 40px;
	font-weight: 600;
	color:#3895ea;
	text-align: center;
}

/********************************** Formulario ************************************/
footer .contact .form--contact
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

footer .contact .form--contact input[type="text"],
footer .contact .form--contact input[type="email"],
footer .contact .form--contact textarea{
	border:2px solid #cecece;
	border-radius: 5px;
	padding: 15px 20px;
	font-size: 20px;
	color: #a4a4a4;
}

footer .contact .form--contact input[type="text"],
footer .contact .form--contact input[type="email"]
{
	width: 49%;
	margin-bottom: 15px;
}

footer .contact .form--contact textarea
{
	width: 100%;
	height: 100%;
	min-width: 100%;
	max-width: 100%;
	min-height: 100px;
	max-height:300px ;
	margin-bottom: 15px;
}

footer .contact .form--contact .boton
{
	margin:auto;
	background: #3895ea;
	color: #fff;
	border:none;
	border-radius: 3px;
	padding: 15px 40px;
	cursor: pointer;
}

footer .contact .form--contact .boton:hover
{
	background: #387bea;
}

footer .contact .form--contact input[type="text"]:focus,
footer .contact .form--contact input[type="email"]:focus,
footer .contact .formulario textarea:focus{
	border: 2px solid #3895ea;
}

.contact-form-response{
    padding: 1rem;
    width: 100%;
    text-align: center;
    background-color: var(--white-color);
}

.contact-form-response svg{
    margin-top: 2rem;
    width: 4rem;
    height: 4rem;
    fill: var(--main-color);
}

/******************************** Redes Sociales ************************************/
footer .social-network
{
	background: #1e2b38;
	padding: 60px 0;
}

footer .social-network .container
{	/*contenedor flexbox*/
	display: flex;
	justify-content: center;
}

footer .social-network a
{
	color: #fff;
	text-align: center;
	width: 100px;
	display: block;
	padding: 15px 0;
	border-radius: 3px;
	font-size: 30px;
	margin: 0 20px;
}


footer .social-network .twitter:hover{ background: #1da1f2;}
footer .social-network .linkedin:hover{ background: #0077b5;}
footer .social-network .youtube:hover{ background: #cd201f;}
footer .social-network .facebook:hover { background: #3b5998;}
footer .social-network .git:hover { background: #6e5494;}
footer .social-network .ins:hover { background: #405de6;}

/*Media Queries*/
@media screen and (max-width: 800px)
{
	header .menu{
		text-align: center;
	}

	.main .trabajos .container-trabajos .trabajo
	{
		width: 46%;
	}
}

@media screen and (max-width: 800px)
{
	header .container-text .text .nombre
	{
		font-size: 35px;
	}

	header .container-text .text .profesion
	{
		font-size: 18px;
	}
	footer .social-network .container{
		flex-wrap: wrap;
		padding: 20px 0;
	}
}


/** SCROLL BUTTON */

.scroll-top-btn {
    position: fixed;
    z-index: 995;
    bottom: 1vh;
    right: calc(4.25rem + 1vw);
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    font-size: 2rem;
    font-weight: bold;
    background-color: var(--main-color);
    color:var(--white-color);
    cursor:pointer;
    outline: 0;
    border: 0;
    transition: all 0.3s ease-out;
}

.scroll-top-btn:hover{
    background-color: var(--gray-color);
    color:var(--main-color);
}

/** MODAL */

.modal#gracias:target{
    opacity: 1;
    pointer-events: auto;
}

.modal{
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--black-alpha-color);
    opacity: 0;
    pointer-events: none;
    transition: all .1s;
}

.modal-content {
    position: relative;
}

.modal-close{
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.modal-close svg {
    width: 3rem;
    height: 3rem;
    fill: var(--first-color);
}


/** UTILERIAS */

.none{
    display: none;
}

.hidden{
    visibility: hidden;
    opacity: 0;
}
.gray-scale{
    filter: grayscale(1);
}

.section{
    padding: 2rem 1rem;
}

@media screen and (min-width: 1024px) {
    .full-lg-screen{
        width: 100%;
        min-width: 100vh;
    }

    .text-lg-center{
        text-align: center;
    }

    .text-lg-left{
        text-align: left;
    }

    .text-lg-right {
        text-align: right;
    }
}