/* 
blue: 0089aa6c
yellow: ffcb006c
green: 94ac2969
red: c2421a6c
*/

@font-face {
  font-family: "Avenir";
  font-weight: 400;
  font-style: normal;
  src: url("/style/fonts/Avenir-Medium.woff") format('woff');
}

@font-face {
  font-family: "Avenir";
  src: url("/style/fonts/Avenir-Light.woff") format('woff');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Avenir";
  font-weight: 600;
  font-style: normal;
  src: url("/style/fonts/Avenir-Heavy.woff") format('woff');
}

@font-face {
  font-family: "Avenir";
  font-weight: 900;
  font-style: normal;
  src: url("/style/fonts/Avenir-Black.woff") format('woff');
}


/* Basic */

html {
	font-size:18px;
	font-family: 'Avenir', sans-serif;
	min-height: 100vh;
	color: #000000ff;
	position: relative;
	  display: flex;
  flex-direction: column;
  color: #322E4F;
	}

body { 
	padding:0;
	margin:0;
	line-height:1.45;
	font-weight: 100;
	min-height: 100%;
	overflow-x: hidden;
	}


b,strong {
	font-weight: 600;
}

small {
	font-size:.8em
	}

main {
	margin:0 auto;
	max-width:45em;
	padding-top:1em;
	padding-bottom:1em;
	margin-top:150px;
	font-weight: 200;
	font-size: 20px;
	line-height: 1.5em;
	}


.content {
	text-align: justify;
	margin-bottom: 50px
}

.icons > a:hover {
	background-color: transparent;
}

a {
	text-decoration:underline;
	color: inherit;
	}

a:hover {
	color: white;
	background-color: #322E4F;
}


h1 {
	margin:1.414em 0 .5em;
	line-height:1.2;
	margin-top:0;
	font-size:2.441em;
	letter-spacing:.1em;
	}


h1,h2,h3,h4 {
	text-align: left;
	font-weight: 100;
}


.icons {
	font-size:30px;
	padding: 5px 10px 5px 10px;
	margin: 5px 10px 5px 10px;
	display: inline-block;
}


ul {
		list-style-type: square;
		font-size: 16px;
}

ol {font-size: 16px;}

ul li, ol li {
	padding-top: 0.2em;
	padding-bottom: 0.2em;
}

div.aspect-ratio {
	position:relative; 
	width: 100%; 
	padding-bottom: 56.22%; 
    padding-top: 25px;
    margin-bottom: 50px;

}

video.video-tutorial-link {
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%;
}


/* Layouts */
.column4 { float: left; width: 25%;}
.column3 { float: left; width: 33.33%;}
.column2a { float: left; width: 70%; padding-right: 2%; text-align: center; padding-bottom: 1em;}
.column2b { float: left; width: 27%; text-align: left;font-size: 14px; padding-bottom: 1em}
.column2a img {max-width: 100%}
.column2b h3 {margin-top: 0px}

.clear {clear: both}


/* Nav */
nav {
	display: block;
	position: relative;
}
a.dropbtn {
display: inline-block;
margin-bottom: 20px;
padding-left: 6px;
padding-right: 6px;
}

div.menu {
	background-color: white;
	position: absolute;
	width: 100%;
	display: inline-block;
	z-index: 999;

}

nav {
	font-size:14px;
	display: block;
	margin-top: 25px;
	margin-bottom: 40px;
	font-family: 'Avenir', sans-serif;
	padding-right: 2.5%;
	padding-left: 2.5%;
	}

nav a {
	text-decoration: none;
	margin-left: 10px;
	}

nav a:hover {
	background-color: #322E4F;
	color: white;
	font-weight: 700;
}


nav a.current {
	background-color: #322E4F;
	color: white;
}

.dropbtn {
    background-color: inherit;
    color: #322E4F;
    padding-top: 10px;
    padding-bottom: 6px;
    padding-left: 3px;
    padding-right: 3px;
    font-size: 12px;
    border: none; 
    font-weight: 400;
    text-transform: uppercase;
    border-bottom: #322E4F solid 2px;
}

.sub-dropbtn {
	text-transform: none;
	font-size: 12px;
}

.dropdown {
    position: relative;
    display: inline-block;
    padding: 0px;
    font-family: 'Avenir', sans-serif;
    
}

.dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
    max-height: 400px;
    z-index: 1;
    overflow: auto;
}

.dropdown-content a {
    color: inherit;
    padding: 10px;
    text-decoration: none;
    background-color: #f1f1f1;
    display: block;
    font-weight: 200;
    
}

.dropdown-content a:hover {background-color: #322E4F; color: white}


.dropdown:hover .dropdown-content {display: block}

.dropbtn:hover {background-color: #322E4F; color: white}



/* Footer */

.footer {
	border-top: 4px solid #322E4F;
	min-width: 100%;
	margin-top: 10em;
	font-size: 12px;
	font-family: 'Avenir', sans-serif;
	text-align:center;
}

.mail:hover {color: #f46353;}
.twitter:hover {color: #ffbf00;}
.medium:hover {color: #06908f;}
.github:hover {color: #3066be;}



/* Events page*/

.events {
 margin-bottom: 2em;
}

.events ul {
	font-size: 0.8em;
}

h2.title, h2.title {
  font-weight: 600;
  margin-bottom: 0px;
  font-size: 16px;
  text-transform: uppercase;
  display: inline;
}

.role {
	font-weight: 200;
	color: #322E4F;
}

.job-luogo {
	font-size: 0.7em; 
	line-height: 1.4em; 
	margin-top: 0px; 
margin-bottom: 0px;">
}

#blue { color: #3066be; }

a#blue:hover{
	color: white;
	background-color: #3066be;
}
#green { color: #06908f; }
a#green:hover{
	color: white;
	background-color: #06908f;
}
#yellow { color: #ffbf00; }
a#yellow:hover{
	color: white;
	background-color: #ffbf00;
}
#red { color: #f46353; }
a#red:hover{
	color: white;
	background-color: #f46353;
}

.job-details {
  font-size: 14px;
  margin-top: 0px;
  margin-bottom: 2px;
  display: inline;
}

.job-bullets {
font-weight: 200;
font-size: 14px;
margin-top: 3px;
padding-left: 15px;
line-height: 1.6em;
}

p.job-chrono {
  font-size: 12px;
  margin-top: 0px;
  margin-bottom: 2px;
  display: inline;
}
.subsection {
	font-weight: 400;
}
.project-title {font-size:1.3em;text-transform:uppercase; font-weight:400; text-decoration-style: dotted;}
.project-body {font-weight:200 ;font-size:0.7em; margin-bottom: 2px;margin-top: 2px;line-height: 1.4em}



@media screen and (max-width: 900px) {
        .column2 {
        width: 100%;
    }
}

@media screen and (max-width: 860px) {
    .column4 {
        width: 50%;
    }
    main {
	max-width: 100%;
	margin-left: 40px;
	margin-right: 40px;
}
}

@media screen and (max-width: 600px) {
    .column4 {
        width: 100%;
    }

    .column3 {
    	width: 100%;
    	margin-bottom: 10px;
    }

        main {
	margin-left: 10px;
	margin-right: 10px;
}



}