type media videos
This commit is contained in:
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
Binary file not shown.
BIN
Binary file not shown.
@@ -0,0 +1,714 @@
|
||||
@font-face {
|
||||
font-family: 'Gilroy';
|
||||
src: local('Gilroy Regular'), local('Gilroy-Regular'), url('./fonts/Gilroy-Regular.woff2') format('woff2'), url('./fonts/Gilroy-Regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Gilroy';
|
||||
src: local('Gilroy Regular Italic'), local('Gilroy-RegularItalic'), url('./fonts/Gilroy-RegularItalic.woff2') format('woff2'), url('./fonts/Gilroy-RegularItalic.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Gilroy';
|
||||
src: local('Gilroy SemiBold'), local('Gilroy-SemiBold'), url('./fonts/Gilroy-SemiBold.woff2') format('woff2'), url('./fonts/Gilroy-SemiBold.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Gilroy';
|
||||
src: local('Gilroy Bold'), local('Gilroy-Bold'), url('./fonts/Gilroy-Bold.woff2') format('woff2'), url('./fonts/Gilroy-Bold.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
span,
|
||||
applet,
|
||||
object,
|
||||
iframe,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
a,
|
||||
abbr,
|
||||
acronym,
|
||||
address,
|
||||
big,
|
||||
cite,
|
||||
code,
|
||||
del,
|
||||
dfn,
|
||||
em,
|
||||
img,
|
||||
ins,
|
||||
kbd,
|
||||
q,
|
||||
s,
|
||||
samp,
|
||||
small,
|
||||
strike,
|
||||
strong,
|
||||
sub,
|
||||
sup,
|
||||
tt,
|
||||
var,
|
||||
b,
|
||||
u,
|
||||
i,
|
||||
center,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
fieldset,
|
||||
form,
|
||||
label,
|
||||
legend,
|
||||
table,
|
||||
caption,
|
||||
tbody,
|
||||
tfoot,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td,
|
||||
article,
|
||||
aside,
|
||||
canvas,
|
||||
details,
|
||||
embed,
|
||||
figure,
|
||||
figcaption,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
output,
|
||||
ruby,
|
||||
section,
|
||||
summary,
|
||||
time,
|
||||
mark,
|
||||
audio,
|
||||
video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 95px 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Gilroy', sans-serif;
|
||||
background: #fff;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif !important;
|
||||
}
|
||||
|
||||
a,
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pair {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1040px;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
z-index: 999;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
header.fixed {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #cecece;
|
||||
}
|
||||
|
||||
.header-unpin {
|
||||
position: fixed;
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.header-pin {
|
||||
position: fixed;
|
||||
background: #fff;
|
||||
opacity: 1;
|
||||
border-bottom: 1px solid #cecece;
|
||||
transform: translate3d(0, 0%, 0);
|
||||
transition: all 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
padding: 25px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: 'Lobster', cursive;
|
||||
color: #000;
|
||||
float: left;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
header ul {
|
||||
float: right;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
header ul li {
|
||||
float: left;
|
||||
list-style: none;
|
||||
margin-left: 25px;
|
||||
opacity: 1;
|
||||
transition: opacity 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
header ul li a {
|
||||
color: #2b2b2b;
|
||||
font-weight: 600;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
header ul:hover li {
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
header ul li:hover {
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
header ul li:hover a {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
|
||||
h3 {
|
||||
font-family: 'Gilroy', sans-serif;
|
||||
font-size: 1.7em;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 25px;
|
||||
margin-bottom: 30px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: 'Gilroy', sans-serif;
|
||||
margin-bottom: 25px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.7em;
|
||||
margin-bottom: 2em;
|
||||
color: #2b2b2b;
|
||||
}
|
||||
|
||||
.mcbutton {
|
||||
padding: 11px 45px;
|
||||
margin-top: 20px;
|
||||
display: inline-block;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
color: #000;
|
||||
border: 2px solid #000;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: .7em;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mcbutton::before,
|
||||
.mcbutton::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: #000;
|
||||
transition: all 0.2s ease-in-out;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.mcbutton::before {
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.mcbutton::after {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.mcbutton:hover::before,
|
||||
.mcbutton:hover::after {
|
||||
width: 100%;
|
||||
transition: all 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.mcbutton span::before,
|
||||
.mcbutton span::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 0;
|
||||
background: #000;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.mcbutton span::before {
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.mcbutton span::after {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.mcbutton:hover span::before,
|
||||
.mcbutton:hover span::after {
|
||||
height: 100%;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.mcbutton.primary {
|
||||
background: #FFC107;
|
||||
}
|
||||
|
||||
.mcbutton.black {
|
||||
background: #1b1b1b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.lead .mcbutton.primary {
|
||||
border-color: #a2a2a2;
|
||||
}
|
||||
|
||||
.lead .mcbutton {
|
||||
padding: 16px 45px;
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
.mcbutton i {
|
||||
color: inherit;
|
||||
font-size: 1.5em;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ol {
|
||||
margin-left: 2em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-left: 1em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul ul {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
color: #1f1f1f;
|
||||
}
|
||||
|
||||
.intro {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
background: url(../img/head.jpg);
|
||||
background-size: cover;
|
||||
margin-bottom: 0px;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 80px;
|
||||
min-height: 579px;
|
||||
max-height: 579px;
|
||||
}
|
||||
|
||||
.intro h1 {
|
||||
margin-top: 0;
|
||||
font-size: 3.3em;
|
||||
color: #000;
|
||||
font-weight: 100;
|
||||
margin-bottom: 35px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
color: #3a3a3a;
|
||||
margin-bottom: 30px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.lead {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.lead .mcbutton {
|
||||
border-color: #595959;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.heading-icon {
|
||||
margin-right: 16px
|
||||
}
|
||||
|
||||
.box-container {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-top: 1.4em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.box {
|
||||
list-style-type: none;
|
||||
float: left;
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 40px, 0);
|
||||
transition: opacity 0.2s, transform 0.35s;
|
||||
}
|
||||
|
||||
.box.show {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
transition: opacity 0.4s, transform 0.35s;
|
||||
}
|
||||
|
||||
.box .inner {
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.box a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.box img {
|
||||
width: calc(100% + 50px);
|
||||
max-width: calc(100% + 50px);
|
||||
transition: opacity 0.35s, transform 0.35s;
|
||||
transform: translate3d(-40px, 0, 0);
|
||||
}
|
||||
|
||||
.box a::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #000;
|
||||
z-index: 99;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s;
|
||||
}
|
||||
|
||||
.three-cols .box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.four-cols .box {
|
||||
width: 23.1%;
|
||||
}
|
||||
|
||||
.four-cols .box:nth-child(4n+0) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.four-cols .box:nth-child(4n+1) {
|
||||
clear: both;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.options-list {
|
||||
width: 700px;
|
||||
margin: 0 auto;
|
||||
border: 1px solid #ececec;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.options-list .option {
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid #ececec;
|
||||
}
|
||||
|
||||
.options-list .option .name {
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
width: 23%;
|
||||
float: left;
|
||||
text-align: left;
|
||||
padding: 14px 17px;
|
||||
color: #000;
|
||||
font-size: 0.89em;
|
||||
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif !important;
|
||||
}
|
||||
|
||||
.options-list .option .value {
|
||||
display: inline-block;
|
||||
width: 65%;
|
||||
float: left;
|
||||
padding: 14px 17px;
|
||||
text-align: left;
|
||||
line-height: 1.7em;
|
||||
font-size: 0.89em;
|
||||
border-left: 1px solid #eee;
|
||||
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif !important;
|
||||
}
|
||||
|
||||
.options-list .option .type {
|
||||
color: #ed7205;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.params-list {
|
||||
margin-bottom: 11em;
|
||||
}
|
||||
|
||||
.option-code {
|
||||
width: 700px;
|
||||
margin: 0 auto;
|
||||
border: 1px solid #ececec;
|
||||
border-radius: 2px;
|
||||
padding-left: 20px;
|
||||
padding-top: 0;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.inline-inner {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.inline-close-btn {
|
||||
background: #FFC107;
|
||||
width: 200px;
|
||||
display: block;
|
||||
margin: auto;
|
||||
height: 53px;
|
||||
text-align: center;
|
||||
line-height: 53px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
border-radius: 5px;
|
||||
border: 2px solid #eee;
|
||||
}
|
||||
|
||||
.inline-close-btn:hover {
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
.especifications {
|
||||
width: 100%;
|
||||
max-width: 543px;
|
||||
margin: auto;
|
||||
}
|
||||
.especifications ul {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.especifications li {
|
||||
text-align: left;
|
||||
list-style: initial;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #2b2b2b;
|
||||
opacity: 0;
|
||||
line-height: 1.7em;
|
||||
transform: translate3d(-10px, 0, 0);
|
||||
}
|
||||
|
||||
.especifications li.show {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.especifications li i {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
.footer-btns {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 390px) {
|
||||
.three-cols .box {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.intro h1 {
|
||||
font-size: 4.3em;
|
||||
}
|
||||
|
||||
.intro {
|
||||
max-height: 70vh;
|
||||
min-height: 640px;
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
.intro h1,
|
||||
.tagline {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.three-cols .box {
|
||||
width: 33.3%;
|
||||
}
|
||||
|
||||
.three-cols .box:nth-child(3n+0) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.three-cols .box:nth-child(3n+1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.mcbutton {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.box:hover img {
|
||||
transform: translate3d(0, 0, 0);
|
||||
transition: opacity 0.35s, transform 0.35s;
|
||||
}
|
||||
|
||||
.box:hover a::before {
|
||||
opacity: 0.3;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* path {
|
||||
stroke-opacity: 0;
|
||||
}
|
||||
|
||||
path.hw {
|
||||
stroke-opacity: 1;
|
||||
}
|
||||
*/
|
||||
Reference in New Issue
Block a user