.vtview__afterheader {
    background: #2beda3 url('../img/pattern.svg') center center repeat;
    background-size: 75px;
    padding: 0 20px;
    height: 52px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.vtview__afterheader .wrapper{
    position: relative;
    display: grid;
}

.vtview__features {
    width: 50%;
    max-width: 450px;
    min-width: 370px;
}

.vtview__afterheader h1{
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.6;
    color: #1f1f29;
    text-align: center;
}

.vtview__afterheader .vtview__back-button {
    font-weight: normal;
    font-size: 16px;
    line-height: 1.6;
    color: #1f1f29;
    position: absolute;
    left: 0;
    top: 15px;
    margin: 0;
}

.vtview__afterheader .vtview__call-button {
    font-weight: normal;
    font-size: 16px;
    line-height: 1.6;
    color: #1f1f29;
    position: absolute;
    right: 0;
    top: 15px;
    margin: 0;
}

.vtview__afterheader .vtview__call-button strong {
    font-weight: 400;
}

.vtview__afterheader a {
    color: #1f1f29;
    font-weight: 700;
    text-decoration: underline;
}

.vtview__afterheader p span{
    font-weight: 700;
}

.vtview__pic-description {
    padding-top: 100px;
    padding-bottom: 100px;
}

.vtview__map-roof {
    width: 75%;
}

.vtview__pic-description h2{
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
    color: #1f1f29;
}

.vtview__pic-description h2 span{
    font-weight: 700;
}

.vtview__solar-feature {
    display: flex;
    margin-top: 30px;
}

.vtview__iconwrapper{
    min-width: 46px;
    width: 46px;
    height: 46px;
    background: #00ffb0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    border-radius: 30px;
}

.vtview__pic-description h3{
    font-weight: 700;
    font-size: 16px;
    line-height: 1.6;
    color: #1f1f29;
    margin: 0 0 5px 0;
}

.vtview__pic-description p{
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: #4F4F4F;
    margin: 0;
}

.vtview__pic-description {
    justify-content: space-between;
}

.vtview__map-roof {
    width: 60%;
    max-width: none;
    margin-top: 0;
}

.vtview__map-roof img {
    border-radius: 25px;
    width: 100%;
    height: 100%;
    max-height: 310px;
    object-fit: cover;
    display: block;
}

.vtview__cta{
    padding: 50px 0;
    background: #2beda3 url('../img/pattern.svg') center center repeat;
    background-size: 75px;
}

.vtview__cta .wrapper{
    align-items: center;
}

.vtview__cta .first{
    flex: 0 0 40%;
}

.vtview__cta .first h2{
    font-weight: normal;
    font-size: 24px;
    line-height: 1.4;
    color: #1f1f29;
    margin: 0;
}

.vtview__cta .first h2 span{
    font-weight: 700;
}

.vtview__cta .card{
    background: #fff;
    padding: 20px 50px;
    border-radius: 25px;
    box-shadow: 3px 4px 34px rgb(0 0 0 / 8%);
    margin: 0 10px;
}

.vtview__cta .cards__holder{
    justify-content: space-between;
    width: 100%;
}

.vtview__cta h3 {
    font-weight: 700;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
    text-transform: uppercase;
    color: #1f1f29;
    margin:0;
}

.vtview__cta h4{
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
    color: #1f1f29;
    margin:0;
}

.vtview__cta .card .row{
    align-items: center;
    justify-content: center;
}

.vtview__cta .card img{
    margin-right: 10px;
    position: relative;
    z-index: 9;
}

.vtview__cta .card p{
    font-weight: 700;
    font-size: 13px;
    line-height: 1.6;
    color: #1f1f29;
    margin:0;
}


.vtview__cta .card p span{
    font-size: 25px;
    line-height: 1;
}

.vtview__cta .card__icon{
    position: relative;
}

.vtview__cta .card__icon::before{
    content: '';
    width: 25px;
    height: 25px;
    border-radius: 25px;
    position: absolute;
    left: -10px;
    bottom: -5px;
    display: block;
}

.vtview__cta .globe:before{
    background-color: #5afff5;
    left: -2px;
    bottom: -3px;
}

.vtview__cta .car:before{
    background-color: #ff8ecb;
    left: -9px;
    bottom: 5px;
}

.vtview__chart{
    padding: 80px 0;
}

.vtview__chart h2{
    font-weight: 700;
    font-size: 22px;
    line-height: 1.5;
    color: #1f1f29;
    margin:0;
}

.vtview__chart .text__card{
    padding: 25px 0;
}

.vtview__chart .text__card p {
    margin-bottom: 0;
    font-size: 17px;
    line-height: 1.5;
    margin-top: 10px;
}

.vtview__chart .text__card:not(:last-child){
    border-bottom: 1px solid #e9e9e9;
}

.vtview__chart .text__card h3{
    font-weight: 700;
    font-size: 20px;
    line-height: 1.6;
    color: #1f1f29;
    margin:0;
}

.vtview__chart .text__card h3 span{
    background: #00ffb0;
    padding: 0 6px;
}

.vtview__chart .text__card h3 p{
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
    color: #787878;
    margin: 0;
}

.vtview__chart .col-2-3{
    padding-left: 5%;
}

.vtview__table--section{
    padding: 80px 0;
}

.vtview__table--header{
    margin-bottom: 40px;
}

.vtview__table--header .row{
    justify-content: space-between;
    align-items: center;
}

.vtview__table--header h2{
    font-weight: 700;
    font-size: 24px;
    line-height: 1.6;
    color: #1f1f29;
}

.vtview__table--header h2 span{
    background: #00ffb0;
    padding: 0 3px;
}

.vtview__blue--button{
    display: block;
    text-decoration: none;
    background: #222;
    border-radius: 4px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    color: #FFFFFF;
    padding: 5px 15px;
    transition: all 0.4s;
    border: 0;
    outline: 0;
}

.vtview__blue--button span{
    color:#F5A422;
}

.vtview__blue--button:hover{
    background: #030f3b;
}

.vtview__table--header p{
    font-weight: normal;
    font-size: 16px;
    line-height: 1.7;
    color: #626262;
    margin: 0;
    margin-top: 20px;
}

.vtview__table{
    width: 100%;
}

.vtview__table tr th{
    font-weight: normal;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    color: #8D8D8D;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    width: 1.6;
    text-align: left;
}

.vtview__table tr td{
    font-weight: 500;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    padding: 15px 0;
}

.vtview__table tr td .vtview__kitprice-discount {
    color: #8d8d8d;
    text-decoration: line-through;
    display: block;
    font-size: 13px;
    margin-bottom: -4px;
}

.vtview__table tr td .vtview__kit-company {
    display: none;
}

.vtview__table tr td h4 {
    margin: 0;
    color: #1f1f29;
    font-size: 14px;
}

.vtview__table tr td p {
    margin: 0;
}

.vtview__table tr td img {
    max-width: 85px;
}

.vtview__table tr:not(:last-child) td{
    border-bottom: 1px solid #eee;
}

.vtview__table tr td.bold{
    font-weight: 700;
    font-size: 17px;
    line-height: 1.6;
    color: #1f1f29;
}

.vtview__table tr .vtview__warranty {
    font-size: 13px;
}

.vtview__table tr .vtview__kitprice {
    text-align: center;
}

.vtview__table tr td.bolder{
    font-weight: 700;
    font-size: 20px;
    line-height: 1.6;
    color: #1f1f29;
}

.vtview__table tr td.thene{
    font-weight: 700;
    font-size: 13px;
    line-height: 1.6;
    color: #8D8D8D;
}
.vtview__table tr{
    padding: 15px 0;
}

.vtview__table tr:not(:last-child){
    border-bottom: 1px solid #eee;
}

.vtview__table .holaluz {
    max-width: 180px;
    margin-left: -30px;
}

.vtview__table .oaldro{
    margin-left: -20px;
}

.vtview__btn{
    padding: 12px 15px;
    border-radius: 8px;
    color: #fff;
    transition: all 0.4s;
    text-decoration: none;
}

.vtview__btn.gold{
    background: #F38F00;
}

.vtview__btn.gold:hover{
    background: #9c5c01;
}

.vtview__btn.gray__blue{
    background: #2370AC;;
}

.vtview__btn.gray__blue:hover{
    background: #083f69;;
}

.vtview__btn.red{
    background: #E6017D;
}

.vtview__btn.red:hover{
    background: #961359;
}

.vtview__btn.navy__blue{
    background: #4A2680;
}

.vtview__btn.navy__blue:hover{
    background: #341b5a;
}

.vtview__btn.dark__blue{
    background: #3250B4;
}

.vtview__btn.dark__blue:hover{
    background: #203579;
}

.vtview__table .last{

}

.vtview__center--button{
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

.vtview__green--button{
    padding: 8px 20px;
    background:#00ffb0;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.6;
    color: #1f1f29;
    text-decoration: none;
    text-align: center;
}

.vtview__poweredby {
    border-top: #ddd dotted 1px;
    padding-top: 50px;
    margin-top: 70px;
    color: #333;
}

.vtview__poweredby a {
    text-decoration: none;
    color: #1f1f29;
}

.vtview__poweredby a span {
  position: relative;
}

.vtview__poweredby a span::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 0;
  border-bottom: #5e5e5e dotted 1px;
}

@media (max-width: 1400px){
    .wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }
}


