/* ==========================================================================
 Page Header
 ========================================================================== */

header.main {
    min-height: 45rem;
    padding-bottom: 11rem;
    background: url("http://static.mipuf.es/landings/gran-hermano/img/cabecera-gran-hermano.jpg") no-repeat center center;
    background-size: cover;
}
header.main h1 {
    margin-bottom: 1rem;
    font-size: 8rem;
    line-height: 1em;
}
header.main h2 {
    color: #fcfcfc;
    font-weight: 500;
    font-size: 4.8rem;
    letter-spacing: 0;
}
#logo {
    float: left;
    margin: 3.4rem 0 4.6rem -4.5%;
}
#logo img {
    max-width: 22rem;
    height: auto;
}
@media (max-width: 999px) {
    header.main {
        min-height: 40rem;
    }
    header.main h1 {
        font-size: 7rem;
        line-height: 1em;
    }
    header.main h2 {
        font-size: 4rem;
    }
}
@media (max-width: 799px) {
    header.main {
        min-height: 34rem;
    }
    header.main h1 {
        font-size: 5rem;
        line-height: 1em;
    }
    header.main h2 {
        font-size: 3.4rem;
    }
    #logo {
        margin: 2.4rem 0 2.6rem -4.5%;
    }
    #logo img {
        max-width: 18rem;
    }
}
@media (max-width: 639px) {
    header.main {
        background-position: 10% 50%;
    }
}
@media (max-width: 479px) {
    header.main {
        background-position: 30% 50%;
    }
    #logo {
        margin: 2rem 0 2rem -4.5%;
    }
}

/* ==========================================================================
 Section Comparativa precios
 ========================================================================== */

#compare {
    padding-bottom: 8rem;
    background-color: #f2efe8;
}
#compare:before {
    box-shadow: none;
}
#compare .container {
    -webkit-transform: translateY(-9rem);
    transform: translateY(-9rem);
}

/* custom width and margin of columns */

#compare .three.columns {
    width: 24%;
}
#compare .three.columns:nth-child(2) {
    margin-left: 0;
    width: 28%;
}
#compare .three.columns:nth-child(3) {
    margin-left: 0;
}
.puf-table .puf-name {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 100%;
    margin-bottom: -10rem;
}
.puf-table .puf-name h2 {
    position: absolute;
    bottom: 1.2rem;
    left: 0;
    width: 100%;
    margin: 0;
    text-align: center;
}
.puf-table .puf-name img {
    position: absolute;
    bottom: 5.5rem;
    box-sizing: border-box;
    max-width: 100%;
    padding: 0 5%;
}
.puf-table .puf-name .price {
    position: absolute;
    bottom: 6.5rem;
    right: 50%;
    width: 7.6rem;
    height: 4.7rem;
    background: url("http://static.mipuf.es/landings/img/land01/price.png");
    background-size: 100% 100%;
    color: #fff;
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 4.2rem;
    letter-spacing: -.1rem;
    text-align: center;
}
.puf-table .puf-name .price span {
    font-size: 1.5rem;
    vertical-align: 10%;
}

/* puf price and especifications table */

