/*----------------------------------------------*/
/*global	                                    */
/*----------------------------------------------*/
#shading{
	z-index:-1;
	box-shadow:0px 0px 128px rgba(32, 24, 18, .25) inset;
	height:100%;
	top:0;
	left:0;
	min-height:100vh;
	width:100%;
	min-width:100%;
	pointer-events:none;
	background: radial-gradient(rgba(0,0,0,0) 0%, rgba(36,25,20,0.05) 100%);
	position:fixed;
	}
.outline{
	/*box-shadow:0px 0px 0px 1px rgb(51, 51, 51) inset;*/
}
html {
	font-size:13px;
	min-width:320px;
}
body{
	font:400 12px  'Roboto', sans-serif;
	color:#EAE5E6;
	padding:0px;
	margin:0px auto 0px auto;
	background-color:#EAE5E6;
	background-image:url('../images/noise.png');
	background-position:center top;
	overflow-y:initial;
	height:100%;
	}
	/*see the following for removing scrollbars http://stackoverflow.com/questions/3296644/hiding-the-scrollbar-on-an-html-page */
img{
	border:0px;
	margin:0px;
	padding:0px;
	border-image-width:0px!important;
	border-radius: 1rem;
	}
div{
	border-image-width:0px!important;
	border:0px;
	margin:0px;
	padding:0px;
	}
iframe{
	border:0px;
	padding:0px;
	margin: 0px 0px 0.667rem 0px;
	overflow:hidden;
	outline: none;
	border-radius: 1rem;
	border-bottom-left-radius: 0rem;
	border-bottom-right-radius: 0rem;
	}
*:focus {
	outline-color:rgba(17,17,17,0);
	outline-width:2px!important;
	outline-style:solid!important;
}
p{
	border:0px;
	padding:0px;
	margin:0px;
}
/*----------------------------------------------*/
/*Title											*/
/*----------------------------------------------*/
#title {
	position:relative;
	font-size:8rem;
}
H1, H2 {
	border:0px;
	padding:0px;
	margin:0px;
	color:#1A1A1A;
	font-weight:200;
	font-size:1em;
	line-height:;
}
h2 {
	font-weight:200;
	font-size:0.25em;
	position:relative;
	margin-top:-1em;
	margin-left:0.5em;
	line-height:1em;
	padding-bottom:0.5rem;
	text-align:left;
}
h2 span {
	float:right;
	margin-right:0.5em;
	text-align:right;
}
#titleSpacer {
	margin-left:7.5em; /*this controls how far apart the sub titles are as they are centered by default*/
}
#titleSpacerSingle {
	margin-left:13em;
}
/*----------------------------------------------*/
/*end title										*/
/*----------------------------------------------*/

/*----------------------------------------------*/
/*accordions									*/
/*----------------------------------------------*/
H3, H4, H5{
	text-align:left;
	font-size: 0px;
	font-weight: normal;
	height:50px;
	padding:0px;
	border:0px;
	margin: 0px 0px 0.667rem 0px;
	overflow:hidden;
	/*background-image:url('../images/UI/aUI.svg'); replaced with live text*/
	background-size: 512px 200px;
	background-position:0px 0px;
	background-repeat:no-repeat;
	
}
.portfolio h3 {
	background-position:0px 0px;
}
.info h3 {
	background-position:0px -50px;
}
.external h3 {
	background-position:0px -100px;
}
.about h3 {
	background-position:0px -150px;
}
h5 {
/*	background-image:url('../images/UI/photography.png'); removed catagrry all together*/
	background-size: 512px auto;
}
/*----------------------------------------------*/
/*end accordions								*/
/*----------------------------------------------*/
a {
	text-decoration:underline;
	color:inherit;
	font-weight:normal;
	border-radius: 1rem;
}
/*
span{ 
	width:1000px;
	height:50px;
	background-repeat:repeat;
	z-index:1;
}*/
::-moz-selection {background-color:rgba(75, 73, 74, 1);color:rgba(255, 253, 254, 1);}
::selection {background-color:rgba(75, 73, 74, 1);color:rgba(255, 253, 254, 1);}
#body {
	max-width:1280px;
	/*width:100%;*/
	margin:0 auto;
	display:flex;
	flex-direction:column;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
	}
