/* FROM PAGE*/

.imageone {background-color:white!important;background-size:contain!important;background-position:bottom right!important;background-image: url('https://www-arcusfoundation-org.s3.amazonaws.com/wp-content/uploads/2017/01/state-of-the-apes-2.jpg');}
.imagetwo {background-color:white!important;background-size: contain!important;background-repeat:no-repeat!important;background-image: url('https://www-arcusfoundation-org.s3.amazonaws.com/wp-content/uploads/2017/03/d.jpg');}
#divholder{position: relative;}
#divholder .go{position: absolute; width: 100vw;}



/* RESET*/
#divholder .go,.imageone,.imagetwo{height: 100%!important}

/* HEIGHTS*/
#divholder{height: 0!important;padding-bottom:90%!important;}
@media (min-width: 0px) {#divholder{height: 0!important;padding-bottom:160%!important;}}
@media (min-width: 400px) {#divholder{height: 0!important;padding-bottom:120%!important;}}
@media (min-width: 544px) {#divholder{height: 0!important;padding-bottom:70%!important;}}
@media (min-width: 600px) {#divholder{height: 0!important;padding-bottom:80%!important;}}

@media (min-width: 700px) {#divholder{height: 0!important;padding-bottom:70%!important;}}
@media (min-width: 800px) {#divholder{height: 0!important;padding-bottom:60%!important;}}

@media (min-width: 1050px) {#divholder{height: 0!important;padding-bottom:45%!important;}}
@media (min-width: 1250px) {#divholder{height: 0!important;padding-bottom:37%!important;}}
@media (min-width: 1450px) {#divholder{height: 0!important;padding-bottom:32%!important;}}
@media (min-width: 1750px) {#divholder{height: 0!important;padding-bottom:28%!important;}}
/* TEXT CLOSER TO IMAGE*/


@media (min-width: 1250px) {
    #divholder .overlay-general{margin-left:20%;width:550px;     }
    .imagetwo {background-position:70% bottom!important}
}
@media (min-width: 2000px) {
    #divholder .overlay-general{margin-left:30%;     }

}

@media (min-width: 1500px) {
.home .header.image_block {min-height: 600px;min-height: 0!important}
}
 

/* BOTTOM FADER */


#one #row,#two #row{height:500px!important}

#two header {background-position: bottom right;}


.home .carousel-indicators {padding-bottom:0!important}
.home .overlay-general {margin-top:-12px!important;}

@media (max-width:600px){

.home header, 
.home .overlay-general  {padding:10px!important;margin-top:40!important;margin-right:0!important;
margin-left:0!important;width:auto!important;max-width:100%!important
}
}


.home #two  .overlay-general {
background-color:transparent!important;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%)!important; /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);!important /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%)!important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 )!important; /* IE6-9 */
} 
}

@media (min-width:900px){
#divholder{height:40%!important;}
.home #one .overlay-general {left:12%!important;position:relative}
.home #two  .overlay-general {right:-70%!important;left:auto!important;position:relative}
#two > header{right:20%;position: relative}
}

.two-item-slider .slide {
    z-index: 0;
    opacity: 0;
    transition:  opacity 2s;
}
.two-item-slider .slide.active {
    z-index: 1;
    opacity: 1;
}
.two-item-slider .carousel-indicators {
    position:  absolute;
    bottom: 30%;
    z-index: 1;
    height: 24px;
}
@media (max-width:  799px) {
    .two-item-slider .carousel-indicators {
        bottom:  15%;
    }
}