.puf-table {
    position: relative;
    z-index: 1;
}
.puf-table .puf-specs {
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(0, 0, 0, .2);
    font: 400 normal 1.4rem/2.2rem 'Open Sans', sans-serif;
}
.puf-table .puf-specs ul {
    padding: 10rem 0 0;
    margin: 0;
    list-style: none;
}
.puf-table .puf-specs li {
    position: relative;
    height: 2.2rem;
    margin: 0;
    text-align: center;
    color: #00b5d9;
}
.puf-table .puf-specs li:nth-child(odd) {
    background-color: rgba(0, 0, 0, .1);
}
.puf-table .puf-specs .calltoaction {
    padding: 2rem 2rem 1rem;
    text-align: center;
}
.puf-table .puf-specs .button {
    width: 100%;
}
.puf-table .puf-specs .check-on {
	display: inline-block;
	width: 1.4rem;
	height: 1.1rem;
	text-indent: 3rem;
	background: url("http://static.mipuf.es/landings/img/check.png");
	background-size: 1.4rem 1.1rem;
	overflow: hidden;
}
.puf-table .puf-specs .check-off {
	display: inline-block;
	width: 1.1rem;
	height: 1.1rem;
	text-indent: 3rem;
	background: url("http://static.mipuf.es/landings/img/uncheck.png");
	background-size: 1.1rem 1.1rem;
	overflow: hidden;
}
.puf-table .puf-specs .button {
    padding-left: 0;
    padding-right: 0;
}
.puf-table.featured {
    z-index: 2;
}
.puf-table.featured .puf-name {
    margin-top: -14.3%;
    margin-bottom: -12rem;
}
.puf-table.featured .puf-name:before {
    content: "";
    position: absolute;
    bottom: 55%;
    left: -17%;
    width: 12.4rem;
    height: 6rem;
    background: url("//static.mipuf.es/landings/img/land01/recomendado.png");
    background-size: 100% 100%;
}
.puf-table.featured .puf-name h2 {
    bottom: 1.5rem;
    font-size: 3.2rem;
}
.puf-table.featured .puf-name img {
    bottom: 6.5rem;
    padding: 0 15%;
}
.puf-table.featured .puf-name .price {
    bottom: 7rem;
    width: 10.6rem;
    height: 6.6rem;
    font-size: 2.6rem;
    line-height: 6.2rem;
}
.puf-table.featured .puf-name .price span {
    font-size: 1.7rem;
    vertical-align: 10%;
}
.puf-table.featured .puf-specs {
    background: #fff;
}
.puf-table.featured .puf-specs ul {
    padding: 12rem 0 0;
}
.puf-table.featured .puf-specs .calltoaction {
    padding-bottom: 1.2rem;
}
#compare .three.columns .puf-table .puf-specs li:before {
    display: none;
    content: attr(data-name);
    position: absolute;
    left: -75%;
    width: 70%;
    height: 100%;
    padding-left: 5%;
    background-color: inherit;
    color: #382b26;
    text-align: left;
    box-shadow: inset -6px 0px 6px -6px rgba(0, 0, 0, .2);
}
#compare .three.columns:first-child .puf-table .puf-specs li:before {
    display: block;
}
@media (max-width: 1199px) {
    #compare {
        padding-bottom: 10rem;
    }
    #compare .container {
        -webkit-transform: translateY(-5rem);
        transform: translateY(-5rem);
    }
    .puf-table.featured .puf-name:before {
        bottom: 62%;
        left: -26%;
    }
}
@media (max-width: 999px) {
    #compare {
        padding-bottom: 12rem;
    }
    #compare .container {
        -webkit-transform: translateY(-2.5rem);
        transform: translateY(-2.5rem);
    }
    #compare .row {
        width: 110%;
    }
    .puf-table.featured .puf-name:before {
        bottom: 70%;
        left: -30%;
    }
    .puf-table .puf-specs .calltoaction {
        padding-left: .6rem;
        padding-right: .6rem;
    }
}
@media (max-width: 799px) {
    #compare {
        padding-bottom: 15rem;
    }
    #compare .container {
        -webkit-transform: translateY(1.5rem);
        transform: translateY(1.5rem);
    }
    #compare .row {
        width: 114%;
        margin-left: -4%;
    }
    .puf-table .puf-name h2 {
        font-size: 2.4rem;
    }
    .puf-table .puf-name img {
        padding: 0;
    }
    .puf-table .puf-name .price {
        bottom: 6.5rem;
        right: 50%;
        width: 6.6rem;
        height: 4.08rem;
        font-size: 2rem;
    }
    .puf-table .puf-specs .button {
        font-size: 1.4rem;
    }
    .puf-table.featured .puf-name:before {
        bottom: 82%;
        left: -56%;
    }
    .puf-table.featured .puf-name h2 {
        font-size: 2.8rem;
    }
    .puf-table.featured .puf-name img {
        padding: 0 5%;
    }
    .puf-table.featured .puf-name .price {
        width: 8.6rem;
        height: 5.3rem;
        font-size: 2.6rem;
        line-height: 5.2rem;
    }
}

/* one column */

