#contenedor_article_3
{
    padding-bottom: 5px;
}

.colour-block {
    width: 100%;
    padding-top: 10%;
    color:#fff;
    background-color: #227744;
    box-sizing: border-box;
}

.white-block {
    background:#fff;
    width:100%;
    padding-top: 10%;
    color: #040404;
    box-sizing: border-box;
}

.white-block p
{
    width: 60%;
    margin: 0 auto;
}

.colour-block p
{
    width: 60%;
    margin: 0 auto;
}

h1
{
    text-align:center;
    font-size:30px;
    font-family: monospace;
/*    margin-bottom: 10px;*/
}
h2
{
    text-align:center;
    font-size:24px;
    font-family: monospace;
/*    margin-bottom: 10px;*/
}

#servicios
{
    width: 60%;
    margin-left: 20%;
    margin-bottom: 15px;
    text-align: center;
    font-size:30px;
    font-family: monospace;
    font-weight: bolder;

    background-color: rgba(0, 0, 0, 0.5);
    padding: 3px;

    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}


    @media screen and (max-width: 630px)
    {
        h1{font-size: 24px;}
        h2{font-size: 18px;}
        #servicios{font-size: 24px;}
        .white-block p {width: 80%;}
        .colour-block p {width: 80%;}
    }

    @media screen and (max-width: 460px)
    {
        h1{font-size:20px;}
        h2{font-size: 16px;}
        #servicios{font-size:20px;}
    }

    @media screen and (max-width: 320px)
    {
        h1{font-size: 18px;}
        h2{font-size: 14px;}
        .white-block p {width: 95%;}
        .colour-block p {width: 95%;}
        #servicios{font-size: 18px;}
    }


/*------------------*/
/*  SKEW CLOCKWISE  */
/*------------------*/
.skew-cc{
  width:100%;
  height:100px;
  position:absolute;
  left:0px;
  background: -webkit-linear-gradient(to right bottom, #227744 49%, #fff 50%),    linear-gradient(-50deg, #ffffff 16px, #000 0);
  background: -moz-linear-gradient(to right bottom, #227744 49%, #fff 50%),    linear-gradient(-50deg, #ffffff 16px, #000 0);
  background: linear-gradient(to right bottom, #227744 49%, #fff 50%),    linear-gradient(-50deg, #ffffff 16px, #000 0);
}


/*-------------------------*/
/* SKEW COUNTER CLOCKWISE  */
/*-------------------------*/
.skew-c{
  width:100%;
  height:100px;
  position:absolute;
  left:0px;
  background: -webkit-linear-gradient(to left bottom, #fff 49%, #227744 50%);
  background: -moz-linear-gradient(to left bottom, #fff 49%, #227744 50%);
  background: linear-gradient(to left bottom, #fff 49%, #227744 50%);
}

/* Los sigientes @media permiten que el texto no se oculte */
    @media screen and (max-width: 940px)
    {
        .white-block {padding-top: 15%;}
        .colour-block {padding-top: 15%;}
    }
    @media screen and (max-width: 630px)
    {
        .white-block {padding-top: 20%;}
        .colour-block {padding-top: 20%;}
    }
    @media screen and (max-width: 470px)
    {
        .white-block {padding-top: 25%;}
        .colour-block {padding-top: 25%;}
    }
    @media screen and (max-width: 390px)
    {
        .white-block {padding-top: 30%;}
        .colour-block {padding-top: 30%;}
    }
    @media screen and (max-width: 320px)
    {
        .white-block {padding-top: 35%;}
        .colour-block {padding-top: 35%;}
    }
    @media screen and (max-width: 280px)
    {
        .white-block {padding-top: 40%;}
        .colour-block {padding-top: 40%;}
    }

    @media screen and (max-width: 250px)
    {
        .white-block {padding-top: 45%;}
        .colour-block {padding-top: 45%;}
    }


/* Listas de elementos con imagen de checkbox */
.colour-block p img
{
    width: 30px;
}

.colour-block p label
{
    font-size: 16px;
    font-family: arial;
}

.white-block p label
{
    font-size: 16px;
    font-family: arial;
}

    @media screen and (max-width: 470px)
    {
        .white-block p label {font-size: 14px;}
        .colour-block p label {font-size: 14px;}
    }
    @media screen and (max-width: 390px)
    {
        .white-block p label {font-size: 12px;}
        .colour-block p label {font-size: 12px;}
    }