/*
**
**
**
**
**
**
**
**
** ======= ABOUT - COVER BANNER =============================
** ==========================================================
*/

.frame.cover-banner{
    position:relative;
    margin:0;
    width:100%;height:300px;padding:0;
    background-color:#48484A;
}
.frame.cover-banner > 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_1_0.jpg?v=5");background-repeat:no-repeat;background-size:cover;background-position:center;
}
.frame.cover-banner > figure.backdrop::before{
    content:'';
    position:absolute;
    bottom:42px;left:50%;
    width:10px;height:10px;
    background-color:#E8E8E8;
    -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;
}
.frame.cover-banner > .text-body{
    position:relative;z-index:1;
    top:144px;
    margin:0 auto;
    width:350px;height:auto;padding:0;
    text-align:center;
}
.frame.cover-banner > .text-body > h1{
    text-transform:uppercase;
    font-size:54px;color:#FFF;font-weight:700;letter-spacing:0.6px;line-height:60px;
}

/*
**
**
**
**
**
**
**
**
** ======= ABOUT - QUALITY FRAME ============================
** ==========================================================
*/

.frame.quality{
    position:relative;
    margin:0;
    width:100%;height:auto;padding:0;
}
.frame.quality > .safe-zone{
    position:relative;
    margin:0 auto;
    width:92%;max-width:1200px;height:auto;padding:100px 0 120px 0;
    text-align:center;
}


/*==== QUALITY FRAME - HIGHLIGHTS ==================*/
/*==================================================*/

.frame.quality > .safe-zone > .highlights{
    display:inline-block;
    position:relative;
    margin:0;
    vertical-align:top;
    width:40%;max-width:310px;height:auto;padding:50px 0 0 0;
}
.frame.quality > .safe-zone > .highlights > .highlight{
    position:relative;
    margin:0 0 32px 0;
    width:calc(100% - 42px);height:auto;padding:0 0 0 42px;
    background-repeat:no-repeat;background-size:32px auto;background-position:0 0;
    text-align:left;
}
.frame.quality > .safe-zone > .highlights > .highlight > h5{
    font-size:16px;color:#38383A;font-weight:700;letter-spacing:0;line-height:22px;
}
.frame.quality > .safe-zone > .highlights > .highlight > p{
    font-size:14px;color:#626264;font-weight:400;letter-spacing:0.2px;line-height:18px;
}


/*==== QUALITY FRAME - STANDARDS ===================*/
/*==================================================*/

.frame.quality > .safe-zone > .standards{
    display:inline-block;
    position:relative;
    margin:0 0 0 4%;
    vertical-align:top;
    width:56%;max-width:520px;height:auto;padding:0;
    background-color:#FFF;
    -webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px; 
    -webkit-box-shadow:0 8px 28px -8px rgba(30, 30, 32, 0.26);
	-moz-box-shadow:0 8px 28px -8px rgba(30, 30, 32, 0.26);
	box-shadow:0 8px 28px -8px rgba(30, 30, 32, 0.26);
}
.frame.quality > .safe-zone > .standards > .text-body{
    position:relative;
    margin:0 auto;
    width:88%;height:auto;padding:30px 0 50px 0;
    text-align:left;
}
.frame.quality > .safe-zone > .standards > .text-body > img{
    width:32px;height:auto;
}
.frame.quality > .safe-zone > .standards > .text-body > h4{
    padding:6px 0 0 0;
    font-size:28px;color:#38383A;font-weight:700;letter-spacing:0;line-height:32px;
}
.frame.quality > .safe-zone > .standards > .text-body > p{
    padding:12px 0 0 0;
    font-size:14.5px;color:#626264;font-weight:400;letter-spacing:0.4px;line-height:24px;
}

/*
**
**
**
**
**
**
**
**
** ======= ABOUT - HISTORY FRAME ============================
** ==========================================================
*/

.frame.history{
    position:relative;z-index:2;
    margin:0;
    width:100%;height:auto;padding:0;
    background-color:#38383A;
    background-image:url("native/resources/visual/interface/tile-BG_0_1.png?v=8");
}
.frame.history > .safe-zone{
    position:relative;
    margin:0 auto;
    width:88%;max-width:750px;height:auto;padding:80px 0 100px 0;
}
.frame.history > .safe-zone > .text-body{
    position:relative;
    margin:0 auto;
    width:100%;height:auto;padding:0;
    text-align:center;
}
.frame.history > .safe-zone > .text-body > img{
    width:32px;height:auto;
}
.frame.history > .safe-zone > .text-body > h3{
    padding:6px 0 0 0;
    font-size:30px;color:#E0E0E2;font-weight:500;letter-spacing:0;line-height:36px;
}
.frame.history > .safe-zone > .text-body > p{
    padding:12px 0 0 0;
    font-size:16px;color:#E0E0E2;font-weight:300;letter-spacing:0.6px;line-height:28px;
}

