/*
colors:
turquoise = #00B4B9
*/

body {
/*	max-width: 1440px;
	margin: 0 auto;*/
}

.top-banner {
	height: 60px;
	background-color: #2547ff;
	padding-top: 10px;
}

.top-banner p {
	color: #fff;
}

.top-banner a {
	background-color: #00B4B9;
	color: #fff;
	font-style: normal;
	text-decoration: none;
	padding: 4px 10px 5px 10px;

	font-family: 'Barlow', sans-serif;
	font-weight: 400;
	font-size: 14.25pt;
	letter-spacing: 0.225pt;
	border-radius: 10px;
	margin-left: 10px;
	white-space: nowrap;
}


.top-banner-margin {
	margin-top: 60px !important;
}

.main-top-spacing {
	margin-top: 260px;
}

a.page-link {
	display: block;
	position: relative;
	top: -100px;
	visibility: hidden;
}

#head {
	margin-top: 200px;
}

#work-examples, #work {
	max-width: 1440px;
	margin: 0 auto;
	margin-top: 100px;
}

.margin-200 {
	margin-top: 200px;
}

.margin-100 {
	margin-top: 100px;
}

.margin-50 {
	margin-top: 50px;
}

#footer {
	background-color: #000;
	padding: 100px 0px 30px 0px;
}

.contain {
	max-width: 1440px;
	margin: 0 auto;
	padding-left: 10px;


}

/* ================== NAV ================== */

.navbar {
	padding: 2rem 4rem;
	background-color: #fff;
}

.navbar-expand-lg .navbar-nav .nav-link {
	margin-left: 3rem;
}

.navbar-nav a {
	font-family: 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 9.75pt;
	color: #000;
	letter-spacing: 0.75pt;
	line-height: 40px;
	text-transform: uppercase;
	font-style: normal;
	text-decoration: none;

}

.navbar-nav a:hover {
	text-decoration: underline;
}

.active {
	opacity: 1;
}

.cta {
	padding: 4px 26px !important;
	border: 2px solid #00b4b9;
	border-color: #00b4b9;
		border-color: #000;
	border-radius: 5px;
	color: #00b4b9 !important;
		color: #000 !important;
	background: #ffffff;
	transition: color .2s, background .5s, border-color .5s;
	-webkit-transition: color .2s, background .5s, border-color .5s; /* For Safari 3.1 to 6.0 */
	align-self: baseline;
}

