@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Space+Mono:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');


*{
	margin:0;
	padding:0;
  	font-family: 'Work Sans', sans-serif;
  	color: #3a3a3a;
}



/***** CHANGING COLORS TITLE *******/
#orange{
	color: #F2763C;
}

#mauve {
	color: #afaee5;
}

#turquoise {
	color: #217DB5;
}

#fuschia {
	color: #EA1A8A;
}

#clearblue {
	color :#9FD3ED;
}

#greenish {
	color: #46b067;
}


#aodigreen {
	color: #15A29C;
}

#otherorange {
	color:#FFA665;
}

#irregularblue {
	color:#7EB3DB;
}

#haveyoueatenred {
	color:#AD2A3A;
}



h4{
	font-size: 0.9em;
	font-weight: 400;
	line-height: 1.4;
}

h1 {
	font-family:  'Space Mono', monospace;
	line-height: 125%;
  	font-size: 20px;
 	color: #333;
	margin-bottom: 8px;
}

h2#haveyoueatenred {
    font-family: 'Noto Sans SC', sans-serif !important;
	font-size: 4.4em !important;
}



h6 {
	font-family: 'Space Mono', monospace;
	font-style: italic;
	font-size: 0.7em;
	padding-top: 6px;
}

h3 {
	font-family: 'Space Mono', monospace;
	font-style:normal;
	font-size: 1em;
	padding-top: 1px;
	padding-bottom: 7PX;
}

.col1-8 h4{
		text-align: center;
	line-height: 1em;
    padding-top: 20px;
}

dl{
	padding-left: 5%;
	font-size: 1em;
}

dt{
	padding-bottom: 1%;
}

.iconlink {
	padding-top: 3%;
	padding-left: 2%;
	padding-right: 2%;
	font-size: 1.1em;
}

#cvlink {
    padding-top: 3%;
    padding-left: 2%;
    padding-right: 2%;
    font-size: 1.1em;
    font-weight: 650;
    font-style: normal;
}

.iconlink i:hover {
	color:#FFA665;
}

#cvlink:hover {
	color:#FFA665;
    font-style: normal;
}

span {
	font-family: 'Noto Sans SC', sans-serif;
}

h3 span {
	color: #AD2A3A;
}

a {
    text-decoration: none;
    color: gray;
}

a:hover {
    color: #46B0A1;
}


img{
	display:block;
	width:100%;
}



video{
	border: 0;
}


.container{
	width:100vw;
	max-width:950px;
	margin:0 auto;
	padding-top: 6%;
}

.container:after{
	display:block;
	content:"";
	width:100%;
	clear:both;
}



article{
	background-color: white;
	float:left;

}

section#intro{
	background-color: white;
	height : 52vh;
}





.col1-2{
	width:37.7%;
	margin:0 1.15%;
	height: 100%;
	animation: appear 1s ease-in;
	margin-top : 0px;
	margin-bottom: 60px;
}

.col1-2bis{
	width:37.7%;
	margin:0 1.15%;
	height: 100%;
	animation: appear 1s ease-in;
	margin-top : 0px;
	margin-bottom: 60px;
}

.col1-3{
	width:80%;
	height: 100%;
	animation: appear 1s ease-in;
	padding: 0 10%;
	margin-bottom: 60px;



}

.col1-7{
	width: 73%;
    margin:0 1.15%;
	height: 100%;
	animation: appear 1s ease-in;
	margin-top : 0px;
	margin-bottom: 60px;
		padding-left: 3%;

}

.col1-8{
	width: 17%;
    margin:0 1.15%;
	height: 100vh;
	animation: appear 1s ease-in;
	margin-top : 0px;
		margin-bottom: 60px;
}

.col1-10{
	width: 17%;
    margin:0 1.15%;
	animation: appear 1s ease-in;
	margin-top : 0px;
		margin-bottom: 60px;
}

.col1-10bis{
	width: 17%;
    margin:0 1.15%;
	height: 100%;
	animation: appear 1s ease-in;
	margin-top : 0px;
		margin-bottom: 60px;
}


