/*
**
**
**
**
**
**
**
**
** ======= INDEX - COVER FRAME ==============================
** ==========================================================
*/

.frame.cover{
    position:relative;
    margin:0;
    width:100%;height:600px;padding:0;
    background-color:#28282A;
}
.frame.cover::after{
    content:'';
    position:absolute;z-index:0;
    top:0;right:-500px;
    margin:0;
    width:666px;height:100%;padding:0;
    background-color:rgba(70, 70, 72, 0.9);
    background-image:url("native/resources/visual/interface/tile-BG_0_0.png?v=10");
    -webkit-transform-origin:100% 0;
    -moz-transform-origin:100% 0;
    -ms-transform-origin:100% 0;
    transform-origin:100% 0;
    -webkit-transform:skew(-38deg);
    -moz-transform:skew(-38deg);
    -ms-transform:skew(-38deg);
    transform:skew(-38deg);
}
.frame.cover > figure.backdrop{
    position:absolute;z-index:0;
    top:0;left:0;
    margin:0;
    width:100%;height:100%;padding:0;
    background-color:transparent;
    background-image:url("native/resources/visual/photography/BG_0_0.jpg?v=6");background-repeat:no-repeat;background-size:cover;background-position:center;
}


/*==== COVER FRAME - TEXT BODY =====================*/
/*==================================================*/

.frame.cover > .text-body{
    position:absolute;z-index:1;
    top:154px;right:0;
    margin:0;
    width:490px;height:auto;padding:0;
    text-align:left;
}
.frame.cover > .text-body > .NUI-logo{
    display:none;
    margin:0 auto 22px auto;
    width:184px;
}


/*==== COVER FRAME - HEADING =======================*/
/*==================================================*/

.frame.cover > .text-body > h2{
    text-transform:uppercase;
    text-shadow:0 0 8px rgba(0, 0, 0, 0.22);
    font-family:'Saira', sans-serif;font-size:82px;color:#D45D22;font-weight:900;letter-spacing:0.4px;line-height:80px;
}
.frame.cover > .text-body > h2 > span{
    display:block;
}
.frame.cover > .text-body > h2 > span:nth-child(1){
    padding-left:246px;
} 
.frame.cover > .text-body > h2 > span:nth-child(2){
    padding-left:186px;
}
.frame.cover > .text-body > h2 > span:nth-child(3){
    padding-left:120px;
}
.frame.cover > .text-body > h2 > span:nth-child(4){
    padding-left:38px;
}


/*==== COVER FRAME - SERVICE BULLETS & CTA =========*/
/*==================================================*/

.frame.cover > .text-body > .service-bullets{
    position:relative;
    margin:26px 0 0 0;
    width:calc(100% - 16px);height:auto;padding:10px 8px;
    background-color:#A0A0A2;
    border-left:3px solid #D45D22;
    -webkit-box-shadow:0 4px 18px -2px rgba(20, 20, 22, 0.22);
	-moz-box-shadow:0 4px 18px -2px rgba(20, 20, 22, 0.22);
	box-shadow:0 4px 18px -2px rgba(20, 20, 22, 0.22);
}
.frame.cover > .text-body > .service-bullets > h1{}
.frame.cover > .text-body > .service-bullets > h1 > span{
    display:inline-block;
    vertical-align:top;
    text-shadow:0 0.5px 3px rgba(0, 0, 0, 0.32), 0 0 18px rgba(0, 0, 0, 0.12);
    font-size:20px;color:#F0F0F2;font-weight:400;letter-spacing:0.4px;line-height:20px;
}
.frame.cover > .text-body > .service-bullets > h1 > span:not(:last-child)::after{
    content:'';
    display:inline-block;
    margin:0 5px;
    vertical-align:middle;
    width:6px;height:6px;padding:0;
    background-color:#D45D22;
    -webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%; 
}

.frame.cover > .text-body button.KUI-button{ 
    display:none;
    margin:10px 0 0 0;
}


/*
**
**
**
**
**
**
**
**
** ======= INDEX - GALLERY SERVICES FRAME ===================
** ==========================================================
*/

