@import url('devlopper.css');
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);

body a {color: #666;} 


/* SOLD OUT */
h5>a[href="/loveforquran/products/item/13-bookmark"]:before,
h5>a[href="/loveforquran/products/item/16-tajweed-book"]:before,
h5>a[href="/loveforquran/products/item/14-alphabet"]:before
{
    content: "SOLD OUT";
    position: absolute;
    top: 30px;
    right: 30px;
    background-color: crimson;
    padding: 10px 14px;
    display: block;
    font-size: 20px;
    font-weight: 900;
    color: #000;
    opacity: 0.8;
}

.zen-container {
  max-width: 1180px;
  width: 96%;
  margin: 0 auto;
}

.btn {
border-color: #000 !important;
background-color: #000 !important;
color: #fff !important;
}

button.btn.btn-navbar {
    background-color: rgba(0,0,0,0) !important;
}

/* OFFLINE MESSAGE */
.shop-offline {
font-size: 18px;
text-align: center;
width: 100%;
padding: 20px;
background-color: #ff4d4d;
color: #fff;
position: fixed;
left: 0;
bottom: 0px;
z-index: 999999999;
}

/* sticky nav fix for shop page */
.affix {
-webkit-transform: inherit;
}

/* Fonts */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  src: local('Open Sans'), local('OpenSans'), url('http://themes.googleusercontent.com/static/fonts/opensans/v5/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}

/* ---- this part of css has been added by mondersky ---*/
 body {
  margin: 0 !important;
}


/* CHANGE HEADER WRAP SPACE */
#headerwrap {max-height: 25px;}

/* -- Change to top nav bar -- */
#navwrap #navouter {
background:none;
}

#navouter  {margin-top: 10px;}


#navwrap ul.nav > li > a {
color:#aaa;
}

#navwrap.affix ul {display: none;}

body #navwrap .logo #tagline,
body #navwrap.affix-top .logo #tagline {display: none;}

body #navwrap.affix .logo #tagline span {
	display: block;
}
body #navwrap.affix .logo #tagline {display: inline-block}

#navwrap .logo a :hover {
  color: #fff !important;
}

#navwrap .logo img,
#navwrap.affix-top .logo img {
max-width: 57px;
display: block;
z-index: 9999 !important;
}


/* changes for smaller screens */

@media screen and (max-width: 767px) {
#navwrap.affix #navouter {
margin-top: -25px !important;
padding-bottom: 0px !important;
}
}

@media screen and (max-width: 767px) {
body #navwrap .logo #tagline span {
margin-top: 20px !important;
}
}


/* nav mini button mobile view */
#navwrap button { 
margin-top: 10px !important;
position: fixed !important;
z-index: 9999 !important;
}

#navwrap.affix button { 
top: 3px;
}


body #navwrap .logo #tagline span {
margin-top: 32px;
font-size: 16px; 
font-style: italic;
font-family: "Open Sans", Arial, sans-serif !important;
font-weight: 100;
color: #ccc;
}

@media (max-width:767px) {
body #navwrap .logo #tagline span {
padding-top: 15px;
padding-bottom: 15px;
}
}

#navwrap.affix a {opacity: 0.5;}

#navwrap.affix img{display:none;}
/* OLD  --  #navwrap.affix img{max-width: 45px; margin-top: 8px !important;} */

#navwrap [class^="icon-"] {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}


.circle-icon {
-webkit-border-radius: 50%;
border-radius: 50%;
width: 160px;
height: 160px;
border: 2px solid #bbb;
text-align: center;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
padding-top: 38px
}

.circle-icon-white {
-webkit-border-radius: 50%;
border-radius: 50%;
width: 160px;
height: 160px;
border: 2px solid #fff;
text-align: center;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
padding-top: 38px
}

.nav-divide {
border-right: 2px solid #fff; 
padding: 8px 25px; 

}

.nav-no-divide {
padding: 8px 0px 8px 25px; 

}

.nav-html { 
margin-top: 45px; 
margin-bottom: 15px; 
font-size: 16px; 
font-style: italic;
letter-spacing: -0.040em;
font-family: "Open Sans", sans-serif !important;
font-weight: 400;
color: #ccc;
}

