@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/* --------- lexen exa ---------- */
@font-face {
	font-family: LexendExa-Black;
	src: url(../FONTS/static/LexendExa-Black.ttf);
}

@font-face {
	font-family: LexendExa-Bold;
	src: url(../FONTS/static/LexendExa-Bold.ttf);
}

@font-face {
	font-family: LexendExa-ExtraBold;
	src: url(../FONTS/static/LexendExa-ExtraBold.ttf);
}

@font-face {
	font-family: LexendExa-Bold;
	src: url(../FONTS/static/LexendExa-Bold.ttf);
}

@font-face {
	font-family: LexendExa-Regular;
	src: url(../FONTS/LexendExa-Regular.ttf);
}

.LexendExa-Regular {
	font-family: LexendExa-Regular;
}

.LexendExa-Black {
	font-family: LexendExa-Black;
}

.LexendExa-ExtraBold {
	font-family: LexendExa-ExtraBold;
}

.LexendExa-Bold {
	font-family: LexendExa-Bold;
}


@font-face {
	font-family: Roboto-BlackItalic;
	src: url(../FONTS/Roboto-BlackItalic.ttf);
}

@font-face {
	font-family: Roboto-BoldItalic;
	src: url(../FONTS/Roboto-BoldItalic.ttf);
}

@font-face {
	font-family: Roboto-Thin;
	src: url(../FONTS/Roboto-Thin.ttf);
}

@font-face {
	font-family: Roboto-ThinItalic;
	src: url(../FONTS/Roboto-ThinItalic.ttf);
}

@font-face {
	font-family: Roboto-Regular;
	src: url(../FONTS/Roboto-Regular.ttf);
}

.Roboto-BlackItalic {
	font-family: Roboto-BlackItalic;
}

.Roboto-BoldItalic {
	font-family: Roboto-BoldItalic;
}

.Roboto-Thin {
	font-family: Roboto-Thin;
}

.Roboto-ThinItalic {
	font-family: Roboto-ThinItalic;
}

.Roboto-Regular {
	font-family: Roboto-Regular;
}

/* --------- Monterrat ---------- */
@font-face {
	font-family: Montserrat-SemiBoldItalic;
	src: url(../FONTS/Montserrat-SemiBoldItalic.ttf);
}

@font-face {
	font-family: Montserrat-BoldItalic;
	src: url(../FONTS/Montserrat-BoldItalic.ttf);
}

@font-face {
	font-family: Montserrat-Italic;
	src: url(../FONTS/Montserrat-Italic.ttf);
}

@font-face {
	font-family: Montserrat-Regular;
	src: url(../FONTS/Montserrat-Regular.ttf);
}

.Montserrat-SemiBoldItalic {
	font-family: Montserrat-SemiBoldItalic;
}

.Montserrat-BoldItalic {
	font-family: Montserrat-BoldItalic;
}

.Montserrat-Italic {
	font-family: Montserrat-Italic;
}

.Montserrat-Regular {
	font-family: Montserrat-Regular;
}

/* ------------  Inter ----------*/
@font-face {
	font-family: Inter;
	src: url(../FONTS/Inter.ttc);
}

@font-face {
	font-family: InterVariable;
	src: url(../FONTS/InterVariable.ttf);
}

@font-face {
	font-family: InterVariable-Italic;
	src: url(../FONTS/InterVariable-Italic.ttf);
}

.InterVariable {
	font-family: InterVariable;
}

.InterVariable-Italic {
	font-family: InterVariable;
}

.Inter {
	font-family: Inter;
}

/* ------------  Inika ----------*/
@font-face {
	font-family: Inika-Bold;
	src: url(../FONTS/Inika-Bold.ttf);
}

@font-face {
	font-family: Inika-Regular;
	src: url(../FONTS/Inika-Regular.ttf);
}

.Inika-Bold {
	font-family: Inika-Bold;
}

.Inika-Regular {
	font-family: Inika-Regular;
}

/* ------------  MARVEL ----------*/
@font-face {
	font-family: Marvel-Regular;
	src: url(../FONTS/Marvel-Regular.ttf);
}

@font-face {
	font-family: Marvel-Bold;
	src: url(../FONTS/Marvel-Bold.ttf);
}

@font-face {
	font-family: Marvel-BoldItalic;
	src: url(../FONTS/Marvel-BoldItalic.ttf);
}

@font-face {
	font-family: Marvel-Italic;
	src: url(../FONTS/Marvel-Italic.ttf);
}

.Marvel-Italic {
	font-family: Marvel-Italic;
}

.Marvel-BoldItalic {
	font-family: Marvel-BoldItalic;
}

.Marvel-Bold {
	font-family: Marvel-Bold;
}

.Marvel-Regular {
	font-family: Marvel-Regular;
}

/* ------------  LEMONMILK -----------*/
@font-face {
	font-family: LEMONMILK-Bold;
	src: url(../FONTS/LEMONMILK-Bold.otf);
}

@font-face {
	font-family: LEMONMILK-Regular;
	src: url(../FONTS/LEMONMILK-Regular.otf);
}

