/* --------------- general styling -------------------------------------------- */

html{
	font-size: 12pt;
	scroll-behavior: smooth;
}

body{
	/* background-color: #F5F5F5; */
	background-color: #ffffff;
	
}

.row{
	margin-right:0;
	margin-left:0;
}

.container-fluid{
	padding:  0;
	max-width: 1440px;
	border-style: solid;
	border-width: 1px;
	border-top-width: 5px;
	border-bottom-width:50px;
	border-color: #40424A;
	

	/* scroll-behavior: smooth;  */
	
}
/* a{
	display: block;
} */

a:hover{
	text-decoration: none;
}

/* --------------- text-styling -------------------------------------------- */


@font-face {
	font-family: 'iA-italic';
	src: url(../fonts/iAWriterDuospace-RegularItalic.otf)

}

@font-face {
	font-family: 'iA-regular';
	src: url(../fonts/iAWriterDuospace-Regular.otf)
}


@font-face {
	font-family: 'Telegraf-Lite';
	src: url(../fonts/Telegraf/Telegraf-UltraLight.otf)
}

@font-face {
	font-family: 'Telegraf-Regular';
	src: url(../fonts/Telegraf/Telegraf-Regular.otf)
}


@font-face {
	font-family: 'Telegraf-Bold';
	src: url(../fonts/Telegraf/Telegraf-Bold.otf)

}

@font-face {
	font-family: 'Telegraf-UltraBold';
	src: url(../fonts/Telegraf/Telegraf-UltraBold.otf)

}



h1{
	font-family: 'Telegraf-Bold';
	font-weight: 400;
	font-size: 6.5rem;
	line-height:calc(.9 * 6.5rem);
	color: #191b23;
	/* padding-bottom:15px; */
	margin-bottom:0;
	


}

h2{
	font-family: 'Telegraf-Bold';
	font-weight: 400;
	font-size: 2.2rem;
	line-height: calc(2.2rem *.9);
    color: #40424A;
    margin-bottom:8px;
	/* margin-bottom:10px; */
}


h3{
	font-family: 'Telegraf-Regular';
	font-weight: 400;
	font-size: 1.6rem;
	color: #40424A;
	margin-bottom:0;
	transition: font-size .5s ease-in-out;

}

h4{
	font-family:'Telegraf-Regular';
	font-size:1.2rem;
	margin-bottom:0;
	color: #40424A;
}

.button h4{
	font-size: 1.0rem;
	margin-bottom:0;
	color: #40424A;
	font-family:'Telegraf-Regular';
}

h5{
	font-family: 'Telegraf-Regular';
	font-size: 1.1rem;
	color: #40424A;
	margin-bottom:0;
}


p{
font-family: 'Telegraf-Regular';
font-size: 1.3rem;
margin:0;
line-height:1.3rem;
/* color: #767676; */
margin-bottom:0;

}



b{
	font-family: 'Telegraf-Bold';
}
.caption{
	font-family: 'Telegraf-Regular';
	font-size: 1rem;
	margin:0;
	color: #767676;
	margin-bottom:0;
}



.overline {
	font-family: 'iA-italic';
	font-weight:400;
	font-size: .8rem;
	/* color: #d4d4d4; */
	/* letter-spacing: 1; */
	padding-bottom: .45rem;

	/* color: #ffffff; */
}

.margin {
	font-family: 'iA-italic';
	font-weight:400;
	font-size: .8rem;
	color: #d4d4d4;
}

.caption{
	font-family: 'iA-italic';
	font-size: .9rem;
	margin:0;
	line-height:calc(1.25 * .9rem);
	color:#333333;
	/* color: #767676; */
	margin-bottom:0;
	
	
	}

.label{
    font-family: 'iA-italic';
	font-weight:400;
	font-size: .8rem;
	/* color: #5E70B1; */
	/* letter-spacing: 1; */
	margin-bottom:0;

}



