$display-font-sizes: (
  1: 4rem,
  2: 3.5rem,
  3: 3rem,
  4: 2.5rem,
  5: 2rem,
  6: 1.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;




html {
	font-size: 1em;
}

body {
	background-color: #01060a;
	background-image: linear-gradient(#01060a, #01060a, #fff);
	background-repeat: no-repeat;
	padding: 0px
}

ul {
	list-style-type: bullets;
	margin: 0;
	padding: 0;
	margin-left: 22px;
}

a {
	color: steelblue;
	text-decoration: none;
	color: #333
}



a:hover {
	text-decoration: none;
	color: orange;
}
i {
	margin:4px
}

.ocrtextbold {
	font-family: ocr-a-std, monospace;
	font-weight: 600;
	font-style: normal;
	color: #cbeffd;
	text-shadow: 2px 4px 4px black
}
.ocrtextlight {
	font-family: ocr-a-std, monospace;
	font-weight: 300;
	font-style: normal;
	color: #cbeffd;
	text-shadow: 1px 2px 2px black
}



.herocontainer {
	/*height: 30vh;*/
	padding-bottom: 0px;
	/*padding-left: 300px;*/
	background-image: url("../_img/UXBRAIN.jpg");
	background-repeat: no-repeat;
	background-position: center;
	margin-top: -30px;
	text-align: center;
	background-size: cover;
	background-color: #01060a;
}

.bg-dark {
	background:rgba(1,6,10,1) !important;
	--bs-bg-opacity: 0.2 !important
}
.card {
	background:rgba(1,6,10,0.2) !important;
	border:0px  !important;
}

.row {
	margin: 0px 0px
}
.lightbg{
	background-image: linear-gradient(#fff, #eee);
	background: #fff;
}

.herocard {
	top: 5vh;
}

.embed-youtube {
	position: relative;
	padding-bottom: 56.25%;
	/* - 16:9 aspect ratio (most common) */
	/* padding-bottom: 62.5%; - 16:10 aspect ratio */
	/* padding-bottom: 75%; - 4:3 aspect ratio */
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.embed-youtube iframe,
.embed-youtube object,
.embed-youtube embed {
	border: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.contact h1 {
	font-family: Helvetica Neue, sans-serif;
	font-weight: 700;
	font-style: normal;
	
}

.contact h2 {
	/*font-family: vox,sans-serif;*/
	font-family: Helvetica Neue, sans-serif;
	font-weight: 700;
	font-style: normal;
	
	margin-top: 0px;
}

.col-work {
	padding: 0px 0px 20px 10px;
}

h1 {
	font-family: Helvetica Neue, sans-serif;
	font-weight: 700;
	font-style: normal;

}

h2 {
	font-family: Helvetica Neue, sans-serif;
	font-weight: 700;
	font-style: normal;
	margin-top: 40px;
	font-size:24px; !important
}

h3 {
	font-family: Helvetica Neue, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size:18px;
	
}
.colortext{
	color:#cbeffd
}

p {
	font-size: 16px;
}

.col-skill .owncontent {
	width: 100%;
	margin: 0px auto;
	background: lightgray;
	padding: 40px 16px;
}

.col-skill h1 {
	font-family: Helvetica Neue, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1.4em
}

.col-skill h2 {
	font-family: Helvetica Neue, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1.2em
}

.col-skill h3 {
	font-family: Helvetica Neue, , sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1em
}

.col-skill ul,
.col-skill p {
	font-size: .9em;
}

.tagblock {
	/*padding:3px;
	
	background:lightgray;
	border-radius:4px;*/
	margin: 2px;
	font-style: italic;
}
.articletitlecopy{
	margin-top:60px
}
.articlebodycopy img {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: block
}

.articlebodycopy h1 {
	font-family: Helvetica Neue, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1.8em
}

.articlebodycopy h2 {
	display: block;
	background: #ccc;
	padding: 6px 12px;
	border-radius: 4px 4px 0px 0px;
	margin-top: 40px
}

.articlebodycopy h3 {
	display: block;
	padding: 6px 12px;
	border-bottom: 2px dotted darkgray;
	margin-top: 40px
}

.articlebodycopy p {
	padding: 6px 12px;
}

.articlebodycopy p a {
	text-decoration: none;
	border-bottom: 1px dotted steelblue; !important
	color:steelblue;
	/*
	background-color:steelblue;
	padding:2px;
	border-radius:8px;
	color:white;
	display:inline-block;
	*/
	text-align:center;
}

.articlelistitem {
	margin-bottom: 60px;
	border-top: 2px solid darkgray;
	padding-top: 20px;
	cursor: pointer;
}

.contentblock {
	padding-top: 60px;
}

.rounded-card {
	border-radius: 14px;
	border: 2px solid white;
	box-shadow: 3px 5px 6px rgba(0, 0, 0, .25);
	overflow: hidden;
}

.card:hover {
	box-shadow: 2px 4px 5px rgba(0, 0, 0, .3);
	transform: scale(1.05);
}

.card-deck {
	margin-bottom: 40px;
}
.cs_row{
	background:rgba(255,255,255,.8);
	margin:100px 0px;
	padding:20px;
	border-radius:25px 0px 25px 25px;
	border: #01060a solid 0px;
	/*box-shadow:2px 4px 8px rgba(0,0,0,0.4)*/
	cursor:pointer;
}

.cs_row_img{
	display:block;
	border-radius:5px;
	overflow:hidden;
	text-align:center;
	height: 300px;
	background-size:cover;
	background-position:center 20%
}
.cs_row_text{
	display:block;
	
}
.cs_row_text h2{
	background-color:#01060a;
	color:#cbeffd;
	display:block;
	margin:-20px 0px 30px -20px;
	/*border-radius:0px 0px 100px 0px;*/
	padding:20px 40px;
	width:100%;
	font-size:24px
}

.cs_row_text p{
	display:block;
	margin:30px;
	font-size:18px;
}
.cs_row_tags{
	text-align:right;
	padding:10px;
}

.project-block{
	display:inline-block;
	width:31%  !important;
	border:0px solid red;
	border-radius:5px;
	overflow:hidden;
	margin:10px;
	background:rgba(255,255,255,.98);
	cursor:pointer
}
/*.project-block:hover {
	box-shadow: 0px 0px 8px #cbeffd; rgba(255, 0, 0, .3);
	transform: scale(1.02);
	border:2px solid #cbeffd
}*/

.project-image{
	border-bottom:1px solid lightgray;
	width:100% !important;
	height:220px;
	background-size:cover;
	overflow:hidden;
	margin-bottom:20px;
}
.project-title{
	height:62px;
	margin:10px;
}
.project-text{
	overflow:hidden;
	height:240px;
	margin:10px;
	font-size:13px;
}

.project-tags{
	height:60px;
	text-align:center
		
	
}
.tag{
	font-size:14px;
	padding:8px 14px;
	display:inline-block;
	background:#dcdcdc;
	border-radius:20px;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, .3);
}




@media (max-width: 992px) {
	.project-block{
		width:47% !important;
		margin:10px 10px;
	}
	
	.project-image{
		height:250px;
	}
	
	.project-title{
		height:36px;
		margin:10px;
		font-size:20px;
	}
	
	.project-text{
		overflow:hidden;
		border:0px solid green;
		text-overflow:ellipsis;
		height:200px;
		margin:10px;
		font-size:14px;
	}
	
}

@media (max-width: 768px) {
	.project-block{
		width:100% !important;
			margin:10px 4px;
	}
	
	.project-image{
		height:400px;
	}
	
	.project-title{
		height:36px;
		margin:10px;
		font-size:20px;
	}
	
	.project-text{
		overflow:hidden;
		border:0px solid green;
		text-overflow:ellipsis;
		height:140px;
		margin:10px;
		font-size:16px;
	}
	
}