/**
  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%;
  padding: 0;
  margin: 0;
}

/**
  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;
}

/**
  Jagged saw style
  **/
#page.with-saw-effect .saw-effect,
#page.with-saw-effect .sticky-active #header {
  border-bottom: none !important;
  box-shadow: none;
}

#page.with-saw-effect .saw-effect:after {
  content: "";
  position: absolute;
  display: block;
  height: 10px;
  bottom: -10px;
  left: 0;
  right: 0;
  background-size: 14px 30px !important;
  background-position: 0 -20px !important;
  z-index: 1;
}