@charset "UTF-8";

/* PROFILE PAGES HEADER */

.site-header-profile{
	border-top:10px solid var(--color-blue);
	padding:0 0;
	position:relative;
}
.site-header-profile .nav-content-width{
	margin:0 auto;
	max-width:1100px;
	position:relative;
	width:94%;
}
.site-header-profile .nav-content-width > div{
	align-items:center;
	display:flex;
	justify-content:center;
	padding:24px 0;
}
.site-logo{
	flex:1 0 auto;
	max-width:152px;
	width:75%;
}
.site-logo img{
	display:block;
	height:auto;
	margin:0 auto;
	width:100%;
}

@media screen and (min-width: 45em) { /*720px*/

	.site-header-profile{
		border-top:15px solid var(--color-blue);
		padding:0;
	}

	.site-header-profile .nav-content-width > div{
		padding:48px 0;
	}

	.site-logo{
		max-width:294px;
		width:50%;
	}

}

.global-login-btn{
	display: block;
	position:absolute;
	right:0;
	top:0;
	width:90px;
}

.global-login-btn a{
	background-color:#8031A7;
	border-radius:0 0 8px 8px;
	color:var(--color-white);
	display:block;
	font-size:0.75em;
	font-weight:700;
	letter-spacing:0em;
	line-height:1em;
	margin:0;
	padding:6px 12px 8px 12px;
	text-align:center;
	text-decoration:none;
}

@media screen and (min-width: 45em) { /*720px*/

	.global-login-btn{
		width:140px;
	}
	
	.global-login-btn a{
		font-size:1.125rem;
		padding:10px 24px 12px 24px;
	}

}

/* TAGLINE */

.tagline-bar-profile{
	background-color:#8031A7;
}
.tagline-bar-profile p{
	color:#ffffff;
	font-size:0.75rem;
	font-weight:500;
	line-height:1.3em;
	margin:0;
	padding:10px 12px;
	text-align:center;
	text-transform: uppercase;
}

@media only screen and (min-width:45em){

	.tagline-bar-profile p{
		font-size:0.875rem;
		padding:11px 12px;
	}

}

/* CONTENT */

.content-width{
	margin:0 auto;
	max-width:940px;
	position:relative;
	width:94%;
}

main{
	margin:32px 0;
}

@media only screen and (min-width:45em){
	main{
		margin:60px 0;
		min-height:calc(100vh - 664px);
	}
}

main h1{
	color:var(--text-color);
	font-size:1.125rem;
	line-height:1.333em;
	margin:1.25rem 0;
}
main h1 + p.after-heading{
	margin-top:-1rem;
}
@media only screen and (min-width:45em){

	main h1{
		font-size:1.25rem;
		margin:2rem 0;
	}
	main h1 + p.after-heading{
		margin-top:-1.75rem;
	}

}

main h1.size28{
	color:var(--color-blue);
	font-size:1.35rem;
	line-height:1.2666em;
	margin:1.25rem 0;
}
@media only screen and (min-width:45em){

	main h1.size28{
		font-size:1.75rem;
		line-height:1.2666em;
		margin:3rem 0;
	}

}

main h2{
	color:var(--color-purple);
	font-size:1.35rem;
	line-height:1.2666em;
	margin:1.25rem 0;
}

main h3{
	color:var(--text-color);
	font-size:1.25rem;
	line-height:1.333em;
	margin:0.75rem 0;
}

main h4{
	color:var(--text-color);
	font-size:1rem;
	line-height:1.333em;
	margin:0.75rem 0;
}

main p{
	color:var(--text-color);
	font-size:0.9375rem;
	line-height:1.5em;
	margin:1.25rem 0;
}

main ul{
	margin:0.75rem 0 0.75rem 0;
	padding-left:1.125rem;
}

main li{
	color:var(--text-color);
	font-size:0.9375rem;
	line-height:1.5em;
	margin:0.75rem 0;
	padding-left:0.25rem;
}

main ul.no-space li{
	margin:0.125rem 0;
}

main p a, 
main li a{
	color:var(--color-purple);
	font-weight:700;
	text-decoration:none;
}