/* ---------------------------- SPACING ----------------------------------- */
/* 
.hero {
    padding: 0 100px;
} */


/* --------------------------------ELEMENT STYLING------------------------  */
.navbar{
	padding: .8rem;
	
	margin-bottom: 40px;
}

.circle-button{
    width: 125px;
    height:125px;
    border-radius: 50%;
    overflow:hidden;
    margin: 8 8 8 0px;
}

.circle-button#hero{
    background-color: #828282;
    
}

.button{
	padding: 10px 24px; 
	margin: 0 8px 8px 0;
	border-radius:50px;
	border-style: solid;
	border-width: 1px;
	border-color: #40424A;
	width: fit-content;
	transition: all .5s ease;


}



.hero-text{
    color: #F2F2F2;
}

.hero-section{
	background-image: url("../img/home-hero-test.svg");
	transition: all .2s ease-in;
	border-radius:25px;
}

#ubiq{
	background-color:#6D7494;
	background-image: linear-gradient(45deg, #93a4e6, #adeaadf5);

}

#mayv{
	background-color: #E5CEAD;
	background-image: linear-gradient(45deg, rgba(179, 215, 255, 0.9), rgb(241 182 139 / 80%), rgb(229, 206, 173));
}

#predictev{
	background-color: #9A9A9A;
	background-image: linear-gradient(45deg, #6c55c580, #3e67ead9);
}

#louvre{
	background-color: #799E9C;
	background-image:linear-gradient(45deg, #c7dbb9, transparent);
}

.highlight{
    padding:16px;
    border-radius:10px;
    background-color: #f2f2f2;
    margin-bottom:8px;
    margin-top:8px;
}

.block{
    padding:16px 16px 12px 16px;
    border-radius:5px;
    background-color:#E0E0E0;
    margin: 8px 0;
}

.project-section{
	/* margin-top:100px; */
	padding: 35px;
	border-radius:15px;
	-moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
}

.project-spacing{
	margin-bottom: 15px;
}
.project-photo{
	padding: 24px;
}
.project{
	margin-top: 15px;
	margin-bottom:200px;
	padding: 0;
}

.description{
	padding: 30px 15px;

}

.stamp{
	padding: 15px 0px;
}

.about-text{
	padding-left:0;
	
}

.about-picture{
	border-radius: 15px;
	/* padding: 80px; */
}

.resume{
	padding:15px 0 ;
	
}

.under-construction {
	cursor: url('../under-construction-med.svg'), auto !important;
	
}

/* new home */



.inner-blob{
	display:flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	padding: 30px;
	height: 250px;
}

.inner-blob-secondary{
	/* padding: 10px; */
	/* border-radius: 24px; */
	display:flex;
	align-items: center;
	justify-content: center;
	padding: 36px;
	height: 250px;
	
	/* margin: 5px; */
}
.inner-blob-secondary#video{
	/* padding: 10px; */
	/* border-radius: 24px; */
	display:flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	/* margin-bottom: 0px; */
	height: 250px;
	overflow: hidden;
	
	/* margin: 5px; */
}


.nav-button{
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display:flex; 
	align-items: center; 
	justify-content: center;
	/* outline-style: solid; */
	/* background-color: #F2F2F2; */
		/* outline-color: grey; */
	/* background-color: grey; */
	border-style: solid;
	border-width: 1px;
	border-color: #40424A;
	/* box-shadow: 0 0 2px #000000; */
	transition: background-color .5s;
	transition-timing-function: ease-in-out;
	margin: 5px;
}

.button#resume{
	border-radius: 50%;
	width: 110px;
	height: 110px;
	display:flex; 
	align-items: center; 
	justify-content: center;
	padding: 0;
	margin: 10px 0;
	border-style: solid;
	border-width: 1px;
	border-color: #40424A;
	transition: background-color .5s;
	transition-timing-function: ease-in-out;

}