#wrapper {
	position:relative;
	z-index:100;
	max-width:1280px;
	min-width:748px;
	background-color:rgba(17,17,17,0);
	margin:0.667rem 24px 1.333rem 24px;
	}
.accordionToggle {	
	padding:0px;
	cursor: pointer;
	background-color:#1A1A1A;
	background-image:url('../images/UI/arrows.svg');
	background-size: 50px 100px;
	background-position:100% 100%; /*this sets it to the right and arrow down*/
	background-repeat:no-repeat;
	border-radius: 1rem;
	-youbkit-touch-callout: none;	/* iOS Safari */
	-youbkit-user-select: none;		/* Chrome 6.0+, Safari 3.1+, Edge & Opera 15+ */
	-moz-user-select: none;			/* Firefox */
	-ms-user-select: none;			/* IE 10+ and Edge */
	user-select: none;				/* Non-prefixed version, currently supported by Chrome and Opera */
	}
.accordionToggle.on {
	background-position:100% 0%;
	}
.accordionToggle.over {
	background-position:100% 0%;
	transform: rotate(15deg);
	}
.accordionToggle p {
	display:block;
	font-family:;
	border:0px;
	padding:0px;
	padding-left:10px;
	margin:0px;
	margin-bottom:0.667rem;
	color:;
	font-weight: 400;
	font-size: 2.5rem;
	line-height: 50px;
	}
.accordionContent.over {
	border-radius:1rem;
	}
/*
.accordionToggle{
	position:relative;
	overflow:hidden;
}
.accordionToggle::befor {
	content: "";
	position: absolute;
	width: 50px;
	height: 50px;
	top: -50%;
	left: -50%;
	z-index: -1;
	background-image:url('../images/UI/arrows.svg');
	background-size: 50px 100px;
	background-position:100% 100%;
	background-repeat:no-repeat;
	transform: rotate(30deg);
	transition: transform 0.5s;
	background-color:purple;
}*/
.table {
	font-size:0px;
	margin:0px;
	padding:0px;
	display:table;
}
.table > div{
	display:table-row;
	box-sizing: border-box;
}
.table > div > div{
	display:table-cell;
}
/*----------------------------------------------*/
/*header										*/
/*----------------------------------------------*/
#header {
	max-width:1280px;
	min-width:748px;
	/*height:139px;*/
	margin:20px 24px 16px 24px;
	display:flex;
	flex-direction:row;
}
#title {
	display:inline-block;
	margin-right:16px;
	text-align:center;
	white-space:nowrap;
}
#logo_show_inline {
	width:140px;
	min-width:140px;
	height:140px;
	min-height:140px;
	margin-right:16px;
	display:inline-block;
	position:relative;
}
#logo_show_inline img, #logo_show_inline svg, #logo_show_inline div {
	display:block;
	position:absolute;
}
#logo_show_inline .circle {
	border-radius:50%;
	display:block;
	position:absolute;
	width:71.42%;
	height:71.42%;
	transform-origin:40% 40%;
	top:21.42%;
	left:21.42%;
}
#logo_show_inline .circleMask {
	display:block;
	position:absolute;
	width:71.42%;
	height:71.42%;
}

#circleMasking {
	clip-path: url('data:image/svg+xml;%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CclipPath id="clipPath" clipPathUnits="objectBoundingBox"%3E%3Cpolygon points=".5,0 .8,1 0,.4 1,.4 .2,1" /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E#clipPath');
}

#logo_show_inline .white{background-color:rgba(255,255,255,0.50);}
#logo_show_inline .black {background-color:#333333;}
#logo_show_inline svg {
	width:100%;
	height:100%;
}
/*----------------------------------------------*/
/*portfolio										*/
/*----------------------------------------------*/
#video{
	margin: 0.667rem 0px 0.667rem 0px;
	padding:0px;
	border:0px;
	}
.portfolio .display{
	/*margin:0px 0px 0.667em 0px;*/
	overflow:hidden;
	}
.portfolio .display img{
	width:100%;
	Height:auto;
	display:block;
	border-bottom-left-radius: 0rem;
	border-bottom-right-radius: 0rem;
	border-radius:0em;
	}
.portfolio .display img:first-of-type{
	border-top-right-radius:1rem;
	border-top-left-radius:1rem;
	}
