/* * {outline: 1px solid #ef2809;} */

/*----------------------------------------------------------------------------------
	GENERAL
----------------------------------------------------------------------------------*/
:root {
    --brand-dark-blue: #000827;
    --brand-orange: #ff2002;
    --brand-light-orange: #f3952b;
    --light-grey: #9c9c9c;
    /* --padd-top: 200px; */
}

@font-face {
    font-family: 'Proxima Nova Regular';
    src: url('../webfonts/ProximaNova-Regular.eot');
    src: url('../webfonts/ProximaNova-Regular.eot?#iefix') format('embedded-opentype'),
        url('../webfonts/ProximaNova-Regular.woff2') format('woff2'),
        url('../webfonts/ProximaNova-Regular.woff') format('woff'),
        url('../webfonts/ProximaNova-Regular.ttf') format('truetype'),
        url('../webfonts/ProximaNova-Regular.svg#ProximaNova-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova Bold';
    src: url('../webfonts/ProximaNova-Bold.eot');
    src: url('../webfonts/ProximaNova-Bold.eot?#iefix') format('embedded-opentype'),
        url('../webfonts/ProximaNova-Bold.woff2') format('woff2'),
        url('../webfonts/ProximaNova-Bold.woff') format('woff'),
        url('../webfonts/ProximaNova-Bold.ttf') format('truetype'),
        url('../webfonts/ProximaNova-Bold.svg#ProximaNova-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

body {font-family: 'Proxima Nova Regular';}

h1, h2, h3, h4, h5, h6
.h1, .h2, .h3, .h4, .h5, .h6 {font-family: 'Proxima Nova Bold';}
p {font-size: 18px;}

.padding-row-sm {padding: 24px 0;}
.padding-row-md {padding: 48px 0;}
.padding-row-lg {padding: 96px 0;}
.padding-row-xl {padding: 144px 0;}

.txt-dark-blue {color: var(--brand-dark-blue);}
.txt-orange {color: var(--brand-orange);}
.txt-light-grey {color: var(--light-grey);}

.bg-dark-blue {background-color: var(--brand-dark-blue);}
.bg-orange {background-color: var(--brand-orange);}
.bg-grey {background-color: var(--light-grey);}

a.btn-cta-header {
    display: block;
    border-radius: 99em;
    font-family: 'Proxima Nova Bold';
    font-size: 16px;
    line-height: 24px;
    padding: 8px 24px;
    background-color: var(--brand-orange);
    color: #ffffff;
    text-decoration: none;
    transition: all 150ms ease-in-out;
}

a.btn-cta-header:hover {background-color: #ffffff; color: var(--brand-dark-blue);}

.btn-cta-orange {
    display: inline-block;
    border-radius: 99em;
    /* font-family: 'Proxima Nova Bold';
    font-size: 16px;
    line-height: 24px;
    padding: 8px 24px; */
    background-color: var(--brand-orange);
    color: #ffffff;
    text-decoration: none;
    transition: all 150ms ease-in-out;
}

.btn-cta-orange:hover {background-color: #ffffff; color: var(--brand-dark-blue);}

::placeholder {
    color: #ffffff !important; /* Red color, use any color value (hex, rgb, name, etc.) */
    opacity: .4 !important;    /* Fixes lower opacity issue in Firefox */
}

/* Vendor prefixes for broader compatibility */
::-webkit-input-placeholder { /* Chrome, Opera, Safari */
    color: #ffffff;
}
:-moz-placeholder { /* Firefox 18- */
    color: #ffffff;
    opacity: .4;
}
::-moz-placeholder { /* Firefox 19+ */
    color: #ffffff;
    opacity: .4;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #ffffff;
}


/*----------------------------------------------------------------------------------
HEADER
----------------------------------------------------------------------------------*/
header {position: absolute; z-index: 1; width: 100%; padding: 16px 8px; /*background-color: var(--brand-dark-blue);*/}
/* header .navbar-expand-lg .navbar-collapse {justify-content: center;} */
header .nav-link:link, header .nav-link:visited {font-family: 'Proxima Nova Bold'; color: #ffffff;}
header .nav-link:hover {color: var(--brand-orange);}

header .logo {width: 140px;}
.navbar-toggler {border: none;}
.navbar-toggler:focus {box-shadow: unset;}


/*----------------------------------------------------------------------------------
CONTENT
----------------------------------------------------------------------------------*/

/* pagina principal -------------------------- */
.hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.hero video {
    position: absolute;
    z-index: -1;
    /* width: 100%; */
    /* height: 100vh; */
    /* max-width: none; */

    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
}

.hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    background-color: rgba(0, 8, 40, 0.9);
    /* background: linear-gradient(0deg,rgba(0, 8, 39, 1) 0%, rgba(0, 8, 39, 0.8) 75%); */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.txt-rotate {color: var(--brand-orange);}

.scroll-icon {
    position: absolute;
    width: 200px;
    height: 90px;
    padding-right: 3.5rem;
    bottom: 0px;
    right: 25%;
    text-align: right;
    border-right: 1px dashed rgba(255, 255, 255, 0.3);
    z-index: 0;
}

.scroll-icon .end-top {
    position: absolute;
    content: "";
    background-color: var(--brand-orange);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    /* display: inline-block; */
    /* vertical-align: top; */
    top: -6px;
    right: -4px;
}

.scroll-icon .mouse {
    position: absolute;
    height: 38px;
    width: 25px;
    border: 3px solid #ffffff;
    border-radius: 12px;
    right: -13px;
    top: 10px;
    display: block;
    text-align: center;
    /* z-index: 10; */
    /* -webkit-animation: vertical 3s ease infinite;*/
    animation: vertical 3s ease infinite; 
}

.scroll-icon .mouse::before {
    content: "";
    position: absolute;
    display: block;
    height: 5px;
    width: 3px;
    background-color: #ffffff;
    top: 6px;
    left: 50%;
    margin-left: -1.5px;
    border-radius: 2px;
}

@keyframes vertical {
    0%, 60%, 80%, 100% {-webkit-transform: translateY(0);}
    20% {-webkit-transform: translateY(-5px);}
    40% {-webkit-transform: translateY(20px);}
}

.bg-websites {background: url('../images/grey-graph.png') top left no-repeat;}
.card-footer i {color: #ffbb29;}


/* sección "el studio" -------------------------- */
.main-row {padding-top: 180px;}
.bg-socios {background: url('../images/orange-graph.png') center right no-repeat;}

.iphone {
    position: absolute;
    width: 44%;
    top: -220px;
    left: -2%;
    rotate: -30deg;
}

.modulo-txt-img {position: relative;}
.modulo-txt-img .wrapper-grid {position: relative; min-height: 38vw; display: flex; align-items: center;}
.modulo-txt-img .media-img {position: absolute; width: 50%; top: -40px; left: calc(0% + 0px); text-align: right; padding: 0;}
.modulo-txt-img .justify-content-start .media-img {left: 50%;}



/* sección "servicios" -------------------------- */
.service-block {
    position: relative;
    color: inherit;
    transition: color .25s ease-in-out;
    /* cursor: pointer; */
}

.service-block svg {width: 120px; height: 120px;}
.service-block svg path.st0, .service-block svg rect.st0, .service-block svg circle.st0 {fill: var(--brand-dark-blue); transition: fill .25s ease-in-out;}
.service-block svg path.st1, .service-block svg rect.st1, .service-block svg circle.st1 {fill: var(--brand-orange); transition: fill .25s ease-in-out;}

.service-block::before {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, #f3952b 0%,#ff2002 100%);
    z-index: -1;
    opacity: 0;
    transition: all .25s ease-in-out;
}

.service-block:hover::before {opacity: 1;}
.service-block:hover {color: #ffffff;}
.service-block:hover svg path.st0, .service-block:hover svg path.st1,
.service-block:hover svg rect.st0, .service-block:hover svg rect.st1,
.service-block:hover svg circle.st0, .service-block:hover svg circle.st1 {fill: #ffffff;}

.box-shadow {box-shadow: none; transition: all .25s ease-in-out;}
.box-shadow:hover {box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);}


/* sección "proyectos" -------------------------- */
.project-link {text-decoration: none; color: #ffffff;}
.project-link h2::after {
    content: '\f08e';
    font-family: "Font Awesome 7 Free";
    font-size: 16px;
    margin-left: 16px;
    color: var(--brand-orange);
    display: inline-block;
    width: 36px;
    height: 36px;
    text-align: center;
    line-height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.project-thumb {position: relative; overflow: hidden; border-radius: 8px;}
.project-thumb img {transform: scale(1,1); transition: all 0.25s ease-in-out;}
.project-thumb::after {
    content: '';
    position: absolute;
    background-color: var(--brand-orange);
    opacity: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transition: all 0.25s ease-in-out;
}

.project-link:hover img {transform: scale(1.15, 1.15);}
.project-link:hover .project-thumb::after {opacity: 0.8;}



/* sección "contactos" -------------------------- */
.full-row-link {
    position: relative;
    display: block;
    color: #ffffff;
    /* color: var(--brand-dark-blue); */
    text-decoration: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* border-top: 1px solid #efefef; */
    transition: all 150ms ease-in-out;
}

.full-row-link:hover p {transition: all 150ms ease-in-out;}

.full-row-link:hover, .full-row-link:hover p {
    /* background-color: var(--brand-orange); */
    color: #ffffff;
}

.full-row-link section::before {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg,rgba(243, 149, 43, 1) 0%, rgba(255, 32, 2, 1) 100%);
    z-index: -1;
    opacity: 0;
    transition: all 150ms ease-in-out;
}

.full-row-link section:hover::before {opacity: 1;}

.full-row-link p.cta::after {
    content: "\f054";
    font-family: "Font Awesome 7 Free";
    font-size: 20px;
    margin-left: 16px;
}

#map {height: 400px; border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1);}


/* sección "presupuesto" -------------------------- */
.options-box {
    display: flex;
    gap: 12px;
    /* max-width: 100%; */
    flex-wrap: wrap;
}

.iti {display: block !important;}
.iti__country-name {color: var(--brand-dark-blue);}

.grecaptcha-badge {display: none;}


/*----------------------------------------------------------------------------------
	FOOTER
----------------------------------------------------------------------------------*/
footer {background-color: var(--brand-dark-blue);}
footer h5 {font-family: 'Proxima Nova Bold';}

.social-links {margin: 0; padding: 0; list-style: none;}
.social-links li {display: inline-block; margin-right: 18px;}
.social-links li a {font-size: 20px; color: #ffffff; transition: .2s ease;}
.social-links li a:hover {color: var(--brand-orange);}

.contact-links {margin: 0; padding: 0; list-style: none;}

.footer-links {margin: 0; padding: 0; list-style: none;}
.footer-links li {display: inline-block; margin-right: 18px;}
.footer-links li a {color: var(--light-grey); text-decoration: none; transition: .2s ease;}
.footer-links li a:hover {color: #ffffff}


/*----------------------------------------------------------------------------------
	MEDIA QUERIES
----------------------------------------------------------------------------------*/
@media only screen and (max-width: 1366px) {
    /* el studio */
    .iphone {width: 52%; top: -80px; left: -12%;}

    .modulo-txt-img .wrapper-grid {min-height: 32vw;}
    .modulo-txt-img .media-img {width: 46%; top: -40px;}
    .modulo-txt-img .justify-content-start .media-img {left: 54%;}
}

@media only screen and (max-width: 991px) {
    /* general */
    .main-row {padding-top: 140px;}

	/* header */
    .offcanvas {background-color: var(--brand-dark-blue);}
    .offcanvas.offcanvas-end {width: 100%;}
    header .logo {width: 140px;}
    header .navbar-nav {height: 75vh;}
    header .nav-link {font-size: 40px;}

    /* pagina principal */
    .hero {height: unset; padding: 96px 0 120px 0;}
    .txt-rotate {display: block;}
    .bg-websites {background: none;}

    /* el studio */
    .bg-socios {background: none;}
    .iphone {position: relative; left: -12%; width: 100%;}
    .modulo-txt-img .media-img {display: none;}
}

@media only screen and (max-width: 767px) {
    /* pagina principal */
    .hero::after {
        background-color: rgba(0, 8, 40, 0.75);
        /* background: linear-gradient(0deg,rgba(0, 8, 39, 1) 0%, rgba(0, 8, 39, 0.8) 75%); */
    }

    .scroll-icon {right: 50%;}
}

@media only screen and (max-width: 575px) {
	/* header */
    header .logo {width: 120px;}
    header .navbar-nav {height: 400px;}
    a.btn-cta-header {padding: 18px 24px;}
    header .nav-link {font-size: 28px;}
}