.frame.services{
    position:relative;
    margin:0;
    width:100%;height:auto;padding:0;
    background-color:#E6E6E8;
} 
.frame.services > .safe-zone{
    position:relative;
    margin:0 auto;
    width:100%;max-width:1250px;height:auto;padding:0;
    overflow:hidden;
}
.frame.services > .safe-zone > .service{
    display:block;
    position:relative;
    left:-90px;
    margin:88px auto;
    width:calc(100% + 180px);height:380px;padding:0;
} 
.frame.services > .safe-zone > .service:nth-child(odd){
    text-align:right;
}
.frame.services > .safe-zone > .service > .text-body,
.frame.services > .safe-zone > .service > .photo{
    overflow:hidden;
    -webkit-transform:skewX(24deg);
    -moz-transform:skewX(24deg);
    -ms-transform:skewX(24deg);
    -o-transform:skewX(24deg);
    transform:skewX(24deg);
}
.frame.services > .safe-zone > .service > .text-body > .safe-zone,
.frame.services > .safe-zone > .service > .photo > figure{
    -webkit-transform:skewX(-24deg);
    -moz-transform:skewX(-24deg);
    -ms-transform:skewX(-24deg);
    -o-transform:skewX(-24deg);
    transform:skewX(-24deg);
}


/*==== SERVICES - TEXT SIDE ========================*/
/*==================================================*/

.frame.services > .safe-zone > .service > .text-body{
    position:absolute;z-index:3;
    top:0;left:0;
    width:472px;height:100%;
    background-color:#FDFDFE;
    text-align:left;
}
.frame.services > .safe-zone > .service:nth-child(even) > .text-body{
    left:initial;right:0;
}
.frame.services > .safe-zone > .service > .text-body > .safe-zone{
    position:relative;z-index:2;
    margin:0;
    vertical-align:top;
    width:62%;height:auto;padding:100px 22px 0 162px;
    text-align:left;
}
.frame.services > .safe-zone > .service:nth-child(even) > .text-body > .safe-zone{
    padding:70px 0 0 100px;
}
.frame.services > .safe-zone > .service > .text-body > .safe-zone > img{
    display:none;
    width:32px;height:auto;
}
.frame.services > .safe-zone > .service > .text-body > .safe-zone > h5{
    text-transform:uppercase;
    font-family:'Saira', sans-serif;font-size:34px;color:#404042;font-weight:900;letter-spacing:0;line-height:36px;   
}
.frame.services > .safe-zone > .service.flame_cutting > .text-body > .safe-zone > h5{
    font-size:32px;line-height:34px;
}
.frame.services > .safe-zone > .service > .text-body > .safe-zone > h6{
    text-transform:uppercase;
    font-family:'Saira', sans-serif;font-size:20px;color:#707072;font-weight:700;letter-spacing:0;line-height:22px;   
}
.frame.services > .safe-zone > .service > .text-body > .safe-zone > p{
    font-size:15.5px;color:#303032;font-weight:500;letter-spacing:0.2px;line-height:21px;
}
.frame.services > .safe-zone > .service > .text-body > .safe-zone > p::before{
    content:'';
    display:block;
    width:38px;height:3px;padding:0;
    margin:4px 0 10px 0;
    background-color:#D45D22;
}
.frame.services > .safe-zone > .service > .text-body > .safe-zone button{
    margin:2px 0 0 0;
    padding:8px 16px 6px 0;
    background-image:url("native/resources/visual/interface/sub-arrow-right_0_2.png");background-size:16px auto;background-position:right 9px;
    font-size:14px;color:#D45D22;letter-spacing:0.2px;
}
.frame.services > .safe-zone > .service > .text-body > .safe-zone button::after{
    background-color:#D45D22;
}




/*==== SERVICES - PHOTO SIDE =======================*/
/*==================================================*/