.cta:hover {
	text-decoration: none !important;
	background: #00b4b9;
	border-color: #00b4b9;
	color: #fff !important;
	animation: colorchange 3s infinite linear; /* animation-name followed by duration in seconds*/
		 /* you could also use milliseconds (ms) or something like 2.5s */
	-webkit-animation: colorchange 3s infinite linear; /* Chrome and Safari */
	}

	@keyframes colorchange
	{
		0%	 {background: #00b4b9; border-color: #00b4b9;}
		50%	{background: #4f57a6; border-color: #4F57A6;}
		100% {background: #00b4b9; border-color: #00b4b9;}
	}

	@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
	{
		0%	 {background: #00b4b9; border-color: #00b4b9;}
		50%	{background: #4f57a6; border-color: #4F57A6;}
		100% {background: #00b4b9; border-color: #00b4b9;}
}

/* ================== END NAV ================== */


/* ================== TYPOGRAPHY ================== */

h1 {
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	font-size: 75pt;
	color: #000000;
	letter-spacing: -1.5pt;
	text-transform: uppercase;
}

h3 {
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	font-size: 42pt;
	color: #000;
	letter-spacing: 0pt;
	text-transform: uppercase;
}

h4 {
	font-family: 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 16pt;
	color: #000;
	letter-spacing: .5pt;
}

h5 {
	font-family: 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 28pt;
	color: #000;
	letter-spacing: .5pt;
}

h2 {
	font-family: 'Barlow', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
}

p {
	font-family: 'Barlow', sans-serif;
	font-weight: 400;
	font-size: 14.25pt;
	color: #000000;
	letter-spacing: 0.225pt;
	line-height: 40px;
}

.smallcaps {
	font-family: 'Barlow', sans-serif;
	font-weight: 400;
	font-size: 9.75pt;
	color: #000;
	letter-spacing: 0.75pt;
	line-height: 40px;
	text-transform: uppercase;
}

.services-list, a {
	font-family: Merriweather-Regular;
	font-weight: 400;

	font-style: italic;
	font-size: 18pt;

	color: #00B4B9;
	letter-spacing: 0pt;
	line-height: 44px;

	transition: color .3s ease;
	-webkit-transition: color .3s ease;
}

.cs-list, .cs-list a {
	font-size: 15pt;
}

.cs-link {
	font-size: 15pt;
	text-decoration: none;
}

a {
	text-decoration: underline;
}

a:hover {
	color: #0A8E92;
}

.copyright {
	font-family: 'Barlow', sans-serif;
	font-weight: 400;
	font-size: 12pt;
	color: #fff;
	letter-spacing: 0.225pt;
	line-height: 40px;
	vertical-align: sub;
}

.type-white {
	color: #fff;
}

.uppercase {
	text-transform: uppercase;
}

.blockquote {
	font-family: 'Merriweather-Regular', serif;
	font-weight: 400;
	font-size: 32pt;
	color: #000000;
	letter-spacing: .6pt;
	text-transform: none;
	line-height: 47pt;
}


#blockquote .quote h1::before {
	content: open-quote;
	content: ;
	position: absolute;
	top: 0;
	left: -15px;
}

#blockquote .quote h1::after {
	content: close-quote;
}

.fine-print {
	font-family: 'Barlow', sans-serif;
	font-weight: 400;
	font-size: 10pt;
	color: #000000;
	letter-spacing: 1pt;
	text-transform: uppercase;
	margin-right: 4%;
	margin-left: 50px;
}

/* ================== END TYPOGRAPHY ================== */


/* ================== CAROUSEL ================== */
.carousel-control-next, .carousel-control-prev {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: auto;
	color: #fff;
	text-align: right;
	opacity: 1;
	transition: opacity .15s ease;
}

.carousel-control-next {
	right: -36px;
}

.carousel-control-prev {
	left: -36px;
}

.carousel-control-next span, .carousel-control-prev span {
	background: #000;
	padding: 10px 24px;
	border-radius: 40px;
}

.carousel-indicators li {
	box-sizing: content-box;
	-ms-flex: 0 1 auto;
	flex: 0 1 auto;
	text-indent: -999px;
	cursor: pointer;
	background-color: #fff;
	background-clip: inherit;
	border-top: none;
	border-bottom: none;
	opacity: .4;
	border-radius: 30px;

	transition: opacity .5s ease, width .5s ease, height .5s ease;
	-webkit-transition: opacity .5s ease, width .5s ease, height .5s ease;

}

.carousel-indicators {
	align-items: center;
}

.carousel-indicators .active {
	opacity: 1;
	background-color: #000;
}


/* ================== END CAROUSEL ================== */

hr {
	margin-top:100px;
}


.founder-name {
	margin-top: 30px;
}

.copy-block {
	margin-top: 100px;
}

.footer-link {
	text-transform: none;
	font-weight: 700;
	font-size: 30pt;
	letter-spacing: .5pt;
	white-space: pre;
}

.social-icon {
	margin-left: 40px;
}

.no-underline {
	text-decoration: none;
	border-bottom: 3px solid rgba(0, 180, 185, 0);

	transition: border-bottom .5s ease;
	-webkit-transition: border-bottom .5s ease;
}

.no-underline:hover {
	text-decoration: none;
	border-bottom: 3px solid rgba(0, 180, 185, 1);
}

.header {
	margin-top: 100px;
}

.subheader, .copy-body {
	margin-top: 50px;
}

.top-gutter {
	padding-top: 30px;
}

.legal {
	margin-top: 200px;
	font-weight: 700;
}

.velos-logotype {
	padding-right: 20px;	
	vertical-align: middle;
	width: 150px;
	margin-top: -10px;
	float: left !important;
}

.overlay-med {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	opacity: 0;
	transition: .5s ease;
	background-color: #003EFF;
	width: 95.8%;
	margin: 0 auto
}

.thumb-masterlcass {
	background-color: #000;
}

.overlay-med-rally {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	opacity: 0;
	transition: .5s ease;
	background-color: #00bfa9;
	width: 95.8%;
	margin: 0 auto
}

.thumb:hover .overlay-med, .thumb:hover .overlay-med-rally{
	opacity: 1;
}

.thumb-client {
	color: #fff;
	font-style: normal;
	font-size: 27pt;
	position: absolute;
	top: 20px;
	left: 20px;
}

.thumb-client h3 {
	color: #fff;
	letter-spacing: 1pt;
}

.thumb-client p {
	margin-bottom: 0px;
}

.arrow {
	position: absolute;
	bottom: 10px;
	right: 20px;
}

.link-arrow {
	margin-left: 10px;
}

.overlay-sm-seasonal {
	position: absolute;
	top: 30px;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
	transition: .3s ease;
	-webkit-transition: .3s ease;

	background-color: #E289AE;
	width: 91.8%;
	height: 93.1%;
	margin: 0 auto
}

.thumb:hover .overlay-sm-seasonal{
	opacity: 1;
}

.work-examples-link {
	text-align: center;
	margin: 0 auto;
	margin-top: 50%;
}

.work-examples-link a {
	color: #00B4B9;
	font-family: 'Barlow', sans-serif;
	font-style: normal;
	text-decoration: none;
	font-weight: 500;
	font-size: 16pt;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1pt;
	border: 2px solid #00B4B9;
	padding: 30px;
	border-radius: 60px;
	background-color: #fff;

	transition: background-color .2s ease;
	-webkit-transition: background-color .2s ease;
}

.work-examples-link a:hover {
	background-color: #00B4B9;
	color: #fff;
}

.cs-overlay {
	position: absolute;
/*	top: 30px;
*/	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
	transition: .3s ease;
	-webkit-transition: .3s ease;

	background-color: #008CBA;
	width: 100%;
	height: 100%;
	margin: 0 auto
}

.cs-overlay:hover {
	opacity: 1;
}

.overlay-thumb {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: .5s ease;
}

.overlay-thumb:hover {
	opacity: 1;
}

.principles-margin {
	margin-top: 100px;
}

.section-title h3{
	margin-bottom: 50px;
/*	color: #00B4B9;*/
	margin-left: 15px;
}

#articles a {
	text-decoration: none;
}

.article-item {
	padding: 20px;
}

.article-item img {
	margin-bottom: 10px;
	border: 1px solid rgba(0,0,0,.15);
}

.article-item h4, .article-item p {
	font-style: normal;
	line-height: 24pt;
}

/* ================ SERVICES ================ */

#services ul {
	padding: 0px;
}

#services li {
	list-style: none;
}

#services a {
	text-decoration: none;
	font-size: 26pt;
	line-height: 45pt;
	font-family: "Merriweather-Regular", sans-serif;
	font-style: italic;
	font-weight: 500;
	padding-bottom: 10px;
	margin-right: 40px;
/*	border-bottom: 4px solid rgba(0, 180, 185, 0);

	transition: border-bottom .2s ease;
	-webkit-transition: border-bottom .2s ease;*/
}