.portfolio .description img {
	border-radius:0em!important;
	}
.h_iframe {
	position:relative;
	}
.h_iframe .ratio {
	display:block;
	}
.h_iframe iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	}
.table > div > div {
	font-size:0px;
	margin:0px;
	padding:0px;
	vertical-align:top;
	box-sizing: border-box;
	width:50%;
}
.table > div > div.left{
	padding-right:4px;
}
.table > div > div.right {
	padding-left:4px;
}
.table .spacer {
	width:0.667rem;
}
.table img{
	width:100%;
	height:auto;
}
.portfolio .description {
	display:block;
	margin:0px 0px 0.667rem 0px;
	background-color:#1A1A1A;
	border-bottom-left-radius: 1rem;
	border-bottom-right-radius: 1rem;
}
.portfolio .description p {
	text-align:left;
	padding:0.667rem 0.667rem 0.667rem 0.667rem;
	font-size:1.2rem;
}
.portfolio .description a {
	color:#7A65A3;
}
.portfolio .description p:first-of-type {
	padding:0.667rem 0.667rem 0 0.667rem;
	font-size:2rem;
	word-wrap:break-word;
}
.portfolio .description p:first-of-type span {
	font-size:1.2rem;
	padding-left:0.667rem;
}

dl.credits {
	font-size:1.2rem;
	margin:0;
	padding:0px 0.667rem 0.667rem 0.667rem;
	text-align:left;
}
dl.credits dd {
	margin:0;
	padding-left:1rem;
}

/*----------------------------------------------*/
/*linking    	                                */
/*----------------------------------------------*/
.imglink{
	margin: 0px 0px 0.667rem 0px;
	text-align:left;
	width:100%;
	height:50px;
	overflow: hidden;
	background-color:#7A65A3;
	/*position:relative;*/
	}
.imglink img{
	/*position:absolute;*/
	transition: background-position 2.5s ease-in;
	width:auto;
	height:50px;
	/*left:-50vw;*/
	background-repeat: no-repeat!important;
    background-attachment: initial!important;
	background-size:35ch 100%!important;
	background-position:-35ch 0px!important;
	/*background: linear-gradient(to right, rgba(255,0,0,1),rgba(112,167,225,1));*/
}
.imglink:hover img{
	transition: background-position 0.5s ease-out;
	background-position:0ch 0px!important;
	/*background: linear-gradient(to right, rgba(199,211,220,1),rgba(112,167,225,1));*/
}
.imglinkNEW{
	margin: 0px 0px 0.667rem 0px;
	text-align:left;
	width:100%;
	height:50px;
	overflow: hidden;
	background-color:#7A65A3;
	position:relative;
	display: block;
}
.imglinkNEW#resume::after {
	background-position:0px -100px;
}
.imglinkNEW#deviantArt_CD2::after {
	background-position:0px -150px;
}
.imglinkNEW#deviantArt_Cloneddragon::after {
	background-position:0px -200px;
}
.imglinkNEW#youtube::after {
	background-position:0px -250px;
}
.imglinkNEW#steam::after {
	background-position:0px -300px;
}
.imglinkNEW::after {
	/*background-image:url('.../images/UI/eUI.svg'); replacced with live text*/
	background-size: 512px 350px;
	content:"";
	display:block;
	position:absolute;
	width:512px;
	height:50px;
	background-repeat:no-repeat;
}
.imglinkNEW#resume::before  {
	background: linear-gradient(to right, rgba(26,26,26,1),rgba(122,101,163,1));
}
.imglinkNEW#deviantArt_CD2::before  {
	background: linear-gradient(to right, rgba(71,92,77,1),rgba(122,101,163,1));
}
.imglinkNEW#deviantArt_Cloneddragon::before  {
	background: linear-gradient(to right, rgba(71,92,77,1),rgba(122,101,163,1));
}
.imglinkNEW#youtube::before  {
	background: linear-gradient(to right, rgba(200,49,43,1),rgba(122,101,163,1));
}
.imglinkNEW#steam::before  {
	background: linear-gradient(to right, rgba(23,26,33,0.75),rgba(122,101,163,1));
}
.imglinkNEW#artStation::before  {
	background: linear-gradient(to right, rgba(19,175,240,0.75),rgba(122,101,163,1));
}
.imglinkNEW#c12::before  {
	background: linear-gradient(to right, rgba(204,0,0,1),rgba(122,101,163,1));
}
.imglinkNEW::before {
	position:absolute;
	content:"";
	display:block;
	transition: background-position 2.5s ease-in;
	width:100vw;
	height:50px;
	background-repeat: no-repeat!important;
    background-attachment: initial!important;
	background-size:100vw 100%!important;
	background-position:-100vw 0px!important;
	/*background: linear-gradient(to right, rgba(255,0,0,1),rgba(112,167,225,1));*/
}
.imglinkNEW:hover::before  {
	transition: background-position 0.5s ease-out;
	background-position:0ch 0px!important;
	/*background: linear-gradient(to right, rgba(199,211,220,1),rgba(112,167,225,1));*/
}