.frame.services > .safe-zone > .service > .photo{
    display:inline-block; 
    position:relative;z-index:1;
    margin:0;
    vertical-align:top;
    width:calc(100% - 488px);height:100%;padding:0;
    background-color:#E0E0E2;
}
.frame.services > .safe-zone > .service > .photo > figure{
    position:absolute;z-index:0;
    top:0;left:-400px;right:-200px;
    margin:0 auto;
    width:calc(100% + 180px);height:100%;padding:0;
    background-color:transparent;
    background-repeat:no-repeat;background-size:cover;background-position:center;
    opacity:0;
    -webkit-transition:left 400ms ease, opacity 300ms ease;
    -moz-transition:left 400ms ease, opacity 300ms ease;
    -ms-transition:left 400ms ease, opacity 300ms ease;
    -o-transition:left 400ms ease, opacity 300ms ease;
    transition:left 400ms ease, opacity 300ms ease;
}
.frame.services > .safe-zone > .service > .photo > figure.active{
    z-index:1;
    left:-200px;
    opacity:1;
}
.frame.services > .safe-zone > .service > button.next-photo{
    position:absolute;z-index:4;
    top:0;bottom:0;right:90px;
    margin:auto 0;
    width:38px;height:50px;
    background-color:#D45D22;
    background-image:url("native/resources/visual/interface/sub-arrow-right_0_1.png");background-repeat:no-repeat;background-size:20px auto;background-position:center;
    cursor:pointer;
    -webkit-box-shadow:0 1px 18px 0 rgba(10, 0, 0, 0.62);
	-moz-box-shadow:0 1px 18px 0 rgba(10, 0, 0, 0.62);
	box-shadow:0 1px 18px 0 rgba(10, 0, 0, 0.62);
    -webkit-transition:width 120ms ease;
    -moz-transition:width 120ms ease;
    -ms-transition:width 120ms ease;
    -o-transition:width 120ms ease;
    transition:width 120ms ease;
}
.frame.services > .safe-zone > .service:nth-child(even) > button.next-photo{
    left:90px;
}
.frame.services > .safe-zone > .service > button.next-photo:hover{
    width:44px;
}

/*
**
**
**
**
**
**
**
**
** ======= INDEX - ABOUT PREVIEW ============================
** ==========================================================
*/

.frame.about-preview{
    position:relative;z-index:2;
    margin:0;
    width:100%;height:auto;padding:0;
    background-color:#FDFDFE;
}
.frame.about-preview > .safe-zone{
    position:relative;
    margin:0 auto;
    width:100%;max-width:932px;height:auto;padding:80px 0 120px 0;
    text-align:center;
}


/*==== ABOUT PREVIEW - TEXT BODY ==================*/
/*==================================================*/

.frame.about-preview > .safe-zone > .text-body{
    position:relative;
    margin:0 auto;
    width:92%;max-width:650px;height:auto;padding:0;
    text-align:center;
}
.frame.about-preview > .safe-zone > .text-body > h3{
    font-size:34px;color:#404042;font-weight:700;letter-spacing:0;line-height:38px;
}
.frame.about-preview > .safe-zone > .text-body > p{
    padding:12px 0 0 0;
    font-size:16px;color:#404042;font-weight:400;letter-spacing:0.4px;line-height:24px;
}


/*==== ABOUT PREVIEW - HIGHLIGHTS ==================*/
/*==================================================*/

