@charset "UTF-8";
/* CSS Document */
/* Home page specific CSS */
/* Begins with 360 min-width handheld and builds to desktop */
/* with breakpoints at 480, 760, 1020, and 1680 */

html,body {
	width:100%;
	margin:0;
	font-size:16px;
}

.responsive {
	width:100%;
	&:before {
		content:"";
		float: left;
		padding-bottom:56.25vw;
	}
	&:after {
		content:"";
		display:table;
		clear:both;
	}
}

#homepage-header {
	width:100%;
	height:auto;
	color:#2c4b90;
}

.video1-div {
	width:100%;
	height:auto;
	background-color:lightgray;
	margin-bottom:1rem;
}

.video1-div .video1-wrapper {
	 width:100%;
	 height:auto;
	 background-color:lightgray;
	 margin-bottom:1rem;
}
	
.video1-div .video1 {
	width:100%;
	height:auto;
}

.video1-div .video1-wrapper h3 {
	font-size:1.25rem;
	text-align:center;
	margin-top:-.2rem;
}

#homepage-header {
	background-color:#f4f4f4;
	border-top:2px solid lightslategray;
	border-bottom:2px solid lightslategray;
	width:100%;
	height:auto;
}

#homepage-header-content {
	width:100%;
	color:#2c4b90;
	padding-top:1rem;
	padding-bottom:1rem;
	margin-bottom:1rem;
}

#homepage-header-content h1 {
	font-size:1.5rem;
	text-align:center;
	margin-top:0;
	padding-top:.4rem;
	padding-bottom:.4rem;
	line-height:110%;
	font-weight:600;
}

#homepage-header-content h2 {
	text-align:center;
	font-size:1.1rem;
	font-weight:600;
}

.video1-div {
	width:100%;
}

.video1-div .video1-wrapper {
	width:100%;
}

.video1-div .video1-wrapper h3 {
	font-size:1.2rem;
	padding-bottom:.2rem;
}
	
.video1 {
	width:100%;
	height:auto;
}

#sldi-homepage #clients {
	display:none;
}

.blue-banner {
	clear:both;
	background-color:rgb(23,54,95);
	width:100%;
	margin:.5rem 0;
	text-align:center;
}

.blue-banner h2,
.blue-banner h4 {
	color:white;
	background-color:rgb(23,54,95);
	text-align:center;
	font-size:1.2rem;
	font-weight:normal;
	padding-top:.25rem;
	padding-bottom:.25rem;
}

.blue-banner a.nine-reasons {
	color:yellow;
	font-size:1rem;
	text-decoration:underline;
}

#general-overview {
	width:100%;
	height:auto;
}

#overview-left,
#overview-right {
	width:100%;
	height:auto;
	background-color:white;
	margin-left:0;
	margin-right:0;
}
	
#mike-photo {
	display:none;
}

#cta-consult {
	width:90%;
	display:flex;
	flex-direction:column;
	justify-contents:center;
	background-color:rgba(23,54,95,.9);
	border-radius:15px;
	margin:2rem auto 1rem auto;
	padding-top:1rem;
	padding-bottom:1rem;
}

#cta-consult h3,
#cta-consult p {
	color: white;
}

#cta-consult p {
	font-size:1.2rem;
}

#overview-right h2 {	
	font-size:1.4rem;
	font-weight:600;
	padding-top:1.1rem;
	padding-bottom:1rem;
	text-align:center;
}

#overview-right h3 {
	font-size:1.4rem;
	text-align:center;
	padding-top:.5rem;
}
	
#overview-right h4 {
	font-size:1.1rem;
	font-weight:600;
	text-align:center;
	padding-top:.5rem;
}

#team-link h4,
#team-link a {
	font-size:1.2rem;
	padding-top:.5rem;
}

#team-link {
	background-color:yellow;
	width:100%;
	margin-top:2rem;
	margin-bottom:3rem;
	padding-bottom:1rem;
}

#delivery-options {
	display:flex;
	width:100vw;
	margin-left:auto;
	margin-right:auto;
	max-width:480px;
	margin-top:2rem;
}

#delivery-options img {	
	width:100%;
}

#services-banner {
	width:100%;
	margin-top:2rem;
}

