/*------
ExpressCTA v2 Styling
Developer: Carlos Diaz (carlos@expresscta.com)
Dealership: Hyundai of Wesley Chapel
------*/


/*--- containers ---*/

[ecta-container]
{ 
display: inherit;
;
}


/*--- ecta srp ---*/

[ecta-container][vehicle-type="new" i][ecta-placement="srp" i]
{ 
display: inherit;
;
}

[ecta-container][vehicle-type="pre-owned" i][ecta-placement="srp" i], 
[ecta-container][vehicle-type="preowned" i][ecta-placement="srp" i],
[ecta-container][vehicle-type="used" i][ecta-placement="srp" i],
[ecta-container][vehicle-type="cpo" i][ecta-placement="srp" i]
{ 
display: inherit;
;
}

[ecta-container][ecta-placement="srp" i] [ecta-pricealert-button-container]
{ 
display: none;
;
}


/*--- ecta vdp ---*/

[ecta-container][vehicle-type="new" i][ecta-placement="vdp" i]
{ 
display: inherit;
}

[ecta-container][vehicle-type="pre-owned" i][ecta-placement="vdp" i] [ecta-expressprice-button-container],
[ecta-container][vehicle-type="preowned" i][ecta-placement="vdp" i] [ecta-expressprice-button-container],
[ecta-container][vehicle-type="used" i][ecta-placement="vdp" i] [ecta-expressprice-button-container],
[ecta-container][vehicle-type="cpo" i][ecta-placement="vdp" i] [ecta-expressprice-button-container]
{ 
display: inherit;
}

[ecta-container][ecta-placement="vdp" i] [ecta-pricealert-button-container]
{ 
display: inherit;
}


/*--- global ---*/

[ecta-global-image-container] 
{ 
display: none;
} 


/*--- on screen ---*/
[ecta-container][ecta-placement="srp" i] [ecta-os-container]
{
display: block;
background:  !important;
border-radius: 7px !important;
padding: 1rem !important;
} 

[ecta-container][ecta-placement="vdp" i] [ecta-os-container]
{
display: block;
background:  !important;
border-radius: 7px !important;
padding: 1rem !important;
}

[ecta-container][ecta-placement="srp" i] [ecta-os-image-container]
{
width: 100%;
cursor: pointer;
min-height: 100px;
max-height: 200px;
background: url('https://assets.expresscta.com/476/image/ecta_graphic.gif');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}

[ecta-container][ecta-placement="vdp" i] [ecta-os-image-container] 
{
width: 100%;
cursor: pointer;
min-height: 100px;
max-height: 200px;
background: url('https://assets.expresscta.com/476/image/ecta_graphic.gif');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}

[ecta-container][ecta-placement="srp" i] [ecta-os-image], [ecta-container][ecta-placement="vdp" i] [ecta-os-image]
{
width: 100%;
height: auto;
} 

[ecta-container][ecta-placement="srp" i] [ecta-os-price-container], [ecta-container][ecta-placement="vdp" i] [ecta-os-price-container]
{
width: 100%;
display: none;
} 

[ecta-container][ecta-placement="srp" i] [ecta-os-label]
{
width: 100%;
color: #000000;
font-size: 12px; 
font-weight: bold;
font-size: 1rem !important;
text-align: center !important;
}

[ecta-container][ecta-placement="vdp" i] [ecta-os-label]
{
width: 100%;
color: #000000;
font-size: 12px; 
font-weight: bold; 
font-size: 1rem !important;
text-align: center !important;
}

[ecta-container][ecta-placement="srp" i] [ecta-os-price]
{
width: 100%;
color: #009900;
font-size: 20px; 
font-weight: bold; 
font-size: 2.5rem !important;
line-height: 2.5rem !important;
text-align: center !important;
}

[ecta-container][ecta-placement="vdp" i] [ecta-os-price]
{
width: 100%;
color: #009900;
font-size: 20px; 
font-weight: bold; 
font-size: 2.5rem !important;
line-height: 2.5rem !important;
text-align: center !important;
}


/*--- modal ---*/

.ecta-no-scroll
{ 
overflow: hidden; height: 100vh;
}

.ecta-fade-in-out
{ 
opacity: 0; 
transform: scale(0.8); 
transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; 
}

.ecta-fade-in-out.show
{ 
opacity: 1; 
transform: scale(1); 
}

#ectaModal
{ 
backdrop-filter: blur(1rem);
background-color: #88888880 !important;
}


/*--- button ---*/

[ecta-button-container]
{}

[ecta-btn]
{
width: 100%;
}

[ecta-container] a 
{
transition: all 0.3s;
}