.fancyTextLink {
	margin: 0px 0px 0.667rem 0px;
	text-align:left;
	width:100%;
	height:50px;
	overflow: hidden;
	background-color:#7A65A3;
	position:relative;
	display: block;
	padding:0px;
	cursor: pointer;
	border-radius: 1rem;
	-youbkit-touch-callout: none;	/* iOS Safari */
	-youbkit-user-select: none;		/* Chrome 6.0+, Safari 3.1+, Edge & Opera 15+ */
	-moz-user-select: none;			/* Firefox */
	-ms-user-select: none;			/* IE 10+ and Edge */
	user-select: none;				/* Non-prefixed version, currently supported by Chrome and Opera */
	text-decoration:none;
	
	margin-bottom:0.667rem;
	}
.fancyTextLink p {
	display:block;
	font-family:;
	border:0px;
	padding:0px;
	margin:0px;
	margin-left:2.5rem;
	color:;
	font-weight: 400;
	font-size: 2.5rem;
	line-height: 50px;
	position:absolute;
	}
.fancyTextLink::before {
	content:"";
	display:block;
	position:absolute;
	transition: background-position 2.5s ease-in; /*OUT*/
	width:100vw;
	height:50px;
	background-repeat: no-repeat!important;
    background-attachment: initial!important;
	background-size:100vw 100%!important;
	background-position:-100vw 0px!important;
	/*background: linear-gradient(to right, rgba(255,0,0,1),rgba(112,167,225,1));*/
}
.fancyTextLink:hover::before  {
	transition: background-position 0.5s ease-out; /*IN*/
	background-position:0ch 0px!important;
	/*background: linear-gradient(to right, rgba(199,211,220,1),rgba(112,167,225,1));*/
}



.fancyTextLink::before  {
	background: linear-gradient(to right, rgba(26,26,26,1),rgba(122,101,163,1));
}
.fancyTextLink#resume::before  {
	background: linear-gradient(to right, rgba(26,26,26,1),rgba(122,101,163,1));
}
.fancyTextLink#deviantArt_CD2::before  {
	background: linear-gradient(to right, rgba(71,92,77,1),rgba(122,101,163,1));
}
.fancyTextLink#deviantArt_Cloneddragon::before  {
	background: linear-gradient(to right, rgba(71,92,77,1),rgba(122,101,163,1));
}
.fancyTextLink#youtube::before  {
	background: linear-gradient(to right, rgba(200,49,43,1),rgba(122,101,163,1));
}
.fancyTextLink#steam::before  {
	background: linear-gradient(to right, rgba(23,26,33,0.75),rgba(122,101,163,1));
}
.fancyTextLink#artStation::before  {
	background: linear-gradient(to right, rgba(19,175,240,0.75),rgba(122,101,163,1));
}
.fancyTextLink#c12::before  {
	background: linear-gradient(to right, rgba(204,0,0,1),rgba(122,101,163,1));
}
.fancyTextLink#itchio::before  {
	background: linear-gradient(to right, rgba(250,92,92,1),rgba(122,101,163,1));
}
.fancyTextLink#linkedin::before  {
	background: linear-gradient(to right, rgba(10,102,194,1),rgba(122,101,163,1));
}











/*----------------------------------------------*/
/*certs			                                */
/*----------------------------------------------*/
.certs .left{
	float:left;
	display:inline-block;
	height:128px;
	width:128px;
	}
