@import url(https://pro.fontawesome.com/releases/v5.5.0/css/all.css);

div.clear { clear: both; }
.clearfix:after { content: ""; display: table; clear: both; }

/* new responsive grid */
.cols { clear: both; width: 100%; box-sizing: border-box; }
body#index .cols {padding-bottom: 50px; }

/* the best clearfix */
.cols:after { content:" "; display:block; clear:both; }

.cols > div { box-sizing: border-box; margin: 0; /* padding-left: 20px; padding min sida*/ float: left; }
.cols > div:first-child { padding-left: 0px; padding-right: 20px; /* padding min sida */}
.cols .cols > div:first-child { padding-left: 0px;}	
.documentpage .cols .cols > div:first-child {padding-right: 20px;} /* locked doc nikond4s */
.documentpage.locked .cols .cols > div:first-child  {padding-right: 60px;}
.cols.indented > div:last-child { /* padding-right: 10px; */ }
div.cols.indented.readmore-section > div:last-child {padding-left: 0px;}
div.cols.indented.readmore-section .cols.indented > div {padding-left: 0px;}

.col  { padding-left: 10px; float: left; }
.col-wmn { width: 100%; }
.col-wm  { width: 80%;  }
.col-n   { width: 20%;  }
.col-wn  { width: 70%;  }
.col-m   { width: 30%;  }
.col-mn  { width: 50%;  }
.col-w   { width: 50%;  }

.tp-tablayercontent .cols > div:first-child { padding-left: 0; }
.tp-tablayercontent .col-wmn { }
.tp-tablayercontent .col-wm  { }
.tp-tablayercontent .col-wn  { }
.tp-tablayercontent .col-mn  { }
.tp-tablayercontent .col-w   { }
.tp-tablayercontent .col-m   { }
.tp-tablayercontent .col-n   { }

/* index outer */
body#index .cols > .col-wm { width: 75%;  }
body#index .cols > .col-n   { width: 25%;  }

/* index has a invalid grid html... */
body#index .cols > .col-wm > .col-wm.index-wide  { width: 100%; box-sizing: border-box;  }
body#index .cols > .col-wm > .col-w  { clear:both; width: 58%; padding-left: 0; float: left; box-sizing: border-box; }
body#index .cols > .col-wm > .col-m  { width: 42%;  float: left; box-sizing: border-box; padding-left: 20px;}


/* adjustments */

#index .col-n { 
	padding-right: 10px;
	width: 190px;
	margin-top: -10px;
  	}
   
#poddradio-index .cols .col-w:first-child {}  

.contentstage + div {}


/*
.section-groups .stage,
.section-pools .stage {
	max-width: 100%;
	}

.section-groups .contentstage,
.section-pools .contentstage {
	max-width: calc(100% - 340px);
	}
*/

/* columns */

.col-wmn #col-wmn-13, 
.col-wmn #col-wmn-23, 
.col-wmn #col-wmn-33,
.col-wmn #col-wmn-12, 
.col-wmn #col-wmn-22 {
    float: left;
    display: block;
    padding: 0px 30px 0px 0px;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    padding: 30px;
    margin-right: 10px;
	}

.col-wmn #col-wmn-13, 
.col-wmn #col-wmn-23, 
.col-wmn #col-wmn-33 {
	width: calc(100% / 3 - 10px);
	}

.col-wmn #col-wmn-12, 
.col-wmn #col-wmn-22 {
	width: calc(100% / 2 - 10px);
	}

/* logo images */

img.logo-quadrant-sml,
img.logo-round-sml {
	width: 70px;
	height: auto;
	}
	
/* links */

