html {
line-height: 1.15; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
}
main {
display: block;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
hr {
box-sizing: content-box; height: 0; overflow: visible; }
pre {
font-family: monospace, monospace; font-size: 1em; }
a {
background-color: transparent;
}
abbr[title] {
border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b,
strong {
font-weight: bolder;
}
code,
kbd,
samp {
font-family: monospace, monospace; font-size: 1em; }
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
border-style: none;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button,
input { overflow: visible;
}
button,
select { text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
legend {
box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress {
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button; font: inherit; }
details {
display: block;
}
summary {
display: list-item;
}
template {
display: none;
}
[hidden] {
display: none;
}   *,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 0;
}
html {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
-moz-osx-font-smoothing: grayscale;
font-size: 10px;
height: 100%;
}
body {
position: relative;
margin: 0;
padding: 0;
height: 100%;
font-family: 'DM Sans', sans-serif;
font-weight: 400;
line-height: 140%;
font-size: 1.4rem;
width: 100%;
background: #0b0f10;
color: #bec1c3;
}
body.overflow {
overflow: hidden;
}
img,
embed,
object,
video,
iframe {
max-width: 100%;
}
img {
display: inline-block;
border: none;
padding: 0;
margin: 0;
}
form input,
form textarea {
outline: 0;
width: 100%;
font-family: webFont;
}
::selection {
background: #7c8487;
color: #fafafa;
}
::-moz-selection {
background: #7c8487;
color: #fafafa;
} section,
.floater {
float: left;
width: 100%;
position: relative;
}
section.spaced,
.floater.spaced {
padding: 60px 0;
}
@media only screen and (max-width: 568px) {
section.spaced,
.floater.spaced {
padding: 40px 0;
}
}
.row {
float: left;
width: 100%;
}
.tight {
max-width: 960px;
}
.content_center {
width: auto;
max-width: 1240px;
float: none;
display: block;
margin-right: auto;
margin-left: auto;
padding-left: 0;
padding-right: 0;
padding: 0 20px;
}
.content_center::after {
content: '';
display: table;
clear: both;
}
.content_center_full {
width: auto;
max-width: 1440px;
float: none;
display: block;
margin-right: auto;
margin-left: auto;
padding-left: 0;
padding-right: 0;
padding: 0 20px;
}
.content_center_full::after {
content: '';
display: table;
clear: both;
}
.showDesk {
display: block;
}
.hideDesk {
display: none !important;
}
@media only screen and (max-width: 900px) {
.hideLap {
display: none !important;
}
}
@media only screen and (max-width: 900px) {
.showLap {
display: block !important;
}
}
@media only screen and (max-width: 800px) {
.hideTab {
display: none !important;
}
}
@media only screen and (max-width: 800px) {
.showTab {
display: block !important;
}
}
@media only screen and (max-width: 568px) {
.hideMob {
display: none !important;
}
}
@media only screen and (max-width: 568px) {
.showMob {
display: block !important;
}
}
.mailto:after {
content: '@alvizul.com';
}
.left {
float: left;
}
.right {
float: right;
}
.flex_parent {
display: flex;
height: 100%;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}  .txt_left {
text-align: left;
}
.txt_center {
text-align: center;
}
.txt_right {
text-align: right;
}
.txt_primary {
color: #40c4ff;
}
.txt_secondary {
color: #039be5;
}
.txt_tertiary {
color: #263238;
}
.txt_dark {
color: #030505;
}
.txt_medD {
color: #666f73;
}
.txt_medium {
color: #7c8487;
}
.txt_medL {
color: #bec1c3;
}
.txt_light {
color: #fafafa;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 120%;
margin: 0;
}
.title_1 {
font-family: 'Quicksand', sans-serif;
font-size: 11rem;
font-weight: 300;
letter-spacing: -3.8px;
line-height: 120%;
}
@media only screen and (max-width: 1024px) {
.title_1 {
font-size: 10rem;
}
}
@media only screen and (max-width: 900px) {
.title_1 {
font-size: 9rem;
}
}
@media only screen and (max-width: 800px) {
.title_1 {
font-size: 8rem;
}
}
@media only screen and (max-width: 568px) {
.title_1 {
font-size: 5.8rem;
}
}
@media only screen and (max-width: 360px) {
.title_1 {
font-size: 5.2rem;
}
}
.title_2 {
font-family: 'Quicksand', sans-serif;
font-size: 6rem;
font-weight: 400;
line-height: 120%;
}
@media only screen and (max-width: 1024px) {
.title_2 {
font-size: 5.5rem;
}
}
@media only screen and (max-width: 900px) {
.title_2 {
font-size: 5rem;
}
}
@media only screen and (max-width: 800px) {
.title_2 {
font-size: 4.5rem;
}
}
@media only screen and (max-width: 568px) {
.title_2 {
font-size: 4rem;
}
}
@media only screen and (max-width: 360px) {
.title_2 {
font-size: 2.8rem;
}
}
.title_3 {
font-family: 'Quicksand', sans-serif;
font-size: 5rem;
font-weight: 400;
line-height: 120%;
}
@media only screen and (max-width: 900px) {
.title_3 {
font-size: 4.5rem;
}
}
@media only screen and (max-width: 800px) {
.title_3 {
font-size: 4rem;
}
}
@media only screen and (max-width: 568px) {
.title_3 {
font-size: 3.5rem;
}
}
@media only screen and (max-width: 360px) {
.title_3 {
font-size: 2.2rem;
}
}
.title_4 {
font-family: 'Quicksand', sans-serif;
font-size: 2.8rem;
font-weight: 500;
line-height: 120%;
}
@media only screen and (max-width: 900px) {
.title_4 {
font-size: 2.6rem;
}
}
@media only screen and (max-width: 800px) {
.title_4 {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 568px) {
.title_4 {
font-size: 2rem;
}
}
@media only screen and (max-width: 360px) {
.title_4 {
font-size: 1.8rem;
}
}
.title_5 {
font-family: 'DM Sans', sans-serif;
font-size: 2.2rem;
font-weight: 400;
letter-spacing: 4.6px;
line-height: 175%;
}
@media only screen and (max-width: 1024px) {
.title_5 {
font-size: 2rem;
letter-spacing: 4px;
}
}
@media only screen and (max-width: 900px) {
.title_5 {
font-size: 1.8rem;
letter-spacing: 3.4px;
}
}
@media only screen and (max-width: 800px) {
.title_5 {
font-size: 1.6rem;
font-weight: 500;
letter-spacing: 2.8px;
}
}
@media only screen and (max-width: 568px) {
.title_5 {
font-size: 1.5rem;
letter-spacing: 1.8px;
}
}
@media only screen and (max-width: 360px) {
.title_5 {
font-size: 1.4rem;
letter-spacing: 1.2px;
}
}
.title_6 {
font-family: 'DM Sans', sans-serif;
font-size: 2rem;
font-weight: 400;
letter-spacing: 0.5px;
line-height: 120%;
}
@media only screen and (max-width: 568px) {
.title_6 {
font-size: 1.8rem;
}
}
.subtitle_1 {
font-family: 'DM Sans', sans-serif;
font-size: 2.4rem;
font-weight: 400;
letter-spacing: 1px;
line-height: 140%;
}
@media only screen and (max-width: 800px) {
.subtitle_1 {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 568px) {
.subtitle_1 {
font-size: 2rem;
}
}
@media only screen and (max-width: 568px) {
.subtitle_1 {
font-size: 1.8rem;
}
}
.subtitle_2 {
font-family: 'DM Sans', sans-serif;
font-size: 1.6rem;
line-height: 20px;
}
p,
li,
body {
font-family: 'DM Sans', sans-serif;
font-size: 1.8rem;
font-weight: 400;
line-height: 175%;
margin: 0;
}
@media only screen and (max-width: 568px) {
p,
li,
body {
font-size: 1.7rem;
}
}
@media only screen and (max-width: 360px) {
p,
li,
body {
font-size: 1.6rem;
}
}
.btn {
font-family: 'DM Sans', sans-serif;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 1px;
line-height: 20px;
text-transform: uppercase;
}
.medium {
font-family: 'DM Sans', sans-serif;
font-size: 1.6rem;
font-weight: 400;
line-height: 120%;
}
@media only screen and (max-width: 568px) {
.medium {
font-size: 1.5rem;
}
}
@media only screen and (max-width: 360px) {
.medium {
font-size: 1.4rem;
}
}
.small {
font-family: 'DM Sans', sans-serif;
font-size: 1.4rem;
font-weight: 400;
line-height: 2rem;
}
.caption {
font-family: 'DM Sans', sans-serif;
font-size: 1.8rem;
font-weight: 400;
line-height: 20px;
}
@media only screen and (max-width: 568px) {
.caption {
font-size: 1.7rem;
}
}
@media only screen and (max-width: 360px) {
.caption {
font-size: 1.6rem;
}
} hr {
border: none;
border-top: 2px solid #263238;
}
a {
text-decoration: none;
}
ul {
list-style: none;
padding-left: 0;
margin: 0;
} button.btn,
a.btn,
button.tag {
outline: none;
cursor: pointer;
-webkit-transition: all ease 0.4s;
-moz-transition: all ease 0.4s;
-o-transition: all ease 0.4s;
transition: all ease 0.4s;
}
button.btn,
a.btn {
display: inline-block;
width: 100%;
max-width: 320px;
text-align: center;
padding: 12px 24px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
button.btn.btnP,
a.btn.btnP {
color: #030505;
border: solid 2px #40c4ff;
background-color: #40c4ff;
}
button.btn.btnP:hover,
a.btn.btnP:hover {
background-color: #039be5;
border: solid 2px #039be5;
}
button.btn.btnS,
a.btn.btnS {
color: #40c4ff;
border: solid 2px #40c4ff;
background-color: transparent;
}
button.btn.btnS:hover,
a.btn.btnS:hover {
color: #039be5;
border: solid 2px #039be5;
}
button.btn.btnB,
a.btn.btnB {
color: #fafafa;
border: solid 2px #40c4ff;
background-color: transparent;
}
button.btn.btnB:hover,
a.btn.btnB:hover {
filter: contrast(115%) brightness(85%);
}
button.tag {
display: inline-block;
text-align: center;
padding: 6px 14px;
color: #fafafa;
line-height: 20px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
-o-border-radius: 18px;
border-radius: 18px;
border: solid 2px #263238;
background-color: transparent;
}
button.tag:hover {
border: solid 2px #40c4ff;
} ::-webkit-input-placeholder {
color: #82b4b4;
-webkit-font-smoothing: antialiased;
}
::-moz-placeholder {
color: #82b4b4;
opacity: 1;
}
:focus::-webkit-input-placeholder {
color: #82b4b4;
}
:focus::-moz-placeholder {
color: #82b4b4;
}  header {
float: left;
width: 100%;
position: fixed;
height: 100px;
background-color: transparent;
z-index: 10;
top: 0;
left: 0;
opacity: 0;
-webkit-transition: all ease 0.4s;
-moz-transition: all ease 0.4s;
-o-transition: all ease 0.4s;
transition: all ease 0.4s;
}
header.vis {
opacity: 1;
}
header:before {
content: "";
display: none;
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 120px;
opacity: 0.95;
background: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.987) 8.1%, rgba(0,0,0,0.951) 15.5%, rgba(0,0,0,0.896) 22.5%, rgba(0,0,0,0.825) 29%, rgba(0,0,0,0.741) 35.3%, rgba(0,0,0,0.648) 41.2%, rgba(0,0,0,0.55) 47.1%, rgba(0,0,0,0.45) 52.9%, rgba(0,0,0,0.352) 58.8%, rgba(0,0,0,0.259) 64.7%, rgba(0,0,0,0.175) 71%, rgba(0,0,0,0.104) 77.5%, rgba(0,0,0,0.049) 84.5%, rgba(0,0,0,0.013) 91.9%, rgba(0,0,0,0) 100%);
}
@media only screen and (max-width: 800px) {
header {
height: 70px;
}
}
header.follow {
background-color: rgba(11,15,16,0.9);
height: 70px;
}
header.follow .content_center #mainMenu ul li a {
line-height: 70px;
}
header.follow .content_center #logo_box a,
header.follow .content_center #logo_box img {
max-height: 40px;
}
header.hidden {
top: -100px;
}
header .content_center {
height: inherit;
position: relative;
z-index: 1;
}
header .content_center #logo_box {
position: relative;
z-index: 1;
float: left;
height: inherit;
-webkit-transition: all ease 0.4s;
-moz-transition: all ease 0.4s;
-o-transition: all ease 0.4s;
transition: all ease 0.4s;
}
header .content_center #logo_box a,
header .content_center #logo_box img {
display: block;
max-height: 60px;
-webkit-transition: max-height ease 0.4s;
-moz-transition: max-height ease 0.4s;
-o-transition: max-height ease 0.4s;
transition: max-height ease 0.4s;
}
@media only screen and (max-width: 800px) {
header .content_center #logo_box a,
header .content_center #logo_box img {
max-height: 40px;
}
}
header .content_center #menuIcon_wrapper {
display: none;
height: inherit;
}
@media only screen and (max-width: 640px) {
header .content_center #menuIcon_wrapper {
cursor: pointer;
height: inherit;
width: auto;
float: right;
-webkit-transition: all ease 0.4s;
-moz-transition: all ease 0.4s;
-o-transition: all ease 0.4s;
transition: all ease 0.4s;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
}
header .content_center #menuIcon {
position: relative;
z-index: 1;
display: block;
margin: 0 auto;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-transition: transform 400ms;
-moz-transition: transform 400ms;
-o-transition: transform 400ms;
transition: transform 400ms;
}
header .content_center #menuIcon .line {
fill: none;
-webkit-transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
-moz-transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
-o-transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
stroke: #fafafa;
stroke-width: 5.5;
stroke-linecap: round;
}
header .content_center #menuIcon .top {
stroke-dasharray: 40 160;
}
header .content_center #menuIcon .middle {
stroke-dasharray: 40 142;
-webkit-transform-origin: 50%;
-moz-transform-origin: 50%;
-o-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition: transform 400ms;
-moz-transition: transform 400ms;
-o-transition: transform 400ms;
transition: transform 400ms;
}
header .content_center #menuIcon .bottom {
stroke-dasharray: 40 85;
-webkit-transform-origin: 50%;
-moz-transform-origin: 50%;
-o-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition: transform 400ms, stroke-dashoffset 400ms;
-moz-transition: transform 400ms, stroke-dashoffset 400ms;
-o-transition: transform 400ms, stroke-dashoffset 400ms;
transition: transform 400ms, stroke-dashoffset 400ms;
}
header .content_center #menuIcon_wrapper.active #menuIcon {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
header .content_center #menuIcon_wrapper.active #menuIcon .top {
stroke-dashoffset: -64px;
}
header .content_center #menuIcon_wrapper.active #menuIcon .middle {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
header .content_center #menuIcon_wrapper.active #menuIcon .bottom {
stroke-dashoffset: -64px;
}
header .content_center #mainMenu {
float: right;
display: block;
}
header .content_center #mainMenu ul li {
float: left;
position: relative;
}
header .content_center #mainMenu ul li:hover a {
color: #40c4ff;
}
header .content_center #mainMenu ul li a {
display: block;
line-height: 100px;
padding: 0 20px;
color: #fafafa;
-webkit-transition: all ease 0.4s;
-moz-transition: all ease 0.4s;
-o-transition: all ease 0.4s;
transition: all ease 0.4s;
}
@media only screen and (max-width: 800px) {
header .content_center #mainMenu ul li a {
padding: 0 15px;
line-height: 70px;
}
}
@media only screen and (max-width: 640px) {
header .content_center #mainMenu {
position: fixed;
width: 100%;
padding-top: 70px;
display: none;
right: -100%;
margin-top: 0;
height: 100%;
-webkit-transition: all ease 0.4s;
-moz-transition: all ease 0.4s;
-o-transition: all ease 0.4s;
transition: all ease 0.4s;
top: 0;
overflow: hidden;
}
header .content_center #mainMenu:before,
header .content_center #mainMenu:after {
content: "";
display: block;
position: absolute;
z-index: -5;
top: 0;
height: 110%;
background: #030505;
opacity: 0.95;
-webkit-transition: all ease 0.4s;
-moz-transition: all ease 0.4s;
-o-transition: all ease 0.4s;
transition: all ease 0.4s;
}
header .content_center #mainMenu:before {
width: 40%;
right: 0;
background: #000;
}
header .content_center #mainMenu:after {
width: 60%;
left: 0;
background: linear-gradient(to left, #000 0%, rgba(0,0,0,0.987) 8.1%, rgba(0,0,0,0.951) 15.5%, rgba(0,0,0,0.896) 22.5%, rgba(0,0,0,0.825) 29%, rgba(0,0,0,0.741) 35.3%, rgba(0,0,0,0.648) 41.2%, rgba(0,0,0,0.55) 47.1%, rgba(0,0,0,0.45) 52.9%, rgba(0,0,0,0.352) 58.8%, rgba(0,0,0,0.259) 64.7%, rgba(0,0,0,0.175) 71%, rgba(0,0,0,0.104) 77.5%, rgba(0,0,0,0.049) 84.5%, rgba(0,0,0,0.013) 91.9%, rgba(0,0,0,0) 100%);
}
header .content_center #mainMenu ul {
float: right;
height: 100%;
width: 40%;
}
header .content_center #mainMenu ul li {
display: table;
width: 100%;
height: calc(90% / 5);
text-align: right;
padding: 0 20px;
}
header .content_center #mainMenu ul li a {
color: #fafafa;
display: table-cell;
vertical-align: middle;
font-size: 2.2rem;
line-height: 100%;
}
}
@media only screen and (max-width: 568px) {
header .content_center #mainMenu:before {
width: 45%;
}
header .content_center #mainMenu:after {
width: 55%;
}
header .content_center #mainMenu ul {
width: 45%;
}
header .content_center #mainMenu ul li a {
font-size: 2rem;
}
}
@media only screen and (max-width: 360px) {
header .content_center #mainMenu ul li a {
font-size: 1.8rem;
}
}
header .content_center #mainMenu.openMenu {
top: 0;
right: 0;
-webkit-transition: all ease 0.4s;
-moz-transition: all ease 0.4s;
-o-transition: all ease 0.4s;
transition: all ease 0.4s;
}
header.nav_down,
header.nav_up {
position: fixed;
-webkit-transition: all ease 0.4s;
-moz-transition: all ease 0.4s;
-o-transition: all ease 0.4s;
transition: all ease 0.4s;
}
header.nav_down:before {
display: block;
}
@media only screen and (max-width: 640px) {
header.nav_down:before {
display: none;
}
}
header.nav_down .content_center #logo_box a,
header.nav_down .content_center #logo_box img {
display: block;
max-height: 46px;
-webkit-transition: max-height ease 0.4s;
-moz-transition: max-height ease 0.4s;
-o-transition: max-height ease 0.4s;
transition: max-height ease 0.4s;
}
header.nav_down .content_center #menuIcon_wrapper {
-webkit-transition: all ease 0.4s;
-moz-transition: all ease 0.4s;
-o-transition: all ease 0.4s;
transition: all ease 0.4s;
}
header.nav_up {
top: -70px;
}
main {
height: 100%; }
footer {
height: 60px;
background-color: #030505;
position: relative;
z-index: 5;
}
footer .content_center {
padding-top: 20px;
padding-bottom: 20px;
}
footer:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
float: left;
width: 100%;
height: 2px;
background: linear-gradient(90deg, #0b0f10 0%, #263238 50%, #0b0f10 100%);
}
footer p {
line-height: 20px;
}
@media only screen and (max-width: 568px) {
footer {
height: 80px;
}
footer .left,
footer .right {
display: block;
width: 100%;
text-align: center;
}
}  #error404 {
text-align: center;
padding-top: 100px;
min-height: 500px;
height: calc(100% - 60px);
}
@media only screen and (max-width: 800px) {
#error404 {
padding-top: 70px;
}
}
@media only screen and (max-width: 568px) {
#error404 {
height: calc(100% - 80px);
}
}
#error404 section {
padding: 0 0 20px 0;
height: 100%;
}
#error404 .content_center {
height: 100%;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
#error404 .errorBox {
max-width: 540px;
text-align: center;
margin: 0 auto 40px auto;
}
#error404 .errorBox .title_1 {
line-height: 100%;
}
#error404 .errorBox p {
margin: 20px 0 40px 0;
} .form_container .sent {
width: 100%;
background-color: #7c8487;
height: 100%;
position: absolute;
overflow: hidden;
display: block;
top: 0;
left: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
@media only screen and (max-width: 568px) {
.form_container .sent {
height: 355px;
}
}
.form_container .sent .msg_sent {
text-align: center;
padding: 20px;
color: #fafafa;
opacity: 0;
-webkit-transition: opacity ease 0.4s;
-moz-transition: opacity ease 0.4s;
-o-transition: opacity ease 0.4s;
transition: opacity ease 0.4s;
}
.form_container .sent .msg_sent h5 {
font-size: 2rem;
margin: 0 0 20px;
}
.form_container .sent .msg_sent p {
font-size: 1.8rem;
margin: 0;
}
.form_container .sent.success {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all ease 0.4s 0.5s;
-moz-transition: all ease 0.4s 0.5s;
-o-transition: all ease 0.4s 0.5s;
transition: all ease 0.4s 0.5s;
}
.form_container .sent.success .msg_sent {
opacity: 1;
-webkit-transition: opacity ease 0.4s 0.2s;
-moz-transition: opacity ease 0.4s 0.2s;
-o-transition: opacity ease 0.4s 0.2s;
transition: opacity ease 0.4s 0.2s;
}
.form_container .form_contacto {
float: left;
width: 100%;
position: relative;
height: auto;
-webkit-transition: all ease 0.4s;
-moz-transition: all ease 0.4s;
-o-transition: all ease 0.4s;
transition: all ease 0.4s; }
.form_container .form_contacto .btn {
border: 0;
width: 100%;
max-width: 220px;
}
.form_container .form_contacto .chosen-container {
width: 100% !important;
}
.form_container .form_contacto .chosen-container.chosen-container-active .chosen-single {
-moz-box-shadow: 0 0 5px rgba(124,132,135,0.5);
-webkit-box-shadow: 0 0 5px rgba(124,132,135,0.5);
box-shadow: 0 0 5px rgba(124,132,135,0.5);
}
.form_container .form_contacto .chosen-container .chosen-drop {
top: 61px;
background-color: #fafafa;
-moz-box-shadow: 0 5px 5px rgba(124,132,135,0.5);
-webkit-box-shadow: 0 5px 5px rgba(124,132,135,0.5);
box-shadow: 0 5px 5px rgba(124,132,135,0.5);
width: 100%;
}
.form_container .form_contacto .chosen-container .chosen-drop .chosen-results li {
color: #7c8487;
font-size: 1.5rem;
}
.form_container .form_contacto .chosen-container .chosen-drop .chosen-results li.highlighted {
background-color: #7c8487;
color: #fafafa;
}
.form_container .form_contacto.submited {
overflow: hidden;
-webkit-transition: all ease 0.4s;
-moz-transition: all ease 0.4s;
-o-transition: all ease 0.4s;
transition: all ease 0.4s;
}
.form_container .form_contacto.submited >.col2,
.form_container .form_contacto.submited >.row {
opacity: 0;
-webkit-transition: all ease 0.4s;
-moz-transition: all ease 0.4s;
-o-transition: all ease 0.4s;
transition: all ease 0.4s;
}
.form_container .form_contacto .form_errors {
text-align: center;
font-size: 1.6rem;
display: none;
width: 100%;
padding: 5px 0;
color: #f00;
margin-bottom: 5px;
}
.form_container .form_contacto .form_errorsWrapper {
position: relative;
float: left;
width: 100%;
}
.form_container .form_contacto textarea.form_input {
height: 195px;
padding: 10px;
resize: none;
line-height: 140%;
} .contactBox {
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.contactBox .center {
width: 120px;
height: 160px;
position: relative;
opacity: 0;
-webkit-transition: opacity ease 0.4s;
-moz-transition: opacity ease 0.4s;
-o-transition: opacity ease 0.4s;
transition: opacity ease 0.4s;
transition-delay: 0.2s;
}
.contactBox .center:before {
content: "";
display: block;
position: absolute;
height: 100%;
width: 2px;
background-color: #263238;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
-webkit-transform: skewX(-37deg);
-moz-transform: skewX(-37deg);
-o-transform: skewX(-37deg);
transform: skewX(-37deg);
}
.contactBox .left {
width: calc(56% - 60px);
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
text-align: right;
padding-right: 40px;
position: relative;
right: -10%;
opacity: 0;
-webkit-transition: all ease 0.4s;
-moz-transition: all ease 0.4s;
-o-transition: all ease 0.4s;
transition: all ease 0.4s;
transition-delay: 0.6s;
}
.contactBox .left >*:first-child {
color: #fafafa;
}
.contactBox .left >*:last-child {
margin: 10px 40px 0 0;
}
.contactBox .right {
width: calc(44% - 60px);
margin-bottom: 15px;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
text-align: left;
padding-left: 40px;
position: relative;
left: -10%;
opacity: 0;
-webkit-transition: all ease 0.4s;
-moz-transition: all ease 0.4s;
-o-transition: all ease 0.4s;
transition: all ease 0.4s;
transition-delay: 0.6s;
}
.contactBox .right >*:first-child {
margin: 0 0 10px 40px;
}
.contactBox .right >*:last-child {
color: #fafafa;
}
.contactBox .right .social >* {
color: #bec1c3;
margin-right: 20px;
}
.contactBox .right .social >*:last-child {
margin-right: 0;
}
.contactBox .right a {
-webkit-transition: color ease 0.4s;
-moz-transition: color ease 0.4s;
-o-transition: color ease 0.4s;
transition: color ease 0.4s;
}
.contactBox .right a:hover {
color: #40c4ff;
}
.contactBox.vis .center,
.contactBox.vis .left,
.contactBox.vis .right {
opacity: 1;
}
.contactBox.vis .left {
right: 0;
}
.contactBox.vis .right {
left: 0;
}
@media only screen and (max-width: 1024px) {
.contactBox .center {
width: 100px;
}
.contactBox .left {
width: calc(55% - 50px);
padding-right: 30px;
}
.contactBox .right {
width: calc(45% - 50px);
padding-left: 30px;
}
}
@media only screen and (max-width: 900px) {
.contactBox .center {
width: 50px;
}
.contactBox .left {
width: calc(56% - 25px);
padding-right: 0;
}
.contactBox .right {
width: calc(44% - 25px);
padding-left: 0;
}
}
@media only screen and (max-width: 800px) {
.contactBox {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.contactBox .center,
.contactBox .left,
.contactBox .right {
width: 100%;
}
.contactBox .center {
margin: 20px 0;
height: 2px;
}
.contactBox .center:before {
height: 100%;
width: 100%;
-webkit-transform: initial;
-moz-transform: initial;
-o-transform: initial;
transform: initial;
}
.contactBox .left {
text-align: left;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
}
.contactBox .left >*:last-child {
margin: 10px 0 0 0;
}
.contactBox .right {
text-align: right;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
}
.contactBox .right >*:first-child {
margin: 0 0 10px 0;
}
}
@media only screen and (max-width: 500px) {
.contactBox .center {
margin: 15px 0;
}
.contactBox .left,
.contactBox .right {
text-align: center;
}
.contactBox .left >*:last-child {
margin: 10px auto 0 auto;
}
.contactBox .right >*:first-child {
margin: 0 auto 10px auto;
}
}
@media only screen and (max-width: 380px) {
.contactBox .left >*:last-child {
max-width: 220px;
}
} #home {
height: 100vh;
min-height: 540px;
position: relative;
}
#home .bgHero {
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 75%;
background-size: cover;
background-position: bottom center;
background-repeat: no-repeat;
opacity: 0;
-webkit-transition: all ease 0.4s;
-moz-transition: all ease 0.4s;
-o-transition: all ease 0.4s;
transition: all ease 0.4s;
transition-delay: 0.2s;
}
#home .txtBox {
display: block;
width: 100%;
max-width: 880px;
text-align: center;
margin: 0 auto;
}
#home .txtBox h1 {
color: #fafafa;
padding-bottom: 4px;
opacity: 0;
-webkit-transition: opacity ease 0.4s;
-moz-transition: opacity ease 0.4s;
-o-transition: opacity ease 0.4s;
transition: opacity ease 0.4s;
transition-delay: 0.8s;
}
#home .txtBox h1:after {
content: "";
display: block;
margin: 1% 0 2.5% 0;
width: 100%;
height: 2px;
background-color: #40c4ff;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: transform ease 0.4s;
-moz-transition: transform ease 0.4s;
-o-transition: transform ease 0.4s;
transition: transform ease 0.4s;
transition-delay: 1.2s;
}
#home .txtBox p {
text-transform: uppercase;
color: #dfe0e1;
opacity: 0;
-webkit-transition: opacity ease 0.4s;
-moz-transition: opacity ease 0.4s;
-o-transition: opacity ease 0.4s;
transition: opacity ease 0.4s;
transition-delay: 0.8s;
}
#home .txtBox br {
display: none;
}
#home .arrow {
width: 100%;
height: 36px;
padding: 0 20px;
position: absolute;
bottom: 30px;
left: 0;
right: 0;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-transition: opacity ease 0.4s;
-moz-transition: opacity ease 0.4s;
-o-transition: opacity ease 0.4s;
transition: opacity ease 0.4s;
transition-delay: 1.6s;
opacity: 0;
}
#home .arrow span {
float: left;
}
#home .arrow span:not(.line) {
font-size: 3.6rem;
margin: 0 20px;
color: #40c4ff;
}
#home .arrow .line {
display: block;
width: calc(50% - ((36px / 2) + 20px));
height: 2px;
}
#home .arrow .line:first-child {
background: linear-gradient(90deg, #0b0f10 0%, #263238 100%);
}
#home .arrow .line:last-child {
background: linear-gradient(-90deg, #0b0f10 0%, #263238 100%);
}
#home .content_center {
position: relative;
}
#home.vis .bgHero {
opacity: 1;
}
#home.vis .content_center h1,
#home.vis .content_center p {
opacity: 1;
}
#home.vis .content_center h1:after {
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
}
#home.vis .content_center .arrow {
opacity: 1;
}
@media only screen and (max-width: 1024px) {
#home .txtBox {
max-width: 800px;
}
}
@media only screen and (max-width: 900px) {
#home .txtBox {
max-width: 720px;
}
}
@media only screen and (max-width: 800px) {
#home .txtBox {
max-width: 640px;
}
}
@media only screen and (max-width: 568px) {
#home {
height: 95vh;
min-height: 440px;
}
#home .txtBox {
max-width: 440px;
}
#home .txtBox h1:after {
margin: 1% 0 3% 0;
}
}
@media only screen and (max-width: 480px) {
#home .txtBox span {
display: none;
}
#home .txtBox br {
display: block;
}
}
#about {
margin-top: 80px;
min-height: calc(100vh - 80px);
}
#about .content_center {
padding-bottom: 80px;
min-height: inherit;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
#about .imgSpace {
width: 40%;
float: left;
overflow: hidden;
padding: 10px 0;
opacity: 0;
-webkit-transition: opacity ease 0.4s;
-moz-transition: opacity ease 0.4s;
-o-transition: opacity ease 0.4s;
transition: opacity ease 0.4s;
}
#about .imgSpace.vis {
opacity: 1;
}
#about .imgSpace .imgBox {
display: block;
max-width: 460px;
width: 100%;
padding: 20px;
position: relative;
}
#about .imgSpace .imgBox .photo {
overflow: hidden;
background-color: #40c4ff;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
}
#about .imgSpace .imgBox .photo img {
display: block;
-webkit-transition: all ease 0.4s;
-moz-transition: all ease 0.4s;
-o-transition: all ease 0.4s;
transition: all ease 0.4s;
}
#about .imgSpace .imgBox .circle {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: solid 2px #fafafa;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
pointer-events: none;
-webkit-animation: circle 14s linear infinite;
-moz-animation: circle 14s linear infinite;
-o-animation: circle 14s linear infinite;
animation: circle 14s linear infinite;
}
#about .imgSpace .imgBox .circle:before,
#about .imgSpace .imgBox .circle:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
margin: auto;
width: 8px;
height: 8px;
background-color: #40c4ff;
z-index: 1;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
-moz-box-shadow: 0 0 0 10px #0b0f10;
-webkit-box-shadow: 0 0 0 10px #0b0f10;
box-shadow: 0 0 0 10px #0b0f10;
}
#about .imgSpace .imgBox .circle:before {
top: calc(0px - (4px + 1px));
}
#about .imgSpace .imgBox .circle:after {
bottom: calc(0px - (4px + 1px));
}
#about .imgSpace .imgBox:hover img {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
#about .txtSpace {
width: 60%;
float: right;
padding-left: 60px;
}
#about .txtSpace .txtBox {
max-width: 580px;
float: right;
position: relative;
z-index: 1;
}
#about .txtSpace .title_2,
#about .txtSpace p,
#about .txtSpace hr,
#about .txtSpace .buttons {
opacity: 0;
-webkit-transition: opacity ease 0.4s;
-moz-transition: opacity ease 0.4s;
-o-transition: opacity ease 0.4s;
transition: opacity ease 0.4s;
}
#about .txtSpace .title_2,
#about .txtSpace .subtitle_1 {
color: #fafafa;
}
#about .txtSpace .title_2 {
margin-bottom: 40px;
transition-delay: 0.4s;
}
#about .txtSpace p:not(.subtitle_1) {
transition-delay: 0.6s;
}
#about .txtSpace hr {
margin: 48px 0;
transition-delay: 0.6s;
}
#about .txtSpace .subtitle_1 {
text-align: center;
transition-delay: 1s;
}
#about .txtSpace .buttons {
margin-top: 30px;
display: flex;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
transition-delay: 1.4s;
}
#about .txtSpace .buttons .btn {
width: calc(50% - 10px);
}
#about .txtSpace.vis .title_2,
#about .txtSpace.vis p,
#about .txtSpace.vis hr,
#about .txtSpace.vis .buttons {
opacity: 1;
}
@media only screen and (max-width: 1024px) {
#about {
min-height: 0;
}
#about .content_center {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding-bottom: 40px;
}
#about .imgSpace,
#about .txtSpace {
width: 100%;
}
#about .imgSpace .imgBox {
max-width: 440px;
margin: 0 auto;
}
#about .txtSpace {
padding-left: 0;
}
#about .txtSpace .txtBox {
margin: 0 auto;
float: initial;
}
#about .txtSpace .title_2 {
text-align: center;
}
}
@media only screen and (max-width: 900px) {
#about .imgSpace .imgBox {
max-width: 420px;
}
}
@media only screen and (max-width: 800px) {
#about .content_center {
padding-bottom: 20px;
}
#about .imgSpace .imgBox {
max-width: 400px;
}
#about .txtSpace hr {
margin: 38px 0;
}
}
@media only screen and (max-width: 568px) {
#about {
min-height: 0;
}
#about .content_center {
padding-bottom: 0;
}
#about .txtSpace .title_2 {
margin-bottom: 30px;
}
#about .txtSpace hr {
margin: 28px 0;
}
#about .txtSpace .buttons {
margin-top: 20px;
}
}
@media only screen and (max-width: 500px) {
#about .txtSpace .buttons {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
#about .txtSpace .buttons .btn {
width: 100%;
margin: 0 auto;
}
#about .txtSpace .buttons .btn:first-child {
margin-bottom: 15px;
}
}
@media only screen and (max-width: 440px) {
#about .txtSpace .subtitle_1 {
max-width: 280px;
margin: 0 auto;
}
}
.projectBox {
display: inline-block;
width: 100%;
opacity: 0;
transition-delay: 0.4s;
-webkit-transition: opacity ease 0.4s;
-moz-transition: opacity ease 0.4s;
-o-transition: opacity ease 0.4s;
transition: opacity ease 0.4s;
}
.projectBox.vis {
opacity: 1;
}
.projectBox .imgSpace,
.projectBox .txtSpace {
width: 100%;
}
.projectBox .imgSpace {
background-color: #030505;
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
}
.projectBox .imgSpace picture>* {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
display: block;
object-fit: cover;
min-height: 100%;
height: auto;
width: 100%;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: transform ease 0.4s;
-moz-transition: transform ease 0.4s;
-o-transition: transform ease 0.4s;
transition: transform ease 0.4s;
}
.projectBox .imgSpace:after {
content: "";
display: block;
padding-bottom: 66.66%;
}
.projectBox .txtSpace {
padding-top: 40px;
}
.projectBox .txtSpace .titleArea {
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.projectBox .txtSpace .titleArea .title_4 {
display: inline-block;
color: #fafafa;
}
.projectBox .txtSpace .titleArea >*:first-child {
width: calc(100% - 68px);
padding-right: 20px;
}
.projectBox .txtSpace .titleArea >*:last-child {
width: 68px;
text-align: right;
}
.projectBox .txtSpace >p {
color: #bec1c3;
margin: 20px 0;
padding-bottom: 18px;
}
.projectBox .txtSpace .tags >* {
float: left;
color: #fafafa;
margin-right: 12px;
}
.projectBox .txtSpace .tags >*:after {
content: "•";
display: inline;
margin-left: 12px;
}
.projectBox .txtSpace .tags >*:last-child {
margin-right: 0;
}
.projectBox .txtSpace .tags >*:last-child:after {
display: none;
}
.projectBox:hover .imgSpace picture>* {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
@media only screen and (max-width: 568px) {
.projectBox .txtSpace {
padding-top: 30px;
}
.projectBox .txtSpace .tags >* {
margin-right: 10px;
}
.projectBox .txtSpace .tags >*:after {
margin-left: 10px;
}
}
#projects {
padding-top: 80px; }
#projects .gridSpace {
width: 100%;
float: left;
position: relative;
}
#projects .gridWrapper >* {
width: 50%;
padding-bottom: 10%;
}
#projects .gridWrapper >*:nth-child(2) {
padding-top: 92px;
}
#projects .gridWrapper >*:nth-child(even) {
padding-left: 5%;
}
#projects .gridWrapper >*:nth-child(odd) {
padding-right: 5%;
}
#projects .gridWrapper >*:nth-child(n+6) {
display: none;
}
#projects .gridWrapper >*:nth-last-child(2) {
padding-bottom: 0;
}
#projects .gridWrapper >*:last-child {
display: block;
padding-bottom: 0;
}
#projects .startBox h2 {
color: #fafafa;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: solid 2px #263238;
}
#projects .startBox .filtros {
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#projects .startBox .filtros >* {
float: left;
margin-bottom: 6px;
}
#projects .startBox .filtros p {
margin-right: 15px;
}
#projects .startBox .filtros .tag {
margin-right: 6px;
}
#projects .startBox .filtros .tag:last-child {
margin-right: 0;
}
#projects .endBox {
display: none;
text-align: center;
}
#projects .endBox br {
display: none;
}
#projects .endBox p {
margin-bottom: 24px;
}
@media only screen and (max-width: 1120px) {
#projects .gridWrapper >*:nth-child(even) {
padding-left: 3%;
}
#projects .gridWrapper >*:nth-child(odd) {
padding-right: 3%;
}
}
@media only screen and (max-width: 1024px) {
#projects {
padding-top: 60px;
}
#projects .gridSpace {
max-width: 580px;
margin: 0 auto;
float: initial;
}
#projects .gridWrapper >* {
width: 100%;
padding-bottom: 12%;
}
#projects .gridWrapper >*:nth-child(2) {
padding-top: 0;
}
#projects .gridWrapper >*:nth-child(even) {
padding-left: 0;
}
#projects .gridWrapper >*:nth-child(odd) {
padding-right: 0;
}
#projects .gridWrapper >*:nth-last-child(2) {
padding-bottom: 12%;
}
#projects .startBox h2 {
text-align: center;
margin-bottom: 0;
}
#projects .startBox .filtros {
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
}
@media only screen and (max-width: 800px) {
#projects .gridWrapper >* {
padding-bottom: 10%;
}
#projects .gridWrapper >*:nth-last-child(2) {
padding-bottom: 10%;
}
}
@media only screen and (max-width: 568px) {
#projects .gridWrapper >* {
padding-bottom: 50px;
}
#projects .gridWrapper >*:nth-last-child(2) {
padding-bottom: 50px;
}
#projects .gridWrapper .startBox {
padding-bottom: 25px;
}
}
@media only screen and (max-width: 360px) {
#projects .endBox br {
display: block;
}
}
#contact {
margin-top: 60px;
padding-top: 200px;
padding-bottom: 100px;
background-color: #030505;
position: relative;
overflow: hidden;
}
#contact:before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 180px;
top: 0;
left: 0;
right: 0;
background: linear-gradient(0deg, #030505, #030505, #040606, #040707, #050808, #060a0a, #070b0b, #080c0d, #090d0e, #0a0e0f, #0b0f10, #0b0f10);
}
@media only screen and (max-width: 1024px) {
#contact {
margin-top: 40px;
}
}
@media only screen and (max-width: 900px) {
#contact {
margin-top: 20px;
}
}
@media only screen and (max-width: 800px) {
#contact {
margin-top: 0;
padding-top: 180px;
padding-bottom: 80px;
}
#contact:before {
height: 160px;
}
}
@media only screen and (max-width: 568px) {
#contact {
padding-top: 160px;
padding-bottom: 60px;
}
#contact:before {
height: 140px;
}
}
@media only screen and (max-width: 500px) {
#contact {
padding-top: 120px;
}
#contact:before {
height: 100px;
}
} #sideMenu {
display: block;
margin-bottom: 140px;
position: sticky;
top: calc(70px + 10px);
}
#sideMenu ul {
margin: 10px 0 0 0;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-direction: column;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
}
#sideMenu ul:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 2px;
height: 100%;
background-color: #263238;
}
#sideMenu ul li {
float: left;
width: 100%;
position: relative; }
#sideMenu ul li:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 2px;
height: 100%;
-webkit-transform: scaleY(0);
-moz-transform: scaleY(0);
-o-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition: transform ease 0.4s;
-moz-transition: transform ease 0.4s;
-o-transition: transform ease 0.4s;
transition: transform ease 0.4s;
}
#sideMenu ul li a {
display: block;
line-height: 50px;
padding-left: 22px;
color: #fafafa;
-webkit-transition: all ease 0.4s;
-moz-transition: all ease 0.4s;
-o-transition: all ease 0.4s;
transition: all ease 0.4s;
}
#sideMenu ul li .short {
display: none;
}
#sideMenu ul #bar {
position: absolute;
left: 0;
width: 2px;
height: 50px;
-webkit-transition: all ease 0.4s;
-moz-transition: all ease 0.4s;
-o-transition: all ease 0.4s;
transition: all ease 0.4s;
}
#sideMenu ul #bar.pos01 {
top: 0px;
}
#sideMenu ul #bar.pos02 {
top: 50px;
}
#sideMenu ul #bar.pos03 {
top: 100px;
}
#sideMenu ul #bar.pos04 {
top: 150px;
}
#sideMenu ul #bar.pos05 {
top: 200px;
}
@media only screen and (max-width: 900px) {
#sideMenu ul li a {
padding-left: 20px;
}
}
@media only screen and (max-width: 800px) {
#sideMenu {
position: sticky;
top: calc(100vh - 50px);
height: 50px;
background-color: rgba(11,15,16,0.9);
z-index: 1;
margin: 0;
}
#sideMenu:before {
display: none;
}
#sideMenu p {
display: none;
}
#sideMenu ul {
margin: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-moz-box-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
#sideMenu ul:before {
height: 2px;
top: initial;
right: 0;
width: 100%;
background-color: rgba(102,111,115,0.5);
}
#sideMenu ul li:before {
top: initial;
right: 0;
width: 100%;
height: 2px;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
#sideMenu ul li a {
line-height: 40px;
padding: 0 10px;
text-align: center;
}
#sideMenu ul #bar {
left: 0;
bottom: 0;
width: auto;
height: 2px;
}
#sideMenu ul #bar.pos01,
#sideMenu ul #bar.pos02,
#sideMenu ul #bar.pos03,
#sideMenu ul #bar.pos04,
#sideMenu ul #bar.pos05 {
top: initial;
}
#sideMenu ul #bar.pos01 {
left: 0%;
}
}
@media only screen and (max-width: 640px) {
#sideMenu ul li a {
padding: 0 5px;
font-size: 1.5rem;
}
}
@media only screen and (max-width: 568px) {
#sideMenu ul li .full {
display: none;
}
#sideMenu ul li .short {
display: block;
}
}
#projectArea {
padding-top: 200px;
}
#projectArea .content_center {
position: relative;
}
#projectArea .content_center >aside {
float: left;
width: 140px;
}
#projectArea .content_center >div {
float: right;
width: calc(100% - 140px);
padding-left: 100px;
}
@media only screen and (max-width: 1024px) {
#projectArea {
padding-top: 180px;
}
#projectArea .content_center >div {
padding-left: calc(100px - 40px);
}
}
@media only screen and (max-width: 900px) {
#projectArea {
padding-top: 160px;
}
#projectArea .content_center >aside {
width: 120px;
}
#projectArea .content_center >div {
width: calc(100% - 120px);
}
}
@media only screen and (max-width: 800px) {
#projectArea {
padding-top: 80px;
padding-bottom: 80px;
}
#projectArea .content_center >aside {
float: initial;
width: 100%;
}
#projectArea .content_center >div {
float: left;
padding-left: 0;
width: 100%;
}
}
@media only screen and (max-width: 568px) {
#projectArea {
padding-top: 60px;
}
}
@media only screen and (max-width: 360px) {
#projectArea {
padding-top: 40px;
}
}
#projectContent >section {
margin-bottom: 100px;
}
#projectContent hr {
border-top: 2px solid #40c4ff;
}
#projectContent .title_2,
#projectContent .title_3,
#projectContent .title_4 {
color: #fafafa;
}
#projectContent .imgArea {
background-color: #030505;
width: 100%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
cursor: pointer;
}
#projectContent .imgArea picture {
display: block;
}
#projectContent .imgArea picture >* {
display: block;
height: auto;
width: 100%;
}
@media only screen and (max-width: 700px) {
#projectContent .imgArea {
cursor: auto;
pointer-events: none;
}
}
#projectContent .imgArea.single {
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
}
#projectContent .imgArea.trigger_parent {
opacity: 0;
-webkit-transition: opacity ease 0.4s;
-moz-transition: opacity ease 0.4s;
-o-transition: opacity ease 0.4s;
transition: opacity ease 0.4s;
transition-delay: 0.4s;
}
#projectContent .imgArea.trigger_parent.vis {
opacity: 1;
}
#projectContent .double {
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
#projectContent .double >.imgArea {
width: calc(50% - 20px);
}
#projectContent .spaced {
margin-top: 100px;
}
#projectContent .gallery {
opacity: 0;
-webkit-transition: opacity ease 0.4s;
-moz-transition: opacity ease 0.4s;
-o-transition: opacity ease 0.4s;
transition: opacity ease 0.4s;
transition-delay: 0.4s;
}
#projectContent .gallery .imgArea.grided,
#projectContent .gallery .imgArea:last-child {
margin-bottom: 40px;
}
#projectContent .gallery .imgArea.single:first-child {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#projectContent .gallery .imgArea.single:last-child {
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
#projectContent .gallery.vis {
opacity: 1;
}
@media only screen and (max-width: 900px) {
#projectContent .double >.imgArea {
width: calc(50% - 15px);
}
#projectContent .spaced {
margin-top: calc(100px - 10px);
}
#projectContent .gallery .imgArea.grided,
#projectContent .gallery .imgArea:last-child {
margin-bottom: calc(40px - 10px);
}
}
@media only screen and (max-width: 800px) {
#projectContent >section {
margin-bottom: calc(100px - 20px);
}
#projectContent .spaced {
margin-top: calc(100px - 20px);
}
#projectContent .gallery .imgArea.grided,
#projectContent .gallery .imgArea:last-child {
margin-bottom: calc(40px - 20px);
}
}
@media only screen and (max-width: 568px) {
#projectContent >section {
margin-bottom: calc(100px - 40px);
}
#projectContent .double {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
#projectContent .double >.imgArea {
width: 100%;
}
#projectContent .spaced {
margin-top: calc(100px - 40px);
}
#projectContent .gallery .imgArea.grided,
#projectContent .gallery .imgArea:last-child {
margin-bottom: calc(40px - 40px);
}
}
@media only screen and (max-width: 360px) {
#projectContent >section {
margin-bottom: calc(100px - 60px);
}
#projectContent .spaced {
margin-top: calc(100px - 60px);
}
}
#pProject .titleArea {
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
#pProject .titleArea >*:first-child {
float: left;
padding-right: 20px;
}
#pProject .titleArea >*:last-child {
float: right;
}
#pProject hr {
margin: 20px 0 30px 0;
}
#pIntro .title_3 {
margin-bottom: 40px;
}
#pIntro hr {
margin: 50px 0 30px 0;
}
#pIntro .blocks {
display: inline-block;
width: 100%;
}
#pIntro .blocks .block {
width: 25%;
float: left;
}
#pIntro .blocks p:not(.small) {
color: #fafafa;
}
@media only screen and (max-width: 568px) {
#pIntro .title_3 {
margin-bottom: calc(40px - 10px);
}
#pIntro .blocks .block {
width: 50%;
margin-bottom: 15px;
}
#pIntro .blocks .block:nth-last-child(-n+2) {
margin-bottom: 0;
}
}
@media only screen and (max-width: 360px) {
#pIntro .title_3 {
margin-bottom: calc(40px - 20px);
}
#pIntro .blocks .block {
width: 100%;
}
#pIntro .blocks .block:nth-last-child(-n+2) {
margin-bottom: 15px;
}
#pIntro .blocks .block:last-child {
margin-bottom: 0;
}
}
#pPurpose hr,
#pAttributes hr,
#pResult hr {
margin: 10px 0 40px 0;
}
@media only screen and (max-width: 568px) {
#pPurpose hr,
#pAttributes hr,
#pResult hr {
margin: 10px 0 calc(40px - 10px) 0;
}
}
@media only screen and (max-width: 360px) {
#pPurpose hr,
#pAttributes hr,
#pResult hr {
margin: 10px 0 calc(40px - 20px) 0;
}
}
#pAttributes .attBox {
display: flex;
flew-wrap: wrap;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 40px;
}
#pAttributes .attBox >* {
width: calc(50% - 20px);
}
#pAttributes .attBox .title_4 {
margin-bottom: 30px;
}
@media only screen and (max-width: 900px) {
#pAttributes .attBox {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
#pAttributes .attBox .imgArea {
margin-bottom: 40px;
}
#pAttributes .attBox >* {
width: 100%;
}
}
@media only screen and (max-width: 800px) {
#pAttributes .attBox {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-moz-box-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
#pAttributes .attBox .imgArea {
margin-bottom: 0;
}
#pAttributes .attBox >* {
width: calc(50% - 20px);
}
}
@media only screen and (max-width: 700px) {
#pAttributes .attBox {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
#pAttributes .attBox .imgArea {
margin-bottom: 40px;
}
#pAttributes .attBox >* {
width: 100%;
}
}
@media only screen and (max-width: 568px) {
#pAttributes .attBox .title_4 {
margin-bottom: 20px;
}
#pAttributes .attBox .imgArea {
margin-bottom: calc(40px - 10px);
}
}
@media only screen and (max-width: 360px) {
#pAttributes .attBox .title_4 {
margin-bottom: 15px;
}
}
#pResult {
padding-bottom: 60px;
}
#pResult div.txt_center {
margin: 60px 0 20px 0;
}
#pResult p {
margin-bottom: 20px;
}
#others .title {
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 80px;
}
#others .title .subtitle_2 {
width: 200px;
color: #fafafa;
text-align: center;
}
#others .title .line {
display: block;
width: calc(50% - ((200px / 2) + 20px));
height: 2px;
}
#others .title .line:first-child {
background: linear-gradient(90deg, #0b0f10 0%, #263238 100%);
}
#others .title .line:last-child {
background: linear-gradient(-90deg, #0b0f10 0%, #263238 100%);
}
#others .othersSpace >* {
float: left;
clear: none;
text-align: inherit;
width: 45%;
margin-left: 0%;
margin-right: 10%;
}
#others .othersSpace >*::after {
content: '';
display: table;
clear: both;
}
#others .othersSpace >*:nth-child(n) {
margin-right: 10%;
float: left;
clear: none;
}
#others .othersSpace >*:nth-child(2n) {
margin-right: 0%;
float: right;
}
#others .othersSpace >*:nth-child(2n + 1) {
clear: both;
}
@media only screen and (max-width: 1120px) {
#others .othersSpace >* {
float: left;
clear: none;
text-align: inherit;
width: 47%;
margin-left: 0%;
margin-right: 6%;
}
#others .othersSpace >*::after {
content: '';
display: table;
clear: both;
}
#others .othersSpace >*:nth-child(n) {
margin-right: 6%;
float: left;
clear: none;
}
#others .othersSpace >*:nth-child(2n) {
margin-right: 0%;
float: right;
}
#others .othersSpace >*:nth-child(2n + 1) {
clear: both;
}
#others .othersSpace >*:last-child {
margin-bottom: 0;
}
}
@media only screen and (max-width: 1024px) {
#others .title {
margin-bottom: 60px;
}
#others .othersSpace {
max-width: 580px;
margin: 0 auto;
float: initial;
}
#others .othersSpace >* {
display: block;
clear: both;
float: none;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-left: 0 !important;
margin-right: 0 !important;
margin-bottom: 15%;
}
#others .othersSpace >*:first-child {
margin-left: auto;
}
#others .othersSpace >*:last-child {
margin-right: auto;
}
}
@media only screen and (max-width: 800px) {
#others .title {
margin-bottom: 40px;
}
}
@media only screen and (max-width: 568px) {
#others .title .line {
width: calc(50% - ((180px / 2) + 20px));
}
#others .othersSpace >* {
margin-bottom: 50px;
}
}
@media only screen and (max-width: 360px) {
#others .title .line {
width: calc(50% - ((160px / 2) + 20px));
}
}
#myModal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: 100%;
height: 100%;
padding: 40px;
overflow: auto;
background-color: rgba(3,5,5,0.85);
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
-webkit-transition: all ease 0.4s;
-moz-transition: all ease 0.4s;
-o-transition: all ease 0.4s;
transition: all ease 0.4s;
}
#myModal.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
#myModal .hidden {
display: none;
}
#myModal .modal-content {
height: 100%;
position: relative;
margin: auto;
padding: 0;
}
#myModal .modal-content .imgSpace {
height: 100%;
width: 100%;
max-height: calc(100vh - 40px);
max-width: 1200px;
opacity: 1;
-webkit-transition: opacity ease 0.2s;
-moz-transition: opacity ease 0.2s;
-o-transition: opacity ease 0.2s;
transition: opacity ease 0.2s;
pointer-events: none;
}
#myModal .modal-content .imgSpace.hidden {
opacity: 0;
}
#myModal .modal-content .imgSpace .mySlides {
display: none;
}
#myModal .modal-content .imgSpace .mySlides .item {
overflow: hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
margin: 0 auto;
max-width: 1200px;
width: calc((100vh - 120px) * 1.5);
}
#myModal .modal-content .imgSpace .mySlides picture {
display: block;
}
#myModal .modal-content .imgSpace .mySlides picture >* {
display: block;
height: auto;
width: 100%;
}
#myModal .caption-container {
text-align: center;
padding: 20px 20px 40px 20px;
color: #fafafa;
}
#myModal .prev,
#myModal .next {
cursor: pointer;
position: fixed;
z-index: 2;
top: 60px;
bottom: 60px;
margin: auto;
text-align: center;
width: calc(((100vw - ((100vh - 120px) * 1.5)) / 2) - 40px);
height: calc(100% - 120px);
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-user-select: none;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
#myModal .prev span,
#myModal .next span {
line-height: 20px;
color: #fafafa;
font-weight: bold;
font-size: 20px;
-webkit-transition: color ease 0.6s;
-moz-transition: color ease 0.6s;
-o-transition: color ease 0.6s;
transition: color ease 0.6s;
}
#myModal .prev:hover span,
#myModal .next:hover span {
color: #bec1c3;
}
#myModal .prev {
left: 40px;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
#myModal .next {
right: 40px;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
#myModal .closeArea {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: -1;
}
#myModal .close {
cursor: pointer;
color: #fafafa;
position: fixed;
top: 25px;
right: 35px;
font-size: 35px;
font-weight: bold;
text-decoration: none;
-webkit-transition: color ease 0.4s;
-moz-transition: color ease 0.4s;
-o-transition: color ease 0.4s;
transition: color ease 0.4s;
}
#myModal .close:hover,
#myModal .close:focus {
color: #bec1c3;
}
@media only screen and (max-width: 1380px) {
#myModal .modal-content .imgSpace {
max-width: calc(100vw - 180px);
}
#myModal .modal-content .imgSpace .mySlides .item {
max-width: calc(100vw - 180px);
}
}
@media only screen and (max-width: 1340px) {
#myModal .modal-content .prev,
#myModal .modal-content .next {
width: calc((100vw - (100vw - 180px) - 80px) / 2);
}
}
@media only screen and (max-width: 800px) {
#myModal {
padding: 60px 20px;
}
#myModal .hidden {
display: block;
}
#myModal .hide {
display: none;
}
#myModal .modal-content {
width: 100%;
}
#myModal .modal-content .imgSpace {
max-width: none;
}
#myModal .modal-content .imgSpace .mySlides {
padding-bottom: 80px;
}
#myModal .modal-content .imgSpace .mySlides .item {
max-width: calc(100vw - 40px);
}
#myModal .caption-container {
padding: 0 60px;
width: 100%;
text-align: center;
}
#myModal .prev,
#myModal .next {
position: absolute;
top: initial;
height: 60px;
width: 80px;
margin: 0;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
#myModal .prev {
left: 0;
bottom: 0;
}
#myModal .next {
right: 0;
bottom: 0;
}
#myModal .close {
position: fixed;
z-index: 2;
height: 60px;
line-height: 58px;
top: 0;
left: 20px;
right: 20px;
margin: auto;
text-align: center;
font-size: 30px;
}
#myModal .close:before {
content: "";
z-index: -1;
position: absolute;
background-color: rgba(11,15,16,0.9);
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 40px;
height: 40px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
}
#myModal .endData {
padding: 20px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
background-color: rgba(11,15,16,0.9);
}
}
@media only screen and (max-width: 700px) {
#myModal {
display: none !important;
}
#myModal >* {
display: none !important;
}
}
.endButton p,
.endButton a {
opacity: 0;
-webkit-transition: opacity ease 0.4s;
-moz-transition: opacity ease 0.4s;
-o-transition: opacity ease 0.4s;
transition: opacity ease 0.4s;
}
.endButton p {
transition-delay: 0.6s;
}
.endButton a {
transition-delay: 1.2s;
}
.endButton.vis p,
.endButton.vis a {
opacity: 1;
}
@-moz-keyframes circle {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes circle {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes circle {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes circle {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}