@font-face {
	font-family: LEMONMILK-Light;
	src: url(../FONTS/LEMONMILK-Light.otf);
}

.LEMONMILK-Bold {
	font-family: LEMONMILK-Bold;
}

.LEMONMILK-Regular {
	font-family: LEMONMILK-Regular;
}

.add-a-border {
	border: solid red 1px;
}

.red-border {
	border: solid red 1px;
}

a {
	text-decoration: none;
}

#nav-container {
	background-color: white;
}

#footer-container {
	background-color: white;
}

.user-icon2 {
	margin-left: 3px;
}

.Nav-Links-Font {
	font-family: LEMONMILK-Regular;
	font-family: Montserrat-SemiBoldItalic;
	font-family: Montserrat-Regular;
	font-family: Montserrat-Italic;
	font-family: Marvel-Bold;
}

.nav-item {
	display: flex;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: space-evenly;
	align-items: center;
}

.navbar-light .navbar-nav .nav-link:link {
	color: black;
}

.navbar-light .navbar-nav .nav-link:hover {
	color: grey;
}

.nav-item .nav-link {
	display: flex;
	align-items: center;
}

.dropdown-toggle {
	color: black;
}

nav .form-inline {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-ms-flex-align: center;
	align-items: center;
	justify-content: center;
}

#What-We-Offer-Show-On-XS {
	background-color: #ebebeb;
}

@media screen and (min-width: 1365px) {
 	body {
		/* border: solid orange 4px; */
	} 

	#What-We-Offer-Show-On-XS {
		display: none;
	}

	#image_next_to_UX-text {
		background-image: url("../images/bg-orange.png");
		background-position: center center;
		background-repeat: no-repeat;
	}

	.navbar-light .navbar-nav .nav-link {
		font-size: 16pt;
	}

	.nav-item .nav-link {
		font-size: 16pt;
	}

	.navbar-light .navbar-nav button {
		font-size: 16pt;
	}

	.navbar-light .navbar-nav .nav-link {
		padding-right: 30px;
	}

	.user-icon2 {
		width: 40px;
	}

	.navbar-light .navbar-nav .btn {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-evenly;
		align-items: center;
	}

	#UX-Scouts-Logo {
		width: 360px;
	}

	.dropdown-menu .dropdown-item {
		font-size: 17pt;
	}

	#homepage main {
		background-image: url("../images/Biker02-1150.png");
		background-repeat: no-repeat;
		background-position: left;
		min-height: 1800px;
		background-color: #EFE4B6;
	}

	.UX-Scouts-Logo {
		color: white;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		font-size: 2em;
		padding-left: 10px;
		padding-right: 20px;
		text-shadow:
			2px 2px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
	}

	.UX-Scouts-Title {
		color: white;
		font-size: 5em;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		color: white;
		text-shadow:
			4px 4px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
	}

	.UX-Scouts-Subtitle {
		color: white;
		font-size: 3em;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		text-shadow:
			4px 4px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
		text-align: center;
	}

	.h301-lexandExa {
		font-size: 140%;
		text-align: right;
		margin-top: 30px;
		font-family: LexendExa-Regular, sans-serif;
		font-weight: bold;
		color: #4D2D07;
		letter-spacing: 3px;
	}

	.deal-text {
		padding-bottom: 2em;
	}

	#homepage-buttons-small {
		display: none;
	}
}

@media screen and (max-width: 1365px) {
	body {
		/* border: solid blue 4px; */
	} 

	#What-We-Offer-Show-On-XS {
		display: none;
	}

	#image_next_to_UX-text {
		background-image: url("../images/bg-blue.png");
		background-position: center center;
		background-repeat: no-repeat;
	}

	.navbar-light .navbar-nav .nav-link {
		font-size: 16pt;
		padding-right: 20px;
	}

	.nav-item .nav-link {
		font-size: 16pt;
	}

	.navbar-light .navbar-nav button {
		font-size: 16pt;
	}

	.user-icon2 {
		width: 40px;
	}

	.dropdown-menu .dropdown-item {
		font-size: 16pt;
	}

	#homepage main {
		background-image: url("../images/Biker1300px.png");
		background-repeat: no-repeat;
		background-position: left;
		min-height: 800px;
		background-color: #EFE4B6;
	}

	.UX-Scouts-Logo {
		color: white;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		font-size: 2em;
		padding-left: 20px;
		padding-right: 30px;
		text-shadow:
			2px 2px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
	}

	.UX-Scouts-Title {
		color: white;
		font-size: 4.5em;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		color: white;
		text-shadow:
			4px 4px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
	}

	.UX-Scouts-Subtitle {
		color: white;
		font-size: 3em;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		text-shadow:
			4px 4px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
		text-align: center;
	}

	.UX-Scouts-SubSubtitle {
		color: white;
		font-size: 2em;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		text-shadow:
			4px 4px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
	}

	.h301-lexandExa {
		font-size: 140%;
		text-align: right;
		margin-top: 30px;
		font-family: LexendExa-Regular, sans-serif;
		font-weight: bold;
		color: #4D2D07;
		letter-spacing: 3px;
	}

	.deal-text {
		padding-bottom: 2em;
	}

	#homepage-buttons-small {
		display: none;
	}
}