@media (max-width: 1200px){
    .vtview__cta .card{
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .vtview__cta h4 {
        font-size: 14px;
        text-align: left;
        color: #666;
    }
}

@media (max-width: 768px){

    .vtview__features {
        width: 100%;
        max-width: none;
        min-width: auto;
    }

    .vtview__pic-description{
        flex-direction: column;
    }

    .vtview__afterheader h1{
        font-size: 17px;
    }

    .vtview__iconwrapper {
        min-width: 35px;
        width: 35px;
        height: 35px;
    }

    .vtview__iconwrapper img {
        transform: scale(0.8);
    }

    .vtview__pic-description {
        padding: 30px;
        padding-bottom: 0;
    }

    .vtview__pic-description h3 {
        font-size: 16px;
    }

    .vtview__pic-description p {
        font-size: 16px;
        font-weight: 500;
    }

    .vtview__afterheader h1 {
        display: none;
    }

    .vtview__pic-description .col-1-4{
        flex: 0 0 100%;
    }

    .vtview__wrapper{
        display: flex;
        flex-direction: column;
    }

    .vtview__map-roof {
        margin: 40px -40px 0;
        width: calc(100% + 70px);
    }

    .vtview__map-roof img {
        border-radius: 0;
        line-height: 0;
    }

    .vtview__wrapper .row{
        flex: 0 0 40%;
    }

    .vtview__wrapper--center{
        display: flex;
        justify-content: center;
    }

    .vtview__pic-description .row{
        padding: 15px;
        border: 1px solid #eee;
        border-radius: 5px;;
    }

    .vtview__cta > .row{
        flex-direction: column;
    }

    .vtview__cta .first h2{
        text-align: center;
        margin-bottom: 50px;
    }

    .vtview__chart{
        flex-direction: column;
    }

    .vtview__chart .col-2-3 {
        padding-left: 0px;
    }

    .vtview__btn{
        display: block;
        text-align: center;
        margin-top: 7px;
        font-size: 14px;
        padding: 12px 15px;
        margin-bottom: 20px;
        font-weight: 700;
        line-height: 1.3;
    }

    .vtview__table--header .row{
        align-items: center;
    }

    .vtview__table tr td .vtview__kit-company {
        display: inline-block;
    }

}

@media (max-width: 600px){
    .vtview__afterheader p{
        text-align: center;
        margin-bottom: 15px;
        position: relative;
        top: 0;
    }

    .vtview__wrapper{
        flex-direction: column;
    }

    .vtview__wrapper .row,
    .vtview__wrapper--center .row{
        flex: 0 0  100%;
    }

    .vtview__wrapper--center{
        display: block;
    }

    .vtview__cta .cards__holder{
        flex-direction: column;
    }

    .vtview__cta .card:not(:last-child){
        margin-bottom: 20px;
    }

    .vtview__chart #canvas_amortizacion{
        margin-top: 50px;
        height: 400px;
    }

    .vtview__table--header .row{
        flex-direction: column;
    }

    .vtview__table--header h2{
        text-align: center;
    }


    /* Force table to not be like tables anymore */
    .vtview__table table,  .vtview__table thead,
    .vtview__table tbody,  .vtview__table th,
    .vtview__table td,  .vtview__table tr {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
    .vtview__table thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.vtview__table td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 155px !important;
        text-align: left !important;
	}

	.vtview__table td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 0;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
        font-weight: normal;
        font-size: 14px;
        line-height: 1.6;
        color: #8D8D8D;
        padding: 15px 0;
        width: 1.6;
        text-align: left;
	}

    .vtview__table tr:first-child{
        display: none;
    }

    .vtview__table tr td.last {
        padding-left: 0 !important;
    }

    .maker-view-test .vtview__table tr td:nth-child(1) {
        border-bottom: 0;
    }

    .maker-view-test .vtview__table tr td:nth-child(2) {
        padding-top: 0;
    }

	/*
	Label the data
	*/

    .maker-view-test .vtview__table td:nth-of-type(1):before { content: "EMPRESAS"; }
	.maker-view-test .vtview__table td:nth-of-type(2):before { content: "TIPO EMPRESA"; }
	.maker-view-test .vtview__table td:nth-of-type(3):before { content: "POTENCIA"; }
	.maker-view-test .vtview__table td:nth-of-type(4):before { content: "GARANTÍA"; }
	.maker-view-test .vtview__table td:nth-of-type(5):before { content: "TRÁMITES"; }
    .maker-view-test .vtview__table td:nth-of-type(6):before { content: "DESDE"; }
    .maker-view-test .vtview__table td:nth-of-type(7):before { content: "DTO. VATIOMETRO"; }
    .maker-view-test .vtview__table td:nth-of-type(8):before { content: "FINANCIACIÓN"; }
	.maker-view-test .vtview__table td:nth-of-type(9):before { content: ""; }
    .maker-view-test .vtview__table td.last{
        text-align: center;
        border-bottom: none !important;
    }

	.vtview__table td:nth-of-type(1):before { content: "INSTALADOR"; }
	.vtview__table td:nth-of-type(2):before { content: "POTENCIA"; }
	.vtview__table td:nth-of-type(3):before { content: "GARANTÍA"; }
	.vtview__table td:nth-of-type(4):before { content: "TRÁMITES"; }
	.vtview__table td:nth-of-type(5):before { content: "ENTREGA"; }
    .vtview__table td:nth-of-type(6):before { content: "PRECIO"; }
    .vtview__table td:nth-of-type(7):before { content: "DTO. VATIOMETRO"; }
    .vtview__table td:nth-of-type(8):before { content: "FINANCIACIÓN"; }
	.vtview__table td:nth-of-type(9):before { content: ""; }
    .vtview__table td.last{
        text-align: center;
        border-bottom: none !important;
    }

    .vtview__table--brand td:nth-of-type(1):before { content: attr( data-name ); }
	.vtview__table--brand td:nth-of-type(2):before { content: attr( data-name ); }
	.vtview__table--brand td:nth-of-type(3):before { content: attr( data-name ); }
	.vtview__table--brand td:nth-of-type(4):before { content: attr( data-name ); }
	.vtview__table--brand td:nth-of-type(5):before { content: attr( data-name ); }
    .vtview__table--brand td:nth-of-type(6):before { content: attr( data-name ); }
    .vtview__table--brand td:nth-of-type(7):before { content: attr( data-name ); }
    .vtview__table--brand td:nth-of-type(8):before { content: attr( data-name ); }
	.vtview__table--brand td:nth-of-type(9):before { content: attr( data-name ); }

    .vtview__table td.last:not(:last-child){
        margin-bottom: 50px;
    }

    .vtview__cta .card p span {
        font-size: 18px;
    }

    .vtview__cta .card .vtview__card-row {
        width: 55%;
        justify-content: flex-start;
    }

    .vtview__cta h3 {
        text-align: left;
        width: 45%;
    }

}

@media (max-width: 480px){
    .compare-view .vtview__afterheader {
        height: 40px;
        top: 44px;
    }

    .compare-view .vtview__afterheader .vtview__back-button {
        top: 7px;
    }

    .compare-view .vtview__afterheader .vtview__call-button {
        top: 7px;
    }
}