| Server IP : 66.29.137.217 / Your IP : 3.141.24.158 Web Server : LiteSpeed System : Linux premium294.web-hosting.com 4.18.0-513.11.1.lve.el8.x86_64 #1 SMP Thu Jan 18 16:21:02 UTC 2024 x86_64 User : gltevjme ( 1095) PHP Version : 7.0.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/gltevjme/maxirisetech.com/css/ |
Upload File : |
/*! ------------------------------------------------
* Project Name: Name: Ignite - Coming Soon and Landing Page Template
* Project Description: Ignite - functional and beautifully designed coming soon and landing page template to kick-start your project
* Tags: mix_design, coming soon, under construction, template, landing page, portfolio, one page, responsive, html5, css3, creative, clean, agency, personal page
* Version: 1.0.0
* Build Date: May 2023
* Last Update: May 2023
* This product is available exclusively on Themeforest
* Author: mix_design
* Author URI: https://themeforest.net/user/mix_design */
/*! File name: main-demo.css
* ------------------------------------------------
*
* ------------------------------------------------
* Table of Contents
* ------------------------------------------------
* 1. Loader Styles
* 2. Loading Animation
* 3. Animations
* 4. Fonts
* 5. Base CSS Styles
* 6. Typography Styles
* 7. Buttons & Triggers Styles
* 8. Intro Styles
* 9. Preview Styles
* 10. Footer Styles
* ------------------------------------------------
* Table of Contents End
* ------------------------------------------------ */
/* ------------------------------------------------*/
/* Loader Styles Start */
/* ------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
.loader {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background-color: transparent;
opacity: 1;
visibility: visible;
-webkit-transition: all 0s ease-in-out;
-o-transition: all 0s ease-in-out;
-moz-transition: all 0s ease-in-out;
transition: all 0s ease-in-out;
}
.loader.loaded {
opacity: 0;
visibility: hidden;
}
.loader.is-animated .loader__darkscreen {
-webkit-animation: 1s 0.3s ease-in-out 1 both blockMove;
-moz-animation: 1s 0.3s ease-in-out 1 both blockMove;
animation: 1s 0.3s ease-in-out 1 both blockMove;
}
.loader.is-animated .loader__container {
-webkit-animation: 1s 0.3s ease-in-out 1 both itemsOpacity;
-moz-animation: 1s 0.3s ease-in-out 1 both itemsOpacity;
animation: 1s 0.3s ease-in-out 1 both itemsOpacity;
}
.loader__container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #111111;
}
.loader__container .loader-content {
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.loader__container .loader-content .loader-logo {
width: 100px;
}
.loader__container .loader-content .loader-logo img {
display: block;
width: 100%;
height: auto;
}
.loader__darkscreen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
-webkit-transform: translateY(102%);
-moz-transform: translateY(102%);
-ms-transform: translateY(102%);
transform: translateY(102%);
}
.fadeIn {
-webkit-animation: fadeIn 0.3s 1;
-moz-animation: fadeIn 0.3s 1;
animation: fadeIn 0.3s 1;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
}
.fadeOut {
-webkit-animation: fadeOut 0.3s 1;
-moz-animation: fadeOut 0.3s 1;
animation: fadeOut 0.3s 1;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes blockMove {
0% {
-webkit-transform: translateY(102%);
transform: translateY(102%);
}
35% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
55% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-102%);
transform: translateY(-102%);
}
}
@-moz-keyframes blockMove {
0% {
-moz-transform: translateY(102%);
transform: translateY(102%);
}
35% {
-moz-transform: translateY(0);
transform: translateY(0);
}
55% {
-moz-transform: translateY(0);
transform: translateY(0);
}
100% {
-moz-transform: translateY(-102%);
transform: translateY(-102%);
}
}
@keyframes blockMove {
0% {
-webkit-transform: translateY(102%);
-moz-transform: translateY(102%);
transform: translateY(102%);
}
35% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
}
55% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-102%);
-moz-transform: translateY(-102%);
transform: translateY(-102%);
}
}
@-webkit-keyframes itemsOpacity {
0% {
opacity: 1;
}
35% {
opacity: 1;
}
60% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-moz-keyframes itemsOpacity {
0% {
opacity: 1;
}
35% {
opacity: 1;
}
60% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes itemsOpacity {
0% {
opacity: 1;
}
35% {
opacity: 1;
}
60% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-moz-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* ------------------------------------------------*/
/* Loader Styles End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Loading Animation Start */
/* ------------------------------------------------*/
body .intro__header,
body .headline__subtitle,
body h1,
body .demo {
opacity: 0;
}
body.loaded .headline__subtitle {
-webkit-animation: 0.4s 0.3s ease-in-out 1 both slideInUp;
-moz-animation: 0.4s 0.3s ease-in-out 1 both slideInUp;
animation: 0.4s 0.3s ease-in-out 1 both slideInUp;
}
body.loaded h1 {
-webkit-animation: 0.4s 0.4s ease-in-out 1 both slideInUp;
-moz-animation: 0.4s 0.4s ease-in-out 1 both slideInUp;
animation: 0.4s 0.4s ease-in-out 1 both slideInUp;
}
body.loaded .intro__header,
body.loaded .demo {
-webkit-animation: 0.8s 0.6s ease-in-out 1 both fadeIn;
-moz-animation: 0.8s 0.6s ease-in-out 1 both fadeIn;
animation: 0.8s 0.6s ease-in-out 1 both fadeIn;
}
/* ------------------------------------------------*/
/* Loading Animation End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Animations Start */
/* ------------------------------------------------*/
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
opacity: 0;
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@-moz-keyframes slideInUp {
from {
-moz-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
opacity: 0;
visibility: visible;
}
to {
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 10px, 0);
-moz-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
opacity: 0;
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
/* ------------------------------------------------*/
/* Animations End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Fonts Start */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Fonts End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Base CSS Styles Start */
/* ------------------------------------------------*/
*, *::before, *::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
button:active, button:focus {
outline: none !important;
}
button::-moz-focus-inner {
border: 0 !important;
}
input::-moz-focus-inner {
border: 0 !important;
}
::-moz-selection {
background-color: rgba(255, 255, 255, 0.6);
color: #141414;
text-shadow: none;
}
::selection {
background-color: rgba(255, 255, 255, 0.6);
color: #141414;
text-shadow: none;
}
::-webkit-scrollbar {
display: none;
width: 5px;
background: #242424;
}
@media only screen and (min-width: 768px) {
::-webkit-scrollbar {
display: block;
}
}
::-webkit-scrollbar-track {
border-radius: 20px;
background-color: #242424;
}
::-webkit-scrollbar-thumb {
background-color: #555555;
border-radius: 10px;
}
html {
font-family: sans-serif;
font-size: 62.5%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html,
body {
width: 100%;
height: 100%;
}
body {
position: relative;
min-width: 360px;
overflow-x: hidden !important;
font: normal 400 1.6rem/1.6 "Poppins", sans-serif;
text-rendering: optimizeLegibility;
color: #aaaaaa;
background-color: #0c0c0c;
}
section {
position: relative;
min-width: 360px;
}
a {
text-decoration: none;
outline: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
img {
display: block;
width: 100%;
height: auto;
}
.overflow-hidden {
overflow: hidden !important;
}
/* ------------------------------------------------*/
/* Base CSS Styles End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Typography Styles Start */
/* ------------------------------------------------*/
.headline__subtitle {
display: block;
font: normal 400 1.4rem/1 "Poppins", sans-serif;
text-transform: uppercase;
letter-spacing: 0.1rem;
color: #ffffff;
margin-bottom: 2.4rem;
}
@media only screen and (min-width: 1400px) {
.headline__subtitle {
font-size: 1.6rem;
}
}
h1 {
font: normal 400 2.8rem/1.4 "Poppins", sans-serif;
color: #ffffff;
}
@media only screen and (min-width: 768px) {
h1 {
font-size: 3.5rem;
max-width: 540px;
margin: 0 auto;
}
}
@media only screen and (min-width: 1400px) {
h1 {
font-size: 5rem;
max-width: 780px;
}
}
h2 {
font: normal 300 2rem/1.4 "Poppins", sans-serif;
color: #999999;
}
@media only screen and (min-width: 768px) {
h2 {
font-size: 2.8rem;
max-width: 440px;
}
}
@media only screen and (min-width: 1400px) {
h2 {
font-size: 3.6rem;
max-width: 600px;
}
}
.links__caption p {
font: normal 500 1.6rem/1.4 "Poppins", sans-serif;
color: #ffffff;
margin-bottom: 0.5rem;
}
.links__caption span {
display: block;
font: normal 300 1.1rem/1 "Poppins", sans-serif;
text-transform: uppercase;
letter-spacing: 0.1rem;
color: #a3a3a3;
}
@media only screen and (min-width: 768px) {
.links__caption p {
font-size: 1.8rem;
}
.links__caption span {
font-size: 1.3rem;
}
}
.footer__caption {
font: normal 300 2rem/1.4 "Poppins", sans-serif;
color: #ffffff;
margin: 0 auto 3.2rem;
}
@media only screen and (min-width: 768px) {
.footer__caption {
font-size: 2.8rem;
max-width: 320px;
}
}
@media only screen and (min-width: 1400px) {
.footer__caption {
font-size: 3.6rem;
max-width: 420px;
}
}
.footer__links p,
.footer__links a {
font: normal 400 1.1rem/1.3 "Poppins", sans-serif;
text-transform: uppercase;
letter-spacing: 0.1rem;
color: #999999;
}
.footer__links a {
-webkit-transition: color 0.5s;
-o-transition: color 0.5s;
-moz-transition: color 0.5s;
transition: color 0.5s;
}
.no-touch .footer__links a:hover {
color: #ffffff;
}
@media only screen and (min-width: 768px) {
.footer__links p,
.footer__links a {
font-size: 1.2rem;
}
}
/* ------------------------------------------------*/
/* Typography Styles End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Buttons & Triggers Styles Start */
/* ------------------------------------------------*/
.btn {
position: relative;
display: block;
border: none;
outline: 0;
padding: 0;
font: inherit;
background-color: transparent;
cursor: pointer;
text-decoration: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
text-align: center;
}
.btn-l {
height: 4rem;
padding: 0 2rem;
border: 2px solid #ffffff;
-moz-border-radius: 2rem;
border-radius: 2rem;
margin-right: 2rem;
font: normal 600 1.4rem/3.6rem "Poppins", sans-serif;
color: #ffffff;
}
.btn-l:last-of-type {
margin-right: 0;
}
.btn-l .btn-title {
display: block;
position: relative;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
transition: -webkit-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
-o-transition: transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
-moz-transition: transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09), -moz-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
transition: transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
transition: transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09), -webkit-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09), -moz-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
}
.btn-l .btn-hover {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
transition: -webkit-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
-o-transition: transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
-moz-transition: transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09), -moz-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
transition: transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
transition: transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09), -webkit-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09), -moz-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
}
.no-touch .btn-l:hover .btn-title {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.no-touch .btn-l:hover .btn-hover {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.btn-xl {
display: block;
height: 5.2rem;
padding: 0 2.4rem;
border: 2px solid #ffffff;
-moz-border-radius: 2.6rem;
border-radius: 2.6rem;
margin-right: 2rem;
font: normal 600 1.6rem/4.9rem "Poppins", sans-serif;
color: #ffffff;
}
.btn-xl:last-of-type {
margin-right: 0;
}
.btn-xl .btn-title {
display: block;
position: relative;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
transition: -webkit-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
-o-transition: transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
-moz-transition: transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09), -moz-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
transition: transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
transition: transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09), -webkit-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09), -moz-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
}
.btn-xl .btn-hover {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
transition: -webkit-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
-o-transition: transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
-moz-transition: transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09), -moz-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
transition: transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
transition: transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09), -webkit-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09), -moz-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
}
.no-touch .btn-xl:hover .btn-title {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.no-touch .btn-xl:hover .btn-hover {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
@media only screen and (min-width: 768px) {
.btn-xl {
display: inline-block;
}
}
.to-top {
position: relative;
display: block;
position: fixed;
right: 15px;
bottom: 40px;
width: 3rem;
height: 4.2rem;
line-height: 3.9rem;
border: 2px solid #ffffff;
color: #ffffff;
font-size: 1.4rem;
-moz-border-radius: 1.5rem;
border-radius: 1.5rem;
overflow: hidden;
text-align: center;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
-o-transition: opacity 0.3s 0s, visibility 0s 0.3s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.to-top .btn-title {
display: block;
position: relative;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
transition: -webkit-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
-o-transition: transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
-moz-transition: transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09), -moz-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
transition: transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
transition: transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09), -webkit-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09), -moz-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
}
.to-top .btn-hover {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
transition: -webkit-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
-o-transition: transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
-moz-transition: transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09), -moz-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
transition: transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
transition: transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09), -webkit-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09), -moz-transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
}
.no-touch .to-top:hover {
opacity: 1;
}
.no-touch .to-top:hover .btn-title {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.no-touch .to-top:hover .btn-hover {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.to-top.is-visible {
visibility: visible;
opacity: 1;
}
.to-top.fade-out {
opacity: 0.4;
}
@media only screen and (min-width: 1200px) {
.to-top {
position: fixed;
right: 28px;
bottom: 28px;
}
}
.btn-outline-light {
border: 2px solid #ffffff;
background-color: transparent;
color: #ffffff;
}
.btn-light {
border: 2px solid #ffffff;
background-color: #ffffff;
color: #141414;
}
/* ------------------------------------------------*/
/* Buttons & Triggers Styles End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Intro Styles Start */
/* ------------------------------------------------*/
.intro {
position: relative;
width: 100%;
}
.intro__header {
position: relative;
padding: 4rem 0;
}
@media only screen and (min-width: 768px) {
.intro__header {
height: 96px;
padding: 0;
}
}
.header__container,
.intro__container {
position: relative;
padding: 0 -moz-calc(10% - 1.5rem);
padding: 0 calc(10% - 1.5rem);
}
@media only screen and (min-width: 1200px) {
.header__container,
.intro__container {
max-width: 1140px;
margin: 0 auto;
padding: 0;
}
}
@media only screen and (min-width: 1400px) {
.header__container,
.intro__container {
max-width: 1320px;
}
}
@media only screen and (min-width: 1920px) {
.header__container,
.intro__container {
max-width: 1600px;
}
}
@media only screen and (min-width: 768px) {
.header__container {
height: 100%;
}
}
.header__logo {
position: relative;
margin-bottom: 1.2rem;
}
.header__logo img {
width: auto;
margin: 0 auto;
}
@media only screen and (min-width: 768px) {
.header__logo {
margin-bottom: 0;
}
.header__logo img {
margin: 0;
}
}
.intro__content {
position: relative;
padding: 0;
}
.headline {
position: relative;
padding: 4rem 0 11rem 0;
background-image: url("../img/demo/large-type.svg");
background-repeat: no-repeat;
background-position: center bottom;
-moz-background-size: 100%;
background-size: 100%;
}
@media only screen and (min-width: 768px) {
.headline {
padding: 5rem 0 22.8rem 0;
}
}
@media only screen and (min-width: 1400px) {
.headline {
padding: 8rem 0 31rem 0;
}
}
.intro__decoration {
position: relative;
height: 200px;
width: 100%;
overflow: hidden;
margin-top: -8.6rem;
}
.intro__decoration img {
display: block;
position: absolute;
top: 0;
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
height: 100%;
width: auto;
margin: 0 auto;
}
@media only screen and (min-width: 768px) {
.intro__decoration {
height: 280px;
margin-top: -16.2rem;
}
}
@media only screen and (min-width: 1400px) {
.intro__decoration {
height: 400px;
margin-top: -25rem;
}
}
/* ------------------------------------------------*/
/* Intro Styles End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Preview Styles Start */
/* ------------------------------------------------*/
.demo {
position: relative;
width: 100%;
}
.demo__links {
position: relative;
padding: 0 -moz-calc(10% - 1.5rem) 3rem -moz-calc(10% - 1.5rem);
padding: 0 calc(10% - 1.5rem) 3rem calc(10% - 1.5rem);
overflow: hidden;
}
@media only screen and (min-width: 768px) {
.demo__links {
padding: 0 -moz-calc(10% - 1.5rem) 4rem -moz-calc(10% - 1.5rem);
padding: 0 calc(10% - 1.5rem) 4rem calc(10% - 1.5rem);
}
}
@media only screen and (min-width: 1200px) {
.demo__links {
max-width: 1140px;
margin: 0 auto;
padding: 5rem 0 4rem 0;
}
}
@media only screen and (min-width: 1400px) {
.demo__links {
max-width: 1320px;
padding: 8rem 0 5rem 0;
}
}
@media only screen and (min-width: 1920px) {
.demo__links {
max-width: 1600px;
}
}
.links__headline {
position: relative;
padding: 5rem 0;
}
@media only screen and (min-width: 768px) {
.links__headline {
padding: 5rem 0 7rem 0;
}
}
@media only screen and (min-width: 1400px) {
.links__headline {
padding: 5rem 0 9rem 0;
}
}
.links__item {
display: block;
position: relative;
margin-bottom: 5rem;
}
@media only screen and (min-width: 768px) {
.links__item {
margin-bottom: 7rem;
}
}
@media only screen and (min-width: 1200px) {
.links__item.left {
padding-right: 1.5rem;
}
.links__item.right {
padding-left: 1.5rem;
}
}
@media only screen and (min-width: 1400px) {
.links__item {
margin-bottom: 9rem;
}
.links__item.left {
padding-right: 2.5rem;
}
.links__item.right {
padding-left: 2.5rem;
}
}
.links__image {
display: block;
position: relative;
}
.links__image .image-container {
position: relative;
border: 1px solid #3d3d3d;
-webkit-transition: border 0.5s;
-o-transition: border 0.5s;
-moz-transition: border 0.5s;
transition: border 0.5s;
overflow: hidden;
}
.links__image .image-container img {
display: block;
-webkit-transition: -webkit-filter 0.5s;
transition: -webkit-filter 0.5s;
-o-transition: filter 0.5s;
-moz-transition: filter 0.5s;
transition: filter 0.5s;
transition: filter 0.5s, -webkit-filter 0.5s;
}
.no-touch .links__image:hover .image-container {
border: 1px solid #999999;
}
.no-touch .links__image:hover .image-container img {
-webkit-filter: contrast(1.25);
filter: contrast(1.25);
}
.links__caption {
display: block;
margin-top: 2.4rem;
}
.links__placeholder {
border: 1px solid #252525;
position: absolute;
width: -moz-calc(100% - 3rem);
width: calc(100% - 3rem);
padding: 1px;
}
.links__placeholder .placeholder-container {
background-color: #0c0c0c;
}
@media only screen and (min-width: 1200px) {
.links__placeholder {
bottom: -10rem;
right: 15px;
width: -moz-calc(100% - 45px);
width: calc(100% - 45px);
}
}
@media only screen and (min-width: 1400px) {
.links__placeholder {
bottom: -10rem;
right: 15px;
width: -moz-calc(100% - 55px);
width: calc(100% - 55px);
}
}
@media only screen and (min-width: 1920px) {
.links__placeholder {
bottom: -18rem;
}
}
/* ------------------------------------------------*/
/* Preview Sections End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Footer Styles Start */
/* ------------------------------------------------*/
.footer {
position: relative;
width: 100%;
background-image: url("../img/demo/footer-bg.png");
background-position: center top;
background-repeat: no-repeat;
-moz-background-size: 260%;
background-size: 260%;
}
@media only screen and (min-width: 768px) {
.footer {
-moz-background-size: 160%;
background-size: 160%;
}
}
@media only screen and (min-width: 1200px) {
.footer {
-moz-background-size: 100%;
background-size: 100%;
}
}
.footer__container {
position: relative;
padding: 0 -moz-calc(10% - 1.5rem);
padding: 0 calc(10% - 1.5rem);
}
@media only screen and (min-width: 1200px) {
.footer__container {
max-width: 1140px;
margin: 0 auto;
padding: 0;
}
}
@media only screen and (min-width: 1400px) {
.footer__container {
max-width: 1320px;
}
}
@media only screen and (min-width: 1920px) {
.footer__container {
max-width: 1600px;
}
}
.footer__content {
padding: 8rem 0;
}
@media only screen and (min-width: 768px) {
.footer__content {
padding: 11rem 0;
}
}
@media only screen and (min-width: 1400px) {
.footer__content {
padding: 14rem 0;
}
}
.footer__btngroup {
position: relative;
overflow: hidden;
}
.footer__links {
position: relative;
padding: 0 0 4rem 0;
}
@media only screen and (min-width: 1200px) {
.footer__links {
position: absolute;
bottom: 0;
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: 100%;
padding: 0 1.5rem 2.8rem 1.5rem;
}
}
/* ------------------------------------------------*/
/* Footer Styles End */
/* ------------------------------------------------*/