@media screen and (max-width: 1280px) {
 	body {
		/* border: solid red 4px; */
	} 

	#What-We-Offer-Show-On-XS {
		display: none;
	}

	#image_next_to_UX-text {
		background-image: url("../images/bg-red.png");
		background-position: center center;
		background-repeat: no-repeat;
	}

	.navbar-light .navbar-nav .nav-link {
		font-size: 15pt;
	}

	.nav-item .nav-link {
		font-size: 15pt;
	}

	.navbar-light .navbar-nav button {
		font-size: 15pt;
	}

	.user-icon2 {
		width: 40px;
	}

	.dropdown-menu .dropdown-item {
		font-size: 15pt;
	}

	#homepage main {
		background-image: url("../images/Biker1300px.png");
		background-position: left;
		min-height: 800px;
	}


	.UX-Scouts-Logo {
		color: white;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		font-size: 2em;
		padding-left: 20px;
		padding-right: 30px;
		text-shadow:
			2px 2px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
	}


	.UX-Scouts-Title {
		color: white;
		font-size: 4.5em;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		color: white;
		text-shadow:
			4px 4px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
	}

	.UX-Scouts-Subtitle {
		color: white;
		font-size: 3em;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		text-shadow:
			4px 4px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
		text-align: center;
	}
}

@media (max-width: 1200px) {
 	body {
		/* border: solid purple 4px; */
	} 

	#What-We-Offer-Show-On-XS {
		display: none;
	}

	#image_next_to_UX-text {
		background-image: url("../images/bg-purple.png");
		background-position: center center;
		background-repeat: no-repeat;
	}

	.navbar-light .navbar-nav .nav-link {
		font-size: 15pt;
	}

	.nav-item .nav-link {
		font-size: 15pt;
	}

	.navbar .navbar-nav .nav-item .nav-link {
		padding-right: 20px;
		padding-left: 20px;
	}

	.navbar-light .navbar-nav button {
		font-size: 15pt;
	}

	.user-icon2 {
		width: 40px;
	}

	.dropdown-menu .dropdown-item {
		font-size: 15pt;
	}

	#homepage main {
		background-image: url("../images/Biker1300px.png");
		background-position: left;
		min-height: 800px;
	}

	.UX-Scouts-Logo {
		color: white;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		font-size: 2em;
		padding-left: 30px;
		padding-right: 20px;
		text-shadow:
			2px 2px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
	}

	.UX-Scouts-Title {
		color: white;
		font-size: 4.5em;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		color: white;
		text-shadow:
			4px 4px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
	}

	.UX-Scouts-Subtitle {
		color: white;
		font-size: 4em;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		text-shadow:
			4px 4px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
		text-align: center;
	}
}

@media screen and (max-width: 1100px) {
 	body {
		/* border: solid green 4px; */
	} 


	#What-We-Offer-Show-On-XS {
		display: none;
	}

	#image_next_to_UX-text {
		background-image: url("../images/bg-green.png");
		background-position: center center;
		background-repeat: no-repeat;
	}

	.navbar-light .navbar-nav .nav-link {
		font-size: 14pt;
	}

	.nav-item .nav-link {
		font-size: 14pt;
	}

	.navbar .navbar-nav .nav-item .nav-link {
		padding-right: 10px;
		padding-left: 5px;
	}

	.navbar-light .navbar-nav button {
		font-size: 14pt;
	}

	.user-icon2 {
		width: 40px;
	}

	.dropdown-menu .dropdown-item {
		font-size: 14pt;
	}

	#homepage main {
		background-image: url("../images/Biker1100-B.png");
		min-height: 600px;
	}


	.UX-Scouts-Logo {
		color: white;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		font-size: 1.5em;
		padding-left: 20px;
		padding-right: 20px;
		text-shadow:
			2px 2px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
	}

	.UX-Scouts-Title {
		color: white;
		font-size: 4em;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		color: white;
		line-height: 120%;
		text-shadow:
			4px 4px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
	}

	.UX-Scouts-Subtitle {
		color: white;
		font-size: 2.5em;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		text-shadow:
			4px 4px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
		text-align: center;
	}
}

@media screen and (max-width: 1060px) {
	body {
		/* border: solid yellow 4px; */
	}

	#What-We-Offer-Show-On-XS {
		display: none;
	}

	#image_next_to_UX-text {
		background-image: url("../images/bg-yellow.png");
		background-position: center center;
		background-repeat: no-repeat;
	}

	#nav_container {
		width: 100%;
	}

	.navbar-light .navbar-nav .nav-link {
		font-size: 13pt;
	}

	.nav-item .nav-link {
		font-size: 13pt;
	}

	.navbar .navbar-nav .nav-item .nav-link {
		padding-right: 10px;
		padding-left: 10px;
	}

	.navbar-light .navbar-nav button {
		font-size: 13pt;
	}

	.user-icon2 {
		width: 40px;
	}

	.dropdown-menu .dropdown-item {
		font-size: 13pt;
	}

	#homepage main {
		background-image: url("../images/Biker1100-B.png");
		min-height: 600px;
	}

	.UX-Scouts-Title {
		color: white;
		font-size: 4em;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		color: white;
		text-shadow:
			4px 4px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
	}

	.UX-Scouts-Subtitle {
		color: white;
		font-size: 3em;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		text-shadow:
			4px 4px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
		text-align: center;
	}
}

