/******************************************************************

	

	

	@ Item          VERVE ART // Coming Soon

	@ Version       3.4.4

	@ Author		Bell Lai

	@ Website		https://www.verveart.com

	



 ******************************************************************/





/******************************************************************





	------------------------

	-- TABLE OF CONTENTS --

	------------------------

	

	--  1. Foundation

	--  2. Hero-1

	--  3. Error-404

 

 

 ******************************************************************/









/** 1. FOUNDATION

*******************************************************************/



.hero

{

    position: relative;

    z-index: 1;



    overflow: hidden;



    width: 100%;

    height: 100%;

}



.hero .front-content

{

    position: absolute;

    z-index: 5;

    top: 0;



    overflow: hidden;



    width: 100%;

    height: 100%;



    -webkit-transition: all 600ms ease;

            transition: all 600ms ease;

}



.hero .front-content.overlay-active

{

    top: 50%;



    height: 0;

}



.hero .front-content .container-mid

{

    text-align: center;



    -webkit-perspective: 1000px;

            perspective: 1000px;

    -webkit-transform-style: preserve-3d;

            transform-style: preserve-3d;

}



.hero .front-content .controls

{

    position: absolute;

    bottom: 0;

    left: 0;



    -webkit-transition: 200ms ease;

            transition: 200ms ease;

    -webkit-transform: translateY(100px);

            transform: translateY(100px);

}



.hero .front-content .controls.show

{

    -webkit-transition: 800ms ease;

            transition: 800ms ease;

    -webkit-transform: translateY(0px);

            transform: translateY(0px);

}



.hero .front-content .controls .volume-button,

.hero .front-content .controls .pause-button

{

    font-size: 20px;



    position: absolute;

    z-index: 101;

    bottom: 20px;



    width: 20px;



    cursor: pointer;



    color: #fff;

}



.hero .front-content .controls .volume-button

{

    left: 66px;

}



.hero .front-content .controls .pause-button

{

    left: 26px;

}



.hero .background-content

{

    position: absolute;

    z-index: -10;



    overflow: hidden;



    width: 100%;

    height: 100%;

}



.hero .background-content .level-1,

.hero .background-content .level-2

{

    position: absolute;



    width: 100%;

    height: 100%;

}



.hero .background-content .level-1

{

    z-index: 2;

    top: 50%;

    left: 50%;



    width: 110%;

    height: 110%;



    -webkit-transform: translate(-50%,-50%);

            transform: translate(-50%,-50%);

}



.hero .background-content .level-2

{

    z-index: 1;



    -webkit-transform: scale(1.02);

            transform: scale(1.02);

}



.hero .background-content .bg-overlay,

.hero .background-content .bg-pattern,

.hero .background-content .bg-image,

.hero .background-content .bg-video,

.hero .background-content .bg-color,

.hero .background-content .glitch-img,

.hero .background-content #canvas

{

    position: absolute !important;



    width: 100%;

    height: 100% !important;

}



.hero .background-content .glitch-img 

{

	background-size: cover;

}



.hero .background-content .bg-color

{

    z-index: -1;



    opacity: 0;

    background: rgb(175,153,127);

}



.hero .background-content #canvas canvas

{

    position: absolute !important;

}



.hero .background-content .bg-overlay

{

    position: absolute !important;

    top: 0;



    width: 100%;

    height: 100%;



    opacity: .52;

    background: rgba(0,0,0,1.00);

}



.hero .background-content .bg-pattern

{

    opacity: .5;

    background: url(../images/pattern.png);

    background-repeat: repeat;

}









/** 2. HERO-1

*******************************************************************/



.hero-1 .front-content img.logo

{

    margin-top: 10px;

    margin-bottom: 20px;

}



.hero .front-content .cycle-wrapper

{

	overflow: hidden !important;

}



.hero-1 .front-content .slide

{

    width: 100%;

    margin: 0 auto;



    text-align: center;

}



.hero-1 .front-content h1

{

    font-family: 'Open Sans', sans-serif;

    font-size: 60px;

    font-weight: 600;



    margin: 0 auto;

    margin-bottom: 48px;



    text-align: center;



    color: #fff;

}



.hero-1 .front-content h1 span

{

    color: #b76e79;

}



