WebisteDLH/wwwroot/css/demos/demo-creative-agency-1.css

1208 lines
19 KiB
CSS

body {
font-size: 18px;
}
.row > *,
.custom-ws-initial {
white-space: initial !important;
}
.vw-5 {
width: 5vw !important;
}
.min-vw-5 {
min-width: 5vw !important;
}
.max-vw-5 {
max-width: 5vw !important;
}
.vw-10 {
width: 10vw !important;
}
.min-vw-10 {
min-width: 10vw !important;
}
.max-vw-10 {
max-width: 10vw !important;
}
.vw-15 {
width: 15vw !important;
}
.min-vw-15 {
min-width: 15vw !important;
}
.max-vw-15 {
max-width: 15vw !important;
}
.vw-20 {
width: 20vw !important;
}
.min-vw-20 {
min-width: 20vw !important;
}
.max-vw-20 {
max-width: 20vw !important;
}
.vw-25 {
width: 25vw !important;
}
.min-vw-25 {
min-width: 25vw !important;
}
.max-vw-25 {
max-width: 25vw !important;
}
.vw-30 {
width: 30vw !important;
}
.min-vw-30 {
min-width: 30vw !important;
}
.max-vw-30 {
max-width: 30vw !important;
}
.vw-35 {
width: 35vw !important;
}
.min-vw-35 {
min-width: 35vw !important;
}
.max-vw-35 {
max-width: 35vw !important;
}
.vw-40 {
width: 40vw !important;
}
.min-vw-40 {
min-width: 40vw !important;
}
.max-vw-40 {
max-width: 40vw !important;
}
.vw-45 {
width: 45vw !important;
}
.min-vw-45 {
min-width: 45vw !important;
}
.max-vw-45 {
max-width: 45vw !important;
}
.vw-50 {
width: 50vw !important;
}
.min-vw-50 {
min-width: 50vw !important;
}
.max-vw-50 {
max-width: 50vw !important;
}
.vw-55 {
width: 55vw !important;
}
.min-vw-55 {
min-width: 55vw !important;
}
.max-vw-55 {
max-width: 55vw !important;
}
.vw-60 {
width: 60vw !important;
}
.min-vw-60 {
min-width: 60vw !important;
}
.max-vw-60 {
max-width: 60vw !important;
}
.vw-65 {
width: 65vw !important;
}
.min-vw-65 {
min-width: 65vw !important;
}
.max-vw-65 {
max-width: 65vw !important;
}
.vw-70 {
width: 70vw !important;
}
.min-vw-70 {
min-width: 70vw !important;
}
.max-vw-70 {
max-width: 70vw !important;
}
.vw-75 {
width: 75vw !important;
}
.min-vw-75 {
min-width: 75vw !important;
}
.max-vw-75 {
max-width: 75vw !important;
}
.vw-80 {
width: 80vw !important;
}
.min-vw-80 {
min-width: 80vw !important;
}
.max-vw-80 {
max-width: 80vw !important;
}
.vw-85 {
width: 85vw !important;
}
.min-vw-85 {
min-width: 85vw !important;
}
.max-vw-85 {
max-width: 85vw !important;
}
.vw-90 {
width: 90vw !important;
}
.min-vw-90 {
min-width: 90vw !important;
}
.max-vw-90 {
max-width: 90vw !important;
}
.vw-95 {
width: 95vw !important;
}
.min-vw-95 {
min-width: 95vw !important;
}
.max-vw-95 {
max-width: 95vw !important;
}
.vw-100 {
width: 100vw !important;
}
.min-vw-100 {
min-width: 100vw !important;
}
.max-vw-100 {
max-width: 100vw !important;
}
.min-vh-100 {
min-height: 100vh !important;
}
.vh-100 {
height: 100vh !important;
}
@media (min-width: 576px) {
.vw-sm-5 {
width: 5vw !important;
}
.min-vw-sm-5 {
min-width: 5vw !important;
}
.max-vw-sm-5 {
max-width: 5vw !important;
}
.vw-sm-10 {
width: 10vw !important;
}
.min-vw-sm-10 {
min-width: 10vw !important;
}
.max-vw-sm-10 {
max-width: 10vw !important;
}
.vw-sm-15 {
width: 15vw !important;
}
.min-vw-sm-15 {
min-width: 15vw !important;
}
.max-vw-sm-15 {
max-width: 15vw !important;
}
.vw-sm-20 {
width: 20vw !important;
}
.min-vw-sm-20 {
min-width: 20vw !important;
}
.max-vw-sm-20 {
max-width: 20vw !important;
}
.vw-sm-25 {
width: 25vw !important;
}
.min-vw-sm-25 {
min-width: 25vw !important;
}
.max-vw-sm-25 {
max-width: 25vw !important;
}
.vw-sm-30 {
width: 30vw !important;
}
.min-vw-sm-30 {
min-width: 30vw !important;
}
.max-vw-sm-30 {
max-width: 30vw !important;
}
.vw-sm-35 {
width: 35vw !important;
}
.min-vw-sm-35 {
min-width: 35vw !important;
}
.max-vw-sm-35 {
max-width: 35vw !important;
}
.vw-sm-40 {
width: 40vw !important;
}
.min-vw-sm-40 {
min-width: 40vw !important;
}
.max-vw-sm-40 {
max-width: 40vw !important;
}
.vw-sm-45 {
width: 45vw !important;
}
.min-vw-sm-45 {
min-width: 45vw !important;
}
.max-vw-sm-45 {
max-width: 45vw !important;
}
.vw-sm-50 {
width: 50vw !important;
}
.min-vw-sm-50 {
min-width: 50vw !important;
}
.max-vw-sm-50 {
max-width: 50vw !important;
}
.vw-sm-55 {
width: 55vw !important;
}
.min-vw-sm-55 {
min-width: 55vw !important;
}
.max-vw-sm-55 {
max-width: 55vw !important;
}
.vw-sm-60 {
width: 60vw !important;
}
.min-vw-sm-60 {
min-width: 60vw !important;
}
.max-vw-sm-60 {
max-width: 60vw !important;
}
.vw-sm-65 {
width: 65vw !important;
}
.min-vw-sm-65 {
min-width: 65vw !important;
}
.max-vw-sm-65 {
max-width: 65vw !important;
}
.vw-sm-70 {
width: 70vw !important;
}
.min-vw-sm-70 {
min-width: 70vw !important;
}
.max-vw-sm-70 {
max-width: 70vw !important;
}
.vw-sm-75 {
width: 75vw !important;
}
.min-vw-sm-75 {
min-width: 75vw !important;
}
.max-vw-sm-75 {
max-width: 75vw !important;
}
.vw-sm-80 {
width: 80vw !important;
}
.min-vw-sm-80 {
min-width: 80vw !important;
}
.max-vw-sm-80 {
max-width: 80vw !important;
}
.vw-sm-85 {
width: 85vw !important;
}
.min-vw-sm-85 {
min-width: 85vw !important;
}
.max-vw-sm-85 {
max-width: 85vw !important;
}
.vw-sm-90 {
width: 90vw !important;
}
.min-vw-sm-90 {
min-width: 90vw !important;
}
.max-vw-sm-90 {
max-width: 90vw !important;
}
.vw-sm-95 {
width: 95vw !important;
}
.min-vw-sm-95 {
min-width: 95vw !important;
}
.max-vw-sm-95 {
max-width: 95vw !important;
}
.vw-sm-100 {
width: 100vw !important;
}
.min-vw-sm-100 {
min-width: 100vw !important;
}
.max-vw-sm-100 {
max-width: 100vw !important;
}
.min-vh-sm-100 {
min-height: 100vh !important;
}
.vh-sm-100 {
height: 100vh !important;
}
}
@media (min-width: 768px) {
.vw-md-5 {
width: 5vw !important;
}
.min-vw-md-5 {
min-width: 5vw !important;
}
.max-vw-md-5 {
max-width: 5vw !important;
}
.vw-md-10 {
width: 10vw !important;
}
.min-vw-md-10 {
min-width: 10vw !important;
}
.max-vw-md-10 {
max-width: 10vw !important;
}
.vw-md-15 {
width: 15vw !important;
}
.min-vw-md-15 {
min-width: 15vw !important;
}
.max-vw-md-15 {
max-width: 15vw !important;
}
.vw-md-20 {
width: 20vw !important;
}
.min-vw-md-20 {
min-width: 20vw !important;
}
.max-vw-md-20 {
max-width: 20vw !important;
}
.vw-md-25 {
width: 25vw !important;
}
.min-vw-md-25 {
min-width: 25vw !important;
}
.max-vw-md-25 {
max-width: 25vw !important;
}
.vw-md-30 {
width: 30vw !important;
}
.min-vw-md-30 {
min-width: 30vw !important;
}
.max-vw-md-30 {
max-width: 30vw !important;
}
.vw-md-35 {
width: 35vw !important;
}
.min-vw-md-35 {
min-width: 35vw !important;
}
.max-vw-md-35 {
max-width: 35vw !important;
}
.vw-md-40 {
width: 40vw !important;
}
.min-vw-md-40 {
min-width: 40vw !important;
}
.max-vw-md-40 {
max-width: 40vw !important;
}
.vw-md-45 {
width: 45vw !important;
}
.min-vw-md-45 {
min-width: 45vw !important;
}
.max-vw-md-45 {
max-width: 45vw !important;
}
.vw-md-50 {
width: 50vw !important;
}
.min-vw-md-50 {
min-width: 50vw !important;
}
.max-vw-md-50 {
max-width: 50vw !important;
}
.vw-md-55 {
width: 55vw !important;
}
.min-vw-md-55 {
min-width: 55vw !important;
}
.max-vw-md-55 {
max-width: 55vw !important;
}
.vw-md-60 {
width: 60vw !important;
}
.min-vw-md-60 {
min-width: 60vw !important;
}
.max-vw-md-60 {
max-width: 60vw !important;
}
.vw-md-65 {
width: 65vw !important;
}
.min-vw-md-65 {
min-width: 65vw !important;
}
.max-vw-md-65 {
max-width: 65vw !important;
}
.vw-md-70 {
width: 70vw !important;
}
.min-vw-md-70 {
min-width: 70vw !important;
}
.max-vw-md-70 {
max-width: 70vw !important;
}
.vw-md-75 {
width: 75vw !important;
}
.min-vw-md-75 {
min-width: 75vw !important;
}
.max-vw-md-75 {
max-width: 75vw !important;
}
.vw-md-80 {
width: 80vw !important;
}
.min-vw-md-80 {
min-width: 80vw !important;
}
.max-vw-md-80 {
max-width: 80vw !important;
}
.vw-md-85 {
width: 85vw !important;
}
.min-vw-md-85 {
min-width: 85vw !important;
}
.max-vw-md-85 {
max-width: 85vw !important;
}
.vw-md-90 {
width: 90vw !important;
}
.min-vw-md-90 {
min-width: 90vw !important;
}
.max-vw-md-90 {
max-width: 90vw !important;
}
.vw-md-95 {
width: 95vw !important;
}
.min-vw-md-95 {
min-width: 95vw !important;
}
.max-vw-md-95 {
max-width: 95vw !important;
}
.vw-md-100 {
width: 100vw !important;
}
.min-vw-md-100 {
min-width: 100vw !important;
}
.max-vw-md-100 {
max-width: 100vw !important;
}
.min-vh-md-100 {
min-height: 100vh !important;
}
.vh-md-100 {
height: 100vh !important;
}
}
@media (min-width: 992px) {
.vw-lg-5 {
width: 5vw !important;
}
.min-vw-lg-5 {
min-width: 5vw !important;
}
.max-vw-lg-5 {
max-width: 5vw !important;
}
.vw-lg-10 {
width: 10vw !important;
}
.min-vw-lg-10 {
min-width: 10vw !important;
}
.max-vw-lg-10 {
max-width: 10vw !important;
}
.vw-lg-15 {
width: 15vw !important;
}
.min-vw-lg-15 {
min-width: 15vw !important;
}
.max-vw-lg-15 {
max-width: 15vw !important;
}
.vw-lg-20 {
width: 20vw !important;
}
.min-vw-lg-20 {
min-width: 20vw !important;
}
.max-vw-lg-20 {
max-width: 20vw !important;
}
.vw-lg-25 {
width: 25vw !important;
}
.min-vw-lg-25 {
min-width: 25vw !important;
}
.max-vw-lg-25 {
max-width: 25vw !important;
}
.vw-lg-30 {
width: 30vw !important;
}
.min-vw-lg-30 {
min-width: 30vw !important;
}
.max-vw-lg-30 {
max-width: 30vw !important;
}
.vw-lg-35 {
width: 35vw !important;
}
.min-vw-lg-35 {
min-width: 35vw !important;
}
.max-vw-lg-35 {
max-width: 35vw !important;
}
.vw-lg-40 {
width: 40vw !important;
}
.min-vw-lg-40 {
min-width: 40vw !important;
}
.max-vw-lg-40 {
max-width: 40vw !important;
}
.vw-lg-45 {
width: 45vw !important;
}
.min-vw-lg-45 {
min-width: 45vw !important;
}
.max-vw-lg-45 {
max-width: 45vw !important;
}
.vw-lg-50 {
width: 50vw !important;
}
.min-vw-lg-50 {
min-width: 50vw !important;
}
.max-vw-lg-50 {
max-width: 50vw !important;
}
.vw-lg-55 {
width: 55vw !important;
}
.min-vw-lg-55 {
min-width: 55vw !important;
}
.max-vw-lg-55 {
max-width: 55vw !important;
}
.vw-lg-60 {
width: 60vw !important;
}
.min-vw-lg-60 {
min-width: 60vw !important;
}
.max-vw-lg-60 {
max-width: 60vw !important;
}
.vw-lg-65 {
width: 65vw !important;
}
.min-vw-lg-65 {
min-width: 65vw !important;
}
.max-vw-lg-65 {
max-width: 65vw !important;
}
.vw-lg-70 {
width: 70vw !important;
}
.min-vw-lg-70 {
min-width: 70vw !important;
}
.max-vw-lg-70 {
max-width: 70vw !important;
}
.vw-lg-75 {
width: 75vw !important;
}
.min-vw-lg-75 {
min-width: 75vw !important;
}
.max-vw-lg-75 {
max-width: 75vw !important;
}
.vw-lg-80 {
width: 80vw !important;
}
.min-vw-lg-80 {
min-width: 80vw !important;
}
.max-vw-lg-80 {
max-width: 80vw !important;
}
.vw-lg-85 {
width: 85vw !important;
}
.min-vw-lg-85 {
min-width: 85vw !important;
}
.max-vw-lg-85 {
max-width: 85vw !important;
}
.vw-lg-90 {
width: 90vw !important;
}
.min-vw-lg-90 {
min-width: 90vw !important;
}
.max-vw-lg-90 {
max-width: 90vw !important;
}
.vw-lg-95 {
width: 95vw !important;
}
.min-vw-lg-95 {
min-width: 95vw !important;
}
.max-vw-lg-95 {
max-width: 95vw !important;
}
.vw-lg-100 {
width: 100vw !important;
}
.min-vw-lg-100 {
min-width: 100vw !important;
}
.max-vw-lg-100 {
max-width: 100vw !important;
}
.min-vh-lg-100 {
min-height: 100vh !important;
}
.vh-lg-100 {
height: 100vh !important;
}
}
@media (min-width: 1200px) {
.vw-xl-5 {
width: 5vw !important;
}
.min-vw-xl-5 {
min-width: 5vw !important;
}
.max-vw-xl-5 {
max-width: 5vw !important;
}
.vw-xl-10 {
width: 10vw !important;
}
.min-vw-xl-10 {
min-width: 10vw !important;
}
.max-vw-xl-10 {
max-width: 10vw !important;
}
.vw-xl-15 {
width: 15vw !important;
}
.min-vw-xl-15 {
min-width: 15vw !important;
}
.max-vw-xl-15 {
max-width: 15vw !important;
}
.vw-xl-20 {
width: 20vw !important;
}
.min-vw-xl-20 {
min-width: 20vw !important;
}
.max-vw-xl-20 {
max-width: 20vw !important;
}
.vw-xl-25 {
width: 25vw !important;
}
.min-vw-xl-25 {
min-width: 25vw !important;
}
.max-vw-xl-25 {
max-width: 25vw !important;
}
.vw-xl-30 {
width: 30vw !important;
}
.min-vw-xl-30 {
min-width: 30vw !important;
}
.max-vw-xl-30 {
max-width: 30vw !important;
}
.vw-xl-35 {
width: 35vw !important;
}
.min-vw-xl-35 {
min-width: 35vw !important;
}
.max-vw-xl-35 {
max-width: 35vw !important;
}
.vw-xl-40 {
width: 40vw !important;
}
.min-vw-xl-40 {
min-width: 40vw !important;
}
.max-vw-xl-40 {
max-width: 40vw !important;
}
.vw-xl-45 {
width: 45vw !important;
}
.min-vw-xl-45 {
min-width: 45vw !important;
}
.max-vw-xl-45 {
max-width: 45vw !important;
}
.vw-xl-50 {
width: 50vw !important;
}
.min-vw-xl-50 {
min-width: 50vw !important;
}
.max-vw-xl-50 {
max-width: 50vw !important;
}
.vw-xl-55 {
width: 55vw !important;
}
.min-vw-xl-55 {
min-width: 55vw !important;
}
.max-vw-xl-55 {
max-width: 55vw !important;
}
.vw-xl-60 {
width: 60vw !important;
}
.min-vw-xl-60 {
min-width: 60vw !important;
}
.max-vw-xl-60 {
max-width: 60vw !important;
}
.vw-xl-65 {
width: 65vw !important;
}
.min-vw-xl-65 {
min-width: 65vw !important;
}
.max-vw-xl-65 {
max-width: 65vw !important;
}
.vw-xl-70 {
width: 70vw !important;
}
.min-vw-xl-70 {
min-width: 70vw !important;
}
.max-vw-xl-70 {
max-width: 70vw !important;
}
.vw-xl-75 {
width: 75vw !important;
}
.min-vw-xl-75 {
min-width: 75vw !important;
}
.max-vw-xl-75 {
max-width: 75vw !important;
}
.vw-xl-80 {
width: 80vw !important;
}
.min-vw-xl-80 {
min-width: 80vw !important;
}
.max-vw-xl-80 {
max-width: 80vw !important;
}
.vw-xl-85 {
width: 85vw !important;
}
.min-vw-xl-85 {
min-width: 85vw !important;
}
.max-vw-xl-85 {
max-width: 85vw !important;
}
.vw-xl-90 {
width: 90vw !important;
}
.min-vw-xl-90 {
min-width: 90vw !important;
}
.max-vw-xl-90 {
max-width: 90vw !important;
}
.vw-xl-95 {
width: 95vw !important;
}
.min-vw-xl-95 {
min-width: 95vw !important;
}
.max-vw-xl-95 {
max-width: 95vw !important;
}
.vw-xl-100 {
width: 100vw !important;
}
.min-vw-xl-100 {
min-width: 100vw !important;
}
.max-vw-xl-100 {
max-width: 100vw !important;
}
.min-vh-xl-100 {
min-height: 100vh !important;
}
.vh-xl-100 {
height: 100vh !important;
}
}
.custom-font-1 {
font-family: 'Cormorant', serif !important;
}
h1, h2, h3 {
font-family: 'Cormorant', serif !important;
color: var(--secondary);
font-weight: bold;
line-height: 1;
}
h2 {
font-size: 3em;
margin-bottom: 0.5em;
}
h3 {
font-size: 2.5em;
margin-bottom: 0.4em;
text-transform: none;
}
h5 {
color: #777;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 0.8em;
font-weight: 500;
font-size: 0.9em;
}
.text-0-5 {
font-size: 12.8px;
font-size: 0.8rem;
}
p {
line-height: 28.8px;
line-height: 1.8rem;
}
p.lead {
font-size: 1.3em;
font-weight: 500;
line-height: 36.8px;
line-height: 2.3rem;
color: var(--tertiary);
}
.custom-text-1 {
mix-blend-mode: difference;
font-weight: bold;
font-size: calc(40px + 50 * ((100vw - 300px) / (1200 - 300)));
line-height: calc(40px + 50 * ((100vw - 300px) / (1200 - 300)));
}
.custom-link-1 {
display: inline-block;
position: relative;
}
.custom-link-1:after {
bottom: 0;
content: "";
display: block;
height: 1px;
left: 0;
position: absolute;
background: var(--primary);
transition: cubic-bezier(0.55, 0, 0.1, 1) transform 300ms;
width: 100%;
transform: translateY(0px);
}
.custom-link-1.custom-link-1-light:after {
background: #FFF;
}
.custom-link-1:hover {
text-decoration: none !important;
}
.custom-link-1:hover:after {
transform: translateY(3px);
}
.custom-list-1 li {
padding: 4px 0;
}
.custom-border-radius-1 {
border-radius: 8px !important;
}
@media (min-width: 1199px) {
.custom-border-left-1 {
border-left: 1px solid rgba(0, 0, 0, 0.12) !important;
}
.custom-border-right-1 {
border-right: 1px solid rgba(0, 0, 0, 0.12) !important;
}
.custom-border-top-1 {
border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
}
.custom-border-bottom-1 {
border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}
.custom-border-bottom-2 {
background-image: linear-gradient(to right, #999 0 10%, rgba(255, 255, 255, 0) 10%);
background-position: bottom;
background-size: 8px 1px;
background-repeat: repeat-x;
}
}
#header {
position: absolute;
width: 100vw;
}
#header .header-body {
background: transparent;
border: 0;
}
.custom-stroke-text-effect-1 {
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1.5px;
-webkit-text-stroke-color: #FFF;
white-space: nowrap;
}
.custom-hero-font-1 {
font-size: calc(40px + 50 * ((100vw - 300px) / (1200 - 300)));
line-height: calc(40px + 50 * ((100vw - 300px) / (1200 - 300)));
}
.custom-hero-font-2 {
font-size: calc(40px + 50 * ((100vw - 300px) / (1200 - 300)));
line-height: calc(40px + 50 * ((100vw - 300px) / (1200 - 300)));
}
.custom-el-1 {
margin-right: -30vw;
border-radius: 50%;
width: 30vw;
height: 30vw;
}
.custom-el-2 {
width: 43vw;
height: 35vw;
margin-left: -2px;
}
.custom-el-3 {
bottom: 30%;
}
.custom-el-4 {
width: 2px;
background: #FFF;
height: 150px;
display: block;
margin-right: 14px;
float: left;
}
.custom-el-5 {
top: -100px;
left: 14px;
}
.custom-el-6 {
bottom: -100px;
right: 14px;
}
@keyframes arrowMove {
0% {
transform: translateY(5px);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(5px);
}
}
.custom-arrow-anim {
animation: arrowMove 600ms ease;
animation-iteration-count: infinite;
}