#services a:hover {
/*	border-bottom: 4px solid rgba(0, 180, 185, 1);
*/
}

.list-arrow {
	opacity: 0;
	width: 30px;
	height: auto;

	transition: opacity ease .2s;
	-webkit-transition: opacity ease .2s;
}

.list-hover:hover .list-arrow{
	opacity: 1;
}


#group-3 ul {
	margin-top: 20px;
}

#group-3 li{
	font-family: 'Barlow', sans-serif;
	font-size: 16pt;
	padding-bottom: 10px;
}

#group-4 ul {
	margin-top: 20px;
}

#group-4 li{
	font-family: 'Barlow', sans-serif;
	font-size: 16pt;
	padding-bottom: 10px;
}

#group-3 .li-circle {
	text-indent: 50px;
	list-style: circle;
	list-style-position: inside;
}

/* ================ END SERVICES ================ */


/* ================ CONTACT FORM ================ */

.form-control {
	background-color: #e9ecef;
	border: none;
	border-radius: 0px;

	font-family: 'Barlow', sans-serif;
	padding: 34px;
}

.form-control:focus {
	color: #495057;
	background-color:#f8f9fa;
	border-color: #80bdff;
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(0,123,255,0);
}

/*.submit {
	margin-top: 40px;
	font-family: Merriweather-Regular;
	font-weight: 400;
	font-style: italic;
	font-size: 28pt;
	color: #4F57A6;
	letter-spacing: 0pt;
	line-height: 52px;
}*/

