* {    
    font-family: 'Jesus', Helvetica, Arial, sans-serif;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: subpixel-antialiased !important;
    box-sizing: border-box;   
    line-height: 1.4;
}

*, *:before, *:after {
  box-sizing: inherit;
}


html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: black;
}

img {
    max-width: 100%;
	height: auto;
    border: 0;
    outline: 0;
    vertical-align: middle;
}

a {
    text-decoration: none; 
    border: 0;
    outline: 0;
}

a:hover, a:active, a:focus {
    text-decoration: none; 
    outline: 0;
    
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

:hover, :active, :focus {
    text-decoration: none; 
    outline: 0;
    
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

textarea, input, checkbox, radio {
    border: 0;
    outline: 0;
}

::selection {
    color: #ffc850;
    background: #fff; /* WebKit/Blink Browsers */
}

::-moz-selection {
    color: #ffc850;
    background: #fff; /* Gecko Browsers */
}


/*********************************************************************************************************
  FONTS
*********************************************************************************************************/

@font-face {
    font-family: 'Jesus';
    src: url('../fonts/Archeologicaps.eot');
    src: url('../fonts/Archeologicaps.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Archeologicaps.woff2') format('woff2'),
         url('../fonts/Archeologicaps.woff') format('woff'),
         url('../fonts/Archeologicaps.ttf') format('truetype'),
         url('../fonts/Archeologicaps.svg#Archeologicaps') format('svg');
    font-weight: normal;
    font-style: normal;
}




/*********************************************************************************************************
  GLOBAL
*********************************************************************************************************/

.logo-wrapper {
    width: 100%;
    height: auto;
    position: absolute;    
    top: 15px;
    z-index: 2;
}

.history-logo {  
    display: inline-block;
    position: absolute;
    left: 15px;        
    width: 90px;
    height: auto;
}

.jesus-logo {
    display: inline-block;
    position: absolute;
    right: 15px;    
    width: 140px;
    height: auto;
}

.home-background {
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    
    background: url("../images/home.jpg") no-repeat center center fixed;
    background-size: cover;
    z-index: 1;
}

.home-content {
    position: absolute;
    margin: 0px auto;
    left: 0;
    right: 0;
    width: 60%;
    bottom: 15%;
    
    display: table;
    vertical-align: middle;
    text-align: center;
    z-index: 2;
}

.home-text {
    font-size: 20px;
    color: white;
    text-align: center;
    text-shadow: 1px 1px #000;
    margin-bottom: 30px;
}

.home-button {
    display: inline-block;   
}

    .home-button a {
        font-size: 15px;
        background-color: #ffc850;
        color: #473123;
        text-align: center;    
        padding: 10px 25px; 
    }

    .home-button a:hover {
        background-color: #fff;
        color: #ffc850;
    }

.main-container {
    width: 100%;
    height: 100%;
    position: absolute;    
    top: 0px;
    z-index: 1;
}



/*********************************************************************************************************
  SLIDER
*********************************************************************************************************/

.fnc {
  /* you can add color names and their values here
  and then simply add classes like .m--blend-$colorName to .fnc-slide 
  to apply specific color for mask blend mode */
}

.fnc-slider {
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    height: 100%;
}

.fnc-slider *, .fnc-slider *:before, .fnc-slider *:after {
    box-sizing: border-box;
}

.fnc-slider__slides {
    position: relative;
    height: 100%;
    transition: -webkit-transform 1s 0.6666666667s;
    transition: transform 1s 0.6666666667s;
    transition: transform 1s 0.6666666667s, -webkit-transform 1s 0.6666666667s;
    
    opacity: 0; 
    animation: fadeIn 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fnc-slide {
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.fnc-slide.m--before-sliding {
    z-index: 2 !important;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
}

.fnc-slide.m--active-slide {
    z-index: 1;
    transition: -webkit-transform 1s 0.6666666667s ease-in-out;
    transition: transform 1s 0.6666666667s ease-in-out;
    transition: transform 1s 0.6666666667s ease-in-out, -webkit-transform 1s 0.6666666667s ease-in-out;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.fnc-slide__inner {
    position: relative;
    height: 100%;
    background-size: cover;
    background-position: center top;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.m--global-blending-active .fnc-slide__inner, .m--blend-bg-active .fnc-slide__inner {
    background-blend-mode: luminosity;
}

.m--before-sliding .fnc-slide__inner {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
}

.m--active-slide .fnc-slide__inner {
    transition: -webkit-transform 1s 0.6666666667s ease-in-out;
    transition: transform 1s 0.6666666667s ease-in-out;
    transition: transform 1s 0.6666666667s ease-in-out, -webkit-transform 1s 0.6666666667s ease-in-out;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}



/******** NAVIGATION ********/

.fnc-nav {
    width: 90%;
    z-index: 5;
    position: absolute;
    margin: 0px auto;
    left: 0;
    right: 0;
    bottom: 40px;
}

/** nav controls **/
.fnc-nav__controls {
    font-size: 0;
}

.fnc-nav__control {
    width: auto;
    height: 50px;
    font-size: 12px;
    padding-right: 50px;
    color: #ffc850;
    text-align: left;
    
    overflow: hidden;
    position: relative;
    display: inline-block;
    vertical-align: top;
    
    text-transform: uppercase;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    transition: background-color 0.5s;
}

.fnc-nav__control.m--active-control {
    background: transparent;
    color: #fff;
}

.fnc-nav__control-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    transition-timing-function: linear !important;
}

.m--with-autosliding .m--active-control .fnc-nav__control-progress {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
}

.m--prev-control .fnc-nav__control-progress {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    transition: -webkit-transform 0.5s !important;
    transition: transform 0.5s !important;
    transition: transform 0.5s, -webkit-transform 0.5s !important;
}

.m--reset-progress .fnc-nav__control-progress {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    transition: -webkit-transform 0s 0s !important;
    transition: transform 0s 0s !important;
    transition: transform 0s 0s, -webkit-transform 0s 0s !important;
}

.m--autosliding-blocked .fnc-nav__control-progress {
    transition: all 0s 0s !important;
    -webkit-transform: scaleX(0) !important;
            transform: scaleX(0) !important;
}




/* NOT PART OF COMMON SLIDER STYLES */

.example-slider {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    transition: -webkit-transform 0.7s;
    transition: transform 0.7s;
    transition: transform 0.7s, -webkit-transform 0.7s;
    z-index: 1;
}   

.example-slider .fnc-slide-1 .fnc-slide__inner,
.example-slider .fnc-slide-1 .fnc-slide__mask-inner {
    background: url("../images/1.jpg") no-repeat center center fixed;
    background-size: cover;
}

.example-slider .fnc-slide-2 .fnc-slide__inner,
.example-slider .fnc-slide-2 .fnc-slide__mask-inner {
    background: url("../images/2.jpg") no-repeat center center fixed;
    background-size: cover;
}

.example-slider .fnc-slide-3 .fnc-slide__inner,
.example-slider .fnc-slide-3 .fnc-slide__mask-inner {
    background: url("../images/3.jpg") no-repeat center center fixed;
    background-size: cover;
}

.example-slider .fnc-slide-4 .fnc-slide__inner,
.example-slider .fnc-slide-4 .fnc-slide__mask-inner {
    background: url("../images/4.jpg") no-repeat center center fixed;
    background-size: cover;
}

.example-slider .fnc-slide-5 .fnc-slide__inner,
.example-slider .fnc-slide-5 .fnc-slide__mask-inner {
    background: url("../images/5.jpg") no-repeat center center fixed;
    background-size: cover;
}

.example-slider .fnc-slide-6 .fnc-slide__inner,
.example-slider .fnc-slide-6 .fnc-slide__mask-inner {
    background: url("../images/6.jpg") no-repeat center center fixed;
    background-size: cover;
}

.example-slider .fnc-slide-7 .fnc-slide__inner,
.example-slider .fnc-slide-7 .fnc-slide__mask-inner {
    background: url("../images/7.jpg") no-repeat center center fixed;
    background-size: cover;
}

.example-slider .fnc-slide-8 .fnc-slide__inner,
.example-slider .fnc-slide-8 .fnc-slide__mask-inner {
    background: url("../images/8.jpg") no-repeat center center fixed;
    background-size: cover;
}



/******** SLIDER CONTENT ********/
.gabriel {
    position: absolute;
    margin: 0px auto;
    left: 0;
    right: 0;
    width: 60%;
    top: 18%;
    font-size: 17px;
    color: white;
    text-align: center;
}
    
    .gabriel-text {        
        background-color: rgba(39, 39, 39, 0.7);
        -webkit-box-shadow: 0.5em 0 0 rgba(39, 39, 39, 0.7), -0.5em 0 0 rgba(39, 39, 39, 0.7);
        -moz-box-shadow: 0.5em 0 0 rgba(39, 39, 39, 0.7), -0.5em 0 0 rgba(39, 39, 39, 0.7);
        box-shadow: 0.5em 0 0 rgba(39, 39, 39, 0.7), -0.5em 0 0 rgba(39, 39, 39, 0.7);
        display: inline;
    }


.birth{
    position: absolute;
    left: 15%;
    top: 30%;
    width: 30%;
    font-size: 17px;
    color: white;
    text-align: center;
}

    .birth-text {        
        background-color: rgba(39, 39, 39, 0.7);
        -webkit-box-shadow: 0.5em 0 0 rgba(39, 39, 39, 0.7), -0.5em 0 0 rgba(39, 39, 39, 0.7);
        -moz-box-shadow: 0.5em 0 0 rgba(39, 39, 39, 0.7), -0.5em 0 0 rgba(39, 39, 39, 0.7);
        box-shadow: 0.5em 0 0 rgba(39, 39, 39, 0.7), -0.5em 0 0 rgba(39, 39, 39, 0.7);
        display: inline;
    }


.baptism {
    position: absolute;
    right: 13%;
    top: 25%;
    width: 32%;
    font-size: 17px;
    color: white;
    text-align: center;
}

    .baptism-text {        
        background-color: rgba(39, 39, 39, 0.7);
        -webkit-box-shadow: 0.5em 0 0 rgba(39, 39, 39, 0.7), -0.5em 0 0 rgba(39, 39, 39, 0.7);
        -moz-box-shadow: 0.5em 0 0 rgba(39, 39, 39, 0.7), -0.5em 0 0 rgba(39, 39, 39, 0.7);
        box-shadow: 0.5em 0 0 rgba(39, 39, 39, 0.7), -0.5em 0 0 rgba(39, 39, 39, 0.7);
        display: inline;
    }


.miracle {
    position: absolute;
    margin: 0px auto;
    left: 0;
    right: 0;
    width: 62%;
    bottom: 25%;
    font-size: 17px;
    color: white;
    text-align: center;
}

    .miracle-text {        
        background-color: rgba(39, 39, 39, 0.7);
        -webkit-box-shadow: 0.5em 0 0 rgba(39, 39, 39, 0.7), -0.5em 0 0 rgba(39, 39, 39, 0.7);
        -moz-box-shadow: 0.5em 0 0 rgba(39, 39, 39, 0.7), -0.5em 0 0 rgba(39, 39, 39, 0.7);
        box-shadow: 0.5em 0 0 rgba(39, 39, 39, 0.7), -0.5em 0 0 rgba(39, 39, 39, 0.7);
        display: inline;
    }


.leper {
    position: absolute;
    right: 10%;
    top: 20%;
    width: 32%;
    font-size: 17px;
    color: white;
    text-align: center;
}

    .leper-text {        
        background-color: rgba(39, 39, 39, 0.7);
        -webkit-box-shadow: 0.5em 0 0 rgba(39, 39, 39, 0.7), -0.5em 0 0 rgba(39, 39, 39, 0.7);
        -moz-box-shadow: 0.5em 0 0 rgba(39, 39, 39, 0.7), -0.5em 0 0 rgba(39, 39, 39, 0.7);
        box-shadow: 0.5em 0 0 rgba(39, 39, 39, 0.7), -0.5em 0 0 rgba(39, 39, 39, 0.7);
        display: inline;
    }


.resurrecting {
    position: absolute;
    margin: 0px auto;
    left: 0;
    right: 0;
    width: 62%;
    bottom: 25%;
    font-size: 17px;
    color: white;
    text-align: center;
}

    .resurrecting-text {        
        background-color: rgba(39, 39, 39, 0.7);
        -webkit-box-shadow: 0.5em 0 0 rgba(39, 39, 39, 0.7), -0.5em 0 0 rgba(39, 39, 39, 0.7);
        -moz-box-shadow: 0.5em 0 0 rgba(39, 39, 39, 0.7), -0.5em 0 0 rgba(39, 39, 39, 0.7);
        box-shadow: 0.5em 0 0 rgba(39, 39, 39, 0.7), -0.5em 0 0 rgba(39, 39, 39, 0.7);
        display: inline;
    }


.supper {
    position: absolute;
    margin: 0px auto;
    left: 0;
    right: 0;
    width: 62%;
    top: 15%;
    font-size: 17px;
    color: white;
    text-align: center;
}

    .supper-text {        
        background-color: rgba(39, 39, 39, 0.7);
        -webkit-box-shadow: 0.5em 0 0 rgba(39, 39, 39, 0.7), -0.5em 0 0 rgba(39, 39, 39, 0.7);
        -moz-box-shadow: 0.5em 0 0 rgba(39, 39, 39, 0.7), -0.5em 0 0 rgba(39, 39, 39, 0.7);
        box-shadow: 0.5em 0 0 rgba(39, 39, 39, 0.7), -0.5em 0 0 rgba(39, 39, 39, 0.7);
        display: inline;
    }


.crucifixion {
    position: absolute;
    left: 13%;
    top: 20%;
    width: 32%;
    font-size: 17px;
    color: white;
    text-align: center;
}






/*********************************************************************************************************
  RAIN & THUNDER
*********************************************************************************************************/

canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

#canvas3 {
  z-index: 5;
}

#canvas2 {
  z-index: 10;
}

#canvas1 {
  z-index: 100;
}

@-webkit-keyframes thunder-bg {
  0% {
    background-color: rgba(34, 34, 34, 0.9);
  }
  9% {
    background-color: rgba(34, 34, 34, 0.9);
  }
  10% {
    background-color: rgba(59, 59, 59, 0.3);
  }
  10.5% {
    background-color: rgba(34, 34, 34, 0.9);
  }
  80% {
    background-color: rgba(34, 34, 34, 0.9);
  }
  82% {
    background-color: rgba(59, 59, 59, 0.3);
  }
  83% {
    background-color: rgba(34, 34, 34, 0.9);
  }
  83.5% {
    background-color: rgba(59, 59, 59, 0.3);
  }
  100% {
    background-color: rgba(34, 34, 34, 0.9);
  }
}












/*********************************************************************************************************
                                        MOBILE RESPONSIVE CODE
*********************************************************************************************************/

@media only screen and (max-width:767px) {
/************************/  

    
    .logo-wrapper {   
        top: 15px;
    }

    .history-logo {  
        left: 10px;        
        width: 80px;
    }

    .jesus-logo {
        right: 10px;    
        width: 120px;
    }

    .home-background {
        left: 0;
        top: 130px;
        width: 100%;
        height: 300px;

        background: url("../images/home.jpg") no-repeat center center;
        background-size: cover;
    }

    .home-content {
        width: 100%;
        top: 470px;
    }

    .home-text {
        font-size: 17px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .home-button {
        margin-bottom: 50px;   
    }
    
    
    canvas {
        width: 100%;
        height: 300px;
    }
    
    
    .main-container {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    
    .fnc-nav {
        width: 90%;
        margin: 0px auto;
        height: auto;
        z-index: 5;
        
        position: absolute;
        display: inline-block;
        top: 130px;     
    }
    
    .fnc-nav__control {       
        width: auto;
        height: auto;
        font-size: 10px;
        padding: 5px 10px 5px 7px;
        margin-bottom: 5px;        
        border: 1px solid #666;
    }
    
    .fnc-slider {
        overflow: visible;
        position: relative;
        height: 100%;
    }
    
    .fnc-slider__slides {
        position: relative;
        height: 100%;
    }
    
    .fnc-slide {
        top: 280px; 
    }
    
    .fnc-slide__inner {
        height: 300px;
        overflow: visible;
    }    
    
    .gabriel {    
        width: 100%;
        height: 100%;
        background-color: #000;
        top: 330px;        
        font-size: 13px;
        padding-left: 15px;
        padding-right: 15px;
    }
    
        .gabriel-text {        
            background-color: transparent;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            display: inline;
        }
    
    .birth {    
        width: 100%;
        height: 100%;
        background-color: #000;
        left: 0;
        top: 330px;        
        font-size: 13px;
        padding-left: 15px;
        padding-right: 15px;
    }
    
        .birth-text {        
            background-color: transparent;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            display: inline;
        }
    
    .baptism {    
        width: 100%;
        height: 100%;
        background-color: #000;
        right: 0;
        top: 330px;        
        font-size: 13px;
        padding-left: 15px;
        padding-right: 15px;
    }
    
        .baptism-text {        
            background-color: transparent;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            display: inline;
        }
    
    .miracle {    
        width: 100%;
        height: 100%;
        background-color: #000;
        bottom: 0;
        top: 330px;        
        font-size: 13px;
        padding-left: 15px;
        padding-right: 15px;
    }
    
        .miracle-text {        
            background-color: transparent;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            display: inline;
        }
    
    .leper {    
        width: 100%;
        height: 100%;
        background-color: #000;
        right: 0;
        top: 330px;        
        font-size: 13px;
        padding-left: 15px;
        padding-right: 15px;
    }
    
        .leper-text {        
            background-color: transparent;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            display: inline;
        }
    
    .resurrecting {    
        width: 100%;
        height: 100%;
        background-color: #000;
        bottom: 0;
        top: 330px;        
        font-size: 13px;
        padding-left: 15px;
        padding-right: 15px;
    }
    
        .resurrecting-text {        
            background-color: transparent;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            display: inline;
        }
    
    .supper {    
        width: 100%;
        height: 100%;
        background-color: #000;
        left: 0;
        top: 330px;        
        font-size: 13px;
        padding-left: 15px;
        padding-right: 15px;
    }
    
        .supper-text {        
            background-color: transparent;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            display: inline;
        }
    
    .crucifixion {    
        width: 100%;
        height: 100%;
        background-color: #000;
        left: 0;
        top: 330px;        
        font-size: 13px;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    
    
    
    
    
    
    
    .example-slider .fnc-slide-1 .fnc-slide__inner,
    .example-slider .fnc-slide-1 .fnc-slide__mask-inner {
        background: url("../images/1.jpg") no-repeat center center;
        background-size: cover;
    }

    .example-slider .fnc-slide-2 .fnc-slide__inner,
    .example-slider .fnc-slide-2 .fnc-slide__mask-inner {
        background: url("../images/2.jpg") no-repeat center center;
        background-size: cover;
    }

    .example-slider .fnc-slide-3 .fnc-slide__inner,
    .example-slider .fnc-slide-3 .fnc-slide__mask-inner {
        background: url("../images/3.jpg") no-repeat center center;
        background-size: cover;
    }

    .example-slider .fnc-slide-4 .fnc-slide__inner,
    .example-slider .fnc-slide-4 .fnc-slide__mask-inner {
        background: url("../images/4.jpg") no-repeat center center;
        background-size: cover;
    }

    .example-slider .fnc-slide-5 .fnc-slide__inner,
    .example-slider .fnc-slide-5 .fnc-slide__mask-inner {
        background: url("../images/5.jpg") no-repeat center center;
        background-size: cover;
    }

    .example-slider .fnc-slide-6 .fnc-slide__inner,
    .example-slider .fnc-slide-6 .fnc-slide__mask-inner {
        background: url("../images/6.jpg") no-repeat center center;
        background-size: cover;
    }

    .example-slider .fnc-slide-7 .fnc-slide__inner,
    .example-slider .fnc-slide-7 .fnc-slide__mask-inner {
        background: url("../images/7.jpg") no-repeat center center;
        background-size: cover;
    }

    .example-slider .fnc-slide-8 .fnc-slide__inner,
    .example-slider .fnc-slide-8 .fnc-slide__mask-inner {
        background: url("../images/8-mobile.jpg") no-repeat center center;
        background-size: cover;
    }
    
    
    
/************************/       
}