.nav-icon{
	padding: 7px;
	transition: .5s;
}

.nav-button:hover{
	background-color: #3c3c3c;
	
}
.nav-button:hover .nav-icon {
	filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(269deg) brightness(103%) contrast(102%);

}


.fit-content{
	height: fit-content;
}

.blob{
	border-style: solid;
	border-width: .5px;
	/* border-color: #40424A; */
	/* padding: 5px; */
	/* height:fit-content; */
}

.blob-vert{
	/* padding: 5px; */
	border-top: solid;
	border-bottom: solid;
	border-width:1px;
	border-color: #40424A;
	/* border-bottom:solid; */
	/* padding: 5px; */
}

.blob-vert-top{
	/* padding: 5px; */

	border-top: solid;
	border-width:1px;
	border-color: #40424A;
	/* border-bottom:solid; */
	/* padding: 5px; */
}
.blob-vert-bottom{
	/* padding: 5px; */

	border-bottom: solid;
	border-width:1px;
	border-color: #40424A;

}

.blob-hor-left{
	/* padding: 5px; */

	border-left: solid;
	border-width:1px;
	border-color: #40424A;

}

.blob-hor-right{
	/* padding: 5px; */

	border-right: solid;
	border-width:1px;
	border-color: #40424A;

}
.blob-padding{
	padding:5px !important;
}

.blob-hor-right-sm {	
	border-right: solid;
	border-width:1px;
	border-color: #40424A;
}


.blob-hor-right-sm-none {
	border-right: none;

}
.blob-hor-left-sm-none {
	border-left: none;
}
.blob-vert-bottom-sm-none {
	border-bottom: none;
}



.no-padding{
	padding:0 !important;
	 
}
.thumbnail{
	/* padding: 10px; */
	/* border-radius: 24px; */
	/* margin: 5px; */
}
.thumbnail-text{
	/* width: calc(100% - 75px) !important; */
	/* margin-left: 5px; */
	align-items:center;
	display:inline;
}

.thumbnail-descrip{
	margin-top:50px;
	margin-bottom:20px;
	margin-left:5px;
}

#home-description{
	height: 215px;
	margin-bottom: 0px;

}

.spacer{
	display: flex;
	/* flex-direction: column; */
	padding: 5px;
	justify-content: end;
	align-content: end;

}

.footer{
	/* background-color:#EAEAEA; */
	
	color: #ffffff;
	padding: 50px 10px;
	border-radius: 25px;
	/* background-color: #79947F; */
}


.variable-height{
	height: auto;
}



/* ------------------------ animation ------------------------------- */

.an_1{
	/* --animate-duration: 800ms; */
	--animate-delay: 0.1s;
	-webkit-animation-delay: 0.1s;

}

.an_2{
	/* --animate-duration: 800ms; */
	--animate-delay: 0.3s;
	-webkit-animation-delay: 0.3s;
}
.an_3{
	/* --animate-duration: 800ms; */
	--animate-delay: .8s;
	-webkit-animation-delay: .8s;
}

/* // Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up) */
@media (min-width @screen-sm-min) {
	
}