a:link { color: #222;}
a:visited {color: #222; }
a:active {color: #222;}
a:hover { color: #ff9600;}

/* labels cloud category */

.accessLevel {
	font-family: 'Open Sans', sans-serif;
  	font-weight: 500;
    font-size: 10px;
    margin-top: 3px;
    margin-right: 5px;
    background-color: #f7e37c;
    padding: 5px;
    color: black;
    border-radius: 2px;
    letter-spacing: 0.02em;
    color: #000;
    text-transform: uppercase;
  	float:left;
  	letter-spacing: 0.02em;
  	line-height: 9px;
	}
	
div.col-wm.index-wide span.articleCategory, 
div.indexdocumentlist span.articleCategory, 
div.articleCategory,
span.articleCategory, 
#articles .documentlisttitle a#Plusarticle, 
.accessLevel, 
span.accessLevel, 
#articles .documentlisttitle a.accessLevel, 
.documentlisttitle a.accessLevel, .documentlisttitle a.accessLevel {
	font-family: 'Open Sans', sans-serif;
  	font-weight: 500;
    font-size: 10px;
    margin-top: 0px;
    margin-right: 5px;
    background-color: #fff;
    padding: 5px;
    border-radius: 2px;
    letter-spacing: 0.02em;
    color: #222;
    text-transform: uppercase;
  	float:left;
  	letter-spacing: 0.02em;
  	line-height: 9px;
  	border: 1px solid #ccc;
	}

#articles .documentlisttitle a#Plusarticle, 
.accessLevel, 
#articles .documentlisttitle a.accessLevel, 
.documentlisttitle a.accessLevel, 
.documentlisttitle a.accessLevel, 
.accessLevel, 
span.accessLevel {
    background-color: #fcc550;
    border: 1px solid #fcc550;
    color: #333;
    font-weight: 700; 
	}		

/* links icons */

span.membersubtitle.instagram::before, 
span.membersubtitle.twitter::before, 
span.membersubtitle.homepage::before, 
span.membersubtitle.portfolio::before, 
span.membersubtitle.blogg::before,
span.membersubtitle.facebook::before,
span.membersubtitle.rss::before,
span.membersubtitle.linkedin::before,
a.link.facebook::before,
a.link.rss::before,
a.link.instagram::before,
a.link.twitter::before,
a.link.homepage::before,
a.link.portfolio::before,
a.link.blogg::before,
a.link.linkedin::before,
a.facebook::before,
a.linkedin::before,
a.rss::before,
a.instagram::before,
a.twitter::before,
a.homepage::before,
a.portfolio::before,
a.blogg::before,
p a.facebook::before,
p a.rss::before,
p a.instagram::before,
p a.twitter::before,
p a.homepage::before,
p a.portfolio::before,
p a.linkedin::before,
p a.blogg::before {
	padding-right: 2px; 
	font-size: 25px; 
	position: relative;
	top: 4px; 
	margin-right: 10px;
	font-weight: 400;
	text-decoration: none;
	}

a.facebook:link,
a.linkedin:link,
a.rss:link,
a.instagram:link,
a.twitter:link,
a.homepage:link,
a.portfolio:link,
a.blogg:link {
	text-decoration: none;
	}
	
span.membersubtitle.instagram:hover, 
span.membersubtitle.twitter:hover, 
span.membersubtitle.homepage:hover, 
span.membersubtitle.portfolio:hover, 
span.membersubtitle.blogg:hover,
span.membersubtitle.facebook:hover,
span.membersubtitle.rss:hover,
span.membersubtitle.linkedin:hover,
a.link.facebook:hover,
a.link.linkedin:hover,
a.link.rss:hover,
a.link.instagram:hover,
a.link.twitter:hover,
a.link.homepage:hover,
a.link.portfolio:hover,
a.link.blogg:hover,
a.facebook:hover,
a.linkedin:hover,
a.rss:hover,
a.instagram:hover,
a.twitter:hover,
a.homepage:hover,
a.portfolio:hover,
a.blogg:hover {
	color: #666;
	text-decoration: none;
	}	
 
span.membersubtitle.instagram::before,
a.link.instagram::before,
a.instagram::before {
font-family: "Font Awesome 5 Brands"; 
	content: "\f16d";
	}
	
span.membersubtitle.linkedin::before,
a.link.linkedin::before,
a.linkedin::before {
font-family: "Font Awesome 5 Brands"; 
	content: "\f08c";
	}

span.membersubtitle.twitter::before,
a.link.twitter::before,
a.twitter::before {
	font-family: "Font Awesome 5 Brands"; 
	content: "\f099";
	}

span.membersubtitle.homepage::before,
a.link.homepage::before,
a.homepage::before {
	font-family: "Font Awesome 5 Pro";
	content: "\f0ac";
	}

span.membersubtitle.portfolio::before,
a.link.portfolio::before,
a.portfolio::before {
	font-family: "Font Awesome 5 Pro";
	content: "\f03e";
	}

span.membersubtitle.blogg::before,
a.link.blogg::before,
a.blogg::before {
	font-family: "Font Awesome 5 Pro";
	content: "\f108";
	}

span.membersubtitle.facebook::before,
a.link.facebook::before,
a.facebook::before {
	font-family: "Font Awesome 5 Brands";
	content: "\f082";
	}

span.membersubtitle.rss::before,
a.link.rss::before,
a.rss::before {
	font-family: "Font Awesome 5 Pro";
	content: "\f09e";
	}

.memberpic span#no-pic::before,
span#no-pic::before {
	content: "\f2bd";
	font-family: "Font Awesome 5 Pro";
	color: #ccc;
	position: relative;
	}		
	
.memberpic span#no-pic::before {
	font-size: 95px;
	font-weight: 600;
	}

span#no-pic::before {
	font-size: 32px;
	font-weight: 600;
	top: 10px;
	}	

/* headings */

h2, 
.indexdocumentlist .articlesummary h1,
.document .product-name h2, 
.reviewobjectinfo h1,
#forumtools-listlatest #forumlistlatesttable td a:link,
.adflow .event-author,
#index div.document-teaserlist h2, 
div.document-teaserlist h2, 
.compact.wphoto .product .product-name a,
.mainstage .fsmissuebox h2,
h1.instagram {
	font-family: 'Open Sans', sans-serif;
	font-size: 17px;
	margin: 0;
	padding: 3px 0px 3px 0px;
    text-decoration: none;
    font-weight: 700;
    margin-bottom: 10px;
    /* letter-spacing: -0.37px; */
    line-height: 1.2;
    color: #222;
	}
	
div.document-teaserlist h2 {
	display: inline-block;
	}

h1.instagram::before {
	content: "\f16d"; 
	font-family: "Font Awesome 5 Brands"; 
	padding-right: 12px;
	font-weight: 700;
	}
	
		
.col-n .indexdocumentlist h2 a {
	font-size: 24px;
	}

/* tables - table rows */

.main table,
.col-wrapper table.striped {
	width: 100%;
	}
	
.main table.radio-set {
	width: auto;
	}	
	
.main table.radio-set {
	width: 100%;
	}	
	
.form {}	

.main table.striped.datalist tr:hover {
	background-color: #f2f2f2;
	}

.main table tr td {
	padding: 10px 0px 10px 5px;
	}
	
.main #document-cols table tr td {
	border-bottom: 1px solid #ccc;
	padding: 10px;
	}
	
.main #document-cols table tr td img {
	width: 100%;
	height: auto;
	text-align: center;
	}	

table.datalist.striped {
	width: 100%;
	}
	
.main table.striped tr td,
.noflow table.striped tr td, 
.main table.datatable tr td,
.col-wrapper table.striped tr td {
	padding: 8px 5px 8px 5px;
	border-bottom: 1px solid #ddd;
	font-family: 'Roboto';
    font-size: 13px;
	line-height: 1.4;
	vertical-align: middle;
	}

.main table.stripedrow tr {
	font-size: 15px;
	line-height: 25px;
	}

.main table.stripedrow tr td {
	font-weight: normal;
	}

.main table.stripedrow tr:hover {
	background-color: #f7f7f7;
	}
		
#forum .main table tr td {
	border-bottom: 0px solid #f7f7f7;
	padding: 3px;
	}	

#forum .main table tr td.tcat {
	background-color: #f2f2f2;
	padding: 10px;
	margin-bottom: 20px;
	}
	
#forum .main table tr td.tcat {
	background-color: #fff;
	color: #fff;
	padding: 10px;
	margin-bottom: 20px;
	}	
	
#forum .main table tr td#fs_adj_forumhome.tcat {
	background-color: #222;
	}	
	
#forum .main table tr td#fs_adj_forumhome.tcat a {
  color: #fff;
	}	

#forum .main table tr td.tcat a {
	font-size: 12px;
	color: #222;
	}
	
#forum .main table tr td.tcat a::before {
	content: "\f005";
	font-family: "Font Awesome 5 Pro";
	font-size: 18px;
	position: relative;
	top: 2px;
	padding-right: 5px;
	color: #FFD700;
	text-decoration: none;
	}	
	
