/* =============================================================
CPC Engineering · cpc.css — HOJA UNICA DEL SITIO
-------------------------------------------------------------
Sustituye a 4 archivos que antes se cargaban por separado:
other2.css + info.css + headerCSS-megamenu.css + new-styles.css
Van concatenados EN ESE ORDEN porque la cascada depende de el:
other2.css es la base y new-styles.css pisa por encima.
NO reordenar los bloques.
En el , estas cuatro lineas:
se sustituyen por esta sola:
============================================================= */
/* --- Fuentes: los @import deben ir al principio del archivo --- */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Raleway:300,400,500,600,600i,700,900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@700&display=swap');
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
/* =============================================================
INICIO BLOQUE: other2.css
============================================================= */
/* ==========================================
----- Index css -----
1. common css
2. header css
3. slider css
4. we-do css
5. about css
6. service css
7. testimonial css
8. faq css
9. team css
10. subscribe css
11. blog css
12. contact css
13. footer css
============================================ */
/*===========================
COMMON css
===========================*/
/* Paleta de marca. Antes vivía duplicada (y con valores distintos) en
cpc-fixes.css; ahora es la única fuente de verdad para todo el sitio.
new-styles.css (que carga después) reutiliza --cpc-primary para el
banner de cookies en vez de redefinir su propio rojo. */
:root {
--cpc-red: #a00202;
--cpc-red-dark: #7c0101;
--cpc-red-soft: rgba(160, 2, 2, .28);
--cpc-green: #009933;
--cpc-text: #333333;
--cpc-muted: #6b7280;
}
html {
scroll-behavior: smooth;
}
body {
/* font-family: "Open Sans", sans-serif; */
font-family: "Roboto", Sans-serif;
font-weight: 300;
font-style: normal;
/* color: #8C96A7; */
color: black;
overflow-x: hidden;
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
img {
max-width: 100%;
}
.navbar-toggler:focus,
*:focus,
a:focus,
input:focus,
textarea:focus,
button:focus,
.btn:focus,
.btn.focus {
text-decoration: none;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
a:hover {
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
color: #A00202;
}
a:focus,
a:hover {
text-decoration: none;
}
i,
span,
a {
display: inline-block;
text-decoration: none;
}
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600;
color: #393E46;
/* font-family: "Raleway", sans-serif; */
font-family: "Roboto", Sans-serif;
margin: 0px;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: inherit;
}
h1 {
font-size: 48px;
}
h2 {
font-size: 45px;
}
h3 {
font-size: 28px;
}
h4 {
font-size: 25px;
/* line-height:2 (new-styles.css) separaba demasiado los títulos de dos
líneas; corregido aquí en origen y eliminado de new-styles.css. */
line-height: 1.3;
}
h5 {
font-size: 20px;
line-height: 1.35;
}
h6 {
font-size: 16px;
}
ul, ol {
/* margin: 0px;
padding: 0px; */
padding-left: 30px;
list-style-type:square;
/* Estaba declarada 3 veces entre esta hoja y new-styles.css, alternando
16px/14px. Una sola vez, aquí. */
font-size: 16px;
line-height: 1.7;
}
.span-template {
background-color: #A00202;
color: white;
padding-left: 20px;
padding-right: 30px;
padding-top: 5px;
padding-bottom: 5px;
font-size: 14px;
}
p {
font-size: 16px;
font-weight: 300;
line-height: 28px;
/* color: #8C96A7; */
/* "434343" sin la almohadilla era inválido y el navegador lo descartaba,
dejando el color heredado por defecto. Corregido. new-styles.css
también pisaba font-size a 14px y forzaba text-align:justify (que
abre "ríos" de espacio en blanco); ese bloque se ha eliminado allí. */
color: var(--cpc-text);
text-align: left;
margin: 0px;
margin-bottom: .9rem;
font-family: "Roboto", Sans-serif;
}
.img-bg {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
.theme-bg {
background-color: #A00202;
}
.video-bg {
background-image: linear-gradient(to right, #e52d27 0%, #b31217 51%, #e52d27 100%)
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container {
width: 450px;
}
}
.read-more {
font-size: 18px;
font-weight: 700;
color: #A00202;
font-family: "Raleway", sans-serif;
}
.read-more i {
margin-left: 15px;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.read-more:hover i {
margin-left: 30px;
}
.error {
color: crimson;
}
.success {
color: #A00202;
}
.shape {
position: absolute;
}
.tns-nav {
position: absolute;
bottom: -12px;
left: 0;
right: 0;
margin: auto;
text-align: center;
z-index: 99;
}
.tns-nav button {
cursor: pointer;
text-indent: -999999px;
border: none;
border-radius: 50%;
padding: 0;
width: 15px;
height: 15px;
/* turquesa de la plantilla original, sustituido por el rojo de marca */
background: var(--cpc-red-soft);
margin: 0 8px;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.tns-nav button.tns-nav-active {
background: var(--cpc-red);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
/*===== All Button Style =====*/
.theme-btn {
display: inline-block;
font-weight: 600;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 18px 40px;
font-size: 18px;
border-radius: 10px;
border: none;
color: #fff;
cursor: pointer;
z-index: 5;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
background-color: #A00202;
}
.theme-btn:hover {
/* turquesa de la plantilla original, sustituido por el rojo de marca */
background-color: var(--cpc-red-dark);
color: #fff;
border-color: transparent;
-webkit-box-shadow: 0 10px 25px var(--cpc-red-soft);
box-shadow: 0 10px 25px var(--cpc-red-soft);
}
.scroll-top {
width: 45px;
height: 45px;
background: #dc3545;
text-align: center;
line-height: 45px;
font-size: 20px;
color: #fff;
border-radius: 5px;
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.scroll-top:hover {
color: #fff;
/* background: rgba(0, 173, 181, 0.7); */
background: #a00202;
}
@keyframes animation1 {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes animation1 {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
/*===== All Section Title Style =====*/
.section-title span {
font-family: "Raleway", sans-serif;
font-size: 25px;
font-weight: 700;
display: block;
color: #A00202;
margin-bottom: 15px;
}
/*===== All Preloader Style =====*/
.preloader {
/* Body Overlay */
position: fixed;
top: 0;
left: 0;
display: table;
height: 100%;
width: 100%;
/* Change Background Color */
background: #fff;
z-index: 99999;
}
.preloader .loader {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.preloader .loader .ytp-spinner {
position: absolute;
left: 50%;
top: 50%;
width: 64px;
margin-left: -32px;
z-index: 18;
pointer-events: none;
}
.preloader .loader .ytp-spinner .ytp-spinner-container {
pointer-events: none;
position: absolute;
width: 100%;
padding-bottom: 100%;
top: 50%;
left: 50%;
margin-top: -50%;
margin-left: -50%;
-webkit-animation: ytp-spinner-linspin 1568.2353ms linear infinite;
animation: ytp-spinner-linspin 1568.2353ms linear infinite;
}
.preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator {
position: absolute;
width: 100%;
height: 100%;
-webkit-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-left {
position: absolute;
top: 0;
left: 0;
bottom: 0;
overflow: hidden;
right: 50%;
}
.preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-right {
position: absolute;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
left: 50%;
}
.preloader .loader .ytp-spinner-circle {
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
width: 200%;
height: 100%;
border-style: solid;
/* Spinner Color */
border-color: #A00202 #A00202 #8C96A7;
border-radius: 50%;
border-width: 6px;
}
.preloader .loader .ytp-spinner-left .ytp-spinner-circle {
left: 0;
right: -100%;
border-right-color: #8C96A7;
-webkit-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.preloader .loader .ytp-spinner-right .ytp-spinner-circle {
left: -100%;
right: 0;
border-left-color: #8C96A7;
-webkit-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
/* Preloader Animations */
@-webkit-keyframes ytp-spinner-linspin {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes ytp-spinner-linspin {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes ytp-spinner-easespin {
12.5% {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
25% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
37.5% {
-webkit-transform: rotate(405deg);
transform: rotate(405deg);
}
50% {
-webkit-transform: rotate(540deg);
transform: rotate(540deg);
}
62.5% {
-webkit-transform: rotate(675deg);
transform: rotate(675deg);
}
75% {
-webkit-transform: rotate(810deg);
transform: rotate(810deg);
}
87.5% {
-webkit-transform: rotate(945deg);
transform: rotate(945deg);
}
to {
-webkit-transform: rotate(1080deg);
transform: rotate(1080deg);
}
}
@keyframes ytp-spinner-easespin {
12.5% {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
25% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
37.5% {
-webkit-transform: rotate(405deg);
transform: rotate(405deg);
}
50% {
-webkit-transform: rotate(540deg);
transform: rotate(540deg);
}
62.5% {
-webkit-transform: rotate(675deg);
transform: rotate(675deg);
}
75% {
-webkit-transform: rotate(810deg);
transform: rotate(810deg);
}
87.5% {
-webkit-transform: rotate(945deg);
transform: rotate(945deg);
}
to {
-webkit-transform: rotate(1080deg);
transform: rotate(1080deg);
}
}
@-webkit-keyframes ytp-spinner-left-spin {
0% {
-webkit-transform: rotate(130deg);
transform: rotate(130deg);
}
50% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
to {
-webkit-transform: rotate(130deg);
transform: rotate(130deg);
}
}
@keyframes ytp-spinner-left-spin {
0% {
-webkit-transform: rotate(130deg);
transform: rotate(130deg);
}
50% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
to {
-webkit-transform: rotate(130deg);
transform: rotate(130deg);
}
}
@-webkit-keyframes ytp-right-spin {
0% {
-webkit-transform: rotate(-130deg);
transform: rotate(-130deg);
}
50% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
to {
-webkit-transform: rotate(-130deg);
transform: rotate(-130deg);
}
}
@keyframes ytp-right-spin {
0% {
-webkit-transform: rotate(-130deg);
transform: rotate(-130deg);
}
50% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
to {
-webkit-transform: rotate(-130deg);
transform: rotate(-130deg);
}
}
.mt-5 {
margin-top: 5px;
}
.mt-10 {
margin-top: 10px;
}
.mt-15 {
margin-top: 15px;
}
.mt-20 {
margin-top: 20px;
}
.mt-25 {
margin-top: 25px;
}
.mt-30 {
margin-top: 30px;
}
.mt-35 {
margin-top: 35px;
}
.mt-40 {
margin-top: 40px;
}
.mt-45 {
margin-top: 45px;
}
.mt-50 {
margin-top: 50px;
}
.mt-55 {
margin-top: 55px;
}
.mt-60 {
margin-top: 60px;
}
.mt-65 {
margin-top: 65px;
}
.mt-70 {
margin-top: 70px;
}
.mt-75 {
margin-top: 75px;
}
.mt-80 {
margin-top: 80px;
}
.mt-85 {
margin-top: 85px;
}
.mt-90 {
margin-top: 90px;
}
.mt-95 {
margin-top: 95px;
}
.mt-100 {
margin-top: 100px;
}
.mt-105 {
margin-top: 105px;
}
.mt-110 {
margin-top: 110px;
}
.mt-115 {
margin-top: 115px;
}
.mt-120 {
margin-top: 120px;
}
.mt-125 {
margin-top: 125px;
}
.mt-130 {
margin-top: 130px;
}
.mt-135 {
margin-top: 135px;
}
.mt-140 {
margin-top: 140px;
}
.mt-145 {
margin-top: 145px;
}
.mt-150 {
margin-top: 150px;
}
.mt-155 {
margin-top: 155px;
}
.mt-160 {
margin-top: 160px;
}
.mt-165 {
margin-top: 165px;
}
.mt-170 {
margin-top: 170px;
}
.mt-175 {
margin-top: 175px;
}
.mt-180 {
margin-top: 180px;
}
.mt-185 {
margin-top: 185px;
}
.mt-190 {
margin-top: 190px;
}
.mt-195 {
margin-top: 195px;
}
.mt-200 {
margin-top: 200px;
}
.mt-205 {
margin-top: 205px;
}
.mt-210 {
margin-top: 210px;
}
.mt-215 {
margin-top: 215px;
}
.mt-220 {
margin-top: 220px;
}
.mt-225 {
margin-top: 225px;
}
.mb-5 {
margin-bottom: 5px;
}
.mb-10 {
margin-bottom: 10px;
}
.mb-15 {
margin-bottom: 15px;
}
.mb-20 {
margin-bottom: 20px;
}
.mb-25 {
margin-bottom: 25px;
}
.mb-30 {
margin-bottom: 30px;
}
.mb-35 {
margin-bottom: 35px;
}
.mb-40 {
margin-bottom: 40px;
}
.mb-45 {
margin-bottom: 45px;
}
.mb-50 {
margin-bottom: 50px;
}
.mb-55 {
margin-bottom: 55px;
}
.mb-60 {
margin-bottom: 60px;
}
.mb-65 {
margin-bottom: 65px;
}
.mb-70 {
margin-bottom: 70px;
}
.mb-75 {
margin-bottom: 75px;
}
.mb-80 {
margin-bottom: 80px;
}
.mb-85 {
margin-bottom: 85px;
}
.mb-90 {
margin-bottom: 90px;
}
.mb-95 {
margin-bottom: 95px;
}
.mb-100 {
margin-bottom: 100px;
}
.mb-105 {
margin-bottom: 105px;
}
.mb-110 {
margin-bottom: 110px;
}
.mb-115 {
margin-bottom: 115px;
}
.mb-120 {
margin-bottom: 120px;
}
.mb-125 {
margin-bottom: 125px;
}
.mb-130 {
margin-bottom: 130px;
}
.mb-135 {
margin-bottom: 135px;
}
.mb-140 {
margin-bottom: 140px;
}
.mb-145 {
margin-bottom: 145px;
}
.mb-150 {
margin-bottom: 150px;
}
.mb-155 {
margin-bottom: 155px;
}
.mb-160 {
margin-bottom: 160px;
}
.mb-165 {
margin-bottom: 165px;
}
.mb-170 {
margin-bottom: 170px;
}
.mb-175 {
margin-bottom: 175px;
}
.mb-180 {
margin-bottom: 180px;
}
.mb-185 {
margin-bottom: 185px;
}
.mb-190 {
margin-bottom: 190px;
}
.mb-195 {
margin-bottom: 195px;
}
.mb-200 {
margin-bottom: 200px;
}
.mb-205 {
margin-bottom: 205px;
}
.mb-210 {
margin-bottom: 210px;
}
.mb-215 {
margin-bottom: 215px;
}
.mb-220 {
margin-bottom: 220px;
}
.mb-225 {
margin-bottom: 225px;
}
.pt-5 {
padding-top: 5px;
}
.pt-10 {
padding-top: 10px;
}
.pt-15 {
padding-top: 15px;
}
.pt-20 {
padding-top: 20px;
}
.pt-25 {
padding-top: 25px;
}
.pt-30 {
padding-top: 30px;
}
.pt-35 {
padding-top: 35px;
}
.pt-40 {
padding-top: 40px;
}
.pt-45 {
padding-top: 45px;
}
.pt-50 {
padding-top: 50px;
}
.pt-55 {
padding-top: 55px;
}
.pt-60 {
padding-top: 60px;
}
.pt-65 {
padding-top: 65px;
}
.pt-70 {
padding-top: 70px;
}
.pt-75 {
padding-top: 75px;
}
.pt-80 {
padding-top: 80px;
}
.pt-85 {
padding-top: 85px;
}
.pt-90 {
padding-top: 90px;
}
.pt-95 {
padding-top: 95px;
}
.pt-100 {
padding-top: 100px;
}
.pt-105 {
padding-top: 105px;
}
.pt-110 {
padding-top: 110px;
}
.pt-115 {
padding-top: 115px;
}
.pt-120 {
padding-top: 120px;
}
.pt-125 {
padding-top: 125px;
}
.pt-130 {
padding-top: 130px;
}
.pt-135 {
padding-top: 135px;
}
.pt-140 {
padding-top: 140px;
}
.pt-145 {
padding-top: 145px;
}
.pt-150 {
padding-top: 150px;
}
.pt-155 {
padding-top: 155px;
}
.pt-160 {
padding-top: 160px;
}
.pt-165 {
padding-top: 165px;
}
.pt-170 {
padding-top: 170px;
}
.pt-175 {
padding-top: 175px;
}
.pt-180 {
padding-top: 180px;
}
.pt-185 {
padding-top: 185px;
}
.pt-190 {
padding-top: 190px;
}
.pt-195 {
padding-top: 195px;
}
.pt-200 {
padding-top: 200px;
}
.pt-205 {
padding-top: 205px;
}
.pt-210 {
padding-top: 210px;
}
.pt-215 {
padding-top: 215px;
}
.pt-220 {
padding-top: 220px;
}
.pt-225 {
padding-top: 225px;
}
.pb-5 {
padding-bottom: 5px;
}
.pb-10 {
padding-bottom: 10px;
}
.pb-15 {
padding-bottom: 15px;
}
.pb-20 {
padding-bottom: 20px;
}
.pb-25 {
padding-bottom: 25px;
}
.pb-30 {
padding-bottom: 30px;
}
.pb-35 {
padding-bottom: 35px;
}
.pb-40 {
padding-bottom: 40px;
}
.pb-45 {
padding-bottom: 45px;
}
.pb-50 {
padding-bottom: 50px;
}
.pb-55 {
padding-bottom: 55px;
}
.pb-60 {
padding-bottom: 60px;
}
.pb-65 {
padding-bottom: 65px;
}
.pb-70 {
padding-bottom: 70px;
}
.pb-75 {
padding-bottom: 75px;
}
.pb-80 {
padding-bottom: 80px;
}
.pb-85 {
padding-bottom: 85px;
}
.pb-90 {
padding-bottom: 90px;
}
.pb-95 {
padding-bottom: 95px;
}
.pb-100 {
padding-bottom: 100px;
}
.pb-105 {
padding-bottom: 105px;
}
.pb-110 {
padding-bottom: 110px;
}
.pb-115 {
padding-bottom: 115px;
}
.pb-120 {
padding-bottom: 120px;
}
.pb-125 {
padding-bottom: 125px;
}
.pb-130 {
padding-bottom: 130px;
}
.pb-135 {
padding-bottom: 135px;
}
.pb-140 {
padding-bottom: 140px;
}
.pb-145 {
padding-bottom: 145px;
}
.pb-150 {
padding-bottom: 150px;
}
.pb-155 {
padding-bottom: 155px;
}
.pb-160 {
padding-bottom: 160px;
}
.pb-165 {
padding-bottom: 165px;
}
.pb-170 {
padding-bottom: 170px;
}
.pb-175 {
padding-bottom: 175px;
}
.pb-180 {
padding-bottom: 180px;
}
.pb-185 {
padding-bottom: 185px;
}
.pb-190 {
padding-bottom: 190px;
}
.pb-195 {
padding-bottom: 195px;
}
.pb-200 {
padding-bottom: 200px;
}
.pb-205 {
padding-bottom: 205px;
}
.pb-210 {
padding-bottom: 210px;
}
.pb-215 {
padding-bottom: 215px;
}
.pb-220 {
padding-bottom: 220px;
}
.pb-225 {
padding-bottom: 225px;
}
/*===========================
HEADER css
===========================*/
.header {
position: relative;
padding-top: 50px;
}
@media (max-width: 767px) {
.header {
padding-top: 86px;
}
}
.header .header-wrapper {
position: absolute;
width: 100%;
left: 0;
top: 0;
z-index: 99;
/* background-color: transparent !important; */
}
.header-top {
padding: 0px 0 0 0;
}
.header-top ul li {
display: inline-block;
}
.header-top ul li a {
color: #fff;
font-size: 14px;
}
.header-top ul li a i {
width: 30px;
height: 30px;
border-radius: 50%;
line-height: 30px;
text-align: center;
display: inline-block;
background: rgba(255, 255, 255, 0.15);
color: #fff;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.header-top ul li a i:hover {
background: #fff;
color: #A00202;
}
.header-top .header-top-left ul li:first-child {
margin-right: 35px;
}
.header-top .header-top-left ul li a i {
margin-right: 10px;
}
.header-top .header-top-right {
text-align: right;
}
.header-top .header-top-right ul li {
margin-left: 15px;
}
.header-top-right {
padding-top: 10px;
}
@media (max-width: 767px) {
.header-top {
display: none;
}
}
/*===== NAVBAR =====*/
.navbar-area {
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
background: #fff;
background-color: transparent !important;
font-family: 'Open Sans Condensed', sans-serif;
}
.sticky {
position: fixed;
z-index: 99;
width: 100%;
top: 0;
left: 0;
background-color: #fff !important;
-webkit-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.sticky .navbar {
padding: 10px 0;
}
.sticky .navbar-nav .nav-item a {
font-size: 18px;
font-weight: 500;
color: #000;
text-shadow: 0px 0px 0px rgba(0, 22, 53, 0.8);
/* font-family: "Raleway", sans-serif; */
/* font-family: 'Roboto', sans-serif; */
font-family: 'Open Sans Condensed', sans-serif;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
position: relative;
}
.navbar {
padding: 0;
border-radius: 5px;
position: relative;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
padding: 15px 0;
font-family: 'Open Sans Condensed', sans-serif;
}
.navbar-brand {
padding: 0;
}
.navbar-brand img {
max-width: 150px;
}
.navbar-toggler {
padding: 0;
}
.navbar-toggler .toggler-icon {
width: 30px;
height: 2px;
background-color: #222;
display: block;
margin: 5px 0;
position: relative;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.navbar-toggler.active .toggler-icon:nth-of-type(1) {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 7px;
}
.navbar-toggler.active .toggler-icon:nth-of-type(2) {
opacity: 0;
}
.navbar-toggler.active .toggler-icon:nth-of-type(3) {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
top: -7px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.navbar-collapse {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: #fff;
z-index: 9;
-webkit-box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
padding: 5px 12px;
}
}
@media (max-width: 767px) {
.navbar-collapse {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: #fff;
z-index: 9;
-webkit-box-shadow: 0px 15px 20px 0px rgba(57, 62, 70, 0.1);
box-shadow: 0px 15px 20px 0px rgba(57, 62, 70, 0.1);
padding: 5px 12px;
}
}
.navbar-nav .nav-item {
margin-left: 40px;
position: relative;
font-family: 'Open Sans Condensed', sans-serif;
}
.navbar-nav .nav-item:first-child {
margin-left: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.navbar-nav .nav-item {
margin-left: 30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.navbar-nav .nav-item {
margin: 0;
}
}
@media (max-width: 767px) {
.navbar-nav .nav-item {
margin: 0;
}
}
.navbar-nav .nav-item a {
font-size: 18px;
font-weight: 500;
color: #000;
/* text-shadow: 1px 1px 4px rgba(0, 22, 53, 0.8); */
/* font-family: "Raleway", sans-serif; */
/* font-family: 'Roboto', sans-serif; */
font-family: 'Open Sans Condensed', sans-serif;
/*text-transform: uppercase;*/
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
position: relative;
}
a.page-scroll {
font-size: 16px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.navbar-nav .nav-item a {
display: block;
padding: 4px 0;
}
}
@media (max-width: 767px) {
.navbar-nav .nav-item a {
display: block;
padding: 4px 0;
}
}
.navbar-nav .nav-item a.active, .navbar-nav .nav-item a:hover {
color: #A00202;
font-weight: 700;
}
.navbar-nav .nav-item:hover .sub-menu {
top: 100%;
opacity: 1;
visibility: visible;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.navbar-nav .nav-item:hover .sub-menu {
top: 0;
}
}
@media (max-width: 767px) {
.navbar-nav .nav-item:hover .sub-menu {
top: 0;
}
}
.navbar-nav .nav-item .sub-menu {
width: 200px;
background-color: #fff;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
position: absolute;
top: 110%;
left: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.navbar-nav .nav-item .sub-menu {
position: relative;
width: 100%;
top: 0;
display: none;
opacity: 1;
visibility: visible;
}
}
@media (max-width: 767px) {
.navbar-nav .nav-item .sub-menu {
position: relative;
width: 100%;
top: 0;
display: none;
opacity: 1;
visibility: visible;
}
}
.navbar-nav .nav-item .sub-menu li {
display: block;
}
.navbar-nav .nav-item .sub-menu li a {
display: block;
padding: 8px 20px;
color: #222;
}
.navbar-nav .nav-item .sub-menu li a.active, .navbar-nav .nav-item .sub-menu li a:hover {
padding-left: 25px;
color: #A00202;
}
.navbar-nav .sub-nav-toggler {
display: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.navbar-nav .sub-nav-toggler {
display: block;
position: absolute;
right: 0;
top: 0;
background: none;
color: #222;
font-size: 18px;
border: 0;
width: 30px;
height: 30px;
}
}
@media (max-width: 767px) {
.navbar-nav .sub-nav-toggler {
display: block;
position: absolute;
right: 0;
top: 0;
background: none;
color: #222;
font-size: 18px;
border: 0;
width: 30px;
height: 30px;
}
}
.navbar-nav .sub-nav-toggler span {
width: 8px;
height: 8px;
border-left: 1px solid #222;
border-bottom: 1px solid #222;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
position: relative;
top: -5px;
}
/*===========================
Slider CSS
===========================*/
.slider-section {
position: relative;
}
.slider-section .single-slider {
position: relative;
z-index: 1;
}
.slider-section .single-slider::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
/* background-image: -webkit-gradient(linear, left top, right top, from(#A00202), color-stop(70.76%, rgba(0, 173, 181, 0.11)), to(rgba(255, 255, 255, 0)));
background-image: linear-gradient(to right, #A00202 0%, rgba(0, 173, 181, 0.11) 70.76%, rgba(255, 255, 255, 0) 100%); */
}
.slider-section .single-slider .slider-content {
padding: 190px 0 400px;
}
.slider-content h1 strong {
color:#A00202;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.slider-section .single-slider .slider-content {
padding: 160px 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.slider-section .single-slider .slider-content {
padding: 110px 0px;
}
}
@media (max-width: 767px) {
.slider-section .single-slider .slider-content {
padding: 100px 0px;
}
}
.slider-section .single-slider .slider-content h1 {
font-size: 65px;
line-height: 76px;
font-weight: 900;
margin-bottom: 30px;
color: #fff;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.slider-section .single-slider .slider-content h1 {
font-size: 60px;
line-height: 72px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.slider-section .single-slider .slider-content h1 {
font-size: 54px;
line-height: 66px;
}
}
@media (max-width: 767px) {
.slider-section .single-slider .slider-content h1 {
font-size: 36px;
line-height: 48px;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.slider-section .single-slider .slider-content h1 {
font-size: 45px;
line-height: 55px;
}
}
.slider-section .single-slider .slider-content p {
color: #fff;
margin-bottom: 30px;
text-shadow: 2px 2px #000000;
}
.slider-section .single-slider .slider-content .theme-btn {
background: #fff;
color: #A00202;
}
.slider-section .single-slider .slider-content .theme-btn:hover {
-webkit-box-shadow: 0 10px 25px rgba(255, 255, 255, 0.5);
box-shadow: 0 10px 25px rgba(255, 255, 255, 0.5);
}
.slider-section .tns-nav {
bottom: 60px;
}
.slider-section .tns-nav button {
background: rgba(255, 255, 255, 0.4);
}
.slider-section .tns-nav button.tns-nav-active {
background: #fff;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.we-do-section {
position: relative;
background-color: #e6e6e6;
}
.we-do-section strong {
font-weight: 700;
color:#A00202;
}
.asc-sd-prc-section .shape {
right: 100px;
}
.we-do-section .shape {
left: -100px;
}
.industries-section .shape {
/* position: absolute; */
right: 150px;
/* top: 0; */
}
.asc-text .shape {
right: 150px;
}
.industries-section {
}
.we-do-section .we-do-item {
text-align: center;
}
.we-do-section .we-do-shadow {
border-radius: 1px;
-webkit-box-shadow: 0 10px 35px rgba(0, 0, 0, 0.089);
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.089);
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
position: relative;
padding: 40px;
z-index: 1;
}
.we-do-section .we-do-item .we-do-icon {
width: 87px;
height: 87px;
line-height: 83px;
text-align: center;
margin-left: auto;
margin-right: auto;
border-radius: 50%;
/* turquesa de la plantilla original, sustituido por el rojo de marca */
-webkit-box-shadow: 0 0 25px var(--cpc-red-soft);
box-shadow: 0 0 25px var(--cpc-red-soft);
}
/*===========================
About css
===========================*/
.about-section {
position: relative;
overflow: hidden;
}
.about-section .shape {
right: -50px;
top: 160px;
}
.about-section .about-content p {
padding: 0 15px;
}
@media (max-width: 767px) {
.about-section .about-content p {
padding: 0;
}
}
.service-section {
position: relative;
}
.service-section .shape {
top: 160px;
left: -50px;
}
.service-section .service-item {
border-radius: 20px;
/* -webkit-box-shadow: 0 10px 35px rgba(0, 173, 181, 0.14);
box-shadow: 0 10px 35px rgba(0, 173, 181, 0.14); */
-webkit-box-shadow: 0 10px 35px rgba(0, 0, 0, 0.089);
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.089);
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
position: relative;
padding: 40px;
z-index: 1;
}
.service-section .service-item .service-icon svg path {
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.service-section .service-item .service-content h4 {
margin-bottom: 20px;
}
.service-section .service-item .service-content p {
font-size: 16px;
line-height: 25px;
margin-bottom: 25px;
}
.service-section .service-item .service-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
border-radius: 20px;
background: url("https://www.cpcengineering.com/assets/img/industries/industries.jpg");
opacity: 0;
visibility: hidden;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.service-section .service-item .service-overlay::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 20px;
/* background: rgba(0, 173, 181, 0.91); */
background: rgba(46, 40, 54, 0.91);
}
.service-section .service-item:hover .service-icon svg path {
fill: #fff;
}
.service-section .service-item:hover .service-content h4, .service-section .service-item:hover .service-content p, .service-section .service-item:hover .service-content a {
color: #fff;
}
.service-section .service-item:hover .service-overlay {
opacity: 0.8;
visibility: visible;
-webkit-transform: scale(1);
transform: scale(1);
}
.faq-section {
position: relative;
overflow: hidden;
}
.faq-section .faq-video-wrapper {
position: absolute;
left: 0;
top: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
overflow: hidden;
width: 50%;
}
@media only screen and (min-width: 1400px) {
.faq-section .faq-video-wrapper {
width: 48%;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.faq-section .faq-video-wrapper {
width: 47%;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.faq-section .faq-video-wrapper {
position: unset;
display: block;
width: 100%;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.faq-section .faq-video-wrapper {
position: unset;
display: block;
width: 100%;
}
}
@media (max-width: 767px) {
.faq-section .faq-video-wrapper {
position: unset;
display: block;
width: 100%;
}
}
.faq-section .faq-video-wrapper .faq-video {
position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.faq-section .faq-video-wrapper .faq-video img {
width: 100%;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.faq-section .faq-video-wrapper .faq-video img {
width: 100%;
}
}
@media (max-width: 767px) {
.faq-section .faq-video-wrapper .faq-video img {
width: 100%;
}
}
.faq-section .faq-video-wrapper .faq-video .video-btn {
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 0;
right: 0;
margin: auto;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.faq-section .faq-video-wrapper .faq-video .video-btn a {
display: inline-block;
width: 77px;
height: 77px;
line-height: 77px;
background: #A00202;
color: #fff;
position: relative;
text-align: center;
border-radius: 50%;
z-index: 1;
}
.faq-section .faq-video-wrapper .faq-video .video-btn a::before {
content: '';
position: absolute;
width: 129px;
height: 129px;
border-radius: 50%;
background: rgba(0, 173, 181, 0.16);
z-index: -1;
top: -26px;
left: -26px;
-webkit-animation: animation1 2s linear infinite;
animation: animation1 2s linear infinite;
}
.faq-section .faq-video-wrapper .faq-video .video-btn a::after {
content: '';
position: absolute;
width: 199px;
height: 199px;
border-radius: 50%;
background: rgba(0, 173, 181, 0.13);
z-index: -1;
top: -61px;
left: -61px;
-webkit-animation: animation1 2s linear infinite 2s;
animation: animation1 2s linear infinite 2s;
}
.faq-section .shape {
position: absolute;
right: -150px;
top: 0;
}
.faq-section .faq-content-wrapper .faq-wrapper .faq-item {
/* background: #08BBC4; */
background: #6A2E35;
border-radius: 10px;
}
.faq-section .faq-content-wrapper .faq-wrapper .faq-item .faq-btn {
display: block;
width: 100%;
text-align: left;
font-style: italic;
color: #fff;
background: none;
font-size: 20px;
padding: 20px 50px 20px 30px;
position: relative;
white-space: normal;
}
.faq-section .faq-content-wrapper .faq-wrapper .faq-item .faq-btn i {
position: absolute;
right: 30px;
top: 30px;
font-size: 12px;
}
.faq-section .faq-content-wrapper .faq-wrapper .faq-item .faq-btn i::before {
content: "\eb2c";
font: normal normal normal 1em/1 "LineIcons";
}
.faq-section .faq-content-wrapper .faq-wrapper .faq-item .faq-btn.collapsed i::before {
content: "\eb53";
}
.faq-section .faq-content-wrapper .faq-wrapper .faq-item .faq-content {
color: #fff;
padding: 5px 30px 30px;
font-size: 16px;
line-height: 25px;
}
.subscribe-section {
position: relative;
z-index: 1;
overflow: hidden;
}
.subscribe-section::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: -webkit-gradient(linear, left top, right top, from(#ffffff), color-stop(rgba(255, 255, 255, 0.95)), color-stop(rgba(255, 255, 255, 0.64)), color-stop(rgba(255, 255, 255, 0.02)), to(rgba(255, 255, 255, 0)));
background-image: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
z-index: -1;
}
.subscribe-section .subscribe-wrapper .subscribe-from {
margin-bottom: 50px;
}
.subscribe-section .subscribe-wrapper .subscribe-from input {
width: 100%;
max-width: 570px;
height: 65px;
font-size: 14px;
border: none;
background: #fff;
padding: 0 30px;
color: #8C96A7;
border-radius: 10px;
margin-right: 20px;
border: 1px solid transparent;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
-webkit-box-shadow: 0 0 42px rgba(0, 173, 181, 0.15);
box-shadow: 0 0 42px rgba(0, 173, 181, 0.15);
margin-bottom: 20px;
}
.subscribe-section .subscribe-wrapper .subscribe-from input:focus {
border-color: #A00202;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.subscribe-section .subscribe-wrapper .subscribe-from input {
width: 470px;
}
}
@media (max-width: 767px) {
.subscribe-section .subscribe-wrapper .subscribe-from input {
width: 100%;
}
}
.subscribe-section .subscribe-wrapper .support {
margin-bottom: 35px;
}
.subscribe-section .subscribe-wrapper .support .support-icon {
margin-right: 20px;
}
@media (max-width: 767px) {
.subscribe-section .subscribe-wrapper .support h2 {
font-size: 30px;
}
}
.subscribe-section .subscribe-wrapper .support h2 span {
color: #A00202;
display: block;
}
.subscribe-section .subscribe-wrapper .subscribe-links ul li {
display: inline-block;
}
.subscribe-section .subscribe-wrapper .subscribe-links ul li a i {
width: 49px;
height: 49px;
line-height: 49px;
text-align: center;
border-radius: 50%;
color: #fff;
background: #8C96A7;
margin-right: 20px;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.subscribe-section .subscribe-wrapper .subscribe-links ul li a span {
font-size: 26px;
font-weight: 600;
color: #A00202;
margin-right: 40px;
}
.subscribe-section .subscribe-wrapper .subscribe-links ul li a:hover i {
background: #A00202;
}
.subscribe-section .subscribe-wrapper .subscribe-links ul li:last-child a {
margin-right: 0;
}
.subscribe-section .subscribe-wrapper .subscribe-links ul li:first-child a i {
background: #A00202;
}
@media (max-width: 767px) {
.subscribe-section .subscribe-wrapper .subscribe-links ul li:first-child {
display: block;
margin-bottom: 15px;
}
}
/*===========================
| | Header Template Section
===========================*/
.template-section {
position: relative;
z-index: 1;
overflow: hidden;
margin-top: 150px;
min-height: 370px;
margin-bottom: 50px;
}
.template-section img {
object-fit: cover;
opacity: 0.4;
}
.template-section::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: -webkit-gradient(linear, left top, right top, from(#ffffff), color-stop(rgba(255, 255, 255, 0.95)), color-stop(rgba(255, 255, 255, 0.64)), color-stop(rgba(255, 255, 255, 0.02)), to(rgba(255, 255, 255, 0)));
/* background-image: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)); */
z-index: -1;
}
.template-section .template-wrapper .template-from {
margin-bottom: 50px;
}
.template-section .template-wrapper .template-from input {
width: 100%;
max-width: 570px;
height: 65px;
font-size: 14px;
border: none;
background: #fff;
padding: 0 30px;
color: #a78c8c;
border-radius: 10px;
margin-right: 20px;
border: 1px solid transparent;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
-webkit-box-shadow: 0 0 42px rgba(0, 173, 181, 0.15);
box-shadow: 0 0 42px rgba(0, 173, 181, 0.15);
margin-bottom: 20px;
}
.template-section .template-wrapper .template-from input:focus {
border-color: #A00202;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.subsctemplateribe-section .template-wrapper .template-from input {
width: 470px;
}
}
@media (max-width: 767px) {
.template-section .template-wrapper .template-from input {
width: 100%;
}
}
.template-section .template-wrapper .support {
margin-bottom: 35px;
}
.template-section .template-wrapper .support .support-icon {
margin-right: 20px;
}
@media (max-width: 767px) {
.template-section .template-wrapper .support h2 {
font-size: 30px;
}
}
.template-section .template-wrapper .support h2 span {
color: #A00202;
display: block;
}
.template-section .template-wrapper .template-links ul li {
display: inline-block;
}
.template-section .template-wrapper .template-links ul li a i {
width: 49px;
height: 49px;
line-height: 49px;
text-align: center;
border-radius: 50%;
color: #fff;
background: #8C96A7;
margin-right: 20px;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.template-section .template-wrapper .template-links ul li a span {
font-size: 26px;
font-weight: 600;
color: #A00202;
margin-right: 40px;
}
.template-section .template-wrapper .template-links ul li a:hover i {
background: #A00202;
}
.template-section .template-wrapper .template-links ul li:last-child a {
margin-right: 0;
}
.template-section .template-wrapper .template-links ul li:first-child a i {
background: #A00202;
}
@media (max-width: 767px) {
.template-section .template-wrapper .template-links ul li:first-child {
display: block;
margin-bottom: 15px;
}
}
/*===========================
| | Article Section
===========================*/
.article-section {
position: relative;
z-index: 1;
overflow: hidden;
margin-top: 00px;
margin-bottom: 100px;
}
.article-section strong {
/* font-weight: bolder; */
font-size: 16px;
font-weight: bold;
/* line-height: 50px; */
}
.article-section h1 {
font-size: 32px;
}
/*===========================
| | ASC Section
===========================*/
.bg-container {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
padding:200px 0 200px 0;
}
.asc-section {
position: relative;
z-index: 1;
overflow: hidden;
/* margin-top: 150px; */
min-height: 650px;
}
.asc-section img {
object-fit: cover;
opacity: 0.4;
}
.asc-section::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: -webkit-gradient(linear, left top, right top, from(#ffffff), color-stop(rgba(255, 255, 255, 0.95)), color-stop(rgba(255, 255, 255, 0.64)), color-stop(rgba(255, 255, 255, 0.02)), to(rgba(255, 255, 255, 0)));
/* background-image: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)); */
z-index: -1;
}
.asc-section .asc-wrapper .asc-from {
margin-bottom: 50px;
}
.asc-section .asc-wrapper .asc-from input {
width: 100%;
max-width: 570px;
height: 65px;
font-size: 14px;
border: none;
background: #fff;
padding: 0 30px;
color: #a78c8c;
border-radius: 10px;
margin-right: 20px;
border: 1px solid transparent;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
-webkit-box-shadow: 0 0 42px rgba(0, 173, 181, 0.15);
box-shadow: 0 0 42px rgba(0, 173, 181, 0.15);
margin-bottom: 20px;
}
.asc-section .asc-wrapper .asc-from input:focus {
border-color: #A00202;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.subscascribe-section .asc-wrapper .asc-from input {
width: 470px;
}
}
@media (max-width: 767px) {
.asc-section .asc-wrapper .asc-from input {
width: 100%;
}
}
.asc-section .asc-wrapper .support {
margin-bottom: 35px;
}
.asc-section .asc-wrapper .support .support-icon {
margin-right: 20px;
}
@media (max-width: 767px) {
.asc-section .asc-wrapper .support h2 {
font-size: 30px;
}
}
.asc-section .asc-wrapper .support h2 span {
color: #A00202;
display: block;
}
.asc-section .asc-wrapper .asc-links ul li {
display: inline-block;
}
.asc-section .asc-wrapper .asc-links ul li a i {
width: 49px;
height: 49px;
line-height: 49px;
text-align: center;
border-radius: 50%;
color: #fff;
background: #8C96A7;
margin-right: 20px;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.asc-section .asc-wrapper .asc-links ul li a span {
font-size: 26px;
font-weight: 600;
color: #A00202;
margin-right: 40px;
}
.asc-section .asc-wrapper .asc-links ul li a:hover i {
background: #A00202;
}
.asc-section .asc-wrapper .asc-links ul li:last-child a {
margin-right: 0;
}
.asc-section .asc-wrapper .asc-links ul li:first-child a i {
background: #A00202;
}
@media (max-width: 767px) {
.asc-section .asc-wrapper .asc-links ul li:first-child {
display: block;
margin-bottom: 15px;
}
}
/*===========================
Blog css
===========================*/
.blog-section {
position: relative;
overflow: hidden;
background-color: #e6e6e6;
}
.blog-section .blog-shadow {
border-radius: 10px;
-webkit-box-shadow: 0 10px 35px rgba(0, 0, 0, 0.089);
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.089);
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
position: relative;
padding: 40px;
z-index: 1;
}
.blog-section .shape {
top: 235px;
right: -30px;
}
.blog-section .single-blog .blog-img {
margin-bottom: 25px;
border-radius: 1px 1px 0 0;
overflow: hidden;
}
.blog-section .single-blog .blog-img a {
display: block;
}
.blog-section .single-blog .blog-img a img {
width: 100%;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.blog-section .single-blog .blog-content h4 {
font-family: 'Roboto', sans-serif;
font-size: 18px;
margin-bottom: 20px;
}
.blog-section .single-blog .blog-content h4:hover {
color: #A00202;
}
.blog-section .single-blog .blog-content p {
font-size: 16px;
line-height: 25px;
margin-bottom: 20px;
}
.blog-section .single-blog:hover .blog-img img {
/* -webkit-transform: scale(1.3) rotate(-7deg);
transform: scale(1.3) rotate(-7deg); */
transform: scale(1.1);
}
/* .products-section:hover{
-webkit-transform: scale(1.1) rotate(-1deg);
transform: scale(1.1) rotate(-1deg);
} */
/*===========================
| | Image Header Section
===========================*/
.image-header-section {
position: relative;
z-index: 1;
overflow: hidden;
margin-top: 130px;
min-height: 370px;
margin-bottom: 50px;
}
@media (max-width: 767px) {
.image-header-section {
margin-top: 30px;
}
}
.image-header-section .img-height {
min-height: 370px;
}
.image-header-section h1 {
color:white;
padding-top: 300px;
}
.image-header-section h3 {
color:white;
padding-top: 180px;
font-size:42px;
}
.image-header-section .single-slider .img-bg {
min-height: 370px;
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(https://www.cpcengineering.com/assets/img/header/website-header.jpg);
}
.image-header-section .single-slider.img-bg.img-height {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(https://www.cpcengineering.com/assets/img/header/website-header.jpg);
}
.image-header-section img {
object-fit: cover;
opacity: 0.4;
min-height: 370px;
}
.image-header-section::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: -webkit-gradient(linear, left top, right top, from(#ffffff), color-stop(rgba(255, 255, 255, 0.95)), color-stop(rgba(255, 255, 255, 0.64)), color-stop(rgba(255, 255, 255, 0.02)), to(rgba(255, 255, 255, 0)));
/* background-image: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)); */
z-index: -1;
}
@media (max-width: 767px) {
.image-header-section .template-wrapper .template-links ul li:first-child {
display: block;
margin-bottom: 15px;
}
}
/*===========================
footer css
===========================*/
.footer ul {
font-size:14px;
}
.footer .footer-widget-wrapper {
margin-bottom: 30px;
}
.footer .footer-widget-wrapper .footer-widget a.logo {
margin-bottom: 15px;
}
.footer .footer-widget-wrapper .footer-widget h4 {
color: #000;
margin-bottom: 15px;
margin-top: 40px;
}
.footer .footer-widget-wrapper .footer-widget p {
color: #000;
font-size: 14px;
line-height: 24px;
margin-bottom: 38px;
}
.footer .footer-widget-wrapper .footer-widget .footer-links li a {
color: #000;
line-height: 37px;
-webkit-transition: .3s;
transition: .3s;
}
.footer .footer-widget-wrapper .footer-widget .footer-links li a:hover {
color: #A00202;
padding-left: 8px;
}
.footer .footer-widget-wrapper .footer-widget .footer-social-links ul li {
display: inline-block;
}
.footer .footer-widget-wrapper .footer-widget .footer-social-links ul li a {
width: 35px;
height: 35px;
line-height: 15px;
text-align: center;
color: #000;
background: #8C96A7;
border-radius: 5px;
margin-right: 20px;
}
.footer .footer-widget-wrapper .footer-widget .footer-social-links ul li a:hover {
background: #A00202;
}
.footer .footer-widget-wrapper .footer-widget .footer-social-links ul li:last-child a {
margin-right: 0;
}
.footer .footer-widget-wrapper .footer-widget .map-canvas .map {
border-radius: 10px;
width: 100%;
height: 207px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.footer .footer-widget-wrapper .footer-widget .map-canvas .map {
height: 300px;
}
}
.footer .copyright-area {
padding: 25px 0;
border-top: 1px solid #8C96A7;
}
.footer .copyright-area a {
color: #8C96A7;
}
.footer .copyright-area a:hover {
color: #A00202;
}
.filter-color{
/* filter: invert(9%) sepia(78%) saturate(6114%) hue-rotate(359deg) brightness(95%) contrast(102%); */
}
.background-image {
height:auto;
left:0;
min-height:100%;
min-width:1024px;
position:fixed;
top:0;
width:100%;
z-index: -1
}
#dot-matrix {
background: url(http://s14.directupload.net/images/111129/44ga9qid.png);
height: 100%;
width: 100%;
position: fixed;
top: 0;
z-index: 1
}
/* This is fancy. not important */
#content {
z-index: 9999;
position: relative;
margin: auto;
width: 60%
}
hr.article {
border: 1px solid darkred;
background-color: darkred;
width: 15%;
opacity: 1;
}
hr.page {
border: 1px solid darkred;
background-color: darkred;
width: 50%;
opacity: 1;
}
hr.panel {
border: 1px solid darkred;
background-color: darkred;
width: 100%;
opacity: 1;
}
hr.what-we-do {
/* "darkred" (#8B0000) era un cuarto rojo distinto al de marca, y al
100% de ancho parecía un borde de sección en vez de un separador. */
width: 84px;
height: 3px;
margin: 16px auto 0;
border: 0;
opacity: 1;
background-color: var(--cpc-red);
}
hr.hrarticle {
border: 0;
height: 2px;
opacity: 1;
margin-top: 5px;
background-color: var(--cpc-red);
}
hr.blending {
border: 2px solid darkred;
background-color: darkred;
width: 28%;
opacity: 1;
margin-top:5px;
}
hr.choose {
border: 2px solid darkred;
background-color: darkred;
width: 48%;
opacity: 1;
margin-top:5px;
}
hr.psmigration {
border: 1px solid darkred;
background-color: darkred;
width: 100%;
opacity: 1;
}
hr.project {
border: 2px solid darkred;
background-color: darkred;
width: 100%;
opacity: 1;
margin-top:5px;
}
/* p {
background: rgba(0, 0, 0, 0.3);
color: tomato;
font: normal normal bold 4.4em/1.1 Helvetica, sans-serif;
} */
/*# sourceMappingURL=main.css.map */
nav > .nav.nav-tabs{
border: none;
color:#fff;
background:#272e38;
border-radius:0;
}
nav > div a.nav-item.nav-link,
nav > div a.nav-item.nav-link.active
{
border: none;
padding: 18px 25px;
color:#fff;
background:#272e38;
border-radius:0;
}
nav > div a.nav-item.nav-link.active:after
{
content: "";
position: relative;
bottom: -60px;
left: -10%;
border: 15px solid transparent;
border-top-color: #A00202 ;
}
.tab-content{
background: #fdfdfd;
line-height: 25px;
border: 1px solid #ddd;
border-top:5px solid #A00202;
border-bottom:5px solid #A00202;
padding:30px 25px;
}
nav > div a.nav-item.nav-link:hover,
nav > div a.nav-item.nav-link:focus
{
border: none;
background: #A00202;
color:#fff;
border-radius:0;
transition:background 0.20s linear;
}
.side-menu {
padding-top: 20px;
padding-left:0px;
padding-bottom: 20px;
}
.side-menu p {
padding-left:20px;
}
.side-menu a {
padding-left:20px;
}
.side-menu h3{
padding-bottom: 40px;
padding-left:20px;
}
.side-menu .nav > li > a {
padding-left:20px;
padding-top: 10px;
color:rgb(73, 73, 73);
font-weight: 500;
}
.side-menu .nav > li > a.parent-link {
background-color: #990000;
margin:0;
padding-top: 10px;
padding-left: 20px;
color:white;
min-height: 50px;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
border-bottom: none;
}
.side-menu .nav > li > a:active {
background-color:#A00202;
margin-right:0px;
color:white;
}
.side-menu .nav > li {
margin:0;
padding: 0;
}
.side-menu .nav
.side-menu .nav > li:hover {
background-color:#365e7c;
margin-right:0px;
color:white;
}
/* .side-menu .nav > li > a:after {
color: #444;
font-size: 25px;
content: ' >';
} */
.side-menu .nav > li > a:hover {
background-color:#365e7c;
color:white;
}
.side-menu .nav > li > .active {
background-color:#365e7c;
margin-right:0px;
color:white;
}
.side-menu .nav > .active {
background-color:#1d3344;
margin-right:0px;
color:white;
}
.side-menu .nav > li.active > a {
color: white;
}
.border-bottom-red {
border: 4px solid #D7D7D7;
}
.border-bottom {
border: 1px solid #D7D7D7;
}
.border-bottom-red:hover {
border-bottom: 12px solid #a00202;
}
.list-border-bottom {
font-size: 14px;
line-height: 30px;
}
.cornerBorder {
position:relative; /* this one is new - used to contain absolute elements */
width: 200px;
height: 80px;
background-color: #522d5b;
}
.cornerBorder:after {
content: "";
position:absolute;
margin:-20px;
width:40px;
height:40px;
transform:rotate(45deg);
background-color:#000; /* to see where it is */
}
#hexagon {
width: 30px;
height: 13.735px;
background:#a00202;
position: relative;
}
#hexagon::before {
content: "";
position: absolute;
top: -28.8675px;
left: 0;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 28.8675px solid #a00202;
}
#hexagon::after {
content: "";
position: absolute;
bottom: -28.8675px;
left: 0;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 28.8675px solid #a00202;
}
/* Thick red border */
hr.new4 {
border: 5px solid #a00202;
margin-bottom:50px;
opacity: 1;
}
/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/
/* DEMO GENERAL ============================== */
.hover {
overflow: hidden;
position: relative;
padding-bottom: 44%;
}
.hover-overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 90;
transition: all 0.4s;
}
.hover img {
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s;
}
.hover-content {
position: relative;
z-index: 99;
padding-right:60px;
padding-left:60px;
}
/* DEMO 1 ============================== */
.hover-1 img {
width: 105%;
position: absolute;
top: 0;
left: -5%;
transition: all 0.3s;
}
.hover-1-content {
position: absolute;
bottom: 0;
left: 0;
z-index: 99;
transition: all 0.4s;
}
.hover-1 .hover-overlay {
background: rgba(0, 0, 0, 0.5);
}
.hover-1-description {
transform: translateY(0.5rem);
transition: all 0.4s;
opacity: 0;
}
.hover-1:hover .hover-1-content {
bottom: 2rem;
}
.hover-1:hover .hover-1-description {
opacity: 1;
transform: none;
}
.hover-1:hover img {
left: 0;
}
.hover-1:hover .hover-overlay {
opacity: 0;
}
/* DEMO 2 ============================== */
.hover-2 .hover-overlay {
background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1));
}
.hover-2-title {
position: absolute;
top: 20%;
left: 0;
text-align: center;
width: 100%;
z-index: 99;
transition: all 0.3s;
color: white;
}
.hover-2-description {
width: 100%;
position: absolute;
bottom: 0;
opacity: 0;
left: 0;
text-align: center;
z-index: 99;
transition: all 0.3s;
}
.hover-2:hover .hover-2-title {
transform: translateY(-1.5rem);
color:#A00202;
font-size: 3.8rem;
}
.hover-2:hover .hover-2-description {
bottom: 0.5rem;
opacity: 1;
}
.hover-2:hover .hover-overlay {
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1));
}
/* DEMO 3 ============================== */
.hover-3::after {
content: '';
width: calc(100% - 3rem);
height: calc(100% - 3rem);
border: 1px solid #fff;
position: absolute;
top: 1.5rem;
left: 1.5rem;
z-index: 90;
transition: all 0.3s;
transform: scale(1.1);
opacity: 0;
display: block;
opacity: 0;
}
.hover-3-content {
position: absolute;
top: 50%;
left: 0;
width: 100%;
transform: translateY(-50%);
text-align: center;
z-index: 99;
}
.hover-3-description {
opacity: 0;
transform: scale(1.3);
transition: all 0.3s;
}
.hover-3 img {
width: 110%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hover-3 .hover-overlay {
background: rgba(0, 0, 0, 0.2);
}
.hover-3:hover img {
width: 100%;
}
.hover-3:hover::after {
opacity: 1;
transform: none;
}
.hover-3:hover .hover-3-description {
opacity: 1;
transform: none;
}
.hover-3:hover .hover-overlay {
background: rgba(0, 0, 0, 0.8);
}
/* DEMO 4 ============================== */
.hover-4 img {
width: 110%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hover-4 .hover-overlay {
background: rgba(0, 0, 0, 0.4);
z-index: 90;
}
.hover-4-title {
position: absolute;
bottom: 0;
right: 0;
padding: 3rem;
z-index: 99;
}
.hover-4-description {
position: absolute;
top: 2rem;
left: 2rem;
text-align: right;
border-right: 3px solid #fff;
padding: 0 1rem;
z-index: 99;
transform: translateX(-1.5rem);
opacity: 0;
transition: all 0.3s;
}
@media (min-width: 992px) {
.hover-4-description {
width: 50%;
}
}
.hover-4:hover img {
width: 100%;
}
.hover-4:hover::after {
opacity: 1;
transform: none;
}
.hover-4:hover .hover-4-description {
opacity: 1;
transform: none;
}
.hover-4:hover .hover-overlay {
background: rgba(0, 0, 0, 0.8);
}
/* DEMO 5 ============================== */
.hover-5::after {
content: '';
width: 100%;
height: 10px;
background: #A00202;
position: absolute;
bottom: -10px;
left: 0;
display: block;
transition: all 0.3s;
z-index: 999;
color:white;
}
.hover-5 .hover-overlay {
background: rgba(0, 0, 0, 0.226);
}
.hover-5-title {
position: absolute;
bottom: 1rem;
left: 0;
transition: all 0.3s;
padding: 2rem 3rem;
z-index: 99;
color:white;
}
.hover-5-title span {
transition: all 0.4s;
opacity: 0;
color: #A00202;
}
.hover-5:hover .hover-overlay {
background: rgba(0, 0, 0, 0.603);
color:white;
transform: scale(1.2);
}
.hover-5:hover .hover-5-title {
bottom: 0;
/* color:#A00202; */
font-size:3.2rem;
}
.hover-5:hover .hover-5-title span {
opacity: 1;
color:#A00202;
}
.hover-5:hover::after {
bottom: 0;
color:#A00202;
}
/*
*
* ==========================================
* FOR DEMO PURPOSES
* ==========================================
*
*/
/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/
/* Horizontal line */
.collapsible-link::before {
content: '';
width: 14px;
height: 2px;
background: #333;
position: absolute;
top: calc(50% - 1px);
right: 1rem;
display: block;
transition: all 0.3s;
}
/* Vertical line */
.collapsible-link::after {
content: '';
width: 2px;
height: 14px;
background: #333;
position: absolute;
top: calc(50% - 7px);
right: calc(1rem + 6px);
display: block;
transition: all 0.3s;
}
.collapsible-link[aria-expanded='true']::after {
transform: rotate(90deg) translateX(-1px);
}
.collapsible-link[aria-expanded='true']::before {
transform: rotate(180deg);
}
/*
*
* ==========================================
* FOR DEMO PURPOSES
* ==========================================
*
*/
.with-chevron[aria-expanded='true'] i {
display: block;
transform: rotate(180deg) !important;
}
.counter {
background-color:#f5f5f5;
padding: 20px 0;
border-radius: 5px;
}
.count-title {
font-size: 40px;
font-weight: normal;
margin-top: 10px;
margin-bottom: 0;
text-align: center;
}
.count-text {
font-size: 13px;
font-weight: normal;
margin-top: 10px;
margin-bottom: 0;
text-align: center;
}
.fa-2x {
margin: 0 auto;
float: none;
display: table;
color: #4ad1e5;
}
/* COUNTER SECTION */
.sectionClass {
padding: 20px 0px 50px 0px;
position: relative;
display: block;
}
.fullWidth {
width: 100% !important;
display: table;
float: none;
padding: 0;
min-height: 1px;
height: 100%;
position: relative;
}
.sectiontitle {
background-position: center;
margin: 30px 0 0px;
text-align: center;
min-height: 20px;
}
/* .sectiontitle h2 {
font-size: 30px;
color: #222;
margin-bottom: 0px;
padding-right: 10px;
padding-left: 10px;
} */
.headerLine {
width: 160px;
height: 2px;
display: inline-block;
background: #101F2E;
}
.projectFactsWrap{
display: flex;
margin-top: 30px;
flex-direction: row;
flex-wrap: wrap;
}
#projectFacts .fullWidth{
padding: 0;
}
.projectFactsWrap .item{
width: 25%;
height: 100%;
padding: 50px 0px;
text-align: center;
}
.projectFactsWrap .item:nth-child(1){
background: rgb(16, 31, 46);
}
.projectFactsWrap .item:nth-child(2){
background: rgb(18, 34, 51);
}
.projectFactsWrap .item:nth-child(3){
background: rgb(21, 38, 56);
}
.projectFactsWrap .item:nth-child(4){
background: rgb(23, 44, 66);
}
.projectFactsWrap .item p.number{
font-size: 40px;
padding: 0;
font-weight: bold;
}
.projectFactsWrap .item p{
color: rgba(255, 255, 255, 0.8);
font-size: 18px;
margin: 0;
padding: 10px;
font-family: 'Open Sans';
}
.projectFactsWrap .item span{
width: 60px;
background: rgba(255, 255, 255, 0.8);
height: 2px;
display: block;
margin: 0 auto;
}
.projectFactsWrap .item i{
vertical-align: middle;
font-size: 50px;
color: rgba(255, 255, 255, 0.8);
}
.projectFactsWrap .item:hover i, .projectFactsWrap .item:hover p{
color: white;
}
.projectFactsWrap .item:hover span{
background: white;
}
@media (max-width: 786px){
.projectFactsWrap .item {
flex: 0 0 50%;
}
}
/*COUNTER SECTION */
.slider-content h1 {
color:#fff;
padding-top: 160px;
}
ul.special_bullet {
list-style: none;
padding-left:0;
}
ul.special_bullet li:before {
color: #A00202;
content: "\27bd \0020";
}
/* BROCHURE PANEL COLOR CLASS */
.brochure-bg {
background-color:#aa3131;
color:white
}
.zoom {
transition: transform 5s; /* Animation */
margin: 0 auto;
}
.zoom:hover {
transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
.imgBox { /* now a container for the image */
display: inline-block; /* shrink wrap to image */
overflow: hidden; /* hide the excess */
}
.imgBox img {
display: block; /* no whitespace */
transition: 10s ease-in-out;
}
.imgBox:hover img {
transform: scale(1.2);
}
a:hover,a:focus{
outline: none;
text-decoration: none;
}
.tab{ text-align: center; }
.tab .nav-tabs{
display: inline-block;
border-bottom: none;
position: relative;
}
.tab .nav-tabs li{
margin-bottom: 0;
}
.tab .nav-tabs li a{
display: block;
padding: 20px;
border: none;
border-radius: 0;
font-size: 17px;
font-weight: 700;
color: #444;
margin-right: 0;
text-align: center;
z-index: 1;
transition: all 0.3s ease 0s;
}
.tab .nav-tabs li a i{
display: block;
font-size: 40px;
color: #A00202;
margin-bottom: 15px;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover{
border: none;
background: transparent;
}
.tab .nav-tabs li a:before,
.tab .nav-tabs li a:after{
content: "";
width: 0;
border-top: 3px solid #A00202;
position: absolute;
bottom: -1px;
left: 0;
transition: all 0.3s ease 0s;
}
.tab .nav-tabs li a:after{
left: auto;
right: 0;
}
.tab .nav-tabs li.active a:before,
.tab .nav-tabs li a:hover:before,
.tab .nav-tabs li.active a:after,
.tab .nav-tabs li a:hover:after{
width: 50%;
}
.tab .tab-content{
padding: 20px;
margin-top: -5px;
border-radius: 0 0 5px 5px;
border-top: 1px solid #d7d6d6;
font-size: 15px;
color: #757575;
line-height: 30px;
}
.tab .tab-content h3{
font-size: 24px;
margin-top: 0;
}
@media only screen and (max-width: 479px){
.tab .nav-tabs li{
width: 100%;
text-align: center;
margin-bottom: 5px;
}
.tab .nav-tabs li a,
.tab .nav-tabs li a:hover{ border-bottom: 1px solid #dfdfdf; }
.tab .tab-content{ border-top: none; }
}
/* MODAL WINDOW */
.portfolio-modal .modal-dialog {
margin: 1rem;
max-width: 100vw;
}
.portfolio-modal .modal-content {
padding-top: 6rem;
padding-bottom: 6rem;
text-align: left;
}
.portfolio-modal .modal-content h2 {
font-size: 3rem;
line-height: 3rem;
}
.portfolio-modal .modal-content p.item-intro {
font-style: italic;
margin-bottom: 2rem;
font-family: "Droid Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.portfolio-modal .modal-content p {
margin-bottom: 2rem;
}
.portfolio-modal .modal-content ul.list-inline {
margin-bottom: 2rem;
}
.portfolio-modal .modal-content img {
margin-bottom: 2rem;
}
.portfolio-modal .close-modal {
position: absolute;
top: 1.5rem;
right: 1.5rem;
width: 3rem;
height: 3rem;
cursor: pointer;
background-color: transparent;
}
.portfolio-modal .close-modal:hover {
opacity: 0.3;
}
.modal-open {
overflow: hidden;
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
.modal {
position: fixed;
top: 0;
left: 0;
z-index: 1050;
display: none;
width: 100%;
height: 100%;
overflow: hidden;
outline: 0;
}
.modal-dialog {
position: relative;
width: auto;
margin: 0.5rem;
pointer-events: none;
}
.modal.fade .modal-dialog {
transition: transform 0.3s ease-out;
transform: translate(0, -50px);
}
@media (prefers-reduced-motion: reduce) {
.modal.fade .modal-dialog {
transition: none;
}
}
.modal.show .modal-dialog {
transform: none;
}
.modal.modal-static .modal-dialog {
transform: scale(1.02);
}
.modal-dialog-scrollable {
display: flex;
max-height: calc(100% - 1rem);
}
.modal-dialog-scrollable .modal-content {
max-height: calc(100vh - 1rem);
overflow: hidden;
}
.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
flex-shrink: 0;
}
.modal-dialog-scrollable .modal-body {
overflow-y: auto;
}
.modal-dialog-centered {
display: flex;
align-items: center;
min-height: calc(100% - 1rem);
}
.modal-dialog-centered::before {
display: block;
height: calc(100vh - 1rem);
height: -webkit-min-content;
height: -moz-min-content;
height: min-content;
content: "";
}
.modal-dialog-centered.modal-dialog-scrollable {
flex-direction: column;
justify-content: center;
height: 100%;
}
.modal-dialog-centered.modal-dialog-scrollable .modal-content {
max-height: none;
}
.modal-dialog-centered.modal-dialog-scrollable::before {
content: none;
}
.modal-content {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.3rem;
outline: 0;
}
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
z-index: 1040;
width: 100vw;
height: 100vh;
background-color: #000;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop.show {
opacity: 0.5;
}
.modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 1rem 1rem;
border-bottom: 1px solid #dee2e6;
border-top-left-radius: calc(0.3rem - 1px);
border-top-right-radius: calc(0.3rem - 1px);
}
.modal-header .close {
padding: 1rem 1rem;
margin: -1rem -1rem -1rem auto;
}
.modal-title {
margin-bottom: 0;
line-height: 1.5;
}
.modal-body {
position: relative;
flex: 1 1 auto;
padding: 1rem;
}
.modal-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
padding: 0.75rem;
border-top: 1px solid #dee2e6;
border-bottom-right-radius: calc(0.3rem - 1px);
border-bottom-left-radius: calc(0.3rem - 1px);
}
.modal-footer > * {
margin: 0.25rem;
}
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll;
}
@media (min-width: 576px) {
.modal-dialog {
max-width: 500px;
margin: 1.75rem auto;
}
.modal-dialog-scrollable {
max-height: calc(100% - 3.5rem);
}
.modal-dialog-scrollable .modal-content {
max-height: calc(100vh - 3.5rem);
}
.modal-dialog-centered {
min-height: calc(100% - 3.5rem);
}
.modal-dialog-centered::before {
height: calc(100vh - 3.5rem);
height: -webkit-min-content;
height: -moz-min-content;
height: min-content;
}
.modal-sm {
max-width: 300px;
}
}
@media (min-width: 992px) {
.modal-lg,
.modal-xl {
max-width: 800px;
}
}
@media (min-width: 1200px) {
.modal-xl {
max-width: 1140px;
}
}
#portfolio .portfolio-item {
max-width: 45rem;
margin-left: auto;
margin-right: auto;
}
#portfolio .portfolio-item .portfolio-link {
position: relative;
display: block;
margin: 0 auto;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover {
display: flex;
position: absolute;
width: 100%;
height: 100%;
background: rgba(253, 65, 65, 0.7);
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity ease-in-out 0.25s;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
font-size: 2.25rem;
color: white;
}
#portfolio .portfolio-item .portfolio-link:hover .portfolio-hover {
opacity: 1;
}
#portfolio .portfolio-item .portfolio-caption {
padding: 2.5rem;
text-align: center;
background-color: #fff;
}
#portfolio .portfolio-item .portfolio-caption .portfolio-caption-heading {
font-size: 2rem;
font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 700;
margin-bottom: 0;
}
#portfolio .portfolio-item .portfolio-caption .portfolio-caption-subheading {
font-size: 1.5rem;
font-style: italic;
font-family: "Droid Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/**** CLASSES SECTION *****/
/*---------------------
Classes Section
-----------------------*/
.classes-section {
background: #e6e6e6;
/* padding-bottom: 80px; */
}
.classes-section .section-title {
margin-bottom: 35px;
}
.class-item {
overflow: hidden;
margin-bottom: 30px;
}
.class-item img:hover {
transform: scale(1.2);
transition-duration: 5s;
}
.class-item .ci-pic img {
min-width: 100%;
}
.class-item .ci-text {
background: #A00202;
position: relative;
padding: 10px 30px 26px 30px;
z-index: 1;
}
.class-item .ci-text:hover {
transform: scale(1.2);
transition-duration: 2s;
padding-left:80px;
}
.class-item .ci-text:after {
position: absolute;
left: -5px;
top: -44px;
height: 100px;
width: 800px;
border-top: 4px solid #ffffff;
background: #A00202;
content: "";
-webkit-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
z-index: -1;
}
.class-item .ci-text span {
color: #fff;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
}
.class-item .ci-text h5 {
font-size: 20px;
color: #ffffff;
font-weight: 600;
text-transform: uppercase;
margin-top: 4px;
font-family: "Oswald", sans-serif;
letter-spacing: 0.05cm;
}
.class-item .ci-text h4 {
font-size: 26px;
color: #ffffff;
font-weight: 600;
text-transform: uppercase;
margin-top: 4px;
}
.class-item .ci-text a {
display: inline-block;
width: 46px;
height: 46px;
background: rgba(255, 255, 255, 0.1);
line-height: 46px;
text-align: center;
font-size: 24px;
color: #ffffff;
position: absolute;
right: 30px;
bottom: 26px;
}
.ci-pic img:hover {
transform: scale(1.2);
}
.reflection-container{
position:relative;
display:inline-block;
vertical-align:middle;
transform-style: preserve-3d;
perspective: 1000px;
&:before{
content:'Hover me ➜';
color:#fff;
position:absolute;
left:-1rem;
top:50%;
font-size:6vh;
transform:translateX(-100%) translateY(-50%);
}
.reflection-content{
height:80vh;
width:80vh;
background:#000 url(https://unsplash.it/800/800/?random);
background-size:cover;
background-position:center;
transform:rotateX(0) rotateY(0);
pointer-events:none;
transition:100ms linear transform;
overflow:hidden;
&:before{
content:'';
position:absolute;
width:200%;
height:200%;
left:-50%;
top:-50%;
background: linear-gradient(rgba(255,255,255,0.2),rgba(0,0,0,0.2));
}
}
.reflection-grid-cell{
position:absolute;
z-index: 1;
width:10%;
height:10%;
}
@for $r from 1 to 11{
@for $c from 1 to 11 {
.reflection-grid-cell-#{( ($r*10) + $c - 10)}{
top:($r*10%)-10%;
left:($c*10%)-10%;
}
.reflection-grid-cell-#{( ($r*10) + $c - 10)}:hover ~ .reflection-content{
transform:rotateX((($r*-5)+25deg)) rotateY((-25deg+($c*5)));
&:before{
transform:translateY(25-(5%*$r));
}
}
}
}
}
/* mission vision values 001 */
.boxs {
position: relative;
margin-bottom: 30px;
color: #4d585f;
background-color: white;
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: opacity 0.25s ease-out;
-moz-transition: opacity 0.25s ease-out;
transition: opacity 0.25s ease-out;
border-radius: 3px;
}
.project_widget .pw_img {
position: relative;
overflow: hidden
}
.project_widget .pw_img:before {
position: absolute;
top: 0;
left: -75%;
z-index: 2;
display: block;
content: '';
width: 50%;
height: 100%;
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg)
}
.project_widget .pw_img:hover::before {
-webkit-animation: shine .75s;
animation: shine .75s
}
@-webkit-keyframes shine {
100% {
left: 125%
}
}
@keyframes shine {
100% {
left: 125%
}
}
.project_widget .pw_img img {
border-radius: 3px 3px 0 0
}
.project_widget .pw_content .pw_header {
padding: 20px;
border-bottom: 1px solid #e6eaee
}
.project_widget .pw_content .pw_header h6 {
font-size: 16px;
margin: 0
}
.project_widget .pw_content .pw_header small {
font-size: 12px
}
.project_widget .pw_content .pw_meta {
padding: 20px
}
.project_widget .pw_content .pw_meta small,
.project_widget .pw_content .pw_meta span {
display: block
}
.project_widget .pw_content .pw_meta span {
font-weight: 500
}
/* mission vision values 002 */
.blog-post {
-webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
}
.blog-post .blog-img .overlay,
.blog-post .blog-img .post-meta {
position: absolute;
opacity: 0;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.blog-post .blog-img .overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.blog-post .blog-img .post-meta {
bottom: 5%;
right: 5%;
z-index: 1;
}
.blog-post .blog-img .post-meta .read-more:hover {
color: #6dc77a !important;
}
.blog-post .content h1, .blog-post .content h2, .blog-post .content h3, .blog-post .content h4, .blog-post .content h5, .blog-post .content h6 {
line-height: 1.2;
}
.blog-post .content .title {
font-size: 18px;
}
.blog-post .content .title:hover {
color: #6dc77a !important;
}
.blog-post .content .author .name:hover {
color: #6dc77a !important;
}
.blog-post:hover {
-webkit-transform: translateY(-7px);
transform: translateY(-7px);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.blog-post:hover .blog-img .overlay {
opacity: 0.65;
}
.blog-post:hover .blog-img .post-meta {
opacity: 1;
}
.blog-post .post-meta .like i,
.profile-post .like i {
-webkit-text-stroke: 2px #dd2427;
-webkit-text-fill-color: transparent;
}
.blog-post .post-meta .like:active i, .blog-post .post-meta .like:focus i,
.profile-post .like:active i,
.profile-post .like:focus i {
-webkit-text-stroke: 0px #dd2427;
-webkit-text-fill-color: #dd2427;
}
.avatar.avatar-ex-sm {
height: 36px;
}
.shadow {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15) !important;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15) !important;
}
.text-muted {
color: #8492a6 !important;
}
.para-desc {
max-width: 600px;
}
.section-title .title {
letter-spacing: 0.5px;
font-size: 30px;
}
/*** MISSION VISION VALUES 004*
/*------- portfolio -------*/
.project {
margin: 15px 0;
}
.no-gutter .project {
margin: 0 !important;
padding: 0 !important;
}
.has-spacer {
margin-left: 30px;
margin-right: 30px;
margin-bottom: 30px;
}
.has-spacer-extra-space {
margin-left: 30px;
margin-right: 30px;
margin-bottom: 30px;
}
.has-side-spacer {
margin-left: 30px;
margin-right: 30px;
}
.project-title {
font-size: 1.25rem;
}
.project-skill {
font-size: 0.9rem;
font-weight: 400;
letter-spacing: 0.06rem;
}
.project-info-box {
margin: 15px 0;
background-color: #fff;
padding: 30px 40px;
border-radius: 5px;
}
.project-info-box p {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #d5dadb;
}
.project-info-box p:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
/*--- default effect ---*/
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
z-index: 2;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
opacity: 0;
background-color: rgba(0, 0, 0, 0.25);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
border-radius: 5px;
}
.primary-dark .hovereffect .overlay {
background-color: rgba(215, 48, 39, 0.95);
}
.white .hovereffect .overlay {
background-color: rgba(255, 255, 255, 0.75);
}
.dark-overlay .hovereffect .overlay {
background-color: rgba(0, 0, 0, 0.5);
}
.hovereffect img {
display: block;
position: relative;
-webkit-transition: all .3s linear;
transition: all .3s linear;
border: 10px solid #fff;
border-radius: 5px;
}
.no-image-border .hovereffect img {
border: none;
border-radius: 5px;
}
.no-image-border.no-gutter .hovereffect img, .no-image-border.no-gutter .hovereffect .overlay {
border: none;
border-radius: 0;
}
.hovereffect:hover img {
-webkit-transform: rotate(-7deg) scale(1.33);
-ms-transform: rotate(-7deg) scale(1.33);
transform: rotate(-7deg) scale(1.33);
}
.hovereffect-title .project-title-wrapper {
position: absolute;
top: 45%;
left: 0;
margin-top: -32px;
width: 100%;
padding: 10px;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.project:hover .hovereffect-title .project-title-wrapper {
top: 50%;
}
.hovereffect-title .project-title {
color: #fff;
background: transparent;
margin-bottom: 5px;
}
.white .hovereffect-title .project-title {
color: #171819;
}
.hovereffect-title p {
color: #fff;
background: transparent;
font-size: 12px;
margin: 0;
}
.white .hovereffect-title p {
color: #686c6d;
}
.hovereffect-title .hover-icons {
font-size: 16px;
background: transparent;
position: absolute;
bottom: 10%;
left: 0;
right: 0;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.project:hover .hovereffect-title .hover-icons {
bottom: 15%;
}
.hovereffect-title .hover-icons a {
color: #fff;
opacity: 0.7;
margin: 0 4px;
}
.white .hovereffect-title .hover-icons a {
color: #171819;
}
.hovereffect-title.project-icons {
position: absolute;
right: 0;
bottom: -10px;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.project:hover .hovereffect-title.project-icons {
bottom: 0;
}
.hovereffect-title.project-icons a {
display: inline-block;
position: relative;
color: #fff;
font-size: 11px;
line-height: 40px;
width: 45px;
height: 38px;
background: #8e9294;
opacity: 0.75;
}
.hovereffect-title.project-icons a i {
margin-right: -2px;
}
.hovereffect-title.project-icons a:first-child {
background-color: #7c8284;
margin-right: -4px;
}
.project-icons a:hover, .project-icons a:first-child:hover {
background-color: #505254 !important;
opacity: 1;
}
.hovereffect-title.project-icons .hover-icons {
color: #fff;
position: relative;
top: 0;
left: 0;
right: 0;
margin-top: 0;
opacity: 1;
}
.hovereffect-title.project-icons a:hover {
background: #931c19;
}
.primary-dark .project-icons a {
color: #d73027;
background-color: #fff;
}
.primary-dark .project-icons a:hover {
background-color: #efefef;
color: #fff;
}
.primary-dark .hovereffect-title.project-icons .hover-icons {
color: #d73027;
}
.white .hovereffect-title .hover-icons {
color: #171819;
}
.white .hovereffect-title.project-icons .hover-icons {
color: #171819;
}
.hovereffect-title .hover-icons a:hover {
opacity: 1;
}
.hovereffect:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
}
.boxed-portfolio .card {
background-color: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.025), 0 1px 4px rgba(0, 0, 0, 0.05) !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.025), 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}
.boxed-portfolio .hovereffect img, .boxed-portfolio .hovereffect .overlay {
border: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.boxed-portfolio .card-body {
padding: 25px 30px;
border-top: 1px solid #efefef;
}
.font-size-16, .fs-16 {
font-size: 16px !important;
}
.font-weight-700, .fw-bold, .fw-500 {
font-weight: 700 !important;
}
.card-title {
margin-bottom: 0;
}
.title-link, .title-link:focus {
color: #171819;
}
.card {
background-color: transparent;
border: none;
border-radius: 5px;
margin-bottom: 30px;
}
.mb-0 {
margin-bottom: 0 !important;
}
/* p {
font-family: "Barlow", sans-serif !important;
font-weight: 300;
font-size: 1rem;
color: #686c6d;
letter-spacing: 0.03rem;
margin-bottom: 10px;
} */
/* CARD STYLES */
.card-style2 {
position: relative;
display: flex;
transition: all 300ms ease;
border: 1px solid rgba(0, 0, 0, 0.09);
padding: 0;
height: 100%;
}
.card-style2 .card-img {
position: relative;
display: block;
background: #ffffff;
overflow: hidden;
border-radius: 0.25rem;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.card-style2 .card-img img {
transition: all 0.3s linear 0s;
}
.card-style2:hover .card-img img {
transform: scale(1.05);
}
.card-style2 .date {
position: absolute;
right: 30px;
top: 30px;
z-index: 1;
color: #16bae1;
overflow: hidden;
padding-bottom: 10px;
line-height: 24px;
text-align: center;
border: 2px solid #ededed;
display: inline-block;
background-color: #ffffff;
text-transform: uppercase;
border-radius: 0.25rem;
}
.card-style2 .date span {
position: relative;
color: #ffffff;
font-weight: 500;
font-size: 20px;
display: block;
text-align: center;
padding: 12px;
margin-bottom: 10px;
background-color: #00baee;
border-radius: 0.25rem;
}
.card-style2 .card-body {
position: relative;
display: block;
background: #ffffff;
padding: 2rem;
}
.card-style2 .card-body h3 {
margin-bottom: 0.8rem;
}
.card-style2 .card-body h3 a {
color: #004975;
}
.card-style2 .card-body h3 a:hover {
color: #00baee;
}
.card-style2 .card-footer {
border-top: 1px solid rgba(0, 0, 0, 0.09);
background: transparent;
padding-right: 2rem;
padding-left: 2rem;
-ms-flex-align: end;
align-items: flex-end;
}
.card-style2 .card-footer ul {
display: flex;
justify-content: space-between;
list-style: none;
margin-bottom: 0;
}
.card-style2 .card-footer ul li {
font-size: 15px;
}
.card-style2 .card-footer ul li a {
color: #394952;
}
.card-style2 .card-footer ul li a:hover {
color: #00baee;
}
.card-style2 .card-footer ul li i {
color: #00baee;
font-size: 14px;
margin-right: 8px;
}
/* CARD STYLES END */
.custom-bullet li {
display: block;
}
.custom-bullet li:before
{
/*Using a Bootstrap glyphicon as the bullet point*/
content: "\e080";
font-family: 'Glyphicons Halflings';
font-size: 12px;
float: left;
margin-top: 4px;
margin-left: -27px;
color: #a00000;
}
.choose-us p{
font-size: 1.5rem;
}
.industries-section .card-body {
background: white;
box-shadow: 0 3px rgb(10,10,10);
}
/* .industries-section .card-title, h2 {
font-family: 'Oswald', sans-serif;
} */
.contact-section i {
line-height: 5rem;
padding-right: 20px;
padding-top:10px;
}
.contact-section ul {
list-style: none;
padding-left:0;
}
.form-control-lg {
font-size: 1rem;
min-height: 60px;
}
.red-text {
color:#a00202;
}
@media (min-width: 768px) {
.article-section span {
font-size: 2.5rem;
}
.button3 {background-color: #f44336;} /* Red */
.dropdown-menu {
/* background-color: transparent; */
/* background-color: rgba(29, 28, 3, 0.5); */
min-width: 20rem;
border:0px;
padding-top: 20px;
padding-left: 20px;
border-radius: 0cm;
box-shadow: 0px 20px 50px 0px rgb(0 0 0 / 5%);
}
.sticky .dropdown-menu {
background-color: #fff;
box-shadow: 0px 20px 50px 0px rgb(0 0 0 / 5%);
}
#portfolio .portfolio-item .portfolio-caption .portfolio-caption-heading {
font-size: 1.5rem;
}
#portfolio .portfolio-item .portfolio-caption .portfolio-caption-subheading {
font-size: 1rem;
font-style: normal;
font-weight: 400;
}
.industries-section .card-body {
border-top: 3px solid black;
color: black;
}
.industries-section .card-body h5 {
color: black;
}
.justified-text {
text-align: justify;
}
@media (max-width: 767px){
.article-section span {
font-size:1.1rem;
}
}
@media (min-width: 768px){
.article-section span {
font-size:1.25rem;
}
}
.side-menu .nav-item:hover {
background-color: transparent !important; /* Restablece el color de fondo */
margin-left: 0 !important; /* Restablece el margen izquierdo */
padding-left: 0 !important; /* Restablece el padding izquierdo */
margin-right: 0 !important; /* Restablece el margen derecho */
color: inherit !important; /* Restablece el color del texto */
}
.side-menu .nav-link:hover {
background-color: #f8f9fa; /* Cambia este color según sea necesario */
}
/* ===============================================================
LLAVE DE CIERRE QUE FALTABA.
El "@media (min-width: 768px) {" de mas arriba (busca ".button3")
se quedo sin cerrar, asi que TODO lo que hay entre aquel punto y
el final del archivo esta dentro de esa media query y solo se
aplica en pantallas de 768px o mas.
El navegador cierra la llave solo al llegar al final del archivo,
por eso el sitio se veia bien y nadie lo noto. Pero impide juntar
este archivo con otros: al concatenar, las hojas siguientes caian
dentro de la media query y desaparecian en movil.
Se cierra AQUI, al final, para no cambiar nada de como se ve hoy.
PENDIENTE DE REVISAR: seguramente la intencion era cerrarla justo
despues de ".article-section span", lo que devolveria esas ~60
reglas al ambito global. Eso SI cambiaria el aspecto en movil, asi
que no se toca sin probarlo.
=============================================================== */
}
/* =============================================================
INICIO BLOQUE: info.css
============================================================= */
* {
box-sizing: border-box;
}
body {
/* --h/--l/--brandColor son variables del componente .listados de más
abajo; se dejan aquí porque las custom properties son heredadas y
.listados las necesita, pero "background-color: whitesmoke" no
tenía nada que ver con .listados y teñía de gris cualquier sección
del sitio que no llevara fondo propio. Eliminado. */
--h: 212deg;
--l: 43%;
--brandColor: hsl(var(--h), 71%, var(--l));
font-family: Roboto, sans-serif;
margin: 0;
}
.listados p {
margin: 0;
line-height: 1.6;
}
.listados ol {
list-style: none;
counter-reset: list;
padding: 0 1rem;
}
.listados li {
--stop: calc(100% / var(--length) * var(--i));
--l: 62%;
--l2: 88%;
--h: calc((var(--i) - 1) * (180 / var(--length)));
--c1: hsl(var(--h), 71%, var(--l));
--c2: hsl(var(--h), 71%, var(--l2));
position: relative;
counter-increment: list;
max-width: 45rem;
margin: 2rem auto;
padding: 2rem 1rem 1rem;
box-shadow: 0.1rem 0.1rem 1.5rem rgba(0, 0, 0, 0.3);
border-radius: 0.25rem;
overflow: hidden;
background-color: white;
}
.listados li::before {
content: '';
display: block;
width: 100%;
height: 1rem;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(to right, var(--c1) var(--stop), var(--c2) var(--stop));
}
.listados h3 {
display: flex;
align-items: baseline;
margin: 0 0 1rem;
color: rgb(70 70 70);
}
.listados h3::before {
display: flex;
justify-content: center;
align-items: center;
flex: 0 0 auto;
margin-right: 1rem;
width: 3rem;
height: 3rem;
content: counter(list);
padding: 1rem;
border-radius: 50%;
background-color: var(--c1);
color: white;
}
@media (min-width: 40em) {
.listados li {
margin: 3rem auto;
padding: 3rem 2rem 2rem;
}
.listados h3 {
font-size: 2.25rem;
margin: 0 0 2rem;
}
.listados h3::before {
margin-right: 1.5rem;
}
}
/* =============================================================
INICIO BLOQUE: headerCSS-megamenu.css
============================================================= */
/* CPC Engineering - cabecera y mega menús de prueba */
:root {
--cpc-menu-red: #a00202;
--cpc-menu-green: #009933;
--cpc-menu-text: #222222;
--cpc-menu-muted: #606872;
--cpc-menu-border: #e5e7eb;
--cpc-menu-bg: #ffffff;
--cpc-menu-shadow: 0 22px 55px rgba(0, 0, 0, 0.14);
}
/* Mantiene la navegación alineada y elimina el padding inline anterior. */
.navbar-area .cpc-main-nav {
align-items: center;
padding: 0;
margin: 0 0 0 auto;
list-style: none;
}
.navbar-area .cpc-main-nav > .nav-item {
position: relative;
margin-left: 26px;
list-style: none;
}
.navbar-area .cpc-main-nav > .nav-item:first-child {
margin-left: 0;
}
/* Los mega menús se posicionan respecto a toda la barra, no respecto al li. */
.navbar-area .cpc-main-nav > .cpc-nav-dropdown--mega {
position: static;
}
.navbar-area .cpc-nav-trigger,
.navbar-area .cpc-nav-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 42px;
padding: 8px 0;
border: 0;
background: transparent;
color: var(--cpc-menu-text);
font-family: 'Open Sans Condensed', sans-serif;
font-size: 17px;
font-weight: 600;
line-height: 1.15;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: color 0.2s ease;
}
.navbar-area .cpc-nav-trigger::after {
content: '';
width: 7px;
height: 7px;
margin-top: -3px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 0.2s ease;
}
.navbar-area .cpc-nav-trigger::before,
.navbar-area .cpc-nav-link:not(.cpcgreen-btn)::before {
content: '';
position: absolute;
right: 0;
bottom: 3px;
left: 0;
height: 2px;
background: var(--cpc-menu-red);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.2s ease;
}
.navbar-area .cpc-main-nav > .nav-item:hover > .cpc-nav-trigger,
.navbar-area .cpc-main-nav > .nav-item:hover > .cpc-nav-link,
.navbar-area .cpc-main-nav > .nav-item.is-open > .cpc-nav-trigger,
.navbar-area .cpc-main-nav > .nav-item.is-section-active > .cpc-nav-trigger,
.navbar-area .cpc-main-nav > .nav-item.is-section-active > .cpc-nav-link:not(.cpcgreen-btn) {
color: var(--cpc-menu-red);
}
.navbar-area .cpc-main-nav > .nav-item:hover > .cpc-nav-trigger::before,
.navbar-area .cpc-main-nav > .nav-item:hover > .cpc-nav-link:not(.cpcgreen-btn)::before,
.navbar-area .cpc-main-nav > .nav-item.is-open > .cpc-nav-trigger::before,
.navbar-area .cpc-main-nav > .nav-item.is-section-active > .cpc-nav-trigger::before,
.navbar-area .cpc-main-nav > .nav-item.is-section-active > .cpc-nav-link:not(.cpcgreen-btn)::before {
transform: scaleX(1);
}
.navbar-area .cpc-nav-dropdown.is-open > .cpc-nav-trigger::after {
transform: translateY(3px) rotate(225deg);
}
.navbar-area .cpc-nav-trigger:focus-visible,
.navbar-area .cpc-nav-link:focus-visible,
.navbar-area .cpc-mega-item:focus-visible {
outline: 3px solid rgba(160, 2, 2, 0.28);
outline-offset: 3px;
border-radius: 4px;
}
/* Panel común */
.navbar-area .cpc-dropdown-panel {
position: absolute;
top: calc(100% + 8px);
z-index: 110;
margin: 0;
border: 1px solid var(--cpc-menu-border);
background: var(--cpc-menu-bg);
box-shadow: var(--cpc-menu-shadow);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(8px);
transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}
.navbar-area .cpc-nav-dropdown.is-open > .cpc-dropdown-panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
/* Mega menú */
.navbar-area .cpc-mega-menu {
right: 0;
left: 0;
width: 100%;
padding: 24px;
}
.navbar-area .cpc-mega-menu__heading {
display: flex;
align-items: baseline;
gap: 18px;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--cpc-menu-border);
}
.navbar-area .cpc-mega-menu__eyebrow {
flex: 0 0 auto;
color: var(--cpc-menu-red);
font-family: 'Open Sans Condensed', sans-serif;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.02em;
}
.navbar-area .cpc-mega-menu__heading p {
margin: 0;
color: var(--cpc-menu-muted);
font-family: 'Roboto', sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.45;
text-align: left;
}
.navbar-area .cpc-mega-menu__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px 18px;
}
.navbar-area .cpc-mega-item {
position: relative;
display: block;
min-width: 0;
padding: 12px 42px 12px 14px;
border-left: 3px solid transparent;
color: var(--cpc-menu-text);
text-decoration: none;
transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.navbar-area .cpc-mega-item::after {
content: '›';
position: absolute;
top: 14px;
right: 16px;
color: var(--cpc-menu-red);
font-size: 24px;
line-height: 1;
opacity: 0;
transform: translateX(-5px);
transition: opacity 0.18s ease, transform 0.18s ease;
}
.navbar-area .cpc-mega-item:hover,
.navbar-area .cpc-mega-item.is-active {
border-left-color: var(--cpc-menu-red);
background: #f8f8f8;
color: var(--cpc-menu-text);
transform: translateX(2px);
}
.navbar-area .cpc-mega-item:hover::after,
.navbar-area .cpc-mega-item.is-active::after {
opacity: 1;
transform: translateX(0);
}
.navbar-area .cpc-mega-item__title,
.navbar-area .cpc-mega-item__description {
display: block;
}
.navbar-area .cpc-mega-item__title {
margin-bottom: 3px;
color: #202020;
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1.3;
}
.navbar-area .cpc-mega-item__description {
color: var(--cpc-menu-muted);
font-family: 'Roboto', sans-serif;
font-size: 12.5px;
font-weight: 400;
line-height: 1.42;
}
/* Botón verde de sostenibilidad, alineado con el resto del menú. */
.navbar-area .cpc-main-nav .cpcgreen-btn {
min-height: 36px;
margin-top: 0;
padding: 7px 16px;
border: 2px solid var(--cpc-menu-green);
border-radius: 22px;
background: var(--cpc-menu-green);
color: #ffffff !important;
font-weight: 700;
transition: background 0.2s ease, color 0.2s ease;
}
.navbar-area .cpc-main-nav .cpcgreen-btn:hover,
.navbar-area .cpc-main-nav .is-section-active > .cpcgreen-btn {
background: transparent;
color: var(--cpc-menu-green) !important;
}
/* Pantallas intermedias: compacta ligeramente el header antes del colapso. */
@media (min-width: 992px) and (max-width: 1199.98px) {
.navbar-area .cpc-main-nav > .nav-item {
margin-left: 17px;
}
.navbar-area .cpc-nav-trigger,
.navbar-area .cpc-nav-link {
font-size: 15.5px;
}
.navbar-area .cpc-mega-menu {
padding: 20px;
}
}
/* Tablet y móvil: panel acordeón dentro del navbar colapsado. */
@media (max-width: 991.98px) {
.navbar-area .cpc-main-nav {
display: block;
width: 100%;
padding: 8px 0 12px;
}
.navbar-area .cpc-main-nav > .nav-item,
.navbar-area .cpc-main-nav > .nav-item:first-child {
position: relative;
width: 100%;
margin: 0;
border-bottom: 1px solid #eeeeee;
}
.navbar-area .cpc-nav-trigger,
.navbar-area .cpc-nav-link {
display: flex;
justify-content: space-between;
width: 100%;
min-height: 44px;
padding: 10px 4px;
font-size: 17px;
}
.navbar-area .cpc-nav-trigger::before,
.navbar-area .cpc-nav-link:not(.cpcgreen-btn)::before {
display: none;
}
.navbar-area .cpc-dropdown-panel,
.navbar-area .cpc-mega-menu {
position: static;
display: none;
width: 100%;
padding: 8px 0 12px 12px;
border: 0;
border-left: 2px solid #ececec;
box-shadow: none;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
transition: none;
}
.navbar-area .cpc-nav-dropdown.is-open > .cpc-dropdown-panel {
display: block;
}
.navbar-area .cpc-mega-menu__heading {
display: block;
margin-bottom: 8px;
padding: 4px 10px 10px;
}
.navbar-area .cpc-mega-menu__eyebrow {
display: block;
margin-bottom: 4px;
font-size: 16px;
}
.navbar-area .cpc-mega-menu__grid {
grid-template-columns: 1fr;
gap: 2px;
}
.navbar-area .cpc-mega-item {
padding: 10px 34px 10px 12px;
}
.navbar-area .cpc-main-nav .cpcgreen-btn {
display: inline-flex;
justify-content: center;
width: auto;
margin: 10px 0;
padding: 7px 18px;
}
}
@media (prefers-reduced-motion: reduce) {
.navbar-area .cpc-dropdown-panel,
.navbar-area .cpc-nav-trigger,
.navbar-area .cpc-nav-link,
.navbar-area .cpc-mega-item,
.navbar-area .cpc-mega-item::after {
transition: none;
}
}
/* =============================================================
INICIO BLOQUE: new-styles.css
============================================================= */
.flip-container {
perspective: 1000px;
}
.flip-card {
width: 800px;
height: 450px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s;
}
.flip-card .front, .flip-card .back {
width: 100%;
height: 100%;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.flip-card .front {
background-image: url('https://www.cpcengineering.com/assets/img/engineering-services/Compact-Solution_evolution.png'); /* Cambia esto a la ruta de tu imagen */
background-size: cover;
}
.flip-card .back {
background-color: #cccccc;
color: white;
display: block;
padding: 20px;
text-align: left;
transform: rotateY(180deg);
}
.flip-container:hover .flip-card {
transform: rotateY(180deg);
}
.image-container {
position: relative;
display: inline-block;
}
.fade-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
color: white;
background-color: rgba(0, 0, 0, 0.7);
padding: 10px;
border-radius: 5px;
}
.image-container:hover .fade-text {
display: block;
animation: fadeIn 1s;
}
.solution-box {
font-family: "Roboto", Sans-serif;
background-color: #e6f7ff;
border-left: 5px solid #1a5f7a;
padding: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;
}
.card {
margin-bottom: 20px;
border: 2px solid rgba(0, 0, 0, 0.2); /* Borde semitransparente */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}
.card img {
height: 200px;
object-fit: cover;
}
.rounded-header1 {
font-size:20px;
background-color: #a00202; /* Color de fondo */
color: #fff;
padding: 10px; /* Espaciado interno */
margin-bottom: 10px; /* Espaciado inferior */
width: 100%; /* Ocupa el ancho completo de la columna */
}
.rounded-header2 {
font-size:20px;
background-color: #A9A9A9; /* Color de fondo */
padding: 10px; /* Espaciado interno */
margin-bottom: 10px; /* Espaciado inferior */
width: 100%; /* Ocupa el ancho completo de la columna */
}
.rounded-header3 {
font-size:20px;
background-color: #a00202; /* Color de fondo */
color: #fff;
padding: 10px; /* Espaciado interno */
margin-bottom: 10px; /* Espaciado inferior */
width: 100%; /* Ocupa el ancho completo de la columna */
}
.rounded-header4 {
font-size:20px;
background-color: #A9A9A9; /* Color de fondo */
padding: 10px; /* Espaciado interno */
margin-bottom: 10px; /* Espaciado inferior */
width: 100%; /* Ocupa el ancho completo de la columna */
}
.rounded-header5 {
font-size:20px;
background-color: #a00202; /* Color de fondo */
color: #fff;
padding: 10px; /* Espaciado interno */
margin-bottom: 10px; /* Espaciado inferior */
width: 100%; /* Ocupa el ancho completo de la columna */
}
.list {
position: relative;
}
.list h2 {
color: #fff;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 10px;
}
.list ul {
position: relative;
}
.list ul li {
position: relative;
left: 0;
color: #111;
list-style: none;
margin: 4px 0;
border-left: 2px solid #a00202;
transition: 0.5s;
cursor: pointer;
}
.list ul li:hover {
left: 10px;
}
.list ul li span {
font-size:14px;
position: relative;
padding: 8px;
padding-left: 12px;
display: inline-block;
z-index: 1;
transition: 0.5s;
}
.list ul li:hover span {
color: #eee;
}
.list ul li:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #a00202;
transform: scaleX(0);
transform-origin: left;
transition: 0.5s;
}
.list ul li:hover:before {
transform: scaleX(1);
}
.navbar-area .dropdown-menu {
min-width: 500px; /* Cambia según lo necesario */
padding: 10px; /* Para que los elementos no se vean apretados */
border-radius: 0; /* Elimina bordes redondeados */
transition: all 0.3s ease-in-out;
}
.navbar-area .dropdown-menu.show {
max-height: 400px; /* Limita el crecimiento */
overflow: hidden; /* Oculta elementos fuera del área visible */
}
/* h4, p y ul/ol quedan definidos una sola vez en other2.css (que carga
antes que esta hoja). Aquí solo había overrides que rompían esas reglas:
- h4{line-height:2} separaba demasiado los títulos de dos líneas.
- p{font-size:14px; text-align:justify} y ul,ol{font-size:14px} (esta
última además se pisaba a sí misma con un font-size:16px unas líneas
más arriba) bajaban todo el cuerpo de texto del sitio a 14px y
justificado.
Eliminados; other2.css ya define los valores correctos.
h5 sí se queda: aquí fija el tamaño real (18px), other2.css solo aporta
el line-height. */
h5 {
margin-bottom: 15px;
font-size: 18px;
}
ul {
line-height:1.8;
font-family:Roboto, sans-serif;
}
.article-quote--techno {
font-family: 'Roboto Mono', monospace;
font-size: 1.2rem;
border-left: 4px solid #a00202;
padding-left: 20px;
margin: 0 0 30px 0;
color: #333;
background: #f9f9f9;
}
.article-quote--cleanline {
font-family: 'Open Sans', sans-serif;
font-size: 1.1rem;
border-bottom: 2px solid #444;
margin: 0 auto 40px auto;
padding: 10px 20px;
text-align: center;
color: #222;
}
.article-quote--boldframe {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 1.3rem;
background: #eeeeee;
border: 2px solid #a00202;
padding: 15px 25px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.1);
margin: 0 0 30px 0;
}
.article-quote--leftbar {
font-family: 'PT Sans', sans-serif;
font-style: italic;
font-size: 1.2rem;
border-left: 6px solid #a00202;
padding: 15px 20px;
margin: 0 0 40px 0;
background: #fafafa;
color: #111;
}
.article-quote--engineering-block {
font-family: 'Titillium Web', sans-serif;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 1rem;
color: #fff;
background: #a00202;
padding: 15px 25px;
text-align: center;
margin: 0 0 30px 0;
}
.article-quote--framework {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 1.15rem;
background: #f2f2f2;
border: 1px solid #d0d0d0;
padding: 18px 30px;
margin: 0 0 30px 0;
color: #333;
border-radius: 4px;
}
.article-quote--gridline {
font-family: 'Lato', sans-serif;
font-size: 1.1rem;
padding: 20px;
margin: 0 0 40px 0;
border-top: 1px dashed #888;
border-bottom: 1px dashed #888;
color: #222;
background: #fcfcfc;
}
.article-quote--blockdark {
font-family: 'Source Sans Pro', sans-serif;
font-size: 1.2rem;
color: #ffffff;
background: #1a1a1a;
padding: 20px 25px;
text-align: center;
letter-spacing: 0.5px;
margin: 0 0 30px 0;
}
.article-quote--modular {
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
padding: 15px 20px;
margin: 0 0 30px 0;
border: 3px double #a00202;
background: #fff;
color: #111;
}
.article-quote--techplate {
font-family: 'Share Tech Mono', monospace;
font-size: 1.1rem;
background: #e6e6e6;
border-left: 4px solid #a00202;
padding: 12px 20px;
color: #2a2a2a;
margin: 0 0 30px 0;
}
/* .article-section strong ya no se pisa aquí: encogía la negrita de 16px
a 14px a mitad de frase. other2.css define font-size:16px/bold. */
.article-quote {
font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
font-weight: 700;
font-size: 1.6rem;
color: #303030;
background-color: #e0e0e0;
border-left: 8px solid #A00202;
border-right: 8px solid #A00202;
padding: 1.2rem 2rem;
margin-bottom: 2.5rem;
margin-left:50px;
margin-right:50px;
box-shadow: 0 6px 8px rgba(57, 73, 171, 0.2);
border-radius: 6px;
max-width: 820px;
line-height: 1.4;
text-align: center;
font-style:italic;
}
h5.custom-arrow {
position: relative;
padding: 12px 32px 12px 50px; /* espacio para flechas y aire */
font-weight: 700;
font-size: 1.3rem;
color: #a00202;
background: transparent;
display: inline-block;
cursor: pointer;
transition: all 0.3s ease;
clip-path: none;
}
/* Flechas más finas, duplicadas */
h5.custom-arrow::before {
content: "➤➤";
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #a00202;
font-size: 1.1rem;
letter-spacing: -2px;
transition: color 0.3s ease;
user-select: none;
pointer-events: none;
}
/* Efecto al pasar el ratón: fondo rojo con forma de flecha */
h5.custom-arrow:hover {
color: white;
background: #a00202;
clip-path: polygon(
0 0,
calc(100% - 15px) 0,
100% 50%,
calc(100% - 15px) 100%,
0 100%
);
padding-right: 36px; /* margen derecho para respirar */
}
/* Cambia color de las flechas */
h5.custom-arrow:hover::before {
color: white;
}
.featured-list {
/* #b30000 era otro rojo más, distinto del de marca */
border: 4px solid var(--cpc-red);
padding-top:20px;
padding-left: 30px;
padding-right:50px;
padding-bottom:10px;
text-align: justify;
margin-left:50px;
margin-right:50px;
background-image: url('https://www.cpcengineering.com/assets/img/Background-Featured.png'); /* Reemplaza con tu URL o ruta local */
background-size: cover; /* Ajusta la imagen para cubrir toda la pantalla */
background-repeat: no-repeat; /* Evita que se repita la imagen */
background-attachment: fixed; /* Hace que el fondo quede fijo al hacer scroll */
background-position: center center; /* Centra la imagen */
}
/* En pantallas menores a 768px */
@media (max-width: 767.98px) {
.featured-list {
padding: 12px;
margin-bottom: 20px;
margin-left: 0;
margin-right: 0;
border-radius: 0;
background-color: transparent;
}
}
@media (max-width: 767.98px) {
.featured-list ul{
padding-left:10px;
}
}
@media (max-width: 920px) {
.article-quote {
margin-left: 0;
margin-right: 0;
padding-left:10px;
padding-right:10px;
font-size:1.4rem;
}
}
:root{
/* Antes definía su propio rojo (#c13a2e) y su propio --cpc-text (#111),
distintos de los de other2.css: dos rojos de marca compitiendo, y un
--cpc-text que por casualidad de nombre chocaba con el de other2.css
(funcionaba solo porque esta hoja carga la última). Ahora reutiliza
la variable de marca de other2.css y --cpc-muted (idéntica en ambas)
ya no se repite aquí; --cpc-text se renombra a --cookie-text porque
es un color propio del banner de cookies, no el del texto del sitio. */
--cpc-primary: var(--cpc-red);
--cookie-text:#111;
--cpc-bg:#ffffff;
--cpc-border:#e5e7eb;
--btn-radius:10px;
}
/* Contenedor fijo inferior */
#cookie-banner{
position:fixed; left:0; right:0; bottom:0; z-index:9999;
/* Importante: por defecto tu JS lo pone display:block/none */
}
/* Tarjeta */
.cpc-cookie-card{
max-width:1100px; margin:100px auto;
background:var(--cpc-bg); color:var(--cookie-text);
border:1px solid var(--cpc-border); border-radius:14px;
box-shadow:0 8px 30px rgba(0,0,0,.08);
display:flex; gap:18px; align-items:center; padding:18px 16px;
}
/* Franja/acento rojo */
.cpc-cookie-accent{
width:8px; align-self:stretch; background:var(--cpc-primary);
border-radius:14px 0 0 14px;
}
.cpc-cookie-body{ flex:1; min-width:0 }
.cpc-cookie-title{ font-weight:700; margin:0 0 6px 0 }
.cpc-cookie-text{ margin:0; color:var(--cpc-muted); font-size:.95rem }
.cpc-cookie-text a{ color:var(--cpc-primary); text-decoration:underline }
.cpc-cookie-actions{ display:flex; flex-wrap:wrap; gap:10px }
/* Botón aceptar (mismo ID para tu JS) */
#accept-cookies, #reject-cookies{
border:1px solid var(--cpc-primary);
background:var(--cpc-primary); color:#fff;
padding:10px 14px; border-radius:var(--btn-radius);
cursor:pointer; font-weight:600; line-height:1; transition:.15s all;
}
#accept-cookies:hover{ transform:translateY(-1px) }
#reject-cookies:hover{ transform:translateY(-1px) }
/* Responsive */
@media (max-width: 720px){
.cpc-cookie-card{ flex-direction:column; align-items:stretch }
.cpc-cookie-accent{ height:6px; width:auto; border-radius:14px 14px 0 0 }
.cpc-cookie-actions{ justify-content:flex-start }
}