.mask_1_M .image, .mask_1_M .mask {
-webkit-transition: all .4s;
-moz-transition: all .4s;
-o-transition: all .4s
}
.mask_1_M .et_pb_button_module_wrapper {
position: absolute;
bottom: 0;
right: 0;
line-height: 100% !important
}
.mask_1_M .image {
transform: scale(1);
transition: all .4s
}
.mask_1_M img {
display: block !important
}
.mask_1_M .mask {
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
-ms-transform: translateX(-50%) translateY(-50%) scale(1);
transform: translateX(-50%) translateY(-50%) scale(1);
width: 1079px;
height: 510px;
transition: all .4s
}
.mask_2_M .image, body #page-container .mask_1_M .team_button {
-webkit-transition: all .4s;
-moz-transition: all .4s;
-o-transition: all .4s
}
.mask_1_M .mask .mask-border-bottom, .mask_1_M .mask .mask-border-top {
position: absolute;
background: #fff;
width: 100vw;
height: calc(50vh - 255px);
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%)
}
.mask_1_M .mask .mask-border {
font-size: 0 !important;
margin: 0 !important
}
.mask_1_M .mask .mask-border-top {
bottom: 100%
}
.mask_1_M .mask .mask-border-bottom {
top: 100%
}
.mask_1_M .mask .mask-border-left, .mask_1_M .mask .mask-border-right {
height: 100vh;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
background: #fff
}
.mask_1_M .mask .mask-border-right {
width: calc(50vw - 510px);
right: calc(100% - 1px)
}
.mask_1_M .mask .mask-border-left {
width: calc(50vw - 404.5px);
left: calc(100% - 1px)
}
body.clicked_button #page-container .mask_1_M .image {
transform: scale(1)
}
body #page-container .mask_1_M .team_button {
transition: all .4s
}
body.clicked_button #page-container .mask_1_M .team_button {
opacity: 0;
transform: translate(0, 30px)
}
body.clicked_button .et_pb_section.mask_1_M {
position: absolute;
width: 100%;
overflow: hidden;
top: 0
}
body.clicked_button .et_pb_section:not(.mask_1_M ) {
position: absolute;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
display: none;
bottom: 0;
margin: auto
}
html.clicked, html.clicked_mask_1 {
margin-top: 0 !important;
padding-top: 0 !important
}
body.clicked_button .mask {
transform: translateX(-50%) translateY(-50%) scale(6);
opacity: 0;
-webkit-transition: opacity .3s .3s, -webkit-transform .6s 0s;
transition: opacity .3s .3s, -webkit-transform .6s 0s;
transition: transform .6s 0s, opacity .3s .3s;
transition: transform .6s 0s, opacity .3s .3s, -webkit-transform .6s 0s;
-webkit-transition-timing-function: cubic-bezier(.59, .05, .82, .13);
transition-timing-function: cubic-bezier(.59, .05, .82, .13)
}
.mask_1_M .et_pb_button_module_wrapper .et_pb_button:hover:before {
-webkit-animation: slideRightLeft 1s infinite;
animation: slideRightLeft 1s infinite;
animation-iteration-count: 1;
-webkit-animation-duration: .4s;
animation-duration: .4s
}
@-webkit-keyframes slideRightLeft {
0%, 100% {
opacity: 1;
transform: translate(0, 0)
}
25% {
opacity: 0;
transform: translate(100%, 0)
}
74% {
opacity: 0
}
75% {
opacity: 1;
transform: translate(-100%, 0)
}
}
@keyframes slideRightLeft {
0%, 100% {
opacity: 1;
transform: translate(0, 0)
}
25% {
opacity: 0;
transform: translate(100%, 0)
}
74% {
opacity: 0
}
75% {
opacity: 1;
transform: translate(-100%, 0)
}
}
.slideRightLeft {
-webkit-animation-name: slideRightLeft;
animation-name: slideRightLeft
}
body.clicked_button .mask_1_M .et_pb_blurb.image {
height: 100%
}
@media only screen and (min-width: 1920px) {
.mask_1_M .mask .mask-border-top {
bottom: calc(100% - 2px) !important;
height: calc(50vh - 247px);
}
.mask_1_M .mask .mask-border-right {
right: calc(100% - 2px) !important;
}
.mask_1_M .mask .mask-border-bottom {
top: calc(100% - 2px) !important;
height: calc(50vh - 230px);
}
.mask_1_M .mask .mask-border-left {
left: calc(100% - 2px);
}
}
@media only screen and (max-width: 1390px) {
.mask_1_M .et_pb_blurb.image {
top: 50% !important;
transform: translate(0, -50%) !important;
height: 440px
}
.mask_1_M .mask {
width: 830px;
height: 392px
}
.mask_1_M .mask .mask-border-bottom, .mask_1_M .mask .mask-border-top {
height: calc(50vh - 195px)
}
.mask_1_M .mask .mask-border-right {
width: calc(50vw - 400px)
}
}
@media only screen and (max-width: 980px) {
.mask_1_M .et_pb_blurb.image {
height: 400px
}
.mask_1_M .mask {
width: 720px;
height: 340px
}
.mask_1_M .mask .mask-border-bottom, .mask_1_M .mask .mask-border-top {
height: calc(50vh - 170px)
}
.mask_1_M .mask .mask-border-left, .mask_1_M .mask .mask-border-right {
width: calc(50vw - 357px)
}
}
@media only screen and (max-width: 767px) {
.mask_1_M .et_pb_blurb.image {
height: 260px
}
.mask_1_M .mask {
width: 450px;
height: 212px
}
.mask_1_M .mask .mask-border-bottom, .mask_1_M .mask .mask-border-top {
height: calc(50vh - 106px)
}
.mask_1_M .mask .mask-border-left, .mask_1_M .mask .mask-border-right {
width: calc(50vw - 220px)
}
.mask_1_M .et_pb_button_module_wrapper {
bottom: -40px;
right: 0;
left: 0
}
}
@media only screen and (max-width: 480px), screen and (max-height: 480px) {
.mask_1_M .et_pb_blurb.image {
height: 200px
}
.mask_1_M .mask {
width: 300px;
height: 140px
}
.mask_1_M .mask .mask-border-bottom, .mask_1_M .mask .mask-border-top {
height: calc(50vh - 70px)
}
.mask_1_M .mask .mask-border-left, .mask_1_M .mask .mask-border-right {
width: calc(50vw - 146px)
}
.mask_1_M .et_pb_button_module_wrapper {
bottom: -40px;
right: 0;
left: 0
}
}
@media only screen and (max-width: 767px) and (min-height: 601px) {
.mask_1_M .mask img {
height: 400px
}
.mask_1_M .et_pb_blurb.image {
height: 405px
}
.mask_1_M .mask {
height: 400px
}
}
@media only screen and (max-width: 767px) and (max-height: 600px) {
.mask_1_M .mask img {
height: 200px
}
.mask_1_M .et_pb_blurb.image {
height: 205px
}
.mask_1_M .mask {
height: 200px
}
}
.mask_2_M .image {
transform: scale(1);
transition: all .4s
}
.mask_2_M .project_content img {
z-index: 3;
position: relative
}
.mask_2_M img {
display: block !important
}
.mask_2_M .mask {
position: absolute;
left: 43%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
-ms-transform: translateX(-50%) translateY(-50%) scale(1);
transform: translateX(-50%) translateY(-50%) scale(1);
width: 809px;
height: 538px;
-webkit-transition: all .4s;
-moz-transition: all .4s;
-o-transition: all .4s;
transition: all .4s
}
.mask_2_M .mask .mask-border-bottom, .mask_2_M .mask .mask-border-top {
position: absolute;
background: #fff;
width: 100vw;
height: calc(50vh - 265px);
left: 0;
left: 67%;
right: auto;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%)
}
.mask_2_M .mask .mask-border-top {
bottom: 100%
}
.mask_2_M .mask .mask-border-bottom {
top: calc(100% - 1px)
}
.mask_2_M .mask .mask-border-left, .mask_2_M .mask .mask-border-right {
height: 100vh;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
background: #fff
}
.mask_2_M .mask .mask-border {
margin: 0 !important
}
.mask_2_M .mask .mask-border-right {
width: calc(50vw - 404.5px);
right: calc(100% - 1px)
}
.mask_2_M .mask .mask-border-left {
width: calc(57vw - 404.5px);
left: calc(100% - 1px)
}
.mask_2_M .mask .et_pb_button_module_wrapper {
z-index: 9;
position: absolute;
bottom: -36px;
right: -14vw;
width: 100px;
height: 100px;
display: table;
border-width: 0 !important;
border-radius: 100px
}
body.clicked_mask #wprmenu_bar, body.clicked_mask iframe[name=google_conversion_frame] {
display: none !important
}
.mask_2_M .et_pb_button_module_wrapper a:hover:before {
transform: rotate(-112deg)
}
body.clicked_mask .et_pb_section:not(.mask_2_M ) {
position: absolute;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
display: none
}
body.clicked_mask .mask {
transform: translateX(-50%) translateY(-50%) scale(6);
opacity: 0;
-webkit-transition: opacity .3s .3s, -webkit-transform .6s 0s;
transition: opacity .3s .3s, -webkit-transform .6s 0s;
transition: transform .6s 0s, opacity .3s .3s;
transition: transform .6s 0s, opacity .3s .3s, -webkit-transform .6s 0s;
-webkit-transition-timing-function: cubic-bezier(.59, .05, .82, .13);
transition-timing-function: cubic-bezier(.59, .05, .82, .13)
}
body.clicked_mask #page-container #et-main-area {
padding-top: 0
}
body.clicked_mask .project_content {
-webkit-overflow-scrolling: touch;
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0s, visibility 0s;
transition: opacity 0s, visibility 0s
}
body .et_pb_promo.about_title .et_pb_promo_description {
-webkit-transition: all .4s;
-moz-transition: all .4s;
-o-transition: all .4s;
transition: all .4s
}
body.clicked_mask .et_pb_promo.about_title .et_pb_promo_description {
opacity: 0 !important
}
body.clicked_mask .et_pb_promo.about_title .et_pb_promo_description h2 {
margin-bottom: -24px;
margin-right: 0
}
body #page-container .mask_2_M .mask-top .et_pb_button_module_wrapper:last-child {
margin: 0;
position: absolute;
right: 80px;
top: 110px;
line-height: 100% !important;
z-index: 9999;
opacity: 0
}
body.clicked_mask #page-container .mask_2_M .read-our-news {
transform: scale(0)
}
body.clicked_mask #page-container .mask_2_M .mask-top .et_pb_button_module_wrapper:last-child {
opacity: 1;
-webkit-transition-duration: .7s;
-webkit-transition-delay: .3s;
transition-duration: .7s;
transition-delay: .3s
}
body.clicked_mask .mask_2_M .image {
transform: scale(1.1)
}
body.unclicked_mask #page-container .mask_2_M .read-our-news, body.unclicked_mask .et_pb_promo.about_title .et_pb_promo_description {
opacity: 0;
-webkit-transition: opacity 0s;
transition: opacity 0s
}
@media only screen and (max-width: 1390px) {
.mask_2_M .mask {
width: 655px;
height: 435px
}
.mask_2_M .mask .mask-border-bottom, .mask_2_M .mask .mask-border-top {
height: calc(50vh - 216px)
}
.mask_2_M .mask .mask-border-right {
width: calc(50vw - 328px);
height: 101vh
}
.mask_2_M .mask .mask-border-left {
width: calc(57vw - 320px)
}
body .mask_2_M .et_pb_promo.about_title .et_pb_promo_description {
right: -200px
}
}
@media only screen and (max-width: 980px) {
.mask_2_M .mask {
width: 571px;
height: 380px
}
.mask_2_M .mask .mask-border-bottom, .mask_2_M .mask .mask-border-top {
height: calc(50vh - 188px)
}
.mask_2_M .mask .mask-border-left {
width: calc(57vw - 282px)
}
body .mask_2_M .et_pb_promo.about_title .et_pb_promo_description {
right: -120px
}
body .mask_2_M .project_content .et_pb_promo_description {
padding: 5vw 20%
}
body .mask_2_M .et_pb_promo.about_title .et_pb_promo_description h2 {
margin-bottom: -17px
}
}
@media only screen and (max-width: 767px) {
.mask_2_M .mask {
width: 390px;
height: 260px
}
.mask_2_M .mask .mask-border-bottom, .mask_2_M .mask .mask-border-top {
height: calc(50vh - 129px);
left: 60%
}
.mask_2_M .mask .mask-border-left {
width: calc(57vw - 193px)
}
.mask_2_M .mask .mask-border-right {
width: calc(50vw - 227px)
}
body .mask_2_M .et_pb_promo.about_title .et_pb_promo_description {
right: -60px
}
body .mask_2_M .et_pb_button.read-our-news:before {
width: 160px;
top: 41px;
left: -29px
}
body .mask_2_M .project_content .et_pb_promo_description {
padding: 5vw 10%
}
body #page-container .mask_2_M .mask-top .et_pb_button_module_wrapper:last-child a:before {
display: none !important
}
body #page-container .mask_2_M .mask-top .et_pb_button_module_wrapper:last-child {
top: 60px;
right: 40px
}
}
@media only screen and (max-width: 480px), screen and (max-height: 480px) {
.mask_2_M .mask {
width: 270px;
height: 180px
}
.mask_2_M .mask .mask-border-bottom, .mask_2_M .mask .mask-border-top {
height: calc(50vh - 89px);
left: 59%
}
.mask_2_M .mask .mask-border-left {
width: calc(57vw - 131px)
}
.mask_2_M .mask .mask-border-right {
width: calc(50vw - 107px)
}
body .mask_2_M .et_pb_promo.about_title .et_pb_promo_description {
right: -40px
}
.mask_2_M .mask .et_pb_button_module_wrapper {
bottom: -100px
}
}