/*
 *
 * Stylesheet for Products Page
 * @author Awais Kazmi
 * Copyrights (c) 2016. All Rights Reserved.
 *
 **/

/* TOPBAR */
/* ------ */

html, body {
	background: #fff !important;
}

.top-bar {
	position: fixed;
	z-index: 1000;
	width: 100%;
}

/* GLOBAL STYLES */
/* ------------- */

.download-buttons {
	width: 100%;
    margin-bottom: 2rem;
}

.download-button {
	display: inline;
	margin: 0 0.625rem;
	height: 50px;
}

.download-link {
	color: #78C63A !important;
	border-bottom: 1px solid #78C63A;
    font-weight: 700;
}

@media(max-width: 992px) {
	.download-button {
		display: block;
		height: 40px;
		margin: 0.625rem auto;
	}
}

 /* 1. MAIN SECTION */
 /* --------------- */

.athan,
.tasbeeh,
.inspiration,
.main {
    width: 100%;
    overflow: hidden;
    position: relative;
 }

.athan {
    background: #fff;
	 height: 100%;
	 max-width: 1200px;
	 margin: 0 auto;
	 padding-top: 57px;
}

.athan .icons {
    position: absolute;
    right: 80px;
    top: -2px;
    width: inherit;    
}

.athan .icon {
    position: absolute;
    height: 40px;
    width: 40px;
}

.athan .icon.places {
    background: url("../images/ico-places-active.svg") no-repeat 0 0;
    background-size: contain;
    top: 103px;
    left: 178px;

    -webkit-animation: floating-scale 3s 1.2s ease-in-out infinite alternate-reverse;
            animation: floating-scale 3s 1.2s ease-in-out infinite alternate-reverse;

    -webkit-transform: scale(0.5);
            transform: scale(0.5);
}

.athan .icon.qiblah {
    background: url("../images/ico-qibla-active.svg") no-repeat 0 0;
    background-size: contain;
    top: 51px;
    left: 235px;

    -webkit-animation: floating-scale 4s 0.57s ease-in-out infinite alternate-reverse;
            animation: floating-scale 4s 0.57s ease-in-out infinite alternate-reverse;

    -webkit-transform: scale(0.5);
            transform: scale(0.5);
}

.athan .icon.prayers {
    background: url("../images/ico-prayers-active.svg") no-repeat 0 0;
    background-size: contain;
    top: 50px;
    left: 312px;

    -webkit-animation: floating-scale 4s 2.8s ease-in-out infinite alternate-reverse;
            animation: floating-scale 4s 2.8s ease-in-out infinite alternate-reverse;

    -webkit-transform: scale(0.5);
            transform: scale(0.5);
}

.athan .icon.calendar {
    background: url("../images/ico-calender-active.svg") no-repeat 0 0;
    background-size: contain;
    top: 85px;
    left: 378px;

    -webkit-animation: floating-scale 4s 3.5s ease-in-out infinite alternate-reverse;
            animation: floating-scale 4s 3.5s ease-in-out infinite alternate-reverse;

    -webkit-transform: scale(0.5);
            transform: scale(0.5);
}

.tasbeeh {
    background: #f8f8f8;
    height: 600px;
    position: relative;
}

.tasbeeh .splash {
}

