/* Home page styling **/

.home-background-image {
    background: url(../../assets/images/background.png) #3EAE59 no-repeat left;
    background-size: contain;
    position: relative;
}

.intro-text-container {
    position: relative;
    display: block;
}

.intro-text-container > div:first-child {
    display: inline-block;
    position: relative;
    vertical-align: top;
}
.intro-text-container > div:first-child {
    padding: 50px;
    width: calc(55% - 150px);
}
.intro-text-container > div:last-child {
    display:inline-block;
    vertical-align: top;
}

.animation-fade-cover {
	position: absolute;
    display: inline-block;
    width: 700px;
    height: 650px;
    z-index:10;
    top: -210px;
    background: url(../../assets/images/spacer.gif) repeat center;
    background-size: contain;
    opacity: 0;
}

.introduction-header {
    font-size: calc(30px + 1.6vw);
    line-height: 1.3;
    display: block;
    letter-spacing: -2px;
    color: #fff;
}
.intro-text-container .button {
	margin-top: 20px;
}
.intro-text-container .button.red {
	margin-right: 15px;
}



.image-shadow {
    display: block;
    color: #000;
    width: 100%;
    height: 300px;
    position: absolute;
    bottom: 0;
    background: linear-gradient(#3eae5800, #3eae58);
}

.cards-slider-container {
	overflow-y: hidden;
	overflow-x: hidden;
	display: block;
	max-width: 100%;
	position: relative;
	height: 280px;
	padding: 10px;
}

.slide-navigation-pointers {
    text-align: center;
    padding: 35px;
}

.slide-navigation-pointers > span {
    height: 18px;
    width: 18px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}

.slide-navigation-pointers > span:not(:last-child) {
    margin-right: 15px;
}

.slide-navigation-pointers > span.active {
    background-color: #fa415c;
}



.page-explainer {
	text-align: center;
	height:30vh;
}
.page-explainer .h2.bold {
	margin-top: 7vh;
}
.page-explainer .h2 {
	display: inline-block;
	padding: 15px;
	text-align: center;
	width: 50%;
}
.page-explainer.video-details-explainer{
    height:50vh;
}



#cardsviewprevious,
#cardsviewnext {
	width: 40px;
	min-height: 65px;
	cursor: pointer;
}

#cardsviewprevious {
	background: url(../../assets/images/left_arrow_large.gif) no-repeat center;
}
#cardsviewnext {
	background: url(../../assets/images/right_arrow_large.gif) no-repeat center;
}



.video-container {
    display: block;
    text-align: center;
    position: relative;
    height:70vh;
}

.video-placeholder-image {
    background: url(../../assets/images/shopper.png) no-repeat center;
    display: inline-block;
    cursor: pointer;
    height: 535px;
    width: 50%;
    min-width: 250px;
    box-shadow: 10px 10px 26px 7px rgba(0, 0, 0, 0.39), inset 0 0 0 1000px rgba(0, 0, 0, 0.82);
}

.video-text-intro {
    position: absolute;
    left: 0;
    right: 0;
    color: #fff;
    top: calc(50% + 40px); 
    max-width: 600px;
    margin: auto; 
}
.video-text-intro > span:first-child {
    font-size: 30px;
}
.video-text-intro > span {
    display: block;
    margin-top:10px;
    text-shadow: 5px 5px 8px #000; 
}





.home-content-icon {
	background-size: contain;
    display: block;
    height: 135px;
}
.home-content-icon.sell {
    background: url(../../assets/images/sell.png) no-repeat center;
}
.home-content-icon.fraud-detection {
    background: url(../../assets/images/fraud_detection.png) no-repeat center;
}
.home-content-icon.worldwide {
    background: url(../../assets/images/worldwide.png) no-repeat center;
}
.home-content-icon.instant-settlement {
    background: url(../../assets/images/instant.png) no-repeat center;
}

.close-header-notice,
.close-web-to-app-install{
    background: url(../../assets/images/delete_icon.gif) no-repeat center;
    cursor: pointer;
}

#animationvideo {
	position:absolute;
	margin-top:-153px;
	margin-left:45px;
	z-index:0 !important;
}

.olycash-icon-to-app-install{
    background: url(../../favicon.ico) no-repeat center #fff;
    background-size: 40px;
}

.olypages-icon-for-header-notice {
	background: url(../../assets/images/olypages_logo_new.png) no-repeat center #f1f1f1;
    background-size: 50px;
}



/* CSS for small screens */

@media only screen and (min-width:1500px) and (max-height:900px){

    .page-explainer .h2 {
        margin-top: 50px;
    }
    
    }


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



}



/* CSS for small screens */
@media only screen and (max-width:1100px){

.large-screens.balance-image {
    display:none !important;
}
.top-header-spacer {
	height: 5vh;
}
.intro-text-container > div:first-child {
    padding: 50px;
    width: calc(100% - 110px);
}
}


/* CSS for small screens */
@media only screen and (max-width:850px){

.page-explainer {
	padding-top: 60px !important;
	height:calc(70vh - 60px);
}

.video-details-explainer{
    padding-bottom: 60px !important;
}

.video-container {
    height:30vh;
}

}


/* CSS for small screens */
@media only screen and (max-height:700px){

.olycash-balance-image {
    height: 480px;
    background-size: contain !important;
}

.video-container {
    height:30vh;
}

}


/* CSS for small wide screens */
@media only screen and (max-height:700px) and (min-width:600px){

.page-explainer.video-details-explainer {
	display: none;
}

}