/*BEGINNING*/


/*DESKTOP VIEW STARTS*/

html,
body {
	width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  } 



.content-main{
	margin: auto;
	max-width: 1200px;
	padding-top: 48px;
	padding-left: 48px;
	padding-right: 48px;
	font-family: 'Roboto', sans-serif;
}

/*HERO*/

.hero{
	display: flex;
	flex-direction: row;
	margin-top: 120px;
	padding-bottom: 120px;
	justify-content: center;
	align-items: center;
}

.hero-info-container{
	width: 100%;
}

.profile-img-container{
	display: flex;
	justify-content: center;

}

.profile-img{
	width: 50%;
	border: 1px solid rgba(66, 141, 253, 0.2);
	border-radius: 12px;
	box-shadow: -18px -18px 42px rgba(66, 141, 253, 0.18), 18px 18px 42px rgba(4, 28, 89, 0.24);
}

.profile-img-2{
	width: 50%;
	margin: auto;
	border: 1px solid rgba(231, 115, 19, 0.24);
	border-radius: 12px;
	box-shadow: -18px -18px 24px rgba(231, 115, 18, 0.18), 18px 18px 24px rgba(27, 33, 35, 0.18);
}

.quicklink-icon-holder{
	display: flex;
	flex-direction: row;
	column-gap: 20px;
	width: 100px;
	align-items: center;
}

.quicklink:hover{
	animation: wiggle .1s infinite alternate;
  	transform-origin: center 60%;
}

@keyframes wiggle {
  0% { transform: rotate(-10deg); }
  100% { transform: rotate(10deg); }
}

.nav{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	text-decoration: none;
	color: #000000;
	z-index: 1001;
}

.nav-logo{
	width: 160px;
}

.navUl{
	color: #000000;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	list-style-type: none;
	margin: 0;
	padding: 0;
	float: right;
	text-decoration: none;
	transition: transform ease .2s;
}

.hamburger{
	background-color: transparent;
	border: 0;
	width: 30px;
	display: none;
	margin: 0;
	padding: 0;
}

.hamburger:focus{
	outline: none;
}

.nav-li{
	display: inline-block;
color: #000000;
 padding-left: 60px;
 font-size: 1.2rem;
 text-decoration: none;
 cursor: pointer;
}

.nav-li a:hover{
	padding-bottom: 6px;
	border-bottom: 3px solid black;
	transition: all ease .2s;
	cursor: pointer;
}

/*COPY*/

.hero-text{
	margin: 0;
	font-size: 52px;
	padding-top: 24px;
	padding-bottom: 24px;
	font-weight: 700;
	line-height: 33px;
	color: #374151;
}

.hero-copy{
	font-family: 'Roboto' sans-serif;
	font-size: 24px;
	line-height: 36px;
	color: #374151;
}

.body-copy{
	font-family: 'Roboto' sans-serif;
	font-size: 20px;
	line-height: 28px;
	margin-bottom: 28px;
	color: #374151;
}

a {
	text-decoration: none;
	color: #000000;
	cursor: pointer;
}

.text-link{
	color: #428DFD;
	cursor: pointer;
}

.text-link:hover{
	opacity: 1.0;
	cursor: pointer;
	padding-bottom: 6px;
	border-bottom: 3px solid #428DFD;
	transition: all ease .2s;
}

.main-header{
	margin-top: 0;
	margin-bottom: 12px;
	font-weight: 700;
	font-size: 28px;
	line-height: 32px;
	color: #374151;
}

h3{
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	text-transform: uppercase;
	color: #9CA3AF;
	margin: 0;
	padding-bottom: 12px;
}

.full-hr{
	border: 1px solid;
	margin-bottom: 48px;
	width: 100%;
}

ul{
	padding-top: 20px;
	padding-left: 18px;
	line-height: 24px;
	margin: 0;
}

p{
	padding: 0;
	margin: 0;
}