.main table.aoform.aoform-vertical tr td,
.main table.aoform.aoform-horizontal tr td {
	padding: 0px 0px 10px 0px;
	}	
	
.main table.striped > tr:nth-child(even),
.main table.striped.datalist tr:nth-child(even) {
	}

.main table.striped > tbody + tbody:nth-child(even) {
	}

.main table.aoform.aoform-vertical tr, 
.main table.aoform.aoform-horizontal tr {
	/* background: #fff; */
	}
	
.main table.datatable tr td {
	border-right: 1px solid #ccc;
	text-align: right;
	padding: 5px 10px 5px 10px;
	}

.main table tr td.alert {
	background-color: #e8004d !important;
    font-weight: 700;
	}
	
.main table tr td:first-child {
	padding-left: 10px;
	}

.main table.datatable tr td:first-child {
	width: 90px;
	}	

/* OVERDUE OVERLAY */	
	
.overlay-message {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.85);
	z-index: 2000;
 }
.overlay-message > p {
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 font-size: 20px;
	 color: #000;
	 transform: translate(-50%,-50%);
	 -ms-transform: translate(-50%,-50%);
	 background-color: #f7f7f7;
	 padding: 50px;
	 font-size: 14px;
	 border-radius: 5px;
 }
 
.overlay-message a { color: #000; }	
	
/* ITEMS */

.eventflow_old {
	width:100%;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;	
}

.product-list-wrapper, 
.fsmissuebox-wrapper,
.item-list-wrapper,
.eventflow,
.document .commentslist, 
.commentslist, 
.section-groups .eventflow .event-info,
.item-list-wrapper.critique,
.item-list-wrapper.grouplist {
	width: 100%;
	box-sizing: border-box;
	background-color: #f7f7f7;
	padding: 10px;
	}
	
.item-list-wrapper {
	background-color: #f7f7f7;
	padding: 10px;
	}	
	
.product-list-wrapper, 
.fsmissuebox-wrapper,
.item-list-wrapper,
.eventflow,
.section-groups .eventflow .event-info {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: stretch;
	align-items: stretch;
	}

.eventflow.wide,
.item-list-wrapper.wide {
	/* max-width: 640px; */
	width: 100%;
	padding: 0px;
	margin-top: 20px;
	}

.item-list-wrapper.wide.critiquecomments {
	background-color: #f7f7f7;	
	}
	
.col-wrapper {
	padding: 20px;
	background-color: #f7f7f7;
	margin-right: 20px;
	}
	
.wide-content .col-wrapper h2 {
	color: #000;
	margin-top: 0px;
	padding-top: 0px;
	}		

.eventflow_old > .event {
	order: 0;
    flex: 0 1 auto;
    align-self: auto;
    flex-grow: 1;
	overflow: hidden;
    box-sizing: border-box;
    width: calc(100% / 1);
    float: left;
    margin-right: 10px;
    margin-bottom: 15px;
    background-color: #fff;
    border: 1px solid #e3e3e3;
    padding: 15px;
    border-radius: 3px;
	}
	
.product-list-wrapper .product {
	margin: 0px 0px 0px 0px;
	padding: 15px 0px 15px 0px;
	box-sizing: border-box; 
	background-color: #fff;
	border-radius: 0px;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	text-decoration: none;
	font-weight: 400;
	line-height: 1.4;
	font-weight: normal;
	color: #141414;
	}
	
.product-list-wrapper .product,
.item-list-wrapper .item,
.eventflow > .event {
	order: 0;
	flex: 0 1 auto;
	align-self: auto;
	flex-grow: 0;
	}		

.section-blogs .eventflow > .event,
#groups-sportfoto-challenge-index.section-groups .eventflow > .event {
	width: calc(100% / 2 - 10px);
	}

.eventflow.onecol > .event {
	width: 100%;
	}


body#index .eventflow > .event {
	background-color: #fff;
	padding: 0px;
	}

.eventflow > .event {
	}

.eventflow .event .event {
  	clear: both;
  	overflow: hidden;
  	margin: 0;
  	padding-top: 8px;
  	border-left: 1px solid #e3e3e3;
	}

.eventflow .event-thumbnail,
.item-list-wrapper .item-thumbnail {
  	min-height: 50px;
  	overflow: hidden;			  
  	float: left;
  	width: 100%;
  	margin-bottom: 10px;
  	box-sizing: border-box;
	}

#member-guestbook-index .eventflow .event-thumbnail,
#member-guestbook-index .item-list-wrapper .item-thumbnail {
	width: 20%;
	max-width: 60px;
	}
	
.section-groups .sidebar-nav .eventflow > .event,
.section-groups .sidebar-nav .item-list-wrapper > .item {
	width: 100%;
	}

.section-blogs .eventflow .event-thumbnail,
.section-blogs .item-list-wrapper .item-thumbnail {
  	width: 60px;
    margin-right: 10px;
    height: 60px;
	}	

.section-groups .eventflow .event-thumbnail,
.section-groups .item-list-wrapper .item-thumbnail {
  	width: 5%;
  	display: none;
	}

.eventflow .event.critique .event-thumbnail,
.item-list-wrapper .item.critique .item-thumbnail {
  	min-height: 50px;
  	overflow: hidden;			  
  	float: left;
  	width: 20%;
  	margin-bottom: 10px;
  	margin-right: 10px;
	}

.eventflow .event.critique .event-thumbnail img,
.item-list-wrapper .item.critique .item-thumbnail img {
	border-radius: 0px;
	background-color: #fff;
	padding: 0px;
	width:100%;
	height: auto;
	box-sizing: border-box;
	border: 0px;
	}	

.section-groups .eventflow #critique.event-thumbnail,
.section-groups .item-list-wrapper #critique.item-thumbnail {
	width: 100%;
	}

.eventflow #critique.event-thumbnail img,
.item-list-wrapper #critique.item-thumbnail img {	  
  	width: 100%;
  	height: auto;
  	border-radius: 0px;
	}
	

.eventflow .event-thumbnail img,
.item-list-wrapper .item-thumbnail img {
	border-radius: 100px; 
	border: 2px solid #fff;
    box-sizing: border-box;
    max-width: 60px;
	}