@media (max-width:767px) {
.nav-html { 
margin-top: 10px; 
margin-bottom: 15px; 
font-size: 16px; 
font-style: italic;
letter-spacing: -0.040em;
font-family: "Open Sans", sans-serif !important;
font-weight: 400;
color: #ccc;
}
}


.mobile-menu-text {
padding: 10px 10px; 
background-color: #333; 
color: #ccc;
margin: 10px;
}

.mobile-menu-close {
padding: 10px;
margin: 10px 5px 15px 5px;
color: #fff;
text-align: right;
font-style: normal;
font-size: 20px;
}

.off-canvas-enabled body {background-color: #000;}

.nav-html a:hover { color: #fff !important;}


.bgpixel, .bgpixel h1 {
color:#ccc !important;
background-image: none;
}

a:hover { 
color: #000;
}

h1 {
font-family: "Quicksand", Arial, Gadget, sans-serif !important;
font-weight: 100 !important;
}

h2 {
font-family: "Roboto", Arial, sans-serif !important;
font-size: 4.8em !important;
font-weight: 200 !important;
line-height: 1.4em;
}

@media (max-width:767px) {
h2 {
font-family: "Roboto", Arial, sans-serif !important;
font-size: 3.5em !important;
font-weight: 200 !important;
line-height: 1.4em;
}
}

h3 {
font-family: Tahoma, Geneva, sans-serif !important;
font-size: 2.2em;
font-weight: 900 !important;
text-transform: uppercase;
letter-spacing: 0.1em;
line-height: 2em;
}

@media (max-width:767px) {
h3 {
font-family: Tahoma, Geneva, sans-serif !important;
font-size: 2.2em;
font-weight: 900 !important;
text-transform: uppercase;
letter-spacing: 0.1em;
line-height: 1.4em;
padding-bottom: 10px;
padding-top: 10px;
}
}

h4 {
font-family: "Open Sans", Arial, sans-serif !important;
font-size: 1.7em;
line-height: 1.8em;
}

h5 {
font-family: "Open Sans", Arial, sans-serif !important;
font-weight: 300 !important;
font-size: 1.4em;
/*font-style: italic; */
text-align: center !important;
}

h6 {
font-family: "Roboto", Arial, sans-serif !important;
font-weight: 300 !important;
font-size: 1.3em;
/* font-style: italic; */
}

p {
font-family: "Open Sans", Arial, sans-serif !important;
font-weight: 100;
font-size: 1.2em;
}

p.footer {
font-family: "Open Sans", Arial, sans-serif !important;
font-weight: 100;
font-size: 1.1em;
color: #ccc;
}


#navwrap.affix #navouter {
background-color:#1C2125 !important;
margin-top: -15px;
padding-bottom: 10px;
}

/* #navwrap .transparent {display: none;} */

#bannerwrap {
background-color:#1C2125 !important;
}

#bannerwrap #banner { padding-bottom: 20px;}

#footerwrap {
background-color: #1C2125;
background-image: url('/images/quran-bg5.jpg');
background-position: 0% 35%;
background-size: 100%;
padding: 5px 0px 25px 0px !important;
}

#footerwrap .zen-container {
padding-bottom: 0px !important;
border-top: 0px;
}

/* footer span */
.row-fluid .span8 { width: 100%;}

.social-icons a {font-size: 40px; margin: 0 6px;}

.social-icons {padding: 0px 0px 60px 0px;}
.social-icons-home {padding: 60px 0px;}

.social-icons h1 {font-size: 20px; text-align: center; color: #666 !important; margin-bottom: 20px;}

/* -- border line between grid sections --*/
.transparent {
background-color: none;
height: 0px;
border:none;
}


.pattern { 
background: none;
background-color: #fff;
}


.noresize .span9 {
width:78.2189%;
}


.rotate {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
     
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
     
    overflow:hidden;
	
    }  
 
.rotate:hover
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}



.red-hover:hover {background-color:#B94746 !important;
-webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
	}
	
.orange-hover:hover {background-color:#D17D3C !important;
-webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
	}
	