/*
**
**
**
**
**
**
**
**
** ======= ABOUT - GALLERY FRAME ============================
** ==========================================================
*/

.frame.gallery{
    position:relative;
    margin:0;
    width:100%;height:auto;padding:0;
    background-color:#E6E6E8;
}
.frame.gallery > .safe-zone{
    position:relative;
    margin:0 auto;
    width:100%;max-width:1200px;height:auto;padding:80px 0 160px 0;
    text-align:center;
}
.frame.gallery > .safe-zone > .heading{
    position:relative;
    margin:0 auto;
    width:100%;height:auto;padding:16px 0;
    text-align:left;
    font-size:30px;color:#38383A;font-weight:700;letter-spacing:0;line-height:36px;
}
.frame.gallery > .safe-zone > .heading > span{
    padding-left:26px;
}
.frame.gallery > .safe-zone > .column{
    display:inline-block;
    margin:0 1.5%;
    vertical-align:top;
    width:22%;height:auto;padding:0;
}
.frame.gallery > .safe-zone > .column > .photo{
    display:inline-block;
    margin:18px 0;
    vertical-align:top;
    width:100%;height:auto;padding:0;
    background-color:#FFF;
    overflow:hidden;
    cursor:pointer;
    -webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px; 
    -webkit-box-shadow:0 8px 26px -6px rgba(0, 0, 0, 0.42);
	-moz-box-shadow:0 8px 26px -6px rgba(0, 0, 0, 0.42);
	box-shadow:0 8px 26px -6px rgba(0, 0, 0, 0.42);
    -webkit-transition:-webkit-transform 280ms cubic-bezier(0.32, 0.22, 0.08, 1.38);
    -moz-transition:-moz-transform 280ms cubic-bezier(0.32, 0.22, 0.08, 1.38);
    -ms-transition:-ms-transform 280ms cubic-bezier(0.32, 0.22, 0.08, 1.38);
    -o-transition:-o-transform 280ms cubic-bezier(0.32, 0.22, 0.08, 1.38);
    transition:transform 280ms cubic-bezier(0.32, 0.22, 0.08, 1.38);
}
.frame.gallery > .safe-zone > .column > .photo:hover{
    z-index:2;
    -webkit-transform:scale(1.12);
    -moz-transform:scale(1.12);
    -ms-transform:scale(1.12);
    -o-transform:scale(1.12);
    transform:scale(1.12);
    -webkit-box-shadow:0 6px 26px -3px rgba(30, 31, 32, 0.68);
	-moz-box-shadow:0 6px 26px -3px rgba(30, 31, 32, 0.68);
	box-shadow:0 6px 26px -3px rgba(30, 31, 32, 0.68);
}
.frame.gallery > .safe-zone > .column > .photo > img{
    width:100%;height:auto;
}

/*
**
**
**
**
**
**
**
**
** ======= ABOUT - RESPONSIVE ===============================
** ==========================================================
*/

@media only screen and (max-width:700px){
    
    
    
    /*==== RESPONSIVE - QUALITY FRAME ==================*/
    /*==================================================*/
    
    .frame.quality > .safe-zone{
        padding:28px 0 100px 0;
    }
    .frame.quality > .safe-zone > .highlights,
    .frame.quality > .safe-zone > .standards{
        margin:16px 0;
        width:100%;
    }
    
    
    /*==== RESPONSIVE - GALLERY FRAME ==================*/
    /*==================================================*/
    
    .frame.gallery > .safe-zone > .heading{
        text-align:center;
    }
    .frame.gallery > .safe-zone > .heading > span{
        padding-left:0;
    }
    
    
    .frame.gallery > .safe-zone > .column{
        width:47%;   
    }
    .frame.gallery > .safe-zone > .column > .photo{
       margin:12px 0;
    }
    .frame.gallery > .safe-zone > .column > .photo > img{
        width:auto;max-width:100%;height:auto;min-height:100%;
    }

}