/*--- new srp ---*/

[ecta-container][vehicle-type="new" i][ecta-placement="srp" i] [ecta-expressprice-button], 
[ecta-container][vehicle-type="new" i][ecta-placement="srp" i] [ecta-expressprice-button]:visited 
{ 
z-index: +1;
position: relative; 
text-decoration: none;
display: inline-block; 
text-align: center; 
width: 100%; 
background: #009d00 !important; 
font-weight: bold;
border-radius: 0px;
font-size: 16px;
color: transparent !important;
text-decoration: none !important;
}

[ecta-container][vehicle-type="new" i][ecta-placement="srp" i] [ecta-expressprice-button]::before
{
content: "\00a0"; /* Unicode for   */
}

[ecta-container][vehicle-type="new" i][ecta-placement="srp" i] [ecta-expressprice-button]::after
{
content: "Unlock Instant Price";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
justify-content: center;
text-align: center; 
width: 100%; 
font-weight: bold;
border-radius: 0px;
font-size: 16px;
color: #ffffff !important;
text-decoration: none !important;
background: transparent !important;
margin: 0 !important;
}

[ecta-container][vehicle-type="new" i][ecta-placement="srp" i] [ecta-expressprice-button]:hover, 
[ecta-container][vehicle-type="new" i][ecta-placement="srp" i] [ecta-expressprice-button]:active
{ 
position: relative; 
border-color: #017400 !important; 
background: #017400 !important; 
color: transparent !important; 
} 

[ecta-container][vehicle-type="new" i][ecta-placement="srp" i] [ecta-expressprice-button]:hover::after
{
content: "Unlock Instant Price";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffffff !important;

}


/*--- new vdp ---*/

[ecta-container][vehicle-type="new" i][ecta-placement="vdp" i] [ecta-expressprice-button], 
[ecta-container][vehicle-type="new" i][ecta-placement="vdp" i] [ecta-expressprice-button]:visited 
{ 
z-index: +1;
position: relative; 
text-decoration: none;
display: inline-block; 
text-align: center; 
width: 100%; 
background: #009d00 !important; 
font-weight: bold;
border-radius: 0px;
font-size: 16px;
color: transparent !important;
text-decoration: none !important;
padding: .5rem 0 !important;
margin-bottom: 1rem !important;
}

[ecta-container][vehicle-type="new" i][ecta-placement="vdp" i] [ecta-expressprice-button]::before
{
content: "\00a0"; /* Unicode for   */
}

[ecta-container][vehicle-type="new" i][ecta-placement="vdp" i] [ecta-expressprice-button]::after
{
content: "Unlock Instant Price";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
justify-content: center;
text-align: center; 
width: 100%; 
font-weight: bold;
border-radius: 0px;
font-size: 16px;
color: #ffffff !important;
text-decoration: none !important;
padding: .5rem 0 !important;
margin-bottom: 1rem !important;
background: transparent !important;
margin: 0 !important;
}

[ecta-container][vehicle-type="new" i][ecta-placement="vdp" i] [ecta-expressprice-button]:hover, 
[ecta-container][vehicle-type="new" i][ecta-placement="vdp" i] [ecta-expressprice-button]:active
{ 
position: relative; 
border-color: #017400 !important; 
background: #017400 !important; 
color: transparent !important; 
} 

[ecta-container][vehicle-type="new" i][ecta-placement="vdp" i] [ecta-expressprice-button]:hover::after
{
content: "Unlock Instant Price";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffffff !important;
}


/*--- preowned srp ---*/


[ecta-container][vehicle-type="preowned" i][ecta-placement="srp" i] [ecta-expressprice-button], 
[ecta-container][vehicle-type="preowned" i][ecta-placement="srp" i] [ecta-expressprice-button]:visited 
{ 
z-index: +1;
position: relative; 
text-decoration: none;
display: inline-block; 
text-align: center; 
width: 100%; 
background: #009d00 !important; 
font-weight: bold;
border-radius: 0px;
font-size: 16px;
color: transparent !important;
text-decoration: none !important;
}

[ecta-container][vehicle-type="preowned" i][ecta-placement="srp" i] [ecta-expressprice-button]::after
{
content: "Unlock Instant Price";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
display: inline-block; 
text-align: center; 
width: 100%; 
font-weight: bold;
border-radius: 0px;
font-size: 16px;
color: #ffffff !important;
text-decoration: none !important;
background: transparent !important;
margin: 0 !important;
}

[ecta-container][vehicle-type="preowned" i][ecta-placement="srp" i] [ecta-expressprice-button]:hover, 
[ecta-container][vehicle-type="preowned" i][ecta-placement="srp" i] [ecta-expressprice-button]:active
{ 
position: relative; 
border-color: #017400 !important; 
background: #017400 !important; 
color: transparent !important; 
} 