.certs img{
	width:100%;
	height:auto;
	}
#skills {
	display:inline-block;
	height:auto;
	margin-bottom:0.667rem;
	width:100%;
	background-color:#1A1A1A;
	position:relative;
	border-radius:1rem;
	}
#skills p{
	display:block;
	font-family:;
	border:0px;
	padding:0px;
	padding-left:40px;
	margin:0px;
	color:;
	font-weight: 400;
	font-size: 2.5rem;
	line-height: 50px;
	}
#skills .left{
	float:left;
	display:inline-block;
	height:128px;
	width:128px;
	}
#skills img{
	width: 100%;
	height: 100%;
	}
#skills a{
	display:block;
	margin:1rem;
	text-align:center;
	height:calc(100% - 2rem);
	}
/*----------------------------------------------*/
/*about section	                                */
/*----------------------------------------------*/
#about{
	position:relative;
	}
.about div:first-of-type{
	background-color:#1A1A1A;
	margin-bottom:0.667rem;
	
	border-radius: 1rem;
	}
.about .id {
	margin:0.667rem;
	height:200px;
}
.about .left{
	float:left;
	}
.about .right{
	float:right;
	}
.about .text{
	min-height:200px;
	min-width:328px;
	padding:0.667rem 0px 0.667rem 0px;
	margin: 0rem 0.667rem 0.667rem 216px;
	text-align:left;
	}
.about .text p{
	font-size:1.2rem;
	}
.about .text p:first-of-type{
	padding:0 0 0.667rem 0;
	}
.wordwrap { 
	white-space: pre-wrap;      /* CSS3 */  
	word-wrap: break-word;      /* IE */
	}
/*----------------------------------------------*/
/*footer                                        */
/*----------------------------------------------*/
#footer{
	max-width:1280px;
	min-width:748px;
	height:128px;
	margin:0px 32px 0.667rem 32px;
	position:relative;
	}
#footer p{
	float:right;
	color:#3F3F3F;
	text-align:right;
	margin-right:6px;
	}
/*----------------------------------------------*/
/*conditional                                   */
/*----------------------------------------------*/	
/*conditional CSS*/
@media (max-width: 799px) {
	body{
		max-width:100%;
	/*	min-width:320px;*/
		}
	#header{
		max-width:100%;
		min-width:100%;
		width:100%;
		margin:0px;
		min-height:140px;
		margin:0.667rem 0px 0px 0px!important;
		overflow:hidden;
	}
	#body {
		max-width:100%;
	/*	min-width:100%;
		width:100%;*/
		margin:0px;
		overflow:hidden;
	}
	#wrapper {
		max-width:unset;
		min-width:unset;
		margin:0.667rem 0.5rem 1.333px 0.5rem;
	}
	
	.portfolio .description p:first-of-type {
		font-size:1.5rem;
	}
	.portfolio .description p:first-of-type span {
		font-size:0.75rem;
	}
	#footer{
		max-width:100%;
		min-width:100%;
		margin:0.667rem 0px;
	}
	.about .text{
		min-height:200px;
	/*	min-width:320px;*/
		padding:0.667rem 0px 0.667rem 0px;
		margin:0px 0px 0px 0px;
	}
	.about .text p:first-of-type{
		padding:0.667rem 0px 0.667rem 0px;
		margin-top:0.667rem;
	}
	.about .text p{
		margin:0px 0.667rem 0.667rem 0.667rem;
	}
}
@media (max-width: 640px) {
	html {
		font-size:14px;
	}
	#title { 
		font-size:5.5rem;
		font-size:14vw;
	}
	#title h1 {
		line-height:2em
	}
	#title h2 {
		margin-top:-2.5em;
	}
	.about .text p:first-of-type{
		padding:0px 0px 0.667rem 0px;
		/*margin-top:208px;*/
	}
