/*
Theme Name: AB Consulting
Description: Child theme optimized for Beaver Builder and Beaver Themer for AB Consulting
Author: AB Consulting Team
Template: bb-theme
Version: 1.0.0
Text Domain: ab-consulting
*/
/* This file contains generic styles for all clients, copy paste to every new theme and modify as needed */

/* generic style */
:root {
  --font-size: 16px;
  --font-weight:400;
  --font-color:#1E1E1E;
  
  --h1-title-font-size:48px;
  --h2-title-font-size:30px;
  --h3-title-font-size:28px;
  --h4-title-font-size:22px;
  --h5-title-font-size:18px;
  --h6-title-font-size:16px;
  --title-letter-spacing:0px;
  --title-font-weight:900;
  --h4-title-font-weight:600;
  --title-font-style:italic;
  --title-font-family: "Montserrat";
  --title-font-color:#1E1E1E;

  

  --description-font-size:24px;
  
  /*--body-bg-color: #0d2a3d;*/
  --body-bg-color: white;
  --secondary-bg-color:#2f2f2f;

  /* buttons*/
  --button-line-height: 27px;
  --button-color:white;
  --button-secondary-color:#1E1E1E;
  --button-min-height:34px;
  --button-height:34px;
  --button-font-size:14px;
  --button-font-style:italic;
  --button-font-weight:900;
  --button-text-transform:none;
  --button-padding:10px 17px;
  --button-letter-spacing:1px;
  --button-border-radius:0px;
  --button-border-color:#1E1E1E;
  --button-background-color:#1E1E1E;
  --button-hover-color:#1E1E1E;
  --button-secondary-background-color:#52D1DC;
  --button-secondary-border-color:#52D1DC;
  /* end buttons*/

  --intro-font-size:24px;

  --image-max-width:100%;
  /*--padding: 20px;
  --container-width: 100%;*/
   
  /*--font-family:"Segoe UI", Arial, sans-serif;*/
  --font-family:'Montserrat', sans-serif;

  --link-color:#EE2921;

  /*site sizing */
  --fixed-width-rows-padding: 100px;
  --max-width-of-page: 1600px;
  
}
/* XXL - for devices smaller than 1600px (optional, just for larger screens) */
@media (max-width: 1599.98px) {
  :root {
  }
}

/* Extra large (xl) - for devices smaller than 1400px */
@media (max-width: 1399.98px) {
  :root {
    --image-max-width:600px;
    --subtitle-font-size: 16px;
    --font-size: 16px;
    --title-font-size:38px;
    --title-font-size-medium:30px;
    --title-line-height-medium:38px;
  }
}

/* Large (lg) - for devices smaller than 1200px */
@media (max-width: 1199.98px) {
  :root {
  }
}

/* Medium (md) - for devices smaller than 992px */
@media (max-width: 991.98px) {
  :root {
    --title-font-size:40px;
    --subtitle-font-size: 16px;
    --font-size: 16px;
    --title-font-size:38px;
    --title-font-size-medium:30px;
    --title-line-height-medium:38px;
    
    --button-min-height:40px;
    --button-height:40px;
    --button-padding:8px 16px;
    --button-font-size:14px;
    --intro-font-size:20px;
    --description-font-size:20px;
  }
}
/* Small (sm) - for devices smaller than 768px */
@media (max-width: 768px) {
  :root {
    --title-font-size:32px;
    --title-font-size-medium:26px;
  }
}
/* Extra small (xs) - for devices smaller than 576px */
@media (max-width: 575.98px) {
  :root {
    
  }
}
@media (max-width: 440px) { /*my phone*/
  :root {
    
  }
}


/* end variables  now the styles use the variables set above*/
html{
  font-size:var(--font-size)!important;
  -webkit-text-size-adjust: 100%;
}
html body {
  height: 100%;
  width: 100%;
  min-width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  font-family: var(--font-family);
  font-size: var(--font-size)!important;
  font-weight:var(--font-weight);
  color: var(--font-color);
  background-color: var(--body-bg-color);
}
html a {
  color: var(--link-color);
  text-decoration: none;
  transition: all .2s ease-in-out;
}
.secondaryBgColor{
  background: var(--secondary-bg-color);
}
/* buttons */
html body .fl-builder-content a.fl-button, 
html body .fl-builder-content a.fl-button:visited,
html body .fl-builder-content a.fl-button:focus,
html body .fl-builder-content a.fl-button:hover
{
  min-height: var(--button-min-height)!important;
  height:var(--button-height);
  line-height: var(--button-line-height)!important;
  font-size: var(--button-font-size);
  font-family: var(--font-family);
  font-weight: var(--button-font-weight)!important;
  font-style: var(--button-font-style);
  -ms-flex-item-align: start;
  align-self: flex-start;
  text-transform: var(--button-text-transform);
  background: var(--button-background-color); 
  color: var(--button-color)!important;
  outline: 0;
  
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: var(--button-padding);
  font-weight: 400;
  letter-spacing: var(--button-letter-spacing);
  border-radius: var(--button-border-radius);
  -webkit-transition: margin .2s ease, color .2s ease, background .2s ease;
  transition: margin .2s ease, color .2s ease, background .2s ease;
  white-space: nowrap;
}
html body .fl-builder-content .secondaryLink a.fl-button, 
html body .fl-builder-content .secondaryLink a.fl-button:visited,
html body .fl-builder-content .secondaryLink a.fl-button:focus,
html body .fl-builder-content .secondaryLink a.fl-button:hover{
  background: var(--button-secondary-background-color); 
  color: var(--button-secondary-color)!important;
  border-color: var(--button-secondary-border-color);
}
html body .fl-builder-content .secondaryLink a.fl-button span{
  color: var(--button-secondary-color)!important;
}
/* end buttons */