.green-hover:hover {background-color:#708358 !important;
-webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
	}

.square-grid {
border: 1px solid #999;
padding: 10px;
margin-bottom: 10px;
margin-top: 10px;
}

.square-grid-inside {
background-color: #FEFEFC;
padding: 30px 10px 15px 10px;
}



/* RESPONSIVE GRIDS */
.pure-g {
    letter-spacing: -0.31em;
    *letter-spacing: normal;
    *word-spacing: -0.43em;
    text-rendering: optimizespeed;
}

.opera-only :-o-prefocus,
.pure-g {
    word-spacing: -0.43em;
}


.pure-u {
    display: inline-block;
    zoom: 1; *display: inline;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}


.pure-u-1,.pure-u-1-2,.pure-u-1-3,.pure-u-2-3,.pure-u-1-4,.pure-u-3-4 {
    display: inline-block;
    zoom: 1; *display: inline; 
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}



.pure-u-1 {
    display:block;
}




    
    
        .pure-u-1-2 {
            width: 50%;
			/* changes - was 50% */
        }

        .pure-offset-1-2 {
            margin-left: 50%;
        }
    
        .pure-u-1-3 {
            width: 33.3%;
			/* Changed - Was 33.33333% */
        }

        .pure-offset-1-3 {
            margin-left: 33.33333%;
        }
    
        .pure-u-2-3 {
            width: 66.66667%;
        }

        .pure-offset-2-3 {
            margin-left: 66.66667%;
        }
    
        .pure-u-1-4 {
            width: 25%;
			/* Changed - Was 25% */
        }
	
	/* chrome 1+ and safari 3+ browsers only */
	@media screen and (-webkit-min-device-pixel-ratio:0) {
        .pure-u-1-4 {
            width: 25%;
        }
	}

        .pure-offset-1-4 {
            margin-left: 25%;
        }
    
        .pure-u-3-4 {
            width: 75%;
        }

        .pure-offset-3-4 {
            margin-left: 75%;
        }
    





    
    .pure-g-r {
        letter-spacing: -0.31em; 
        *letter-spacing: normal; 
        word-spacing: -0.43em;
    }


    .opera-only :-o-prefocus,
    .pure-g-r {
        word-spacing: -0.43em;
    }


    .pure-g-r img {
        max-width: 100%;
    }

    
    
        @media (min-width:980px) {
            .pure-visible-phone     { display: none; }
            .pure-visible-tablet    { display: none; }
            .pure-visible-desktop   { }
            .pure-hidden-phone      { }
            .pure-hidden-tablet     { }
            .pure-hidden-desktop    { display: none; }
        }

    

    
        @media (max-width:480px) {
            .pure-g-r > [class ^= "pure-u"] {
                width:100%;
            }
        }
    

    
        @media (max-width:767px) {

            .pure-g-r > [class ^= "pure-u"] {
                width:100%;
            }            
            .pure-visible-phone     { } 
            .pure-hidden-phone      { display: none; }
            .pure-hidden-desktop    { }
            .pure-visible-desktop   { display: none; }
        }
    

    
        @media (min-width:768px) and (max-width:979px) {
            .pure-visible-tablet    {}
            .pure-hidden-tablet     { display: none; }
            .pure-hidden-desktop    {}
            .pure-visible-desktop   { display: none; }
        }

/* END RESPONSIVE GRIDS */


/* Login Module */

.login-greeting {
    padding: 30px 0px 40px 0px;
    font-size: 16px;
}

#login-form {
    margin-top: 5% !important;
    max-width: 500px;
    margin: auto;
    padding: calc(5% + 10px);
    background-color: #fafafa;
}

#modlgn-username.input, #modlgn-passwd.input {
    width: 85%;
}
		
/* k2 cart - shopping cart */

#miniK2StoreCart {
float: right; 
text-align: right; 
padding-right: 45px;
background-image: url('/images/cart.png');
    background-repeat: no-repeat;
    background-position: 100% 2px;
font-size: 15px;
}

/* checkout css */

.checkout-modify img { margin-left: 12px; }


/* Divs with aspect ratios */