.inspiration {
    height: 600px;
    background: -webkit-linear-gradient(#353E58, #754195);
    background: linear-gradient(#353E58, #754195); /* Standard syntax */
    color: #fff;
}

.inspiration .splash {
    top: 50%;
	-webkit-transform: translateY(-50%);
	        transform: translateY(-50%);
}

.splash {
	position: relative;
	text-align: center;
	overflow: hidden;
	height: inherit;
}

.splash-content {
	position: absolute;
	display: block;
	top: 50%;
	transform: translateY(-50%);
}

.splash-content h1 {
	font-size: 40px;
    font-weight: 400;
	width: 100%;
}

.splash-content span {
	font-size: 14px;
}

.athan .splash-image {
    text-align: right;
    position: relative;
    bottom: -40px;
    width: 500px;
}

.splash-image img {
	position: relative;
	right: 4px;
    bottom: -40px;
	height: 100%;
    width: auto;
    max-width: none;
}

.athan .splash-image img {
    width: inherit;
    height: auto;
}

.tasbeeh .splash-content {
    text-align: center;
	 position: relative;
}

.tasbeeh .splash-image {
    text-align: center;
    height: 100%;
}
.tasbeeh .splash-image img {
    top: 80px;
    height: auto;
	 width: 330px;
}

.download-btn {
	padding: 10px 20px;
	margin-bottom: 15px;
	border-radius: 4px;
	font-size: 20px;
	font-weight: 600;
	background: #78C63A;
}

.athan .download-btn {
    color: #fff !important;
}

.tasbeeh .download-btn {
    color: #fff !important;
    background: #288019;
}

.tasbeeh span {
    font-weight: 700;
    font-size: 1.2rem;
}

.inspiration .download-btn {
    background: #fff !important;
    color: #555 !important;
}

.inspiration .splash-image img {
    top: 80px;
    width: 330px;
}

.athan-logo {
	width: 140px;
	margin: 40px 0;
}


@-moz-document url-prefix() {
	.athan-logo {
		width: 140px;
	}
}

@media(max-width: 1024px) {
    .athan .splash-content {
        width: 50%;
    }
	 .athan .splash-content h1 {
		  font-size: 30px;
		  display: block;
		  width: 80%;
		  margin: 0 auto !important;
	  }
	  .inspiration h1,
     .tasbeeh h1 {
         width: 100%;
         margin: 0 auto;
         font-size: 30px;
     }
	  .athan .athan-logo {
         width: 120px;
     }
    .athan .splash-image img {
        /*right: -6px;*/
    }
}

@media (min-width: 992px) and (max-width: 1024px) {
    .athan .icons {
        right: 85px;
    }
}

@media (max-width: 992px) {
    .athan .icons {
        right: 90px;
    }
}

@media(max-width: 768px) {
	.athan {
		height: auto;
		position: relative;
		padding-top: 0;
	}
    .athan .splash {
		 position: relative;
        padding-top: 80px;
		  padding-bottom: 50px;
    }
    .athan .splash-content {
		 position: relative;
		 transform: translateY(0);
        width: 100%;
    }
    .athan .splash-image {
        display: none;
    }

    .inspiration h1,
    .tasbeeh h1 {
        width: 100%;
        margin: 0 auto;
        font-size: 30px;
    }
    .icons {
        display: none;
    }
    .tasbeeh {
        height: auto;
    }
    .tasbeeh .splash {
        overflow: hidden;
    }
    .tasbeeh .splash-content {
		 padding-top: 40px;
		 transform: translateY(0);
    }
    .tasbeeh .splash-image {
        height: 480px;
    }
    .tasbeeh .splash-image img {
        top: 20px;
        width: 300px;
        height: auto;
    }

    /* Inspiration */
    .inspiration {
        height: auto;
    }
    .inspiration .splash-content {
        position: relative;
        transform: translateY(0);
    }
    .inspiration .splash {
        padding: 50px 0;
        top: 0;
        transform: translateY(0);
        overflow: hidden;
    }
    .inspiration .splash-image {
        height: 500px;
    }
    .inspiration .splash-image img {
        top: 50px;
        width: 300px;
        height: auto;
    }
	.splash {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
}

/* Facebook Section */
/* ---------------- */

.facebook {
    width: 100%;
    background: #fff;
    height: auto;
    text-align: center;
    padding: 20px 0;
}

.facebook h1 {
    display: inline-block;
    color: #6A85B1;
    font-size: 28px;
    font-weight: 700;
    vertical-align: -20%;
}

.facebook img {
    margin-right: 0.4rem;
}

@media(max-width: 768px) {
    .facebook h1 {
        font-size: 20px;
    }

    .facebook img {
        margin-right: 0.2rem;
        height: 25px;
    }
}

/* Footer */
/* ------ */

.footer {
    margin-top: 0;
}

.bx-wrapper img {
    width: auto;
}

/* Animation */
/* --------- */

@-webkit-keyframes floating-scale {
    from {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    to {
        -webkit-transform: scale(0.7);
        transform: scale(0.7)
    }
}
@keyframes floating-scale {
    from {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    to {
        -webkit-transform: scale(0.7);
        transform: scale(0.7)
    }
}

.banner {
    display: none;
}