:root {
  --main-darkblue: #1b2128;
  --main-orange: #d14b3a;
  --main-lightblue: #e3eaf4;
  --main-light: #efe9df;
  --main-white: #faf7f7;	
}
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?viyf72');
  src:  url('../fonts/icomoon.eot?viyf72#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?viyf72') format('truetype'),
    url('../fonts/icomoon.woff?viyf72') format('woff'),
    url('../fonts/icomoon.svg?viyf72#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-menu:before {
  content: "\e903";
}
.icon-list:before {
  content: "\e903";
}
.icon-options:before {
  content: "\e903";
}
.icon-lines:before {
  content: "\e903";
}
.icon-hamburger:before {
  content: "\e903";
}
.icon-linkedin:before {
  content: "\e902";
}
.icon-brand2:before {
  content: "\e902";
}
.icon-social2:before {
  content: "\e902";
}
.icon-twitter:before {
  content: "\e900";
}
.icon-brand:before {
  content: "\e900";
}
.icon-tweet:before {
  content: "\e900";
}
.icon-social:before {
  content: "\e900";
}
.icon-github:before {
  content: "\e901";
}
.icon-brand1:before {
  content: "\e901";
}
.icon-octacat:before {
  content: "\e901";
}
.icon-social1:before {
  content: "\e901";
}
.icon-mail4:before {
  content: "\ea86";
}
body{
	font-family: 'Work Sans', sans-serif;
	margin: 0;
	padding: 0;
}
section{
	padding: 25px;
}
h1{
	font-size: 2em;
	line-height: 1.2;
	letter-spacing: -.2px;
	color: #fff;
	margin: 0;
}
h1 strong, h3 strong{
	color: var(--main-orange);
}
h2{
	color: var(--main-orange);
	text-transform: uppercase;
	font-weight: bold;
	font-size: 24px;
	margin-bottom: 30px;
	margin-top: 30px;
}
ol,ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
figure{
	margin: 0;
}
.container{
	max-width: 1000px;
	flex: 1; /*todo el ancho*/
	margin: 0 auto;
	display: inherit;
	justify-content: inherit;
	align-items: inherit;
	height: inherit;
	flex-wrap: inherit;
}
.hero{
	height: 200px;
	background-color: var(--main-darkblue);
	display: flex; 
	align-items:center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.sobremi{
	/*height: 200px;*/
	background-color: var(--main-white);
	display: flex; 
	align-items:center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.hero-image{
	object-fit: cover;
	opacity: 0.9;
}
.portfolio{
	background: var(--main-light);
}
.project{
	padding: 20px;
	background: var(--main-white);
	border-radius: 10px;
	margin-bottom: 70px;
	display: flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap: wrap;
}
.project-skill, .project-date, .project-url{
	margin:10px 0;
}
.project-title{
	font-size: 26px;
	margin: 0 0 10px;
}
.project-details{
	width: 50%;
}
.project-description{
	/*font-size: 18px;*/
}
.project-imageContainer{
	width: 50%;
}
.project-imageContainer img{
	max-width: 100%;
}
.header{
	background-color: var(--main-darkblue);
	color: var(--main-white);
	display: flex;
	height: 70px;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

.header a{
	color: var(--main-white);
	text-decoration: none;
	/*display: block;*/
	height: inherit;
	display: flex;
	align-items: center;
	padding: 0 10px;
}
.menu{
	height: inherit;
}
.header ol{
	display: flex;
	align-items: center;
	height: inherit;
}
.header ol li{
	height: inherit;
}
.footer{
	background: #1b2128;
	color: var(--main-white);
	display: flex;
	justify-content:center;
	/*vertical-align:middle;*/
	/*flex-wrap: wrap;*/
}
.footer img{
	vertical-align: middle;
}
.footer a{
	color: var(--main-white);
}
.event{
	margin: 1%;
	width: 48%;
	flex-shrink: 0;
	border-radius: 10px;
	overflow: hidden;
	background: var(--main-lightblue);
}
.event img{
	width: 480px;
	height: 200px;
	/*object-fit: cover;*/
}
.event-list{
	display: flex;
	flex-wrap: wrap;
}
.event-list-title{
	margin-left: 20px;
}
.event-detail{
	margin: -40px 40px 20px 40px;
	background-color: var(--main-white);
	position: relative;
	padding: 20px;
	text-align: center;
}
.event-description{
	text-align: left;
}
.event-url{
	color: var(--main-orange);
	border: 1px solid;
	padding: 5px 20px;
	text-decoration: none;
	border-radius: 5px;
}
.contact{
	background-color: var(--main-orange);
	color: var(--main-white);
	height: 200px;
	display: flex;
	align-items:center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.social-link{
	color: var(--main-white);
	text-decoration: none;
	font-size: 2em;	
	padding: 5px 20px;
}
.form-email input{
	border: 1px solid gray;
	padding: 10px 20px 10px 25px;
	border-radius: 5px;
	border-style: solid;
	/*background-image: url('../images/sobre.svg');*/
	background-size: 15px 15px;
	background-repeat: no-repeat;
	background-position-x: 5px;
	background-position-y: center;  
}
.form-email button{
	border: 1px solid var(--main-white);
	display: block;
	background: transparent;
	color: var(--main-white);
	padding: 5px 20px;
	border-radius: 5px;
	width: 100px;
	margin-top: 10px;
}

.form-email h3{
	font-family: 'Work Sans', sans-serif;
}
.burger-button{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: rgba(209, 75, 58,.85);
	/*display: block;*/
	display: none;
	line-height: 40px;
	text-align: center;
	position: fixed;
	z-index: 20;
	left: 5px;
	top: 5px;
	color: var(--main-white);
}
@media screen and (max-width: 1024px){
	.container{
		padding: 0 1em;
	}	
	.hero{
		height: auto;
		position: relative;
		overflow: hidden;
		padding: 2em;
	}
	.hero-image{
		position: absolute;
		z-index: 1;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 100%
	}
	h1{
		font-size: 2em;
		z-index: 2;
	}
	}
@media screen and (max-width: 767px){
	.burger-button{
		display: block;
	}
	.header{
		display: block;
		height: auto;
	}
	.header .logo{
		display: none;
	}
	.header ol{
		display: initial;
	}
	.header ol li{
		height: 50px;
	}
	.header a{
		justify-content: center;
		height: 50px;
		font-size: 2em;
		text-decoration: underline;
		margin-bottom: .5em;
	}
	.header .logo{
		text-align: center;
	}
	.project {
        flex-direction: column;
    }
    .project-imageContainer{
        width: auto;
        text-align: center;
    }
    .project-details{
        width: auto;
        /*font-size: 16px;*/
    }
    .project-skill, .project-date, .project-url{
    	margin-left: 0.4em;
    }
    .project-title{
    	font-size: 1.5em;
    	margin-bottom: .3em;
    }
    .project-url{
    	font-size: 1em;
    }
    .project-skill{
    	font-size: 0.8em;
    }
    .project-date{
    	font-size: 1em;
    }
    .project-description{
    	/*font-size: 0.8em;*/
    }
    .event{
    	width: auto;
    	flex-shrink: initial; /*0 a 1*/
    }
    .event img{
    	width: 100%;
    }
	.menu {
        position: fixed;
        background-color: rgba(209, 75, 58,.85);
        z-index: 3;
        top: 0;
        left:-100vw; 
        width: 100vw;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center; 
        /*transition: .3s;*/
    }
    .menu.is-active {
        left: 0;
        transition: .3s;
    }
}
@media screen and (max-width: 480px){
    h1{
    	font-size: 1.5em;
    }
    .project-details{
    width: auto;
    font-size: 14px;
	}
    .event-detail{
    	margin: -2em .5em .5em;
    	padding: 1em;
    }
    .contact{
    	height: auto;
    	padding: 1em 0;
    	text-align: center;
    	display: block;
    }
    .form-email button{
    	margin: 1em auto; 
    }
    .form-email h3{
    	margin-top: 0;
    }
    .footer{
    	display: block;
    	text-align: center;
    	border: 1px solid transparent;
    }
}
@media screen and (max-width: 320px){
	    h1{
    	font-size: 1.2em;
    	text-align: center;
    }
    .hero{
    	padding: 2em 1em;
    }
}