#services-banner h2 {
	font-size:1.4rem;
	font-weight:600;
}

#resources {
	width:100%;
	margin-top:2rem;
}

#coaching-services {
	background-color:cornsilk;
}

#training-services {
	background-color:darkseagreen;
}

#consulting-services {
	background-color:khaki;
}

#nonprofit-services {
	background-color: lightsteelblue;
}

#coaching-content,
#training-content,
#consulting-content,
#nonprofit-content {
	width:96%;
	margin:0 auto;
	padding:1rem 0;
}

#coaching-content li,
#training-content li,
#consulting-content li,
#nonprofit-content li {
	font-size:1.2rem;
	font-weight:500;
	margin-left:2rem;
}

#coaching-services,
#training-services,
#consulting-services,
#nonprofit-services {
	width:100%;
}

#coaching-photo,
#training-photo,
#consulting-photo,
#nonprofit-photo {
	width:100%;
}

#coaching-photo img,
#training-photo img,
#consulting-photo img,
#nonprofit-photo img {
	width:100%;
}

#coaching-services h3,
#training-services h3,
#consulting-services h3,
#nonprofit-services h3 {
	width:100%;
	font-weight:600;
	text-align:center;
	margin-bottom:1rem;
}

#consultant-award {
	display:flex;
	flex-direction:column;
	width:90vw;
	max-width:380px;
	margin-top:1rem;
	margin-bottom:1rem;
	border:2px solid darkslategray;
	border-radius:15px;
}

#video2-div {
	width:100%;
	margin-top:-2rem;
	display:flex;
	justify-content:center;
	width:100%;
}


/* Tablet Portrait and Handheld Landscape View*/

@media (min-width: 480px) {

	#homepage-header {
		margin-top:2em;
		height:auto;
		background-repeat:no-repeat;
		background-position:top right;
		background-size:130% 100%;
		background-attachment:local;
		opacity:.95;
		border-bottom:2px solid darkslategray;
		overflow:hidden;
	}
	
	#homepage-header-content {
		width:100%;
		color:#2c4b90;
		height:auto;
		float:left;
		text-align:center;
	}
	
	#homepage-header-content h1 {
		margin-top:-.75em;
	}
	
	#homepage-header-content h2 {
		font-size:1.3rem;
	}
	
	.video1-div {
		max-width:640px;
		height:auto;
		margin-left:auto;
		margin-right:auto;
	}

	.video1-div .video1-wrapper {
		max-width:640px;
		margin-left:auto;
		margin-right:auto;
		margin-top:2em;
		opacity:.9;
	}

	.video1 {
		width:100%;
		border: 1px solid darkslategray;
	}

	#sldi-homepage #clients {
		display:block;
		width:100%;
		height:10em;
		line-height:100%;
		margin-top:2em;
		padding-top:0;
		background-color:white;
	}

	#sldi-homepage #clients h3 {
		text-align:center;
		font-weight:600;
		font-size:1.4em;
		padding-top:.15em;
		padding-bottom:.5em;
	}

	@keyframes scroll-logos {
		0% {transform: translateX(0); }
		100% {transform: translateX(-14100px); }
	}

	#sldi-homepage .client-scroll {
		width:100%;
		height:130px;
		overflow:hidden;
	}

	#sldi-homepage ul.client-scroll-content {
		animation: scroll-logos 60s linear infinite;
		display:flex; 
		list-style:none;
	}

	#sldi-homepage .client-scroll-item {
		width:200px;
		height: auto;
		padding-left:8px;
		padding-right:8px;
		flex-shrink:0;
	}

	#sldi-homepage .client-scroll-image {
		width:100%;
		height:auto;
	}
	
	.blue-banner h4,
	.blue-banner h4 a.nine-reasons {
		font-size:1.2em;
	}
	
	#general-overview {
		width:100%;
		height:auto;
		margin-top:2rem;
		margin-bottom:2rem;
	}
	
	#overview-left,
	#overview-right {
		width:100%;
	}
	
	#consultant-award {
		margin-left:auto;
		margin-right:auto;
	}
	
	#consultant-award p {
		font-size:1.3rem;
	}
	
	#cta-consult div.button a {
		font-size:1.3rem;
	}
	
	#coaching-services li,
	#training-services li,
	#consulting-services li,
	#nonprofit-services li {
		margin-left:3rem;
	}

	#video2-div {
		margin-top:1rem;
		margin-bottom:2rem;
	}
}