.hide-above-991px {
	display: none;
}

@media screen and (max-width: 991px) {
	.hide-above-991px {
		display: block;
		float: right;
		width: 200px;
	}

	.width-bellow-991 {
		width: 250px;
	}
}

@media screen and (max-width: 920px) {
 	body {
		/* border: solid teal 4px; */
	} 
    #UX-h3 {
		font-size: 120%;
	}
	#What-We-Offer-Show-On-XS {
		display: none;
	}

	#image_next_to_UX-text {
		background-image: url("../images/bg-teal.png");
		background-position: center center;
		background-repeat: no-repeat;
	}

	#mobile-in-hand {
		border: solid red 2px;
	}

	.navbar-light .navbar-nav .nav-link {
		font-size: 13pt;
	}

	.nav-item .nav-link {
		font-size: 13pt;
	}

	.navbar-light .navbar-nav button {
		font-size: 13pt;
	}

	.navbar .navbar-nav .nav-item .nav-link {
		padding-right: 5px;
		padding-left: 5px;
	}

	.user-icon2 {
		width: 35px;
	}

	.dropdown-menu .dropdown-item {
		font-size: 13pt;
	}

	#homepage main {
		background-image: url("../images/Biker0800-B.png");
		min-height: 600px;
	}

	.steps-to-design-h2 {
		font-size: 130%;
	}

	.UX-Scouts-Logo {
		color: white;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		font-size: 1.5em;
		padding-left: 10px;
		padding-right: 10px;
		text-shadow:
			2px 2px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
	}

	.UX-Scouts-Title {
		color: white;
		font-size: 3.5em;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		color: white;
		text-shadow:
			3px 3px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
	}

	.UX-Scouts-Subtitle {
		color: white;
		font-size: 2.5em;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		text-shadow:
			4px 4px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
		text-align: center;
	}
}

@media screen and (max-width: 820px) {
	body {
		/* border: solid pink 4px; */
	} 

	#What-We-Offer-Show-On-XS {
		display: none;
	}

	#image_next_to_UX-text {
		background-image: url("../images/bg-pink.png");
		background-position: center center;
		background-repeat: no-repeat;
	}

	.navbar-light .navbar-nav .nav-link {
		font-size: 12pt;
	}

	.nav-item .nav-link {
		font-size: 12pt;
	}

	.navbar .navbar-nav .nav-item .nav-link {
		padding-right: 4px;
		padding-left: 4px;
	}

	.navbar-light .navbar-nav button {
		font-size: 13pt;
	}

	.user-icon2 {
		width: 35px;
	}

	.dropdown-menu .dropdown-item {
		font-size: 14pt;
	}

	#homepage main {
		background-image: url("../images/Biker0800-B.png");
		min-height: 600px;
	}

	#UX-Scouts-Logo {
		width: 200px;
	}

	.box {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.box>* {
		padding: 10px;
		text-align: center;
		border-bottom: solid #ccc 1px;
	}

	.UX-Scouts-Logo {
		color: white;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		font-size: 1.5em;
		padding-left: 10px;
		text-shadow:
			2px 2px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
	}

	.UX-Scouts-Title {
		color: white;
		font-size: 3em;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		color: white;
		line-height: 120%;
		text-shadow:
			4px 4px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
		margin-left: 20px;
	}

	.UX-Scouts-Subtitle {
		color: white;
		font-size: 2em;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		text-shadow:
			3px 3px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
		/* margin-top: -50px; */
		text-align: center;
	}

	h301-lexandExa {
		font-size: 140%;
		text-align: left;
		margin-top: 30px;
		font-family: LexendExa-Regular, sans-serif;
		font-weight: bold;
		color: #4D2D07;
		letter-spacing: 3px;
	}

	.TURNAROUND-2 {
		width: 200px;
		float: right;
		font-size: 90%;
	}
}

/* 768px offical Medium breakpoint */
@media screen and (max-width: 768px) {
	#What-We-Offer-Show-On-XS {
		display: block;
		height: 100px;
		width: 100%;
		background-image: url("../images/Flourish-107.png");
		background-repeat: no-repeat;
		background-position: center center;
		background-color: white;
	}

	.grey-rounded-box-2 {
		/*	margin: 0px auto; */
		width: 100%;
	}

	.grey-rounded-box-2 p {
		margin-top: 10px;
	}

	.big-space-on-768 {
		height: 30px;
		width: 100%;
		padding-bottom: 100px;
		margin-top: 90px;
		border-top: solid Burlywood 1px;
	}

	.deal-text {
		padding-left: 3em;
		padding-right: 3em;
		padding-top: 0em;
		padding-bottom: 2em;
		line-height: 160%;
	}

	#three-across-mobile {
		width: 280px;
		margin-top: 30px;
	}
}

