/*
Company Name: C.O.N.C.H. Council of Native Caribbean Heritage
Company URL: http://conch.org //
Author: 11:22 Creative Design, LLC
Author URL: https://1122creativedesign.com //
Resource: Responsive Web Design with HTML5 and CSS, Third Edition
Author: Ben Frain
Publisher: Packt Publishing
Resource URL: https://www.packtpub.com/product/responsive-web-design-with-html5-and-css/9781839211560 //
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@100;200;300;400;500;600;700;800;900&family=Oswald:wght@200;300;400;500;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Passions+Conflict&display=swap');

/*Flecha para hacer la pagina hacia arriba*/
#button-up{
    width: 60px;
    height: 60px;
    background: #ff9900;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 50%;
    font-size: 20px;
    position: fixed;
    bottom: 50px;
    right: 50px;
    cursor: pointer;
    border: 4px solid transparent;
    transition: all 300ms ease;
    transform: scale(0);
}

#button-up:hover{
    transform: scale(1.1);
    border-color: rgba(0,0,0,0.1);
}
img {
	max-width: 100%;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style: none;
	text-decoration: none;
	font-family: 'Poppins', sans-serif;
}

.teamlayout {
	margin-top: 100px;
	width: 100%;
	padding: 100px 150px 0;
	color: #111111;
	z-index: -5;
	transition: 0.5s;
}

.headline {
	border-bottom: #003366 solid 1px;
	margin: 0;
}

.headline h2 {
	font-size: 25px!important;;
	font-weight: 800;
	line-height: 0px;
	padding: 0 0 10px;
	text-transform: uppercase;
	color: #003366;
	transition: 0.5s;
	font-size:  ;
}

.headline h2 span {
	font-size: 1.5rem;
	font-weight: 100%;
	text-transform: uppercase;
	color: #ff9900;
	transition: 0.5s;
}

.teamcontent {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	margin: 100px 0 0;
}

.teamid {
	flex-direction: column;
}

.photo img {
	border-radius: 4px;
	max-width: 300px;
}

.teamcontent h3 {
	font-size: 1.1rem;
	font-weight: 600;
}

#namelength2 {
	font-size: 0.98rem;
}

#namelimit {
	font-size: 1rem;
	max-width: 300px
}

.teamcontent h4 {
	font-weight: 300;
	text-transform: uppercase;
}

.quotes {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	max-width: 325px;
	margin: 40px 0;
}

#quotes {
	width: 60px;
	margin: -0.5rem 0.25rem 0 0;
	padding: 0;
	opacity: 0.5;
}

.quotes p {
	font-family: "Times New Roman", Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "serif";
	font-size: 1.8rem;
	text-align: center;
}

#attribution {
	line-height: 2rem;
	margin: 20px 0;
	text-align: center;
}

#attribution_email {
	margin: 0 0 20px 0;
    color: #003366;
    text-decoration:none;
    font-size: 0.9375rem;
    font-weight: 600;
}
#attribution_email:hover {
color: #ff9900;
opacity:0.7;
}



a.hlink:link, a.hlink:visited, a.hlink:active {

}



.teambio {
	border-right: #ff9900 solid 1px;
	border-bottom: #ff9900 solid 4px;
	border-bottom-right-radius: 10px;
	padding: 0 50px 40px 0;
}

.teambio p {
	font-size: 20px;
	margin: 0 0 15px 0;
	font-weight: 400;
	max-width: 750px;
	font-family: 'Poppins', sans-serif;
  color: #111111;
	text-align: justify;
}

.teambio p a {
	color: #111;
	transition: 0.3s ease-out;
}

.teambio p a:hover {
	color: #00cccc;
	transition: 0.3s ease-out;
}

.teambio .indent {
	text-indent: 15px;
}

#bioitalics {
	font-size: 1.1rem;
	font-style: italic;
}

span {
	font-size:3rem;
	font-weight: 800;
	line-height: 0px;
	padding: 0 0 30px;
	text-transform: uppercase;
	color: #003366;
	transition: 0.5s;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}