/* Small Screen / Laptop View*/

@media (min-width: 760px){

	.display-handheld {
		display:none;
	}
	
	.display-tablet {
		display:block;
	}
		
	.display-largevideo  {
		display:block;
	}
	
	.display-smallvideo {
		display:none;
	}
	
	#homepage-header {
		background-image:url("https://www.leaderperfect.com/images/sldi-homepage-header.jpg");
	}

	.video1-div .video1-wrapper h3 {
		font-size:1.4rem;
	}

	#homepage-header {
		min-height:14.5em;
	}

	#homepage-header-content {
		width:60%;
		height:auto;
		float:left;
		margin-left:15%;
		background-color:transparent;
		border-top:none;
		border-bottom:none;
	}

	#homepage-header-content h1 {
		font-size:1.6em;
		padding-top:.4em;
		padding-bottom:.4em;
		font-weight:600;
	}

	#homepage-header-content h2 {
		font-size:1.4em;
		font-weight:600;
	}

	#sldi-homepage .client-scroll h3 {
		font-weight:700;
	}

	@keyframes scroll-logos {
		0% {transform: translateX(0); }
		100% {transform: translateX(-14075px); }
	}

	.blue-banner h4,
	.blue-banner h4 a.nine-reasons,
	.blue-banner h2 {
		font-size:1.4rem;
	}
	
	#overview-left {
		width:100%;
		display:flex;
		flex-direction:row;
	}
	
	#overview-right {
		width:100%;
		display:flex;
		flex-direction:column;
	}
	
	#overview-right h2 {
		font-size:1.6rem;
	}
	
	#mike-photo {
		display:block;
		width:20%;
		margin-left:5%;
	}
	
	#mike-photo img {
		max-width:270px;
	}
	
	#mike-photo p {
		font-size:1.2rem;
		text-align:center;
		font-weight:600;
		margin-top:.5rem;
	}

	#consultant-award {
		width:80%;
		margin-top:0;
		margin-left:auto;
		margin-right:5%;
	}

	#cta-consult {
		clear:both;
		display:flex;
		width:60vw;
		margin:3rem auto 0 auto;
	}
	
	#overview-right h2 {
		font-size:1.5rem;
	}

	#overview-right h3 {
		font-size:1.4rem;
		font-weight:600;
	}
	
	#overview-right h4 {
		font-size:1.3rem;
	}
	
	#team-link h4,
	#team-link a {
		font-size:1.5rem;
	}
	
	#delivery-options {
		width:60vw;
		display:flex;
		justify-content:center;
		margin:1rem auto;
	}
	
	#delivery-options img {
		border:2px black solid;
		border-radius:15px;
	}

	#services-banner h2 {
		font-size:1.6rem;
	}
	
	#coaching-services,
	#training-services,
	#consulting-services,
	#nonprofit-services {
		clear:both;
		display:flex;
		width:96vw;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:1rem;
		border-radius:15px;
	}

	#training-services,
	#nonprofit-services {
		flex-direction:row-reverse;
	}
	
	#coaching-photo,
	#consulting-photo {
		width:40%;
		margin-top:1rem;
		margin-left:1rem;
	}
	
	#training-photo,
	#nonprofit-photo {
		width:40%;
		margin-top:1rem;
		margin-right:1rem;
		border-radius:15px;
	}
	
	#coaching-photo img,
	#consulting-photo img,
	#training-photo img,
	#nonprofit-photo img {
		width:100%;
		border-radius:15px;
	}
	
	#coaching-content,
	#consulting-content	{
		width:55%;
		margin-top:1rem;
		margin-left:1rem;
		border-radius:15px;
	}

	#training-content,
	#nonprofit-content {
		width:55%;
		float:left;
		margin-top:1rem;
		border-radius:15px;
	}

	#consultant-award p {
		font-size:1.2rem;
	}
}

	/* Large Screens Wider than Ipad Landscape */