@media screen and (max-width: 730px) {
 	body {
		/* border: solid black 4px; */
	}

	#What-We-Offer-Show-On-XS {
		display: block;
		height: 200px;
		width: 100%;
		background-image: url("../images/Mobile-Apps-110.png");
		background-repeat: no-repeat;
		background-position: center center;
		background-color: white;
	}

	.floatleft {
		display: none;
	}

	.grey-rounded-box {
		max-width: 100%;
	}

	#image_next_to_UX-text {
		background-image: url("../images/bg-black.png");
		background-position: center center;
		background-repeat: no-repeat;
	}

	#homepage main {
		background-image: url("../images/1025.png");
		background-position: center top;
		background-size: 100% auto;
		min-height: 600px;
		padding: 0px;
	}

	.steps-to-design-h2 {
		text-align: center;
	}

	#footer-links li {
		display: block;
		margin: 0px auto;
		text-align: center;
	}

	/* 	.UX-Scouts-Logo {
		padding-left: 20px;
	} */

	.UX-Scouts-Title {
		color: white;
		font-size: 4em;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		color: white;
		line-height: 120%;
		text-shadow:
			4px 4px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
	}

	.UX-Scouts-Subtitle {
		color: white;
		font-size: 3em;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		text-shadow:
			4px 4px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
		/* margin-top: -50px; */
		text-align: center;
	}

	#modules03 {
		/* background-color: #B68F6E; */
		background-color: transparent;
		margin-top: 320px;
	}

	#three-across-mobile {
		width: 580px;
		display: block;
		margin: 0px auto;
	}

	#homepage-buttons-small {
		display: block;
		padding-top: 300px;
		padding-bottom: 160px;
	}

	.h301-lexandExa {
		font-size: 120%;
		margin-top: 30px;
		letter-spacing: 2px;
		text-align: left;
	}
}

@media screen and (max-width: 652px) {
	#What-We-Offer-Show-On-XS {
		display: block;
		height: 200px;
		width: 100%;
		background-image: url("../images/Mobile-Apps-108.png");
		background-repeat: no-repeat;
		background-position: center center;
		background-color: white;
	}

	.floatleft {
		display: none;
	}

	.grey-rounded-box {
		max-width: 100%;
	}
}

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

	#What-We-Offer-Show-On-XS {
		display: none;
	}

	.portfolio-project-thumbs .card-body .card-title {
		font-size: 30pt;
	}
}

@media screen and (max-width: 558px) {
 	body {
		/* border: solid brown 4px; */
	} 

	#What-We-Offer-Show-On-XS {
		display: none;
	}

	.floatleft {
		display: none;
	}

	.grey-rounded-box {
		max-width: 100%;
	}


	.UX-Scouts-Logo {
		color: white;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		font-size: 1.5em;
		padding-left: 10px;
		text-shadow:
			2px 2px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
	}


	.UX-Scouts-Title {
		color: white;
		font-size: 4em;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		color: white;
		text-shadow:
			4px 4px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
	}

	.UX-Scouts-Subtitle {
		color: white;
		font-size: 3em;
		font-family: LexendExa-Bold, arial, sans-serif;
		font-weight: bold;
		text-shadow:
			4px 4px 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
		text-align: center;
	}
}

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

	.UX-Scouts-Title {
		 font-size: 10vw;
		text-shadow:
			.8vw .8vw 0 #000,
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;		 
	}

}

@media screen and (max-width: 360px) {
	
    .UX-Scouts-Logo {
        font-size: 1.3em;
        padding-left: 10px;
        text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    }
	#homepage .btn  {
		padding-right: 10px;
		padding-left: 10px;
	}

	.navbar-nav .btn {
		padding-right: 0px;
		padding-left: 0px;
	}
	
}


.make-inline {
	display: inline;
}

#homepage main {
	background-color: #EFE4B6;
	background-repeat: no-repeat;
	background-position: center top;
}

#content-wrapper {
	min-height: 700px;
	padding: 10px;
}

#footer-div {
	border-top: #ccc 2px solid;
}

#super_content_wrapper {
	background-color: red;
	min-height: 800px;
}

nav {
	list-style: none;
}

html body my-header nav {
	background-color: white;
}

#homepage {
	background-color;
	#EFE4B6;
}

#footer-nav-links .border-bottom-brown {
	border-bottom: 1px solid #D5A361;
}

#footer-nav-links a {
	color: #4D2D07;
}

#footer-links {
	font-size: 100%;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

#footer-links>li {
	padding: 5px 10px;
}

#footer-links>li>a {
	text-decoration: none;
	color: #333;
}

table {
	width: 100%;
}

.define {
	border: solid red 1px;
}