.frame.about-preview > .safe-zone > .highlights{
    position:relative;
    margin:50px 0 0 0;
    width:100%;height:auto;padding:0;
    text-align:center;
    font-size:0;
}
.frame.about-preview > .safe-zone > .highlights > .highlight{
    display:inline-block;
    position:relative;
    margin:0;
    vertical-align:top;
    width:30.7%;height:322px;padding:0;
    background-color:#FFF;
    background-repeat:no-repeat;background-size:cover;background-position:center;
    white-space:normal;
    text-align:left;
    -webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px; 
    -webkit-box-shadow:0 12px 26px -2px rgba(20, 20, 22, 0.42);
	-moz-box-shadow:0 12px 26px -2px rgba(20, 20, 22, 0.42);
	box-shadow:0 12px 26px -2px rgba(20, 20, 22, 0.42);
}
.frame.about-preview > .safe-zone > .highlights > .highlight:nth-child(1){
    background-image:url("native/resources/visual/photography/highlight_0_0.jpg?v=2");
}
.frame.about-preview > .safe-zone > .highlights > .highlight:nth-child(2){
    margin:0 2.5%;
    background-image:url("native/resources/visual/photography/highlight_1_0.jpg?v=1");
}
.frame.about-preview > .safe-zone > .highlights > .highlight:nth-child(3){
    background-image:url("native/resources/visual/photography/highlight_2_0.jpg?v=2");
}
.frame.about-preview > .safe-zone > .highlights > .highlight::after{
    content:'';
    position:absolute;z-index:0;
    top:0;left:0;
    width:100%;height:100%;
    background-image:-webkit-linear-gradient(90deg, rgba(20, 20, 22, 1), rgba(20, 20, 22, 0.32));
    background-image:-moz-linear-gradient(90deg, rgba(20, 20, 22, 1), rgba(20, 20, 22, 0.32));
    background-image:-o-linear-gradient(90deg, rgba(20, 20, 22, 1), rgba(20, 20, 22, 0.32));
    background-image:linear-gradient(90deg, rgba(20, 20, 22, 1), rgba(20, 20, 22, 0.32));
}
.frame.about-preview > .safe-zone > .highlights > .highlight > .text-body{
    position:relative;z-index:2;
    margin:0 auto;
    width:88%;height:100%;padding:22px 0 0 0;
}
.frame.about-preview > .safe-zone > .highlights > .highlight > .text-body > h3{
    text-transform:uppercase;
    font-size:28px;color:rgba(255, 255, 255, 0.72);font-weight:700;letter-spacing:0.4px;line-height:38px;
}
.frame.about-preview > .safe-zone > .highlights > .highlight > .text-body > h3 > span{
    font-size:38px;color:#FFF;line-height:38px;vertical-align:bottom;
}
.frame.about-preview > .safe-zone > .highlights > .highlight > .text-body > h3.small{
    padding-top:8px;
    font-size:24px;line-height:28px;
}

/*
**
**
**
**
**
**
**
**
** ======= INDEX - SERVICES BANNER ==========================
** ==========================================================
*/

.banner-frame.services{
    position:relative;z-index:2;
    margin:0;
    width:100%;min-width:430px;height:300px;padding:0;
    background-color:#000;
    background-image:url("native/resources/visual/photography/banner_0_0.jpg");background-repeat:no-repeat;background-size:cover;background-position:center;
    -webkit-box-shadow:0 6px 24px -5px rgba(0, 0, 0, 0.42);
	-moz-box-shadow:0 6px 24px -5px rgba(0, 0, 0, 0.42);
	box-shadow:0 6px 24px -5px rgba(0, 0, 0, 0.42);
    overflow:hidden;
} 
.banner-frame.services > h5{
    display:inline-block;
    vertical-align:top;
    width:430px;height:auto;padding:38px 0 0 22px;
    text-align:left;text-transform:uppercase;
    font-size:42px;color:rgba(218, 218, 220, 0.88);font-weight:700;letter-spacing:0.6px;line-height:48px;
}
.banner-frame.services button{
    margin:18px 0 0 20px;
    background-image:url("native/resources/visual/interface/add_1_0.png?v=2");background-position:calc(100% - 6px);
    color:#D8D8DA;
    -webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px; 
}
.banner-frame.services::after{
    content:'';
    position:absolute;
    bottom:-26px;right:38%;
    width:150px;height:20px;
    background-color:rgba(255, 238, 238, 0.32);
    -webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%; 
    -webkit-box-shadow:0 0 70px 64px rgba(255, 228, 255, 1);
	-moz-box-shadow:0 0 70px 64px rgba(255, 228, 255, 1);
	box-shadow:0 0 70px 64px rgba(255, 228, 255, 1);
    -webkit-animation:flicker 200ms linear alternate infinite;
    -moz-animation:flicker 200ms linear alternate infinite;
    -o-animation:flicker 200ms linear alternate infinite;
    animation:flicker 200ms linear alternate infinite;
}

/*
**
**
**
**
**
**
**
**
** ======= INDEX - RESPONSIVE ===============================
** ==========================================================
*/