.submit {
	color: #00B4B9;
	font-family: 'Barlow', sans-serif;
	font-style: normal;
	text-decoration: none;
	font-weight: 500;
	font-size: 16pt;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1pt;
	border: 2px solid #00B4B9;
	padding: 30px 60px;
	border-radius: 60px;
	background-color: #fff;
	margin-top: 30px;

	transition: background-color .2s ease;
	-webkit-transition: background-color .2s ease;
}

.submit:hover {
	background-color: #00B4B9;
	color: #fff;
}

.rolodex {
	margin-bottom: 100px;
}

.email-link {
	font-family: 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 14.25pt;
	color: #00B4B9;
	letter-spacing: 0.225pt;
	line-height: 40px;
	font-style: inherit;
	text-decoration: none;
}


/* ================ END CONTACT FORM ================ */


/* ================ REMOTE BANNER =================== */

#remote {
	margin-top: 50px;
}

.banner {
/*	background-color: #fcf1e3;
*/	border-radius: 20px;
	padding: 20px;
	margin-bottom: 100px;
}

.banner-img {
	margin-top: 20px;
}

.banner-copy {
	margin-top: 20px;
}

.banner-copy h5 {
	color: #2f64ff;
	font-size: 20pt;

}

.banner-copy p {
	margin-top: 20px;
	margin-bottom: 20px;
	line-height: 20pt;
	font-size: 14pt;
}

.banner-button {
	color: #2f64ff;
	font-size: 14pt;
	font-family: 'Barlow', sans-serif;
	font-weight: 600;
	font-style: normal;
	text-decoration: underline;
	letter-spacing: .7pt;
	border-radius: 10px;
	margin-right: 30px;
}

.banner-ul {
	font-family: 'Barlow', sans-serif;
	font-size: 14pt;
	line-height: 22pt;
	font-weight: 400;
}

.banner-li {
	padding-bottom: 10px;
}

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

	#remote {
		margin-top: 30px;
	}

	.banner {
		padding: 10px;
		margin: 10px;
	}

	.banner-copy {
		margin-top: 20px;
		padding: 0px 30px;
	}

	.banner-copy h5 {
		font-size: 20pt;
	}

	.banner-copy p {
		font-size: 12pt;
	}

	.banner-ul {
		font-size: 12pt;
		line-height: 16pt;
	}
}

/* ================ END REMOTE BANNER ===============*/


/* ================ CASE STUDIES ================ */

.work-thumb {
	margin-bottom: 10px;
	opacity: 1;

	transition: opacity .5s ease;
	-webkit-transition: opacity .5s ease;
}

#head h3 {
	font-size: 30pt;
	letter-spacing: 1pt;
}

.work-row {
	margin-bottom: 100px;
}

.work-tag {
	background-color: #f7f7f7;
	padding: 30px 30px 10px 30px;
	margin-top: 30px;
}
.thumb-reveal {
	padding: 0px 60px 20px 15px;
}

.extra-gutter-right {
	padding-right: 60px;
}

