/* start menu css*/
/*
=====
DEPENDENCES
=====
*/
@charset "utf-8";
@media only screen and (max-width: 990px) {
  .custom-header {
    background-color: #2f353b !important;
  }
  .menu-bg-style {
    margin-top: 4% !important;
  }
}

@media only screen and (max-width: 500px) {
  .menu-bg-style {
    margin-top: 8% !important;
  }
}
.forcefullwidth_wrapper_tp_banner {
  height: 70vh !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mtype-cards-button-maindiv {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
}
.mtype-cards-maindiv {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  align-items: flex-start;
}
.mt-class {
  margin-top: 30px;
}
.mtype-fcard {
  background-color: white;
  padding: 20px;
  border-radius: 6px;
  /* box-shadow: 0px 3px 6px #000000a6; */
  margin-left: 20px;
  margin-top: 0px;
  margin-bottom: 0px;
  transition: box-shadow 0.3s ease-in-out;
  text-align: justify;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.ch-fw {
  width: 40%;
  height: 80vh;
}
.ch-sw {
  width: 60%;
  height: 80vh;
}
.ch-thw {
  width: 40%;
  height: 40vh;
  line-height: 0;

}
.ch-fow {
  width: 60%;
  height: 40vh;

}
.mtype-fcard:hover::after {
  opacity: 1;
}
.mtype-fcard:hover {
  box-shadow: 0 5px 15px #000000c2;
}
.cbp-maindiv-class {
  margin-bottom: 20px !important;
  max-height: 100vh !important;
}
.cbph-panel {
  max-width: 100% !important;
  height: 100% !important;
}
.cbph {
  max-height: 150vh !important;
}
.calculator-expand-div {
  display: flex;
  width: 200%;
  height: 100vh;
}
.appraisals-custom-class {
  max-height: 50vh !important;
  overflow: auto !important;
}
.custom-footer-tag {
  /* height: 30vh !important; */
}

.mb-data-tag > .cbp-item-wrapper {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-around !important;
  height: 45vh !important;
}
.mb-grid-main-tag {
  padding-left: 20px !important;
  padding-right: 10px !important;
  max-height: 110vh !important;
  /* height: 0px !important; */
}
.test-center {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-around !important;
  align-items: center !important;
  margin: 0 !important;
}
.cbp-wrapper-outer {
  margin: unset !important;
}
.mb-image-tag{
  height: 50% !important;
  width: 50% !important;
  margin: auto;
}
.cbp-pic-item {
  /* width: 200px !important; */
  height: 48vh !important;
}
.home-logo-icon {
  height: 50px;
  width: 50px;
  position: absolute;
  top: 0px;
  margin: 10px;
  cursor: pointer;
}
@media only screen and (max-width: 900px) {
  .ch-fw {
    height: max-content !important;
  }

  .custom-header {
    background-color: #2f353b !important;
  }

.mb-grid-main-tag > .cbp-wrapper-outer {
  overflow: auto !important;
}
}
@media only screen and (max-width: 600px) {
  .calculator-expand-div {
    display: flex;
    width: 200%;
    height: 100vh;
  }

.cbp-pic-item {
  width: 100% !important;
}
  .mtype-cards-maindiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .mtype-fcard {
    margin-bottom: 20px;
  }
  .cbp-pic-item {
    width: 100% !important;
    height: 100vh;
  }
  .c-content-panel {
    margin-right: 0px !important;
  }

.ch-fw {
  width: 100%;
  height: max-content;
  text-align: left;
}
.ch-sw {
  width: 100%;
  height: max-content;
  margin-top: 20px;
}
.ch-thw {
  width: 100%;
  height: max-content;
line-height: 6;
}
.ch-fow {
  width: 100%;
  height: max-content;

}
}
#calculator {
  overflow: hidden !important;
}
.cbp-l-grid-masonry-projects-title {
  white-space: normal !important;
    overflow: auto !important;
    text-overflow: none !important;
}
#scale-calculator-iframe {
  zoom: 2 !important;
  height: 100vh !important;
  width: 100% !important;
  -moz-transform:scale(0.50);
  -moz-transform-origin: 0 0;
  -o-transform: scale(0.50);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.50);
  -webkit-transform-origin: 0 0;
}
.cbp-pic-item {
  /* box-shadow: 0px 3px 6px #000000a6; */
  border-radius: 6px;
  background-color: white;
  height: 60vh;
  width: 260px;
}
.cbp-pic-item:hover::after {
  /* opacity: 1; */
}
.modal-open .modal {
  overflow: hidden !important;
  max-height: 100% !important;
}
.modal-body {
  overflow: auto !important;
  max-height: 60vh !important;
  text-align: justify;
}
.c-square {
  border-radius: 10px !important;
}
.modal-dialog {
  width: 95% !important;
  margin: auto !important;
}
.cbp-item:hover {
  box-shadow: 0 5px 15px #000000c2;
}
.modal.in .modal-dialog {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.mtype-scard {
  background-color: white;
  padding: 20px;
  border-radius: 6px;
  /* box-shadow: 0px 3px 6px #000000a6; */
  margin-left: 20px;
  margin-top: 0px;
  margin-bottom: 0px;
  width: 100%;
  transition: box-shadow 0.3s ease-in-out;
  text-align: justify;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.mtype-scard:hover::after {
  opacity: 1;
}
.mtype-scard:hover {
  box-shadow: 0 5px 15px #000000c2;
}
.c-layout-revo-slider {
  overflow: hidden;
}
/* The component will reset button browser styles */

.r-button{
  --uirButtonBackgroundColor: var(--rButtonBackgroundColor, transparent);
  --uirButtonPadding: var(--rButtonPadding, var(--rButtonPaddingTop, 0) var(--rButtonPaddingRight, 0) var(--rButtonPaddingBottom, 0) var(--rButtonPaddingLeft, 0));
  --uirButtonBorderWidth: var(--rButtonBorderWidth, 0);
  --uirButtonBorderStyle: var(--rButtonBorderStyle, solid);
  --uirButtonBorderColor: var(--rButtonBorderColor, currentColor);
  --uirButtonFontFamily: var(--rButtonFontFamily, inherit);
  --uirButtonFontSize: var(--rButtonFontSize,  inherit);
  --uirButtonColor: var(--rButtonColor);

  background-color: var(--uirButtonBackgroundColor);
  padding: var(--uirButtonPadding);

  border-width: var(--uirButtonBorderWidth);
  border-style: var(--uirButtonBorderStyle);
  border-color: var(--uirButtonBorderColor);

  cursor: pointer;

  font-family: var(--uirButtonFontFamily);
  font-size: var(--uirButtonFontSize);
}

.r-button::-moz-focus-inner,
.r-button[type="button"]::-moz-focus-inner,
.r-button[type="reset"]::-moz-focus-inner,
.r-button[type="submit"]::-moz-focus-inner {
  
  /* Remove the inner border and padding in Firefox. */
  
  border-style: none;
  padding: 0;
}

/* The component will reset browser's styles of link */

.r-link{
    --uirLinkDisplay: var(--rLinkDisplay, inline-flex);
    --uirLinkTextColor: var(--rLinkTextColor);
    --uirLinkTextDecoration: var(--rLinkTextDecoration, none);

    display: var(--uirLinkDisplay) !important;
    color: var(--uirLinkTextColor) !important;
    text-decoration: var(--uirLinkTextDecoration) !important;
}

/* The component will reset browser's styles of list */

.r-list{
    --uirListPaddingLeft: var(--rListPaddingLeft, 0);
    --uirListMarginTop: var(--rListMarginTop, 0);
    --uirListMarginBottom: var(--rListMarginBottom, 0);
    --uirListListStyle: var(--rListListStyle, none);

    padding-left: var(--uirListPaddingLeft) !important;
    margin-top: var(--uirListMarginTop) !important;
    margin-bottom: var(--uirListMarginBottom) !important;
    list-style: var(--uirListListStyle) !important;
}

/* Basic styles of the hamburger component */

.m-hamburger{
  --uiHamburgerDisplay: var(--hamburgerDisplay, inline-flex);
  --uiHamburgerWidth: var(--hamburgerWidth, 28px);
  --uiHamburgerHeight: var(--hamburgerHeight, 20px);
  --uiHamburgerThickness: var(--hamburgerThickness, 4px);
  --uiHamburgerBorderRadius: var(--hamburgerBorderRadius, 5px);
  --uiHamburgerBgColor: var(--hamburgerBgColor, currentColor);

  display: var(--uiHamburgerDisplay);
  width: var(--uiHamburgerWidth);
  height: var(--uiHamburgerHeight);

  position: relative;
  text-indent: -9999px;
}

.m-hamburger::before, 
.m-hamburger::after, 
.m-hamburger__label{
  width: 100%;
  height: var(--uiHamburgerThickness);
  border-radius: var(--uiHamburgerBorderRadius);
  background-color: var(--uiHamburgerBgColor);

  position: absolute;
  left: 0;
}

.m-hamburger::before, 
.m-hamburger::after{
  content:"";
}

.m-hamburger::before{
  top: 0;
}

.m-hamburger::after{
  bottom: 0;
}

.m-hamburger__label{
  /* The calculation of middle hamburger button line position */
  
  top: calc(50% - calc(var(--uiHamburgerThickness) / 2));
}

/*
=====
MENU STYLES
=====
*/

.menu{
  --uiMenuCircleSize: var(--menuCircleSize, 100px);
  --uiMenuCircleOffset: var(--menuCircleOffset, 10px);
  --uiMenuCircleBgColor: var(--menuCircleBgColor, currentColor);

  --hamburgerWidth: var(--menuHamburgerWidth, 28px);
  --hamburgerHeight: var(--menuHamburgerHeight, 20px);
  --hamburgerBgColor: var(--menuHamburgerBgColor, #fff);

  box-sizing: border-box;
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;  

  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9998;
}

.menu__nav{
  box-sizing: border-box;
  width: fit-content;
  height: 0;

  transition: opacity .2s ease-out;
  opacity: 0;

  display: flex;
  align-items:flex-end;
  z-index: 2;
}

.menu__list{
  width: 100%;
  max-height: 100%;
  display: none;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.menu__toggle{
  box-sizing: border-box;
  width: var(--uiMenuCircleSize);
  height: calc(var(--uiMenuCircleSize) / 2);
  padding: var(--uiMenuCircleOffset);

  flex: none;

  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.menu__toggle::before{
  /*
  1. The font-size property is used to simplify calculations of the element's sizes and position
  2. The negative value for the bottom property need for hiding half of circle. 
  */

  content: "";
  width: 1em;
  height: 1em;
  font-size: var(--uiMenuCircleSize); /* 1 */

  background-color: var(--uiMenuCircleBgColor);
  border-radius: 50%;

  position: absolute;
  bottom: -.5em; /* 2 */
  left: calc(50% - .5em);

  will-change: width, height;
  transition: transform .25s cubic-bezier(0.04, -0.1, 0.29, 0.98),
    width .25s cubic-bezier(0.04, -0.1, 0.29, 0.98),
    height .25s cubic-bezier(0.04, -0.1, 0.29, 0.98);
}

.menu__hamburger::before{
  /* Increase of click button area   */

  content: "";
  width: 100%;
  height: 100%;

  position: absolute;
  top: 0;
  left: 0;
}

/* styles of hamburger's animation */

.m-hamburger::before, 
.m-hamburger::after, 
.m-hamburger__label{
  transition-timing-function: ease;
  transition-duration: .1s;  
}

.m-hamburger::before, 
.m-hamburger::after{
  transition-property: transform;
}

.m-hamburger__label{
  transition-property: transform, opacity;
}

/*
=====
MENU STATES
=====
*/


.menu__hamburger:focus{
  outline: none;
}

.menu_activated{
  height: 100%;
}

.menu_activated .menu__nav{
  height: 100%;
  opacity: 1;

  will-change: opacity;
  transition-duration: .2s;
  transition-delay: .3s;
}

.menu_activated .menu__toggle::before{
  width: 100vmax;
  height: 100vmax;
  transform: translate3d(-50vh, -50vh, 0) scale(5);
  transition-duration: 1s;
}

.menu_activated .menu__list{
  display: block;
}

.menu_activated .m-hamburger::before{
  top: 50%;
  transform: translate3d(0, -50%, 0) rotate(45deg);
}

.menu_activated .m-hamburger::after{
  transform: translate3d(0, -50%, 0) rotate(135deg);
  top: 50%;
}

.menu_activated .m-hamburger__label{
  transform: rotate(-45deg) translate3d(-.285em,-.3em, 0);
  opacity: 0;
}

/*
=====
SETTINGS
=====
*/

:root{
  --colorWhite: #fff;
  --colorMain: #125c33;
  --rLinkTextColor: var(--colorMain);
  --menuCircleSize: 100px;
  --menuCircleBgColor: var(--colorMain);
  --menuHamburgerWidth: 28px;
  --menuHamburgerHeight: 20px;
  --menuHamburgerBgColor: var(--colorWhite);
}
/*
=====
DEMO
=====
*/

@media (min-width: 768px){

  html{
    font-size: 62.5%;
  }
}

@media (max-width: 767px){

  html{
    font-size: 50%;
  }
}


.page{
  max-width: 380px;
  padding: 10px;
  margin: auto;  
  text-align: center;
}

.page__name{
  display: block;
  font-size: 3rem;
  font-weight: 700;
}

.page__hint{
  display: block;
  line-height: 1.45;
  margin-top: 1rem;
}

.menu__group{
  --rLinkTextColor: var(--colorWhite);

  padding: .2rem 0rem; 
  font-size: 3.6rem;
  font-weight: 700;
  text-transform: uppercase;
}
/*end menu css*/