.eventflow .event-info,
.item-list-wrapper .item-info {
	float: right;
	width: 100%;
	/* margin-bottom: 10px; */
	box-sizing: border-box;
	}
	
.eventflow .event.critique .event-info,
.item-list-wrapper .item.critique .item-info {
	width: calc(80% - 10px);
	}	
	
.eventflow .event.critique .event-actions,
.item-list-wrapper .item.critique .item-actions {
	width: calc(80% - 10px);
	float: right;
	}	
	
.eventflow .event.critique .event-actions .event-report,
.item-list-wrapper .item.critique .item-actions .item-report {
	float: right;
	}	

.section-groups .eventflow .event-info,
.section-groups .item-list-wrapper .item-info {
	float: right;
	width: 90%;
	margin-bottom: 10px;
	box-sizing: border-box;
	}

#member-guestbook-index .eventflow .event-info,
#member-guestbook-index .item-list-wrapper .item-info {
	width: 80%;
	float:none;	
	display:inline-block;
	}

.section-blogs .eventflow .event-info,
.section-blogs .item-list-wrapper .item-info  {
  	width: 100%;
	}

.section-blogs .eventflow .event-info img,
.section-blogs .item-list-wrapper .item-info img {
  	width: 100%;
  	height: auto;
  	margin-bottom: 5px;
	}

.section-groups .section-comments .eventflow .event-info,
.section-groups .section-comments .item-list-wrapper .item-info {
  	width:100%;
	}

.section-groups .eventflow .event-teaser img,
.section-groups .item .item-teaser img,
.item-list-wrapper .item .item-info-teaser img {
	width: 100%;
	}

.eventflow.wide .event-info,
.item-list-wrapper .item {
  	width: 100%;
	}
	
.item-list-wrapper.wide .item {
	width: 100%;
	}	
	
.item-list-wrapper .item.eventgroupinfo {
	width: 100%;
	border: 0px;
	padding: 0px;
	}	

.item-list-wrapper.wide.eventlist {
	border: 0px;
	} 

.item-list-wrapper.wide.eventlist .item-list-wrapper .item {
	width: calc(100% / 1 - 10px);
	margin-right: 10px;
	text-align: left;
	}
	
.item-list-wrapper.productlist .item {
	width: calc(100% / 5 - 10px);
	margin-right: 10px;
	text-align: center;
	}
	
.item-list-wrapper.challenge .item {
	width: calc(100% / 5 - 10px);
	margin-right: 20px;
	text-align: center;
	padding: 0px;
	position: relative;
	min-width: 350px;
	background-color: #333;
	}		
	
.item-list-wrapper.two-col .item,
#twocol.item-list-wrapper .item {
	width: calc(100% / 2 - 50px);
	margin-right: 20px;
	}	
	
.item-list-wrapper.three-col .item {
	width: calc(100% / 2 - 20px);
	margin-right: 20px;
	}		
		
.item-list-wrapper.blog .item {
	width: calc(100% / 2 - 50px);
	margin-right: 20px;
	}
	
.item-list-wrapper.blog .item:nth-child(even),
.item-list-wrapper.fsmissue .item:nth-child(odd),
#twocol.item-list-wrapper .item:nth-child(odd),
.item-list-wrapper.two-col .item:nth-child(even) {
	margin-right: 0px;
	}

.item-list-wrapper .item.eventinfo.odd.nospace,
.item-list-wrapper .item.eventinfo.even.nospace {
	color: #ccc;
	}	
		
.item.eventinfo .date,
.item.eventinfo .tickets,
.item.eventinfo .location {
	float: left; 
	margin-right: 20px;
	}

.item.eventinfo .date::before,
.item.eventinfo .tickets::before,
.item.eventinfo .location::before {
	font-family: "Font Awesome 5 Pro";
	font-size: 18px;
	position: relative;
	top: 2px;
	padding-right: 10px;
	color: #222;
	text-decoration: none;
	}	

.item.eventinfo .date::before {
	content: "\f073";
	}				
	
.item.eventinfo .location::before {
	content: "\f14e";
	}

.item.eventinfo .tickets::before {
	content: "\f3ff";
	}
			
.eventflow .pictureshortinfo {
	font-family: "Open Sans",sans-serif;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	}

.eventflow .pictureshortinfo a {
	text-decoration: none;
	}
 
.event-replies {
	padding-left: 30px;
	}

.eventflow .event-title {
	}

.eventflow .event-actions {
	float:left;
	}

.eventflow .event-author {
  font-weight: bold;
}

.eventflow .event-summary a.summary,
.eventflow .event-summary a.summary:link,
.eventflow .event-summary a.summary:visited,
.eventflow .event-summary a.summary:hover,
.eventflow .event-summary a.summary:focus {
  	text-decoration: none;
	}

.eventflow .event-summary a.summary:visited {
  	color: black;
	}

.eventflow .event-type {
  	float: left;
  	color: #FF9600;
  	text-transform: uppercase;
  	font-size: 75%;
  	margin-right: 20px;
	}

.eventflow .event-timestamp {
  	float: left;
  	color: #ccc;
	}

.product-list-wrapper .pagectl , 
.fsmissuebox-wrapper .pagectl ,
.item-list-wrapper .pagectl {
    flex: 2 0 100%;
}
	
.item-list-wrapper.productlist .item {
	width: calc(100% / 5 - 10px);
	margin-right: 10px;
	}	
	
.item-list-wrapper.notification .item,
.item-list-wrapper.classifiedad .item,
.item-list-wrapper.critique .item,
.item-list-wrapper.guestbook .item {
	width: 100%;
	}
	
.item-list-wrapper.notification .item:hover {
	}	
	
.item-list-wrapper.notification .item,
.item-list-wrapper.blog .item,
.item-list-wrapper.guestbook .item,
.item-list-wrapper.classifiedad .item,
.item-list-wrapper.critique .item,
.item-list-wrapper.articlecomment .item,
.item-list-wrapper.critiquecomments .item,
.item-list-wrapper.review .item {}
	
.item-list-wrapper .item {	
	margin-bottom: 5px;
	margin-bottom: 15px;
	padding-bottom: 15px;
	background-color: #fff;
	padding: 20px 20px 20px 20px;
	}	
	
.item-list-wrapper .item:last-child {
	margin-bottom: 0px;
	}
	
