/* Page CSS */

/* Intro */
section.intro {
	background-color: #fff;
}
section.intro img {}
section.intro h1 {
	color: #2c2c2e;
	font-size: 2.25rem;
	font-weight: 600;
	letter-spacing: -0.01rem;
}	
section.intro h2 {
	color: #555;
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: -0.01rem;
}
section.intro p {
	color: #444;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: -.009rem;
	margin-bottom: 0;
}
section.intro .btn {
	background-color: #fff;
	border: 0.085rem solid #a7abb3;
}
section.intro .btn:hover {
	
}


/* Subjects */
section.subjects {}
section.subjects ul {
	display: flex;
	flex-direction: row;
	margin-bottom: 0;
	padding: 0;
	width: 100%;
}
section.subjects ul li {
	list-style: none;
}
section.subjects ul li:nth-child(1) a {
	background: rgba(189, 191, 198, 1) linear-gradient(to right, #bdbfc6 25%, #c8c9d0 95%) repeat scroll 0 0;
	display: block;
	transition: background .3s ease-in;
}
section.subjects ul li:nth-child(2) a {
	background: rgba(250, 166, 0, 1) linear-gradient(to right, #ff6a00 25%, #ff8400 95%) repeat scroll 0 0;
	display: block;
	transition: background .3s ease-in;
}
section.subjects ul li:nth-child(3) a {
	background: rgba(0, 202, 232, 1) linear-gradient(to right, #00cae8 25%, #00d9f9 95%) repeat scroll 0 0;
	display: block;
	transition: background .3s ease-in;
}
section.subjects ul li:nth-child(1) a:hover {
	background: #555;
	display: block;
	text-decoration: none;
}
section.subjects ul li:nth-child(2) a:hover {
	background: #555;
	display: block;
	text-decoration: none;
}
section.subjects ul li:nth-child(3) a:hover {
	background: #555;
	display: block;
	text-decoration: none;
}
section.subjects h2 {
	color: #fff;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -.01rem;
	margin-bottom: 0;
}
section.subjects span.line {
	background-color: #fff;
	display: block;
	height: 0.095rem;
	width: 60%;
}
section.subjects p {
	color: #fff;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: -.01rem;
	margin-bottom: 0;
}
section.subjects .fal.fa-angle-right {
	font-size: 1.25rem;
	vertical-align: middle;
	padding-bottom: .05rem;
}


/* Examples */
section.examples {}
section.examples h2 {
	color: #2c2c2e;
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: -.01rem;
}
section.examples a {
}
section.examples a:hover {
	text-decoration: none;
}
section.examples a span.text {
	color: #3c3e49;
	display: block;
	font-size: 1.05rem;
	font-weight: 500;
	transition: all .2s ease-in-out;
}
section.examples a:hover span.text {
	color: #000;
}

section.examples .fal.fa-angle-right {
	font-size: 1.25rem;
	vertical-align: middle;
	padding-bottom: .05rem;
}
section.examples .example-logo {
	position: absolute;
	bottom: 10px;
	right: 10px;
	max-width: 150px;
}


/* CTA */
section.cta {}
section.cta h2 {
	color: #111;
	font-size: 3rem;
	font-weight: 600;
	letter-spacing: -0.05rem;
}
section.cta p {
	color: #333;
	font-size: 1.05rem;
	font-weight: 400;
	letter-spacing: -.009rem;
	margin-bottom: 0;
}
section.cta input {}


/* Showcase */
section.showcase {}
section.showcase img {}
section.showcase img[src$=".svg"]  {
    max-width: 100px; 
}
section.showcase h2 {}


/* Contact options */
section.contact-options {}
section.contact-options .btn-li {}
section.contact-options .btn-fb {}
section.contact-options .btn-mail {}
section.contact-options .btn-app {}
section.contact-options .btn-tv {}
section.contact-options .btn-wt {}

section.contact-options .option button {
	color: #fff;
	width: 100%;
}
section.contact-options .option button:hover {
	background-color: #666 !important; 
}
section.contact-options .option:nth-child(1) button {
	background-color: #007bb5; 
} 
section.contact-options .option:nth-child(2) button {
	background-color: #3b5998;
} 
section.contact-options .option:nth-child(3) button {
	background-color: #ff6a00;
} 
section.contact-options .option:nth-child(4) button {
	background-color: #25d366;
} 
section.contact-options .option:nth-child(5) button {
	background-color: #111;
}
section.contact-options .option:nth-child(5) button img {
	max-width: 25px;
}