/*
Theme Name: Lorenzo
Theme Page: CONDICIONES CLARAS
Theme Marca: PEUGEOT
Theme URI: https://plugins.div-it.com.ar/Lorenzo
Author: Dex
Author URI: https://dex360.net
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Lorenzo

Lorenzo WordPress Theme, (C) 2022-2023 WP Engine.
Lorenzo is distributed under the terms of the GNU GPL.
*/

/*   [Table content] CONDICIONES CLARAS - PEUGEOT
*
*       01. GENERAL
*			_ 01.01. html + body
*
*       02. HEADER
*
*       03. MAIN CONTENT
*           _ 03.01. secccion-1--titulo-planes
*           _ 03.02. secccion-2--porque-elegir-plan
*           _ 03.03. secccion-3--tipos-planes
*           _ 03.04. secccion-4--planes-destacados
*           _ 03.05. secccion-5--planes-descargas
*           _ 03.06. formulario
*
*       04. FOOTER
*
*       05. RESPONSIVE
*
*/


/*--------------------------------------------------------------
# 01. GENERAL
--------------------------------------------------------------*/
html {
    margin: 0px !important;
}
.cc-peugeot {
	background-color: #404040;
    background-position:top center;
    background-repeat:no-repeat;
	background-size: cover;
    color: #000000 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px;
    padding:0px;
}
.page-condiciones-claras p {
    font-size:14px;
    line-height:120%;
    margin:0px;
}
.condiciones-claras-contenido .popup {
    padding-top: 30px;
}

/*--------------------------------------------------------------
# 02. HEADER
--------------------------------------------------------------*/
.header-logo-marca {
	background-color: #fff;
    padding:25px 0px 20px;
    text-align:center;
}
.header-logo-marca figure {
    margin: 0rem;
}
.header-logo-marca figure img {
    width:180px !important;
}


/*--------------------------------------------------------------
# 03. MAIN CONTENT
--------------------------------------------------------------*/
.condiciones-claras-contenido {
    background: linear-gradient(0deg, rgba(64,64,64,1) 0%, rgba(255,255,255,0) 48%);
}
.condiciones-claras-contenido h1,
.condiciones-claras-contenido h2,
.condiciones-claras-contenido h3 {
    color: #fff;
    padding:0px;
    margin:0px;
}
.condiciones-claras-contenido h1 {
    color:#1CA1DB;
    font-size:3em;
}
.condiciones-claras-contenido h1,
.condiciones-claras-contenido h3 {
    font-weight: bolder;
}

/* 03.01. secccion-1--titulo-planes
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


/* 03.02. secccion-2--porque-elegir-plan
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.cc-peugeot #secccion-2--porque-elegir-plan .pq-elegir-plan--item li {
    background-color: #1CA1DB;
    border-radius:10px;
    color: #fff;
    list-style: none;
    margin: 0px 0px 20px;
    padding: 10px 25px;
    width: 100%;
}
.cc-peugeot #secccion-2--porque-elegir-plan .pq-elegir-plan--item li p {
    margin:0px;
}

/* 03.03. secccion-3--tipos-planes
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.cc-peugeot #secccion-3--tipos-planes h3 {
    color:#fff;
}
.cc-peugeot #secccion-3--tipos-planes ul {
    padding:0px;
    margin:1rem 0 0;
}
.cc-peugeot #secccion-3--tipos-planes li {
    list-style: none;
    margin: 0px 0px 20px;
    padding: 0;
    position:relative;
    width: 94%;
}
.cc-peugeot #secccion-3--tipos-planes li h4 {
    color:#fff;
    border:1px solid white;
    border-radius:10px;
    font-weight:bolder;
    padding:5px 15px 3px;
}
.cc-peugeot #secccion-3--tipos-planes li p {
    color:#fff;
    margin:0px;
    font-size:13px;
}
.secccion-3--tipos-planes--bg {
	background: url('<?php echo get_template_directory_uri(); ?>/assets/img/condiciones-claras/cc-contenido-peugeot-tipos-planes-bg.png') no-repeat top right;
    background-size:50% 50%;
}

/* 03.04. secccion-4--planes-destacados
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.plan-destacado--imagen a {
    cursor:pointer;
}
#condiciones-claras--planes-destacados h3 {
    color:#fff;
    font-weight: 300;
}
#condiciones-claras--planes-destacados h4 {
    color:#1CA1DB;
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}
.cc-peugeot #secccion-4--planes-destacados {
    text-align:center;
}
.cc-peugeot #secccion-4--planes-destacados h5 {
    color:#FFF;
}
.plan-destacado--imagen {
    display: flex;
    justify-content: center;
}
/* carousel arrow */
#secccion-4--planes-destacados .carousel-control-next-icon, #secccion-4--planes-destacados .carousel-control-prev-icon {
    background: transparent no-repeat center center;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='60' version='1.1'%3E%3Cpolyline points='30 10 10 30 30 50' stroke='rgba(255, 255, 255, 1)' stroke-width='4' stroke-linecap='butt' fill='none' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    border: none;
    cursor: pointer;
    font-size: 0px;
    display: inline-block;
    height: 20px !important;
    opacity: 1 !important;
    outline: none;
    position: absolute;
    top: 50%;
    width: 15px !important;
    z-index: 9000;
}
#secccion-4--planes-destacados .carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='60' version='1.1'%3E%3Cpolyline points='10 10 30 30 10 50' stroke='rgba(255, 255, 255, 1)' stroke-width='4' stroke-linecap='butt' fill='none' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    right: 10px !important;
}
#secccion-4--planes-destacados .carousel-control-prev-icon {
    left: 0px !important;
}
#secccion-4--planes-destacados.my-5 {
    left: 0px !important;
}
#condiciones-claras--planes-destacados article .plan-destacado--imagen img {
    width: 100% !important;
    height: 100% !important;
}