.col1-4{
	width:57.7%;
	margin:0 1.15%;
	height: 100%;
	animation: appear 1s ease-in;
	margin-top : 0px;
		margin-bottom: 60px;
}

.col1-4bis{
	width:58.7%;
	margin:0 1.15%;
	height: 100%;
	animation: appear 1s ease-in;
	margin-top : 0px;
		margin-bottom: 60px;
}

.col1-11{
	width:36.7%;
	margin:0 1.15%;
	height: 100%;
	animation: appear 1s ease-in;
	margin-top : 0px;
	margin-bottom: 60px;
}

.col1-5{
    width: 45%;
    margin: 0 2.5%;
	height: 100%;
	animation: appear 1s ease-in;
	margin-top : 0px;
	margin-bottom: 60px;
}

.col1-6{
	width:100%;
	margin:0 1.15%;
	height: 100%;
	animation: appear 1s ease-in;
	margin-top : 0px;
	margin-bottom: 60px;
}

.col1-9{
	width: 40%;
    margin-right: 10%;
	animation: appear 1s ease-in;
	margin-top : 0%;
	margin-bottom: 7%;
}

.col1-columns{
	width: 17%;
    margin-right: 3%;
	animation: appear 1s ease-in;
	margin-top : 0%;
	margin-bottom: 1%;
}



.col1-6 #mobile{
	display: none;
	}


#vid{
	width: 100%;
}



nav {
	font-family: 'Work Sans', sans-serif;
	font-weight: 500;
	padding-bottom: 20Px;
  	padding-top: 20Px;
  	margin-left : 3%;
	animation: pop-in .6s ease-in;
	margin-bottom: 50px;
}

#navbar li {
    display: inline-block;
    font-size: 0.90em;
	padding-left: 20px;
	padding-right: 40px;
}






#intro h2{
	font-size: 4.5em;
	font-family: 'Space Mono', monospace;
	line-height: 105%;
	padding-bottom: 25PX;
}


/****** FOOTER ********/
footer {
	background: #46B0A1;
	font-size: 0.8em;
	color: white;
	text-align: center;
	padding-top: 6px;
	padding-bottom: 6px;
}

footer i {
	color:#FFFFFF;
}

/*********LINKS*************/

.col1-2 i {
	color:#46B0A1;
}

.col1-4 i {
	color:#46B0A1;
}

.col1-4bis i {
	color:#46B0A1;
}

.col1-3 i {
	color:#46B0A1;
}

.col1-5 i {
	color:#46B0A1;
}

.col1-8 i {
	color:#46B0A1;
}

.col1-6 i {
	color:#46B0A1;
}

.col1-11 i {
	color:#46B0A1;
}

.col1-9 i {
	color:#15A29C;
	font-size: 2em;
	margin-bottom: 3%;
}


.col1-4 a {
	line-height: 1em;
  	position: relative;
  	text-decoration: none;
	color: #46B0A1;
	display:inline-block;
	font-weight: 400;
	font-style: italic;
}

.col1-6 a {
	line-height: 1em;
  	position: relative;
  	text-decoration: none;
	color: #46B0A1;
	display:inline-block;
	font-weight: 400;
	font-style: italic;
}

.col1-8 a {
	line-height: 1em;
  	position: relative;
  	text-decoration: none;
	color: #46B0A1;
	display:inline-block;
	font-weight: 400;
	font-style: italic;
}

.col1-11 a {
	line-height: 1em;
  	position: relative;
  	text-decoration: none;
	color: #46B0A1;
	display:inline-block;
	font-weight: 400;
	font-style: italic;
}



.col1-2 a {
	line-height: 1em;
  	position: relative;
  	text-decoration: none;
	color: #46B0A1;
	display:inline-block;
	font-weight: 400;
	font-style: italic;
}