@media only screen and (min-width:45em){

	main h2{
		font-size:1.75rem;
	}

	main h3{
		font-size:1.3125rem;
	}

	main h4{
		font-size:1.125rem;
	}

	main p{
		font-size:1rem;
		margin:2rem 0;
	}

	main li{
		font-size:1rem;
		padding-left:1.5rem;
	}

	main ul.no-space li{
		margin:0.125rem 0;
	}

}


/* GLOBAL - HEADER - MARQUEE */

.marquee{
	box-sizing:content-box;
	background:#0033A0;
	background-position:center center;
	background-repeat: no-repeat;
	border-bottom:6px solid #8031A7;
}

.marquee .content-width{
	align-items:center;
	display:flex;
	height:120px;
	position: relative;
}

.marquee h1{
	color:#FFFFFF;
	font-size:1.25rem;
	font-weight:700;
	line-height:1.25em;
	margin:0.5rem 0;
}

.marquee p{
	color:#FFFFFF;
	font-size:0.9375rem;
	font-weight:500;
	line-height:1.25em;
	margin:0.5rem 0;
}

@media screen and (min-width: 45em) { /*720px*/

	.marquee{
		height:170px;
		border-bottom:10px solid #8031A7;
	}

	.marquee .content-width{
		height:170px;
	}

	.marquee h1{
		font-size:2em;
		line-height:1.25em;
		margin:0.5rem 0;
	}
	.marquee p{
		font-size:1.3125em;
		line-height:1.25em;
		margin:0.5rem 0;
	}

}

/* GLOBAL - HEADER - MARQUEE */

.marquee-profile{
	box-sizing:content-box;
	background:#F4F4F4;
}

.marquee-profile > div{
	padding:24px 12px;
}

.marquee-profile p{
    color:var(--text-color);
	font-size:1rem;
	font-weight:700;
	line-height:1.333em;
	margin:0 auto;
	max-width:660px;
	text-align: center;
}

@media screen and (min-width: 45em) { /*720px*/

	.marquee-profile > div{
		padding:48px 24px;
	}

	.marquee-profile p{
		font-size:1.5rem;
	}	

}


.content-container{
	margin-bottom:32px;
}

@media only screen and (min-width: 45em){ /* 720px */ 

	.content-container{
		margin-bottom:38px;
	}

}



.country-selector{
	margin:0rem auto;
	max-width:240px;
}

.country-selector > div{
	margin:2rem 0;
}

.country-selector > div a{
	align-items:center;
    color:var(--text-color);
	display:flex;
	font-size:1.3125rem;
	font-weight:700;
	line-height:1em;
	text-decoration:none;
}

.country-selector > div a:hover{
	color:var(--color-blue);
}

.country-selector > div a img{
	display:block;
	height:auto;
	width:61px;
}

.country-selector > div a span{
	display:block;
	margin:0 20px 0 30px;
}

@media screen and (min-width: 40em) {

	.country-selector{
		align-items:center;
		display:flex;
		flex:0 0 auto;
		flex-wrap: wrap;
		gap:0 40px;
		justify-content: flex-start;
		max-width:500px;
	}

	.country-selector > div{
		margin:0 0 2.5rem 0;
		width:calc(50% - 20px);
	}

}

.country-selected{
	display:flex;
	justify-content: center;
	margin:0rem auto 1.25rem auto;
}

.country-selected > div{
	align-items: center;
    color:var(--text-color);
	display:flex;
	font-size:1.3125rem;
	font-weight:700;
	gap:30px;
	line-height:1em;
	text-decoration:none;
}

.country-selected > div a img{
	display:block;
	height:auto;
	width:61px;
}

.country-selected > div a span{
	display:block;
	margin:0 20px 0 30px;
}

@media screen and (min-width: 40em) {

	.country-selected{
		display:flex;
		justify-content: center;
		margin:0rem auto 3rem auto;
	}

}

.profile-content{
	margin:1.25rem auto;
	max-width:620px;
	width:90%;
}

.profile-content.profile-content-720{
	max-width:720px;
}

.profile-content.profile-content-780{
	max-width:780px;
}

@media screen and (min-width: 40em) {
	.profile-content,
	.profile-content-720,
	.profile-content-780{
		margin:3rem auto;
	}
}

.edit-profile-name{
	align-items: center;
	display:flex;
	gap:20px;
	justify-content: flex-start;
	margin-bottom:32px;
}