/* Headings */
html h1.fl-heading,html h1.fl-list-item-heading,
html h2.fl-heading,html h3.fl-heading,html h4.fl-heading{
  font-weight: var(--title-font-weight) ;
  font-style: var(--title-font-style);
  font-family: var(--title-font-family);
}
html h1.fl-heading{
  font-size:var(--h1-title-font-size);
  letter-spacing: var(--title-letter-spacing);
}

html h2.fl-heading{
  font-size:var(--h2-title-font-size);
  letter-spacing: var(--title-letter-spacing);
}

html h3.fl-heading{
  font-size:var(--h3-title-font-size);
  letter-spacing: var(--title-letter-spacing);
}
html h4.fl-heading{
  font-size:var(--h4-title-font-size);
  font-weight: var(--h4-title-font-weight);
  letter-spacing: var(--title-letter-spacing);
  line-height: 1.2;
}
html h5.fl-heading{
  font-size:var(--h5-title-font-size);
  letter-spacing: var(--title-letter-spacing);
}
html h6.fl-heading{
  font-size:var(--h6-title-font-size);
  letter-spacing: var(--title-letter-spacing);
}

.into_text,.intro_text, .intro h3,.intro p,.into_text p{
  font-size:24px;
  font-weight:600;
}
html h2,html h2 a,html h2 a:hover{
  color:var(--title-font-color);
}
.subtitle{
  font-family: var(--title-font-family);
  color: var(--title-font-color);
  font-weight: 400;
  font-size: var(--font-size)!important;
  letter-spacing: .125rem;
  line-height: 1.5rem;
}
.title, h3.fl-heading, h3.fl-heading, h3.fl-heading .fl-heading-text,body h3,body h3 strong, body h3 b {
  font-family: var(--title-font-family);
  color: var(--title-font-color); 
}
.title, h1.fl-heading, h1.fl-heading,h1.fl-heading .fl-heading-text {
  color: var(--title-font-color);
  font-weight: 900;
  font-size: 3.0rem;
  line-height: 3rem;
  font-family: var(--title-font-family);
}
.title--small, h2.fl-heading{
  font-family: var(--title-font-family);
  color: var(--title-font-color);
  font-weight: 900;
  font-size: var(--title-font-size-medium);
  line-height: var(--title-line-height-medium);
  letter-spacing: var(--title-letter-spacing);
}
.bodytext, .fl-rich-text{
  color: var(--font-color);
}


/*set the max-width of the container to 1200px*/
html .fl-page,
html .fl-row-fixed-width
{
    max-width: var(--max-width-of-page);
}
html .fl-row-fixed-width{
  padding-left: var(--fixed-width-rows-padding);
  padding-right: var(--fixed-width-rows-padding);
}
/* this is here not to aplly the padding 2 times one in the conter and ont in the theamer layouts*/

.fl-row-fixed-width .fl-row-fixed-width 
{
  padding-left:0px !important;
  padding-right:0px !important;
}
html body.single-news .fl-page-content > .fl-builder-content >.fl-row >.fl-row-content-wrap .fl-row-fixed-width{
  padding-left: var(--fixed-width-rows-padding)!important;
  padding-right: var(--fixed-width-rows-padding)!important;
}
html body.single-products #page_wraper >.fl-row-content-wrap .fl-row-fixed-width{
  padding-left:0px !important;
  padding-right:0px !important;
}
html body.single-products #page_wraper >.fl-row-content-wrap .fl-row-fixed-width .fl-row-fixed-width{
  padding-left: var(--fixed-width-rows-padding)!important;
  padding-right: var(--fixed-width-rows-padding)!important;
}

.vertical-line-with-square-wrapper h1 .fl-heading-text{
  font-size: 60px;
}