diff --git a/.gitignore b/.gitignore index 30bc162..4dfd4ff 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -/node_modules \ No newline at end of file +/node_modules +/prod \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index a8ee56d..1f40389 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,11 +1,12 @@ var gulp = require('gulp'), sass = require('gulp-sass'), autoprefixer = require('gulp-autoprefixer'), + minifyCss = require('gulp-minify-css'), browserSync = require('browser-sync').create(), reload = browserSync.reload, src = { - scss: './src/scss/**/*.scss' + scss: './src/scss/surface_styles.scss' }, prod = { @@ -18,7 +19,7 @@ gulp.task('browser-sync', ['compile-scss'], function(){ }); gulp.watch(src.scss, ['compile-scss']); - gulp.watch('./prod/*.html').on('change', reload); + gulp.watch('./prod/**/*.html').on('change', reload); }); gulp.task('compile-scss', function(){ @@ -29,6 +30,7 @@ gulp.task('compile-scss', function(){ .pipe(autoprefixer({ browsers: ['last 2 versions'] })) + .pipe(minifyCss()) .pipe(gulp.dest(prod.css)) .pipe(reload({ stream: true diff --git a/prod/css/alerts.css b/prod/css/alerts.css deleted file mode 100644 index 33cd3f4..0000000 --- a/prod/css/alerts.css +++ /dev/null @@ -1,15 +0,0 @@ -.alert-wrap { - position: relative; } - -.alert { - padding-bottom: 50px; } - -#alert-check { - display: none; } - #alert-check:checked ~ div, #alert-check:checked ~ label { - display: none; } - #alert-check + label { - position: absolute; - right: 16px; - bottom: 10px; - cursor: pointer; } diff --git a/prod/css/animations.css b/prod/css/animations.css deleted file mode 100644 index 3881b4e..0000000 --- a/prod/css/animations.css +++ /dev/null @@ -1,91 +0,0 @@ -.fade-in-from-top { - opacity: 0; - -webkit-transform: translateY(-6px); - transform: translateY(-6px); - animation: fadeInVert 0.5s ease-out forwards; - -webkit-animation: fadeInVert 0.5s ease-out forwards; } - -.fade-in-from-bottom { - opacity: 0; - -webkit-transform: translateY(6px); - transform: translateY(6px); - animation: fadeInVert 0.5s ease-out forwards; - -webkit-animation: fadeInVert 0.5s ease-out forwards; } - -@keyframes fadeInVert { - to { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); } } - -@-webkit-keyframes fadeInVert { - to { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); } } - -.fade-in-from-left { - opacity: 0; - -webkit-transform: translateX(-6px); - transform: translateX(-6px); - animation: fadeInHoriz 0.5s ease-out forwards; - -webkit-animation: fadeInHoriz 0.5s ease-out forwards; } - -.fade-in-from-right { - opacity: 0; - -webkit-transform: translateX(6px); - transform: translateX(6px); - animation: fadeInHoriz 0.5s ease-out forwards; - -webkit-animation: fadeInHoriz 0.5s ease-out forwards; } - -@keyframes fadeInHoriz { - to { - opacity: 1; - -webkit-transform: translateX(0); - transform: translateX(0); } } - -@-webkit-keyframes fadeInHoriz { - to { - opacity: 1; - -webkit-transform: translateX(0); - transform: translateX(0); } } - -.anim-delay-5 { - animation-delay: 500ms; - -webkit-animation-delay: 500ms; } - -.anim-delay-10 { - animation-delay: 1000ms; - -webkit-animation-delay: 1000ms; } - -.anim-delay-15 { - animation-delay: 1500ms; - -webkit-animation-delay: 1500ms; } - -.anim-delay-20 { - animation-delay: 2000ms; - -webkit-animation-delay: 2000ms; } - -.anim-delay-25 { - animation-delay: 2500ms; - -webkit-animation-delay: 2500ms; } - -.anim-delay-30 { - animation-delay: 3000ms; - -webkit-animation-delay: 3000ms; } - -.anim-delay-35 { - animation-delay: 3500ms; - -webkit-animation-delay: 3500ms; } - -.anim-delay-40 { - animation-delay: 4000ms; - -webkit-animation-delay: 4000ms; } - -.anim-delay-45 { - animation-delay: 4500ms; - -webkit-animation-delay: 4500ms; } - -.anim-delay-50 { - animation-delay: 5000ms; - -webkit-animation-delay: 5000ms; } diff --git a/prod/css/buttons.css b/prod/css/buttons.css deleted file mode 100644 index cd74f6c..0000000 --- a/prod/css/buttons.css +++ /dev/null @@ -1,54 +0,0 @@ -[class^="btn"] { - transition: all 0.3s cubic-bezier(.64, .09, .08, 1); - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); - position: relative; - cursor: pointer; - background-size: 0; - background-repeat: no-repeat; - background-position: 50% 50%; - transition: background-color 0.3s cubic-bezier(.64, .09, .08, 1), box-shadow 0.3s cubic-bezier(.64, .09, .08, 1); - will-change: background-size, background-image; - padding: 10px 20px; - display: inline-block; - font-family: Roboto; - border: 0; } - [class^="btn"]:after { - position: absolute; - content: ''; - transition: none; - background: radial-gradient(circle, white 95%, transparent 95%); - background-size: 0.7%; - background-position: 50% 50%; - background-repeat: no-repeat; } - [class^="btn"]:focus { - outline: none; - background-size: 1000%; - transition: all 1s cubic-bezier(.64, .09, .08, 1); } - -.btn--float { - border-radius: 50%; - width: 50px; - height: 50px; - background-image: radial-gradient(circle, #ffeb3b 1%, #fff387 15%, transparent 30%); - background-color: #ffeb3b; - will-change: box-shadow, background-color; } - .btn--float:hover { - box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); - background-color: #ffee55; } - -.btn--raised { - border-radius: 1.98px; - background-color: #28e1bd; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); - background-image: radial-gradient(circle, #28e1bd 1%, #6bebd1 15%, transparent 30%); - background-color: #28e1bd; - will-change: box-shadow, background-color; } - .btn--raised:hover { - box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); - background-color: #3ee4c4; } - -.btn--flat { - background-image: radial-gradient(circle, #28e1bd 1%, #6bebd1 15%, transparent 30%); - background-color: #28e1bd; - background-color: #efefef; - box-shadow: none; } diff --git a/prod/css/cards.css b/prod/css/cards.css deleted file mode 100644 index 858b79f..0000000 --- a/prod/css/cards.css +++ /dev/null @@ -1,5 +0,0 @@ -.card { - box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.1); - padding: 20px; - border-radius: 6px; } - diff --git a/prod/css/cards_tiles.css b/prod/css/cards_tiles.css deleted file mode 100644 index ff7c1ef..0000000 --- a/prod/css/cards_tiles.css +++ /dev/null @@ -1,7 +0,0 @@ -.card { - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.12), 0 2px 10px 0 rgba(0, 0, 0, 0.09); - border-radius: 3px; } - -.tile, .card { - padding: 20px; - background: white; } diff --git a/prod/css/carousel.css b/prod/css/carousel.css deleted file mode 100644 index 37796e4..0000000 --- a/prod/css/carousel.css +++ /dev/null @@ -1,5 +0,0 @@ -.carousel img { - width: 100%; } - .carousel img:not(:first-of-type) { - position: relative; - transform: translateY(-100%); } diff --git a/prod/css/code.css b/prod/css/code.css deleted file mode 100644 index e69de29..0000000 diff --git a/prod/css/collapsable.css b/prod/css/collapsable.css deleted file mode 100644 index 6b634e5..0000000 --- a/prod/css/collapsable.css +++ /dev/null @@ -1,16 +0,0 @@ -[class^="collapsible-"] { - transform: scaleY(0); - transform-origin: 0 0; - height: 0; - transition: transform 0.3s ease; } - -[id^="collapsible-"] { - display: none; } - [id^="collapsible-"]:checked + [class^="collapsible-"] { - transform: scaleY(1); - height: auto; } - -label[for^="collapsible-"] { - width: 100%; - cursor: pointer; - line-height: 20px; } diff --git a/prod/css/collapsible.css b/prod/css/collapsible.css deleted file mode 100644 index 969f971..0000000 --- a/prod/css/collapsible.css +++ /dev/null @@ -1,54 +0,0 @@ -[id^="collapsible-"] { - display: none; } - [id^="collapsible-"]:checked ~ [class^="collapsible-"][class$="area"] { - -webkit-transform: scaleY(1); - transform: scaleY(1); - height: auto; - padding: 15px 20px; - margin-bottom: 20px; } - [id^="collapsible-"]:checked + label:before { - margin-top: 5px; - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); } - [id^="collapsible-"]:checked + label:after { - margin-top: 5px; - -webkit-transform: rotate(45deg) translate(4px, -3px); - transform: rotate(45deg) translate(4px, -3px); } - -label[for^="collapsible-"] { - width: 100%; - cursor: pointer; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - padding: 15px 20px; - border-bottom: solid 1px #ebebeb; - color: #474747; - border-radius: 3px; } - label[for^="collapsible-"]:before, label[for^="collapsible-"]:after { - content: ''; - position: absolute; - right: 20px; - width: 2px; - height: 8px; - background: #9e9e9e; - transition: all 0.3s ease; } - label[for^="collapsible-"]:before { - margin-top: 2px; - -webkit-transform: rotate(50deg); - transform: rotate(50deg); } - label[for^="collapsible-"]:after { - margin-top: 6px; - -webkit-transform: rotate(-50deg); - transform: rotate(-50deg); } - -[class^="collapsible-"][class$="area"] { - -webkit-transform: scaleY(0); - transform: scaleY(0); - -webkit-transform-origin: 0 0; - transform-origin: 0 0; - height: 0; - will-change: height, transform; - transition: all 0.3s ease; - padding-left: 20px; } diff --git a/prod/css/footer.css b/prod/css/footer.css deleted file mode 100644 index 068cbdf..0000000 --- a/prod/css/footer.css +++ /dev/null @@ -1,6 +0,0 @@ -footer { - display: block; - width: 100%; - background: #28e1bd; - padding-top: 20px; - padding-bottom: 20px; } diff --git a/prod/css/form.css b/prod/css/form.css deleted file mode 100644 index 4ab65ed..0000000 --- a/prod/css/form.css +++ /dev/null @@ -1,193 +0,0 @@ -@charset "UTF-8"; -label { - color: #2e2e2e; } - -input[type="email"], input[type="text"], input[type="password"], input[type="textarea"] { - margin-bottom: 40px; - width: 200px; - display: block; - border: none; - padding: 10px 0; - border-bottom: solid 1px #1abc9c; - will-change: background-position; - transition: all 0.3s cubic-bezier(.64, .09, .08, 1); - background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 96%); - background-position: -200px 0; - background-size: 200px 100%; - background-repeat: no-repeat; - color: #0e6252; } - input[type="email"]:focus, input[type="email"]:valid, input[type="text"]:focus, input[type="text"]:valid, input[type="password"]:focus, input[type="password"]:valid, input[type="textarea"]:focus, input[type="textarea"]:valid { - box-shadow: none; - outline: none; - background-position: 0 0; } - input[type="email"]:focus::-webkit-input-placeholder, input[type="email"]:focus::-moz-input-placeholder, input[type="email"]:focus:-moz-input-placeholder, input[type="email"]:valid::-webkit-input-placeholder, input[type="email"]:valid::-moz-input-placeholder, input[type="email"]:valid:-moz-input-placeholder, input[type="text"]:focus::-webkit-input-placeholder, input[type="text"]:focus::-moz-input-placeholder, input[type="text"]:focus:-moz-input-placeholder, input[type="text"]:valid::-webkit-input-placeholder, input[type="text"]:valid::-moz-input-placeholder, input[type="text"]:valid:-moz-input-placeholder, input[type="password"]:focus::-webkit-input-placeholder, input[type="password"]:focus::-moz-input-placeholder, input[type="password"]:focus:-moz-input-placeholder, input[type="password"]:valid::-webkit-input-placeholder, input[type="password"]:valid::-moz-input-placeholder, input[type="password"]:valid:-moz-input-placeholder, input[type="textarea"]:focus::-webkit-input-placeholder, input[type="textarea"]:focus::-moz-input-placeholder, input[type="textarea"]:focus:-moz-input-placeholder, input[type="textarea"]:valid::-webkit-input-placeholder, input[type="textarea"]:valid::-moz-input-placeholder, input[type="textarea"]:valid:-moz-input-placeholder { - color: #1abc9c; - font-size: 11px; - -webkit-transform: translateY(-20px); - transform: translateY(-20px); - visibility: visible !important; } -input::-webkit-input-placeholder { - transition: all 0.2s cubic-bezier(.64, .09, .08, 1); - will-change: transform, color, font-size; } - -input[type="checkbox"]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id^="lightbox-"]) { - position: relative; - cursor: pointer; } - input[type="checkbox"]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id^="lightbox-"]):before { - content: ''; - width: 16px; - height: 16px; - border: solid 2px #1abc9c; - border-radius: 3px; - background: white; - position: absolute; } - input[type="checkbox"]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id^="lightbox-"]):after { - content: '✓'; - color: white; - background: #1abc9c; - position: absolute; - top: 0; - left: 0; - width: 16px; - height: 16px; - border: solid 2px #1abc9c; - border-radius: 3px; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - opacity: 0; - transition: opacity 0.3s cubic-bezier(.64, .09, .08, 1); - will-change: opacity; } - input[type="checkbox"]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id^="lightbox-"]):checked:after { - opacity: 1; } - input[type="checkbox"]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id^="lightbox-"]):focus { - outline: none; } - -input[type="radio"] { - position: relative; - top: 2px; - left: 2px; - margin: 0 8px; - cursor: pointer; } - input[type="radio"]:before { - content: ''; - background-color: white; - width: 16px; - height: 16px; - border-radius: 50%; - border: solid 2px #1abc9c; - display: inline-block; - position: absolute; - top: -2px; - left: -2px; - background-image: radial-gradient(circle, #1abc9c 40%, white 50%); - background-size: 0; - background-position: 50% 50%; - background-repeat: no-repeat; - transition: all 0.3s cubic-bezier(.64, .09, .08, 1); - will-change: background-size; - z-index: 2; } - input[type="radio"]:after { - content: ''; - width: 16px; - height: 16px; - background: white; - border-radius: 50%; - position: absolute; - transition: all 0.3s cubic-bezier(.64, .09, .08, 1); } - input[type="radio"]:checked:before { - background-size: 14px 14px; } - input[type="radio"]:focus { - outline: none; } - -select { - border: none; - border-bottom: solid 1px #9e9e9e; - color: #212121; - padding: 6px; - cursor: pointer; } - -input[type=range] { - -webkit-appearance: none; } - input[type=range]:focus { - outline: none; } - -input[type=range]::-webkit-slider-runnable-track { - height: 3px; - cursor: pointer; - background: #9e9e9e; } - -input[type=range]::-webkit-slider-thumb { - height: 16px; - width: 16px; - border-radius: 50%; - background: #2ecc71; - cursor: pointer; - -webkit-appearance: none; - margin-top: -6px; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.12), 0 2px 10px 0 rgba(0, 0, 0, 0.09); } - -input[type=range]::-moz-range-track { - height: 3px; - cursor: pointer; - background: #9e9e9e; } - -input[type=range]::-moz-range-thumb { - height: 16px; - width: 16px; - border-radius: 50%; - border: none; - background: #2ecc71; - cursor: pointer; } - -input[type=range]::-ms-track { - cursor: pointer; - background: transparent; - border-color: transparent; - color: transparent; } - -input[type=range]::-ms-fill-lower { - background: #2ecc71; } - -input[type=range]::-ms-fill-upper { - background: #9e9e9e; } - -input[type=range]::-ms-thumb { - background: #2ecc71; } - -.toggle { - display: none; } - .toggle:checked + label { - background: #93e7b6; } - .toggle:checked + label:after { - background: #2ecc71; - margin-left: 18px; } - -.toggle + label { - position: absolute; - width: 30px; - height: 6px; - margin-top: 12px; - background: #9e9e9e; - transition: background 0.3s cubic-bezier(.64, .09, .08, 1); - will-change: background; } - .toggle + label:after { - position: absolute; - content: ''; - width: 14px; - height: 14px; - border-radius: 50%; - background: #dedede; - display: inline-block; - cursor: pointer; - margin-top: -4px; - margin-left: -1px; - transition: all 0.3s ease; - will-change: background, margin-left; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.12), 0 2px 10px 0 rgba(0, 0, 0, 0.09); } diff --git a/prod/css/general.css b/prod/css/general.css deleted file mode 100644 index 6b97190..0000000 --- a/prod/css/general.css +++ /dev/null @@ -1,3 +0,0 @@ -body { - background: #efefef; - line-height: 130%; } diff --git a/prod/css/grid.css b/prod/css/grid.css deleted file mode 100644 index c142a40..0000000 --- a/prod/css/grid.css +++ /dev/null @@ -1,492 +0,0 @@ -.g--1 { - width: 8.33333%; } - -@media screen and (max-width: 1200px) { - .g-med--1 { - width: 8.33333%; } } - -@media screen and (max-width: 900px) { - .g-small--1 { - width: 8.33333%; } } - -@media screen and (max-width: 520px) { - .g-tiny--1 { - width: 8.33333%; } } - -.m--1 { - margin-left: 8.33333%; - margin-top: 20px; - margin-bottom: 20px; } - -@media screen and (max-width: 1200px) { - .m-med--1 { - margin-left: 8.33333%; - margin-top: 20px; - margin-bottom: 20px; } } - -@media screen and (max-width: 900px) { - .m-small--1 { - margin-left: 8.33333%; - margin-top: 10px; - margin-bottom: 10px; } } - -@media screen and (max-width: 520px) { - .m-tiny--1 { - margin-left: 8.33333%; - margin-top: 10px; - margin-bottom: 10px; } } - -.g--2 { - width: 16.66667%; } - -@media screen and (max-width: 1200px) { - .g-med--2 { - width: 16.66667%; } } - -@media screen and (max-width: 900px) { - .g-small--2 { - width: 16.66667%; } } - -@media screen and (max-width: 520px) { - .g-tiny--2 { - width: 16.66667%; } } - -.m--2 { - margin-left: 16.66667%; - margin-top: 20px; - margin-bottom: 20px; } - -@media screen and (max-width: 1200px) { - .m-med--2 { - margin-left: 16.66667%; - margin-top: 20px; - margin-bottom: 20px; } } - -@media screen and (max-width: 900px) { - .m-small--2 { - margin-left: 16.66667%; - margin-top: 10px; - margin-bottom: 10px; } } - -@media screen and (max-width: 520px) { - .m-tiny--2 { - margin-left: 16.66667%; - margin-top: 10px; - margin-bottom: 10px; } } - -.g--3 { - width: 25%; } - -@media screen and (max-width: 1200px) { - .g-med--3 { - width: 25%; } } - -@media screen and (max-width: 900px) { - .g-small--3 { - width: 25%; } } - -@media screen and (max-width: 520px) { - .g-tiny--3 { - width: 25%; } } - -.m--3 { - margin-left: 25%; - margin-top: 20px; - margin-bottom: 20px; } - -@media screen and (max-width: 1200px) { - .m-med--3 { - margin-left: 25%; - margin-top: 20px; - margin-bottom: 20px; } } - -@media screen and (max-width: 900px) { - .m-small--3 { - margin-left: 25%; - margin-top: 10px; - margin-bottom: 10px; } } - -@media screen and (max-width: 520px) { - .m-tiny--3 { - margin-left: 25%; - margin-top: 10px; - margin-bottom: 10px; } } - -.g--4 { - width: 33.33333%; } - -@media screen and (max-width: 1200px) { - .g-med--4 { - width: 33.33333%; } } - -@media screen and (max-width: 900px) { - .g-small--4 { - width: 33.33333%; } } - -@media screen and (max-width: 520px) { - .g-tiny--4 { - width: 33.33333%; } } - -.m--4 { - margin-left: 33.33333%; - margin-top: 20px; - margin-bottom: 20px; } - -@media screen and (max-width: 1200px) { - .m-med--4 { - margin-left: 33.33333%; - margin-top: 20px; - margin-bottom: 20px; } } - -@media screen and (max-width: 900px) { - .m-small--4 { - margin-left: 33.33333%; - margin-top: 10px; - margin-bottom: 10px; } } - -@media screen and (max-width: 520px) { - .m-tiny--4 { - margin-left: 33.33333%; - margin-top: 10px; - margin-bottom: 10px; } } - -.g--5 { - width: 41.66667%; } - -@media screen and (max-width: 1200px) { - .g-med--5 { - width: 41.66667%; } } - -@media screen and (max-width: 900px) { - .g-small--5 { - width: 41.66667%; } } - -@media screen and (max-width: 520px) { - .g-tiny--5 { - width: 41.66667%; } } - -.m--5 { - margin-left: 41.66667%; - margin-top: 20px; - margin-bottom: 20px; } - -@media screen and (max-width: 1200px) { - .m-med--5 { - margin-left: 41.66667%; - margin-top: 20px; - margin-bottom: 20px; } } - -@media screen and (max-width: 900px) { - .m-small--5 { - margin-left: 41.66667%; - margin-top: 10px; - margin-bottom: 10px; } } - -@media screen and (max-width: 520px) { - .m-tiny--5 { - margin-left: 41.66667%; - margin-top: 10px; - margin-bottom: 10px; } } - -.g--6 { - width: 50%; } - -@media screen and (max-width: 1200px) { - .g-med--6 { - width: 50%; } } - -@media screen and (max-width: 900px) { - .g-small--6 { - width: 50%; } } - -@media screen and (max-width: 520px) { - .g-tiny--6 { - width: 50%; } } - -.m--6 { - margin-left: 50%; - margin-top: 20px; - margin-bottom: 20px; } - -@media screen and (max-width: 1200px) { - .m-med--6 { - margin-left: 50%; - margin-top: 20px; - margin-bottom: 20px; } } - -@media screen and (max-width: 900px) { - .m-small--6 { - margin-left: 50%; - margin-top: 10px; - margin-bottom: 10px; } } - -@media screen and (max-width: 520px) { - .m-tiny--6 { - margin-left: 50%; - margin-top: 10px; - margin-bottom: 10px; } } - -.g--7 { - width: 58.33333%; } - -@media screen and (max-width: 1200px) { - .g-med--7 { - width: 58.33333%; } } - -@media screen and (max-width: 900px) { - .g-small--7 { - width: 58.33333%; } } - -@media screen and (max-width: 520px) { - .g-tiny--7 { - width: 58.33333%; } } - -.m--7 { - margin-left: 58.33333%; - margin-top: 20px; - margin-bottom: 20px; } - -@media screen and (max-width: 1200px) { - .m-med--7 { - margin-left: 58.33333%; - margin-top: 20px; - margin-bottom: 20px; } } - -@media screen and (max-width: 900px) { - .m-small--7 { - margin-left: 58.33333%; - margin-top: 10px; - margin-bottom: 10px; } } - -@media screen and (max-width: 520px) { - .m-tiny--7 { - margin-left: 58.33333%; - margin-top: 10px; - margin-bottom: 10px; } } - -.g--8 { - width: 66.66667%; } - -@media screen and (max-width: 1200px) { - .g-med--8 { - width: 66.66667%; } } - -@media screen and (max-width: 900px) { - .g-small--8 { - width: 66.66667%; } } - -@media screen and (max-width: 520px) { - .g-tiny--8 { - width: 66.66667%; } } - -.m--8 { - margin-left: 66.66667%; - margin-top: 20px; - margin-bottom: 20px; } - -@media screen and (max-width: 1200px) { - .m-med--8 { - margin-left: 66.66667%; - margin-top: 20px; - margin-bottom: 20px; } } - -@media screen and (max-width: 900px) { - .m-small--8 { - margin-left: 66.66667%; - margin-top: 10px; - margin-bottom: 10px; } } - -@media screen and (max-width: 520px) { - .m-tiny--8 { - margin-left: 66.66667%; - margin-top: 10px; - margin-bottom: 10px; } } - -.g--9 { - width: 75%; } - -@media screen and (max-width: 1200px) { - .g-med--9 { - width: 75%; } } - -@media screen and (max-width: 900px) { - .g-small--9 { - width: 75%; } } - -@media screen and (max-width: 520px) { - .g-tiny--9 { - width: 75%; } } - -.m--9 { - margin-left: 75%; - margin-top: 20px; - margin-bottom: 20px; } - -@media screen and (max-width: 1200px) { - .m-med--9 { - margin-left: 75%; - margin-top: 20px; - margin-bottom: 20px; } } - -@media screen and (max-width: 900px) { - .m-small--9 { - margin-left: 75%; - margin-top: 10px; - margin-bottom: 10px; } } - -@media screen and (max-width: 520px) { - .m-tiny--9 { - margin-left: 75%; - margin-top: 10px; - margin-bottom: 10px; } } - -.g--10 { - width: 83.33333%; } - -@media screen and (max-width: 1200px) { - .g-med--10 { - width: 83.33333%; } } - -@media screen and (max-width: 900px) { - .g-small--10 { - width: 83.33333%; } } - -@media screen and (max-width: 520px) { - .g-tiny--10 { - width: 83.33333%; } } - -.m--10 { - margin-left: 83.33333%; - margin-top: 20px; - margin-bottom: 20px; } - -@media screen and (max-width: 1200px) { - .m-med--10 { - margin-left: 83.33333%; - margin-top: 20px; - margin-bottom: 20px; } } - -@media screen and (max-width: 900px) { - .m-small--10 { - margin-left: 83.33333%; - margin-top: 10px; - margin-bottom: 10px; } } - -@media screen and (max-width: 520px) { - .m-tiny--10 { - margin-left: 83.33333%; - margin-top: 10px; - margin-bottom: 10px; } } - -.g--11 { - width: 91.66667%; } - -@media screen and (max-width: 1200px) { - .g-med--11 { - width: 91.66667%; } } - -@media screen and (max-width: 900px) { - .g-small--11 { - width: 91.66667%; } } - -@media screen and (max-width: 520px) { - .g-tiny--11 { - width: 91.66667%; } } - -.m--11 { - margin-left: 91.66667%; - margin-top: 20px; - margin-bottom: 20px; } - -@media screen and (max-width: 1200px) { - .m-med--11 { - margin-left: 91.66667%; - margin-top: 20px; - margin-bottom: 20px; } } - -@media screen and (max-width: 900px) { - .m-small--11 { - margin-left: 91.66667%; - margin-top: 10px; - margin-bottom: 10px; } } - -@media screen and (max-width: 520px) { - .m-tiny--11 { - margin-left: 91.66667%; - margin-top: 10px; - margin-bottom: 10px; } } - -.g--12 { - width: 100%; } - -@media screen and (max-width: 1200px) { - .g-med--12 { - width: 100%; } } - -@media screen and (max-width: 900px) { - .g-small--12 { - width: 100%; } } - -@media screen and (max-width: 520px) { - .g-tiny--12 { - width: 100%; } } - -.m--12 { - margin-left: 100%; - margin-top: 20px; - margin-bottom: 20px; } - -@media screen and (max-width: 1200px) { - .m-med--12 { - margin-left: 100%; - margin-top: 20px; - margin-bottom: 20px; } } - -@media screen and (max-width: 900px) { - .m-small--12 { - margin-left: 100%; - margin-top: 10px; - margin-bottom: 10px; } } - -@media screen and (max-width: 520px) { - .m-tiny--12 { - margin-left: 100%; - margin-top: 10px; - margin-bottom: 10px; } } - -@media screen and (max-width: 1200px) { - .m-med--0 { - margin-left: 0; } } - -@media screen and (max-width: 900px) { - .m-small--0 { - margin-left: 0; } } - -@media screen and (max-width: 520px) { - .m-tiny--0 { - margin-left: 0; } } - -[class^="container"] { - display: -webkit-flex; - display: -ms-flexbox; - display: flex; } - -.container--baseline { - -webkit-align-items: baseline; - -ms-flex-align: baseline; - align-items: baseline; } - -.container--center { - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; } - -.container--start { - -webkit-align-items: flex-start; - -ms-flex-align: start; - align-items: flex-start; } - -.container--end { - -webkit-align-items: flex-end; - -ms-flex-align: end; - align-items: flex-end; } diff --git a/prod/css/header.css b/prod/css/header.css deleted file mode 100644 index d7b891d..0000000 --- a/prod/css/header.css +++ /dev/null @@ -1,8 +0,0 @@ -header { - width: 100%; - padding-top: 20px; - padding-bottom: 20px; - background: #1abc9c; - margin-bottom: 20px; } - header h1, header h2, header h3 { - color: white; } diff --git a/prod/css/inputs.css b/prod/css/inputs.css deleted file mode 100644 index 9235361..0000000 --- a/prod/css/inputs.css +++ /dev/null @@ -1,24 +0,0 @@ -input[type="email"], input[type="text"], input[type="password"], input[type="textarea"] { - margin: 40px 25px; - width: 200px; - display: block; - border: none; - padding: 10px 0; - border-bottom: solid 1px #1abc9c; - transition: all 0.3s cubic-bezier(.64, .09, .08, 1); - background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 96%); - background-position: -200px 0; - background-size: 200px 100%; - background-repeat: no-repeat; - color: #0e6252; } - input[type="email"]:focus, input[type="email"]:valid, input[type="text"]:focus, input[type="text"]:valid, input[type="password"]:focus, input[type="password"]:valid, input[type="textarea"]:focus, input[type="textarea"]:valid { - box-shadow: none; - outline: none; - background-position: 0 0; } - input[type="email"]:focus::-webkit-input-placeholder, input[type="email"]:valid::-webkit-input-placeholder, input[type="text"]:focus::-webkit-input-placeholder, input[type="text"]:valid::-webkit-input-placeholder, input[type="password"]:focus::-webkit-input-placeholder, input[type="password"]:valid::-webkit-input-placeholder, input[type="textarea"]:focus::-webkit-input-placeholder, input[type="textarea"]:valid::-webkit-input-placeholder { - color: #1abc9c; - font-size: 11px; - transform: translateY(-20px); - visibility: visible !important; } -input::-webkit-input-placeholder { - transition: all 0.2s cubic-bezier(.64, .09, .08, 1); } diff --git a/prod/css/lightbox.css b/prod/css/lightbox.css deleted file mode 100644 index 4d3f829..0000000 --- a/prod/css/lightbox.css +++ /dev/null @@ -1,30 +0,0 @@ -label[for^="lightbox-"] { - cursor: pointer; - width: 100%; - transition: none; } - -input[id^="lightbox-"] { - display: none; } - -input[id^="lightbox-"]:checked { - display: block; - position: absolute; - top: 50%; - left: 50%; } - input[id^="lightbox-"]:checked:before { - content: ''; - position: fixed; - z-index: 9; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.4); } - input[id^="lightbox-"]:checked + label { - top: 50%; - left: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - width: 50vw; - position: fixed; - z-index: 10; } diff --git a/prod/css/links.css b/prod/css/links.css deleted file mode 100644 index 2c17152..0000000 --- a/prod/css/links.css +++ /dev/null @@ -1,13 +0,0 @@ -a { - background: linear-gradient(to top, rgba(40, 225, 189, 0.8) 50%, rgba(255, 255, 255, 0) 50%); - background-size: 100% 200%; - background-position: 0 10%; - background-repeat: no-repeat; - text-decoration: none; - color: inherit; - transition: background-position 0.3s cubic-bezier(.64, .09, .08, 1); - will-change: background-position; } - a:active { - color: inherit; } - a:hover { - background-position: 0 100%; } diff --git a/prod/css/lists.css b/prod/css/lists.css deleted file mode 100644 index 8a2062d..0000000 --- a/prod/css/lists.css +++ /dev/null @@ -1,8 +0,0 @@ -ul, ol { - margin-left: 40px; } - ul li, ol li { - margin-top: 10px; } - -ol { - list-style-type: decimal; - white-space: nowrap; } diff --git a/prod/css/media.css b/prod/css/media.css deleted file mode 100644 index bf96734..0000000 --- a/prod/css/media.css +++ /dev/null @@ -1,2 +0,0 @@ -img { - width: 100%; } diff --git a/prod/css/modals.css b/prod/css/modals.css deleted file mode 100644 index 7a648b9..0000000 --- a/prod/css/modals.css +++ /dev/null @@ -1,55 +0,0 @@ -input[id^="modal-"] { - display: none; } - input[id^="modal-"]:checked + label { - outline: none; - background-size: 1000%; - transition: all 1s cubic-bezier(.64, .09, .08, 1); } - input[id^="modal-"]:checked + label:before { - content: ''; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.4); - transition: all 0.3s cubic-bezier(.64, .09, .08, 1); - z-index: 9; } - input[id^="modal-"]:checked ~ .modal-content { - transition: opacity 0.3s cubic-bezier(.64, .09, .08, 1); - opacity: 1; - display: block; - height: auto; - width: auto; - padding: 40px; - left: 50%; - top: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - z-index: 10; } - input[id^="modal-"]:checked ~ .modal-content * { - height: auto; - width: auto; } - -.modal-trigger { - cursor: pointer; - transition: all 0.3s cubic-bezier(.64, .09, .08, 1); - padding: 10px 20px; - background-size: 1%; - background-repeat: no-repeat; - background-position: 50% 50%; } - .modal-trigger:after { - white-space: nowrap; - padding: 10px; - cursor: pointer; - transition: all 0.2s cubic-bezier(.64, .09, .08, 1); - background-image: none; } - -.modal-content { - position: fixed; - opacity: 0; - height: 0; - background: white; - border-radius: 3px; } - .modal-content * { - width: 0; - height: 0; } diff --git a/prod/css/nav.css b/prod/css/nav.css deleted file mode 100644 index f9f1fde..0000000 --- a/prod/css/nav.css +++ /dev/null @@ -1,194 +0,0 @@ -.nav--horizontal { - display: -webkit-flex; - display: -ms-flexbox; - display: flex; } - .nav--horizontal ul, .nav--horizontal ol { - margin-left: 0; } - .nav--horizontal > ul, .nav--horizontal > li { - display: -webkit-flex; - display: -ms-flexbox; - display: flex; } - .nav--horizontal a { - display: inline-block; } - -.nav--vertical ul, .nav--vertical ol { - margin-left: 0; } -.nav--vertical ul, .nav--vertical li, .nav--vertical a { - display: inline-block; - float: left; - clear: left; } -.nav--vertical li:first-child a { - margin-bottom: 7px; } -.nav--vertical li:last-child a { - margin-top: 7px; } -.nav--vertical li a { - margin-top: 7px; - margin-bottom: 7px; } - -.logo-area { - width: 100%; - height: 100px; - border-bottom: solid 1px #e0e0e0; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - color: #474747; } - -.nav--super-vertical { - position: fixed; - height: 100%; - background: #efefef; - z-index: 7; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } - .nav--super-vertical a, .nav--super-vertical label { - width: 100%; - display: block; - text-decoration: none; - color: #474747; - cursor: pointer; - font-weight: 500; - padding: 20px 24px; - transition: none; - background-image: none; } - .nav--super-vertical a:hover, .nav--super-vertical label:hover { - background: #e0e0e0; } - .nav--super-vertical input { - display: none; } - .nav--super-vertical input:checked + label { - transition: background 0.2s cubic-bezier(.64, .09, .08, 1), color 0.2s cubic-bezier(.64, .09, .08, 1); - background: #e0e0e0; } - .nav--super-vertical input:checked ~ .nav-collapsible-links { - height: auto; - -webkit-transform: scaleY(1); - transform: scaleY(1); } - .nav--super-vertical input:checked ~ .nav-collapsible-links a { - height: 54px; } - -.nav-collapsible-links { - -webkit-transform: scaleY(0); - transform: scaleY(0); - -webkit-transform-origin: 0 0; - transform-origin: 0 0; - transition: -webkit-transform 0.3s cubic-bezier(.64, .09, .08, 1); - transition: transform 0.3s cubic-bezier(.64, .09, .08, 1); } - .nav-collapsible-links a { - padding: 0 24px 0 34px; - height: 0; - font-weight: 400; - transition: height 0.3s cubic-bezier(.64, .09, .08, 1); - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; } - -#nav--super-vertical-responsive, #nav--super-vertical-responsive + label, #nav--horizontal-responsive, #nav--horizontal-responsive + label { - display: none; } - -@media screen and (max-width: 1200px) { - .nav--super-vertical { - padding-top: 40px; - -webkit-transform: translateX(-100%); - transform: translateX(-100%); - transition: -webkit-transform 0.3s cubic-bezier(.64, .09, .08, 1); - transition: transform 0.3s cubic-bezier(.64, .09, .08, 1); } - #nav--super-vertical-responsive + label { - display: block; - position: fixed; - z-index: 8; - top: 0; - left: 0; - padding: 10px; - background: #efefef; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.12), 0 2px 10px 0 rgba(0, 0, 0, 0.09); - cursor: pointer; - transition: background 0.3s cubic-bezier(.64, .09, .08, 1), color 0.3s cubic-bezier(.64, .09, .08, 1); } - #nav--super-vertical-responsive:checked + label { - background: #1abc9c; - color: white; } - #nav--super-vertical-responsive:checked ~ .nav--super-vertical { - -webkit-transform: translateX(0); - transform: translateX(0); } } - -@media screen and (max-width: 900px) { - .nav--horizontal { - position: absolute; - top: 0; - left: 0; - width: 100%; - z-index: 7; - -webkit-transform: translateY(-100%); - transform: translateY(-100%); - transition: -webkit-transform 0.3s cubic-bezier(.64, .09, .08, 1); - transition: transform 0.3s cubic-bezier(.64, .09, .08, 1); } - .nav--horizontal ul, .nav--horizontal li, .nav--horizontal a { - width: 100%; - display: block; - margin: 0; } - .nav--horizontal a { - line-height: 40px; } - .nav--horizontal > ul { - padding-top: 50px; - background: #efefef; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.12), 0 2px 10px 0 rgba(0, 0, 0, 0.09); } - #nav--horizontal-responsive + label { - display: block; - position: fixed; - z-index: 8; - top: 0; - left: 0; - padding: 10px; - background: #efefef; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.12), 0 2px 10px 0 rgba(0, 0, 0, 0.09); - cursor: pointer; - transition: background 0.3s cubic-bezier(.64, .09, .08, 1), color 0.3s cubic-bezier(.64, .09, .08, 1); } - #nav--horizontal-responsive:checked + label { - background: #1abc9c; - color: white; } - #nav--horizontal-responsive:checked ~ .nav--horizontal { - -webkit-transform: translateY(0); - transform: translateY(0); } } - -header .nav--vertical a, header .nav--horizontal a { - color: #1abc9c; - background: white; - padding: 10px; - transition: none; - will-change: background; } - header .nav--vertical a:hover, header .nav--horizontal a:hover { - background: #e5e5e5; } - -.dropdown { - position: relative; } - .dropdown ul { - position: absolute; - background: white; - left: 0; - transition: all 0.3s ease; - -webkit-transform: scale(0); - transform: scale(0); - -webkit-transform-origin: 0 0; - transform-origin: 0 0; - z-index: 2; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.12), 0 2px 10px 0 rgba(0, 0, 0, 0.09); - width: 100%; } - .dropdown ul li { - width: 100%; - margin: 0; - padding: 0; } - .dropdown ul li a { - width: 100%; - padding: 8px 10px; - display: inline-block; - margin: 0; - border-radius: 0; } - .dropdown:hover ul { - -webkit-transform: scale(1); - transform: scale(1); } diff --git a/prod/css/slider.css b/prod/css/slider.css deleted file mode 100644 index e69de29..0000000 diff --git a/prod/css/tables.css b/prod/css/tables.css deleted file mode 100644 index 6a57485..0000000 --- a/prod/css/tables.css +++ /dev/null @@ -1,20 +0,0 @@ -table { - width: 100%; } - -.table--header { - color: #474747; - font-size: 16px; - line-height: 52px; } - -tr { - font-size: 17px; - line-height: 52px; - border-bottom: solid 1px #ebebeb; - will-change: background; } - tr:not(.table--header):hover { - background: #ebebeb; } - -td:first-child { - padding-left: 40px; } -td:last-child { - padding-right: 40px; } diff --git a/prod/css/tabs.css b/prod/css/tabs.css deleted file mode 100644 index 3773926..0000000 --- a/prod/css/tabs.css +++ /dev/null @@ -1,82 +0,0 @@ -.tabs { - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - padding: 0; } - -.tabs input[type="radio"][name="tabs"] { - position: absolute; - z-index: -1; } - .tabs input[type="radio"][name="tabs"]:checked + .tab-label-content label { - color: white; } - .tabs input[type="radio"][name="tabs"]:checked + .tab-label-content .tab-content { - display: block; } - .tabs input[type="radio"][name="tabs"]:first-of-type:checked ~ .slide { - left: 0; } - -.tabs input[type="radio"][name="tabs"]:nth-of-type(1):checked ~ .slide-demo { - left: 0%; - left: calc((100% / 3) * 0); } -.tabs input[type="radio"][name="tabs"]:nth-of-type(2):checked ~ .slide-demo { - left: 33.33333%; - left: calc((100% / 3) * 1); } -.tabs input[type="radio"][name="tabs"]:nth-of-type(3):checked ~ .slide-demo { - left: 66.66667%; - left: calc((100% / 3) * 2); } - -.slide-demo { - width: 33.33333%; - width: calc(100% / 3); } - -.tab-label-content:nth-of-type(1) .tab-content { - left: 0%; } -.tab-label-content:nth-of-type(2) .tab-content { - left: -100%; } -.tab-label-content:nth-of-type(3) .tab-content { - left: -200%; } - -.tab-content { - width: 300%; } - -.tabs label { - cursor: pointer; - color: rgba(255, 255, 255, 0.8); - background-color: #1abc9c; - box-sizing: border-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - text-align: center; - height: 56px; - transition: color 0.2s cubic-bezier(.64, .09, .08, 1); - will-change: color; - width: 100%; } - -.slide { - background: #ffeb3b; - height: 4px; - position: absolute; - left: 0; - top: 52px; - transition: left 0.3s cubic-bezier(.64, .09, .08, 1); - will-change: left; } - -.tab-label-content { - width: 100%; } - .tab-label-content .tab-content { - padding: 10px; - position: relative; - padding: 20px; - display: none; } - -.card.tabs .tab-label-content:first-of-type label { - border-top-left-radius: 3px; } -.card.tabs .tab-label-content:nth-last-child(2) label { - border-top-right-radius: 3px; } diff --git a/prod/css/test.css b/prod/css/test.css deleted file mode 100644 index 2fb3332..0000000 --- a/prod/css/test.css +++ /dev/null @@ -1,1455 +0,0 @@ -@charset "UTF-8"; -@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500,700|Gentium+Book+Basic:400,700); -html, body { - width: 100%; } - -body { - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; } - -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; - box-sizing: border-box; } - -/* 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; } - -blockquote, q { - quotes: none; } - -blockquote:before, blockquote:after, q:before, q:after { - content: ''; - content: none; } - -table { - border-collapse: collapse; - border-spacing: 0; } - -button { - border: none; - cursor: pointer; } - -.g--1 { - width: 8.33333%; } - -@media screen and (max-width: 1200px) { - .g-med--1 { - width: 8.33333%; } } - -@media screen and (max-width: 900px) { - .g-small--1 { - width: 8.33333%; } } - -@media screen and (max-width: 520px) { - .g-tiny--1 { - width: 8.33333%; } } - -.m--1 { - margin-left: 8.33333%; - margin-top: 20px; - margin-bottom: 20px; } - -@media screen and (max-width: 1200px) { - .m-med--1 { - margin-left: 8.33333%; - margin-top: 20px; - margin-bottom: 20px; } } - -@media screen and (max-width: 900px) { - .m-small--1 { - margin-left: 8.33333%; - margin-top: 10px; - margin-bottom: 10px; } } - -@media screen and (max-width: 520px) { - .m-tiny--1 { - margin-left: 8.33333%; - margin-top: 10px; - margin-bottom: 10px; } } - -.g--2 { - width: 16.66667%; } - -@media screen and (max-width: 1200px) { - .g-med--2 { - width: 16.66667%; } } - -@media screen and (max-width: 900px) { - .g-small--2 { - width: 16.66667%; } } - -@media screen and (max-width: 520px) { - .g-tiny--2 { - width: 16.66667%; } } - -.m--2 { - margin-left: 16.66667%; - margin-top: 20px; - margin-bottom: 20px; } - -@media screen and (max-width: 1200px) { - .m-med--2 { - margin-left: 16.66667%; - margin-top: 20px; - margin-bottom: 20px; } } - -@media screen and (max-width: 900px) { - .m-small--2 { - margin-left: 16.66667%; - margin-top: 10px; - margin-bottom: 10px; } } - -@media screen and (max-width: 520px) { - .m-tiny--2 { - margin-left: 16.66667%; - margin-top: 10px; - margin-bottom: 10px; } } - -.g--3 { - width: 25%; } - -@media screen and (max-width: 1200px) { - .g-med--3 { - width: 25%; } } - -@media screen and (max-width: 900px) { - .g-small--3 { - width: 25%; } } - -@media screen and (max-width: 520px) { - .g-tiny--3 { - width: 25%; } } - -.m--3 { - margin-left: 25%; - margin-top: 20px; - margin-bottom: 20px; } - -@media screen and (max-width: 1200px) { - .m-med--3 { - margin-left: 25%; - margin-top: 20px; - margin-bottom: 20px; } } - -@media screen and (max-width: 900px) { - .m-small--3 { - margin-left: 25%; - margin-top: 10px; - margin-bottom: 10px; } } - -@media screen and (max-width: 520px) { - .m-tiny--3 { - margin-left: 25%; - margin-top: 10px; - margin-bottom: 10px; } } - -.g--4 { - width: 33.33333%; } - -@media screen and (max-width: 1200px) { - .g-med--4 { - width: 33.33333%; } } - -@media screen and (max-width: 900px) { - .g-small--4 { - width: 33.33333%; } } - -@media screen and (max-width: 520px) { - .g-tiny--4 { - width: 33.33333%; } } - -.m--4 { - margin-left: 33.33333%; - margin-top: 20px; - margin-bottom: 20px; } - -@media screen and (max-width: 1200px) { - .m-med--4 { - margin-left: 33.33333%; - margin-top: 20px; - margin-bottom: 20px; } } - -@media screen and (max-width: 900px) { - .m-small--4 { - margin-left: 33.33333%; - margin-top: 10px; - margin-bottom: 10px; } } - -@media screen and (max-width: 520px) { - .m-tiny--4 { - margin-left: 33.33333%; - margin-top: 10px; - margin-bottom: 10px; } } - -.g--5 { - width: 41.66667%; } - -@media screen and (max-width: 1200px) { - .g-med--5 { - width: 41.66667%; } } - -@media screen and (max-width: 900px) { - .g-small--5 { - width: 41.66667%; } } - -@media screen and (max-width: 520px) { - .g-tiny--5 { - width: 41.66667%; } } - -.m--5 { - margin-left: 41.66667%; - margin-top: 20px; - margin-bottom: 20px; } - -@media screen and (max-width: 1200px) { - .m-med--5 { - margin-left: 41.66667%; - margin-top: 20px; - margin-bottom: 20px; } } - -@media screen and (max-width: 900px) { - .m-small--5 { - margin-left: 41.66667%; - margin-top: 10px; - margin-bottom: 10px; } } - -@media screen and (max-width: 520px) { - .m-tiny--5 { - margin-left: 41.66667%; - margin-top: 10px; - margin-bottom: 10px; } } - -.g--6 { - width: 50%; } - -@media screen and (max-width: 1200px) { - .g-med--6 { - width: 50%; } } - -@media screen and (max-width: 900px) { - .g-small--6 { - width: 50%; } } - -@media screen and (max-width: 520px) { - .g-tiny--6 { - width: 50%; } } - -.m--6 { - margin-left: 50%; - margin-top: 20px; - margin-bottom: 20px; } - -@media screen and (max-width: 1200px) { - .m-med--6 { - margin-left: 50%; - margin-top: 20px; - margin-bottom: 20px; } } - -@media screen and (max-width: 900px) { - .m-small--6 { - margin-left: 50%; - margin-top: 10px; - margin-bottom: 10px; } } - -@media screen and (max-width: 520px) { - .m-tiny--6 { - margin-left: 50%; - margin-top: 10px; - margin-bottom: 10px; } } - -.g--7 { - width: 58.33333%; } - -@media screen and (max-width: 1200px) { - .g-med--7 { - width: 58.33333%; } } - -@media screen and (max-width: 900px) { - .g-small--7 { - width: 58.33333%; } } - -@media screen and (max-width: 520px) { - .g-tiny--7 { - width: 58.33333%; } } - -.m--7 { - margin-left: 58.33333%; - margin-top: 20px; - margin-bottom: 20px; } - -@media screen and (max-width: 1200px) { - .m-med--7 { - margin-left: 58.33333%; - margin-top: 20px; - margin-bottom: 20px; } } - -@media screen and (max-width: 900px) { - .m-small--7 { - margin-left: 58.33333%; - margin-top: 10px; - margin-bottom: 10px; } } - -@media screen and (max-width: 520px) { - .m-tiny--7 { - margin-left: 58.33333%; - margin-top: 10px; - margin-bottom: 10px; } } - -.g--8 { - width: 66.66667%; } - -@media screen and (max-width: 1200px) { - .g-med--8 { - width: 66.66667%; } } - -@media screen and (max-width: 900px) { - .g-small--8 { - width: 66.66667%; } } - -@media screen and (max-width: 520px) { - .g-tiny--8 { - width: 66.66667%; } } - -.m--8 { - margin-left: 66.66667%; - margin-top: 20px; - margin-bottom: 20px; } - -@media screen and (max-width: 1200px) { - .m-med--8 { - margin-left: 66.66667%; - margin-top: 20px; - margin-bottom: 20px; } } - -@media screen and (max-width: 900px) { - .m-small--8 { - margin-left: 66.66667%; - margin-top: 10px; - margin-bottom: 10px; } } - -@media screen and (max-width: 520px) { - .m-tiny--8 { - margin-left: 66.66667%; - margin-top: 10px; - margin-bottom: 10px; } } - -.g--9 { - width: 75%; } - -@media screen and (max-width: 1200px) { - .g-med--9 { - width: 75%; } } - -@media screen and (max-width: 900px) { - .g-small--9 { - width: 75%; } } - -@media screen and (max-width: 520px) { - .g-tiny--9 { - width: 75%; } } - -.m--9 { - margin-left: 75%; - margin-top: 20px; - margin-bottom: 20px; } - -@media screen and (max-width: 1200px) { - .m-med--9 { - margin-left: 75%; - margin-top: 20px; - margin-bottom: 20px; } } - -@media screen and (max-width: 900px) { - .m-small--9 { - margin-left: 75%; - margin-top: 10px; - margin-bottom: 10px; } } - -@media screen and (max-width: 520px) { - .m-tiny--9 { - margin-left: 75%; - margin-top: 10px; - margin-bottom: 10px; } } - -.g--10 { - width: 83.33333%; } - -@media screen and (max-width: 1200px) { - .g-med--10 { - width: 83.33333%; } } - -@media screen and (max-width: 900px) { - .g-small--10 { - width: 83.33333%; } } - -@media screen and (max-width: 520px) { - .g-tiny--10 { - width: 83.33333%; } } - -.m--10 { - margin-left: 83.33333%; - margin-top: 20px; - margin-bottom: 20px; } - -@media screen and (max-width: 1200px) { - .m-med--10 { - margin-left: 83.33333%; - margin-top: 20px; - margin-bottom: 20px; } } - -@media screen and (max-width: 900px) { - .m-small--10 { - margin-left: 83.33333%; - margin-top: 10px; - margin-bottom: 10px; } } - -@media screen and (max-width: 520px) { - .m-tiny--10 { - margin-left: 83.33333%; - margin-top: 10px; - margin-bottom: 10px; } } - -.g--11 { - width: 91.66667%; } - -@media screen and (max-width: 1200px) { - .g-med--11 { - width: 91.66667%; } } - -@media screen and (max-width: 900px) { - .g-small--11 { - width: 91.66667%; } } - -@media screen and (max-width: 520px) { - .g-tiny--11 { - width: 91.66667%; } } - -.m--11 { - margin-left: 91.66667%; - margin-top: 20px; - margin-bottom: 20px; } - -@media screen and (max-width: 1200px) { - .m-med--11 { - margin-left: 91.66667%; - margin-top: 20px; - margin-bottom: 20px; } } - -@media screen and (max-width: 900px) { - .m-small--11 { - margin-left: 91.66667%; - margin-top: 10px; - margin-bottom: 10px; } } - -@media screen and (max-width: 520px) { - .m-tiny--11 { - margin-left: 91.66667%; - margin-top: 10px; - margin-bottom: 10px; } } - -.g--12 { - width: 100%; } - -@media screen and (max-width: 1200px) { - .g-med--12 { - width: 100%; } } - -@media screen and (max-width: 900px) { - .g-small--12 { - width: 100%; } } - -@media screen and (max-width: 520px) { - .g-tiny--12 { - width: 100%; } } - -.m--12 { - margin-left: 100%; - margin-top: 20px; - margin-bottom: 20px; } - -@media screen and (max-width: 1200px) { - .m-med--12 { - margin-left: 100%; - margin-top: 20px; - margin-bottom: 20px; } } - -@media screen and (max-width: 900px) { - .m-small--12 { - margin-left: 100%; - margin-top: 10px; - margin-bottom: 10px; } } - -@media screen and (max-width: 520px) { - .m-tiny--12 { - margin-left: 100%; - margin-top: 10px; - margin-bottom: 10px; } } - -@media screen and (max-width: 1200px) { - .m-med--0 { - margin-left: 0; } } - -@media screen and (max-width: 900px) { - .m-small--0 { - margin-left: 0; } } - -@media screen and (max-width: 520px) { - .m-tiny--0 { - margin-left: 0; } } - -[class^="container"] { - display: -webkit-flex; - display: -ms-flexbox; - display: flex; } - -.container--baseline { - -webkit-align-items: baseline; - -ms-flex-align: baseline; - align-items: baseline; } - -.container--center { - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; } - -.container--start { - -webkit-align-items: flex-start; - -ms-flex-align: start; - align-items: flex-start; } - -.container--end { - -webkit-align-items: flex-end; - -ms-flex-align: end; - align-items: flex-end; } - -.card { - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.12), 0 2px 10px 0 rgba(0, 0, 0, 0.09); - border-radius: 3px; } - -.tile, .card { - padding: 20px; - background: white; } - -div, p, h1, h2, h3, h4, h5, h6, a, input, label, header, aside, menu, body { - font-family: Roboto, sans-serif; - color: #212121; } - -h1, h2, h3, h4, h5, h6, p { - margin-bottom: 20px; } - -h1 { - font-size: 30px; } - -h2 { - font-size: 27px; } - -h3 { - font-size: 24px; } - -h4 { - font-size: 21px; } - -h5 { - font-size: 18px; } - -h6 { - font-size: 15px; } - -p, a { - font-size: 16px; } - -.subtitle { - font-style: italic; - color: #919191; } - -body { - background: #efefef; - line-height: 130%; } - -[class^="btn"] { - transition: all 0.3s cubic-bezier(.64, .09, .08, 1); - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); - position: relative; - cursor: pointer; - background-size: 0; - background-repeat: no-repeat; - background-position: 50% 50%; - transition: background-color 0.3s cubic-bezier(.64, .09, .08, 1), box-shadow 0.3s cubic-bezier(.64, .09, .08, 1); - will-change: background-size, background-image; - padding: 10px 20px; - display: inline-block; - font-family: Roboto; - border: 0; } - [class^="btn"]:after { - position: absolute; - content: ''; - transition: none; - background: radial-gradient(circle, white 95%, transparent 95%); - background-size: 0.7%; - background-position: 50% 50%; - background-repeat: no-repeat; } - [class^="btn"]:focus { - outline: none; - background-size: 1000%; - transition: all 1s cubic-bezier(.64, .09, .08, 1); } - -.btn--float { - border-radius: 50%; - width: 50px; - height: 50px; - background-image: radial-gradient(circle, #ffeb3b 1%, #fff387 15%, transparent 30%); - background-color: #ffeb3b; - will-change: box-shadow, background-color; } - .btn--float:hover { - box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); - background-color: #ffee55; } - -.btn--raised, .modal-trigger, .modal-trigger:after { - border-radius: 1.98px; - background-color: #28e1bd; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); - background-image: radial-gradient(circle, #28e1bd 1%, #6bebd1 15%, transparent 30%); - background-color: #28e1bd; - will-change: box-shadow, background-color; } - .btn--raised:hover, .modal-trigger:hover, .modal-trigger:hover:after { - box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); - background-color: #3ee4c4; } - -.btn--flat { - background-image: radial-gradient(circle, #28e1bd 1%, #6bebd1 15%, transparent 30%); - background-color: #28e1bd; - background-color: #efefef; - box-shadow: none; } - -a { - background: linear-gradient(to top, rgba(40, 225, 189, 0.8) 50%, rgba(255, 255, 255, 0) 50%); - background-size: 100% 200%; - background-position: 0 10%; - background-repeat: no-repeat; - text-decoration: none; - color: inherit; - transition: background-position 0.3s cubic-bezier(.64, .09, .08, 1); - will-change: background-position; } - a:active { - color: inherit; } - a:hover { - background-position: 0 100%; } - -table { - width: 100%; } - -.table--header { - color: #474747; - font-size: 16px; - line-height: 52px; } - -tr { - font-size: 17px; - line-height: 52px; - border-bottom: solid 1px #ebebeb; - will-change: background; } - tr:not(.table--header):hover { - background: #ebebeb; } - -td:first-child { - padding-left: 40px; } -td:last-child { - padding-right: 40px; } - -header { - width: 100%; - padding-top: 20px; - padding-bottom: 20px; - background: #1abc9c; - margin-bottom: 20px; } - header h1, header h2, header h3 { - color: white; } - -.nav--horizontal { - display: -webkit-flex; - display: -ms-flexbox; - display: flex; } - .nav--horizontal ul, .nav--horizontal ol { - margin-left: 0; } - .nav--horizontal > ul, .nav--horizontal > li { - display: -webkit-flex; - display: -ms-flexbox; - display: flex; } - .nav--horizontal a { - display: inline-block; } - -.nav--vertical ul, .nav--vertical ol { - margin-left: 0; } -.nav--vertical ul, .nav--vertical li, .nav--vertical a { - display: inline-block; - float: left; - clear: left; } -.nav--vertical li:first-child a { - margin-bottom: 7px; } -.nav--vertical li:last-child a { - margin-top: 7px; } -.nav--vertical li a { - margin-top: 7px; - margin-bottom: 7px; } - -.logo-area { - width: 100%; - height: 100px; - border-bottom: solid 1px #e0e0e0; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - color: #474747; } - -.nav--super-vertical { - position: fixed; - height: 100%; - background: #efefef; - z-index: 7; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } - .nav--super-vertical a, .nav--super-vertical label { - width: 100%; - display: block; - text-decoration: none; - color: #474747; - cursor: pointer; - font-weight: 500; - padding: 20px 24px; - transition: none; - background-image: none; } - .nav--super-vertical a:hover, .nav--super-vertical label:hover { - background: #e0e0e0; } - .nav--super-vertical input { - display: none; } - .nav--super-vertical input:checked + label { - transition: background 0.2s cubic-bezier(.64, .09, .08, 1), color 0.2s cubic-bezier(.64, .09, .08, 1); - background: #e0e0e0; } - .nav--super-vertical input:checked ~ .nav-collapsible-links { - height: auto; - -webkit-transform: scaleY(1); - transform: scaleY(1); } - .nav--super-vertical input:checked ~ .nav-collapsible-links a { - height: 54px; } - -.nav-collapsible-links { - -webkit-transform: scaleY(0); - transform: scaleY(0); - -webkit-transform-origin: 0 0; - transform-origin: 0 0; - transition: -webkit-transform 0.3s cubic-bezier(.64, .09, .08, 1); - transition: transform 0.3s cubic-bezier(.64, .09, .08, 1); } - .nav-collapsible-links a { - padding: 0 24px 0 34px; - height: 0; - font-weight: 400; - transition: height 0.3s cubic-bezier(.64, .09, .08, 1); - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; } - -#nav--super-vertical-responsive, #nav--super-vertical-responsive + label, #nav--horizontal-responsive, #nav--horizontal-responsive + label { - display: none; } - -@media screen and (max-width: 1200px) { - .nav--super-vertical { - padding-top: 40px; - -webkit-transform: translateX(-100%); - transform: translateX(-100%); - transition: -webkit-transform 0.3s cubic-bezier(.64, .09, .08, 1); - transition: transform 0.3s cubic-bezier(.64, .09, .08, 1); } - #nav--super-vertical-responsive + label { - display: block; - position: fixed; - z-index: 8; - top: 0; - left: 0; - padding: 10px; - background: #efefef; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.12), 0 2px 10px 0 rgba(0, 0, 0, 0.09); - cursor: pointer; - transition: background 0.3s cubic-bezier(.64, .09, .08, 1), color 0.3s cubic-bezier(.64, .09, .08, 1); } - #nav--super-vertical-responsive:checked + label { - background: #1abc9c; - color: white; } - #nav--super-vertical-responsive:checked ~ .nav--super-vertical { - -webkit-transform: translateX(0); - transform: translateX(0); } } - -@media screen and (max-width: 900px) { - .nav--horizontal { - position: absolute; - top: 0; - left: 0; - width: 100%; - z-index: 7; - -webkit-transform: translateY(-100%); - transform: translateY(-100%); - transition: -webkit-transform 0.3s cubic-bezier(.64, .09, .08, 1); - transition: transform 0.3s cubic-bezier(.64, .09, .08, 1); } - .nav--horizontal ul, .nav--horizontal li, .nav--horizontal a { - width: 100%; - display: block; - margin: 0; } - .nav--horizontal a { - line-height: 40px; } - .nav--horizontal > ul { - padding-top: 50px; - background: #efefef; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.12), 0 2px 10px 0 rgba(0, 0, 0, 0.09); } - #nav--horizontal-responsive + label { - display: block; - position: fixed; - z-index: 8; - top: 0; - left: 0; - padding: 10px; - background: #efefef; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.12), 0 2px 10px 0 rgba(0, 0, 0, 0.09); - cursor: pointer; - transition: background 0.3s cubic-bezier(.64, .09, .08, 1), color 0.3s cubic-bezier(.64, .09, .08, 1); } - #nav--horizontal-responsive:checked + label { - background: #1abc9c; - color: white; } - #nav--horizontal-responsive:checked ~ .nav--horizontal { - -webkit-transform: translateY(0); - transform: translateY(0); } } - -header .nav--vertical a, header .nav--horizontal a { - color: #1abc9c; - background: white; - padding: 10px; - transition: none; - will-change: background; } - header .nav--vertical a:hover, header .nav--horizontal a:hover { - background: #e5e5e5; } - -.dropdown { - position: relative; } - .dropdown ul { - position: absolute; - background: white; - left: 0; - transition: all 0.3s ease; - -webkit-transform: scale(0); - transform: scale(0); - -webkit-transform-origin: 0 0; - transform-origin: 0 0; - z-index: 2; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.12), 0 2px 10px 0 rgba(0, 0, 0, 0.09); - width: 100%; } - .dropdown ul li { - width: 100%; - margin: 0; - padding: 0; } - .dropdown ul li a { - width: 100%; - padding: 8px 10px; - display: inline-block; - margin: 0; - border-radius: 0; } - .dropdown:hover ul { - -webkit-transform: scale(1); - transform: scale(1); } - -ul, ol { - margin-left: 40px; } - ul li, ol li { - margin-top: 10px; } - -ol { - list-style-type: decimal; - white-space: nowrap; } - -footer { - display: block; - width: 100%; - background: #28e1bd; - padding-top: 20px; - padding-bottom: 20px; } - -input[id^="modal-"] { - display: none; } - input[id^="modal-"]:checked + label { - outline: none; - background-size: 1000%; - transition: all 1s cubic-bezier(.64, .09, .08, 1); } - input[id^="modal-"]:checked + label:before { - content: ''; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.4); - transition: all 0.3s cubic-bezier(.64, .09, .08, 1); - z-index: 9; } - input[id^="modal-"]:checked ~ .modal-content { - transition: opacity 0.3s cubic-bezier(.64, .09, .08, 1); - opacity: 1; - display: block; - height: auto; - width: auto; - padding: 40px; - left: 50%; - top: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - z-index: 10; } - input[id^="modal-"]:checked ~ .modal-content * { - height: auto; - width: auto; } - -.modal-trigger { - cursor: pointer; - transition: all 0.3s cubic-bezier(.64, .09, .08, 1); - padding: 10px 20px; - background-size: 1%; - background-repeat: no-repeat; - background-position: 50% 50%; } - .modal-trigger:after { - white-space: nowrap; - padding: 10px; - cursor: pointer; - transition: all 0.2s cubic-bezier(.64, .09, .08, 1); - background-image: none; } - -.modal-content { - position: fixed; - opacity: 0; - height: 0; - background: white; - border-radius: 3px; } - .modal-content * { - width: 0; - height: 0; } - -.tooltip { - position: relative; } - .tooltip:hover:after { - position: absolute; - content: attr(data-text); - background: #9e9e9e; - border-radius: 3px; - padding: 8px; - bottom: -2em; - left: 50%; - -webkit-transform: translateX(-50%); - transform: translateX(-50%); - z-index: 2; } - -.tabs { - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - padding: 0; } - -.tabs input[type="radio"][name="tabs"] { - position: absolute; - z-index: -1; } - .tabs input[type="radio"][name="tabs"]:checked + .tab-label-content label { - color: white; } - .tabs input[type="radio"][name="tabs"]:checked + .tab-label-content .tab-content { - display: block; } - .tabs input[type="radio"][name="tabs"]:first-of-type:checked ~ .slide { - left: 0; } - -.tabs input[type="radio"][name="tabs"]:nth-of-type(1):checked ~ .slide-demo { - left: 0%; - left: calc((100% / 3) * 0); } -.tabs input[type="radio"][name="tabs"]:nth-of-type(2):checked ~ .slide-demo { - left: 33.33333%; - left: calc((100% / 3) * 1); } -.tabs input[type="radio"][name="tabs"]:nth-of-type(3):checked ~ .slide-demo { - left: 66.66667%; - left: calc((100% / 3) * 2); } - -.slide-demo { - width: 33.33333%; - width: calc(100% / 3); } - -.tab-label-content:nth-of-type(1) .tab-content { - left: 0%; } -.tab-label-content:nth-of-type(2) .tab-content { - left: -100%; } -.tab-label-content:nth-of-type(3) .tab-content { - left: -200%; } - -.tab-content { - width: 300%; } - -.tabs label { - cursor: pointer; - color: rgba(255, 255, 255, 0.8); - background-color: #1abc9c; - box-sizing: border-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - text-align: center; - height: 56px; - transition: color 0.2s cubic-bezier(.64, .09, .08, 1); - will-change: color; - width: 100%; } - -.slide { - background: #ffeb3b; - height: 4px; - position: absolute; - left: 0; - top: 52px; - transition: left 0.3s cubic-bezier(.64, .09, .08, 1); - will-change: left; } - -.tab-label-content { - width: 100%; } - .tab-label-content .tab-content { - padding: 10px; - position: relative; - padding: 20px; - display: none; } - -.card.tabs .tab-label-content:first-of-type label { - border-top-left-radius: 3px; } -.card.tabs .tab-label-content:nth-last-child(2) label { - border-top-right-radius: 3px; } - -label { - color: #2e2e2e; } - -input[type="email"], input[type="text"], input[type="password"], input[type="textarea"] { - margin-bottom: 40px; - width: 200px; - display: block; - border: none; - padding: 10px 0; - border-bottom: solid 1px #1abc9c; - will-change: background-position; - transition: all 0.3s cubic-bezier(.64, .09, .08, 1); - background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 96%); - background-position: -200px 0; - background-size: 200px 100%; - background-repeat: no-repeat; - color: #0e6252; } - input[type="email"]:focus, input[type="email"]:valid, input[type="text"]:focus, input[type="text"]:valid, input[type="password"]:focus, input[type="password"]:valid, input[type="textarea"]:focus, input[type="textarea"]:valid { - box-shadow: none; - outline: none; - background-position: 0 0; } - input[type="email"]:focus::-webkit-input-placeholder, input[type="email"]:focus::-moz-input-placeholder, input[type="email"]:focus:-moz-input-placeholder, input[type="email"]:valid::-webkit-input-placeholder, input[type="email"]:valid::-moz-input-placeholder, input[type="email"]:valid:-moz-input-placeholder, input[type="text"]:focus::-webkit-input-placeholder, input[type="text"]:focus::-moz-input-placeholder, input[type="text"]:focus:-moz-input-placeholder, input[type="text"]:valid::-webkit-input-placeholder, input[type="text"]:valid::-moz-input-placeholder, input[type="text"]:valid:-moz-input-placeholder, input[type="password"]:focus::-webkit-input-placeholder, input[type="password"]:focus::-moz-input-placeholder, input[type="password"]:focus:-moz-input-placeholder, input[type="password"]:valid::-webkit-input-placeholder, input[type="password"]:valid::-moz-input-placeholder, input[type="password"]:valid:-moz-input-placeholder, input[type="textarea"]:focus::-webkit-input-placeholder, input[type="textarea"]:focus::-moz-input-placeholder, input[type="textarea"]:focus:-moz-input-placeholder, input[type="textarea"]:valid::-webkit-input-placeholder, input[type="textarea"]:valid::-moz-input-placeholder, input[type="textarea"]:valid:-moz-input-placeholder { - color: #1abc9c; - font-size: 11px; - -webkit-transform: translateY(-20px); - transform: translateY(-20px); - visibility: visible !important; } -input::-webkit-input-placeholder { - transition: all 0.2s cubic-bezier(.64, .09, .08, 1); - will-change: transform, color, font-size; } - -input[type="checkbox"]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id^="lightbox-"]) { - position: relative; - cursor: pointer; } - input[type="checkbox"]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id^="lightbox-"]):before { - content: ''; - width: 16px; - height: 16px; - border: solid 2px #1abc9c; - border-radius: 3px; - background: white; - position: absolute; } - input[type="checkbox"]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id^="lightbox-"]):after { - content: '✓'; - color: white; - background: #1abc9c; - position: absolute; - top: 0; - left: 0; - width: 16px; - height: 16px; - border: solid 2px #1abc9c; - border-radius: 3px; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - opacity: 0; - transition: opacity 0.3s cubic-bezier(.64, .09, .08, 1); - will-change: opacity; } - input[type="checkbox"]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id^="lightbox-"]):checked:after { - opacity: 1; } - input[type="checkbox"]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id^="lightbox-"]):focus { - outline: none; } - -input[type="radio"] { - position: relative; - top: 2px; - left: 2px; - margin: 0 8px; - cursor: pointer; } - input[type="radio"]:before { - content: ''; - background-color: white; - width: 16px; - height: 16px; - border-radius: 50%; - border: solid 2px #1abc9c; - display: inline-block; - position: absolute; - top: -2px; - left: -2px; - background-image: radial-gradient(circle, #1abc9c 40%, white 50%); - background-size: 0; - background-position: 50% 50%; - background-repeat: no-repeat; - transition: all 0.3s cubic-bezier(.64, .09, .08, 1); - will-change: background-size; - z-index: 2; } - input[type="radio"]:after { - content: ''; - width: 16px; - height: 16px; - background: white; - border-radius: 50%; - position: absolute; - transition: all 0.3s cubic-bezier(.64, .09, .08, 1); } - input[type="radio"]:checked:before { - background-size: 14px 14px; } - input[type="radio"]:focus { - outline: none; } - -select { - border: none; - border-bottom: solid 1px #9e9e9e; - color: #212121; - padding: 6px; - cursor: pointer; } - -input[type=range] { - -webkit-appearance: none; } - input[type=range]:focus { - outline: none; } - -input[type=range]::-webkit-slider-runnable-track { - height: 3px; - cursor: pointer; - background: #9e9e9e; } - -input[type=range]::-webkit-slider-thumb { - height: 16px; - width: 16px; - border-radius: 50%; - background: #2ecc71; - cursor: pointer; - -webkit-appearance: none; - margin-top: -6px; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.12), 0 2px 10px 0 rgba(0, 0, 0, 0.09); } - -input[type=range]::-moz-range-track { - height: 3px; - cursor: pointer; - background: #9e9e9e; } - -input[type=range]::-moz-range-thumb { - height: 16px; - width: 16px; - border-radius: 50%; - border: none; - background: #2ecc71; - cursor: pointer; } - -input[type=range]::-ms-track { - cursor: pointer; - background: transparent; - border-color: transparent; - color: transparent; } - -input[type=range]::-ms-fill-lower { - background: #2ecc71; } - -input[type=range]::-ms-fill-upper { - background: #9e9e9e; } - -input[type=range]::-ms-thumb { - background: #2ecc71; } - -.toggle { - display: none; } - .toggle:checked + label { - background: #93e7b6; } - .toggle:checked + label:after { - background: #2ecc71; - margin-left: 18px; } - -.toggle + label { - position: absolute; - width: 30px; - height: 6px; - margin-top: 12px; - background: #9e9e9e; - transition: background 0.3s cubic-bezier(.64, .09, .08, 1); - will-change: background; } - .toggle + label:after { - position: absolute; - content: ''; - width: 14px; - height: 14px; - border-radius: 50%; - background: #dedede; - display: inline-block; - cursor: pointer; - margin-top: -4px; - margin-left: -1px; - transition: all 0.3s ease; - will-change: background, margin-left; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.12), 0 2px 10px 0 rgba(0, 0, 0, 0.09); } - -label[for^="lightbox-"] { - cursor: pointer; - width: 100%; - transition: none; } - -input[id^="lightbox-"] { - display: none; } - -input[id^="lightbox-"]:checked { - display: block; - position: absolute; - top: 50%; - left: 50%; } - input[id^="lightbox-"]:checked:before { - content: ''; - position: fixed; - z-index: 9; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.4); } - input[id^="lightbox-"]:checked + label { - top: 50%; - left: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - width: 50vw; - position: fixed; - z-index: 10; } - -.right { - float: right; } - -.left { - float: left; } - -.no-pad { - padding: 0; } - -.no-margin-vertical { - margin-top: 0; - margin-bottom: 0; } - -.no-margin { - margin: 0; } - -.inline-block { - display: inline-block; } - -.fade-in-from-top { - opacity: 0; - -webkit-transform: translateY(-6px); - transform: translateY(-6px); - animation: fadeInVert 0.5s ease-out forwards; - -webkit-animation: fadeInVert 0.5s ease-out forwards; } - -.fade-in-from-bottom { - opacity: 0; - -webkit-transform: translateY(6px); - transform: translateY(6px); - animation: fadeInVert 0.5s ease-out forwards; - -webkit-animation: fadeInVert 0.5s ease-out forwards; } - -@keyframes fadeInVert { - to { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); } } - -@-webkit-keyframes fadeInVert { - to { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); } } - -.fade-in-from-left { - opacity: 0; - -webkit-transform: translateX(-6px); - transform: translateX(-6px); - animation: fadeInHoriz 0.5s ease-out forwards; - -webkit-animation: fadeInHoriz 0.5s ease-out forwards; } - -.fade-in-from-right { - opacity: 0; - -webkit-transform: translateX(6px); - transform: translateX(6px); - animation: fadeInHoriz 0.5s ease-out forwards; - -webkit-animation: fadeInHoriz 0.5s ease-out forwards; } - -@keyframes fadeInHoriz { - to { - opacity: 1; - -webkit-transform: translateX(0); - transform: translateX(0); } } - -@-webkit-keyframes fadeInHoriz { - to { - opacity: 1; - -webkit-transform: translateX(0); - transform: translateX(0); } } - -.anim-delay-5 { - animation-delay: 500ms; - -webkit-animation-delay: 500ms; } - -.anim-delay-10 { - animation-delay: 1000ms; - -webkit-animation-delay: 1000ms; } - -.anim-delay-15 { - animation-delay: 1500ms; - -webkit-animation-delay: 1500ms; } - -.anim-delay-20 { - animation-delay: 2000ms; - -webkit-animation-delay: 2000ms; } - -.anim-delay-25 { - animation-delay: 2500ms; - -webkit-animation-delay: 2500ms; } - -.anim-delay-30 { - animation-delay: 3000ms; - -webkit-animation-delay: 3000ms; } - -.anim-delay-35 { - animation-delay: 3500ms; - -webkit-animation-delay: 3500ms; } - -.anim-delay-40 { - animation-delay: 4000ms; - -webkit-animation-delay: 4000ms; } - -.anim-delay-45 { - animation-delay: 4500ms; - -webkit-animation-delay: 4500ms; } - -.anim-delay-50 { - animation-delay: 5000ms; - -webkit-animation-delay: 5000ms; } - -img { - width: 100%; } - -.alert-wrap { - position: relative; } - -.alert { - padding-bottom: 50px; } - -#alert-check { - display: none; } - #alert-check:checked ~ div, #alert-check:checked ~ label { - display: none; } - #alert-check + label { - position: absolute; - right: 16px; - bottom: 10px; - cursor: pointer; } - -[id^="collapsible-"] { - display: none; } - [id^="collapsible-"]:checked ~ [class^="collapsible-"][class$="area"] { - -webkit-transform: scaleY(1); - transform: scaleY(1); - height: auto; - padding: 15px 20px; - margin-bottom: 20px; } - [id^="collapsible-"]:checked + label:before { - margin-top: 5px; - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); } - [id^="collapsible-"]:checked + label:after { - margin-top: 5px; - -webkit-transform: rotate(45deg) translate(4px, -3px); - transform: rotate(45deg) translate(4px, -3px); } - -label[for^="collapsible-"] { - width: 100%; - cursor: pointer; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - padding: 15px 20px; - border-bottom: solid 1px #ebebeb; - color: #474747; - border-radius: 3px; } - label[for^="collapsible-"]:before, label[for^="collapsible-"]:after { - content: ''; - position: absolute; - right: 20px; - width: 2px; - height: 8px; - background: #9e9e9e; - transition: all 0.3s ease; } - label[for^="collapsible-"]:before { - margin-top: 2px; - -webkit-transform: rotate(50deg); - transform: rotate(50deg); } - label[for^="collapsible-"]:after { - margin-top: 6px; - -webkit-transform: rotate(-50deg); - transform: rotate(-50deg); } - -[class^="collapsible-"][class$="area"] { - -webkit-transform: scaleY(0); - transform: scaleY(0); - -webkit-transform-origin: 0 0; - transform-origin: 0 0; - height: 0; - will-change: height, transform; - transition: all 0.3s ease; - padding-left: 20px; } diff --git a/prod/css/tooltip.css b/prod/css/tooltip.css deleted file mode 100644 index 8b56a22..0000000 --- a/prod/css/tooltip.css +++ /dev/null @@ -1,13 +0,0 @@ -.tooltip { - position: relative; } - .tooltip:hover:after { - position: absolute; - content: attr(data-text); - background: #9e9e9e; - border-radius: 3px; - padding: 8px; - bottom: -2em; - left: 50%; - -webkit-transform: translateX(-50%); - transform: translateX(-50%); - z-index: 2; } diff --git a/prod/css/type.css b/prod/css/type.css deleted file mode 100644 index 30de20d..0000000 --- a/prod/css/type.css +++ /dev/null @@ -1,32 +0,0 @@ -@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500,700|Gentium+Book+Basic:400,700); -div, p, h1, h2, h3, h4, h5, h6, a, input, label, header, aside, menu, body { - font-family: Roboto, sans-serif; - color: #212121; } - -h1, h2, h3, h4, h5, h6, p { - margin-bottom: 20px; } - -h1 { - font-size: 30px; } - -h2 { - font-size: 27px; } - -h3 { - font-size: 24px; } - -h4 { - font-size: 21px; } - -h5 { - font-size: 18px; } - -h6 { - font-size: 15px; } - -p, a { - font-size: 16px; } - -.subtitle { - font-style: italic; - color: #919191; } diff --git a/prod/css/utility.css b/prod/css/utility.css deleted file mode 100644 index 3326be7..0000000 --- a/prod/css/utility.css +++ /dev/null @@ -1,18 +0,0 @@ -.right { - float: right; } - -.left { - float: left; } - -.no-pad { - padding: 0; } - -.no-margin-vertical { - margin-top: 0; - margin-bottom: 0; } - -.no-margin { - margin: 0; } - -.inline-block { - display: inline-block; } diff --git a/prod/img/1.jpg b/prod/img/1.jpg deleted file mode 100644 index c33184e..0000000 Binary files a/prod/img/1.jpg and /dev/null differ diff --git a/prod/img/2.jpg b/prod/img/2.jpg deleted file mode 100644 index f4ad36a..0000000 Binary files a/prod/img/2.jpg and /dev/null differ diff --git a/prod/img/3.jpg b/prod/img/3.jpg deleted file mode 100644 index 78f5465..0000000 Binary files a/prod/img/3.jpg and /dev/null differ diff --git a/prod/img/img.jpg b/prod/img/img.jpg deleted file mode 100644 index 8e89c05..0000000 Binary files a/prod/img/img.jpg and /dev/null differ diff --git a/prod/img/spinPig.jpg b/prod/img/spinPig.jpg index fb1feb0..98a517b 100644 Binary files a/prod/img/spinPig.jpg and b/prod/img/spinPig.jpg differ diff --git a/prod/index.html b/prod/index.html index 96cab90..490b6c1 100644 --- a/prod/index.html +++ b/prod/index.html @@ -1,238 +1,90 @@ - + + + + + -