.small-copy{
	font-size: 16px;
	line-height: 2rem;
	margin: 0;

}

.teamUl{
	display: flex;
	flex-direction: row;
	list-style-type: none;
	justify-content: space-between;
}

.team-li{
	font-size: 1.3em;
	/*border-right: 1px solid black;*/
}

.team-vert-hr{
	border-right: 2px solid black;
	height: 25px;

}

/*COLORS*/

.white{
	color: #ffffff;
}

.blue{
	color: #428DFD;
}

.grey300{
	color: #F2F2F2;
}

.grey400{
	color: #DBD6D6;
}

.grey500{
	color: #a6a6a6;
}

.grey600{
	color: #4B5563;
}

.blue-gradient{
	background: linear-gradient(164.39deg, #1D5794 17.45%, #3C90DB 119.18%);
}

.orange-gradient{
	background: linear-gradient(22.27deg, #F79C04 0%, #EC7008 100%);
}

.purple-gradient{
	background: linear-gradient(199.55deg, #05172E 12.78%, #AB00B8 123.05%);
}

.grey-gradient{
	background: linear-gradient(135.18deg, #E5E7EB 21.32%, #9CA3AF 90.08%);
}

/*PROJECT CARDS*/

.project-flex-container{
	display: flex;
	margin: 42px auto;
	width: 100%;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}

.project-card{
	width: 375px;
	height: 250px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.05);
	border-radius: 12px;
	border: solid 1px #E5E7EB;
	transition: all .5s ease;
	background-image: url('assets/artist-bio-mockup.jpg'); 
	background-size: cover;
	color: #FFFFFF;
}

.project-card:hover{
	transform: scale(1.05);
	background: linear-gradient(243.64deg, #5666BB 0%, #1BBBF1 100%);
}

.project-card:hover .project-card-text{
	display: inline-block;
}

.project-card-text{
	font-size: 1.5em;
	display: none;
}

.project-card-2{
	width: 375px;
	height: 250px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.05);
	border-radius: 12px;
	border: solid 1px #E5E7EB;
	transition: all .5s ease;
	background-image: url('assets/backup-payments-card.png'); 
	background-size: cover;
	color: #FFFFFF;
}

.project-card-2:hover{
	transform: scale(1.05);
	background: linear-gradient(243.64deg, #FC6021 0%, #172B85 100%);
}

.project-card-2:hover .project-card-text-2{
	display: inline-block;
}

.project-card-text-2{
	font-size: 1.5em;
	display: none;
}



.project-img-background{
	max-width: 100%;
	max-height: 100%;
}

.coming-soon{
	width: 375px;
	height: 250px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.05);
	border: solid 1px #E5E7EB;
	border-radius: 12px;
	transition: transform .2s;
	cursor: pointer;
}

.coming-soon:hover{
	transform: scale(1.05);
}

.coming-soon-text{
	font-size: 1.5em;
}


/*RESUME ON ABOUT PAGE*/

.resume-holder{
	display: flex;
	margin: auto;
	max-width: 1200px;
	padding-top: 32px;
	padding-left: 48px;
	padding-right: 48px;
	font-family: 'Roboto', sans-serif;
	flex-direction: row;
	justify-content: space-evenly;
	flex-wrap: wrap;
}

.resume-col{
	width: 300px;
	font-size: 1em;
	display: flex;
	flex-direction: column;
	row-gap: 12px;
	justify-content: flex-start;
}

.resume-copy{
	line-height: 1.8em;
}

.resume-ul{
	list-style-type: none;
	line-height: 1.8em;
	padding-left: 0;
}

.resume-hr{
	width: 50px;
	margin-left: 0;
	border: 1px solid black;
}


.end-about{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 30px;
}

.adding-to-your{
	max-width: 540px;
	padding-right: 32px;
}

.adding{
	font-size: 20px;
	line-height: 28px;
	color: #374151;;
}

.film-pic{
	max-width: 520px;
	border-radius: 12px;
	box-shadow: -6px -6px 18px rgba(75, 88, 103, 0.12), 6px -2px 18px #D6B680;
}

.film-pic-caption{
	padding-top: 8px;
}

/*END OF ABOUT PAGE*/

/*CONTACT*/

.big-text-container{
	display: flex;
	padding-top: 160px;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.big-text{
	font-size: 6em;
}

.big-text-link{
	color: #428DFD;
	cursor: pointer;
}

.big-text-link:hover{
	opacity: 1.0;
	padding-bottom: 24px;
	border-bottom: 24px solid #428DFD;
	transition: all ease .2s;
	cursor: pointer;
}

/*ARTIST BIO AUTOMATION BEGIN*/

.project-hero{
	display: flex;
	flex-direction: row;
	column-gap: 120px;
	margin-top: 120px;
	margin-bottom: 88px;
}

.mockup-container{
	display: flex;
	flex-direction: row;
	/*width: 520px;*/
	column-gap: 32px;
	justify-content: center;
}

.artistbio-mockup{
	max-width: 280px;
	border: 1px solid #9CA3AF;
	border-radius: 20px;
	box-sizing: border-box;
	margin-bottom: 32px;
	padding: 0;
}

.artistbio-mockup2{
	max-width: 280px;
	border: 1px solid #9CA3AF;
	border-radius: 20px;
	box-sizing: border-box;
	margin-top: 32px;
	padding: 0;
}

.artistbio-desktop{
	max-width: 100%;
	max-height: 100%;
	border: 1px solid #9CA3AF;
	border-radius: 20px;

}

.artistbio-blurb-container{
	display: flex;
	flex-direction: column;
}

.role-li{
	font-size: 16px;
	line-height: 28px;
	padding-top: 0;
}

.ux-stage{
	width: 200px;
	padding: 12px;
	font-size: 12px;
	line-height: 20px;
	color: #9CA3AF;
	border: solid 1px #9CA3AF;
	border-radius: 6px;
}

.ux-h3{
	font-size: 16px;
	margin-bottom: 8px;
	color: #374151;
	text-transform: none;
	padding: 0;
}

.uxtitle-wrapper{
	display: flex;
	justify-content: center;
}

.uxflow-wrapper{
	display: flex;
	column-gap: 12px;
	justify-content: center;
	margin-bottom: 60px;
	padding: 30px;
}

.ux-timeline-hr{
	border: 0;
	border-bottom: 1px solid #E5E7EB;
	height: 1px;
	align-self: center;
	max-width: 120px;
	margin: 0;
}

.backup-payment-mockup{
	max-width: 600px;
	height: 345px;
}

.card-mockup{
	max-width: 280px;
	border: 1px solid #9CA3AF;
	border-radius: 20px;
	box-sizing: border-box;
	padding: 0;
}

.card-mockup2{
	max-width: 280px;
	border: 1px solid #9CA3AF;
	border-radius: 20px;
	box-sizing: border-box;
	padding: 0;
	margin-left: 32px;
}



/*FOOTER*/

.footer{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	row-gap: 16px;
	padding-bottom: 30px;
	padding-top: 80px;
	
}












/*DESKTOP VIEW STOPS*/

/*TABLET VIEWS START*/

@media only screen and (max-width: 820px) {


.content-main{
	margin: auto;
}

.profile-img{
	display: none;
}

.profile-img-2{
	display: none;

}

.content-main{
	margin: auto;
	max-width: 680px;
	padding-top: 36px;
	padding-left: 36px;
	padding-right: 36px;
	font-family: 'Roboto', sans-serif;
}

.project-flex-container{
	display: flex;
	margin: auto;
	margin-top: 36px;
	max-width: 100%;
	flex-direction: column;
}

.coming-soon{
	display: flex;
	align-items: center;
	margin: auto;
	margin-bottom: 24px;
	width: 100%;
	height: 200px;
	box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.05);
	border-radius: 6px;
}

.end-about{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-top: 30px;
}

.big-text{
	font-size: 3em;
}

.project-hero{
	display: flex;
	flex-direction: column-reverse;
	row-gap: 60px;
	margin-top: 24px;
	margin-bottom: 88px;
}

.mockup-container{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	row-gap: 32px;
}

.project-card{
	width: 100%;
	height: 200px;
	display: flex;
	margin-bottom: 24px;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.05);
	border-radius: 12px;
	border: solid 1px #E5E7EB;
	transition: all .3s ease;
	background-image: url('assets/artist-bio-mockup.jpg'); 
	background-size: cover;
	color: #FFFFFF;
}

}






/*MOBILE VIEWS START*/

@media only screen and (max-width: 428px) {


/*INDEX PAGE START*/

.content-main{
	max-width: 495px;
	padding-top: 36px;
	padding-left: 36px;
	padding-right: 36px;
	font-family: 'Roboto', sans-serif;
}

.no-top-space{
	padding-top: 0;
}

.nav{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 60px;
	text-decoration: none;
	color: #000000;
}

.navUl{
	display: none;
	width: 100%;
}

.navUl.show{
	display: flex;
	flex-direction: column;
	margin-bottom: 30px;
	background-color: white;
	padding: 0;
	margin: 0;
}

.nav-li{
	/*display: block;*/
	color: : #000000;
 	font-size: 1.4rem;
 	text-decoration: none;
 	padding-left: 0;
 	padding-bottom: 18px;
 	cursor: pointer;
}

.nav-li a:hover{
	border-bottom: none;
}

.hamburger{
	background-color: transparent;
	border: 0;
	width: 30px;
	height: 21px;
	cursor: pointer;
	float: right;
	display: block;
	transition: all .3s ease-in-out;
}

.burger{
	width: 24px;
	height: 18px;
}

.hamburger:focus{
	outline: none;
	/*position: relative;
	top: 10%;*/
}

.hero{
	display: flex;
	flex-direction: column;
	margin-top: 60px;
	padding-bottom: 36px;
}

.hero-text{
	line-height: 1.2em;
	font-size: 24pt;
}

.profile-img-container{
	display: none;

}

.profile-img{
	display: none;
	}

.titles{
	font-size: 18pt;
	font-weight: 500;
	padding-bottom: 12px;
	margin: 0;
	font-family: 'Roboto Slab', serif;
}

.body-copy{
	font-size: 12pt;
	line-height: 1.7em;
	margin-bottom: 42px;
	font-family: 'Roboto' sans-serif;
}

.small-copy{
	font-size: 18px;
	margin: 0;
}

ul{
	line-height: 1.7em;
	margin-bottom: 24px;
}

.main-btn{
	width: 100%;
	padding: 18px;
	font-size: 16pt;
	font-family: 'Roboto', sans-serif;
	border-style: none;
	border-radius: 6px;
}

.grey500{
	color: #a6a6a6;
}

.grey400{
	color: #DBD6D6;

}

.grey300{
	color: #DBD6D6;
}

.center{
	display: flex;
	justify-content: center;
	padding-top: 18px;
	padding-bottom: 24px;
}

.blue{
	color: #428DFD;
}

.icon-link-linkedin{
	height: 16px;
	width: 14px;
	padding-right: 18px;
}


.icon-link-mail{
	height: 12px;
	width: 16px;
	padding-right: 12px;
	padding-bottom: 2px;
}

a {
	text-decoration: none;
}

.project-flex-container{
	display: flex;
	margin: auto;
	margin-top: 36px;
	max-width: 100%;
	flex-direction: column;
}

.project-card{
	display: flex;
	align-items: center;
	margin: auto;
	margin-bottom: 24px;
	width: 100%;
	height: 200px;
	box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.05);
	border-radius: 6px;
}

.coming-soon{
	display: flex;
	align-items: center;
	margin: auto;
	margin-bottom: 24px;
	width: 100%;
	height: 200px;
	box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.05);
	border-radius: 6px;
}

.project-img-1{
	width: 185px;
}

.project-img-2{
	width: 275px;
}

.project-img-3{
	width: 132px;

}

/*INDEX PAGE END*/

/*ABOUT PAGE*/

.film-pic{
	max-width: 100%;
	margin: auto;
	border-radius: 12px;
	box-shadow: -6px -6px 18px rgba(75, 88, 103, 0.12), 6px -2px 18px #D6B680;
}

.resume-hr{
	width: 50px;
	margin: 0;
	border: 1px solid black;
}

.resume-col{
	width: 300px;
	font-size: 1em;
	display: flex;
	flex-direction: column;
	text-align: center;
}

/*PROJECT PAGE BEGIN*/

.project-hero-1{
	width: 100%;
	height: 500px;
	border: 1px solid #F2F2F2;
	box-sizing: border-box;
	box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.05);
	background: linear-gradient(164.39deg, #1D5794 17.45%, #3C90DB 119.18%);
	display: flex;
	justify-content: center;
	align-items: center;
}

.content-wrapper{
	margin: 18px 36px;
	flex-direction: column;
}



.blue-bg{
	padding: 24px 36px;
	background: linear-gradient(164.39deg, #1D5794 17.45%, #3C90DB 119.18%);
	color: #fff;

}

/*ARTIST BIO MOBILE*/

.project-hero{
	display: flex;
	flex-direction: column-reverse;
	row-gap: 60px;
	margin-top: 24px;
	margin-bottom: 88px;
}

.mockup-container{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.artistbio-mockup{
	max-width: 280px;
	border: 1px solid #9CA3AF;
	border-radius: 20px;
	box-sizing: border-box;
	margin-bottom: 32px;
	padding: 0;
}

.artistbio-mockup2{
	max-width: 280px;
	border: 1px solid #9CA3AF;
	border-radius: 20px;
	box-sizing: border-box;
	margin-top: 32px;
	padding: 0;
}

.artistbio-desktop{
	max-width: 100%;
	max-height: 100%;
	border: 1px solid #9CA3AF;
	border-radius: 20px;

}

.artistbio-blurb-container{
	display: flex;
	flex-direction: column;
}

.role-li{
	font-size: 16px;
	line-height: 28px;
	padding-top: 0;
}

.ux-stage{
	width: 200px;
	padding: 12px;
	font-size: 12px;
	line-height: 20px;
	color: #9CA3AF;
	border: solid 1px #9CA3AF;
	border-radius: 6px;
	flex: none;
}

.ux-h3{
	font-size: 16px;
	margin-bottom: 8px;
	color: #374151;
	text-transform: none;
	padding: 0;
}

.uxtitle-wrapper{
	display: flex;
	justify-content: center;
	margin-bottom: 40px;
}

.uxflow-wrapper{
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 12px;
	justify-content: center;
	margin-bottom: 60px;
}

.ux-timeline-hr{
	border: 0;
	border-bottom: 1px solid #E5E7EB;
	height: 1px;
	align-self: center;
	max-width: 120px;
	margin: 0;
}

.backup-payment-mockup {
  max-width: 100%;
  height: auto;
}

.card-mockup{
	max-width: 280px;
	border: 1px solid #9CA3AF;
	border-radius: 20px;
	box-sizing: border-box;
	padding: 0;
}

.card-mockup2{
	max-width: 280px;
	border: 1px solid #9CA3AF;
	border-radius: 20px;
	box-sizing: border-box;
	padding: 0;
	margin-left: 32px;
}

.footer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin-bottom: 30px;
}



/*END OF MOBILE VIEW*/
	}