@media (min-width: 1020px){

	/* Override large device setting for proper header display */
	.display-smalldevice,
	.display-ipad,
	.display-largevideo {
		display:none;
	}

	/* Force intro video to play despite largedevice override */
	.display-largedevice,
	.display-smallvideo {
		display:block;
	}
	
	#homepage-header {
		background-size:100% 100%;
	}	

	.video1-div {
		display:flex;
		width:33vw;
		background-color:transparent;
		float:left;
		margin-left:1rem;
		margin-right:0;
	}
	
	.video1-div .video1-wrapper h3 {
		font-size:1.2rem;
		background-color: rgb(211, 211, 211);
	}
	
	#homepage-header-content {
		display:flex;
		flex-direction:column;
		width:44vw;
		margin-top:1rem;
		margin-right:12vw;
		margin-left:2vw;
	}

	#team-link {
		width:70%;
		margin-left:auto;
		margin-right:auto;
	}
	
	#mike-photo {
		margin-left:15%;
		margin-right:10%;
	}
	
	#mike-photo img {
		max-width:480px;
		margin-left:auto;
		margin-right:auto;
	}
	
	#consultant-award {
		margin-left:10%;
		margin-right:15%;
	}
	
	#overview-right h2 {
		font-size:1.7rem;
	}

	#cta-consult {
		width:40vw;
	}
	
	#delivery-options {
		width:45vw;
	}
	
	#services-banner h2 {
		font-size:1.6rem;
	}
	
	#coaching-services,
	#training-services,
	#consulting-services,
	#nonprofit-services {
		width:70vw;
	}
	
	#coaching-services,
	#consulting-services {
		float:left;
		margin-left:8rem;
	}
	
	#training-services,
	#nonprofit-services {
		float:right;
		margin-right:8rem;
	}
}
	
@media (min-width: 1300px) {

	#homepage-header {
		background-image: url("https://www.leaderperfect.com/images/sldi-homepage-header.jpg");
	}
	#video1-div {
		width:31vw;
	}
	
	#homepage-header-content {
		width:40vw;
		margin-right:10vw;
	}
	
	#homepage-header-content h1 {
		font-size:1.8rem;
		padding-top:1rem;
	}
	
	#general-overview {
		width:80%;
		margin-left:10%;
		margin-right:10%;
	}
	
	#overview-left,
	#overview-right {
		display:flex;
		flex-direction:column;
	}
	
	#overview-left {
		width:35%;
		height:auto;
		float:left;
	}
	
	#overview-right {
		width:55%;
		height:auto;
		float:right;
	}
	
	#mike-photo {
		width:90%;
		max-width:420px;
		margin-left:auto;
		margin-right:auto;
	}
	
	#mike-photo img {
		width:70%;
		margin-left:auto;
		margin-right:auto;
	}
	
	#consultant-award {
		width:96%;
		max-width:640px;
	}
	
	#services-banner h2 {
		font-size:1.8rem;
	}
	
	div.button a {
		font-size:1.3rem;
	}
}	

@media (min-width: 1460px) {

	.video1-div {
		width:31vw;
	}

	#homepage-header-content h1 {
		font-size:1.9rem;
	}
	
	#homepage-header-content h2 {
		font-size:1.4rem;
	}
	
	#mike-photo {
		margin-left:10%;
	}
}

@media (min-width: 1560px) {

	.video1-div {
		width:29vw;
		margin-left:8vw;
	}

	#homepage-header-content h2 {
		font-size:1.7rem;
	}
		
	#team-link h4,
	#team-link a {
		font-size:1.6rem;
	}
}

@media (min-width: 1680px) {
	
	.video1-div {
		width:27vw;
	}
	
	#general-overview {
		width:66%;
		margin-left:17%;
		margin-right:17%;
	}
	
	#general-overview h2 {
		font-size:1.9rem;
	}
	
	#general-overview h3 {
		font-size:1.6rem;
	}
	
	#general-overview h4 {
		font-size:1.4rem;
	}
	
	#cta-consult {
		width:30vw;
	}
	
	#delivery-options {
		width:50vw;
	}
	
	#coaching-services,
	#training-services,
	#consulting-services,
	#nonprofit-services {
		width:50vw;
	}
	
	#coaching-services,
	#consulting-services {
		margin-left:8rem;
	}
	
	#training-services,
	#nonprofit-services {
		margin-right:8rem;
	}
}

