Resultados del Validador CSS del W3C para http://www.xtencil.com/css/style.css (CSS versión 3)

Disculpas! Hemos encontrado las siguientes errores (11)

URI : http://www.xtencil.com/css/style.css

29 body La propiedad text-rendering no existe : optimizeLegibility
146 #brand Property fill doesn't exist. The closest matching property name is all : #292a2c
149 .nav-open #brand Property fill doesn't exist. The closest matching property name is all : #292a2c
681 .fp-viewing-diegolatorre #brand, .fp-viewing-toolr #brand, .fp-viewing-yourepics #brand Property fill doesn't exist. The closest matching property name is all : #fff
702 .fp-viewing-diegolatorre .btn svg path, .fp-viewing-toolr .btn svg path, .fp-viewing-yourepics .btn svg path Property fill doesn't exist. The closest matching property name is all : #fff
707 .fp-viewing-diegolatorre .btn:hover svg path, .fp-viewing-toolr .btn:hover svg path, .fp-viewing-yourepics .btn:hover svg path Property fill doesn't exist. The closest matching property name is all : #292a2c
872 .btn svg path Property fill doesn't exist. The closest matching property name is all : #292a2c
875 .btn:hover svg path Property fill doesn't exist. The closest matching property name is all : #fff
1298 .cursor La propiedad pointer-events no existe : none
1645 .project-info .btn svg path Property fill doesn't exist. The closest matching property name is all : #fff
1758 body La propiedad font-smoothing no existe : antialiased

↑ Top

Las Advertencias (54)

URI : http://www.xtencil.com/css/style.css

4 -webkit-box-sizing is a vendor extension
179 -webkit-transition is a vendor extension
184 -webkit-transition-delay is a vendor extension
207 -webkit-transform is a vendor extension
208 -moz-transform is a vendor extension
209 -o-transform is a vendor extension
211 -webkit-transition is a vendor extension
212 -moz-transition is a vendor extension
213 -o-transition is a vendor extension
225 -webkit-transform is a vendor extension
226 -moz-transform is a vendor extension
227 -o-transform is a vendor extension
229 -webkit-transition is a vendor extension
230 -moz-transition is a vendor extension
231 -o-transition is a vendor extension
253 -webkit-transform is a vendor extension
254 -moz-transform is a vendor extension
255 -o-transform is a vendor extension
259 -webkit-transform is a vendor extension
260 -moz-transform is a vendor extension
261 -o-transform is a vendor extension
270 -webkit-box is a vendor extension
271 -webkit-flex is a vendor extension
272 -ms-flexbox is a vendor extension
274 -webkit-box-pack is a vendor extension
275 -webkit-justify-content is a vendor extension
276 -ms-flex-pack is a vendor extension
278 -webkit-box-align is a vendor extension
279 -webkit-align-items is a vendor extension
280 -ms-flex-align is a vendor extension
812 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before Colores iguales para background-color y border-color
832 :-webkit-autofill is a vendor extended pseudo-class
833 :-webkit-autofill is a vendor extended pseudo-class
834 :-webkit-autofill is a vendor extended pseudo-class
835 :-webkit-autofill is a vendor extended pseudo-class
836 :-webkit-autofill is a vendor extended pseudo-class
837 :-webkit-autofill is a vendor extended pseudo-class
838 :-webkit-autofill is a vendor extended pseudo-class
839 :-webkit-autofill is a vendor extended pseudo-class
840 :-webkit-autofill is a vendor extended pseudo-class
842 -webkit-text-fill-color is a vendor extension
843 -webkit-box-shadow is a vendor extension
903 -moz-transition is a vendor extension
904 -webkit-transition is a vendor extension
940 ::-moz-selection is a vendor extended pseudo-element
953 ::-moz-selection is a vendor extended pseudo-element
960 :-ms-input-placeholder is a vendor extended pseudo-class
963 ::-ms-input-placeholder is a vendor extended pseudo-element
984 -webkit-box-decoration-break is a vendor extension
997 -webkit-box-decoration-break is a vendor extension
1754 -webkit-min-device-pixel-ratio is a vendor extension
1754 min-device-pixel-ratio is a vendor extension
1756 -moz-osx-font-smoothing is a vendor extension
1757 -webkit-font-smoothing is a vendor extension

↑ Top

Información de CSS válida