.hero-1 .front-content p

{

    font-family: 'Raleway', sans-serif;

    font-size: 17px;

    font-weight: 400;



    padding-bottom: 50px;



    letter-spacing: 2px;



    color: #fff;

}



.hero-1 .front-content .arrow-wrap

{

    display: inline-block;

    overflow: hidden;



    margin: 0 auto;

}



.hero-1 .front-content .open-overlay i

{

    font-size: 16px;

    line-height: 66px;



    z-index: 2;



    margin: 0 auto;



    cursor: inherit;

    -webkit-transition: all .6s ease 0s;

            transition: all .6s ease 0s;



    color: inherit;

    background: rgba(255,255,255,.0);

}



.hero-1 .front-content div.open-overlay

{

    position: relative;



    display: block;



    width: 74px;

    height: 74px;

    margin: 0 auto;



    cursor: pointer;

    -webkit-transition: all .6s ease 0s;

            transition: all .6s ease 0s;

    text-align: center;



    color: #fff;

    border: solid 4px #fff;

}



.hero-1 .front-content .down-button i

{

    position: absolute;

    top: 0;

    left: 0;



    width: 100%;



    -webkit-transition: none;

            transition: none;

    text-align: center;



    color: #fff;

}



.hero-1 .front-content .down-button:hover i

{

    -webkit-transition: all 150ms cubic-bezier(1, 0, 0, 1);

            transition: all 150ms cubic-bezier(1, 0, 0, 1);

}



.hero-1 .front-content .down-button i:first-child

{

    top: -200%;

}



.hero-1 .front-content .down-button:hover i:first-child

{

    top: 0;

}



.hero-1 .front-content .down-button i:last-child

{

    top: 0;

}



.hero-1 .front-content .down-button:hover i:last-child

{

    top: 200%;

}









/** PAGE ENTER ANIMATIONS **/



.hero-1 .front-content.page-enter-animated img.logo

{

    -webkit-transform: translateY(-100%) !important;

            transform: translateY(-100%) !important;



    opacity: 0 !important;

}



.hero-1 .front-content.page-enter-animated.show img.logo

{

    -webkit-transition: 1s;

            transition: 1s;

    -webkit-transform: translateY(0) !important;

            transform: translateY(0) !important;



    opacity: 1 !important;

}



.hero-1 .front-content.page-enter-animated .cycle-wrapper

{

    -webkit-transform: translateY(100%) !important;

            transform: translateY(100%) !important;



    opacity: 0 !important;

}



.hero-1 .front-content.page-enter-animated.show .cycle-wrapper

{

    -webkit-transition: 1s .5s;

            transition: 1s .5s;

    -webkit-transform: translateY(0) !important;

            transform: translateY(0) !important;



    opacity: 1 !important;

}



.hero-1 .front-content.page-enter-animated p

{

    -webkit-transform: translateY(100%) !important;

            transform: translateY(100%) !important;



    opacity: 0 !important;

}



.hero-1 .front-content.page-enter-animated.show p

{

    -webkit-transition: 1s 1s;

            transition: 1s 1s;

    -webkit-transform: translateY(0) !important;

            transform: translateY(0) !important;



    opacity: 1 !important;

}



.hero-1 .front-content.page-enter-animated .arrow-wrap

{

    -webkit-transform: translateY(100%) !important;

            transform: translateY(100%) !important;



    opacity: 0 !important;

}



.hero-1 .front-content.page-enter-animated.show .arrow-wrap

{

    -webkit-transition: 1s 1.5s;

            transition: 1s 1.5s;

    -webkit-transform: translateY(0) !important;

            transform: translateY(0) !important;



    opacity: 1 !important;

}



.hero-1 .background-content #canvas

{

    top: 100% !important;



    -webkit-transition: 1s 2s;

            transition: 1s 2s;



    opacity: 0;

}



.hero-1 .background-content.page-enter-animated.show #canvas

{

    top: 0 !important;



    opacity: 1;

}









/** MEDIA QUERIES  **/



@media only screen and (max-width: 768px), only screen and (max-height: 630px)

