first commit
This commit is contained in:
84
assets/scss/_animatedtext.scss
Normal file
84
assets/scss/_animatedtext.scss
Normal file
@@ -0,0 +1,84 @@
|
||||
.jt {
|
||||
position: relative;
|
||||
font-size: 20vmin;
|
||||
font-family: 'Staatliches', sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-display: swap;
|
||||
text-shadow: 0 0 10px tomato;
|
||||
}
|
||||
|
||||
.jt__row {
|
||||
display: block;
|
||||
}
|
||||
.jt__row:nth-child(1) {
|
||||
clip-path: polygon(-10% 75%, 110% 75%, 110% 110%, -10% 110%);
|
||||
}
|
||||
.jt__row:nth-child(2) {
|
||||
clip-path: polygon(-10% 50%, 110% 50%, 110% 75.3%, -10% 75.3%);
|
||||
}
|
||||
.jt__row:nth-child(3) {
|
||||
clip-path: polygon(-10% 25%, 110% 25%, 110% 50.3%, -10% 50.3%);
|
||||
}
|
||||
.jt__row:nth-child(4) {
|
||||
clip-path: polygon(-10% 0%, 110% 0%, 110% 25.3%, -10% 25.3%);
|
||||
}
|
||||
|
||||
.jt__row.jt__row--sibling {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
user-select: none;
|
||||
witdh:800px;
|
||||
}
|
||||
|
||||
.jt__text {
|
||||
display: block;
|
||||
transform-origin: bottom left;
|
||||
animation: moveIn 2s 0s cubic-bezier(.36,0,.06,1) alternate infinite ;
|
||||
}
|
||||
.jt__row:nth-child(1) .jt__text {
|
||||
transform: translateY(-0.1em);
|
||||
}
|
||||
.jt__row:nth-child(2) .jt__text {
|
||||
transform: translateY(-0.3em) scaleY(1.1);
|
||||
}
|
||||
.jt__row:nth-child(3) .jt__text {
|
||||
transform: translateY(-0.5em) scaleY(1.2) ;
|
||||
}
|
||||
.jt__row:nth-child(4) .jt__text {
|
||||
transform: translateY(-0.7em) scaleY(1.3) ;
|
||||
}
|
||||
.jt__row:nth-child(5) .jt__text {
|
||||
transform: translateY(-0.9em) scaleY(1.4) ;
|
||||
}
|
||||
.jt__row:nth-child(6) .jt__text {
|
||||
transform: translateY(-1.1em) scaleY(1.5) ;
|
||||
}
|
||||
|
||||
@keyframes moveIn {
|
||||
50%, 100% {
|
||||
transform: translateY(0em)
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
filter: blur(10px);
|
||||
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
filter: blur(0px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.debug .jt__row:nth-child(even) {
|
||||
color: black;
|
||||
background: white;
|
||||
}
|
||||
.debug .jt__row:nth-child(odd) {
|
||||
color: white;
|
||||
background: black;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box }
|
||||
12
assets/scss/_buttons.scss
Normal file
12
assets/scss/_buttons.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
.btn-primary {
|
||||
background: $primary-color;
|
||||
color: $white;
|
||||
border: 1px solid $primary-color;
|
||||
font-family: $primary-font;
|
||||
font-size: 14px;
|
||||
padding: 15px 40px;
|
||||
transition: 0.3s $site-ease;
|
||||
&:hover {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
}
|
||||
183
assets/scss/_common.scss
Normal file
183
assets/scss/_common.scss
Normal file
@@ -0,0 +1,183 @@
|
||||
.section {
|
||||
padding: 100px 0;
|
||||
@include desktop {
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
&-title {
|
||||
text-align: center;
|
||||
margin-bottom: 100px;
|
||||
position: relative;
|
||||
@include mobile {
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 5px;
|
||||
background: $text-color;
|
||||
border-radius: 5px;
|
||||
bottom: -25px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 40px;
|
||||
color: #252525;
|
||||
margin-bottom: 15px;
|
||||
|
||||
@include tablet {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 40px;
|
||||
color: $white;
|
||||
margin-bottom: 15px;
|
||||
|
||||
@include tablet {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
width: 66%;
|
||||
margin: 0 auto;
|
||||
|
||||
@include mobile-xs {
|
||||
width: 72%;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-header {
|
||||
text-align: center;
|
||||
padding-bottom: 100px;
|
||||
@include desktop-lg {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
@include tablet {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 40px;
|
||||
color: #252525;
|
||||
margin-bottom: 15px;
|
||||
|
||||
@include tablet {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
width: 66%;
|
||||
margin: 0 auto;
|
||||
|
||||
@include mobile-xs {
|
||||
width: 72%;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.about {
|
||||
padding-top: 150px;
|
||||
@include mobile {
|
||||
padding-top: 120px;
|
||||
}
|
||||
}
|
||||
// bloge page-title
|
||||
.page-title {
|
||||
padding: 200px 0 50px;
|
||||
text-align: center;
|
||||
@include desktop-lg {
|
||||
padding: 130px 0 50px;
|
||||
}
|
||||
@include desktop {
|
||||
padding: 140px 0 50px;
|
||||
}
|
||||
@include mobile {
|
||||
padding: 110px 0 30px;
|
||||
}
|
||||
@include mobile-xs {
|
||||
padding: 110px 0 0px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
font-family: $primary-font;
|
||||
|
||||
a {
|
||||
font-weight: 600;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.privacy-policy {
|
||||
background-color: $border-color;
|
||||
padding: 150px 0;
|
||||
@include mobile {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
&-content {
|
||||
padding: 50px;
|
||||
background-color: $white;
|
||||
border-radius: 20px;
|
||||
@include desktop {
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
&-item {
|
||||
margin-bottom: 40px;
|
||||
h2 {
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
line-height: 26px;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 20px;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
48
assets/scss/_mixins.scss
Normal file
48
assets/scss/_mixins.scss
Normal file
@@ -0,0 +1,48 @@
|
||||
@mixin mobile-xs{
|
||||
@media(max-width:400px){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin mobile{
|
||||
@media(max-width:575px){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin tablet{
|
||||
@media(max-width:767px){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin desktop{
|
||||
@media(max-width:991px){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin desktop-lg{
|
||||
@media(max-width:1199px){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin desktop-xl{
|
||||
@media(max-width:1400px){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin desktop-1500{
|
||||
@media(min-width:1500px){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin desktop-4k{
|
||||
@media(min-width:2000px){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin size($size){
|
||||
width: $size; height: $size;
|
||||
}
|
||||
50
assets/scss/_typography.scss
Normal file
50
assets/scss/_typography.scss
Normal file
@@ -0,0 +1,50 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400|Open+Sans:300,400,600,700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
|
||||
|
||||
body {
|
||||
font-family: $secondary-font;
|
||||
font-size: 16px;
|
||||
color: $text-color;
|
||||
background: $body-color;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $text-color-dark;
|
||||
font-family: $primary-font;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
color: $text-color;
|
||||
line-height: 26px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 44px;
|
||||
line-height: 58px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 33px;
|
||||
line-height: 45px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 19px;
|
||||
font-weight: 400;
|
||||
color: $text-color-dark;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
17
assets/scss/_variables.scss
Normal file
17
assets/scss/_variables.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
//site color variables
|
||||
$body-color: #FFF;
|
||||
$bg-color:#DFF1F4;
|
||||
$primary-color: #007af5;
|
||||
$secondary-color: #5477F8;
|
||||
$text-color: #808080;
|
||||
$text-color-dark:#252525;
|
||||
$site-ease: cubic-bezier(0.77, 0, 0.175, 1);
|
||||
$border-color: #EDEDF4;
|
||||
|
||||
// solid colors
|
||||
$white: #fff;
|
||||
$black: #000;
|
||||
|
||||
// Font Variables
|
||||
$primary-font: 'Montserrat', sans-serif;
|
||||
$secondary-font: 'Open Sans', sans-serif;
|
||||
228
assets/scss/components/_blog.scss
Normal file
228
assets/scss/components/_blog.scss
Normal file
@@ -0,0 +1,228 @@
|
||||
.blog {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
@include tablet {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
@include mobile {
|
||||
padding: 30px 0;
|
||||
}
|
||||
&-post {
|
||||
margin-bottom: 30px;
|
||||
@include mobile {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: 5px 5px 0 0;
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
padding: 30px 20px;
|
||||
border-left: 1px solid #ececec;
|
||||
border-right: 1px solid #ececec;
|
||||
border-bottom: 1px solid #ececec;
|
||||
border-radius: 0px 5px 5px 5px;
|
||||
|
||||
h3 {
|
||||
@include mobile-xs {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
color: $text-color-dark;
|
||||
text-transform: capitalize;
|
||||
|
||||
@include mobile-xs {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
a.more {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
font-family: $primary-font;
|
||||
text-transform: capitalize;
|
||||
transition: 0.3s $site-ease;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-pagination {
|
||||
margin-top: 40px;
|
||||
|
||||
.pagination {
|
||||
justify-content: center;
|
||||
|
||||
.page-item {
|
||||
&:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.page-link {
|
||||
font-size: 18px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
padding: 12px 20px;
|
||||
color: $text-color-dark;
|
||||
font-weight: 300;
|
||||
transition: all 0.3s ease;
|
||||
font-family: $primary-font;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.page-link {
|
||||
background-color: $primary-color;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post {
|
||||
text-align: center;
|
||||
padding-top: 150px;
|
||||
padding-bottom: 90px;
|
||||
|
||||
@include desktop {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
@include mobile {
|
||||
padding-top: 110px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
&-title {
|
||||
padding-bottom: 20px;
|
||||
|
||||
h2 {
|
||||
font-size: 33px;
|
||||
line-height: 35px;
|
||||
|
||||
@include mobile {
|
||||
font-size: 30px;
|
||||
}
|
||||
@include mobile-xs {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-meta {
|
||||
padding-bottom: 50px;
|
||||
@include mobile {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-image {
|
||||
img {
|
||||
max-width: 100%;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&-body {
|
||||
text-align: left;
|
||||
padding-top: 30px;
|
||||
p {
|
||||
line-height: 32px;
|
||||
margin-bottom: 30px;
|
||||
@include mobile-xs {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
p{
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
color: $text-color-dark;
|
||||
margin-bottom: 40px;
|
||||
font-family: $primary-font;
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
@include mobile-xs {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
li {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-list {
|
||||
text-align: left;
|
||||
li {
|
||||
font-size: 22px;
|
||||
@include mobile-xs {
|
||||
font-size: 18px;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
p{
|
||||
.tags{
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
transition: all .3s ease-in-out;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
&:nth-child(2) {
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
&:hover{
|
||||
color: #0056b3;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
60
assets/scss/components/_clients.scss
Normal file
60
assets/scss/components/_clients.scss
Normal file
@@ -0,0 +1,60 @@
|
||||
.clients {
|
||||
position: relative;
|
||||
padding: 50px 0;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
background-color: #8080802e;
|
||||
margin: 100px 0;
|
||||
@include desktop {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
@include tablet {
|
||||
margin: 50px 0 30px 0;
|
||||
}
|
||||
&-slider {
|
||||
position: relative;
|
||||
padding: 50px 0;
|
||||
@include mobile {
|
||||
padding: 20px 0;
|
||||
}
|
||||
&-item {
|
||||
position: relative;
|
||||
outline: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
max-width: 80%;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.slick-dots {
|
||||
position: absolute;
|
||||
bottom: -50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@include mobile {
|
||||
bottom: -30px;
|
||||
}
|
||||
li {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
button {
|
||||
background: $text-color;
|
||||
text-indent: -999999999px;
|
||||
border-radius: 50%;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.slick-dots li.slick-active button {
|
||||
background: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
112
assets/scss/components/_contact.scss
Normal file
112
assets/scss/components/_contact.scss
Normal file
@@ -0,0 +1,112 @@
|
||||
.contact {
|
||||
.container-fluid {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
&-aria {
|
||||
background: #222029;
|
||||
padding: 100px;
|
||||
@include desktop {
|
||||
text-align: center;
|
||||
padding: 50px;
|
||||
}
|
||||
@include mobile {
|
||||
padding: 30px;
|
||||
}
|
||||
@include mobile-xs {
|
||||
padding: 30px 10px;
|
||||
}
|
||||
a:link {
|
||||
text-decoration: none;
|
||||
}
|
||||
h3 {
|
||||
font-size: 25px;
|
||||
line-height: 38px;
|
||||
font-weight: 300;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 30px 0;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
a {
|
||||
color: $white;
|
||||
line-height: 32px;
|
||||
font-size: 19px;
|
||||
font-weight: 400;
|
||||
text-decoration: underline;
|
||||
font-family: $primary-font;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $white;
|
||||
font-weight: 300;
|
||||
line-height: 32px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
@include desktop {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
#map {
|
||||
height: 100%;
|
||||
|
||||
@include desktop {
|
||||
height: 500px;
|
||||
}
|
||||
@include tablet {
|
||||
height: 400px;
|
||||
}
|
||||
@include mobile {
|
||||
height: 300px;
|
||||
}
|
||||
@include mobile-xs {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
&-section {
|
||||
padding: 140px 0 100px 0;
|
||||
@include mobile {
|
||||
padding: 120px 0 50px 0;
|
||||
}
|
||||
}
|
||||
&-form {
|
||||
text-align: center;
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
margin-bottom: 40px;
|
||||
@include mobile-xs {
|
||||
font-size: 24px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
form {
|
||||
.form-control {
|
||||
padding: 17px 20px;
|
||||
margin-bottom: 30px;
|
||||
@include mobile-xs {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.form-check {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
17
assets/scss/components/_cta.scss
Normal file
17
assets/scss/components/_cta.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
.cta {
|
||||
padding-bottom: 50px;
|
||||
@include tablet {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
&-content {
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 15px;
|
||||
|
||||
@include mobile-xs {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
121
assets/scss/components/_error.scss
Normal file
121
assets/scss/components/_error.scss
Normal file
@@ -0,0 +1,121 @@
|
||||
.error {
|
||||
background: #f0f2f5;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&-content {
|
||||
padding: 270px 0 245px;
|
||||
text-align: center;
|
||||
|
||||
@include desktop-lg {
|
||||
padding: 200px 0;
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
padding: 150px 0 100px;
|
||||
}
|
||||
@include mobile {
|
||||
padding: 120px 0 60px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 170px;
|
||||
display: inline-block;
|
||||
margin-bottom: 80px;
|
||||
|
||||
@include desktop {
|
||||
font-size: 100px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
font-size: 80px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
font-size: 50px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
@include mobile-xs {
|
||||
font-size: 40px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
color: $text-color-dark;
|
||||
@include mobile-xs {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
padding: 30px 0 70px;
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
|
||||
@include tablet {
|
||||
width: 80%;
|
||||
}
|
||||
@include mobile {
|
||||
padding: 30px 0 40px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
.form-control {
|
||||
background: white;
|
||||
padding: 20px 50px 20px 40px;
|
||||
border-radius: 50px;
|
||||
color: $text-color;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
border: none;
|
||||
|
||||
@include mobile-xs {
|
||||
padding: 10px 50px 10px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-search {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 95%;
|
||||
transform: translate(-95%, -50%);
|
||||
|
||||
@include mobile-xs {
|
||||
left: 90%;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-size: 30px;
|
||||
i {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-link {
|
||||
a {
|
||||
background: $primary-color;
|
||||
padding: 15px 30px;
|
||||
color: $white;
|
||||
border-radius: 30px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
text-transform: capitalize;
|
||||
text-decoration: none;
|
||||
|
||||
i {
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
52
assets/scss/components/_faq.scss
Normal file
52
assets/scss/components/_faq.scss
Normal file
@@ -0,0 +1,52 @@
|
||||
.faq {
|
||||
background: #b8cfe6 ;
|
||||
padding: 100px 0;
|
||||
@include desktop {
|
||||
text-align: center;
|
||||
padding: 0 0 50px 0;
|
||||
}
|
||||
|
||||
.text-block {
|
||||
h2 {
|
||||
color: #002255;
|
||||
@include tablet {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
@include mobile-xs {
|
||||
font-size: 20px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
margin: 0 auto 30px;
|
||||
@include tablet {
|
||||
text-align: center;
|
||||
}
|
||||
@include mobile {
|
||||
width: 100%;
|
||||
}
|
||||
@include mobile-xs {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
h3 {
|
||||
color: #002255;
|
||||
font-weight: 500;
|
||||
margin: 0 0 10px;
|
||||
@include desktop {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
152
assets/scss/components/_footer.scss
Normal file
152
assets/scss/components/_footer.scss
Normal file
@@ -0,0 +1,152 @@
|
||||
.footer {
|
||||
padding: 100px 0;
|
||||
background: #f7f8fc;
|
||||
@include desktop {
|
||||
padding: 50px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-logo {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
&-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
padding-bottom: 20px;
|
||||
|
||||
@include tablet {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
padding-bottom: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
|
||||
&:not(:first-child) {
|
||||
padding-left: 50px;
|
||||
|
||||
@include desktop {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 12px;
|
||||
color: $text-color-dark;
|
||||
transition: all 0.5s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-text-block {
|
||||
@include desktop {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
font-family: $primary-font;
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-bottom: 20px;
|
||||
|
||||
@include desktop {
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
padding-left: 15px;
|
||||
display: inline-block;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #666666;
|
||||
transition: all 0.3s ease-in-out;
|
||||
text-decoration: none;
|
||||
|
||||
i {
|
||||
font-size: 1.5rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-copyright-text {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
opacity: 0.5;
|
||||
|
||||
@include desktop {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
padding-left: 20px;
|
||||
|
||||
a {
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li:hover > a {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
56
assets/scss/components/_gallery.scss
Normal file
56
assets/scss/components/_gallery.scss
Normal file
@@ -0,0 +1,56 @@
|
||||
.gallery {
|
||||
padding: 100px 0;
|
||||
@include desktop-lg {
|
||||
padding: 70px 0 50px;
|
||||
}
|
||||
@include tablet {
|
||||
padding: 50px 0 0;
|
||||
}
|
||||
&-item {
|
||||
opacity: 1;
|
||||
transition: all 0.5s $site-ease;
|
||||
margin-bottom: 30px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.09);
|
||||
a {
|
||||
cursor: url(../images/plus.png), auto;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
&:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
}
|
||||
|
||||
&-button-platform {
|
||||
padding-bottom: 20px;
|
||||
|
||||
a {
|
||||
background: $primary-color;
|
||||
transition: all 0.3s ease-in-out;
|
||||
position: relative;
|
||||
font-family: "Lato", sans-serif;
|
||||
padding: 10px 50px;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
|
||||
.badge {
|
||||
top: -7px;
|
||||
position: absolute;
|
||||
color: #f7f1f1;
|
||||
background: #31639c;
|
||||
border-radius: 50px;
|
||||
padding: 7px 20px;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
right: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
&-pragrap {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
147
assets/scss/components/_hero.scss
Normal file
147
assets/scss/components/_hero.scss
Normal file
@@ -0,0 +1,147 @@
|
||||
.hero {
|
||||
padding: 250px 0 200px;
|
||||
position: relative;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
|
||||
@include desktop-lg {
|
||||
padding: 150px 0 120px;
|
||||
}
|
||||
@include desktop {
|
||||
padding: 200px 0 120px;
|
||||
}
|
||||
@include tablet {
|
||||
padding: 150px 0 100px;
|
||||
}
|
||||
@include mobile {
|
||||
padding: 120px 0 80px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba($color: $black, $alpha: 0.5);
|
||||
}
|
||||
|
||||
&-content {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
h1 {
|
||||
color: whitesmoke;
|
||||
margin-bottom: 15px;
|
||||
font-size: 50px;
|
||||
line-height: 70px;
|
||||
|
||||
@include tablet {
|
||||
font-size: 40px;
|
||||
line-height: 55px;
|
||||
}
|
||||
@include mobile {
|
||||
font-size: 30px;
|
||||
line-height: 45px;
|
||||
}
|
||||
|
||||
@include mobile-xs {
|
||||
font-size: 24px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #cc0016;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: whitesmoke;
|
||||
margin-bottom: 5px;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
|
||||
@include tablet {
|
||||
font-size: 150px;
|
||||
line-height: 35px;
|
||||
}
|
||||
@include mobile {
|
||||
font-size: 15px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
@include mobile-xs {
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: #b8cfe6;
|
||||
font-size: 19px;
|
||||
line-height: 32px;
|
||||
width: 83%;
|
||||
margin: 0 auto 50px;
|
||||
|
||||
@include desktop {
|
||||
width: 100%;
|
||||
}
|
||||
@include mobile {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-video-player {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
|
||||
@include desktop {
|
||||
margin-top: 60px;
|
||||
}
|
||||
@include mobile {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.hero-video-player-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
a {
|
||||
display: block;
|
||||
position: relative;
|
||||
background: #b8cfe6;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
color: $white;
|
||||
margin-bottom: 20px;
|
||||
transition: 0.3s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
i {
|
||||
color: $primary-color;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
color: #b8cfe6;
|
||||
font-family: $primary-font;
|
||||
}
|
||||
}
|
||||
}
|
||||
29
assets/scss/components/_liens.scss
Normal file
29
assets/scss/components/_liens.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
.lien {
|
||||
padding: 100px 0;
|
||||
@include desktop-lg {
|
||||
padding: 70px 0 50px;
|
||||
}
|
||||
@include tablet {
|
||||
padding: 50px 0 0;
|
||||
}
|
||||
&-infos {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
&-thumb {
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
&:hover {
|
||||
img {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
153
assets/scss/components/_navigation.scss
Normal file
153
assets/scss/components/_navigation.scss
Normal file
@@ -0,0 +1,153 @@
|
||||
.main-nav {
|
||||
padding: 30px 35px 20px;
|
||||
transition: all 0.5s ease-in-out;
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
@include desktop {
|
||||
background: $white;
|
||||
padding: 30px;
|
||||
}
|
||||
@include mobile {
|
||||
padding: 15px 30px;
|
||||
width: 95%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 10px;
|
||||
}
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: $white;
|
||||
padding-left: 20px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
padding-right: 20px;
|
||||
letter-spacing: 1px;
|
||||
position: relative;
|
||||
font-family: $primary-font;
|
||||
z-index: 1;
|
||||
transition: all 0.5s ease-in-out;
|
||||
@include desktop {
|
||||
color: $text-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
.logo-main {
|
||||
display: none;
|
||||
@include desktop {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.logo-white {
|
||||
display: block;
|
||||
@include desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
|
||||
.icon-bar {
|
||||
width: 25px;
|
||||
height: 2px;
|
||||
background: $secondary-color;
|
||||
transition: all 0.2s;
|
||||
display: block;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
transform: rotate(45deg);
|
||||
transform-origin: 10% 10%;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: 10% 90%;
|
||||
}
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
.icon-bar {
|
||||
&:nth-child(1) {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=1);
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-bg {
|
||||
background: $white;
|
||||
padding: 20px;
|
||||
border: none;
|
||||
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.09);
|
||||
top: 0;
|
||||
@include mobile {
|
||||
top: 10px;
|
||||
padding: 20px 20px;
|
||||
}
|
||||
.navbar-brand {
|
||||
.logo-main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo-white {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: $text-color-dark !important;
|
||||
|
||||
&::before {
|
||||
background: darken($color: $white, $amount: 10) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.account-list {
|
||||
li {
|
||||
a {
|
||||
color: $white;
|
||||
background: $secondary-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-colored {
|
||||
@extend .nav-bg;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
184
assets/scss/components/_pricing.scss
Normal file
184
assets/scss/components/_pricing.scss
Normal file
@@ -0,0 +1,184 @@
|
||||
.pricing {
|
||||
padding: 100px 0;
|
||||
@include desktop {
|
||||
padding: 50px 0;
|
||||
}
|
||||
@include mobile-xs {
|
||||
padding: 30px 0;
|
||||
}
|
||||
&-wraper {
|
||||
transition: all 0.3s ease-in-out;
|
||||
.pricing-item {
|
||||
background: $white;
|
||||
padding: 40px 10px;
|
||||
text-align: center;
|
||||
border: 1px solid #0000001c;
|
||||
border-radius: 6px 6px 0 0;
|
||||
position: relative;
|
||||
h2 {
|
||||
color: $white;
|
||||
}
|
||||
h3 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
span.price {
|
||||
font-size: 70px;
|
||||
font-weight: 400;
|
||||
font-family: $primary-font;
|
||||
color: $text-color-dark;
|
||||
transition: all 0.3s ease-in-out;
|
||||
sup {
|
||||
font-size: 30px;
|
||||
}
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
&-badge {
|
||||
position: absolute;
|
||||
background: $primary-color;
|
||||
padding: 5px 10px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: $white;
|
||||
text-transform: lowercase;
|
||||
font-family: $primary-font;
|
||||
border-radius: 5px;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
p {
|
||||
margin-top: 20px;
|
||||
font-size: 14px;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
a {
|
||||
border: none;
|
||||
width: 100%;
|
||||
border-radius: 0px 0px 6px 6px;
|
||||
font-size: 13px;
|
||||
padding: 15px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease-in-out;
|
||||
@include desktop {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
a {
|
||||
background-color: darken($color: $primary-color, $amount: 10);
|
||||
transform: translateY(0);
|
||||
}
|
||||
span.price {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-container {
|
||||
background: $white;
|
||||
/* width: 450px; */
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.calendar-container header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 25px 30px 10px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
header .calendar-navigation {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
header .calendar-navigation span {
|
||||
height: 38px;
|
||||
width: 38px;
|
||||
margin: 0 1px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
border-radius: 50%;
|
||||
user-select: none;
|
||||
color: #aeabab;
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
|
||||
.calendar-navigation span:last-child {
|
||||
margin-right: -10px;
|
||||
}
|
||||
|
||||
header .calendar-navigation span:hover {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
header .calendar-current-date {
|
||||
font-weight: 500;
|
||||
font-size: 1.45rem;
|
||||
}
|
||||
|
||||
.calendar-body {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.calendar-body ul {
|
||||
list-style: none;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar-body .calendar-dates {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.calendar-body li {
|
||||
width: calc(100% / 7);
|
||||
font-size: 1rem;
|
||||
color: #414141;
|
||||
}
|
||||
|
||||
.calendar-body .calendar-weekdays li {
|
||||
cursor: default;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.calendar-body .calendar-dates li {
|
||||
margin-top: 30px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.calendar-dates li.inactive {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.calendar-dates li.active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar-dates li::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
z-index: -1;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.calendar-dates li.active::before {
|
||||
background: $primary-color;
|
||||
}
|
||||
|
||||
.calendar-dates li:not(.active):hover::before {
|
||||
background: $bg-color;
|
||||
}
|
||||
54
assets/scss/components/_quotes.scss
Normal file
54
assets/scss/components/_quotes.scss
Normal file
@@ -0,0 +1,54 @@
|
||||
.quotes {
|
||||
text-align: center;
|
||||
&-slider {
|
||||
&-item {
|
||||
outline: none;
|
||||
h2 {
|
||||
font-size: 40px;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
line-height: 50px;
|
||||
margin: 0 140px 20px 140px;
|
||||
@include tablet {
|
||||
margin: 0 50px 20px 50px;
|
||||
}
|
||||
@include mobile {
|
||||
margin: 0 10px 20px 10px;
|
||||
font-size: 30px;
|
||||
line-height: 40px;
|
||||
}
|
||||
@include mobile-xs {
|
||||
font-size: 25px;
|
||||
line-height: 35px;
|
||||
}
|
||||
}
|
||||
span {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.slick-dots {
|
||||
position: absolute;
|
||||
bottom: -40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
li {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
button {
|
||||
background: $text-color;
|
||||
text-indent: -999999999px;
|
||||
border-radius: 50%;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.slick-dots li.slick-active button {
|
||||
background: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
45
assets/scss/components/_service.scss
Normal file
45
assets/scss/components/_service.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
.service {
|
||||
background: #f7f8fc;
|
||||
padding: 50px 0;
|
||||
@include mobile {
|
||||
padding: 20px 0;
|
||||
}
|
||||
&-item {
|
||||
background: $white;
|
||||
padding: 50px 30px 50px;
|
||||
text-align: center;
|
||||
border: 1px solid #0000001c;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 30px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
@include mobile {
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
i {
|
||||
font-size: 40px;
|
||||
margin-bottom: 40px;
|
||||
color: #002255;
|
||||
/* color: $text-color-dark; */
|
||||
display: inline-block;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
h3 {
|
||||
color: #002255;
|
||||
text-transform: capitalize;
|
||||
line-height: 26px;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
line-height: 26px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
i {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
46
assets/scss/components/_story.scss
Normal file
46
assets/scss/components/_story.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
.story {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-content {
|
||||
@include tablet {
|
||||
text-align: center;
|
||||
}
|
||||
h2 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
&-slider {
|
||||
.slider-item {
|
||||
outline: none;
|
||||
img {
|
||||
width: 100%;
|
||||
transition: 0.5s $site-ease;
|
||||
}
|
||||
}
|
||||
.slick-dots {
|
||||
position: absolute;
|
||||
bottom: -40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
li {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
button {
|
||||
background: $text-color;
|
||||
text-indent: -999999999px;
|
||||
border-radius: 50%;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.slick-dots li.slick-active button {
|
||||
background: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
30
assets/scss/components/_team.scss
Normal file
30
assets/scss/components/_team.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
.team {
|
||||
background: #b8cfe6 ;
|
||||
padding-bottom: 100px;
|
||||
@include desktop {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
@include mobile {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.member-informashion {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
.member-thume {
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
&:hover {
|
||||
img {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
60
assets/scss/components/_testimonial.scss
Normal file
60
assets/scss/components/_testimonial.scss
Normal file
@@ -0,0 +1,60 @@
|
||||
.testimonial {
|
||||
position: relative;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
padding: 100px 0;
|
||||
@include desktop {
|
||||
padding: 50px 0;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba($color: $black, $alpha: 0.5);
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
&-content {
|
||||
background: $white;
|
||||
padding: 50px 70px 40px;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@include desktop {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
padding: 30px;
|
||||
}
|
||||
@include mobile-xs {
|
||||
padding: 30px 15px 15px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 300;
|
||||
font-size: 25px;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
line-height: 32px;
|
||||
font-family: $primary-font;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
color: $text-color-dark;
|
||||
cite {
|
||||
color: #666666;
|
||||
display: block;
|
||||
margin-top: 30px;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-family: $secondary-font;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
13
assets/scss/critical.scss
Normal file
13
assets/scss/critical.scss
Normal file
@@ -0,0 +1,13 @@
|
||||
@import "variables";
|
||||
|
||||
@import "plugins/bootstrap.min";
|
||||
|
||||
@import "typography";
|
||||
|
||||
@import "mixins";
|
||||
|
||||
@import "buttons";
|
||||
|
||||
@import "components/navigation";
|
||||
|
||||
@import "components/hero";
|
||||
47
assets/scss/non-critical.scss
Normal file
47
assets/scss/non-critical.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
@import "variables";
|
||||
|
||||
@import "mixins";
|
||||
|
||||
@import "plugins/themify";
|
||||
|
||||
@import "plugins/slick";
|
||||
|
||||
@import "plugins/slick-theme";
|
||||
|
||||
@import "plugins/aos";
|
||||
|
||||
@import "plugins/magnific-popup";
|
||||
|
||||
@import "plugins/animate";
|
||||
|
||||
@import "common";
|
||||
|
||||
@import "components/gallery";
|
||||
|
||||
@import "components/cta";
|
||||
|
||||
@import "components/service";
|
||||
|
||||
@import "components/blog";
|
||||
|
||||
@import "components/testimonial";
|
||||
|
||||
@import "components/pricing";
|
||||
|
||||
@import "components/faq";
|
||||
|
||||
@import "components/clients";
|
||||
|
||||
@import "components/story";
|
||||
|
||||
@import "components/team";
|
||||
|
||||
@import "components/liens";
|
||||
|
||||
@import "components/quotes";
|
||||
|
||||
@import "components/contact";
|
||||
|
||||
@import "components/error";
|
||||
|
||||
@import "components/footer";
|
||||
7
assets/scss/plugins/_animate.scss
Normal file
7
assets/scss/plugins/_animate.scss
Normal file
File diff suppressed because one or more lines are too long
3536
assets/scss/plugins/_aos.scss
Normal file
3536
assets/scss/plugins/_aos.scss
Normal file
File diff suppressed because one or more lines are too long
7
assets/scss/plugins/_bootstrap.min.scss
Normal file
7
assets/scss/plugins/_bootstrap.min.scss
Normal file
File diff suppressed because one or more lines are too long
4
assets/scss/plugins/_font-awesome.min.scss
Normal file
4
assets/scss/plugins/_font-awesome.min.scss
Normal file
File diff suppressed because one or more lines are too long
470
assets/scss/plugins/_magnific-popup.scss
Normal file
470
assets/scss/plugins/_magnific-popup.scss
Normal file
@@ -0,0 +1,470 @@
|
||||
/* Magnific Popup CSS */
|
||||
.mfp-bg {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1042;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
background: #0b0b0b;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.mfp-wrap {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1043;
|
||||
position: fixed;
|
||||
outline: none !important;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.mfp-container {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 0 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mfp-container:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mfp-align-top .mfp-container:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mfp-content {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
z-index: 1045;
|
||||
}
|
||||
|
||||
.mfp-inline-holder .mfp-content,
|
||||
.mfp-ajax-holder .mfp-content {
|
||||
width: 100%;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.mfp-ajax-cur {
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
.mfp-zoom-out-cur,
|
||||
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
|
||||
cursor: -moz-zoom-out;
|
||||
cursor: -webkit-zoom-out;
|
||||
cursor: zoom-out;
|
||||
}
|
||||
|
||||
.mfp-zoom {
|
||||
cursor: pointer;
|
||||
cursor: -webkit-zoom-in;
|
||||
cursor: -moz-zoom-in;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.mfp-auto-cursor .mfp-content {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.mfp-close,
|
||||
.mfp-arrow,
|
||||
.mfp-preloader,
|
||||
.mfp-counter {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mfp-loading.mfp-figure {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mfp-hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.mfp-preloader {
|
||||
color: #CCC;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: auto;
|
||||
text-align: center;
|
||||
margin-top: -0.8em;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
z-index: 1044;
|
||||
}
|
||||
|
||||
.mfp-preloader a {
|
||||
color: #CCC;
|
||||
}
|
||||
|
||||
.mfp-preloader a:hover {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.mfp-s-ready .mfp-preloader {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mfp-s-error .mfp-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button.mfp-close,
|
||||
button.mfp-arrow {
|
||||
overflow: visible;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
z-index: 1046;
|
||||
box-shadow: none;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.mfp-close {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
opacity: 0.65;
|
||||
padding: 0 0 18px 10px;
|
||||
color: #FFF;
|
||||
font-style: normal;
|
||||
font-size: 28px;
|
||||
font-family: Arial, Baskerville, monospace;
|
||||
}
|
||||
|
||||
.mfp-close:hover,
|
||||
.mfp-close:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mfp-close:active {
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.mfp-close-btn-in .mfp-close {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.mfp-image-holder .mfp-close,
|
||||
.mfp-iframe-holder .mfp-close {
|
||||
color: #FFF;
|
||||
right: -6px;
|
||||
text-align: right;
|
||||
padding-right: 6px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mfp-counter {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
color: #CCC;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mfp-arrow {
|
||||
position: absolute;
|
||||
opacity: 0.65;
|
||||
margin: 0;
|
||||
top: 50%;
|
||||
margin-top: -55px;
|
||||
padding: 0;
|
||||
width: 90px;
|
||||
height: 110px;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.mfp-arrow:active {
|
||||
margin-top: -54px;
|
||||
}
|
||||
|
||||
.mfp-arrow:hover,
|
||||
.mfp-arrow:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mfp-arrow:before,
|
||||
.mfp-arrow:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin-top: 35px;
|
||||
margin-left: 35px;
|
||||
border: medium inset transparent;
|
||||
}
|
||||
|
||||
.mfp-arrow:after {
|
||||
border-top-width: 13px;
|
||||
border-bottom-width: 13px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.mfp-arrow:before {
|
||||
border-top-width: 21px;
|
||||
border-bottom-width: 21px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.mfp-arrow-left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.mfp-arrow-left:after {
|
||||
border-right: 17px solid #FFF;
|
||||
margin-left: 31px;
|
||||
}
|
||||
|
||||
.mfp-arrow-left:before {
|
||||
margin-left: 25px;
|
||||
border-right: 27px solid #3F3F3F;
|
||||
}
|
||||
|
||||
.mfp-arrow-right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.mfp-arrow-right:after {
|
||||
border-left: 17px solid #FFF;
|
||||
margin-left: 39px;
|
||||
}
|
||||
|
||||
.mfp-arrow-right:before {
|
||||
border-left: 27px solid #3F3F3F;
|
||||
}
|
||||
|
||||
.mfp-iframe-holder {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.mfp-iframe-holder .mfp-content {
|
||||
line-height: 0;
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.mfp-iframe-holder .mfp-close {
|
||||
top: -40px;
|
||||
}
|
||||
|
||||
.mfp-iframe-scaler {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.mfp-iframe-scaler iframe {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
|
||||
background: #000;
|
||||
}
|
||||
|
||||
/* Main image in popup */
|
||||
img.mfp-img {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
line-height: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 40px 0 40px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* The shadow behind the image */
|
||||
.mfp-figure {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.mfp-figure:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 40px;
|
||||
bottom: 40px;
|
||||
display: block;
|
||||
right: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
z-index: -1;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
|
||||
background: #444;
|
||||
}
|
||||
|
||||
.mfp-figure small {
|
||||
color: #BDBDBD;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.mfp-figure figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mfp-bottom-bar {
|
||||
margin-top: -36px;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.mfp-title {
|
||||
text-align: left;
|
||||
line-height: 18px;
|
||||
color: #F3F3F3;
|
||||
word-wrap: break-word;
|
||||
padding-right: 36px;
|
||||
}
|
||||
|
||||
.mfp-image-holder .mfp-content {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mfp-gallery .mfp-image-holder .mfp-figure {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) and (orientation: landscape),
|
||||
screen and (max-height: 300px) {
|
||||
|
||||
/**
|
||||
* Remove all paddings around the image on small screen
|
||||
*/
|
||||
.mfp-img-mobile .mfp-image-holder {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.mfp-img-mobile img.mfp-img {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mfp-img-mobile .mfp-figure:after {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.mfp-img-mobile .mfp-figure small {
|
||||
display: inline;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.mfp-img-mobile .mfp-bottom-bar {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
top: auto;
|
||||
padding: 3px 5px;
|
||||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mfp-img-mobile .mfp-bottom-bar:empty {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mfp-img-mobile .mfp-counter {
|
||||
right: 5px;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.mfp-img-mobile .mfp-close {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 900px) {
|
||||
.mfp-arrow {
|
||||
-webkit-transform: scale(0.75);
|
||||
transform: scale(0.75);
|
||||
}
|
||||
|
||||
.mfp-arrow-left {
|
||||
-webkit-transform-origin: 0;
|
||||
transform-origin: 0;
|
||||
}
|
||||
|
||||
.mfp-arrow-right {
|
||||
-webkit-transform-origin: 100%;
|
||||
transform-origin: 100%;
|
||||
}
|
||||
|
||||
.mfp-container {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.mfp-iframe-holder .mfp-close{
|
||||
font-family: $primary-font;
|
||||
font-weight: 300;
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
button.mfp-close{
|
||||
font-family: $primary-font;
|
||||
font-weight: 300;
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
.mfp-zoom-out-cur{
|
||||
cursor: url(../images/minus.png), auto;
|
||||
}
|
||||
|
||||
.mfp-title, .mfp-counter{
|
||||
font-family: $primary-font;
|
||||
}
|
||||
199
assets/scss/plugins/_slick-theme.scss
Normal file
199
assets/scss/plugins/_slick-theme.scss
Normal file
@@ -0,0 +1,199 @@
|
||||
@charset 'UTF-8';
|
||||
/* Icons */
|
||||
@font-face
|
||||
{
|
||||
font-family: 'slick';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
src: url('../fonts/slick.eot');
|
||||
src: url('../fonts/slick.eot?#iefix') format('embedded-opentype'), url('../fonts/slick.woff') format('woff'), url('../fonts/slick.ttf') format('truetype'), url('../fonts/slick.svg#slick') format('svg');
|
||||
font-display: swap;
|
||||
}
|
||||
/* Arrows */
|
||||
.slick-prev,
|
||||
.slick-next
|
||||
{
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
-ms-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
color: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
.slick-prev:hover,
|
||||
.slick-prev:focus,
|
||||
.slick-next:hover,
|
||||
.slick-next:focus
|
||||
{
|
||||
color: transparent;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
.slick-prev:hover:before,
|
||||
.slick-prev:focus:before,
|
||||
.slick-next:hover:before,
|
||||
.slick-next:focus:before
|
||||
{
|
||||
opacity: 1;
|
||||
}
|
||||
.slick-prev.slick-disabled:before,
|
||||
.slick-next.slick-disabled:before
|
||||
{
|
||||
opacity: .25;
|
||||
}
|
||||
|
||||
.slick-prev:before,
|
||||
.slick-next:before
|
||||
{
|
||||
font-family: 'slick';
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
|
||||
opacity: .75;
|
||||
color: white;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.slick-prev
|
||||
{
|
||||
left: -25px;
|
||||
}
|
||||
[dir='rtl'] .slick-prev
|
||||
{
|
||||
right: -25px;
|
||||
left: auto;
|
||||
}
|
||||
.slick-prev:before
|
||||
{
|
||||
content: '←';
|
||||
}
|
||||
[dir='rtl'] .slick-prev:before
|
||||
{
|
||||
content: '→';
|
||||
}
|
||||
|
||||
.slick-next
|
||||
{
|
||||
right: -25px;
|
||||
}
|
||||
[dir='rtl'] .slick-next
|
||||
{
|
||||
right: auto;
|
||||
left: -25px;
|
||||
}
|
||||
.slick-next:before
|
||||
{
|
||||
content: '→';
|
||||
}
|
||||
[dir='rtl'] .slick-next:before
|
||||
{
|
||||
content: '←';
|
||||
}
|
||||
|
||||
/* Dots */
|
||||
.slick-dotted.slick-slider
|
||||
{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.slick-dots
|
||||
{
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
list-style: none;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
.slick-dots li
|
||||
{
|
||||
position: relative;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0 5px;
|
||||
padding: 0;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
.slick-dots li button
|
||||
{
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 5px;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
color: transparent;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
.slick-dots li button:hover,
|
||||
.slick-dots li button:focus
|
||||
{
|
||||
outline: none;
|
||||
}
|
||||
.slick-dots li button:hover:before,
|
||||
.slick-dots li button:focus:before
|
||||
{
|
||||
opacity: 1;
|
||||
}
|
||||
.slick-dots li button:before
|
||||
{
|
||||
font-family: 'slick';
|
||||
font-size: 6px;
|
||||
line-height: 20px;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
content: '•';
|
||||
text-align: center;
|
||||
|
||||
opacity: .25;
|
||||
color: black;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.slick-dots li.slick-active button:before
|
||||
{
|
||||
opacity: .75;
|
||||
color: black;
|
||||
}
|
||||
119
assets/scss/plugins/_slick.scss
Normal file
119
assets/scss/plugins/_slick.scss
Normal file
@@ -0,0 +1,119 @@
|
||||
/* Slider */
|
||||
.slick-slider
|
||||
{
|
||||
position: relative;
|
||||
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-khtml-user-select: none;
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.slick-list
|
||||
{
|
||||
position: relative;
|
||||
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.slick-list:focus
|
||||
{
|
||||
outline: none;
|
||||
}
|
||||
.slick-list.dragging
|
||||
{
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
|
||||
.slick-slider .slick-track,
|
||||
.slick-slider .slick-list
|
||||
{
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-o-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.slick-track
|
||||
{
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.slick-track:before,
|
||||
.slick-track:after
|
||||
{
|
||||
display: table;
|
||||
|
||||
content: '';
|
||||
}
|
||||
.slick-track:after
|
||||
{
|
||||
clear: both;
|
||||
}
|
||||
.slick-loading .slick-track
|
||||
{
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.slick-slide
|
||||
{
|
||||
display: none;
|
||||
float: left;
|
||||
|
||||
height: 100%;
|
||||
min-height: 1px;
|
||||
}
|
||||
[dir='rtl'] .slick-slide
|
||||
{
|
||||
float: right;
|
||||
}
|
||||
.slick-slide img
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
.slick-slide.slick-loading img
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
.slick-slide.dragging img
|
||||
{
|
||||
pointer-events: none;
|
||||
}
|
||||
.slick-initialized .slick-slide
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
.slick-loading .slick-slide
|
||||
{
|
||||
visibility: hidden;
|
||||
}
|
||||
.slick-vertical .slick-slide
|
||||
{
|
||||
display: block;
|
||||
|
||||
height: auto;
|
||||
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.slick-arrow.slick-hidden {
|
||||
display: none;
|
||||
}
|
||||
1082
assets/scss/plugins/_themify.scss
Normal file
1082
assets/scss/plugins/_themify.scss
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user