/* 03.05. secccion-5--planes-descargas
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#secccion-5--planes-descargas.my-5 {
    margin:0px !important;
    padding:4rem 0px;
}
.planes-descargas--botones {
    display: flex;
    justify-content: center;
}
.planes-descargas--botones .btn-cc-peugeot {
    margin:0% 2%;
}
.btn-cc-peugeot {
    background-color: #1CA1DB;
    border-radius:50px;
    color: #fff;
    font-size:14px;
    font-weight:bold;
    list-style: none;
    margin: 0px 0px 20px;
    padding: 10px 25px;
    min-width: 40%;
}
.btn-cc-peugeot:hover {
    background-color:#000;
    text-decoration:none;
}
.btn-cc-peugeot * {
    color: #fff;
    text-align:center;
}


/* 03.06. formulario
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.popup .wpcf7-textarea,
.popup .wpcf7 select {
    width: 100% !important;
}
.popup .titleForm {
    font-size: 16px;
    margin-bottom: 1.5rem !important;
}
.popup input.wpcf7-form-control.wpcf7-submit {
    background-color: #1CA1DB !important;
    border-radius:20px !important;
    color: #fff;
    cursor: pointer;
    float: none !important;
    font-size:14px;
    font-weight:bold;
    height: auto !important;
    margin: 0px 0px 20px;
    min-width: 40%;
    padding: 10px 25px;
}
.popup input.wpcf7-form-control.wpcf7-submit:hover {
    background-color:#000 !important;
    text-decoration:none;
}


/*--------------------------------------------------------------
# 04. FOOTER
--------------------------------------------------------------*/
#footer-logos .container {
    max-width: 100% !important;
    width: 100% !important;
}
#footer-logos .col-12 {
    display: flex;
    justify-content: center;
    align-items: center;
}
#condiciones-claras-footer {
	background-color: #F4F4F4;
}
#footer-logos .container img {
    opacity:0.3;
}
#footer-logos .container a:hover img {
    opacity:1;
}
#footer-logos .container .footer-marca-logo-01 img {
    opacity:1;
    width: 100px;
}
.footer-marca-logo-02 img {
	width: 133px;
}
.footer-marca-logo-03 img {
	width: 66px;
}
.footer-marca-logo-04 img {
	width: 55px;
}
#footer-logos .container .footer-marca-logo-05 {
    cursor: default;
}
#footer-logos .container .footer-marca-logo-05 img {
    opacity:1;
    width: 95px;
}
.footer-marca-logo-06 img {
	width: 93px;
}
#footer-logos .container .footer-marca-logo-07 img {
    opacity:1;
    width: 99px;
}


/*--------------------------------------------------------------
# 05. RESPONSIVE
--------------------------------------------------------------*/
@media(max-width:600px) {
    .condiciones-claras-contenido h1,
    .condiciones-claras-contenido h2,
    .condiciones-claras-contenido h3,
    .condiciones-claras-contenido h4 {
        text-align:center;
    }
    .condiciones-claras-contenido h1 {
        font-size:1.8rem;
    }
    .condiciones-claras-contenido h2 {
        font-size:1.3rem;
    }
    .condiciones-claras-contenido h3 {
        font-size:1.5rem;
    }
    .page-condiciones-claras p {
        font-size:16px;
        line-height:140%;
    }
    .cc-peugeot #secccion-2--porque-elegir-plan .pq-elegir-plan--item li {
        padding: 20px 45px;
        transform: skewX(0deg);
        width:100%;
    }
    .cc-peugeot #secccion-2--porque-elegir-plan .pq-elegir-plan--item li * {
        transform: skewX(0deg);
    }
    #secccion-3--tipos-planes li:before {
        display:none;
    }
    #secccion-3--tipos-planes.my-5 {
        margin-top:0rem !important;
    }
    .cc-peugeot #secccion-3--tipos-planes li {
        padding: 2% 5%;
        width:100%;
    }
    .pq-elegir-plan--item {
        padding-left: 0px;
    }
    .cc-peugeot #secccion-3--tipos-planes li h4,
    .cc-peugeot #secccion-3--tipos-planes li p {
        text-align:center;
    }
    .planes-descargas--botones {
        display: block;
        padding-right: 8%;
    }
    .planes-descargas--botones .btn-cc-peugeot {
        margin:0% 3% 3%;
    }
    .btn-cc-peugeot {
        min-width: 95%;
        display: block;
    }
    #secccion-3--tipos-planes li:before {
        display:none;
    }
    #condiciones-claras-footer #footer-logos a {
        display: inline-block;
        width: 49%;
        min-height: 100px;
    }
    #condiciones-claras-footer #footer-logos a:last-child {
        float:left;
    }
    #secccion-4--planes-destacados .carousel-control-next-icon, #secccion-4--planes-destacados .carousel-control-prev-icon {
        height: 30px !important;
        width: 25px !important;
    }
    .plan-destacado--imagen {
        padding:0px 50px;
    }
    #footer-logos .col-12 {
        display: block;
    }
}
@media (min-width: 768px) {
    #secccion-3--tipos-planes .col-md-6:first-child {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    #secccion-3--tipos-planes .col-md-6:last-child {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
}