.item-list-wrapper.articlecomment .item,
.item-list-wrapper.review .item {
	padding-bottom: 10px;
	}	
	
.item-list-wrapper.calender .item {
	width: calc(100% / 3 - 10px);
	min-width: 175px;
	margin-right: 10px;
	}	

.item-list-wrapper.notification .item .preview {
	width: 100%;
	max-width: 20%;
	float: right;
	}	

.item-list-wrapper.notification .item .commentbox {
	width: 100%;
	max-width: calc(80% - 20px);
	float: left;
	}
	
.item-list-wrapper.notification .item .commentbox .comment {
	padding: 10px 0px 0px 0px;
	font-style: italic;
	}
	
.item-list-wrapper.notification .item.toself .commentbox .comment {
	padding: 0px 0px 0px 20px;
	}
	
.item-list-wrapper.notification .item #newphoto-repeated.commentbox {
	max-width: 100%;
	margin-bottom: 10px;
	}		
	
.item-list-wrapper.notification .item .commentbox .photoshare {
	width: 30px;
	float: right;
	}	

.item-list-wrapper.calender .item .item-thumb img,
.item-list-wrapper.calender .item .item-teaser img,
.item-list-wrapper.productlist .item .product-image img,
.item-list-wrapper.notification .item .preview img {
	width: 100%;
	height: auto;
	}
	
.item-list-wrapper.notification .item .preview.newphoto-repeated {
	padding: 0px 0px 10px 10px;
	width: calc(100% / 5 - 40px);
	}			

.item-list-wrapper.notification .item .preview.newphoto-repeated img {
	
	}

.item-list-wrapper.productlist .item .product-image {
	min-height: 200px;
	}
	
.item-list-wrapper.productlist .item {
	width: calc(100% / 5 - 10px);
	margin-right: 10px;
	text-align: center;
	border: 1px solid #f3f3f3;
	margin-bottom: 10px;
	}
	
/* MEMBERPIC */

.memberpicture-thumbnail span.defaultmemberpic::before {
	  content: "\f2bd"; 
	  font-family: "Font Awesome 5 Pro"; 
	  padding:4px;
	  font-size: 52px;
	  font-weight: 600;
	  position: relative;
	  color: #eee;
	  }	

#member-list .memberpicture-thumbnail span.defaultmemberpic::before {
	  bottom: -20px;
	  }
	
	
/* BANNER */


.banner-partner-zone-top-wrapper {
	width: 100%;
	background-color: #000;
	box-sizing: border-box;
	padding-top: 10px;
	}
	
.banner-partner-zone-top-wrapper-stage {
	max-width: 1300px;
	margin: auto;
	height: 150px;
	}
	
.banner-partner-zone-top-wrapper .heading {
	color: #000;
	font-size: 20px;
	width: 100%;
	text-align: left;
	border-top: 1px solid #222;
	margin-top: 5px;
	}
	
.banner-partner-zone-top-wrapper .heading p {
	font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    text-decoration: none;
    letter-spacing: -0.37px;
    line-height: 1.2;
    color: #666;
    text-transform: none;
    padding-bottom: 0px;
	}

.banner-partner-zone-top-wrapper .partner-logo-wrapper {
	width: 100%;
	margin-right: 10px;
	}
	
.banner-partner-zone-top-wrapper .partner-logo-wrapper .partner-logo {
	display: inline-block;
	margin-right: 20px;
	}
	
.presented-by {
	width: 100%;
	display: inline-block;
	}

.presented-by p {
	text-align: right;
	font-size: 11px;
	}		

/* input textarea */

input.disabled {
	border: 0px;
	background-color: #e9e9e9;
	color: #999;
	}

/* alerts infobox etc */

.alertbar {
	background-color: #e8004d;
	text-align: center;
	color: #fff;
	padding: 15px;
	font-weight: 600;
	}	
	
.alertbar a {
	color: #fff;
	}	

/* notification comments etc */

/* buttons */

.buttonrow {
	margin: 0px 0px 20px 0px;
	display: inline-block;
	float: left;
	width: 100%;
	}
	
.item-shortinfo .buttonrow,
.comment .buttonrow {
	margin: 10px 0px 0px 0px;
	}	
	
.buttonrow.std {
	margin: 10px 10px 10px 20px;
	} 	

a#buy.slimbutton {
	background-color: #0090e3;
	color: white;
	border: #0090e3;
	width: 100%;
	padding: 20px;
	-webkit-appearance: none;
	}

.infobox a.slimbutton, 
.infobox input.slimbutton, 
.infobox a.slimbutton:link, 
.functionbox a.slimbutton, 
.functionbox a.slimbutton:link,  
.documentsidebar a.slimbutton, 
.documentsidebar a.slimbutton:link {
	-webkit-appearance: none;
	}

input[type="submit"] {
	width:auto; 
	min-width: 150px;
	}

a.slimbutton:hover, 
input.slimbutton:hover, 
input.button:hover {
	background-color: #f7e37c; 
	border: 1px solid #f7e37c; 
	background-color: #b7b7b7; 
	border: 0px solid #e3e8e9; 
	color: black;
	}

a.slimbutton:disabled,
button.slimbutton:disabled {
	color: #ccc;
	}

button.slimbutton,
a.slimbutton,
body#forum a.fs_adj_postbitwrapper_multireply, 
body#forum a.fs_adj_postbitwrapper_editlink, 
body#forum a.fs_adj_postbitwrapper_replylink, 
body#forum a.fs_adj_forumdisplay_slimbutton, 
body#forum a.fs_adj_showthread_slimbutton, 
a.fs_adj_postbitwrapper_editlink, 
a.fs_adj_postbitwrapper_replylink,
/* .col-m input.slimbutton, .col-m input.button, .col-m a.slimbutton, .col-m a.slimbutton:link, */ 
input.slimbutton, 
input.button, 
a.slimbutton, 
a.slimbutton:link, 
input[type="submit"], 
input.slimbutton,
input.button,
#membershop-plus-extra .slimbutton,
.functionmenu.hivis li,
input.button.expanded, 
a.button.expanded,
div#upload-new a, 
div#list-docparts a:link {
	font-family: 'Open Sans', sans-serif;
	line-height: 1.2;
	font-weight: 500;
	display: inline-block;
	vertical-align: middle;
	text-decoration: none;
	margin: 10px 5px 0px 0px; 
	padding: 12px 18px 12px 18px;
	min-width: 50px;
	text-align: center;
	-webkit-appearance: none;
	box-sizing: border-box;
	background: #fff;
	font-size: 14px;
	border-radius: 4px;
	color: #222;
	border: 0px solid #ccccd1;
	background-color: #f7f7f7;
	background-color: #eef1f2;
	background-color: #eaeaea;
	width: auto;
	}
	
