﻿.contentPlenum {
    font-family: Roboto-Light;
    font-size: 1.22em;    
}

/*.textBox {
    position: relative;
    width: 50%;
    height: 100%;
    color: white;
}*/

/*.highWord {
    font-family:Roboto-Medium;
}*/

.textBoxBlue {
    background-color: #3BC0E6;
    height:16em;
}

.textBoxGreen {
    background-color: #24AAAD;
    height:16em;
}

/*.textBoxContent {
    padding-top:5.17%;
    position: relative;
    padding-bottom:5.6%;
}
.textBoxContentLeft {
    padding-right: 13.45%;
    padding-left: 32%;
}

.textBoxContentRight {
    padding-right: 32%;
    padding-left: 13.45%;
}*/

.sectionOver {
    margin-top:3.12%;
    margin-bottom: 2.6%;
}

.sectionOver > div:first-child{
    padding-left:11%;
}

.paragraphOver {
    width: 86.6%;
    text-align:left;
}
.sectionAffordable {
    margin-top:4%;
    margin-bottom:5.4%;
    margin-left:1%
}
.sectionAffordable > div:last-child{
    /*padding-left:8%;*/
    padding-right:11%;
    text-align:right;
}
.titleSection {
    /*font-size:40px;*/
    margin-bottom:8.3%;
}

.titleSection.right{
    text-align:right;
}

.titleSection.left{
    text-align:left;
}


h1.titleSection
{
    font-size:2.276em;
    font-family:Roboto;
}

h3.AboutUsText
{
    font-size:1.3em;
    font-family:Roboto-Light;
    text-align:left;
    line-height:1.4em;
}

h3.White
{
    color:white;
}

.colorBoxesLeft
{
    width:75.75%;
    margin-left:22%;
}

.colorBoxesRight
{
    width:75.75%;
    margin-left:8%;
}

/* Control del tamaño gral de los textos */
@media all and (min-width: 960px) and (max-width:1199)
{
    .textBoxBlue {
    height:12em;
    }

.textBoxGreen {
    height:12em;
    }
.colorBoxesLeft
    {
        width:70.75%;
        margin-left:22%;
    }

.colorBoxesRight
    {
        width:70.75%;
        margin-left:8%;
    }

}
 
@media all and (max-width: 959px) and (min-width: 600px) {
    .textBoxBlue {
    height:12.5em;
    }

.textBoxGreen {
    height:12.5em;
    }
.colorBoxesLeft
    {
        width:75.75%;
        margin-left:8%;
    }
}
 
@media all and (max-width: 599px) and (min-width: 320px) {
    .textBoxBlue {
    height:20em;
    }

.textBoxGreen {
    height:18em;
    }
.colorBoxesLeft
    {
        width:75.75%;
        margin-left:8%;
    }
 
}


/* ============================================================================================================================
== BUBBLE WITH AN ISOCELES TRIANGLE BLUE
** ============================================================================================================================ */

.triangle-isosceles-blue {
  position:relative;
  background-color:#3BC0E6
}


/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-isosceles-blue.right {
  /*margin-right:50px;*/
  background-color:#3BC0E6
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

/* creates triangle */
.triangle-isosceles-blue:after {
  content:"";
  position:relative;
  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:#3BC0E6 transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
  z-index:99999;
}

/* Variant : right
------------------------------------------ */

.triangle-isosceles-blue.right:after {
  top:auto; /* controls vertical position */
  right:-100%; /* value = - border-left-width - border-right-width */
  bottom:50%;
  left:auto;
  border-width:1.5em 0 1.5em 1.5em;
  border-color:transparent #3BC0E6;
  z-index:99999;
}


/* ============================================================================================================================
== BUBBLE WITH AN ISOCELES TRIANGLE CIAN
** ============================================================================================================================ */

.triangle-isosceles-cian {
  position:relative;
  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:relative;
  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 : right
------------------------------------------ */

.triangle-isosceles-cian.right:after {
  top:auto; /* controls vertical position */
  right:-100%; /* 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;
}
