.paragraph, .paragraph-layout, .paragraph-box, .paragraph-content, .paragraph-header{
	position: relative;
	float: left;
	width: 100%;
}
.paragraph-layout.hide{ display: none; }
.paragraph-layout.right{ float: right; }
.paragraph-layout.padding10{ padding: 10px; }
.paragraph-layout.split2{ width: calc(100% / 2); }
.paragraph-layout.split3{ width: calc(100% / 3); }
.paragraph-layout.split3-merge2{ width: calc((100% / 3) * 2); }
.paragraph-layout.split4{ width: calc(100% / 4); }
.paragraph-box{
	border-radius: 0 0 5px 5px;
	background: linear-gradient(0deg, hsla(0, 0%, 95%, 0.2) 0%, hsla(0, 0%, 100%, 0.1) 0%);
	border: 1px solid rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}
.paragraph-box.rounded{
	border-radius: 5px;
}
.paragraph-header{
	border-radius: 5px 5px 0 0;
	background: linear-gradient(0deg, hsla(0, 0%, 95%, 0.4) 0%, hsla(0, 0%, 100%, 0.2) 0%);
	border-bottom: 1px solid hsla(0, 0%, 100%, 0.1);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}
.paragraph-header > :is(h1, h2, h3, h4, h5, h6){
	font-size: 1.125em;
	line-height: 20px;
	font-weight: 600;
	padding: 25px 70px 25px 25px;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.paragraph-header .sub-icon ~ :is(h1, h2, h3, h4, h5, h6){
	padding: 25px 70px 25px 85px;
}
.paragraph-header .sub-icon{
	position: absolute;
	top: 0;
	left: 0;
	width: 70px;
	height: 100%;
	font-size: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	object-fit: cover;
	border-radius: 5px 0 0 0;
	background: linear-gradient(0deg, hsla(0, 0%, 95%, 0.2) 0%, hsla(0, 0%, 100%, 0.1) 0%);
	border-right: 1px solid hsla(0, 0%, 100%, 0.1);
}
.paragraph-header .sub-icon.color1{
	background: linear-gradient(0deg, hsla(252, 100%, 70%, 1) 0%, hsla(305, 100%, 69%, 1) 80%);
}
.paragraph-header .sub-icon.color2{
	background: linear-gradient(0deg, hsl(168, 97%, 35%, 1) 0%, hsla(166, 99%, 46%, 1) 80%);
}
.paragraph-header .sub-icon.color3{
	background: linear-gradient(0deg, hsla(201, 100%, 46%, 1) 0%, hsla(197, 93%, 79%, 1) 80%);
}
.paragraph-header > a{
	position: absolute;
	top: 0;
	right: 0;
	width: 70px;
	height: 100%;
	font-size: 1.25em;
	display: flex;
	align-items: center;
	justify-content: center;
	color: hsla(244, 16%, 10%, 1);
}
.paragraph-header > a:hover{
	color: hsla(244, 16%, 100%, 1);
}
.paragraph-header .sub-text{
	padding: 10px 70px 10px 85px;
}
.paragraph-header .sub-text :is(h1, h2, h3, h4, h5, h6){
	font-size: 1.125em;
	line-height: 20px;
	font-weight: 600;
}
.paragraph-header .sub-text ul{
	display: block;
	width: 100%;
	list-style: none;
	margin-bottom: -5px;
}
.paragraph-header .sub-text ul li{
	display: inline-block;
	margin: 5px 10px 5px 0;
	font-weight: 300;
}
.paragraph-header .sub-text ul li i{
	margin: 0 5px 0 0;
	font-size: 1.25em;
}
.paragraph-header .sub-text ul li a i{
	margin: 0 5px;
	font-size: 1.25em;
}
.paragraph-header .sub-text ul li img{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
}
.paragraph-header .sub-text ul li img ~ span{
	padding-left: 32px;
}
.paragraph-header .sub-text ul li:nth-of-type(5n+1) i{
	color: hsla(168, 100%, 47%, 1);
}
.paragraph-header .sub-text ul li:nth-of-type(5n+2) i{
	color: hsla(195, 100%, 50%, 1);
}
.paragraph-header .sub-text ul li:nth-of-type(5n+3) i{
	color: hsla(287, 100%, 67%, 1);
}
.paragraph-header .sub-text ul li:nth-of-type(5n+4) i{
	color: hsla(1, 100%, 63%, 1);
}
.paragraph-header .sub-text ul li:nth-of-type(5n+5) i{
	color: hsla(36, 100%, 50%, 1);
}
.paragraph-header .sub-text ul li p, .paragraph-header .sub-text ul li a{
	position: relative;
	display: block;
	height: 25px;
	border-radius: 5px;
	padding: 2px 8px 0 0;
	white-space: nowrap;
	overflow: hidden;
	background: linear-gradient(0deg, hsla(0, 0%, 95%, 0.2) 0%, hsla(0, 0%, 100%, 0.1) 0%);
}
.paragraph-header .sub-text ul li a:hover{
	background: linear-gradient(0deg, hsla(252, 100%, 10%, 0.2) 0%, hsla(305, 100%, 10%, 0.2) 80%);
}
.paragraph-header .sub-text ul li p{
	background: none;
}

.paragraph-content{
	font-size: 1em;
	line-height: 1.7;
	letter-spacing: 0.03em;
	font-weight: 300;
	color: hsla(0, 0%, 100%, 1);
}
.trumbowyg-editor.paragraph-content{
	background: hsla(201, 30%, 15%, 0.7);
}
.paragraph-content h1, .paragraph-content h2, .paragraph-content h3, .paragraph-content h4, .paragraph-content h5, .paragraph-content h6{
	line-height: normal;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}
.paragraph-content h2 {
	font-size: 2em;
	margin-bottom: 0.5em;
	margin-top: 0.3em;
	padding-bottom: 0.5em;
	color: hsla(168, 100%, 47%, 1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.paragraph-content h3 {
	font-size: 1.5em;
	color: hsla(201, 100%, 50%, 1);
}
.paragraph-content p {
  margin: 1em 0;
}
.paragraph-content ol, .paragraph-content ul{
	display: block;
	width: 100%;
	padding-left: 2em;
}
.paragraph-content ol li, .paragraph-content ul li{
	padding-left: 1em;
	margin: 0.4em 0;
}

.paragraph-content dl {
	margin: 1em 0;
}
.paragraph-content dt {
	font-weight: bold;
	margin-top: 0.5em;
}
.paragraph-content dd {
	margin-left: 1.5em;
}

.paragraph-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1em 0;
}
.paragraph-content th, .paragraph-content td {
	padding: 8px 12px;
	text-align: left;
	border: 1px solid rgba(255, 255, 255, 0.2);
}
.paragraph-content th {
	background: linear-gradient(0deg, hsla(0, 0%, 95%, 0.2) 0%, hsla(0, 0%, 100%, 0.1) 0%);
}

.paragraph-content b, .paragraph-content strong{
	font-weight: bold;
}
.paragraph-content i, .paragraph-content em{
	font-style: italic;
	font-weight: 200;
}
.paragraph-content u, .paragraph-content ins{
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.paragraph-content small {
	font-weight: 200;
}

.paragraph-content a{
	font-weight: 400;
	color: hsla(287, 100%, 67%, 1);
	border-bottom: 1px dotted currentColor;
}
.paragraph-content a:hover{
	border-bottom: 1px solid currentColor;
}

.paragraph-content blockquote {
	margin: 1.5em;
	padding: 1em;
	font-style: italic;
	color: hsla(168, 100%, 47%, 1);
	background: linear-gradient(0deg, hsla(0, 0%, 95%, 0.2) 0%, hsla(0, 0%, 100%, 0.1) 0%);
	border-left: 4px solid rgba(255, 255, 255, 0.2);
}

.paragraph-content code {
	font-family: "Courier New", monospace;
	padding: 2px 4px;
	color: hsla(196, 100%, 50%, 1);
	background: linear-gradient(0deg, hsla(0, 0%, 95%, 0.2) 0%, hsla(0, 0%, 100%, 0.1) 0%);
}
.paragraph-content pre {
	font-family: "Courier New", monospace;
	padding: 10px;
	overflow-x: auto;
	color: hsla(196, 100%, 50%, 1);
	background: linear-gradient(0deg, hsla(0, 0%, 95%, 0.2) 0%, hsla(0, 0%, 100%, 0.1) 0%);
}

.paragraph-content address {
	font-style: normal;
	margin-top: 1em;
	font-weight: 200;
}
.paragraph-content hr {
	border: none;
	margin: 2em 0;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.paragraph-box img, .paragraph-content img, .paragraph-content audio, .paragraph-content video {
	display: block;
	max-width: 100%;
	object-fit: contain;
}
.paragraph-content img, .paragraph-content audio, .paragraph-content video {
	margin: 1em auto;
}

.paragraph-content form {
	margin: 1em 0;
}
.paragraph-content label {
	font-weight: bold;
}
.paragraph-content input,
.paragraph-content textarea,
.paragraph-content button {
	font-family: inherit;
	font-size: 1em;
	margin-top: 0.5em;
}
.paragraph-content input,
.paragraph-content textarea {
	width: 100%;
	padding: 8px;
	border: 1px solid #ccc;
}
.paragraph-content button {
	padding: 10px 30px;
	cursor: pointer;
	color: #fff;
	background: red;
	border: 1px solid red;
}
.paragraph-content button:hover {
	color: red;
	background: rgba(255, 0, 0, 0.3);
}

.paragraph-content .sub-list, .paragraph-content .sub-list li, .paragraph-content .sub-list li > *{
	position: relative;
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.paragraph-content .sub-list li{
	width: calc(100% / 5);
	padding: 1px;
}
.paragraph-content .sub-list li > *{
	font-size: 1em;
	font-weight: 300;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border: none;
	border-radius: 2px;
	padding: 5px 10px;
	color: hsla(0, 0%, 90%, 1);
	background: linear-gradient(0deg, hsla(0, 0%, 95%, 0.1) 0%, hsla(0, 0%, 100%, 0.1) 0%);
	border: 1px solid hsla(0, 0%, 100%, 0.1);
}
.paragraph-content .sub-list li > * span{
	position: absolute;
	top: 2px;
	right: 2px;
	font-size: 0.875em;
	font-weight: 400;
	line-height: 20px;
	padding:  0 5px;
	text-align: center;
	border-radius: 2px;
	background: linear-gradient(0deg, hsla(0, 0%, 95%, 0.05) 0%, hsla(0, 0%, 100%, 0.1) 0%);
	border: 1px solid hsla(0, 0%, 100%, 0.1);
}
.paragraph-content .sub-list li:nth-of-type(6n+1) > * span{
	color: hsla(168, 100%, 47%, 1);
	background: hsla(168, 100%, 47%, 0.1);
}
.paragraph-content .sub-list li:nth-of-type(6n+2) > * span{
	color: hsla(195, 100%, 50%, 1);
	background: hsla(195, 100%, 50%, 0.1);
}
.paragraph-content .sub-list li:nth-of-type(6n+3) > * span{
	color: hsla(287, 100%, 67%, 1);
	background: hsla(287, 100%, 67%, 0.1);
}
.paragraph-content .sub-list li:nth-of-type(6n+4) > * span{
	color: hsla(1, 100%, 63%, 1);
	background: hsla(1, 100%, 63%, 0.1);
}
.paragraph-content .sub-list li:nth-of-type(6n+5) > * span{
	color: hsla(36, 100%, 50%, 1);
	background: hsla(36, 100%, 50%, 0.1);
}
.paragraph-content .sub-list li:nth-of-type(6n+6) > * span{
	color: hsla(105, 100%, 43%, 1);
	background: hsla(105, 100%, 43%, 0.1);
}

.paragraph-content .sub-list li:nth-of-type(6n+1) > *:hover{
	color: hsla(168, 100%, 47%, 1);
}
.paragraph-content .sub-list li:nth-of-type(6n+2) > *:hover{
	color: hsla(195, 100%, 50%, 1);
}
.paragraph-content .sub-list li:nth-of-type(6n+3) > *:hover{
	color: hsla(287, 100%, 67%, 1);
}
.paragraph-content .sub-list li:nth-of-type(6n+4) > *:hover{
	color: hsla(1, 100%, 63%, 1);
}
.paragraph-content .sub-list li:nth-of-type(6n+5) > *:hover{
	color: hsla(36, 100%, 50%, 1);
}
.paragraph-content .sub-list li:nth-of-type(6n+6) > *:hover{
	color: hsla(105, 100%, 43%, 1);
}

@media screen and (max-width:1200px){
	.paragraph-header > :is(h1, h2, h3, h4, h5, h6){
		font-size: 1.125em;
		padding: 15px;
	}
	.paragraph-layout.padding10{
		padding: 5px;
	}
	.paragraph-header .sub-icon{
		width: 65px;
	}
	.paragraph-header > a{
		width: 65px;
	}
	.paragraph-header .sub-text ul{
		margin-top: 2px;
		margin-bottom: -7px;
	}
	.paragraph-header .sub-text ul li{
		margin: 0 2px 0 0;
	}
	.paragraph-header > :is(h1, h2, h3, h4, h5, h6){
		padding: 22px 65px 22px 20px;
	}
	.paragraph-header .sub-icon ~ :is(h1, h2, h3, h4, h5, h6){
		padding: 22px 65px 22px 75px;
	}
	.paragraph-header .sub-text{
		padding: 10px 70px 10px 75px;
	}
	.paragraph-content .sub-list li{
		width: calc(100% / 4);
	}
}
@media screen and (max-width:800px){
	.paragraph-header > a{
		width: 40px;
		height: 40px;
	}
	.paragraph-header > :is(h1, h2, h3, h4, h5, h6){
		padding: 22px 20px 22px 20px;
	}
	.paragraph-header .sub-icon ~ :is(h1, h2, h3, h4, h5, h6){
		padding: 22px 10px 22px 75px;
	}
	.paragraph-header .sub-text{
		padding: 10px 10px 10px 75px;
	}
	.paragraph-header .sub-text :is(h1, h2, h3, h4, h5, h6){
		padding-right: 20px;
	}
	.paragraph-content .sub-list li{
		width: calc(100% / 3);
	}
}
@media screen and (max-width:600px){
	.paragraph-header .sub-icon{
		width: 65px;
		height: 65px;
	}
	.paragraph-header .sub-text{
		padding: 10px;
	}
	.paragraph-header .sub-text :is(h1, h2, h3, h4, h5, h6){
		padding-left: 65px;
		height: 45px;
		display: flex;
		align-items: center;
	}
	.paragraph-header .sub-text:after{
		content: "";
		position: absolute;
		top: 65px;
		left: 0;
		width: 100%;
		height: 1px;
		border-bottom: 1px solid hsla(0, 0%, 100%, 0.2);
	}
	.paragraph-header .sub-text ul{
		margin-top: 20px;
		margin-bottom: -5px;
	}
	.paragraph-content .sub-list li{
		width: calc(100% / 2);
	}
}