/**
  CSS Classes for formatting styles
  this classes can be reusable in the Visual Composer
  **/


/** 
  Titles
  **/
.headline-title {
  font-size: 42px;
  font-weight: bold;  
  line-height: 110%;
}

.headline-title p {
  line-height: 110%;  
}

.headline-subtitle {
  font-size: 30px;
  display: block;
  font-style: normal;
  line-height: 110%;
}

.headline-subtitle p {
  line-height: 110%;
}

.title-extra-large {
  font-size: 37px;
}

.title-large {
  font-size: 24px;
}

.title-small {
  font-size: 18px;
}


.title-small p,
.title-large p,
.title-extra-large p {
  line-height: 100%;
}


/*
 Title Large
 Formatting large title with 2 border
 at the bottom
 - available options to use title-large
   for larger fonts or title-small
   for smaller fonts
*/
.element-title {
	font-weight: bold;
	margin-bottom: 30px;
}

/**
  Text Color
  **/
.text-black .post-title,
.text-black {
  color: #506378;
}

.text-grey .post-title,
.text-grey {
  color: #bfc9d4;
}

.text-white .post-title,
.text-white {
  color: #fff;
}

.text-orange .post-title,
.text-orange {
  color: #f6672f;
}

.text-blue .post-title,
.text-blue {
  color: #3488c9;
}

.text-lightblue .post-title,
.text-lightblue {
  color: #e4e8f1;
}

.text-pink .post-title,
.text-pink {
	color: #f7504c;
}

.text-green .post-title,
.text-green {
	color: #65be3e;
}

/**
  Text Underline
  **/
.text-underline {
	display: table;
	clear: both;
	margin: 0 auto !important;
	position: relative;
	padding-bottom: 40px;
}

.text-underline:before {
	width: 140%;
  height: 1px;
	position: absolute;
	bottom: 19px;
	left: -20%;
	content: '';
	display: block;
}

.text-underline:after {
  width: 50%;
  height: 3px;
  position: absolute;
  bottom: 18px;
  left: 25%;
  content: '';
  display: block;
}


/**
  Number List
  **/
.number-list {
	counter-reset: number-list-counter;
}

.number-list > * {
	position: relative;
	padding-left: 60px;
}

.number-list > *:before {
  content: counter(number-list-counter, decimal-leading-zero);
  counter-increment: number-list-counter;
  width: 46px;
  height: 46px;
  border-width: 2px;
  border-style: solid;
  font-size: 22px;
  text-align: center;
  line-height: 44px;
  border-radius: 6px;
  position: absolute;
  top: 0;
  left: 0;
  font-weight: bold;
  border-color: #bfbfbf;
  color: #f7504c;
}

/**
  Diamond shape image
  Masking image with diamond shaped wrapper.
  This class must be invoked in an element that
  act as the image wrapper and the wrapper
  must have fixed height and width or utilize
  js to make fixed height.
  
  structure :
  <div class="diamond">
    <div class="border">
      <img ...>
    </div>
  </div>
  **/
div.diamond {
  -ms-transform: rotate(-45deg) scale(.8);
  -webkit-transform: rotate(-45deg) scale(.8);
  transform: rotate(-45deg) scale(.8);
  overflow: hidden;
  border: none;
  border-radius: 18px;
}

div.diamond .border {
	background: inherit;
  border-radius: 18px;
  overflow: hidden;
}

div.diamond img {
	-ms-transform: rotate(45deg) scale(1.4);
  -webkit-transform: rotate(45deg) scale(1.4);
  transform: rotate(45deg) scale(1.4);
  border: none;
} 


/**
  Round Shape Image
  Masking image with rounded shape image wrapper
  This class must be used in the image wrapper element.
  If you want a bordered image, you must add additional
  border wrapper
  
  structure :
  <div class="rounded">
     <div class="border">
       <img ....>
     </div>
  <div>
  **/
div.rounded {
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  overflow: hidden;  
  border: none;
  display: table;
  padding: 1px;
}

div.rounded .border {
	padding: 4px;
}

div.rounded img {
  min-height: 100%;
  min-width: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
}


/**
  Round Edge class
  Adding rounded edges to element
  **/
div.round-edge > *,
div.round-edge {
	border-radius: 8px;
	overflow: hidden;
}


/**
  Hide Form Label
  **/
.label-hidden label {
  display: none;
}



/**
  Helper Classes
  **/
.nopadding {
  padding: 0;
}

.rightpadding {
  padding-left: 0;
  padding-right: 30px;
}

.nopaddingleft {
  padding-left: 0;
}

.nopaddingright {
  padding-right: 0;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-extra-bold {
  font-weight: 800;
}

.text-extra-large p,
.text-extra-large {
  font-size: 60px;
  line-height: 62px;
}

.text-bold {
  font-weight: 600;
}

.bold {
  font-weight: 700;
}


.text-large {
  font-size: 23px;
}

.text-medium {
  font-size: 18px;
}

.text-italic {
  font-style: italic;
}

.text-light {
  font-weight: light;
}

.text-small {
	font-size: 12px;
}

.text-small.post-social i {
	font-size: 10px;
	height: 20px;
	width: 20px;
	line-height: 20px;
	border-radius: 2px;
}

.text-medium.post-social i {
  font-size: 13px;
  height: 30px;
  width: 30px;
  line-height: 30px;
  border-radius: 3px;
}

.children-inline > * {
	display: inline-block;
}

.display-inline {
	display: inline-block;
}

.vertical-middle {
	vertical-align: middle;
}

.vertical-top {
	vertical-align: top;
}

.vertical-bottom {
	vertical-align: bottom;
}

.clearboth {
  clear: both;
}

.pull-center {
	display: block !important;
	float: none;
	margin: 0 auto;
}

.pull-inline {
  display: inline-block;
}

.pull-table {
  display: table;
}

.box-shadow img {
  box-shadow: 0 0 80px #000000;
}

.no-overflow {
  overflow: hidden;
}

.no-border {
	border: none !important;
}

.no-background {
	background: none !important;
}

.position-static {
	position: static;
}

/**
  Vertical centering element
  The direct parent wrapper of the element having
  this class must have height property defined!.
  this work best with isotope equalheight mode or
  equalheightrow js.
  **/
.float-center {
  position: relative;
  top: 50%;
  margin-top: -12.5%;
}

.fullheight-border {
  position: absolute;
  bottom: 0;
  height: 30000px;
  border: 1px solid inherit;
}

/**
  Price super and price sub for use with pricing table block
  **/
.price-super {
  font-size: 25px !important;
  font-weight: bold !important;
  vertical-align: text-top;
  line-height: 40px;
}

.price-sub {
  font-size: 15px !important;
  font-weight: bold !important;
  vertical-align: sub;
}