.row.special {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: nowrap;    
  height:100%;
  margin:0;
  margin-top:-4%;
  padding:0 6%;

}
.row.special > [class*='col-'] {
  display:flex;
  flex-direction:column;
  padding:1% 0%;
}

.textBoxBlue {
    background-color: #577086;
    /*height:15.5em;*/
}
.textBoxCian {
    background-color: #25AFB2;
    /*height:15.5em;*/
}

.colorBoxesLeft
{
    width:80%;
    margin-left:12%;    
    color:white;
}

.colorBoxesRight
{
    width:80%;
    margin-left:10%;    
    color:white;
}

.grayBox{    
   background-color:rgba(250,250,250,.85);
}

h1.DescriptionText
{
    font-size:1em;
    font-family:Roboto-Light;
    text-align:left;
    padding-bottom:5%;
    line-height:1.5em;
}

h3.DescriptionText
{
    font-size:1em;
    font-family:Roboto-Light;
    text-align:left;
    padding-bottom:5%;
    line-height:1.5em;
}

.ourOfferImageRow
{
    padding-top:8%;
    width:45%;
}

.ourOfferImageRow.left
{
    padding-top:0;
}

.ourOfferContentRow
{
    width:55%;
}

.ourOfferContentRow.right
{
    padding-top:5%;
}

.content-title {
    color: #5d5d5d;
    font-family: Roboto-Medium;
    font-size: 1.77em;
    text-align:left;
    margin-bottom:5%;
}

.contentSection
{
    padding:5% 12%;
}

.contentSection.blue
{
    background-color: #577086;
}

.contentSection.cian
{
    background-color: #25AFB2;
}


/* ============================================================================================================================
== BUBBLE WITH AN ISOCELES TRIANGLE ORANGE, CIAN, MUSTARD & DARKBLUE
** ============================================================================================================================ */

.triangle-isosceles-blue {
  position:relative;
  background-color:#577086;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-isosceles-blue.right {
  /*margin-right:50px;*/
  background-color:#577086;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

/* creates triangle */
.triangle-isosceles-blue: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:#577086 transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
  z-index:100;
}

/* Variant : right
------------------------------------------ */

.triangle-isosceles-blue.right:after {
  top:auto; /* controls vertical position */
  right:-2.5%; /* value = - border-left-width - border-right-width */
  bottom:50%;
  left:auto;
  border-width:1.5em 0 1.5em 1.5em;
  border-color:transparent #577086;
  z-index:99999;
}


/* Control del tamaño gral de los textos */
@media all and (min-width: 960px) {
}
 
@media all and (max-width: 959px) and (min-width: 600px) {
    .ourOfferImageRow
    {
        padding-top:1%;
        width:inherit;
    }

    .ourOfferContentRow
    {
        width:inherit;
    }
}
 
@media all and (max-width: 599px) and (min-width: 320px) 
{
    .ourOfferImageRow
    {
        padding-top:1%;
        width:inherit;
    }

    .ourOfferContentRow
    {
        width:inherit;
    }
}