.col1-3 a {
	line-height: 1em;
  	position: relative;
  	text-decoration: none;
	color: #46B0A1;
	display:inline-block;
	font-weight: 400;
	font-style: italic;
}

.col1-5 a {
	line-height: 1em;
  	position: relative;
  	text-decoration: none;
	color: #46B0A1;
	display:inline-block;
	font-weight: 400;
	font-style: italic;
}

.col1-4bis a {
	line-height: 1em;
  	position: relative;
  	text-decoration: none;
	color: #46B0A1;
	display:inline-block;
	font-weight: 400;
	font-style: italic;
}



.col1-9 h4 {
	color:#15A29C;
	margin-bottom: 3%;
	font-weight: 600;
    font-size: 0.9em;
}

.col1-columns h3 {
    font-family: 'work sans', sans-serif;
	color:#3a3a3a;
	margin-bottom: 3%;
	font-weight: 600;
}

.col1-columns h4 {
    font-family: 'work sans', sans-serif;
	color:#878787;
	margin-bottom: 3%;
	font-weight: 400;
    font-size: 0.8em;
}

.col1-columns i {
	color:lightgrey;
	width: 100%;
    font-size: 3em;
		margin-top: -15px;
}

.col1-6 h5{
    font-family: 'work sans', sans-serif;
		color:white;
    background-color: #E94F3B;
		margin-bottom: 3%;
		font-weight: 600;
    font-size: 2em;
    font-style: oblique;
    display: inline;

}

h3#coloredbackgroundhyey{
	display: inline;
	background-color: #FDEAC1 !important;
	font-weight: 500;
}

h4#caption {
	padding-left: 15%;
	font-weight: 300;
	color: grey;
}

.col1-columns h1 {
	color:#E94F3B;
	font-size: 2em;
	margin-bottom: 3%;
}


.link:after {
  display:block;
  content: '';
  border-bottom: solid 5px #46B0A1;
  transform: scaleX(0);
  transition: transform 650ms ease-in-out;
  transform-origin:100% 80%
}
.link:hover:after {
  transform: scaleX(1);
  transform-origin:0 50%;
	transition: transform 950ms ease-in-out;
}



/******* CAROUSEL ********/


/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute !important;
font-style: normal !important;
    top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 12px;
  width: 12px;
  margin: 0 1px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}



/******* ANIMATIONS ********/

@keyframes pop-in {
  0% {
    opacity: 0;
    transform: translateX(rem) scale(0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}






/******* RESPONSIVE ********/

/**TABLET**/


@media screen and (max-width:990px){
	.col1-4, .col1-2 {
		width:80%;
		margin:0px 10% 0px 10%;
		margin-bottom: 25PX;
	}

	.col1-11, .col1-4bis {
		width:80%;
		margin:0px 10% 0px 10%;
		margin-bottom: 25PX;
	}

	.col1-2bis {
		    height: 80vh;
    width: 80%;
    margin: 0px 10% 0px 10%;
    margin-bottom: 40px;
	}


#intro h2 {
    font-size: 2.80em;
	}

#projects {
	padding: 11% 0;
	}

#vid{
	width: 100%;
}

.col1-5{
		width:80%;
	margin:0px 10% 0px 10%;
		margin-bottom: 25PX;
	}

section#intro{
	height : 15vh;
}

	section#projectcontent{
		margin-top: 44vh;
	}

.col1-6{
		width:80%;
		margin:0px 10% 0px 10%;
		margin-bottom: 25PX;
	}

.col1-7{
		width:80%;
		margin:0px 10% 0px 10%;
		margin-bottom: 25PX;
		padding : 0;
	}

.col1-8 {
		width:80%;
		margin:0px 10% 0px 10%;
		margin-bottom: 25PX;
	height: 27Vh;
		}
    
.col1-8 #vid{
		
		height: 184px;
	
	}

.col1-10 {
		width:80%;
		margin:0px 10% 0px 10%;
		margin-bottom: 25PX;
	height: 80Vh;
		}