div.rectangle-ratio {
	width: 100%;
	padding-bottom: 35%; 
	position: relative;

}

div.rectangle-ratio > div {
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;

}


/* - */


div.square-ratio {
	width: 100%;
	padding-bottom: 100%; 
	position: relative;

}

div.square-ratio > div {
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;


}

/* Blocks */

.block {
border: solid 1px #666;
margin: 17px;
padding: 10px;
}

.block-home {
border: solid 1px #666;
margin: 17px;
padding: 6px;
}

.block-1 {
text-align: center;
background-color: #DEDCC2;
/* background-color: #DEDCC2; */
padding: 20px;
color: #1c2125;
}


.block-2 {
text-align: center;
background-color: #FAB754;
/* background-color: #FAB754; */
padding: 20px;
color: #1c2125;
}


.block-3 {
text-align: center;
background-color: #EDD1B5;
/* background-color: #EDD1B5; */
padding: 20px;
color: #1c2125;
}


.block-4 {
text-align: center;
background-color: #DDBE7F;
padding: 20px;
color: #1c2125;
}

.block-minicourse  {
text-align: center;
background-color: #C8C1B9;
padding: 20px;
color: #1c2125;
}

.block-kids-1 {
text-align: center;
background-color: #E97FA6;
padding: 20px;
color: #fff;
}
.block-kids-2 {
text-align: center;
background-color: #97BF4D;
padding: 20px;
color: #fff;
}
.block-kids-3 {
text-align: center;
background-color: #FF8B47;
padding: 20px;
color: #fff;
}
.block-kids-4 {
text-align: center;
background-color: #0094D2;
padding: 20px;
color: #fff;
}


.block-home-courses {
text-align: center;
padding: 20px;
color: #1c2125;
background-image: url("/images/courses-bg.jpg");
background-size: 100%;
background-repeat: no-repeat;
}

.block-home-shop {
text-align: center;
padding: 20px;
color: #1c2125;
background-image: url("/images/shop-bg.jpg");
background-size: 100%;
background-repeat: no-repeat;
}

.block-home-kids {
text-align: center;
padding: 20px;
color: #1c2125;
background-image: url("/images/kids-bg.jpg");
background-size: 100%;
background-repeat: no-repeat;
}

.block-home-donate {
text-align: center;
padding: 20px;
color: #1c2125;
background-image: url("/images/donate-bg.jpg");
background-size: 100%;
background-repeat: no-repeat;
}