/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

	/* --------------- text-styling -------------------------------------------- */

	
	
	h1{
		font-family: 'Telegraf-Bold';
		font-weight: 400;
		font-size: 6rem;
		line-height: 6rem;
		color: #191b23;
		/* padding-bottom: 15px; */
		
	
	
	}
	
	h2{
		font-family: 'Telegraf-Bold';
		font-weight: 400;
		font-size: 2.4rem;
		line-height: calc(.9 * 2.4rem);

		margin-bottom:8px;
	}

	h3{
		font-family: 'Telegraf-Regular';
		font-weight: 400;
		font-size: 2rem;
		line-height: calc(.9 * 2rem);
				/* color: # */
		/* margin-bottom:10px; */
	}
	
	
	p{
	font-family: 'Telegraf-Regular';
	font-size: .95rem;
	line-height: calc(.95rem * .9);
	margin:0;
	color: #40424A;
	/* padding-bottom: 15px; */
	
	}
	


	.overline {
		font-family: 'iA-italic';
		font-weight:400;
		font-size: .8rem;
		
		/* letter-spacing: 1; */
		padding-bottom: .45rem;

		/* color: #ffffff; */
	}


	/* new home */

	.blob-hor-right-sm {	
		border-right: none;
	}
	

	.blob-hor-right-sm-none {
		border-right: solid;
		border-color: #40424A;

		border-width: 1px;
	}
	.blob-hor-left-sm-none {
		border-left: solid;
		border-color: #40424A;

		border-width: 1px;
	}

	.blob-vert-bottom-sm-none {
		border-bottom: solid;
		border-color: #40424A;

		border-width: 1px;
	}

	.blob-hor-right-md-none {
		border-right: none;
	}
	.blob-vert-bottom-md-none {
		border-bottom: none;
	}
	.blob-vert-top-md-none {
		border-top: none;
	}

	


	.inner-blob{
		display:flex;
		align-items: center;
		justify-content: center;
		padding: 24px;
		padding: 30px;
		height: 250px;
	}

	.inner-blob-secondary{
		/* padding: 10px; */
		/* border-radius: 24px; */
		display:flex;
		align-items: center;
		justify-content: center;
		padding: 18px;
		margin-bottom: 10px;
		height: 250px;
		
		/* margin: 5px; */
	}
	.inner-blob-secondary#video{
		/* padding: 10px; */
		/* border-radius: 24px; */
		display:flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		/* margin-bottom: 0px; */
		height: 250px;
		overflow: hidden;
		
		/* margin: 5px; */
	}



	.nav-button{
		border-radius: 50%;
		width: 60px;
		height: 60px;
		/* outline-style: solid; */
		/* background-color: #F2F2F2; */
			/* outline-color: grey; */
		/* background-color: grey; */
		margin: 5px;
		border-style: solid;
		border-width: 1px;
		border-color: #40424A;
		/* box-shadow: 0 0 2px #000000; */
		transition: background-color .5s;
		transition-timing-function: ease-in-out;
	}
	.nav-icon{
		padding: 7px;
		transition: .5s;
	}

	.nav-button:hover{
		background-color: #3c3c3c;
		
	}
	.nav-button:hover .nav-icon {
		filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(269deg) brightness(103%) contrast(102%);
	
	}

	.no-padding{
		padding:0 !important;
		 
	}
	.fit-content{
		height: fit-content;
	}

	.thumbnail-text{
		width: calc(100% - 75px) !important;
		/* display:flex; */
		display:inline;
		align-items:center;
		margin-left: 5px;
	}
	.thumbnail-descrip{
		margin-top:50px;
		margin-bottom:20px;
	}

	.thumbnail{
		/* padding: 10px; */
		/* border-radius: 24px; */
		/* margin: 5px; */
	}


	#home-description{
		height: auto;
		margin-bottom: 0;

	}




}
    


/* // Large devices (desktops, 992px and up) */