#demo {
	text-align: center;
	background-color: #e6e6e6;
}

main .min-700 {
	border: solid 4px teal;
	min-height: 700px;
}

.center {
	display: block;
	margin: 0px auto;
}

.two-thirds-container {
	border: solid purple 1px;
	width: 600px;
	margin: 70px 30px 0px 20px;
}

.big-title {
	text-align: center;
}

.super-big-title {
	font-size: 40pt;
	font-family: Inter;
	font-family: LEMONMILK-Regular;
	font-family: Marvel-Bold;
	font-family: Inika-Bold;
	line-height: 36pt;
	letter-spacing: 3px;
}

.text_border {
	-webkit-text-stroke: 2px black;
	font-family: sans;
	color: yellow;
}

.nav_logo span {
	display: block;
	padding: 1% 0;
	color: #fff;
	text-shadow: 1px 1px 1px #000;
}

.portfolio-project-thumbs .card-title {
	margin-bottom: .75rem;
	text-align: center;
}

.portfolio-project-thumbs .card-body {
	text-align: center;
}

.desktop-portfolio-pic {
	border: solid 7px black;
	box-shadow: 10px 10px 5px lightblue;
	border-radius: 5px;
	width: 680px;
}

.desktop-portfolio-pic2 {
	border: solid 4px black;
	box-shadow: 5px 5px 3px lightblue;
	border-radius: 5px;
}

.text-algin-right {
	text-align: right;
}

.text-algin-center {
	text-align: center;
	padding-top: 5px;
}

.desktop-prototype-thumbs {
	border: solid 2px #ccc;
	border-radius: 5px;
}

.padding-top-10 {
	padding-top: 10px;
}

.padding-top-5 {
	padding-top: 5px;
}

.padding-top-100 {
	padding-top: 100px;
	padding-bottom: 30px;
}

.box-align-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.floatleft {
	float: left;
}

.blacklink {
	color: black;
}

.red-border {
	border: 2px solid red;
}

.blue-border {
	border: 2px solid blue;
}

.green-border {
	border: 2px solid green;
}

.yellow-border {
	border: 2px solid yellow;
}

.pink-border {
	border: 2px solid pink;
}

.teal-border {
	border: 2px solid teal;
}

.orange-border {
	border: 2px solid orange;
}

.subtitle_01 {
	width: 300px;
	height: 100px;
	padding-left: 30px;
	padding-left: 30px;
	padding-top: 10px;
	line-height: 20pt;
	display: block;
	margin: 0px auto;
}

.subtitle_02 {
	width: 550px;
	height: 100px;
	padding-left: 30px;
	padding-left: 30px;
	padding-top: 10px;
	line-height: 20pt;
	display: block;
	margin: 0px auto;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.width-50-percent {
	width: 50%;
}

#special-deals-container {
	max-width: 850px;
}

#deals-progression-image {
	width: 750px;
	border: solid green 2px;
}

#progress-module-ideation {
	padding: 10px 20px 10px 54px;
	background-image: url('../images/ICON-IDEATION-102.png');
	background-repeat: no-repeat;
	background-position: left 5px;
}

#progress-module-goals {
	padding: 10px 20px 10px 54px;
	background-image: url('../images/ICON-GOALS-102.png');
	background-repeat: no-repeat;
	background-position: left 5px;
}

#progress-module-design-sprint {
	padding: 10px 20px 10px 54px;
	background-image: url('../images/ICON-DESIGN-SPRINT-102.png');
	background-repeat: no-repeat;
	background-position: left 5px;
}

#progress-module-sketch {
	padding: 10px 20px 10px 54px;
	background-image: url('../images/ICON-SKETCH-102.png');
	background-repeat: no-repeat;
	background-position: left 5px;
}

#progress-module-wireframe {
	padding: 10px 20px 10px 54px;
	background-image: url('../images/ICON-WIREFRAME-102.png');
	background-repeat: no-repeat;
	background-position: left 5px;
}

#progress-module-user-testing {
	padding: 10px 20px 10px 54px;
	background-image: url('../images/ICON-USER-TESTING-102.png');
	background-repeat: no-repeat;
	background-position: left 5px;
}

#progress-module-prototype {
	padding: 10px 20px 10px 54px;
	background-image: url('../images/ICON-PROTOTYPE-102.png');
	background-repeat: no-repeat;
	background-position: left 5px;
}

#progress-module-postlaunch {
	padding: 10px 20px 10px 54px;
	background-image: url('../images/ICON-POSTLAUNCH-102.png');
	background-repeat: no-repeat;
	background-position: left 5px;
}

.employees-uxscouts-aboutus {
	width: 150px;
	display: block;
	margin: 0px auto;
	padding-bottom: 5px;
}

.Inter-30 {
	font-family: Inter;
	font-size: 30pt;
	font-weight: bold;
}

#about-container .card {
	border: white 0px solid;
}

#contact-background {
	width: 500px;
	height: 600px;
	float: right;
	background-image: url('../images/1011.png');
	padding-top: 20px;
}