/*	.about .text p{
		font-size:14px;
	}
*/	.certs .left{
		float:left;
		height:91px;
		width:91px;
	}
	#skills .left{
		float:left;
		height:91px;
		width:91px;
	}
	#logo_show{
		/*display:none!important;
		visibility:hidden;
		width:0;*/
	}
	#logo_show_inline{
		/*display:none!important;
		visibility:hidden;
		width:0;*/
	}
	#header img {
		margin:0px;
		margin-left:6px;
		text-align: center;
	}
	.about .id.left {
		/*margin-right:0; un comment this once second image is added*/
	}
	.about .id.right {
		margin-left:0;
	}
	.about .text p {
		font-size: 1rem;
	}
	.portfolio .description p:first-of-type span {
		display:block;
		padding-left:0;
	}
	
	.portfolio .description p {
		font-size:1rem;
	}
	
	dl.credits {
		font-size:0.875rem;
	}
	dl.credits dd {
		padding-left:0.875rem;;
	}
	
	.table.break > div > div {
		display:block;
		width:100%;
	}
	.table.break > div > div img {
		width:80%;
		margin: 0 10%;
	}
	.table.break .left, .table.break .right {
		padding:0!important;
	}
}
@media (max-width: 480px) {
	#title {
		font-size: 17.25vw!important;
		margin-right:0px!important;
		margin-top:-7vw!important;
		position:relative;
	}
	
	#header img{
		height:0px;
		width:0px;
		margin-left:0px;
	}
	#header{
		flex-direction:column;
		/*height:90px;
		background-image:url('../images/UI/TopB.svg');  replaced with live text
		background-size:contain;
		background-repeat:no-repeat;
		background-position:center center; */
	}
	#header #logo_show_inline {
		margin: 0 auto;
	}
}
@media (max-width: 440px) {
	.about .id {
		width:45vw;
		height:auto;
	}
}
@media (max-width: 400px) {
	.about .id {
	}
	.about .text {
		min-width:100%;
	}
	.about .text p:first-of-type {
		padding:0.667rem 0px 0.667rem 0px;
		margin-top:30px;
	}
	.certs .left {
		float:left;
		display:inline-block;
		height:64px;
		width:64px;
	}
	.certs .left img {
		width:100%;
		height:100%;
	}
	#skills .left {
		float:left;
		display:inline-block;
		height:64px;
		width:64px;
	}
	#skills .left img {
		width:100%;
		height:100%;
	}
}


@media (prefers-color-scheme: dark) {
	H1, H2 {
		color:#D8D6D7;
	}
	body {
		background-color:#1A1A1A;
	}
	.accordionToggle, .portfolio .description, .portfolio .display img, .about div:first-of-type, #skills {
		background-color:#0d0c0d;
	}
	#shading {
		box-shadow: 0px 0px 128px rgba(5 2 0 / 25%) inset;
	}
}



/*-----------------------------------*/
.carousel {
	position:relative;
	display:block;
	overflow:none;
}
.carousel .content li {
	position:absolute;
	height:100%;
}
.carousel .content .display {
	position:relative;
}
.carousel ul, .carousel li {
	margin:0;
	padding:0;
	list-style:none;
}
.carousel .back, .carousel .forwards {
	position:absolute;
	height:100%;
	width:3.85rem;
	min-width:50px;
	padding:0;
	cursor: pointer;
	background-color:rgba(0,0,0,0);
	outline:none;
	opacity:0.6;
	border:none;
	color:rgba(0,0,0,0);
	background-image:url('../images/UI/arrows_rotated.svg');
	background-size: 100px 50px;
	background-position:0% 50%; /*this sets it to the right and arrow down*/
	background-repeat:no-repeat;
	border-radius: 1rem;
	-youbkit-touch-callout: none;	/* iOS Safari */
	-youbkit-user-select: none;		/* Chrome 6.0+, Safari 3.1+, Edge & Opera 15+ */
	-moz-user-select: none;			/* Firefox */
	-ms-user-select: none;			/* IE 10+ and Edge */
	user-select: none;				/* Non-prefixed version, currently supported by Chrome and Opera */
	margin-top: -50%;
}
.carousel .forwards {
	position:absolute;
	background-position:100% 50%; /*this sets it to the right and arrow down*/
	margin-left:calc(100% - 50px);
}

.carousel .back:hover, .carousel .forwards:hover {
	opacity:1;
}

.carousel ul, .carousel li, .carousel img  {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.carousel ul li img {
	border-top-right-radius: 1rem!important;
	border-top-left-radius: 1rem!important;
}
.carousel ul li img {
	transform: translateX();
}

.carousel .ratio  {
	position:static;
}