{

    .hero-1 .front-content img.logo

    {

        max-width: 320px;

    }



    .hero-1 .front-content h1

    {

        font-size: 40px;



        margin-bottom: 20px;

    }



    .hero-1 .front-content p

    {

        font-size: 14px;



        padding-bottom: 36px;

    }



    .hero-1 .front-content .open-overlay i

    {

        font-size: 14px;

        line-height: 58px;

    }



    .hero-1 .front-content div.open-overlay

    {

        width: 64px;

        height: 64px;



        border: solid 3px #fff;

    }

}



@media only screen and (max-width: 600px), only screen and (max-height: 500px)

{

    .hero-1 .front-content img.logo

    {

        max-width: 286px;

        margin-bottom: 15px;

    }



    .hero-1 .front-content h1

    {

        font-size: 45px;



        margin-bottom: 32px;

    }



    .hero-1 .front-content p

    {

        font-size: 12px;



        padding-bottom: 28px;

    }



    .hero-1 .front-content .open-overlay i

    {

        font-size: 13px;

        line-height: 46px;

    }



    .hero-1 .front-content div.open-overlay

    {

        width: 50px;

        height: 50px;



        border: solid 2px #fff;

    }

}





@media only screen and (max-width: 480px), only screen and (max-height: 410px)

{

    .hero-1 .front-content img.logo

    {

        max-width: 260px;

        margin-bottom: 12px;

    }



    .hero-1 .front-content h1

    {

        font-size: 40px;



        margin-bottom: 25px;

    }



    .hero-1 .front-content p

    {

        font-size: 11px;

        font-weight: 300;



        padding-bottom: 20px;



        letter-spacing: 2px;

    }



    .hero-1 .front-content .open-overlay i

    {

        font-size: 11px;

        line-height: 38px;

    }



    .hero-1 .front-content div.open-overlay

    {

        width: 42px;

        height: 42px;

    }

}



@media only screen and (max-width: 400px), only screen and (max-height: 310px)

{

    .hero-1 .front-content img.logo

    {

        max-width: 240px;

        margin-bottom: 10px;

    }



    .hero-1 .front-content h1

    {

        font-size: 35px;



        margin-bottom: 23px;

    }



    .hero-1 .front-content p

    {

        font-size: 10px;



        padding-bottom: 18px;

    }



    .hero-1 .front-content .open-overlay i

    {

        font-size: 9px;

        line-height: 32px;

    }



    .hero-1 .front-content div.open-overlay

    {

        width: 36px;

        height: 36px;

    }

}



@media only screen and (max-width: 355px) ,only screen and (max-height: 280px)

{

    .hero-1 .front-content img.logo

    {

        max-width: 130px;

        margin-bottom: 8px;

    }



    .hero-1 .front-content h1

    {

        font-size: 30px;



        margin-bottom: 20px;

    }



    .hero-1 .front-content p

    {

        font-size: 9px;



        padding-bottom: 12px;

    }



    .hero-1 .front-content .open-overlay i

    {

        font-size: 8px;

        line-height: 30px;

    }



    .hero-1 .front-content div.open-overlay

    {

        width: 34px;

        height: 34px;

    }

}





/** 3. ERROR-404

*******************************************************************/



.error-404 .front-content img.logo

{

    margin-top: 10px;

    margin-bottom: 20px;

}



.error-404 .front-content h1

{

    font-family: 'Raleway', sans-serif;

    font-size: 80px;

    font-weight: 600;



    margin: 0 auto;



    text-align: center;



    color: #fff;

}



.error-404 .front-content h1 span

{

    font-family: 'Open Sans', sans-serif;

    line-height: 140px;



    position: relative;



    padding: 0 20px;



    color: #fff;

    margin-right: 6px;

}



.error-404 .front-content h1 span:before

{

    position: absolute;

    z-index: -1;

    top: 0;

    left: 0;



    width: 100%;

    height: 100%;



    content: '';

    -webkit-transition: .3s ease;

            transition: .3s ease;



    background: #1fb8b2;

}





.error-404 .front-content p

{

    font-family: 'Raleway', sans-serif;

    font-size: 17px;

    font-weight: 400;

    line-height: 36px;



    display: block;



    margin: 22px 0 36px;

    padding: 0;



    letter-spacing: 2px;



    color: #fff;

}



.error-404 .front-content a