@media (min-width:992px) { 


	/* ---------------- Text ---------------------------------------- */
	
	  h1{
		  font-family: 'Telegraf-Bold';
		  font-weight: 400;
		  font-size: 8rem;
          padding-bottom: 0;
		  line-height: 8rem;
		  color:#40424A;
          /* height: 60px; */

	  }
	  
	  h2{
		font-family: 'Telegraf-Bold';
		/* font-weight: 400; */
		font-size: 3.0rem;
		line-height: calc(.9 * 3.0rem);
		margin-bottom:10px;
		}

	  
	  h3{
		  font-family: 'Telegraf-Regular';
		  /* font-weight: 100; */
		  font-size: 2.5rem;
		  line-height: calc(.9 * 2.5rem);

	  }
	

	  h4{
		font-family: 'Telegraf-Regular';
		font-weight: 400;
		font-size: 1.3rem;
		line-height: 1.3rem;
		/* margin-bottom:10px; */
	}

	.button h4{
		font-family: 'Telegraf-Regular';
		font-weight: 400;
		font-size: 1.3rem;
		line-height: 1.3rem;
		font-size: 1.3rem;
	}

	.button:hover{
		background-color: #40424A;
	  
	}
	
	.button:hover h4{
		color: #f2f2f2;
	}
	  	  

	
	  p{
		font-family: 'Telegraf-Regular';
		font-size: 1.5rem;
		line-height: 1.5rem;
		margin:0;
		padding-bottom: 0px;
	
	  }

	  .overline {
		  font-family: 'iA-italic';
		  font-weight:400;
		  font-size: .8rem;
		  
		  letter-spacing: auto;
		  padding-bottom: .5rem;
		  /* color: #ffffff; */
	  }
      /* --------------------------------ELEMENT STYLING------------------------  */










		.stamp{
			padding: 0px 0px;
		}

		/* -----------------ABOUT PAGE --------------------------------------- */

		.about{
			padding:0;
		}

		.about-picture{
			border-radius: 25px;
			/* padding: 80px; */
		}
		.about-text{
			padding-left:60px;
			
		}
		.about-body{
			font-size:1.2rem;
		}

		.skills{
			margin-top:80px;
			pointer-events: none;
		}

		.button#skills{
			border-width: 1px;
			border-color: #40424A;
		}		


		.inner-blob{
			/* padding: 10px; */
			/* border-radius: 24px; */
			display:flex;
			align-items: center;
			justify-content: center;
			padding: 70px;
			margin-bottom: 10px;
			height: 320px;
			
			/* margin: 5px; */
		}


		.inner-blob-secondary{
			/* padding: 10px; */
			/* border-radius: 24px; */
			display:flex;
			align-items: center;
			justify-content: center;
			padding: 36px;
			margin-bottom: 10px;
			height: 320px;
			
			/* margin: 5px; */
		}
		.inner-blob-secondary#video{
			height: 320px;

		}


		.nav-button{
			border-radius: 50%;
			height: 75px;
			width: 75px; 
			display:flex; 
			align-items: center; 
			justify-content: center;
			
			/* outline-style: solid; */
			/* background-color: #F2F2F2; */
				/* outline-color: grey; */
			/* background-color: grey; */
			border-style: solid;
			border-width: 1px;
			border-color: #40424A;
			/* box-shadow: 0 0 2px #000000; */
			transition: background-color .5s ease;
			/* transition-timing-function: ease-in-out; */
			margin: 0 10px;
		}
		.nav-icon{
			padding: 7px;
			transition: .5s ease;
		}

		.nav-button:hover{
			background-color: #3c3c3c;
			
		}
		.nav-button:hover .nav-icon {
			filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(269deg) brightness(103%) contrast(102%);
		
		}


		.fit-content{
			height: fit-content;
		}

		.thumbnail-text{
			width: calc(100% - 75px) !important;
			margin-left: 10px;
			/* display:flex; */
			display:inline;
			align-items:center;
			
		}

		.thumbnail{
			/* padding: 10px; */
			/* border-radius: 24px; */
			/* margin: 5px; */
			/* transform-style: preserve-3d; */
		}

		.spacer{
			display: flex;
			justify-content: end;
			align-items: flex-end;

		}

		.font-spacing{
			padding: 10px 5px;
		}

		

		.blob-hor-right-md-none {
			border-right: solid;
			border-width: 1px;
			border-color: #40424A;

		}
		.blob-vert-bottom-md-none {
			border-bottom: solid;
			border-width: 1px;
			border-color: #40424A;


		}
		.blob-vert-top-md-none {
			border-top: solid;
			border-width: 1px;
			border-color: #40424A;


		}
		.variable-height{
			height: 75%;
		}
		
	

	}