.extra-gutter-left {
	padding-left: 60px;
}

.extra-gutter-center {
	padding-left: 37.5px;
	padding-right: 37.5px;
}

.middle-overlay {
	margin-left: 23px;
}

.left-overlay {
	margin-left: 45px;
}

.cover {
	width: 100% !important;
}

.cs-grid-row {
	margin-top: 30px;
}


.next-up {
	margin-top: 50px;
	opacity: 1;

	transition: opacity .2s ease;
	-webkit-transition: opacity .2s ease;
}

.next-up:hover {
	opacity: .4;
}



/* ================ END CASE STUDIES ================ */

/*MOBILE ON/OFF*/
.mobile-off {
	display: inherit;
}

.mobile-on {
	display: none;
}

/* ================ RESPONSIVE ================ */

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

	h3 {
		font-size: 38pt;
	}

	.work-examples-link a {
		font-size: 11pt;
		color: #00B4B9;
		padding: 16px 10px;
	}

	.overlay-med-rally, .overlay-med, .overlay-sm-seasonal {
		display: none;
	}

	h5 {
		font-size: 17pt;
	}

	.covid-copy h1 {
		margin-top: 20px;
		font-size: 50pt;
	}

}

@media only screen and (max-width: 768px){
	
	.navbar {
		padding: 2rem 1rem;
	}

	h1 {
		font-size: 50pt;
	}

	h5 {
		font-size: 28pt;
	}

	#head {
		margin-top: 100px;
	}

	.hyphens {
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
	}

	.carousel-control-next, .carousel-control-prev {
		display: none;
	}

	.copyright {
		font-size: 10pt;
		float: left;
		line-height: 26px;
		margin-top: 10px;
	}

	.mobile-off {
		display: none;
	}

	.mobile-on {
		display: block;
		margin: 0 auto;
		margin-bottom: 10px;
	}

	.margin-200 {
		margin-top: 100px;
	}

	.margin-100 {
		margin-top: 50px;
	}

	.margin-50 {
		margin-top: 25px;
	}

	.margin-bottom-100 {
		margin-bottom: 100px;
	}

	.work-examples-link {
		margin-top: 40px;
	}

	.work-mobile {
		text-align: center;
	}

	.work-mobile p {
		margin-bottom: 0px;
	}

	.work-row {
		margin-bottom: 0px;
	}

	.cs-project {
		margin-bottom: 30px;
	}

	.extra-gutter-right {
		padding: 10px;
	}

	.extra-gutter-left {
		padding: 10px;
	}

	.extra-gutter-center {
		padding: 10px;
	}

	.thumb-reveal {
		display: none;
	}

	.cs-grid {
		margin-bottom: 20px;
	}

	.cs-grid-row {
		margin-top: 0px;
	}

	.top-gutter {
		padding-top: 0px;
	}

	.social-icon {
		margin-left: 20px;
	}

	.quote { 
		margin-left: 20px;
	}

	.principles-margin {
		margin-top: 40px;
		margin-bottom: 40px;
	}

	.list-arrow {
		display: none;
	}

	.copy-body {
		margin-top: 0px;
	}

	.mini-margin {
		margin-top: 20px;
	}

	.image-spacing {
		margin-bottom: 30px;
	}

	.margin-bottom-100 {
		margin-bottom: 50px;
	}

	.work-examples-link a {
		font-size: 12pt;
		color: #00B4B9;
		padding: 16px;
	}



	#remote {
		margin-top: 20px;
	}


	.banner {
		padding: 10px;
		margin: 0px;
	}

	.banner-copy {
		margin-top: 10px;
		padding: 10px 20px;
	}

	.banner-copy p {
		font-size: 12pt;
		line-height: 18pt;
	}



	.banner-ul {
		font-size: 12pt;
		line-height: 14pt;
	}

	.banner-button {
		float: left;
		line-height: 26pt;
	}

}

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

	.top-banner {
		height: 100px;
	}

	.top-banner-margin {
		margin-top: 100px !important;
	}



}