@media (max-width: 639px) {
    #compare {
        padding-bottom: 6rem;
    }
    #compare .container {
        width: 75%;
        -webkit-transform: translateY(-8rem);
        transform: translateY(-8rem);
    }
    #compare .row {
        width: 100%;
        margin-left: 0;
    }
    #compare .three.columns {
        width: 100% !important;
    }
    #compare .three.columns .puf-table .puf-specs li:before {
        display: block;
        left: 0;
        width: auto;
        padding-left: 5%;
        background-color: transparent;
        box-shadow: none;
    }
    /* reordenar columnas cuando ocupan todo el ancho para mostrar primero la columna central (featured) */
    #compare .row {
        display: -webkit-flex;
        -webkit-flex-flow: row wrap;
        display: -ms-flex;
        -ms-flex-direction: column;
        -ms-flex-wrap: wrap;
        -ms-flex-flow: row wrap;
        display: flex;
        flex-flow: row wrap;
    }
    #compare .three.columns:nth-child(1) {
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2;
    }
    #compare .three.columns:nth-child(2) {
        -webkit-order: 1;
        -ms-flex-order: 2;
        order: 1;
    }
    #compare .three.columns:nth-child(3) {
        -webkit-order: 3;
        -ms-flex-order: 2;
        order: 3;
    }
    .puf-table {
        padding-top: 4rem;
    }
    .puf-table .puf-name {
        padding-top: 25rem;
    }
    .puf-table .puf-name img {
        padding: 0 23%;
    }
    .puf-table.featured .puf-name:before {
        bottom: 65%;
        left: -14%;
    }
    .puf-table.featured .puf-name {
        margin-top: 0;
    }
    .puf-table.featured .puf-name img {
        padding: 0 16%;
    }
}
@media (max-width: 479px) {
    #compare .container {
        width: 80%;
        padding: 0;
        /*transform:translateY(0);*/
    }
    .puf-table .puf-name img {
        padding: 0 10%;
    }
    .puf-table .puf-specs li {
        padding-left: 11rem;
    }
    .puf-table.featured .puf-name:before {
        bottom: 69%;
        left: -12%;
        width: 9rem;
        height: 4.35rem;
    }
    .puf-table.featured .puf-name img {
        padding: 0 14%;
    }
}

/* ==========================================================================
 Section El regalo mas original
 ========================================================================== */

#gift {
    padding: 4rem 0 7rem;
}
#gift .columns img {
    max-width: 100%;
    margin-left: -10%;
}
#gift h2 {
    margin-bottom: 5rem;
    font-weight: 300;
    font-size: 4.8rem;
    line-height: 1.1em;
    letter-spacing: -.1rem;
}
#gift h3 {
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
    font-weight: 700;
    font-size: 7.4rem;
    line-height: 1em;
    color: #aeabaa;
}
#gift h3:after {
    content: "";
    position: absolute;
    top: -1.8rem;
    right: -2.5rem;
    display: block;
    width: 4rem;
    height: 4rem;
    background: url("//static.mipuf.es/landings/img/land01/target.png") no-repeat 0 0;
    background-size: 100% 100%;
}
#gift .text {
    padding: 2rem;
    font-size: 2.4rem;
    line-height: 1.1em;
}
#gift .calltoaction {
    text-align: center;
}
#gift .button {
    width: 80%;
    margin-top: 7rem;
}
@media (max-width: 1199px) {
    #gift {
        padding-bottom: 10rem;
    }
    #gift h2 {
        font-size: 4.2rem;
    }
    #gift h3 {
        font-size: 6rem;
    }
    #gift h3:after {
        right: -3rem;
    }
    #gift .text {
        font-size: 2.1rem;
    }
    #gift .button {
        margin-top: 4rem;
    }
}
@media (max-width: 999px) {
    #gift {
        padding-bottom: 10rem;
    }
    #gift h2 {
        font-size: 3rem;
    }
    #gift h3 {
        font-size: 4.2rem;
    }
    #gift h3:after {
        right: -4rem;
    }
    #gift .text {
        font-size: 2rem;
    }
    #gift .button {
        width: 90%;
        margin-top: 2rem;
    }
}
@media (max-width: 799px) {
    #gift .row {
        width: 120%;
        margin-left: -20%;
    }
    #gift .text {
        font-size: 1.8rem;
    }
}
@media (max-width: 639px) {
    #gift {
        padding-top: 0;
    }
    #gift .row {
        width: 100%;
        margin-left: 0;
    }
    #gift .columns img {
        display: block;
        max-width: 100%;
        margin: 0 auto;
    }
    #gift h2 {
        font-size: 3.6rem;
        margin-top: 1rem;
    }
    #gift h3 {
        font-size: 6.2rem;
    }
}
@media (max-width: 479px) {
    #gift h2 {
        font-size: 3rem;
    }
    #gift h3 {
        font-size: 4.2rem;
    }

}

/* ==========================================================================
 Section Clientes
 ========================================================================== */

#clients {
    padding: 0rem 0 8rem ;
}
#clients:before {
    border-top: 1rem solid #00b5d9;
}

/* ==========================================================================
 Section Mipuf.es
 ========================================================================== */

#features {
    padding: 15rem 0 14rem;
    font: 400 normal 1.6rem/1.2 'Open Sans', sans-serif;
}
#features:before {
    border-top: 1rem solid #f7e017;
    -webkit-transform: rotate3d(0, 20, 1, 4deg);
    transform: rotate3d(0, 20, 1, 4deg);
}
#features h2 {
    font-family: Museo, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1;
}
#features h3 {
	font-family: Museo, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1;
    font-weight: 600;
    font-size: 1.6rem;
}
@media (max-width: 639px) {
    #features {
        padding: 7rem 0 9rem;
    }
}