a.slimbutton {
	font-family: 'Open Sans', sans-serif;
	line-height: 1.2;
	font-weight: 600;
	display: inline-block;
	vertical-align: middle;
	text-decoration: none;
	margin: 10px 5px 0px 0px; 
	padding: 10px;
	min-width: 50px;
	text-align: center;
	-webkit-appearance: none;
	box-sizing: border-box;
	background: #fff;
	font-size: 13px;
	border-radius: 4px;
	color: #222;
	border: 1px solid #ccccd1;
	background-color: #f7f7f7;
	width: auto;
	padding: 15px 18px 15px 18px;
	background-color: #eef1f2;
	border: 0px solid #ccccd1;
	}	
	
input.slimbutton.remove {
	float: right;
	color: #999;
	}	

a.slimbutton.highvis,
a.slimbutton.buy.highvis, 
body.large .billboard-wrapper a.slimbutton.highvis, 
input.slimbutton.highvis,
.functionmenu.hivis li ,
.fsm-rating a.slimbutton.buy.highvis {
	border: 0px solid #ffd31b; /* satt till 0px */
	background-color: #ffd31b; 
	color: black;
	max-width: 100%;
 	} 
 	
a.slimbutton.cta, 
body.large .billboard-wrapper a.slimbutton.cta, 
input.slimbutton.cta,
button#getaddrbtn {
 	border: 1px solid #000;
    color: #fff;
    border-radius: 0px;
    padding: 14px 30px 14px 30px;
    background-color: #000;
    font-weight: normal;
    font-size: 16px;
    width: 100%;
    max-width: 450px;
	}
	
button#getaddrbtn {
	margin-top: 20px;
	margin-bottom: 20px;
	}	

a.slimbutton.cta.small, 
body.large .billboard-wrapper a.slimbutton.cta.small, 
input.slimbutton.cta.small {
	font-size: 12px;
	padding: 5px 10px 5px 10px;
	margin: 0px;
	}	

a.slimbutton.cta.small.right, 
body.large .billboard-wrapper a.slimbutton.cta.small.right, 
input.slimbutton.cta.small.right {
	float: right;
	}
	
 a.slimbutton.highvis.wide,
 a.slimbutton.cta.wide {
 	width: 100%;
 	max-width: 350px;
 	}		
 		
.rating-wrapper .slimbutton,
.commentsection input.slimbutton,
.rating-wrapper a.slimbutton, 
.rating-wrapper a.slimbutton:link {
    text-decoration: none;
	margin: 0px;
	}	
	
.rating-wrapper .slimbutton.login,
.commentsection input.slimbutton.login,
.rating-wrapper a.slimbutton.login, 
.rating-wrapper a.slimbutton.login:link {
	max-width:100%;
	width:100%;
	margin: 0px;
	}	

.col-m input.slimbutton, 
.col-m input.button, 
.col-m a.slimbutton, 
.col-m a.slimbutton:link {
	}

a.slimbutton-sml, 
a.slimbutton.sml, 
.slimbutton.sml,
.slimbutton.sml.cta,
#topbar-cta .slimbutton.sml.cta {
	font-size: 12px;
	font-weight: 400;
	color: #333;
	margin: 5px 5px 0px 0px;
	padding: 4px 6px 4px 6px;
	background: #fff;
	border: 1px solid #ccc;
	text-align: center;
	}

#topbar-cta .slimbutton.sml.cta, 
.section-membershop #topbar-cta .slimbutton.sml.cta {
	margin: 2px 0px 0px 6px;
	letter-spacing: 0.6px;
	width: 100%;
	}

#cart-toshop-btn.slimbutton {
	background-color: #000;
	color: #fff;
	font-weight: 700;
	}

table a.slimbutton-sml, 
table a.slimbutton.sml, 
table slimbutton.sml {
	margin: 0px;
	}

a.slimbutton-sml.product-want, 
a.slimbutton-sml.product-have {
	display:none;
	}

a.slimbutton-sml.highvis {
	border: 1px solid #ffd31b;
	background-color: #ffd31b;
	}

a.slimbutton-sml.active {
  	border: 1px solid #f2f2f2;
	background-color: #f2f2f2;
	color: #999;
	}

a.slimbutton.follow, 
a.slimbutton.follow:link  {
	border: 1px solid #000;
  	background-color: #000;
  	color: #fff;
	float: right;
	bottom: 80px;
	}

a.slimbutton.follow:hover {
	background-color: #000;
	border: 1px solid #000;
	color: #fff;
	}
	
a.slimbutton:hover {
	background-color: #b7b7b7; 
	border: 0px solid #e3e8e9; 
	}	

a.slimbutton.sml:hover {
	border: 1px solid #ccc; 
	background-color: #ccc;
	text-decoration: underline;
	}

a.slimbutton.highvis:hover,
input.slimbutton.highvis:hover {
	background-color: #fdde5c;
	border: 0px solid #ffd31b; /* satt till 0px */
	color: #000;
	}

a.slimbutton.unfollow,
a.slimbutton.unfollow:link,
a.slimbutton.unfollow:visited,
a.slimbutton.unfollow:hover,
a.slimbutton.unfollow:active {
	float: right;
	}

a.slimbutton.unfollow:hover {
	}

.slimbutton.disabled {
	background: #ccc;
	color: #aaa; 
	border: 0px solid #ccc;
	}

.shop-product-info .productsum {
	font-weight: 900;
	font-size: 46px;
	margin-bottom: -12px;
	text-align: left;
	color: #333;
	display:inline-block;
	width: 100%;
	margin: auto;
	line-height: 1.4;
	}

.shop-product-info span.kitinfo, 
span.kitinfo {
	display: block;
	text-align: left;
	color: #e8004d;
	font-size: 14px;
	margin-top: 10px;
  	}
  	
span.kitnormal {
 	display: none;
 	} 	