@media only screen and (max-width:860px){

    
    /*==== RESPONSIVE - HIGHLIGHTS =====================*/
    /*==================================================*/
    
    .frame.about-preview > .safe-zone > .highlights{
        width:92%;padding:0 6% 50px 6%;
        white-space:nowrap;
        overflow-x:scroll;
        -webkit-scroll-snap-type:x mandatory;  
        scroll-snap-type:x mandatory;  
        -webkit-overflow-scrolling:touch;
    }
    .frame.about-preview > .safe-zone > .highlights > .highlight{
        margin:0 18px !important;
        width:calc(100% - 100px);max-width:400px;height:350px;
        -webkit-scroll-snap-align:center;
        scroll-snap-align:center;
    }
    
    
    /*==== RESPONSIVE - SERVICES BANNER ================*/
    /*==================================================*/
    
    .banner-frame.services > h5{
        padding:18px 0 0 26px;
        font-size:46px;color:#DDD;line-height:52px;
    }
    .banner-frame.services button.KUI-button{
        background-color:#000;
        overflow:hidden;
    }
    
    
    /*==== RESPONSIVE - SERVICES =======================*/
    /*==================================================*/
    
    .frame.services > .safe-zone > .service{
        left:0;
        width:100%;
        -webkit-box-shadow:0 8px 26px -2px rgba(20, 20, 22, 0.22);
	   -moz-box-shadow:0 8px 26px -2px rgba(20, 20, 22, 0.22);
	   box-shadow:0 8px 26px -2px rgba(20, 20, 22, 0.22);
    }
    .frame.services > .safe-zone > .service > .text-body,
    .frame.services > .safe-zone > .service > .text-body > .safe-zone,
    .frame.services > .safe-zone > .service > .photo,
    .frame.services > .safe-zone > .service > .photo > figure{
        -webkit-transform:skew(0);
        -moz-transform:skew(0);
        -ms-transform:skew(0);
        transform:skew(0);
    }
    .frame.services > .safe-zone > .service > .text-body{
        width:50% !important;
        background-color:rgba(255, 255, 255, 0.8);
        text-align:center !important;
    }
    .frame.services > .safe-zone > .service > .text-body::after{
        display:none;
    }
    .frame.services > .safe-zone > .service > .text-body > .safe-zone{
        margin:0 auto;
        width:88%;padding:42px 0 0 0 !important;
    }
    .frame.services > .safe-zone > .service.flame_cutting > .text-body > .safe-zone{
        padding-top:20px !important;
    }
    .frame.services > .safe-zone > .service > .text-body > .safe-zone > h5{
        font-size:28px !important;line-height:30px !important;
    }
    .frame.services > .safe-zone > .service > .text-body > .safe-zone > p{
        font-size:16px;line-height:22px;
    }
    .frame.services > .safe-zone > .service:nth-child(even) > button.next-photo{
        left:0;
    }
    .frame.services > .safe-zone > .service:nth-child(odd) > button.next-photo{
        right:0;
    }
    .frame.services > .safe-zone > .service > .photo{
        width:100%;
    }
    
}



@media only screen and (max-width:700px){


    /*==== RESPONSIVE - COVER ==========================*/
    /*==================================================*/
    
    .frame.cover{
        height:700px;
    }
    .frame.cover::after{
        display:none;
    }
    .frame.cover > .text-body{
        top:0;left:0;
        width:100%;height:calc(100% - 132px);padding-top:132px;
        text-align:center;
        background-color:rgba(42, 42, 44, 0.82);
        background-image:url("native/resources/visual/interface/tile-BG_0_1.png?v=1");
    }
    .frame.cover > .text-body > figure.NUI-logo{
        display:block;
    }
    .frame.cover > .text-body > h2 > span{
        padding:0 !important;
    }
    .frame.cover > .text-body > .service-bullets{
        background-color:transparent;
        border-width:0;
    }
    .frame.cover > .text-body > .service-bullets > h1 > span{
        font-size:19px;
    }
    .frame.cover > .text-body button.KUI-button{
        display:block;
        margin:16px auto !important;
        width:332px;height:52px;
        font-size:14.5px;
    }
    
}