/***********************************************
						INLINE ELEMENTS STYLES
***********************************************/
/*bold*/
.strong,
.b,
.a{
	font-weight: 700;
}
/*italic*/
.em,
.i,
.cite{
	font-style: italic;
}
/*all uppercase*/
.upper{
		text-transform: uppercase;
}
/*underline text*/
.u{
	text-decoration: underline;
}
/*anchor*/
.a{
	border-bottom:1px solid;
	cursor: pointer;
}
.grey{
	color: #aaa;
}
/***********************************************
						LISTS (UL, OL, DL)
***********************************************/
.ul,
.ol,
.dl{
	padding: 0.5em 1.5em;
	clear: both;
}
.ul li:before{
		content:'';
		display:inline-block;
		margin:0 11px 0 -19px;
		width:7px;
		height:7px;
		border:1px solid #999;
		border-radius:4px;
}
.ul li{
		padding:.25em 0 0 30px;
}
.ol li{
	 padding-left: 5px;
 }
.ol{
	list-style: decimal;
}
.dl dt{
	font-weight:600;
	color: #aaa;
}
.dl dd{
	padding:.25em 0 0 30px;
}
.dl dd:before{
	content:'—';
	display:inline-block;
	width:30px;
	height:14px;
	text-align:center;
	margin-left:-30px;
	color:#999;
}
/***********************************************
						SIMPLE BLOCK ELEMENTS
***********************************************/
.article-header{
	font-family: 'Source Sans Pro Semibold', sans-serif;
	font-weight: 600;
  overflow: hidden;
  border-bottom: 1px solid #eee;
  padding: 10px 0 5px;
  margin-bottom: 20px;
}
.p{
	padding:.5em 0;
	text-align: justify;
}
.indent{
	text-indent:30px;
}
/*middle(md) & small(sm) titles*/
.h-md, .h-sm{
		padding: 1em 0 .5em;
    font-family: 'Source Sans Pro Semibold', sans-serif;
    font-weight: 600;
}
.h-md{
    font-size: 24px;
}
.h-sm{
  font-size: 18px;
}
/*clear from float elements from both sides*/
.clearfix{
	clear: both;
}
/*is needed for parent with floated children*/
.h{
	overflow: hidden;
}
/*notes*/
/*
	- for simple small grey text use class="note"
	- for small grey text with * use class="note-marked-single"
	--------------------- with ** use class="note-marked-double"
 	--------------------- with *** use class="note-marked-triple"
*/
.note,
.note-marked-single,
.note-marked-double,
.note-marked-triple{
	color: #aaa;
	font-size: 12px;
}
.note-marked-single,
.note-marked-double,
.note-marked-triple{
	position: relative;
}
.note-marked-single:before{content: '* ';}
.note-marked-double:before{content: '** ';}
.note-marked-triple:before{content: '*** ';}

/***********************************************
				FIGURES ELEMENTS(WITH IMAGES)
				& SIMPLE IMAGES
***********************************************/
/*for align image with caption use div with classes below and put img element inside
FOR EXAMPLE:
<div class="figure-right">
	<img src="/img/pic.jpg" alt="Pic title" title="Pic Title">
	<div class="caption">
			<p class="h-sm">
				Eaque ipsa quae ab illo inventore
			</p>
			<p class="grey">
				Chemspace was developed by chemical purchasing specialists
			</p>
	</div>
</div>
*/
.figure-left,
.figure-right,
.figure-center{
		box-sizing: border-box;
}
.figure-center{
	margin: 20px 0px;
}
.figure-left{
	width: 460px;
	float: left;
	margin: 15px 25px 15px 0px;
}
.figure-right{
	width: 460px;
	float: right;
	margin: 15px 0px 15px 25px;
}
.figure-center{
	 display: block;
	 text-align: center;
	 float: none;
	 clear: both;
}
.figure-left img,
.figure-right img,
.figure-center img{
		display: inline-block;
		max-width: 100%;
}
.figure-left .caption,
.figure-right .caption,
.figure-center .caption{
		display: block;
		max-width: 100%;
		text-align: center;
}

/*for align image without any caption you can use just img element with classes*/
.img-left{
	float: left;
	margin: 15px 25px 15px 0px;
}
.img-right{
	float: right;
	margin: 15px 0px 15px 25px;
}
.img-center{
	display: block;
	float: none;
	clear: both;
}
/***********************************************
	      QUOTES
***********************************************/
/*just top and bottom bordered full width bold text*/
.blockquote{
	font-size: 24px;
	font-weight: 600;
	border-top: 2px solid #ddd;
	border-bottom: 2px solid #ddd;
	padding: 20px 100px;
	text-align: center;
	margin: 1em 0;
	clear: both;
}

/* BLOCKQUOTE WITH IMAGE (COMPLEX STRUCTURE NEEDED)*/
/*top and bottom bordered full width bold text with image*/
/*
<div class="blockquote-img">
		<div class="quote title-md">
				Chemspace was developed by chemical purchasing specialists and IT professionals with one goal in mind
				— to streamline the chemical purchasing process.
		</div>
		<figure class="quote-figure">
				<img alt="Chemspace was developed by chemical purchasing specialists and IT professionals with one goal in mind
				— to streamline the chemical purchasing process" src="/img/news_img.jpg"/>
		</figure>
</div>
*/
.blockquote-img{
	clear: both;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  display: flexbox;
  display: box;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
  -ms-box-pack: space-between;
  -moz-box-align: center;
  -ms-box-align: center;
  -webkit-box-align: center;
  align-items: center;
  -ms-box-align: center;
  margin: 1em 0;
}
.blockquote-img > * {
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.blockquote-img .quote {
  width: 70%;
  height: auto;
  padding: 10px;
  border-top: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  text-align: center;
  color: #aaa;
  line-height: 30px;
}
.blockquote-img .quote-figure {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  display: flexbox;
  display: box;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  -ms-justify-content: flex-end;
  justify-content: flex-end;
  -ms-box-pack: flex-end;
  -moz-box-align: center;
  -ms-box-align: center;
  -webkit-box-align: center;
  align-items: center;
  -ms-box-align: center;
  height: auto;
  width: -webkit-calc(30% - 35px);
  width: -moz-calc(30% - 35px);
  width: calc(30% - 35px);
  margin-left: 30px;
}
.blockquote-img .quote-figure img {
  max-height: 100%;
  max-width: 100%;
}

/* BLOCKQUOTE left or right (COMPLEX STRUCTURE NEEDED)*/
/*top and bottom bordered bold text with quote icon align by left or right side*/
/*
<div class="quote r">
	<q>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</q>
	<cite>Marcus Tullius Cicero</cite>
</div>
<div class="quote l>
	<q>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</q>
	<cite>Marcus Tullius Cicero</cite>
</div>
*/
.quote {
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  padding: 40px 25px 20px;
  margin: 1em 0;
}
.quote.r, .quote.l {
    width: 305px;
}
.quote.r {
  float: right;
  margin-left: 40px;
}
.quote.l {
	 float: left;
   margin-right: 40px;
}
.quote q {
    font-size: 18px;
    line-height: 1.25;
}
.quote q, .quote cite {
    display: block;
}
.quote cite {
  text-align: right;
  color: #aaa;
  padding-top: 10px;
}

/* Just separate full width block with clearfix for float elements*/
.article-footer{
	clear: both;
	margin: 15px 0px;
}