.slide.product-wrapper span.kitinfo {
  	background: #e8004d;
  	color: #fff;
  	padding: 6px 4px 6px 4px;
  	border-radius: 3px;
  	position: absolute;
    bottom: 20px;
  	}

.shop-product-info span.kitinfo span.kittotal,
span.kitinfo span.kittotal {
	color: #000;
	text-decoration: line-through;
  	}
  	
.shop-product-info span.kitinfo span.kitpercentage,
span.kitinfo span.kitpercentage {
	font-weight: 500;
	border: 1px solid #ff9e48;
	background-color: #ff9e48;
	color: #000;
	font-size: 11px;
	padding: 2px 4px 2px 4px;
	margin-left: 10px;
  	}

span.votesum {
  background: #fff;
  color: #ccc;
  border-radius: 3px;
  }
  
span.votesum a {
	color: #ccc;
	font-weight: 700;
	text-decoration: none;
	}  

body.large .shop-product-info input.slimbutton, 
.shop-product-info input.slimbutton, 
.shop-product-info input.button,
.shop-product-info a.slimbutton, 
.billboard a.slimbutton, 
body.large .billboard-wrapper a.slimbutton,
a.checkout-login-btn.slimbutton,
a.buy.slimbutton, 
a.buy.slimbutton:link, 
a.buy.slimbutton:visited, 
a.buy.slimbutton:active,
.addtocart-btn.slimbutton,
#membershop-plus-extra .slimbutton,
#membershop-magasin-extra .slimbutton,
#topbar-shopcart-buttons a#topbar-shopcart-checkoutbtn.slimbutton,
#cart-toshop-btn.slimbutton,
.slimbutton.buy {
	background-color: #171717;
    color: white;
    border: 1px solid #171717;
    text-transform: none;
    width: 100%;
    border-radius: 1px;
    font-weight: 700;
    font-size: 15px;
    opacity: 1;
    line-height: 20px;
    transition: color 0.2s ease 0s;
    letter-spacing: 0.6px;
    max-width: 440px;
	}
	
#membershop-plus-extra .campaignBox .slimbutton,
#membershop-magasin-extra .campaignBox .slimbutton,
#membershop-plus .billboard .slimbutton {
	}
	
#membershop-plus .billboard .slimbutton {
	}	

a.buy.slimbutton:hover,
.shop-product-info input.slimbutton:hover,
#topbar-shopcart-buttons a#topbar-shopcart-checkoutbtn.slimbutton {
	background-color: #373737;
 	}
 
.fotosidan-plus-ikon::before {
	content: "\f005";
	font-family: "Font Awesome 5 Pro";
	font-size: 18px;
	position: relative;
	top: 2px;
	padding-right: 5px;
	color: #FFD700;
	text-decoration: none;
  	}
    
.fotosidan-plus-ikon a:link::before {
	text-decoration: none;
  	}  

ul.portfolio-pickfile li:before { 
	content: "\f114";
	font-family: "Font Awesome 5 Pro";
	font-size: 16px;
	}
	
/* navigation */

#photos.category-label a, #news.category-label a {
	text-decoration: none;
	}

.sidebar-nav {
	padding: 0px 10px 10px 0px;
	}
	
.sidebar-nav h2, 
h2.membersubtitle,
.profilewidebox h2,
.infobox h2,
#magasin-index .sidebar-wrapper h2,
.sidebar-nav .toggle-block h3 {
	font-family: 'Open Sans', sans-serif;
    /* font-size: 12px;
    letter-spacing: 0.91px;
    line-height: 16px;
	text-transform: uppercase; */
    color: #000;
    text-decoration: none;
    font-weight: 600;
    line-height: 1.4;
    padding: 10px 10px 8px 0px;
    border-bottom: 1px solid #ccc; 
    margin-bottom: 10px;
    margin-top: 0px;
    background-color: #fff;
	}
	
#magasin-index .mainstage h2 {
	}	

.functionmenu {
	padding: 10px; 
	margin: 0px 0px 30px 0px; 
	}
	
.functionmenu.hivis {
	padding: 0px;
	}	
	
.sidebar-nav .functionmenu {
	padding: 0px; 
	}

.functionmenu ul {
	padding: 0px; 
	margin: 0px;
	}

.functionmenu li {
	list-style-type: none;
	margin: 0px;
	padding: 8px 0px 0px 0px; 
	}

.functionmenu.hivis li {
	}

.functionmenu.hivis li a {
	}

.functionmenu li:hover {
	}

.functionmenu li.current a {
	font-weight: bold;
	}

.functionmenu li a {
	}

.functionmenu li a:hover {
	color: #ff9600;
	}

.functionmenu.hivis li a:hover {
	color: #999;
	}

.functionmenu li a:visited {
	color: black;
	}

ul li.current,ul li.active {
	font-weight: bold;
	}
	
/* .sponsored */

.sponsored-push a img {
	width: 100%;
	height: auto;
	}
	
/* heading */

#sidebar-articleset h3, 
#sidebar-relateddocs h2, 
#sidebar-subdocs h2, 
#sidebar-links h2, 
#sidebar-text h3, 
#sidebar-products h3, 
#document-products h3, 
#sidebar-forum h3,
.documentsidebar h3,
.product-list-wrapper h3,
.campaignContainer h3 {
	font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    letter-spacing: 0.91px;
    line-height: 16px;
    color: #000;
    text-decoration: none;
    font-weight: 300;
    text-transform: uppercase;
    padding: 12px 12px 10px 12px;
    border: 1px solid black;
    display: inline-block;
    margin-bottom: 10px;
    margin-top: 0px;	
	}

#sidebar-text h3,
#sidebar-articleset h3,
.documentsidebar h3,
.product-list-wrapper h3 {
	padding-left: 0px;
	border: 0px;
	border-bottom: 4px solid #222;
	font-weight: 500;
	}

/* layout */

.documentsidebar, .documentsidebar p, .mainstage .documentsidebar p {
  	font-family: 'Open Sans', sans-serif;
  	font-size: 14px;
    line-height: 22px;
  	font-weight: normal;
  	letter-spacing: 0px;
  	float: none;
  	padding: 0px 0px 5px 0px;
  	margin-bottom: 10px;
  	text-align: left;
	}
	