.col1-10bis {
		width:80%;
		margin:0px 10% 0px 10%;
		margin-bottom: 25PX;
	height: 100%;
		}


	.col1-8 img{
	display: none;
	}


	.col1-6 #desktop{
	display: block;
	}

    .col1-6 #mobile{
	display: none;
	}


iframe {
	width : 100%;
	height: 100%;
	}

h2#haveyoueatenred {
    font-family: 'Noto Sans SC', sans-serif !important;
	font-size: 5em !important;

}

.col1-6 h5{
    font-family: 'work sans', sans-serif;
	color:white;
    background-color: #E94F3B;
	margin-bottom: 3%;
	font-weight: 600;
    font-size: 1.5em;
    font-style: oblique;
    display: inline;

}

.col1-10 h4{
    font-family: 'work sans', sans-serif;
	font-size: 0.85em;

}

.dot {
	display:none;
}

/**MOBILE**/

@media screen and (max-width:600px){
	.col1-4 .col1-2{
		width:80%;
		margin:0px 10% 0px 10%;
		margin-bottom: 25PX;

	}

	.col1-11, .col1-4bis {
		width:80%;
		margin:0px 10% 0px 10%;
		margin-bottom: 25PX;

	}

.dot {
	display:none;
}

	.col1-2bis{
		height: 80vh;
    width: 80%;
    margin: 0px 10% 0px 10%;
    margin-bottom: 47px;

	}

	h2#haveyoueatenred {
    font-family: 'Noto Sans SC', sans-serif !important;
	font-size: 3.7em !important;

}

	canvas {
		height: 100%;
	}

	.col1-3{
		margin-bottom: 25PX;
	}

.col1-10 h4{
    font-family: 'work sans', sans-serif;
	font-size: 0.85em;

}


	.col1-5{
		width:80%;
		margin:0px 10% 0px 10%;
		margin-bottom: 25PX;
	}

	.col1-6{
		width:80%;
		margin:0px 10% 0px 10%;
		margin-bottom: 25PX;
	}

.col1-7{
		width:80%;
		margin:0px 10% 0px 10%;
		margin-bottom: 25PX;
		padding : 0;
	}

.col1-8{
		width:80%;
		margin:0px 10% 0px 10%;
        height: 30vh !important;
		margin-bottom: 8%;
		font-size: 1.6em;
        display: flex;
	}
    
.col1-8 .link{
		font-size: 0.7em;
	}
    

.col1-8 #vid{
		width:53%;
    display: flex;
    align-content: center;
		height: 184px;
	
	}
    
.col1-8 i{
    margin-top: 10px;
		margin-bottom: 28px;
	
	}
    
        
.col1-8 h4{
		padding-top: 0;
    padding-left: 17px;
	
	}

.col1-columns{
	    width: 100%;
        margin-right: 2%;
	    animation: appear 1s ease-in;
	    margin-top : 0%;
	    margin-bottom: 3%;
}

.col1-columns h1 {
	color:#E94F3B;
	font-size: 2em;
	margin-bottom: 0;
	margin-top: 15px;
}

    .col1-columns h3 {
    font-family: 'work sans', sans-serif;
    color: #3a3a3a;
    margin-bottom: 0%;
    font-weight: 600;
    }

.col1-10{
		width:80%;
		margin:0px 10% 0px 10%;
		margin-bottom: 8%;
		height: 80vh;
		font-size: 1.6em;
	}


.col1-8 img{
	width: 100%;

	}


	#intro h4 {
		font-size: 0.85em;
	}

	.container {
		padding-top: 0%;
	}

	#vid{
	width: 100%;
}

	section#intro{
	height : 33vh;
}

.iconlink {

	padding-left: 6%;
	padding-right: 6%;
}


#navbar li {
	padding-right:25PX;
	}

	.col1-6 #desktop{
	display: none;
	}

    .col1-6 #mobile{
	display: block;
	}

.col1-columns i {
	display:none;
}



iframe {
	width : 100%;
	height: 100%;
	}