[ecta-container][vehicle-type="preowned" i][ecta-placement="srp" i] [ecta-expressprice-button]:hover::after
{
content: "Unlock Instant Price";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffffff !important;
}


/*--- preowned vdp ---*/

[ecta-container][vehicle-type="preowned" i][ecta-placement="vdp" i] [ecta-expressprice-button], 
[ecta-container][vehicle-type="preowned" i][ecta-placement="vdp" i] [ecta-expressprice-button]:visited
{ 
z-index: +1;
position: relative; 
text-decoration: none; 
display: inline-block; 
text-align: center; 
width: 100%; 
background: #009d00 !important; 
color: transparent !important; 
font-weight: bold ; 
border-radius: 0px; 
font-size: 16px; 
text-decoration: none !important;
padding: .5rem 0 !important;
} 

[ecta-container][vehicle-type="preowned" i][ecta-placement="vdp" i] [ecta-expressprice-button]::after
{
content: "Unlock Instant Price";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none; 
display: inline-block; 
text-align: center; 
width: 100%; 
font-weight: bold; 
border-radius: 0px; 
font-size: 16px ; 
color: #ffffff !important;
text-decoration: none !important;
padding: .5rem 0 !important;
background: transparent !important;
margin: 0 !important;
}

[ecta-container][vehicle-type="preowned" i][ecta-placement="vdp" i] [ecta-expressprice-button]:hover, 
[ecta-container][vehicle-type="preowned" i][ecta-placement="vdp" i] [ecta-expressprice-button]:active
{ 
border-color: #017400 !important; 
background: #017400 !important; 
color: #ffffff !important; 
}

[ecta-container][vehicle-type="preowned" i][ecta-placement="vdp" i] [ecta-expressprice-button]:hover::after
{
content: "Unlock Instant Price";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffffff !important;
}




/*--- pricealert srp ---*/

[ecta-container][ecta-placement="srp" i] [ecta-pricealert-button],
[ecta-container][ecta-placement="srp" i] [ecta-pricealert-button]:visited
{ 
z-index: +1;
position: relative; 
text-decoration: none;
display: inline-block; 
text-align: center; 
width: 100%; 
background: #002c5e; 
font-weight: bold;
border-radius: 0px;
font-size: 16px;
color: transparent !important;
text-decoration: none !important;
}

[ecta-container][ecta-placement="srp" i] [ecta-pricealert-button]::after
{
content: "Get Price Alert";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
display: inline-block; 
text-align: center; 
width: 100%; 
font-weight: bold;
border-radius: 0px;
font-size: 16px;
color: #ffffff;
text-decoration: none !important;
background: transparent !important;
margin: 0 !important;
}

[ecta-container][ecta-placement="srp" i] [ecta-pricealert-button]:hover, 
[ecta-container][ecta-placement="srp" i] [ecta-pricealert-button]:active
{ 
position: relative; 
border-color: #00aad2 !important; 
background: #00aad2 !important; 
color: transparent !important;
} 

[ecta-container][ecta-placement="srp" i] [ecta-pricealert-button]:hover::after
{
content: "Get Price Alert";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffffff !important;
}


/*--- pricealert vdp ---*/

[ecta-container][ecta-placement="vdp" i] [ecta-pricealert-button],
[ecta-container][ecta-placement="vdp" i] [ecta-pricealert-button]:visited
{ 
z-index: +1;
position: relative; 
text-decoration: none;
display: inline-block; 
text-align: center; 
width: 100%; 
background: #002c5e; 
font-weight: bold;
border-radius: 0px;
font-size: 16px;
color: transparent !important;
text-decoration: none !important;
padding: .5rem 0 !important;
margin-bottom: 1rem !important;
}

[ecta-container][ecta-placement="vdp" i] [ecta-pricealert-button]::after
{
content: "Get Price Alert";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
color: #ffffff;
text-decoration: none !important;
padding: .5rem 0 !important;
margin-bottom: 1rem !important;
margin: 0 !important;
background: transparent !important;
}

[ecta-container][ecta-placement="vdp" i] [ecta-pricealert-button]:hover, 
[ecta-container][ecta-placement="vdp" i] [ecta-pricealert-button]:active
{ 
position: relative; 
border-color: #00aad2 !important; 
background: #00aad2 !important; 
color: transparent !important;
} 

[ecta-container][ecta-placement="vdp" i] [ecta-pricealert-button]:hover::after
{
content: "Get Price Alert";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffffff !important;
}