#sidebar-text, .sidebar-text a, #sidebar-forum a, .sidebarpart ul li a {
	padding: 0px;
	font-size: 14px;
	line-height: 22px;
	border: 0px solid #ededed;
	}	
	
.noticebox,
.important,
.information {
	border: 1px solid #eecbd9;
	background-color: #eecbd9;
	padding: 5px 10px 5px 10px;
    width: 100%;
    font-size: 13px;
    box-sizing: border-box;
	display: inline-block;
	margin-top: 20px;
	}
	
.information a {
	text-decoration:underline;
	}
	
/* pageflip */

#pf-pagerin {
	margin-top: 0px !important;
	}	
	
/* BS4 compatible grid */
/*!
 * Favorite Grid v.1.0
 * Author : Ali Norouzi ( https://github.com/anorouzii )
 * Licensed under MIT ( https://github.com/anorouzii/favorite-grid/blob/master/LICENSE )
 */
/************* Variables *************/
/************* Grid System Mixin (Column Generator) *************/
/************* Breakpoint Mixin *************/
/************* 2 type of container *************/
.container, .container *, .row, .row * {
    box-sizing: border-box;
}

.container {
    padding: 0 10px;
    margin: 0 auto;
    width: 100%; }
@media only screen and (min-width: 768px) {
    .container {
        max-width: 720px; } }
@media only screen and (min-width: 992px) {
    .container {
        max-width: 960px; } }
@media only screen and (min-width: 1200px) {
    .container {
        max-width: 1170px; } }
.container-fluid {
    width: 100%;
    padding: 0 10px;
    margin: 0 auto; }


/************* Row *************/
.row {
    margin: 0 -10px;
    display: flex;
    flex-wrap: wrap; }
.row [class^="col"] {
    position: relative;
    min-height: 1px;
    padding: 0 10px; }

/************* Default column *************/
.col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

.col-1 {
    flex: 0 0 8.33333%; }

.col-2 {
    flex: 0 0 16.66667%; }

.col-3 {
    flex: 0 0 25%; }

.col-4 {
    flex: 0 0 33.333333%;
    max-width: 33.33333%; }

.col-5 {
    flex: 0 0 41.66667%; }

.col-6 {
    flex: 0 0 50%; }

.col-7 {
    flex: 0 0 58.33333%; }

.col-8 {
    flex: 0 0 66.666667%;
    max-width: 66.66667%; }

.col-9 {
    flex: 0 0 75%; }

.col-10 {
    flex: 0 0 83.33333%; }

.col-11 {
    flex: 0 0 91.66667%; }

.col-12 {
    flex: 0 0 100%; }

/************* XLarge Device column *************/
@media only screen and (min-width: 1200px) {
.col-xl {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}
    .col-xl-1 {
        flex: 0 0 8.33333%; }
    .col-xl-2 {
        flex: 0 0 16.66667%; }
    .col-xl-3 {
        flex: 0 0 25%; }
    .col-xl-4 {
        flex: 0 0 33.33333%; }
    .col-xl-5 {
        flex: 0 0 41.66667%; }
    .col-xl-6 {
        flex: 0 0 50%; }
    .col-xl-7 {
        flex: 0 0 58.33333%; }
    .col-xl-8 {
        flex: 0 0 66.66667%; }
    .col-xl-9 {
        flex: 0 0 75%; }
    .col-xl-10 {
        flex: 0 0 83.33333%; }
    .col-xl-11 {
        flex: 0 0 91.66667%; }
    .col-xl-12 {
        flex: 0 0 100%; } }

/************* Large Device column *************/
@media only screen and (min-width: 992px) {
.col-lg {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}
    .col-lg-1 {
        flex: 0 0 8.33333%; }
    .col-lg-2 {
        flex: 0 0 16.66667%; }
    .col-lg-3 {
        flex: 0 0 25%; }
    .col-lg-4 {
        flex: 0 0 33.33333%; }
    .col-lg-5 {
        flex: 0 0 41.66667%; }
    .col-lg-6 {
        flex: 0 0 50%; }
    .col-lg-7 {
        flex: 0 0 58.33333%; }
    .col-lg-8 {
        flex: 0 0 66.66667%; }
    .col-lg-9 {
        flex: 0 0 75%; }
    .col-lg-10 {
        flex: 0 0 83.33333%; }
    .col-lg-11 {
        flex: 0 0 91.66667%; }
    .col-lg-12 {
        flex: 0 0 100%; } }

/************* Medium Device column *************/
@media only screen and (min-width: 768px) {
.col-md {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

    .col-md-1 {
        flex: 0 0 8.33333%; }
    .col-md-2 {
        flex: 0 0 16.66667%; }
    .col-md-3 {
        flex: 0 0 25%; }
    .col-md-4 {
        flex: 0 0 33.33333%; }
    .col-md-5 {
        flex: 0 0 41.66667%; }
    .col-md-6 {
        flex: 0 0 50%; }
    .col-md-7 {
        flex: 0 0 58.33333%; }
    .col-md-8 {
        flex: 0 0 66.66667%; }
    .col-md-9 {
        flex: 0 0 75%; }
    .col-md-10 {
        flex: 0 0 83.33333%; }
    .col-md-11 {
        flex: 0 0 91.66667%; }
    .col-md-12 {
        flex: 0 0 100%; } }

/************* Small Device column *************/
@media only screen and (min-width: 480px) {
.col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

    .col-sm-1 {
        flex: 0 0 8.33333%; }
    .col-sm-2 {
        flex: 0 0 16.66667%; }
    .col-sm-3 {
        flex: 0 0 25%; }
    .col-sm-4 {
        flex: 0 0 33.33333%; }
    .col-sm-5 {
        flex: 0 0 41.66667%; }
    .col-sm-6 {
        flex: 0 0 50%; }
    .col-sm-7 {
        flex: 0 0 58.33333%; }
    .col-sm-8 {
        flex: 0 0 66.66667%; }
    .col-sm-9 {
        flex: 0 0 75%; }
    .col-sm-10 {
        flex: 0 0 83.33333%; }
    .col-sm-11 {
        flex: 0 0 91.66667%; }
    .col-sm-12 {
        flex: 0 0 100%; }
}

.bootstrap-example .row>.col, .bootstrap-example .row>[class^=col-] {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2); 
}

.bootstrap-example {
    box-sizing: border-box;
    padding: 15px;
}