/* General */
#wrapper { text-align: center; }

/* Main banner */
#main-banner { padding: 75px 0 24px; position: relative; height: 475px; }
#main-banner div { max-width: 100%; width: 385px; font-size: 14pt; line-height: 1.3; margin: 0 0 0 55px; }
h1 { font: 700 30pt/1.2 'Arial Rounded', 'Arial', sans-serif; text-shadow: none; text-transform: none; width: auto; color: #333f48; }
#main-banner a { display: inline-block; vertical-align: middle; margin: 0 8px; }
#main-banner b { display: block; margin: 0 0 13px; line-height: 1.3; }
#main-banner p:last-of-type { margin: 53px 0 0; font-size: 13pt; }
#main-banner div img { display: block; }
#main-banner section > img { position: absolute; height: 400px; top: 50%; bottom: 0; right: 150px; transform: translateY( -50% ); opacity: 0; transition: all 1.5s; animation: slide-in 3s forwards; }
@keyframes slide-in {
	0% { opacity: 0; }
	100% { opacity: 1; right: 300px; }
}

/* Key points */
#key-points { background: #b5e3d8; padding: 37px 20px; line-height: 1; display: none; }
#key-points p:last-of-type { margin: 0; }

/* Features */
#features { padding: 62px 0 142px; padding-top: 0; }
#features h2 { color: #42bfb5; margin: 0 0 17px; }
#slider { width: 340px; max-width: 92%; margin: 0 auto 38px; position: relative; }
#slider button { position: absolute; top: 50%; transform: translateY( -50% ); left: -73px; z-index: 99; border: 0; background: 0; }
#slider #button-next { left: auto; right: -73px; }
#slider button:before { cursor: pointer; transition: all .4s; content: '\e801'; font: 700 18pt/1 'halza', sans-serif; display: block; background: #b5e3d8; border: 1px solid #b5e3d8; border-radius: 50%; color: #fff; width: 40px; height: 40px; text-align: center; line-height: 40px; }
#slider button:hover:before { background: 0; color: #b5e3d8; }
#slider #button-next:before { content: '\e802'; }
#slider img { transition: all .4s; width: auto; margin: auto; }
#slider .previous-slide img { transform: translateX( 59% ) translateY( 5% ) scale( .8 ); opacity: .4; }
#slider .previous-slide > div:before { left: 28px; }
#slider .owl-carousel .owl-item { z-index: 1; padding: 10px 0; }
#slider .owl-carousel .owl-item div div { display: none; }
#slider .owl-carousel .previous-slide, #slider .owl-carousel .next-slide { z-index: 0; }
#slider .next-slide img { transform: translateX( -59% ) translateY( 5% ) scale( .8 ); opacity: .4; }
#features span { color: #42bfb5; display: block; font-weight: 700; }
#features .button { margin: 36px 0 74px; }
#features b { display: block; margin: 0 0 12px; font-size: 14pt; }
#features section { font-size: 0; }
#features section a { display: inline-block; vertical-align: middle; margin: 0 8px; }
#placeholder { padding: 0 20px; }

/* Reviews */
#reviews { background: #ebeaea; position: relative; padding: 88px 20px 42px; }
#reviews:before { content: ' '; width: 131px; height: 131px; background: no-repeat url( '../../images/pages/homepage/icons/thumbs-up.png' ); display: block; position: absolute; top: -65px; left: 50%; transform: translateX( -50% ); }
#reviews aside { font-size: 0; margin: 0 0 16px; }
#reviews .owl-item span:before { content: '\e800'; font: 19pt/1 'halza'; display: inline-block; color: #42bfb5; margin: 0 4px; }
.owl-dots { margin: 33px 0 0; }
.owl-dots button { margin: 0 6px; }
.owl-dots span { width: 16px; height: 16px; display: block; border-radius: 50%; border: 2px solid #42bfb5; background: #fff; transition: all .4s; }
.owl-dots .active span, .owl-dots span:hover { background: #42bfb5; }

/* Press releases */
#press { position: relative; background: #b5e3d8; border-radius: 3px; margin: 213px 0 92px; box-shadow: 0 4px 3px 1px #aeaeae80; padding: 38px 108px; color: #434343; }
#press:before { content: ' '; width: 169px; height: 175px; background: no-repeat url( '../../images/pages/homepage/icons/microphone.png' ); display: block; position: absolute; top: -175px; left: 50%; transform: translateX( -50% ); }
#press figure { margin: 0 0 28px; height: 32px; }
#press img { max-height: 100%; max-width: 100%; width: auto; height: auto; display: block; margin: auto; }
#press .owl-nav button { position: absolute; top: 50%; top: 50%; transform: translateY( -50% ); left: -73px; z-index: 99; }
#press .owl-nav .owl-next { left: auto; right: -73px; }
#press .owl-nav button:before { cursor: pointer; transition: all .4s; content: '\e801'; font: 700 18pt/1 'halza', sans-serif; display: block; background: #fff; border: 1px solid #fff; border-radius: 50%; color: #9cdbd9; width: 40px; height: 40px; text-align: center; line-height: 40px; }
#press .owl-nav .owl-next:before { content: '\e802'; }
#press .owl-nav button:hover:before { background: #9cdbd9; color: #fff; }
#press .owl-nav span { display: none; }
#press .owl-dots span { border-color: #616e6b; }
#press .owl-dots .active span, #press .owl-dots span:hover { background: #616e6b; }

/* Security */
#security { padding: 35px 20px 0; }
#security h2, #compliance h2 { font-size: 22pt; }
#security img { display: inline-block; vertical-align: middle; margin: 0 25px 30px; }
#security p:last-of-type { margin: 0 0 55px; }

/* Compliance */
#compliance { font-size: 0; margin: 0 0 59px; }
#compliance img { display: inline-block; vertical-align: middle; margin: 0 48px; }

@media (max-width: 1620px) {
	@keyframes slide-in {
		0% { opacity: 0; }
		100% { opacity: 1; right: 12vw; }
	}
}

@media (max-width: 1180px) {
	#main-banner section > img { right: -40px; }
	@keyframes slide-in {
		0% { opacity: 0; }
		100% { opacity: 1; right: 0; }
	}
}

@media (max-width: 980px) {
	#main-banner { padding: 12px 0 45px; height: auto; }
	#main-banner div { font-size: 12pt; margin: 0 0 0 5vw; }
	h1 { font-size: 24pt; }
	#main-banner section > img { height: 300px; }
}

@media (max-width: 800px) {
	#main-banner  { padding: 45px 10px; }
	#main-banner div { margin: auto; }
	#main-banner p:last-of-type { margin: 290px 0 0; }
	#main-banner section > img { height: auto; max-height: 252px; right: 50%; top: auto; bottom: 175px; transform: translateX( 50% ); animation: none; opacity: 1; }
	
	#key-points { line-height: 1.2; font-size: 12pt; }
	
	#security h2, #compliance h2 { font-size: 19pt; }
	#security img { max-height: 140px; max-width: 180px; }
	#compliance img { margin: 0 12px; max-height: 110px; }
}

@media (max-width: 600px) {
	#features h2 { font-size: 22pt; }
	#slider { width: 150px; }
	#slider .previous-slide img, #slider .next-slide img { transform: none; }
	#features .button { padding: 15px 48px; }
	#slider button { left: -57px; }
	#slider button:before { width: 35px; height: 35px; line-height: 35px; font-size: 15pt; }
	#slider #button-next { right: -57px; }
}

@media (max-width: 460px) {
	#main-banner div img { height: 40px; }
	#main-banner section > img { bottom: 166px; }
	
	#security h2, #compliance h2 { font-size: 17pt; }
	
	#features section img { height: 40px; }
	
	#compliance img { max-height: 90px; }
}