*, :after, :before {
box-sizing : border-box;
outline : 0 !important ;
}
:root {
--bg-color : #b2b4b6;
}
.loadingAnimation {
z-index : 999999;
position : absolute;
top : 50%;
left : 50%;
transform : translate(-50%,-50%);
}
.loadingAnimation svg {
animation : leaves 2s ease-in-out infinite alternate;
}
body {
font-family : "Graphik", sans-serif;
background-color : #b2b4b6;
font-size : 16px;
color : #292a2c;
font-weight : 400;
letter-spacing : -0.01em;
transition : background-color 1s ease-out;
}
body.nav-open {
overflow : hidden !important ;
}
body:not(#page-contact) .grecaptcha-badge {
visibility : hidden;
}
a, a.active, a:active, a:focus, a:hover {
color : #292a2c;
outline : 0;
text-decoration : none;
outline : 0;
}
a:hover {
color : #292a2c;
}
a[role="button"], button {
cursor : pointer;
}
a {
font-weight : 500;
}
h1, h2, h3, h4, h5, h6 {
color : #292a2c;
font-weight : 600;
line-height : 1.2;
margin-bottom : 0.6em;
}
h1 {
font-size : 62px;
letter-spacing : -0.05em;
}
h2 {
font-size : 40px;
letter-spacing : -0.04em;
}
h3 {
font-size : 28px;
letter-spacing : -0.03em;
}
h4 {
font-size : 18px;
letter-spacing : -0.03em;
}
.lead, .light {
font-weight : 300;
}
#header #subtitle, .lead {
font-size : 3.2vh;
letter-spacing : -0.025em;
}
.regular {
font-weight : 400;
}
.medium {
font-weight : 500;
}
.semibold, strong {
font-weight : 600;
}
.bold {
font-weight : 700;
}
.big, big {
font-size : 1.25em;
}
.small, small {
font-size : 0.85em;
}
.uppercase {
text-transform : uppercase;
letter-spacing : 0.06em !important ;
}
.text-muted {
opacity : 0.6;
}
.sep {
opacity : 0.75;
margin : auto 0.25em;
}
.list-inline-item:not(:last-child) {
margin-right : 18px;
}
dt {
font-weight : 400;
}
.navbar {
height : auto;
padding-top : 0;
padding-bottom : 0;
top : 30px;
animation : fade-down 1s;
}
.navbar-toggler {
padding : 0;
}
.navbar-brand {
z-index : 1111;
}
.main-menu {
width : 100%;
height : 0;
opacity : 0;
background : #fff;
transition : all 0.4s ease-in-out;
overflow : hidden !important ;
}
.nav-open .main-menu {
opacity : 1;
height : 100vh;
background : #f5df4d;
}
.main-menu .nav li a {
color : #292a2c;
font-size : 7vh;
font-weight : 600;
letter-spacing : -0.05em;
}
.main-menu .nav li {
opacity : 0;
transform : translateY(-40px);
transition-timing-function : cubic-bezier(0.45,0.005,0,1);
display : block !important ;
}
.nav-open .main-menu .nav li {
opacity : 1;
transform : translateY(0);
transition : transform 0.5s, opacity 0.5s;
}
.main-menu .nav li.delay-1 {
transition-delay : 0.4s;
}
.main-menu .nav li.delay-2 {
transition-delay : 0.5s;
}
.main-menu .nav li.delay-3 {
transition-delay : 0.6s;
}
.main-menu .nav li.delay-4 {
transition-delay : 0.7s;
}
.nav-button {
position : relative;
z-index : 1111;
border : none;
display : block;
padding : 6px;
}
.nav-button #nav-icon {
width : 24px;
height : 20px;
display : inline-block;
position : relative;
transform : rotate(0);
transition : 0.5s ease-in-out;
}
.nav-button #nav-icon span {
display : block;
position : absolute;
height : 3px;
width : 100%;
background : #292a2c;
border-radius : 9px;
opacity : 1;
left : 0;
transform : rotate(0);
transition : 0.25s ease-in-out;
}
.nav-open .nav-button #nav-icon span {
background : #292a2c !important ;
}
.nav-button #nav-icon span:nth-child(1) {
top : 0;
}
#nav-icon span:nth-child(3), .nav-button #nav-icon span:nth-child(2) {
top : 7px;
}
.nav-button #nav-icon span:nth-child(4) {
top : 14px;
}
.nav-open #nav-icon span:nth-child(1) {
top : 9px;
width : 0;
left : 50%;
}
.nav-open #nav-icon span:nth-child(2) {
transform : rotate(45deg);
}
.nav-open #nav-icon span:nth-child(3) {
transform : rotate(-45deg);
}
.nav-open #nav-icon span:nth-child(4) {
top : 9px;
width : 0;
left : 50%;
}
.flex-center {
display : flex;
justify-content : center;
align-items : center;
height : 100vh;
}
#footer-links {
width : 100%;
z-index : 3;
bottom : -100px;
padding-top : 6px;
padding-bottom : 6px;
transition : bottom 1s ease;
z-index : 1111;
}
#footer-links, #footer-links a {
color : #292a2c !important ;
}
.fp-viewing-footer #footer-links, .nav-open #footer-links {
bottom : 30px;
}
#footer-links ul {
margin : 0;
font-size : 16px;
}
#footer-links .list-inline-item {
margin-right : 40px;
}
#footer-links .list-inline-item:last-child {
margin-right : 0;
}
#description {
position : fixed;
z-index : 1111;
transform : rotate(-90deg);
transform-origin : bottom left;
left : -100px;
bottom : 0;
width : 100vh;
text-align : center;
line-height : 1;
font-size : 16px;
font-weight : 400;
animation : fade-right 1s;
transition : left 1s ease;
}
.fp-viewing-footer #description, .fp-viewing-header #description, .nav-open #description {
left : 52px;
color : #292a2c !important ;
}
#social {
position : fixed;
z-index : 1111;
transform : rotate(90deg);
transform-origin : right bottom;
right : -100px;
bottom : 0;
width : 100vh;
text-align : center;
line-height : 1;
transition : right 1s ease;
}
.fp-viewing-footer #social, .fp-viewing-header #social, .nav-open #social {
right : 52px;
}
#social .list-inline {
padding : 0;
margin : 0;
display : flex;
align-items : center;
justify-content : center;
font-size : 16px;
}
#social .list-inline-item {
padding : 0;
margin : 0;
margin-right : 30px;
position : relative;
text-align : center;
min-width : 28px;
min-height : 1px;
display : inline-block;
}
#social .list-inline-item:last-child {
margin-right : 0;
}
#social .list-inline-item a {
padding : 5px;
margin : 0;
transform : translate(0,-50%);
transform-origin : center center;
position : absolute;
top : 0;
left : 0;
}
#social .list-inline-item a:hover {
transform : rotate(-90deg) translate(50%,0);
}
#social .list-inline-item a .svg {
margin-left : 1px;
width : 21px;
height : auto;
}
#social .list-inline-item a .svg, #social .list-inline-item a:hover span {
opacity : 0;
display : none;
}
#social .list-inline-item a span, #social .list-inline-item a:hover .svg {
opacity : 1;
display : inline;
color : #292a2c;
}
#fp-nav {
opacity : 1;
transition : all 0.6s ease-out;
}
.fp-viewing-footer #fp-nav, .fp-viewing-header #fp-nav {
opacity : 0;
right : -10vw;
}
#fp-nav ul li a span {
background : #777;
}
#fp-nav ul li a.active span {
background : #f5df4d;
}
#header {
position : relative;
}
#header #subtitle {
font-weight : 300;
}
#header-tape {
position : absolute;
top : 44%;
left : 0;
right : 0;
z-index : 2000;
}
#header-tape img {
width : 100vw;
height : auto;
}
@media (max-width: 736px) {
#header-tape {
top : 32%;
left : -2%;
right : -2%;
}
#header-tape img {
width : 120vw;
height : auto;
}
}
@media (max-width: 420px) {
#header-tape {
top : 48%;
left : -10%;
right : -10%;
}
#header-tape img {
width : 170vw;
height : auto;
}
}
#header #title {
font-size : 6.5vh;
font-weight : 600;
line-height : 1.2;
margin-bottom : 0.6em;
letter-spacing : -0.05em;
}
#header {
position : relative;
overflow : hidden;
}
#page-index #header #header-bg {
position : absolute;
top : -2%;
left : -2%;
width : 104%;
height : 104%;
opacity : 0;
transition : opacity 0.6s linear;
}
#page-index #header.active #header-bg {
opacity : 1;
}
.bg-parallax {
display : block;
width : 104%;
height : 104%;
position : absolute;
top : -2%;
left : -2%;
z-index : -1;
background-image : url(img/sections/bg-parallax-gray.svg);
background-repeat : no-repeat;
background-position : center;
background-size : 100%;
filter : blur(0);
}
.cross-parallax {
content : url(img/sections/cross.svg);
display : block;
position : absolute;
z-index : 3;
bottom : 24%;
left : 8%;
width : 6vw;
height : auto;
}
.waves-parallax {
content : url(img/sections/waves.svg);
display : block;
position : absolute;
z-index : 3;
top : 8%;
right : 22%;
width : 16vw;
height : auto;
}
.moon-parallax {
content : url(img/sections/moon.svg);
display : block;
position : absolute;
z-index : 3;
bottom : 10%;
right : 16%;
width : 7vw;
height : auto;
}
main {
min-height : 100vh;
}
mail ol, main dl, main p, main ul {
margin-bottom : 1em;
}
#footer h2 {
font-size : 5vh;
}
.web-screen {
width : 100%;
display : block;
}
.web-screen img {
border-radius : 6px;
box-shadow : 0 0 50px rgb(0, 0, 0, 0.2);
}
.web-screen.h-100 div, .web-screen.h-100 img {
border-radius : 6px 6px 0 0;
}
.project-wrapper {
position : relative;
}
.mobile {
position : absolute;
bottom : -45px;
right : 10px;
background-color : #fff;
border-radius : 16px;
box-shadow : 0 0 50px rgb(0, 0, 0, 0.2);
z-index : 3;
display : flex;
align-items : center;
justify-content : center;
}
@media (orientation: landscape) {
.mobile {
width : 14vw;
height : 28vw;
}
}
@media (orientation: portrait) {
.mobile {
width : 14vh;
height : 28vh;
}
}
.mobile-dark {
background-color : #292a2c;
}
.mobile-screen {
width : 96%;
height : 92%;
background-color : #f6f6f6;
border-radius : 4px;
border : #eee solid 1px;
background-position : left top;
background-repeat : no-repeat;
background-size : cover;
}
.mobile-dark .mobile-screen {
border-color : #111;
}
#main .owl-stage-outer {
border-radius : 6px !important ;
box-shadow : 0 0 50px rgb(0, 0, 0, 0.2);
overflow : hidden;
}
#main .owl-stage-outer .web-screen img {
border-radius : 6px !important ;
box-shadow : none !important ;
}
#main .w-90 .item, #main .w-90 .owl-stage-outer {
width : 100% !important ;
}
.owl-theme .owl-dots {
position : absolute;
bottom : -40px;
left : 50%;
transform : translateX(-50%);
width : 100%;
}
.owl-theme .owl-dots .owl-dot span {
width : 4px;
height : 4px;
background : #777;
border : transparent solid 2px;
margin : 4px 10px;
}
.owl-theme .owl-dots .owl-dot.active span {
transform : scale(3) !important ;
background : 0 0;
border-color : #f5df4d !important ;
}
.owl-theme .owl-dots .owl-dot:hover span {
transform : scale(2.5) !important ;
background : 0 0;
border-color : #777 !important ;
}
.project-info .project-description, .project-info .project-tags {
transition : none !important ;
}
.project-info .project-tags {
margin-bottom : 30px;
}
.project-info .project-tags li {
margin : 0;
padding : 0;
text-transform : uppercase;
letter-spacing : 0.06em;
font-weight : 600;
font-size : 12.5px;
}
.project-info .project-tags li::after {
content : " ·";
padding : 0 0.2em 0 0.35em;
}
.project-info .project-tags li:last-child::after {
content : none;
}
.fp-viewing-footer, .fp-viewing-header {
background-color : #b2b4b6 !important ;
}
.fp-viewing-tukonta {
background-color : #cbc9dd !important ;
}
.fp-viewing-halftime {
background-color : #f8cece !important ;
}
.fp-viewing-surebeach {
background-color : #fff0d7 !important ;
}
.fp-viewing-inchorus {
background-color : #d5c2f1 !important ;
}
.fp-viewing-lymbus {
background-color : #aabed4 !important ;
}
.fp-viewing-itenlearning, .fp-viewing-proclade {
background-color : #bcefff !important ;
}
.fp-viewing-bcnbiketours {
background-color : #a2d6f0 !important ;
}
.fp-viewing-fotobb {
background-color : #d8fff6 !important ;
}
.fp-viewing-guadalupeferrandez {
background-color : #d8fff6 !important ;
}
.fp-viewing-kilianjornet {
background-color : #ccc !important ;
}
.fp-viewing-salomon {
background-color : #ffd3e7 !important ;
}
.fp-viewing-miquelrius {
background-color : #fbf3bb !important ;
}
.fp-viewing-diegolatorre, .fp-viewing-toolr, .fp-viewing-yourepics {
background-color : #292a2c !important ;
color : #ddd;
}
.fp-viewing-diegolatorre a, .fp-viewing-diegolatorre a:hover, .fp-viewing-toolr a, .fp-viewing-toolr a:hover, .fp-viewing-yourepics a, .fp-viewing-yourepics a:hover {
color : #fff;
}
.fp-viewing-diegolatorre .nav-button #nav-icon span, .fp-viewing-toolr .nav-button #nav-icon span, .fp-viewing-yourepics .nav-button #nav-icon span {
background : #fff;
}
.fp-viewing-diegolatorre h2, .fp-viewing-toolr h2, .fp-viewing-yourepics h2 {
color : #fff;
}
.fp-viewing-diegolatorre .btn:hover, .fp-viewing-toolr .btn:hover, .fp-viewing-yourepics .btn:hover {
background-color : #fff;
color : #292a2c;
}
#inner {
padding : 24vh 0 12vh 0;
font-size : 21px;
line-height : 1.65;
}
#inner h1 {
margin-bottom : 12vh;
}
.card {
border-radius : 8px;
}
.card-brand {
border : none;
background-color : rgb(0, 0, 0, 0.1);
height : 20vh;
min-height : 180px;
max-height : 220px;
margin : 5px 0;
text-align : center;
}
.card-brand .card-body {
display : flex;
align-items : center;
justify-content : center;
}
.card-brand .card-body .semibold {
line-height : 1.2 !important ;
}
.card-brand:hover {
background-color : #f5df4d;
transform : scale(1.025);
}
.color-dark .card-brand {
background-color : #2c2c2c;
}
.card-brand small {
font-size : 18px;
}
#testimonials {
padding : 10vh 0;
margin : 0;
}
#quotes .item {
margin : 0;
}
#quotes cite {
font-size : 28px;
letter-spacing : -0.025em;
font-style : normal;
font-weight : 300;
}
.service {
padding : 10vh 0;
}
.img-services {
position : relative;
}
#contact {
padding-top : 12vh;
padding-bottom : 10vh;
width : 100%;
}
#contact h1 u {
position : relative;
text-decoration : none;
white-space : nowrap;
}
#contact .list-social {
display : block;
width : 100% !important ;
padding : 0;
white-space : nowrap;
}
.legal {
font-size : 0.85em;
}
.control-label {
display : none;
}
.form-control {
border-radius : 0;
border : none;
border-bottom : 2px solid #292a2c;
background-color : transparent;
padding : 3vh 0;
font-size : 1.2em;
}
.form-control:focus {
border-color : #f5df4d;
box-shadow : none;
padding-left : 0.7em;
}
.custom-control-label {
font-size : 1em;
line-height : 1.65;
}
.custom-control-label::before {
background-color : #fff;
}
.custom-checkbox .custom-control-input ~ .custom-control-label::before {
border-color : #292a2c;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
background-color : #292a2c;
border-color : #292a2c;
}
.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
box-shadow : 0 0 0 1px #fff, 0 0 0 0.2rem #fff;
border-color : #292a2c;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
background-image : url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='white' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
}
.custom-select {
border-radius : 0;
border : none;
border-bottom : 2px solid #292a2c;
background-color : #fff;
padding : 0 0 1vh 0;
margin : 2vh 0 0 0;
font-size : 1.2em;
color : #495057;
}
input:-webkit-autofill, input:-webkit-autofill:focus, input:-webkit-autofill:hover, select:-webkit-autofill, select:-webkit-autofill:focus, select:-webkit-autofill:hover, textarea:-webkit-autofill, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:hover {
border-color : #292a2c;
}
form #fix {
display : none;
}
.btn {
line-height : 1;
padding : 18px 4px 16px 4px;
text-transform : uppercase;
letter-spacing : 0.6px;
border : none;
background-color : transparent;
border-radius : 6px;
font-weight : 600;
box-shadow : none !important ;
}
.btn:hover {
padding : 18px 24px 16px 24px;
background-color : #292a2c;
color : #fff;
}
.btn svg {
margin-right : 0.5em;
margin-top : -3px;
}
.btn:hover svg {
margin-right : 1em;
}
button svg {
display : inline;
float : left;
position : relative;
top : 6px;
}
#brand, .btn, .btn svg, .btn svg path, .card-brand, .form-control, .owl-dot span, ::after, ::before, a, button, h1, h2, h3, h4, input, p, select, textarea, ul {
transition : all 0.33s ease-in-out;
}
@keyframes leaves {
0% {
transform : scale(1.8);
opacity : 0;
}
35% {
transform : scale(2);
opacity : 1;
}
50% {
transform : scale(1);
opacity : 0;
}
100% {
transform : scale(1.8);
opacity : 0;
}
}
@keyframes scrollit {
from {
opacity : 1;
transform : translateY(0);
}
to {
opacity : 0;
transform : translateY(30px);
}
}
@keyframes pulse {
to {
opacity : 1;
}
}
::-moz-selection {
text-shadow : none;
background : #f5df4d;
color : #292a2c;
}
::selection {
text-shadow : none;
background : #f5df4d;
color : #292a2c;
}
img::selection {
background : 0 0;
}
img::-moz-selection {
background : 0 0;
}
.form-control::placeholder {
color : #292a2c;
opacity : 1 !important ;
}
.form-control:-ms-input-placeholder {
color : #292a2c;
}
.form-control::-ms-input-placeholder {
color : #292a2c;
}
hr {
margin : 40px 0;
}
.text-center hr, hr.hr-center {
margin : 40px auto;
}
hr.hr-mini {
width : 30px;
border-width : 3px;
}
hr.hr-yellow {
border-color : #f5df4d;
}
u {
position : relative;
text-decoration : none;
box-decoration-break : clone;
white-space : nowrap;
}
u::after {
content : "";
position : absolute;
width : 100%;
height : 0.45em;
bottom : -0.15em;
left : 0;
background-color : #f5df4d;
display : inline-block;
box-decoration-break : clone;
transform : skew(-14deg,0deg) rotate(-1deg);
z-index : -1;
}
h1 u::after {
width : calc(100% + 4px);
height : 0.28em;
bottom : 0;
}
#footer-links a, .navbar ul a, a.underlined {
position : relative;
display : inline-block;
padding : 0 !important ;
}
#footer-links a::after, .navbar ul a::after, a.underlined::after {
content : "";
position : absolute;
z-index : -1;
width : 0%;
height : 0.1em;
min-height : 2px;
left : 0;
bottom : 0.15em;
background-color : #292a2c;
transition : width 0.2s ease-out;
transition-delay : 0.2s;
}
#footer-links a:hover::after, .navbar ul a:hover::after, a.underlined:hover::after {
width : 100%;
transition-delay : 0s;
}
.color-dark #footer-links a::after, .color-dark .navbar ul a::after, .color-dark a.underlined::after {
background-color : #fff;
}
#error404 h1 {
animation : text-shadow 6s both;
}
@keyframes text-shadow {
0% {
text-shadow : 0 0 #f5df4d, 0 0 #f5df4d, 0 0 #f5df4d, 0 0 #f5df4d, 0 0 #f5df4d, 0 0 #f5df4d, 0 0 #f5df4d, 0 0 #f5df4d;
transform : translateX(0) translateY(0);
}
100% {
text-shadow : 1px 1px #f5df4d, 2px 2px #f5df4d, 3px 3px #f5df4d, 4px 4px #f5df4d, 5px 5px #f5df4d, 6px 6px #f5df4d, 7px 7px #f5df4d, 8px 8px #f5df4d;
transform : translateX(-8px) translateY(-8px);
}
}
#header-bg {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
z-index : -1;
}
#header-bg div {
position : absolute;
}
#header-bg .lineX {
background-color : rgb(0, 0, 0, 0.2);
width : 100%;
height : 1px;
}
#header-bg .lineY {
background-color : rgb(0, 0, 0, 0.2);
height : 100%;
width : 1px;
}
#header-bg [id^="line"] {
animation-timing-function : ease-in-out;
opacity : 0;
animation-fill-mode : forwards;
}
#header-bg #line-01 {
top : 0;
left : 20%;
animation-name : line-Y;
animation-duration : 1s;
animation-delay : 1s;
}
#header-bg #line-02 {
top : 0;
left : 40%;
animation-name : line-Y;
animation-duration : 1s;
animation-delay : 1.33s;
}
#header-bg #line-03 {
top : 0;
left : 60%;
animation-name : line-Y;
animation-duration : 1s;
animation-delay : 1.66s;
}
#header-bg #line-04 {
top : 0;
left : 80%;
animation-name : line-Y;
animation-duration : 1s;
animation-delay : 2s;
}
#header-bg #line-05 {
left : 0;
top : 20%;
animation-name : line-X;
animation-duration : 1s;
animation-delay : 1.66s;
}
#header-bg #line-06 {
left : 0;
top : 40%;
animation-name : line-X;
animation-duration : 1s;
animation-delay : 2s;
}
#header-bg #line-07 {
left : 0;
top : 60%;
animation-name : line-X;
animation-duration : 1s;
animation-delay : 2.33s;
}
#header-bg #line-08 {
left : 0;
top : 80%;
animation-name : line-X;
animation-duration : 1s;
animation-delay : 2.66s;
}
@keyframes line-X {
0% {
width : 0;
opacity : 1;
}
100% {
width : 100%;
opacity : 1;
}
}
@keyframes line-Y {
0% {
height : 0;
opacity : 1;
}
100% {
height : 100%;
opacity : 1;
}
}
#grid-container {
display : grid;
grid-template-columns : repeat(5,1fr);
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100vh;
background : 0 0;
z-index : -2;
animation-name : grid;
animation-delay : 3s;
animation-duration : 2s;
opacity : 0;
animation-fill-mode : forwards;
}
#grid-container div {
width : 100%;
height : 100%;
color : transparent;
font-size : 13px;
padding : 1em;
}
#grid-container div:nth-child(3) {
background : #d6d6d6;
}
#grid-container div:nth-child(6) {
background : #f5df4d;
}
#grid-container div:nth-child(22) {
background : #292a2c;
color : rgb(255, 255, 255, 0);
}
#grid-container div:nth-child(15) {
background : #f2f2f2;
}
@keyframes grid {
0% {
opacity : 0;
}
100% {
opacity : 1;
}
}
@media (min-width: 813px) {
div p:last-child {
margin-bottom : 0;
}
.section {
overflow : visible;
height : 100vh;
position : relative;
display : flex;
justify-content : center;
align-items : center;
background-position : left top;
background-repeat : repeat;
background-size : 40%;
}
.section .container-fluid {
position : relative;
padding : 0 2em 0 4em;
width : 98%;
height : 100vh;
display : flex;
align-items : center;
}
.section .container-fluid .row {
width : 100%;
}
.project-info {
opacity : 0;
transition : opacity 0.6s ease-in-out;
}
.active .project-info {
opacity : 1;
}
.project-thumb, .project-wrapper {
opacity : 0;
top : -10vw;
transition : all 0.6s ease-in-out;
}
.active .project-thumb, .active .project-wrapper {
opacity : 1;
top : 0;
}
.mobile {
opacity : 0;
right : -30vw;
transition : all 1s ease-in-out;
}
.active .mobile {
opacity : 1;
right : 10px;
}
.project-thumb {
height : 100vh;
display : flex;
align-items : center;
justify-content : center;
}
.mobile-screen img.img-fluid, .web-screen img.img-fluid {
width : 100% !important ;
height : auto;
}
.h-100 {
height : calc(100vh - 10vh) !important ;
margin-top : 10vh;
border-radius : 6px 6px 0 0;
}
.h-70 {
height : 70vh;
}
.w-90 {
width : 94%;
}
}
@media (min-width: 992px) {
.container-fluid {
padding : 0 40px;
}
.navbar {
padding : 0;
}
}
@media (min-width: 1025px) {
a, body, button {
cursor : none !important ;
}
.cursor {
position : absolute;
top : -4px;
background-color : #f5df4d;
border : transparent solid 2px;
width : 16px;
height : 16px;
border-radius : 100%;
transition : transform 0.2s cubic-bezier(0.75,-1.27,0.3,2.33), opacity 0.2s cubic-bezier(0.75,-0.27,0.3,1.33);
user-select : none;
z-index : 10000;
transform : scale(1);
}
.cursor.active {
opacity : 0.8;
transform : scale(2.4);
border : #f5df4d solid 2px;
background-color : transparent;
}
.cursor.hovered {
opacity : 0.5;
transform : scale(1.4);
background-color : #292a2c;
}
.nav-open .cursor {
background-color : #fff;
}
.nav-open .cursor.active {
border-color : #fff;
background-color : transparent;
}
#scrollDown, #scrollDown::after {
position : absolute;
left : 50%;
z-index : 111;
}
#scrollDown::after {
content : "";
width : 6px;
height : 6px;
display : block;
background : #666;
margin-left : -3px;
top : 14px;
border-radius : 6px;
animation : scrollit 2s ease-in-out infinite;
}
#scrollDown {
width : 34px;
height : 60px;
margin-left : -17px;
bottom : 75px;
margin-top : -30px;
box-shadow : 0 0 0 2px rgb(0, 0, 0, 0.2) inset;
border-radius : 22px;
}
#scrollDown {
opacity : 0;
transition : opacity 0.5s ease-out;
}
.active #scrollDown {
opacity : 1;
}
#scrollDown .text {
display : block;
margin-top : 68px;
margin-left : -30px;
font-size : 12px;
color : #292a2c;
text-transform : uppercase;
font-weight : 500;
letter-spacing : 0.4px;
white-space : nowrap;
opacity : 0.25;
animation : pulse 1s ease-in-out infinite alternate;
}
}
@media (min-width: 992px) and (max-width: 1200px) {
#header #title, h1 {
font-size : 6vh;
}
h2 {
font-size : 4vh;
}
h3 {
font-size : 3vh;
}
h4 {
font-size : 2vh;
}
#error404 h1 {
font-size : 20vh;
margin-bottom : 1vh !important ;
}
}
@media (min-width: 1200px) and (orientation: landscape) {
#header #title {
font-size : 9vh;
}
h1 {
font-size : 6.5vh;
}
h2 {
font-size : 4vh;
}
h3 {
font-size : 3vh;
}
#error404 h1 {
font-size : 20vh;
margin-bottom : 4vh !important ;
}
}
@media (max-width: 1024px) {
#header #title {
font-size : 72px;
}
#scrollDown {
display : none;
}
.card-brand small {
font-size : 16px;
}
}
@media (min-width: 813px) and (max-width: 1024px) {
body, html {
height : 100%;
}
#main {
height : 100vh;
height : calc(var(--vh, 1vh) * 100);
margin : 0 auto;
}
#main .section {
align-items : center;
display : flex;
height : 100%;
justify-content : center;
}
#main #footer.section, #main #header.section {
display : table;
}
#main .project-thumb-full, #main .project-wrapper {
margin-top : -8vh !important ;
}
#description, #social {
bottom : -3vh;
}
#inner h1 {
font-size : 8vh;
}
.card-brand {
height : 24vh;
}
}
@media (min-width: 415px) and (max-width: 812px) and (orientation: landscape) {
#main {
padding : 20px;
}
#main section {
padding-top : 100px;
padding-bottom : 100px;
}
}
@media (max-width: 812px) {
body {
font-size : 17px;
min-height : auto !important ;
}
h1 {
font-size : 50px;
margin-bottom : 6vh;
}
h2 {
font-size : 28px;
}
h3 {
font-size : 20px;
}
h4 {
font-size : 16px;
}
.big {
font-size : 19px;
}
.small, small {
font-size : 13px;
}
.lead {
font-size : 21px;
}
#quotes cite {
font-size : 21px;
}
u {
white-space : normal;
}
dt {
text-align : right;
}
dd {
text-align : left;
}
.navbar_ {
top : 0;
padding : 15px;
background-color : #fff;
}
#page-404 .navbar, #page-index .navbar {
background-color : transparent;
}
.navbar-brand svg {
height : 17px;
width : auto;
}
.nav-button {
height : 18px;
padding : 0;
}
.nav-open #description, .nav-open #footer-links, .nav-open #social {
color : #292a2c !important ;
font-size : 14px;
}
#description, .color-white #description {
left : -100px !important ;
}
.nav-open #description {
left : 30px !important ;
}
#social, .color-white #social {
right : -100px !important ;
}
.nav-open #social {
right : 28px !important ;
}
#social .list-inline {
font-size : 14px;
}
#social .list-inline-item {
margin-right : 12px;
}
#footer-links {
bottom : -240px;
opacity : 0;
}
#footer-links li {
font-size : 14px;
}
.nav-open #footer-links {
bottom : 15px;
opacity : 1;
}
.nav-open #footer-links li {
margin : 0 4px;
}
.nav-open #footer-links a {
color : #292a2c !important ;
}
#footer-links, #footer-links .text-right {
text-align : center !important ;
}
#footer-links .big {
display : none;
}
.fp-section {
min-height : auto;
height : auto;
}
.section {
min-height : auto;
height : auto;
padding : 10vh 0;
margin : 0;
}
.fp-tableCell {
height : auto !important ;
}
.section .container {
padding : 10vh 5vw 0 5vw;
}
.section .container br {
display : none;
}
#footer .container br {
display : block;
}
.section .container-fluid {
min-height : auto;
height : auto;
}
.project-wrapper {
margin-bottom : 3vh;
}
.web-screen {
border-radius : 4px;
}
.mobile {
bottom : -20px;
right : 15px;
border-radius : 7px;
}
.mobile:hover, .web-screen img:hover {
box-shadow : 0 0 50px rgb(0, 0, 0, 0.15);
transform : none;
}
.h-100 {
height : 60vh !important ;
overflow : hidden;
display : block;
}
.web-screen.h-100 div, .web-screen.h-100 img {
border-radius : 6px;
}
.w-90 {
width : 95%;
}
.project-info {
text-align : center;
padding-top : 4vh;
}
.project-info h4 {
margin-bottom : 10px !important ;
}
.project-info .project-description {
display : none;
}
.project-info .project-tags {
display : none;
}
.project-info .project-tags li {
margin : 0 5px !important ;
}
.project-info .mb-4 {
margin-bottom : 20px !important ;
}
.project-info .btn {
color : #fff;
background-color : #292a2c;
padding : 12px 16px;
}
#header #title {
font-size : 64px;
}
#header #subtitle {
font-size : 32px;
line-height : 1.4;
letter-spacing : -0.15px;
overflow : visible;
}
.bg-parallax {
background-image : url(img/sections/bg-parallax-full.png);
background-repeat : repeat;
}
.cross-parallax {
width : 8vw;
}
.waves-parallax {
width : 22vw;
}
.moon-parallax {
width : 12vw;
}
#footer h2 {
font-size : 32px;
}
#inner {
font-size : 17px;
}
#contact, #inner {
padding : 22vh 0 15vh 0;
}
#contact h1 {
padding-bottom : 5vh;
}
.card-brand {
height : 17vh;
}
.card-brand img {
transform : scale(0.82);
}
.card-brand small {
display : none;
}
#services {
text-align : center;
}
#services img {
width : 50%;
height : auto;
margin : 0 auto !important ;
}
#error404 h1 {
font-size : 82px;
}
.btn {
font-size : 14px;
}
}
@media (max-width: 414px) {
body {
font-size : 16px;
text-align : center;
}
#header #title {
font-size : 48px;
text-align : center;
}
#header #subtitle {
margin-bottom : 10vh;
text-align : center;
}
.bg-parallax, .cross-parallax, .moon-parallax, .waves-parallax {
display : none;
}
#contact, #inner {
padding : 30vh 0 15vh 0;
}
#services img {
width : 60%;
}
#contact form {
padding-top : 5vh;
}
}
@media (max-width: 812px) and (orientation: landscape) {
#footer-links li {
font-size : 15px;
}
.main-menu .nav li a {
font-size : 44px;
}
#main .container-fluid {
padding-left : 50px;
padding-right : 50px;
}
.card-brand {
height : 40vh;
}
.h-100 {
min-height : 560px !important ;
}
}
@media only screen, only screen, only screen and (min-resolution: 200dpi), only screen and (min-resolution: 1.25dppx) {
}

↑ Top