#contact-background p {
	margin: 0px;
	color: white;
	text-shadow: black 0 2px;
}

.centered-box {
	width: 700px;
	margin: 0px auto;
	border: solid green 2px;
	padding-top: 100px;
	height: 800px;
}

.my-account-table td {
	border: solid #ccc 1px;
}

.my-account-td {
	width: 200px;
}

.projects-table-01 {
	border-collapse: collapse;
	margin-top: 50px;
}

.projects-table-01 td {
	border-collapse: collapse;
	padding: 10px;
	padding-left: 20px;
	border: solid #ccc 1px;
}

.projects-table-01 .title-td {
	background-color: #F5F4F4;
	min-width: 200px;
}

.loader-wheel {
	background-image: url('../images/833.gif');
	background-position: center center;
}

.steps-to-design {
	padding-top: 100px;
}

.box {
	display: flex;
	justify-content: center;
}

.box>* {
	padding: 10px;
}

.grey-back {
	background-color: #E9E9E9;
}

.grey-rounded-box {
	width: 100%;
	/* 	background-color: #E9E9E9;
padding: 10px 50px;
margin-top: 50px;
margin-bottom: 40px;
border-radius: 20px; */
}

/* .grey-rounded-box-2 {
background-color: #E9E9E9;
margin-top: 0px;
margin-bottom: 20px;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: flex-center;
height: 60px;
overflow: visible;
} */
.flex-center {
	align-self: center;
}

.flex-justify-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.offering-title {
	font-size: 16pt;
}

.whats-included-header {
	padding-top: 40px;
	padding-bottom: 30px;
	padding-left: 40px;
}

.btn-skyblue {
	background-color: #00ABF3;
	color: white;
	/* 	padding-left: 30px;
padding-right: 30px; */
}

.sky-blue-button {
	background-color: #00A8F3;
	color: white;
	margin-top: 20px;
	border-radius: 50px;
	display: flex;
	justify-content: center;
	align-items: flex-center;
	padding: 10px;
	width: 70%;
	margin: 0px auto;
	margin-top: 50px;
	font-size: 130%;
}

.sky-blue-background {
	background-color: #00A8F3;
	color: white;
	border-radius: 50px;
	display: flex;
	justify-content: center;
	align-items: flex-center;
	padding: 10px;
	width: 90%;
	margin: 0px auto;
	font-size: 130%;
}

/*
.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
*/
.Thumb2 {
	width: 100px;
}

/* .Thumb2_text {
width: 240px;
float: left;
padding-right: 10px;
padding-left: 5px;
line-height: 120%;
}
*/
.uxscouts-page-container {
	max-width: 950px;
}

#image_next_to_UX-text {
	background-color: #ebebeb;
	width: 100%;
	height: 100%;
}

.burnt-brown {
	color: #4D2D07;
}

.btn-burnt-brown {
	color: #fff;
	background-color: #4D2D07;
	border-color: #4D2D07;
	border-radius: 30px;
	padding-right: 30px;
	padding-left: 30px;
}

.TURNAROUND {
	color: #4D2D07;
	font-family: Marvel-BoldItalic;
	width: 280px;
}

.TURNAROUND p {
	padding-left: 10%;
	padding-right: 10%;
	line-height: 120%;
	font-size: 130%;
}

.burnt-brown-list {
	color: #4D2D07;
	font-size: 11pt;
}

.offerings-list li {
	list-style-type: circle;
}

.80-percent {
	font-size: 80%;
}

.clear-both {
	clear: both;
}

.clear-left {
	clear: left;
}

.s301-Roboto-ThinItalic {
	font-size: 90%;
	/* text-align: right; */
	font-family: Roboto-ThinItalic;
	font-weight: bold;
	color: #4D2D07;
	display: block;
	/*  letter-spacing: 3px; */
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* #main-home {
background-color: #EFE4B6;
}
*/
main {
	background-color: #EFE4B6;
	padding-top: 1em;
}

#mustard {
	background-color: #EFE4B6;
	padding-bottom: 5em;
}

main {
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 40px;
}

.UX-Scout-Form-01 {
	background-color: #EFE4B6;
	border: solid, #4D2D07, 2px;
	border-radius: 6px;
	width: 210px;
	height: 28px;
	display: block;
	float: right;
	margin-bottom: 10px;
	font-family: LexendExa-Regular, sans-serif;
}

.float-right {
	float: right;
}

.Scouts-Button {
	background-color: #4D2D07;
	color: white;
	padding-left: 2em;
	padding-right: 2em;
	letter-spacing: 1px;
	border-radius: 5px;
}


.Scouts-Button2 {
	background-color: white;
	color: black;
	padding-left: 2em;
	padding-right: 2em;
	letter-spacing: 1px;
	border-radius: 5px;
}

.Scouts-Button2:hover {
	color: #666;
}


.Scouts-Button:hover {
	color: NavajoWhite;
}

.Scouts-Button-Orange {
	background-color: #D5A361;
	color: #4D2D07;
	padding-left: 2em;
	padding-right: 2em;
	letter-spacing: 1px;
	border-radius: 5px;
}

