﻿/*@font-face {
    font-family:Montserrat;
    src:url("../fonts/Montserrat/Montserrat-Regular.ttf")
}*/


.blueBox {
    background-color: #4D99BD;    
}


    .textBusiness > div:first-child {
        margin-bottom:11.7%;
    }

.seccionBusiness {
    margin-top: 5.8%;
    margin-bottom:5%;
    padding:0 12%;
}

    .seccionBusiness > div:first-child {
        /*padding-left: 6.1%;*/
        padding-right:4.4%;
        margin-bottom:6.25%;
        /*margin-right:4.4%*/
    }

    .seccionBusiness > div:last-child {
        padding-right:8%;
        /*margin-right:4.4%;*/
    }

h1.titleBusiness{    
    margin-bottom:6%;
    text-align:left;
    font-family:Roboto-Medium;
    font-size:2.3335em;
}

h3.textsWhy {
    font-family:Roboto-Light;
    font-size:1.2223em;
    text-align:left;
    line-height:1.6em;
}

.textParagraBusinessPart1 {
    margin-bottom:7.8%;
}

.bannerWhy {
    padding: 4.4% 13% 5%;
    font-size: 22px;
    color: white;
    text-align: center;
    display: -webkit-box;
    /*display: -webkit-flex;*/
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}

.elementBanner {
    padding:0 8.9%;
}

.seccionMerida {
    margin-top:4.37%;
    margin-bottom:3.38%;
}

    .seccionMerida > div:first-child {
        /*padding-left:4.8%;
        padding-right:5.9%;*/
    }

    .seccionMerida > div:last-child {
        /*padding-left:3.9%;*/
        /*padding-right:6.14%;*/
    }

.titleMerida {
    margin-bottom:5.8%;
}

.textElementReasons {
    padding: 0% 6%;
    color:white;
    font-size:14px;
}

    .textElementReasons > div:first-child {
        font-family:Roboto-Bold;
        font-size:20px;
        margin-top:2%;
        margin-bottom:8.9%;
    }

.grayBox {
    background-color: #D3D3D3;
    z-index:9999;
    width:20.83% !important; 
    padding:0;   
}

.SquareBox {
    margin:0;
    padding:0;
    width:29.17%;
}

@media all and (max-width: 959px) and (min-width: 600px) {
   .grayBox {
    background-color: #D3D3D3;
    z-index:9999;
    width:41.66% !important; 
    padding:0;   
    }
   .SquareBox {
    margin:0;
    padding:0;
    width:58.34%;
    }
}

@media all and (max-width: 599px) and (min-width: 320px) {
      .grayBox {
    background-color: #D3D3D3;
    z-index:9999;
    width:41.66% !important; 
    padding:0;   
    }
   .SquareBox {
    margin:0;
    padding:0;
    width:58.34%;
    }
 
}


.greenBox {
    background-color:#24AAAD;    
    margin:0;
    padding:0;
}

.hiddenContainerLeft {
    float:left;
}

h1
{
    font-size:2.55556em;
    font-family:Montserrat;
}

h3
{
    font-size:1.15em;
}

h4
{
    font-size:1em;
}

h5
{
    font-size:1em;
    font-family:Roboto;
    color:white;
    text-align:left;
    margin: 3% auto 3% 4%;
    max-width:90%;
}

h6
{
    font-size:.9em;
    font-family:Roboto;
    color:white;
    text-align:left;
    margin: 3% auto 3% 4%;
    max-width:90%;
}

.bannerRows{
  display: flex;
  flex-direction: column;
}

.squareRows
{
    text-align: center;
    display: -webkit-box;
    /*display: -webkit-flex;*/
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}

h3.reasonsHeader
{
    font-family:Roboto-Bold;
    margin: 6% auto 3% 4%;
    color:white;
    text-align:left;
    max-width:90%;
}

.container-full
{
    margin:0 auto;
    width:100%;
    height:100%;
}


/* ============================================================================================================================
== BUBBLE WITH AN ISOCELES TRIANGLE BLUE
** ============================================================================================================================ */

.triangle-isosceles-blue {
  position:relative;
  background-color:#4D99BD
}


/* Variant : for left/right positioned triangle
------------------------------------------ */

.triangle-isosceles-blue.left {
  /*margin-left:50px;*/
  background-color:#4D99BD
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-isosceles-blue.right {
  /*margin-right:50px;*/
  background-color:#4D99BD
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

/* creates triangle */
.triangle-isosceles-blue:after {
  content:"";
  position:absolute;
  bottom:-44px; /* value = - border-top-width - border-bottom-width */
  left:36px; /* controls horizontal position */
  border-width:45px 35px 0; /* vary these values to change the angle of the vertex */
  border-style:solid;
  border-color:#4D99BD transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
  z-index:99999;
}

/* Variant : left
------------------------------------------ */

.triangle-isosceles-blue.left:after {
  top:auto; /* controls vertical position */
  left:-6.5%; /* value = - border-left-width - border-right-width */
  bottom:50%;
  right:auto;
  border-width:1.5em 2em 1.5em 0;
  border-color:transparent #4D99BD;
  z-index:99999;
}

/* Variant : right
------------------------------------------ */

.triangle-isosceles-blue.right:after {
  top:auto; /* controls vertical position */
  right:-99.5%; /* value = - border-left-width - border-right-width */
  bottom:50%;
  left:auto;
  border-width:1.5em 0 1.5em 1.5em;
  border-color:transparent #4D99BD;
  z-index:99999;
}


/* ============================================================================================================================
== BUBBLE WITH AN ISOCELES TRIANGLE CIAN
** ============================================================================================================================ */

.triangle-isosceles-cian {
  position:relative;
  background-color:#24AAAD
}

/* Variant : for left/right positioned triangle
------------------------------------------ */

.triangle-isosceles-cian.left {
  /*margin-left:50px;*/
  background-color:#24AAAD
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-isosceles-cian.right {
  /*margin-right:50px;*/
  background-color:#24AAAD
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

/* creates triangle */
.triangle-isosceles-cian:after {
  content:"";
  position:absolute;
  bottom:-44px; /* value = - border-top-width - border-bottom-width */
  left:360px; /* controls horizontal position */
  border-width:45px 35px 0; /* vary these values to change the angle of the vertex */
  border-style:solid;
  border-color:#24AAAD transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
  z-index:100;
}


/* Variant : left
------------------------------------------ */

.triangle-isosceles-cian.left:after {
  top:auto; /* controls vertical position */
  left:-8%; /* value = - border-left-width - border-right-width */
  bottom:50%;
  right:auto;
  border-width:1.5em 1.5em 1.5em 0;
  border-color:transparent #24AAAD;
  z-index:99999;
}

/* Variant : right
------------------------------------------ */

.triangle-isosceles-cian.right:after {
  top:auto; /* controls vertical position */
  right:-4%; /* value = - border-left-width - border-right-width */
  bottom:50%;
  left:auto;
  border-width:1.5em 0 1.5em 1.5em;
  border-color:transparent #24AAAD;
  z-index:99999;
}