.dropcap {
	float: left;
	font-size: 5.5rem;
	font-weight: 700;
	line-height: 3.75rem;
	margin: 0.75rem 0 0.1rem -0.25rem;
	padding: 0.2rem;
	color: #003366;
}

.dropcapinitext {
	float: left;
	font-size: 90px !important;
	font-weight: 700;
	line-height: 3.75rem;
	margin: 0.75rem 0 0.1rem -0.25rem;
	padding: 0.2rem;
	color: #003366;
}

.dropcap:before, .dropcap:after {
	content: "";
	display: block;
}

.dropcap:before {
	margin-top: -0.2rem;
}

.dropcap:after {
	margin-top: -0.15rem;
}




/* this "sr-only" class style is used when there is a single word with a drop cap at the beginning of the paragraph. It serves to make audible read outs of the website read the first word as one single word instead of two separate words (e.g., P.... rofessionals).
Example: <p>Professionals are always available for your telehealth sessions.</p> The P in Professionals is getting the drop cap.
Do this: <p><span aria-hidden="true"><span class="dropcap">P</span>rofessionals</span> <span class="sr-only">Professionals</span> are always available for your telehealth sessions.</p>*/

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

#sizing {
	font-size: 1.1rem;
}


.funfactszone {
	width: 100%;
	padding: 0 150px 100px;
	color: #111111;
	z-index: -5;
}

.funfacts {
	margin-top: 100px;
}

.funfacts h5 {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1em;
	text-transform: uppercase;
	color: #00cccc;
}

.funfacts p {
	font-size: 1.1rem;
	margin: 10px 0;
	font-weight: 600;
	max-width: 600px;
}



@media screen and (max-width: 1440px) {
	.teamlayout {
		padding: 100px 125px 40px;
	}
}

@media screen and (max-width: 1350px) {
	.teamlayout {
		padding: 100px 100px 40px;
	}
}

@media screen and (max-width: 1200px) {
	.teamlayout {
		padding: 100px 60px 40px;
	}
}

@media screen and (max-width: 1100px) {
	.teamlayout {
		padding: 100px 50px 40px;
	}
}


@media screen and (max-width: 1400px) {
	.teambio p {
		max-width: 650px;
	}
}

@media screen and (max-width: 1250px) {
	.teambio p {
		max-width: 600px;
	}
}

@media screen and (max-width: 1080px) {
	.teambio p {
		max-width: 500px;
	}
}

@media screen and (max-width: 991px) {
	.teamlayout {
		margin-top: 60%;
		padding: 0 30px;
	}
	.headline h2 {
		font-size: 1.5rem;
		transition: 0.5s;
	}
	.headline h2 span {
		transition: 0.5s;
		font-size: 40%;
	}
	.teamcontent {
		margin: 30px 0 0;
	}
	.teamid {
		text-align: center;
	}
	.photo img {
		width: 60%;
	}
	.teamcontent h3 {
		font-size: .95rem;
	}
	.teamcontent #namelength {
		font-size: .9rem;
	}
	.teamid #namelimit {
		font-size: .9rem;
		margin: 0 40px;
	}
	.teamcontent h4 {
		font-size: .8rem;
	}
	#attribution {
		line-height: 1.2rem;
		margin: 10px 0;
	}
	#attribution2 {
		margin-bottom: 20px;
	}
	.quotes {
		margin: 20px 0 15px 0;
	}
	#quotes {
		width: 40px;
	}
	.quotes p {
		font-size: 1.15rem;
	}
	.teambio {
		padding: 0 15px 20px 0;
		margin-bottom: 40px;
	}
	.teambio p {
		font-size: 1rem;
	}
	#bioitalics {
		font-size: 1rem;
	}
	.dropcap {
	font-size: 3.5rem;
	line-height: 2rem;
	}
	.funfactszone {
	padding: 0 40px 40px;
	}
	.funfacts {
	margin-top: 0px;
	}
	.funfacts h5 {
	font-size: 1.25rem;
	}
	.funfacts p {
	font-size: .95rem;
	}
}