.Scouts-Button-Orange:hover {
	color: NavajoWhite;
}

.Deal-Assets-Table {
	color: #4D2D07;
}

.Deal-Assets-Table td {
	border: solid #4D2D07 1px;
	width: 33%;
}

.Flex-Align-Center {
	display: flex;
	align-items: center;
}

.design-note {
	color: MediumOrchid;
	text-transform: uppercase;
	font-family: monospace;
	font-size: 80%;
}

.ALL-CAPS {
	text-transform: uppercase;
}

.brown-text {
	color: #4D2D07;
}

.deal-number {
	font-family: LexendExa-ExtraBold;
	font-size: 400%;
}

.crazy-padding {
	padding: 70px;
}

.super-round-button {
	width: 14em;
	padding: 6px 0px;
	display: block;
	margin: 0px auto;
	border-radius: 20px;
	box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.brown-button {
	background-color: #4D2D07;
	color: #FDDA0D;
}

.yellow-button {
	background-color: #FDDA0D;
	color: #4D2D07;
}

#button-portfolio-container a {
	text-decoration: none;
}

/*
#What-We-Offer #What-We-Offer-Nav-Li {
border-bottom: 2px solid black;
}
#Portfolio #Portfolio-Nav-Li {
border-bottom: 2px solid black;
}
#Special_Deals #Special-Deals-Nav-Li {
border-bottom: 2px solid black;
}
.nav-item {
border-bottom: white 2px solid;
}
*/
.middle {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.UX-Scouts-Anchor {
	color: #4D2D07;
	text-decoration: underline;
	font-size: 85%;
	text-underline-offset: 3px;
}

.UX-Scouts-Anchor:hover {
	color: black;
}

/* 
main a:link {
color: black;
text-decoration: none;
font-weight: bold;
}
main a:visited {
color: #4D2D07;
text-decoration: none;
font-weight: bold;
}
main a:hover {
color: black;
text-decoration: none;
font-weight: bold;
}
main a:active {
color: black;
text-decoration: none;
font-weight: bold;
} */
.cream-bg {
	background-color: #EFE4B6;
}

.shadowered-container {
	border: solid black 1px;
	width: 87%;
	border-radius: 6px;
	background-color: white;
	/* box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
	/* box-shadow: 0 6px 10px 0 rgba(0, 0, 0), 0 6px 20px 0 rgba(0, 0, 0); */
	box-shadow: 4px 4px 0 0;
	padding-bottom: 40px;
}

.font-150-percent {
	font-size: 150%;
	line-height: 130%;
}

.parent-vert-align2 {
	background: white;
	height: 100%;
	width: 100%;
	position: relative;
}

.child-vert-align2 {
	background: white;
	position: absolute;
	max-width: 520px;
	min-width: 400px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* horizontal align middle */
.v-align-container {
	/* height: 100px; */
	height: 100%;
	display: flex;
	align-items: center;
	/* Vertical */
	/* justify-content: center; */
	/* Horizontal */
	/* border:2px solid black; */
}

.v-align-item {
	/* width: 100px; */
	width: 100%;
	/* height: 100px; */
	/* border:1px solid; */
}

.PROTOTYPE-TITLE {
	margin-top: 40px;
}

#FIND-A-REP-PAGE h6 {
	margin: 0px;
}

.prototype-box {
	border: solid #ccc 1px;
	padding: 20px;
	margin-top: -1px;
}

.prototype-title-box {
	height: 120px;
}

/* trying so many solutions to this
simple problem. Vertical align text to middle */
.veritcal-align-middle {
	line-height: 1.5;
	display: inline-block;
	vertical-align: middle;
}

.veritcal-align-middle2 {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.veritcal-align-middle3 {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 200px;
}

.height-100-percent {
	height: 100%;
}

.shadow-hover {
	border: solid white 1px;
}

.shadow-hover:hover {
	border: solid #ccc 1px;
}

.uniform-width-buttons {
	width: 230px;
	margin: 5px;
}

.white-bubble {
	padding: 7px;
	background: white;
	border-radius: 10px;
}

.twice-as-big {
	font-size: 250%;
}

#legal-nav-row {
	border-bottom: solid 1px #ccc;
}

.legal-nav-text {
	font-size: 80%;
}

.btn-back-to-portfolio {
	color: #000;
	/* border-color: #f8f9fa; */
	background-color: transparent;
}

.nav-items-list-ul {
	list-style: none;
}

.terms-of-service-page p{
	margin-top: 20px;
}

.terms-of-service-page h3{
	margin-top: 30px;
}


.loading{
    background:transparent url("../images/icons/loading.gif") center center no-repeat;
	background-size: 70px;
}

#pain-point-list{
	padding-left: 30px;
	list-style-position: inside;
}

#pain-point-list li::marker {
   color: black;
   font-size: 130%;
 }
#pain-point-list li {
   font-size: 100%;
 }
 
#CONTACT-PAGE .form-control {
    color: black;
    border: 1px solid #777;
}