{

    font-family: 'Raleway', sans-serif;

    font-size: 16px;

    font-weight: 400;

    line-height: 36px;



    display: inline-block;

    overflow: hidden;



    margin: 0;

    padding: 9px 30px;



    -webkit-transition: .1s ease;

            transition: .1s ease;

    letter-spacing: 2px;



    color: #fff;

    border: 3px solid #fff;

}









/** PAGE ENTER ANIMATIONS **/



.error-404 .front-content.page-enter-animated h1

{

    -webkit-transform: translateY(100%) !important;

            transform: translateY(100%) !important;



    opacity: 0 !important;

}



.error-404 .front-content.page-enter-animated.show h1

{

    -webkit-transition: .8s;

            transition: .8s;

    -webkit-transform: translateY(0) !important;

            transform: translateY(0) !important;



    opacity: 1 !important;

}



.error-404 .front-content.page-enter-animated h1 span:before

{

    width: 0;

}



.error-404 .front-content.page-enter-animated.show h1 span:before

{

    -webkit-transition: .5s .4s;

            transition: .5s .4s;

    width: 100%;

}



.error-404 .front-content.page-enter-animated p

{

    -webkit-transform: translateY(100%) !important;

            transform: translateY(100%) !important;



    opacity: 0 !important;

}



.error-404 .front-content.page-enter-animated.show p

{

    -webkit-transition: .8s .6s;

            transition: .8s .6s;

    -webkit-transform: translateY(0) !important;

            transform: translateY(0) !important;



    opacity: 1 !important;

}



.error-404 .front-content.page-enter-animated a

{

    -webkit-transform: translateY(100%) !important;

            transform: translateY(100%) !important;



    opacity: 0 !important;

}



.error-404 .front-content.page-enter-animated.show a

{

    -webkit-transition: .8s .8s;

            transition: .8s .8s;

    -webkit-transform: translateY(0) !important;

            transform: translateY(0) !important;



    opacity: 1 !important;

}



.error-404 .background-content #canvas

{

    top: 100% !important;



    opacity: 0;

}



.error-404 .background-content.page-enter-animated.show #canvas

{

    -webkit-transition: 1s 1s;

            transition: 1s 1s;

    

    top: 0 !important;



    opacity: 1;

}









/** MEDIA QUERIES  **/



@media only screen and (max-width: 768px), only screen and (max-height: 630px)

{

    .error-404 .front-content h1

    {

        font-size: 60px;



        margin-bottom: 40px;

    }



    .error-404 .front-content h1 span

    {

        font-size: 70px;

        line-height: 120px;



        padding: 0 14px;

    }



    .error-404 .front-content p

    {

        font-size: 16px;

        line-height: 20px;

    }

}



@media only screen and (max-width: 600px), only screen and (max-height: 500px)

{

    .error-404 .front-content h1

    {

        font-size: 45px;



        margin-bottom: 32px;

    }



    .error-404 .front-content h1 span

    {

        font-size: 55px;

        line-height: 100px;



        padding: 0 14px;

    }



    .error-404 .front-content p

    {

        font-size: 12px;

    }

}





@media only screen and (max-width: 480px), only screen and (max-height: 410px)

{

    .error-404 .front-content h1

    {

        font-size: 40px;



        margin-bottom: 25px;

    }

    .error-404 .front-content h1 span

    {

        font-size: 38px;

        line-height: 70px;



        padding: 0 10px;

    }



    .error-404 .front-content p

    {

        font-size: 11px;

        font-weight: 300;

        line-height: 20px;



        letter-spacing: 2px;

    }

}



@media only screen and (max-width: 400px), only screen and (max-height: 310px)

{

    .error-404 .front-content h1

    {

        font-size: 35px;



        margin-bottom: 23px;

    }



    .error-404 .front-content h1 span

    {



        font-size: 34px;

        line-height: 60px;



        padding: 0 6px;

    }



    .error-404 .front-content p

    {

        font-size: 10px;

    }

}



@media only screen and (max-width: 355px) ,only screen and (max-height: 280px)

{

    .error-404 .front-content h1

    {

        font-size: 30px;



        margin-bottom: 20px;

    }



    .error-404 .front-content p

    {

        font-size: 10px;

    }

}