.blocks-text p.block-home-title {color: #fff; text-shadow: 1px 1px #000;}
.blocks-text p.block-home-title2 {padding: 10px 0px; width: 100%; color: #fff; background-color: rgba(0,0,0,0.3); margin-top: 40%;}
.blocks-text p.block-home-title3 {padding: 10px 0px; width: 100%; color: #000; background-color: rgba(255,255,255,0.5); margin-top: 40%;}

.block-wide {
font-size: 20px;
background-color: #DDBE7F;
padding: 20px;
color: #1c2125;
}




.blocks-img {
    bottom: 40px;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;

		
}

.home-blocks-text a, .home-blocks-text {
font-size: 18px;
text-transform: uppercase;
font-weight: 100;
margin-bottom: 30px;
text-align: center;
color: #111;
}

.home-arrow {
width: 32px;
height: 32px;
border-radius: 50%;
line-height: 30px;
font-size: 18px;
border: 1px solid #1c2125;
text-align: center;
}

.blocks-text p{
font-size: 18px;
text-transform: uppercase;
font-weight: 900;
}

.blocks-text p.small-kids {
font-size: 13px;
margin-top: -15px;
}

.blocks-text p.itemTitle em {
font-weight: normal;
font-style: normal;
font-size: 16px;
margin-left: 10px;
vertical-align: middle;
}

.blocks-text p.itemTitle span {
padding-right: 20px;
border-right: 2px solid;
vertical-align: middle;
text-transform: uppercase;
font-family: Tahoma, Geneva, sans-serif !important;
font-size: 20px;
font-weight: 900 !important;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-right: 5px;
line-height: 2em;
}

.mini-course-number {
width: 32px;
height: 32px;
border-radius: 50%;
line-height: 30px;
font-size: 18px;
border: 1px solid #1c2125;
margin: 20px auto 30px auto;
text-align: center;
}

.mini-course-number-white {
width: 32px;
height: 32px;
border-radius: 50%;
line-height: 30px;
font-size: 18px;
border: 1px solid #fff;
margin: 20px auto 30px auto;
text-align: center;
color: #fff;
}


@media only screen 
and (max-width:767px) {
.shop-wrap {padding: 0px 80px;}
}

@media only screen 
and (max-width:480px) {
.shop-wrap {padding: 0px 35px;}
}


.zentitle a {color:#1c2125;}

/* -- */

#zen-copyright {
width: 100%;
text-align: center;
margin: 0px;
color: #999;
}


/* image hover margin top */
a:hover img,
#socialicons a:hover span {
  margin-top: 0px !important;
}

a:hover img {
margin-top: 0px !important;
}
.zentools.grid a:hover img {
  margin-top: 0px !important;
  margin-bottom: 10px;
}

/* K2 general overrides */

.k2store .btn-primary {
background-color: #333 !important;
background: none;
border: none;
border-radius: 0;
margin-top: 20px;
padding: 15px 50px;
color: #ccc;
}

.k2store .btn-primary:hover {
background-color: #000 !important;
background: none;
border: none;
border-radius: 0;
margin-top: 20px;
padding: 15px 50px;
color: #ccc;
}

.btn.btn-success{
background-color: #000 !important;
background: none;
border: none;
border-radius: 0;
margin-top: 20px;
padding: 5px 30px;
color: #fff;
}

.btn.btn-warning, .btn.btn-warning:hover {
background-color: #eee !important;
background: none;
border: none;
border-radius: 0;
margin-top: 20px;
padding: 5px 20px;
color: #666;
text-shadow: none;
box-shadow: none;
}

.modal-header {border-bottom: 0px;}




/* K2 item view overrides */

.product_price {font-size: 20px; margin-bottom: 10px;}
.product_special_price {font-size: 20px; margin-bottom: 10px;}
.product_quantity_input {margin: 30px 0px 0px 0px;}

.k2store-product-info {padding-top: 30px; margin-top: 10px; border-top: 1px solid #ddd;}

.inset .zen-module-body, .subpage #gradient {
  background: #fff;
}

#grid1wrap li, #grid2wrap li, #grid3wrap li, #grid4wrap li, #grid5wrap li, #grid6wrap li, #mainWrap li {
border-bottom: 0px;
}

span.k2-highlight {
padding: 6px 14px;
border-radius: 18px;
background: #eee;
margin-right: 10px;
}

/* content padding changes */
/* k2 specific */

.back-button { float: left; padding-top: 10px;}
.back-button a { background-color: #333; color: #ccc; padding: 10px 10px; font-size: 10px;}

#maininner {padding: 15px 0px;}
#midCol, #midCol.zen-content {padding: 10px 0px;}

.hide-button span {display: none;}

.pdf-popup {
display:none;
}

.pdf-window {
margin: 60px 0px;
}
.pdf-window a {
padding: 15px 50px;
background-color: #000;
border-radius: 3px;
color: #fff;
font-size: 16px;
}

.pdf-embedded {
display: none;
}


/* desktop screens */
@media only screen 
and (min-width : 1224px) {

.pdf-embedded {
display: block;
}

.pdf-popup {
display:block;
margin: 60px 0px 10px 0px;
font-size: 16px;
}

.pdf-window {
display: none;
}
.pdf-window a {
display: none;
}

}
/* -- */

#toTop span, #toTop span:hover {color: #ccc; border: 4px solid #ccc;}

/* alert text */
.alert, .alert h4 {color: #111 !important;}


a.donate-button {
padding: 15px 90px;
background-color: #0059B2;
margin: 20px 0;
color: #fff;
line-height: 80px;
font-size: 17px;
}


#grid6wrap .zen-container {
padding: 0px 0px 30px 0px;
}

/* poster div home */
.poster-div {
margin-top: 60px;
padding-top: 40px;
padding-bottom: 40px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}