/*Color Value*/ /*Font Value*/ /** * $font-face LESS Mixin * use: .font-face( * $font-family, // name * $file-path, // absolute/relative URL to font files * $font-weight, // light/normal/bold/inherit | 300/400/700 * $font-style // italic/normal/inherit * ) */ /** * font LESS Mixin * use: .font( * $font-family, // name * $file-size, // any unit/inherit * $font-weight, // light/normal/bold/inherit | 300/400/700 * $font-style // italic/normal/inherit * ) */ /*Button Style Start*/ /*Button Style End*/ /*Input Style Start*/ /*Input Style End*/ /*Clearfix function Start*/ /*Clearfix function End*/ /*Common LESS Start*/ /* .list-margin-fit{ &:first-child{margin-left:0;} &:last-child{margin-right:0;} } .list-padding-fit{ &:first-child{padding-left:0;} &:last-child{padding-right:0;} } */ /*Common LESS End*/ /*Common CSS3 LESS Mixins Start*/ /*Common CSS3 LESS Mixins End*/ /* @include keyframes(anim-rotate){ 0% { @include rotate(0deg); } 100% { @include rotate(360deg); } } */ /* @function drop-shadow-converter($color: #000, $opacity: 100, $angle: 0, $distance: 0, $spread: 0, $size: 0, $is-box-shadow: false) { $__ang: (180-$angle) * 3.14 / 180; $__offset-y: round(sin($__ang) * $distance); $__offset-x: round(cos($__ang) * $distance); $__spread-rad: $size * $spread/100; $__blur-rad: $size - $__spread-rad; @if ($is-box-shadow) { @return $__offset-x $__offset-y $__blur-rad $__spread-rad rgba(red($color), green($color), blue($color), $opacity/100); } @else { @return $__offset-x $__offset-y $__blur-rad rgba(red($color), green($color), blue($color), $opacity/100); } } */ /*Color Value*/ /*Font Value*/ /** * $font-face LESS Mixin * use: .font-face( * $font-family, // name * $file-path, // absolute/relative URL to font files * $font-weight, // light/normal/bold/inherit | 300/400/700 * $font-style // italic/normal/inherit * ) */ /** * font LESS Mixin * use: .font( * $font-family, // name * $file-size, // any unit/inherit * $font-weight, // light/normal/bold/inherit | 300/400/700 * $font-style // italic/normal/inherit * ) */ /*Button Style Start*/ /*Button Style End*/ /*Input Style Start*/ /*Input Style End*/ /*Clearfix function Start*/ /*Clearfix function End*/ /*Common LESS Start*/ /* .list-margin-fit{ &:first-child{margin-left:0;} &:last-child{margin-right:0;} } .list-padding-fit{ &:first-child{padding-left:0;} &:last-child{padding-right:0;} } */ /*Common LESS End*/ /*Common CSS3 LESS Mixins Start*/ /*Common CSS3 LESS Mixins End*/ /* @include keyframes(anim-rotate){ 0% { @include rotate(0deg); } 100% { @include rotate(360deg); } } */ /* @function drop-shadow-converter($color: #000, $opacity: 100, $angle: 0, $distance: 0, $spread: 0, $size: 0, $is-box-shadow: false) { $__ang: (180-$angle) * 3.14 / 180; $__offset-y: round(sin($__ang) * $distance); $__offset-x: round(cos($__ang) * $distance); $__spread-rad: $size * $spread/100; $__blur-rad: $size - $__spread-rad; @if ($is-box-shadow) { @return $__offset-x $__offset-y $__blur-rad $__spread-rad rgba(red($color), green($color), blue($color), $opacity/100); } @else { @return $__offset-x $__offset-y $__blur-rad rgba(red($color), green($color), blue($color), $opacity/100); } } */ /* $chinese-font: 'Noto Sans TC','Noto Sans SC','Microsoft JhengHei'; @mixin font-name($en-name, $tc-name: $chinese-font){ font-family: $en-name, $tc-name,sans-serif; } */ /* $defaultPixelSize: 16px; @function cal-rfs-px-to-em($basefs,$defaultfs:$defaultPixelSize,$unit: 1em ){ @return $basefs/$defaultfs*$unit; } @mixin fs($fs){ @if $fs == 12px { @include rfs(cal-rfs-px-to-em(12px), cal-rfs-px-to-em(11px), cal-rfs-px-to-em(10px) ); } @else if $fs == 14px { @include rfs(cal-rfs-px-to-em(14px), cal-rfs-px-to-em(12px), cal-rfs-px-to-em(10px) ); } @else if $fs == 15px { @include rfs(cal-rfs-px-to-em(15px), cal-rfs-px-to-em(13px), cal-rfs-px-to-em(11px) ); } @else if $fs == 16px { @include rfs(cal-rfs-px-to-em(16px), cal-rfs-px-to-em(14px), cal-rfs-px-to-em(12px) ); } @else if $fs == 17px { @include rfs(cal-rfs-px-to-em(17px), cal-rfs-px-to-em(15px), cal-rfs-px-to-em(13px) ); } @else if $fs == 18px{ @include rfs(cal-rfs-px-to-em(18px), cal-rfs-px-to-em(16px), cal-rfs-px-to-em(14px) ); } @else if $fs == 19px{ @include rfs(cal-rfs-px-to-em(19px), cal-rfs-px-to-em(17px), cal-rfs-px-to-em(15px) ); } @else if $fs == 20px{ @include rfs(cal-rfs-px-to-em(20px), cal-rfs-px-to-em(18px), cal-rfs-px-to-em(16px) ); } @else if $fs == 21px{ @include rfs(cal-rfs-px-to-em(21px), cal-rfs-px-to-em(19px), cal-rfs-px-to-em(17px) ); } @else if $fs == 22px{ @include rfs(cal-rfs-px-to-em(22px), cal-rfs-px-to-em(19px), cal-rfs-px-to-em(17px) ); } @else if $fs == 23px{ @include rfs(cal-rfs-px-to-em(23px), cal-rfs-px-to-em(19px), cal-rfs-px-to-em(17px) ); } @else if $fs == 24px{ @include rfs(cal-rfs-px-to-em(24px), cal-rfs-px-to-em(20px), cal-rfs-px-to-em(18px) ); } @else if $fs == 25px{ @include rfs(cal-rfs-px-to-em(25px), cal-rfs-px-to-em(21px), cal-rfs-px-to-em(19px) ); } @else if $fs == 26px{ @include rfs(cal-rfs-px-to-em(26px), cal-rfs-px-to-em(22px), cal-rfs-px-to-em(20px) ); } @else if $fs == 27px{ @include rfs(cal-rfs-px-to-em(27px), cal-rfs-px-to-em(23px), cal-rfs-px-to-em(21px) ); } @else if $fs == 28px{ @include rfs(cal-rfs-px-to-em(28px), cal-rfs-px-to-em(23px), cal-rfs-px-to-em(21px) ); } @else if $fs == 30px{ @include rfs(cal-rfs-px-to-em(30px), cal-rfs-px-to-em(24px), cal-rfs-px-to-em(22px) ); } @else if $fs == 32px{ @include rfs(cal-rfs-px-to-em(32px), cal-rfs-px-to-em(26px), cal-rfs-px-to-em(24px) ); } @else if $fs == 36px{ @include rfs(cal-rfs-px-to-em(36px), cal-rfs-px-to-em(32px), cal-rfs-px-to-em(30px) ); } @else if $fs == 40px{ @include rfs(cal-rfs-px-to-em(40px), cal-rfs-px-to-em(36px), cal-rfs-px-to-em(32px) ); } @else if $fs == 48px{ @include rfs(cal-rfs-px-to-em(48px), cal-rfs-px-to-em(40px), cal-rfs-px-to-em(26px) ); } @else if $fs == 60px{ @include rfs(cal-rfs-px-to-em(60px), cal-rfs-px-to-em(42px), cal-rfs-px-to-em(32px) ); } } */ /* $xs-col-padding: 5px; $sm-col-padding:10px; $md-col-padding:15px; $lg-col-padding:20px; .row-xs-col{ margin:0 -$xs-col-padding; >div{padding:0 $xs-col-padding}} .row-sm-col{ margin:0 -$sm-col-padding; >div{padding:0 $sm-col-padding}} .row-md-col{ margin:0 -$md-col-padding; >div{padding:0 $md-col-padding}} .row-lg-col{ margin:0 -$lg-col-padding; >div{padding:0 $lg-col-padding}} */ @-webkit-keyframes anim-rotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); } } @keyframes anim-rotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); } } /* @include keyframes(anim-floating){ 0% { @include translateY(-20px); } 50%{ @include translateY(20px); } 100% { @include translateY(-20px); } } */ /* html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { font-family: 'Fira Sans', 'Microsoft JhengHei' , sans-serif; } body a{transition: all .6s} body a:hover, body a:focus, body a:active{text-decoration: none;} */ .container-vm { width: 100%; height: 100%; display: table; table-layout: fixed; position: relative; } .container-vm-box { display: table-cell; vertical-align: middle; } .container-vb { width: 100%; height: 100%; display: table; table-layout: fixed; position: relative; } .container-vb-box { display: table-cell; vertical-align: bottom; } .img-responsive-center { margin-left: auto; margin-right: auto; } .form-group-inline .checkbox, .form-group-inline .radio { display: inline-block; margin-right: 15px; } /* .col-list{ @include col-list(); .col-list-item{ $col-array: 6,5,4,3,2,1; $padding-array: 0 15px 15px, 0 15px 15px, 0 15px 15px, 0 15px 15px, 0 15px 15px, 0 15px 15px; @include col-list-item( $col-array, $padding-array ); .list-item{ } } } */ /* @media (max-width: 767px){} @media (min-width: 768px){ .text-sm-left{text-align: left;} .text-sm-center{text-align: center;} .text-sm-right{text-align: right;} } @media (max-width: 991px){} @media (min-width: 992px){ .text-md-left{text-align: left;} .text-md-center{text-align: center;} .text-md-right{text-align: right;} } @media (max-width: 1199px){} @media (min-width: 1200px){ .text-lg-left{text-align: left;} .text-lg-center{text-align: center;} .text-lg-right{text-align: right;} } @media (max-width: 767px){} @media (min-width: 768px){ .float-sm-left{float:left;} .float-sm-right{float:right;} .float-sm-none{float:none;} } @media (max-width: 991px){} @media (min-width: 992px){ .float-md-left{float:left;} .float-md-right{float:right;} .float-md-none{float:none;} } @media (max-width: 1199px){} @media (min-width: 1200px){ .float-lg-left{float:left;} .float-lg-right{float:right;} .float-lg-none{float:none;} } */ /* @media (max-width: 767px){ .row-clear .col-xs-2:nth-child(6n+1), .row-clear .col-xs-3:nth-child(4n+1), .row-clear .col-xs-4:nth-child(3n+1), .row-clear .col-xs-6:nth-child(2n+1), .row-clear .col-sm-2:nth-child(6n+1), .row-clear .col-sm-3:nth-child(4n+1), .row-clear .col-sm-4:nth-child(3n+1), .row-clear .col-sm-6:nth-child(2n+1), .row-clear .col-md-2:nth-child(6n+1), .row-clear .col-md-3:nth-child(4n+1), .row-clear .col-md-4:nth-child(3n+1), .row-clear .col-md-6:nth-child(2n+1), .row-clear .col-lg-2:nth-child(6n+1), .row-clear .col-lg-3:nth-child(4n+1), .row-clear .col-lg-4:nth-child(3n+1), .row-clear .col-lg-6:nth-child(2n+1){clear:none;} .row-clear .col-xs-2:nth-child(6n+1), .row-clear .col-xs-3:nth-child(4n+1), .row-clear .col-xs-4:nth-child(3n+1), .row-clear .col-xs-6:nth-child(2n+1){clear:both;} } @media (min-width: 768px){ .row-clear .col-xs-2:nth-child(6n+1), .row-clear .col-xs-3:nth-child(4n+1), .row-clear .col-xs-4:nth-child(3n+1), .row-clear .col-xs-6:nth-child(2n+1), .row-clear .col-sm-2:nth-child(6n+1), .row-clear .col-sm-3:nth-child(4n+1), .row-clear .col-sm-4:nth-child(3n+1), .row-clear .col-sm-6:nth-child(2n+1), .row-clear .col-md-2:nth-child(6n+1), .row-clear .col-md-3:nth-child(4n+1), .row-clear .col-md-4:nth-child(3n+1), .row-clear .col-md-6:nth-child(2n+1), .row-clear .col-lg-2:nth-child(6n+1), .row-clear .col-lg-3:nth-child(4n+1), .row-clear .col-lg-4:nth-child(3n+1), .row-clear .col-lg-6:nth-child(2n+1){clear:none;} .row-clear .col-sm-2:nth-child(6n+1), .row-clear .col-sm-3:nth-child(4n+1), .row-clear .col-sm-4:nth-child(3n+1), .row-clear .col-sm-6:nth-child(2n+1){clear:both;} } @media (min-width: 992px){ .row-clear .col-xs-2:nth-child(6n+1), .row-clear .col-xs-3:nth-child(4n+1), .row-clear .col-xs-4:nth-child(3n+1), .row-clear .col-xs-6:nth-child(2n+1), .row-clear .col-sm-2:nth-child(6n+1), .row-clear .col-sm-3:nth-child(4n+1), .row-clear .col-sm-4:nth-child(3n+1), .row-clear .col-sm-6:nth-child(2n+1), .row-clear .col-md-2:nth-child(6n+1), .row-clear .col-md-3:nth-child(4n+1), .row-clear .col-md-4:nth-child(3n+1), .row-clear .col-md-6:nth-child(2n+1), .row-clear .col-lg-2:nth-child(6n+1), .row-clear .col-lg-3:nth-child(4n+1), .row-clear .col-lg-4:nth-child(3n+1), .row-clear .col-lg-6:nth-child(2n+1){clear:none;} .row-clear .col-md-2:nth-child(6n+1), .row-clear .col-md-3:nth-child(4n+1), .row-clear .col-md-4:nth-child(3n+1), .row-clear .col-md-6:nth-child(2n+1){clear:both;} } @media (min-width: 1200px){ .row-clear .col-xs-2:nth-child(6n+1), .row-clear .col-xs-3:nth-child(4n+1), .row-clear .col-xs-4:nth-child(3n+1), .row-clear .col-xs-6:nth-child(2n+1), .row-clear .col-sm-2:nth-child(6n+1), .row-clear .col-sm-3:nth-child(4n+1), .row-clear .col-sm-4:nth-child(3n+1), .row-clear .col-sm-6:nth-child(2n+1), .row-clear .col-md-2:nth-child(6n+1), .row-clear .col-md-3:nth-child(4n+1), .row-clear .col-md-4:nth-child(3n+1), .row-clear .col-md-6:nth-child(2n+1), .row-clear .col-lg-2:nth-child(6n+1), .row-clear .col-lg-3:nth-child(4n+1), .row-clear .col-lg-4:nth-child(3n+1), .row-clear .col-lg-6:nth-child(2n+1){clear:none;} .row-clear .col-lg-2:nth-child(6n+1), .row-clear .col-lg-3:nth-child(4n+1), .row-clear .col-lg-4:nth-child(3n+1), .row-clear .col-lg-6:nth-child(2n+1){clear:both;} } @media (max-width: 767px){} @media (min-width: 768px) and (max-width: 991px) { } @media (min-width: 992px) and (max-width: 1199px) { } @media (min-width: 1200px){} */ /*For loop example start*/ /*For loop example end*/ @font-face { font-family: "FuturaPTBook"; src: url("fonts/FuturaPTBook.otf") format("opentype"); } body { margin: 0; padding: 0; font-family: "FuturaPTBook", sans-serif !important; background-color: White; } .lmask { position: fixed; height: 100%; width: 100%; background-color: #ffffff; bottom: 0; left: 0; right: 0; top: 0; z-index: 9999; opacity: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .lmask.done { opacity: 0; } .lmask.fixed { position: fixed; } .lmask h1 { width: 100%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); left: 50%; text-transform: uppercase; font-size: 130px; opacity: 0; font-weight: 700; text-align: center; -webkit-animation: in 2s ease-out forwards; animation: in 2s ease-out forwards; -webkit-animation-delay: 1s; animation-delay: 1s; margin-bottom: 0px !important; } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px) { .lmask h1 { font-size: 70px; } } @media (max-width: 575px), (min-width: 576px) and (max-width: 767px) { .lmask h1 { font-size: 35px; } } @-webkit-keyframes in { 0% { letter-spacing: 20px; opacity: 0; } 30% { letter-spacing: 4px; opacity: 1; } 100% { letter-spacing: 1px; opacity: 1; } } @keyframes in { 0% { letter-spacing: 20px; opacity: 0; } 30% { letter-spacing: 4px; opacity: 1; } 100% { letter-spacing: 1px; opacity: 1; } } div { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .content-holder { background-color: transparent; position: absolute; width: 100%; min-height: 100%; top: 0; left: 0; } .slider { width: 100%; height: 100vh; position: relative; overflow: hidden; z-index: 1; } .sliderImg { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; -webkit-transition: all 0.3s; transition: all 0.3s; } .sliderImgGenerated { -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; } .sliderImg, .sliderImgGenerated { cursor: pointer; -webkit-transition: margin 0.3s ease; transition: margin 0.3s ease; } .sliderImg:hover, .sliderImgGenerated:hover { margin-top: -5px; } .content-container { position: absolute; width: 100%; min-height: 100%; top: 0; left: 0; background-color: White; -webkit-transition: all 500ms; transition: all 500ms; will-change: background; } .section-title { pointer-events: none; } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px) { .section-title span { font-size: 105px !important; } } @media (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section-title span { font-size: 65px !important; line-height: 1em !important; } } .contact-me { top: 25px; right: 87px; font-size: 30px; position: fixed; font-weight: 700; mix-blend-mode: difference; display: inline-block; z-index: 2; -webkit-filter: invert(1) !important; filter: invert(1) !important; background-color: Transparent; -webkit-transition: all 0.2s; transition: all 0.2s; mix-blend-mode: difference !important; z-index: 120; opacity: 1; text-align: right; } .contact-me span { cursor: pointer; } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px) { .contact-me { font-size: 28px; } } @media (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-me { top: unset; right: unset; left: 15px; bottom: 15px; font-size: 22px; } } .ig { top: 26px; right: 40px; font-size: 30px; position: fixed; font-weight: 700; mix-blend-mode: difference; z-index: 2; -webkit-filter: invert(1) !important; filter: invert(1) !important; background-color: Transparent; -webkit-transition: all 0.2s; transition: all 0.2s; mix-blend-mode: difference !important; z-index: 120; display: inline-block; opacity: 1; text-align: right; } .ig a { color: inherit; text-decoration: none; } .ig span { cursor: pointer; } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px) { .ig { font-size: 28px; } } @media (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ig { right: 15px; top: 21px; font-size: 22px; } } .about { top: 25px; right: 250px; font-size: 30px; position: fixed; font-weight: 700; mix-blend-mode: difference; z-index: 2; -webkit-filter: invert(1) !important; filter: invert(1) !important; background-color: Transparent; -webkit-transition: all 0.2s; transition: all 0.2s; mix-blend-mode: difference !important; z-index: 120; display: inline-block; opacity: 1; text-align: right; } .about span { cursor: pointer; } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px) { .about { font-size: 28px; } } @media (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about { right: 204px; top: 20px; font-size: 22px; } } .all-projects { top: 25px; right: 380px; font-size: 30px; position: fixed; font-weight: 700; mix-blend-mode: difference; z-index: 2; -webkit-filter: invert(1) !important; filter: invert(1) !important; background-color: Transparent; -webkit-transition: all 0.2s; transition: all 0.2s; mix-blend-mode: difference !important; z-index: 120; display: inline-block; opacity: 1; text-align: right; } .all-projects span { cursor: pointer; } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px) { .all-projects { font-size: 28px; } } @media (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .all-projects { right: 55px; top: 20px; font-size: 22px; } } .top { bottom: 25px; right: 40px; font-size: 40px; position: fixed; font-weight: 500; mix-blend-mode: difference; left: 3%; z-index: 2; -webkit-filter: invert(1) !important; filter: invert(1) !important; background-color: Transparent; -webkit-transition: all 0.2s; transition: all 0.2s; mix-blend-mode: difference !important; z-index: 120; display: inline-block; opacity: 1; text-align: right; opacity: 0; } .top.active { opacity: 1; } .top .fas { cursor: pointer; } @media (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .top { width: 40px; left: unset; right: 20px; bottom: 15px; } } .section-title-slider span { font-size: 190px; line-height: 0.9em; } .section-title-section1 span { font-size: 150px; line-height: 1.1em; } .section-title-section2 span { font-size: 150px; line-height: 1.1em; } .section-title-section3 span { font-size: 150px; line-height: 1.1em; } .section-title-section4 span { font-size: 150px; line-height: 1.1em; } .section-title-section5 span { font-size: 150px; line-height: 1.1em; } .section-title-section6 span { font-size: 150px; line-height: 1.1em; } .section-title-section7 span { font-size: 150px; line-height: 1.1em; } .section-title-section8 span { font-size: 120px; line-height: 1.1em; } .section-title { position: fixed; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); mix-blend-mode: difference; left: 3%; z-index: 2; -webkit-filter: invert(1) !important; filter: invert(1) !important; background-color: Transparent; -webkit-transition: all 0.2s; transition: all 0.2s; mix-blend-mode: difference !important; z-index: 120; display: block; opacity: 0; pointer-events: none; } .section-title.show { opacity: 1; } .section-title span { font-weight: 800; letter-spacing: -3px; } .section-title.left { left: 3%; } .section-title.right { right: 3%; text-align: right; } .section-title.center { text-align: center; padding-left: 0px; padding-right: 0px; width: 100%; } .section1, .section2, .section3, .section4, .section5, .section6, .section7, .section8, .thankyou { position: relative; min-height: 120vw; } .section8 { min-height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 2%; font-size: 1.8em; font-weight: 400; line-height: 1.6em; overflow: hidden; padding-right: 2%; } @media (min-width: 1200px) and (max-width: 1549px) { .section8 { font-size: 1.6em; } } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px) { .section8 { font-size: 1.6em; } } @media (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section8 { font-size: 14px; } } .section8 .content div { width: 100%; } .section8 .content div span { background: -webkit-gradient(linear, left top, right top, from(#527bf1), color-stop(#24e6d4), to(#f731db)); background: linear-gradient(to right, #527bf1, #24e6d4, #f731db); background-size: 200% 200%; -webkit-animation: rainbow 2s ease-in-out infinite; animation: rainbow 2s ease-in-out infinite; background-clip: text; -webkit-background-clip: text; color: black; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px), (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section8 .content div span { background: none; } } .section8 .content div span a { -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .section8 .content div span:hover { color: rgba(0, 0, 0, 0); } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px), (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section8 .content div span:hover { color: black; } } .section8 .content div span:hover a { color: rgba(0, 0, 0, 0); } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px), (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section8 .content div span:hover a { color: black; } } .section8 a { color: Black; text-decoration: none; } .section8 a:hover { text-decoration: none; } .thankyou { min-height: 100vh; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 2%; font-size: 30px; font-weight: 600; line-height: 1.6em; overflow: hidden; padding-right: 2%; } @media (min-width: 1200px) and (max-width: 1549px) { .thankyou { font-size: 30px; } } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px) { .thankyou { font-size: 1.6em; } } @media (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .thankyou { font-size: 22px; } } .thankyou .content { width: 100%; } .thankyou .content div { width: 100%; } .thankyou .content .title { font-weight: 800; font-size: 140%; text-align: center; margin-bottom: 1.45em; } .thankyou .content .desc { text-align: center; } .thankyou .content .submit-container { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .thankyou .content .submit-container .btn { margin-top: 55px; color: White; font-size: 23px; font-weight: 700; background-color: Black; border: 1px solid Black; border-radius: 0; padding: 10px 25px; padding-top: 8px; text-decoration: none; } @media (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .thankyou .content .submit-container .btn { font-size: 18px; padding: 8px 20px; margin-top: 35px; } } .thankyou .content .submit-container .btn:hover { text-decoration: none; background-color: White; border: 1px solid Black; color: Black; } .thankyou .content .submit-container .btn:focus, .thankyou .content .submit-container .btn:active { -webkit-box-shadow: none; box-shadow: none; outline: none !important; } .thankyou a { color: Black; text-decoration: underline; } .thankyou a:hover { color: Black; text-decoration: underline; } video { max-height: 100vh; } .row1 { position: absolute; } .row2 { position: absolute; } .row3 { position: absolute; } .section1 { min-height: 140vh !important; margin-top: 10vh; margin-bottom: 10vh; } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px) { .section1 { min-height: 70vh !important; margin-top: 0vh !important; margin-bottom: 0vh !important; } } @media (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section1 { min-height: 60vh !important; margin-top: 0vh !important; margin-bottom: 0vh !important; } } @media (min-width: 2000px) { .section1 { min-height: 70vw !important; } } .section1 .row1 { top: 55%; text-align: right; right: 4%; } .section1 .row1 img { width: 45vw; } .section1 .row2 { top: 30%; text-align: left; left: 4%; } .section1 .row2 img { width: 40vw; } .section1 .row3 { top: 70%; text-align: left; left: 3%; } .section1 .row3 video { width: 45vw; } .section2 { margin-top: 10vh; margin-bottom: 10vh; min-height: 100vh !important; } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px) { .section2 { min-height: 70vh !important; margin-top: 0vh !important; margin-bottom: 0vh !important; } } @media (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section2 { min-height: 60vh !important; margin-top: 0vh !important; margin-bottom: 0vh !important; } } @media (min-width: 2000px) { .section2 { min-height: 70vw !important; } } .section2 .row1 { top: 48%; text-align: left; left: 3%; } .section2 .row1 img { width: 55vw; } .section2 .row2 { top: 50%; text-align: right; right: 5%; } .section2 .row2 img { width: 35vw; } .section3 { margin-top: 10vh; margin-bottom: 10vh; min-height: 120vh !important; } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px) { .section3 { min-height: 70vh !important; margin-top: 0vh !important; margin-bottom: 0vh !important; } } @media (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section3 { min-height: 60vh !important; margin-top: 0vh !important; margin-bottom: 0vh !important; } } @media (min-width: 2000px) { .section3 { min-height: 70vw !important; } } .section3 .row1 { top: 50%; text-align: left; left: 11%; } .section3 .row1 img { width: 37vw; } .section3 .row2 { top: 44%; text-align: right; right: 7%; } .section3 .row2 img { width: 38vw; } .section4 { margin-top: 10vh; margin-bottom: 10vh; min-height: 100vh !important; } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px) { .section4 { min-height: 70vh !important; margin-top: 0vh !important; margin-bottom: 0vh !important; } } @media (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section4 { min-height: 60vh !important; margin-top: 0vh !important; margin-bottom: 0vh !important; } } @media (min-width: 2000px) { .section4 { min-height: 70vw !important; } } .section4 .row1 { top: 40%; text-align: left; left: 8%; } .section4 .row1 img { width: 55vw; } .section4 .row2 { top: 60vh; text-align: right; right: 7vw; } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px) { .section4 .row2 { top: 40vh; } } @media (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section4 .row2 { top: 30vh; } } .section4 .row2 img { width: 35vw; } .section5 { margin-top: 10vh; margin-bottom: 10vh; min-height: 100vh !important; } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px) { .section5 { min-height: 70vh !important; margin-top: 0vh !important; margin-bottom: 0vh !important; } } @media (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section5 { min-height: 60vh !important; margin-top: 0vh !important; margin-bottom: 0vh !important; } } @media (min-width: 2000px) { .section5 { min-height: 70vw !important; } } .section5 .row1 { top: 48%; text-align: left; left: 6%; } .section5 .row1 img { width: 56vw; } .section5 .row2 { top: 18%; text-align: right; right: 7%; } .section5 .row2 img { width: 30vw; } .section5 .row3 { top: 65%; text-align: right; right: 5%; } .section5 .row3 img { width: 35vw; } .section6 { margin-top: 10vh; margin-bottom: 10vh; min-height: 100vh !important; } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px) { .section6 { min-height: 70vh !important; margin-top: 0vh !important; margin-bottom: 0vh !important; } } @media (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section6 { min-height: 60vh !important; margin-top: 0vh !important; margin-bottom: 0vh !important; } } @media (min-width: 2000px) { .section6 { min-height: 70vw !important; } } .section6 .row1 { top: 40%; text-align: right; right: 5%; } .section6 .row1 img { width: 45vw; } .section6 .row2 { top: 18%; text-align: left; left: 20%; } .section6 .row2 img { width: 35vw; } .section6 .row3 { top: 60%; text-align: left; left: 4%; } .section6 .row3 img { width: 40vw; } .section7 { margin-top: 10vh; margin-bottom: 10vh; min-height: 90vh !important; } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px) { .section7 { min-height: 70vh !important; margin-top: 0vh !important; margin-bottom: 0vh !important; } } @media (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section7 { min-height: 60vh !important; margin-top: 0vh !important; margin-bottom: 0vh !important; } } @media (min-width: 2000px) { .section7 { min-height: 70vw !important; } } .section7 .row1 { top: 25%; text-align: right; right: 5%; } .section7 .row1 img { width: 55vw; } .section7 .row2 { top: 45vh; text-align: left; left: 3%; } @media (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section7 .row2 { top: 32vh; } } .section7 .row2 img { width: 55vw; } .nicescroll-rails { z-index: 100 !important; } div#lightboxed--thumbs .lightboxed--thumb img { max-width: unset !important; } .contact-div { width: 650px; -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; position: fixed; background-color: white; z-index: 1000; opacity: 0; pointer-events: none; -webkit-transition: all 0.3s; transition: all 0.3s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); padding-top: 70px; padding-bottom: 10px; } @media (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-div { width: 100vw; height: 100vh; } } .contact-div textarea:focus, .contact-div input[type=text]:focus, .contact-div input[type=password]:focus, .contact-div input[type=datetime]:focus, .contact-div input[type=datetime-local]:focus, .contact-div input[type=date]:focus, .contact-div input[type=month]:focus, .contact-div input[type=time]:focus, .contact-div input[type=week]:focus, .contact-div input[type=number]:focus, .contact-div input[type=email]:focus, .contact-div input[type=url]:focus, .contact-div input[type=search]:focus, .contact-div input[type=tel]:focus, .contact-div input[type=color]:focus, .contact-div .uneditable-input:focus { border-color: #ced4da; -webkit-box-shadow: none; box-shadow: none; outline: 0 none; } .contact-div.active { opacity: 1; pointer-events: auto; } .contact-div .submit-container { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .contact-div .contact-title { text-align: center; font-size: 40px; font-weight: 700; margin-bottom: 35px; margin-top: -5px; } .contact-div .contact-close-btn { position: absolute; right: 30px; top: 30px; cursor: pointer; width: 40px; height: 40px; z-index: 1000; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25.414' height='25.414' viewBox='0 0 25.414 25.414'%3E%3Cg id='Group_57' data-name='Group 57' transform='translate(-182.05 -806.05)'%3E%3Cline id='Line_83' data-name='Line 83' x2='33.941' transform='translate(182.757 806.757) rotate(45)' fill='none' stroke='%23000000' stroke-width='2'/%3E%3Cline id='Line_84' data-name='Line 84' x2='33.941' transform='translate(206.757 806.757) rotate(135)' fill='none' stroke='%23000000' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A"); background-position: center; background-repeat: no-repeat; background-size: contain; } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px) { .contact-div .contact-close-btn { width: 35px; height: 35px; } } @media (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-div .contact-close-btn { right: 20px; top: 20px; width: 25px; height: 25px; } } .contact-div .form-container { width: 500px; max-width: 100%; padding: 15px; } .contact-div .form-container label { font-size: 25px; font-weight: 700; } .contact-div .form-container .form-control { border-radius: 0; padding: 15px 20px; min-height: 45px; font-size: 18px; background-color: #e6e6e6; color: Black; font-size: 18px; font-weight: 700; margin-bottom: 5px; } .contact-div .form-container .form-control::-webkit-input-placeholder { color: #666; font-size: 18px; font-weight: 700; } .contact-div .form-container .form-control::-moz-placeholder { color: #666; font-size: 18px; font-weight: 700; } .contact-div .form-container .form-control:-ms-input-placeholder { color: #666; font-size: 18px; font-weight: 700; } .contact-div .form-container .form-control::-ms-input-placeholder { color: #666; font-size: 18px; font-weight: 700; } .contact-div .form-container .form-control::placeholder { color: #666; font-size: 18px; font-weight: 700; } @media (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-div .form-container .form-control { min-height: 35px; } } .contact-div .form-container textarea { padding-top: 10px !important; padding-bottom: 10px !important; height: 135px; } .contact-div .form-container .btn { margin-top: 15px; color: White; font-size: 23px; font-weight: 700; background-color: Black; border: 1px solid Black; border-radius: 0; padding: 10px 25px; padding-top: 8px; } @media (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-div .form-container .btn { font-size: 18px; padding: 8px 20px; } } .contact-div .form-container .btn:hover { background-color: White; border: 1px solid Black; color: Black; } .menu-div { width: 100vw; height: 100vh; position: fixed; background-color: white; z-index: 1000; opacity: 0; pointer-events: none; -webkit-transition: all 0.3s; transition: all 0.3s; } .menu-div.active { opacity: 1; pointer-events: auto; } @media (min-width: 1550px), (min-width: 1200px) and (max-width: 1549px) { .menu-div.active .menu-item:nth-child(1) span { left: 26% !important; } .menu-div.active .menu-item:nth-child(2) span { left: 29% !important; } .menu-div.active .menu-item:nth-child(3) span { left: 32% !important; } .menu-div.active .menu-item:nth-child(4) span { left: 35% !important; } .menu-div.active .menu-item:nth-child(5) span { left: 38% !important; } .menu-div.active .menu-item:nth-child(6) span { left: 41% !important; } .menu-div.active .menu-item:nth-child(7) span { left: 44% !important; } .menu-div.active .menu-item:nth-child(8) span { left: 47% !important; } .menu-div.active .menu-item:nth-child(9) span { left: 50% !important; } .menu-div.active .menu-item:nth-child(10) span { left: 53% !important; } .menu-div.active .menu-item:nth-child(11) span { left: 56% !important; } .menu-div.active .menu-item:nth-child(12) span { left: 59% !important; } } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px), (max-width: 575px), (min-width: 576px) and (max-width: 767px) { .menu-div.active .menu-item:nth-child(1) span { left: 50% !important; } .menu-div.active .menu-item:nth-child(2) span { left: 50% !important; } .menu-div.active .menu-item:nth-child(3) span { left: 50% !important; } .menu-div.active .menu-item:nth-child(4) span { left: 50% !important; } .menu-div.active .menu-item:nth-child(5) span { left: 50% !important; } .menu-div.active .menu-item:nth-child(6) span { left: 50% !important; } .menu-div.active .menu-item:nth-child(7) span { left: 50% !important; } .menu-div.active .menu-item:nth-child(8) span { left: 50% !important; } .menu-div.active .menu-item:nth-child(9) span { left: 50% !important; } .menu-div.active .menu-item:nth-child(10) span { left: 50% !important; } .menu-div.active .menu-item:nth-child(11) span { left: 50% !important; } .menu-div.active .menu-item:nth-child(12) span { left: 50% !important; } } .menu-div .close-btn { position: absolute; right: 45px; top: 30px; cursor: pointer; width: 40px; height: 40px; z-index: 1000; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25.414' height='25.414' viewBox='0 0 25.414 25.414'%3E%3Cg id='Group_57' data-name='Group 57' transform='translate(-182.05 -806.05)'%3E%3Cline id='Line_83' data-name='Line 83' x2='33.941' transform='translate(182.757 806.757) rotate(45)' fill='none' stroke='%23000000' stroke-width='2'/%3E%3Cline id='Line_84' data-name='Line 84' x2='33.941' transform='translate(206.757 806.757) rotate(135)' fill='none' stroke='%23000000' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A"); background-position: center; background-repeat: no-repeat; background-size: contain; } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px) { .menu-div .close-btn { width: 35px; height: 35px; } } @media (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .menu-div .close-btn { right: 20px; top: 20px; width: 25px; height: 25px; } } .menu-div .menu-container { overflow-y: scroll; height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-item-align: center; align-self: center; } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px) { .menu-div .menu-container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .menu-div .menu-container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .menu-div .menu-container .menu-item { font-size: 45px; font-weight: 600; letter-spacing: 3px; position: relative; margin-bottom: 10px; -webkit-transition: all 0.4s; transition: all 0.4s; width: 100%; } .menu-div .menu-container .menu-item:nth-child(1) span { left: 0%; } .menu-div .menu-container .menu-item:nth-child(2) span { left: 0%; } .menu-div .menu-container .menu-item:nth-child(3) span { left: 0%; } .menu-div .menu-container .menu-item:nth-child(4) span { left: 0%; } .menu-div .menu-container .menu-item:nth-child(5) span { left: 0%; } .menu-div .menu-container .menu-item:nth-child(6) span { left: 0%; } .menu-div .menu-container .menu-item:nth-child(7) span { left: 0%; } .menu-div .menu-container .menu-item:nth-child(8) span { left: 0%; } .menu-div .menu-container .menu-item:nth-child(9) span { left: 0%; } .menu-div .menu-container .menu-item:nth-child(10) span { left: 0%; } .menu-div .menu-container .menu-item:nth-child(11) span { left: 0%; } .menu-div .menu-container .menu-item:nth-child(12) span { left: 0%; } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px) { .menu-div .menu-container .menu-item { width: 100%; font-size: 42px; margin-bottom: 6px; } } @media (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .menu-div .menu-container .menu-item { font-size: 24px; width: 100%; } } .menu-div .menu-container .menu-item:hover span { color: rgba(0, 0, 0, 0); } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px), (max-width: 575px), (min-width: 576px) and (max-width: 767px) { .menu-div .menu-container .menu-item:hover span { color: black; } } .menu-div .menu-container .menu-item:last-child { margin-bottom: 0px; } .menu-div .menu-container .menu-item span { -webkit-transition: all 0.3s; transition: all 0.3s; display: inline-block; position: relative; cursor: pointer; position: relative; background: -webkit-gradient(linear, left top, right top, from(#527bf1), color-stop(#24e6d4), to(#f731db)); background: linear-gradient(to right, #527bf1, #24e6d4, #f731db); background-size: 200% 200%; -webkit-animation: rainbow 2s ease-in-out infinite; animation: rainbow 2s ease-in-out infinite; background-clip: text; -webkit-background-clip: text; color: black; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px), (max-width: 575px), (min-width: 576px) and (max-width: 767px) { .menu-div .menu-container .menu-item span { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px), (max-width: 575px), (min-width: 576px) and (max-width: 767px) { .menu-div .menu-container .menu-item span { background: none; } } .menu-div .menu-container .menu-item span:after { content: ""; -webkit-transition: all 0.3s; transition: all 0.3s; position: absolute; bottom: 0; width: 0%; height: 5px; background-color: Black; left: 0; background: -webkit-gradient(linear, left top, right top, from(#527bf1), color-stop(#24e6d4), to(#f731db)); background: linear-gradient(to right, #527bf1, #24e6d4, #f731db); background-size: 200% 200%; -webkit-animation: rainbow 2s ease-in-out infinite; animation: rainbow 2s ease-in-out infinite; display: none; } @media (min-width: 768px) and (max-width: 991px), (min-width: 992px) and (max-width: 1199px) { .menu-div .menu-container .menu-item span:after { height: 4px; } } @-webkit-keyframes rainbow { 0% { background-position: left; } 50% { background-position: right; } 100% { background-position: left; } } @keyframes rainbow { 0% { background-position: left; } 50% { background-position: right; } 100% { background-position: left; } } .toggle-layer { opacity: 0; position: fixed; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0); z-index: 4; top: 0; pointer-events: none; -webkit-transition: all 0.3s; transition: all 0.3s; } .toggle-layer.active { background-color: rgba(0, 0, 0, 0.7); opacity: 1; pointer-events: auto; } /*# sourceMappingURL=style.css.map */