@import url('https://fonts.googleapis.com/css2?family=Slabo+27px&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap');
@font-face {
    font-family: 'MyriadPro-SemiboldIt';
    src: url('../font/MyriadPro-SemiboldIt.eot');
    src: url('../font/MyriadPro-SemiboldIt.eot?#iefix') format('embedded-opentype'),
        url('../font/MyriadPro-SemiboldIt.woff2') format('woff2'),
        url('../font/MyriadPro-SemiboldIt.woff') format('woff'),
        url('../font/MyriadPro-SemiboldIt.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'MyriadPro-Light';
    src: url('../font/MyriadPro-Light.eot');
    src: url('../font/MyriadPro-Light.eot?#iefix') format('embedded-opentype'),
        url('../font/MyriadPro-Light.woff2') format('woff2'),
        url('../font/MyriadPro-Light.woff') format('woff'),
        url('../font/MyriadPro-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'MyriadPro-BoldCond';
    src: url('../font/MyriadPro-BoldCond.eot');
    src: url('../font/MyriadPro-BoldCond.eot?#iefix') format('embedded-opentype'),
        url('../font/MyriadPro-BoldCond.woff2') format('woff2'),
        url('../font/MyriadPro-BoldCond.woff') format('woff'),
        url('../font/MyriadPro-BoldCond.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'MyriadPro-Regular';
    src: url('../font/MyriadPro-Regular.eot');
    src: url('../font/MyriadPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('../font/MyriadPro-Regular.woff2') format('woff2'),
        url('../font/MyriadPro-Regular.woff') format('woff'),
        url('../font/MyriadPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyriadPro-Bold';
    src: url('../font/MyriadPro-Bold.eot');
    src: url('../font/MyriadPro-Bold.eot?#iefix') format('embedded-opentype'),
        url('../font/MyriadPro-Bold.woff2') format('woff2'),
        url('../font/MyriadPro-Bold.woff') format('woff'),
        url('../font/MyriadPro-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'MyriadPro-CondI';
    src: url('../font/MyriadPro-CondIt.eot');
    src: url('../font/MyriadPro-CondIt.eot?#iefix') format('embedded-opentype'),
        url('../font/MyriadPro-CondIt.woff2') format('woff2'),
        url('../font/MyriadPro-CondIt.woff') format('woff'),
        url('../font/MyriadPro-CondIt.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'MyriadPro-Semibold';
    src: url('../font/MyriadPro-Semibold.eot');
    src: url('../font/MyriadPro-Semibold.eot?#iefix') format('embedded-opentype'),
        url('../font/MyriadPro-Semibold.woff2') format('woff2'),
        url('../font/MyriadPro-Semibold.woff') format('woff'),
        url('../font/MyriadPro-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'MyriadPro-BoldCondIt';
    src: url('../font/MyriadPro-BoldCondIt.eot');
    src: url('../font/MyriadPro-BoldCondIt.eot?#iefix') format('embedded-opentype'),
        url('../font/MyriadPro-BoldCondIt.woff2') format('woff2'),
        url('../font/MyriadPro-BoldCondIt.woff') format('woff'),
        url('../font/MyriadPro-BoldCondIt.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'MyriadPro-Cond';
    src: url('../font/MyriadPro-Cond.eot');
    src: url('../font/MyriadPro-Cond.eot?#iefix') format('embedded-opentype'),
        url('../font/MyriadPro-Cond.woff2') format('woff2'),
        url('../font/MyriadPro-Cond.woff') format('woff'),
        url('../font/MyriadPro-Cond.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyriadPro-BoldIt';
    src: url('../font/MyriadPro-BoldIt.eot');
    src: url('../font/MyriadPro-BoldIt.eot?#iefix') format('embedded-opentype'),
        url('../font/MyriadPro-BoldIt.woff2') format('woff2'),
        url('../font/MyriadPro-BoldIt.woff') format('woff'),
        url('../font/MyriadPro-BoldIt.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}


@font-face {
    font-family: 'OpenSans-Extrabold';
    src: url('../font/OpenSans-Extrabold.eot');
    src: url('../font/OpenSans-Extrabold.eot?#iefix') format('embedded-opentype'),
        url('../font/OpenSans-Extrabold.woff2') format('woff2'),
        url('../font/OpenSans-Extrabold.woff') format('woff'),
        url('../font/OpenSans-Extrabold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans-Bold';
    src: url('../font/OpenSans-Bold.eot');
    src: url('../font/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
        url('../font/OpenSans-Bold.woff2') format('woff2'),
        url('../font/OpenSans-Bold.woff') format('woff'),
        url('../font/OpenSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans';
    src: url('../font/OpenSans.eot');
    src: url('../font/OpenSans.eot?#iefix') format('embedded-opentype'),
        url('../font/OpenSans.woff2') format('woff2'),
        url('../font/OpenSans.woff') format('woff'),
        url('../font/OpenSans.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans-SemiboldItalic';
    src: url('../font/OpenSans-SemiboldItalic.eot');
    src: url('../font/OpenSans-SemiboldItalic.eot?#iefix') format('embedded-opentype'),
        url('../font/OpenSans-SemiboldItalic.woff2') format('woff2'),
        url('../font/OpenSans-SemiboldItalic.woff') format('woff'),
        url('../font/OpenSans-SemiboldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'OpenSans-Semibold';
    src: url('../font/OpenSans-Semibold.eot');
    src: url('../font/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),
        url('../font/OpenSans-Semibold.woff2') format('woff2'),
        url('../font/OpenSans-Semibold.woff') format('woff'),
        url('../font/OpenSans-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans-BoldItalic';
    src: url('../font/OpenSans-BoldItalic.eot');
    src: url('../font/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../font/OpenSans-BoldItalic.woff2') format('woff2'),
        url('../font/OpenSans-BoldItalic.woff') format('woff'),
        url('../font/OpenSans-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'OpenSans-Italic';
    src: url('../font/OpenSans-Italic.eot');
    src: url('../font/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
        url('../font/OpenSans-Italic.woff2') format('woff2'),
        url('../font/OpenSans-Italic.woff') format('woff'),
        url('../font/OpenSans-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'OpenSans-ExtraboldItalic';
    src: url('../font/OpenSans-ExtraboldItalic.eot');
    src: url('../font/OpenSans-ExtraboldItalic.eot?#iefix') format('embedded-opentype'),
        url('../font/OpenSans-ExtraboldItalic.woff2') format('woff2'),
        url('../font/OpenSans-ExtraboldItalic.woff') format('woff'),
        url('../font/OpenSans-ExtraboldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'OpenSans-Light';
    src: url('../font/OpenSans-Light.eot');
    src: url('../font/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
        url('../font/OpenSans-Light.woff2') format('woff2'),
        url('../font/OpenSans-Light.woff') format('woff'),
        url('../font/OpenSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansLight-Italic';
    src: url('../font/OpenSansLight-Italic.eot');
    src: url('../font/OpenSansLight-Italic.eot?#iefix') format('embedded-opentype'),
        url('../font/OpenSansLight-Italic.woff2') format('woff2'),
        url('../font/OpenSansLight-Italic.woff') format('woff'),
        url('../font/OpenSansLight-Italic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}
/**Third book imageupload redio button design**/
.input-first.attach_photo_option {
    margin-bottom: 10px !important;
    width: 100%;
    padding-left: 16px;
}
.iframe-maindiv {
    height: 1794px;
}

/*end here*/
/* third book cropper close btn css   **/
.close-click-img{
        float: right;
    width: 15px;
    cursor: pointer;
}
.close-click {
    top: -10%;
    transform: translateX(-50%);
    left: 49%;
    position: absolute;
    top: 1%;
    width: 100%;
    z-index: 999;
}
.subbtn{
    float:left;
}
/*end here*/
body{
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}
.mobileresponsive{
    display:none;
}


ul{
    padding: 0px;
    margin-bottom: 0px;
}

li{
    list-style: none;
}
/* meaning css for third book**/
.enter-password {
    text-transform: lowercase;
}
span#word_remaining_text {
    position: inherit;
    background: none !important;
}
.limitp{
    font-size: 14px;
    margin: 4px 0px !important;
}
/*end here**/
/*---- header css start form here now ----*/
.cartIconHover{
    display: none;
}
#faq:hover .cartIconHover{
    display: block;
}
#faq:hover .cartIcon{
    display: none;
}

#flipbook{
    width:1110px;
    height:429px;
}

#flipbook .page{
    width:400px;
    height:300px;
    background-color:white;
    font-size:20px;
    text-align:center;
}

#flipbook .page-wrapper{
    -webkit-perspective:2000px;
    -moz-perspective:2000px;
    -ms-perspective:2000px;
    -o-perspective:2000px;
    perspective:2000px;
}

#flipbook .hard{
    background: #ccc!important;
    color:#333;
    -webkit-box-shadow:inset 0 0 5px #666;
    -moz-box-shadow:inset 0 0 5px #666;
    -o-box-shadow:inset 0 0 5px #666;
    -ms-box-shadow:inset 0 0 5px #666;
    box-shadow:inset 0 0 5px #666;
    font-weight:bold;
}

#flipbook .odd{
    background:-webkit-gradient(linear, right top, left top, color-stop(0.95, #FFF), color-stop(1, #DADADA));
    background-image:-webkit-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
    background-image:-moz-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
    background-image:-ms-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
    background-image:-o-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
    background-image:linear-gradient(right, #FFF 95%, #C4C4C4 100%);
    -webkit-box-shadow:inset 0 0 5px #666;
    -moz-box-shadow:inset 0 0 5px #666;
    -o-box-shadow:inset 0 0 5px #666;
    -ms-box-shadow:inset 0 0 5px #666;
    box-shadow:inset 0 0 5px #666;
    
}

#flipbook .even{
    background:-webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada));
    background-image:-webkit-linear-gradient(left, #fff 95%, #dadada 100%);
    background-image:-moz-linear-gradient(left, #fff 95%, #dadada 100%);
    background-image:-ms-linear-gradient(left, #fff 95%, #dadada 100%);
    background-image:-o-linear-gradient(left, #fff 95%, #dadada 100%);
    background-image:linear-gradient(left, #fff 95%, #dadada 100%);
    -webkit-box-shadow:inset 0 0 5px #666;
    -moz-box-shadow:inset 0 0 5px #666;
    -o-box-shadow:inset 0 0 5px #666;
    -ms-box-shadow:inset 0 0 5px #666;
    box-shadow:inset 0 0 5px #666;
}

#caption {
    line-height:50px;
    font-weight:bold;
}

.top-bar {
	background:#6B7986;
	padding: 15px 0;
}
.btn-shopping a {
	background: #fff;
	padding: 4px 14px;
	color: #131313;
	border-radius: 10px;
	font-size: 16px;
	margin-right: 8px;
	text-decoration: none;
}
.btn-shopping span{
    font-size: 18px;
    color: #fff;
}
.featured, .menu-box {
	text-align: right;
}
.header-menu {
	margin: 15px 0;
}
.site-logo img, .footer-logo img {
    width: 100%;
    max-width: 100px;
}
.menu-box li {
    display: inline-block;
    font-family: OpenSans-Semibold;
}
.menu-box a {
    color: #131313;
    text-decoration: none;
    font-size: 20px;
    font-family: OpenSans;
    padding: 9px 17px;
    margin-right: 0;
    border: 1px solid #e6a201;
    border-radius: 28px;
    margin: 0 6px;
}
.menu-box li:last-child a {
    margin-right: 0;
}
.add-book-cart p {
    font-family: OpenSans;
    font-size: 15px;
}
.add-book-cart img {
    border-radius: 50%;
    max-width: 100%;
    border: 5px solid #81b9b0;
    box-shadow: 0 0 20px #ccc;
    margin: 18px 0px 30px;
}
.btn-books {
    margin-right: 16px;
    color: #fff !important;
    text-transform: capitalize;
    background: #e6a201;
    padding: 12px 20px ;
    border-radius: 50px;
    margin-left: 20px;
    text-decoration: none;
    border: 1px solid #e6a201;
}
.btn-books:hover {
    background: #fff;
    color: #e6a201 !important;
}
.read-btn a:hover {
    background: #e6a201;
    border-radius: 25px;
    border: 2px solid #fff;
    color: #000;
    text-decoration: none;
}
/*---- header css end form here now ----*/

/*---- banner css start form here now ----*/

.banner-content {
    position: absolute;
    width: 100%;
    max-width: 1170px;
    margin: auto;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 20px;
}
.inner-box {
    max-width: 479px;
    background: rgba(255, 255, 255, 0.5);
    padding: 30px 60px;
    margin-left: auto;
}
.btn-shopping a:hover{
text-decoration:none;
color:#e6a201;
}
.banner-content h1 {
    font-family: 'Archivo', sans-serif;
    font-size: 36px;
    font-weight: 600;
    color: #000;
    line-height: 47px;
    margin-bottom: 20pt;
}
section.stroy-books::before {
    content: '';
    width: 100%;
    height: 57px;
    background-size: cover;
    background: url(../images/curve.png);
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 0;
    right: 0;
    top: -48px;
}
.stroy-books {
    padding: 50px 0px;
    background: #FFD585;
    position: relative;
    margin-top:-20px;
}
.muslims-content {
    max-width: 390px;
}
.banner-content a {
    font-size: 23px;
    color: #fff;
    text-decoration: none;
    padding: 10px 25px;
    background: #e6a201;
    border-radius: 50px;
    border: 2px solid #fff;
    transition: all .6s;
    font-weight: 400;
}
.banner-content a:hover {
	background: #fff;
	color: #131313;
	text-decoration:none;
}
/*---- banner css end form here now ----*/

/*---- stroy books css start form here now ----*/
section.subscriber{
    background: url(../images/grren-bg.jpg);
    padding: 42px 0px 11px;
    margin-top: 14px;
}
section.subscriber input[type="text"] {
    border: none;
    padding: 10px 8px 10px;
    width: 100%;
    border-radius: 5px;
}
section.subscriber input[type="submit"] {
    margin-top: 10px;
    background: #e6a201;
    padding: 8px 30px;
    border-radius: 7px;
    border: 2px solid #fff;
    color: #f8f9fa;
    font-weight: 500;
}
section.subscriber p.sucess {
    color: green;
    line-height: 19px;
    font-weight: 400;
    display: none
}
p.aleradyexits {
    line-height: 19px;
    font-weight: 400;
    color: red;
    display: none
}
p.failed {
    color: red;
    display: none;
}
section.subscriber h5 {
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
}
section.subscriber p {
    line-height: 25px;
    margin-bottom: 40px;
    font-size: 16px;
    font-weight: normal;
}
.carousel span.glyphicon {
    background: transparent;
    border-radius: 25px;
    opacity: 1;
    height: 50px;
    width: 50px;
    font-size: 30px;
    color: #fff;
}
.carousel .carousel-control{
opacity:0.9;
}
.carousel .glyphicon-chevron-left:before ,.glyphicon-chevron-right:before{
    top: 9px;
    position: absolute;
    left: 0;
    right: 0;
}
.stroy-books p {
	font-size: 28px;
	color: #fff;
	margin-bottom: 0px;
	font-family: 'Archivo', sans-serif;
	font-weight: 600;
}
.read-btn {
	text-align: center;
}
.read-btn a {
    background: #fff;
    padding: 16px 15px 12px;
    border-radius: 4px;
    font-size: 18px;
    color: #131313;
    font-family: 'Archivo', sans-serif;
    text-decoration: none;
    border: 1px solid #fff;
    border-radius: 25px;
}
.read-btn a i {
	font-size: 13px;
	background:#e6a201;
	width: 22px;
	height: 22px;
	position: relative;
	line-height: 22px;
	text-align: center;
	color: #fff;
	border-radius: 50px;
	margin-left: 5px;
}
/*---- stroy books css end form here now ----*/

/*---- steps css start form here now ----*/
.steps {
    text-align: center;
    padding: 40px 0 80px;
}
.title {
    font-size: 32px;
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    color: #000;
	margin-top:30px;
}
.sub-title {
    font-size: 28px;
    font-weight: 400;
    color: #000;
}
.book-selves {
    margin-top: 45%;
    position: relative;
}
.counts {
	background: #656565;
	color: #fff;
	font-size: 28px;
	display: block;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	border-radius: 50px;
	position: absolute;
	right: 0;
	left: 0;
	top: -30px;
	bottom: 0;
	margin: 0 auto;
}
.book-selves h3 {
    font-size: 20px;
    color: #e6a201;
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    max-width: 210px;
    margin: 20px auto 12px;
    width: 100%;
}
.preview-book h3 {
	max-width: 190px;
}
.book-selves p {
	font-size: 16px;
}
.book-selves p {
    font-size: 16px;
    width: 100%;
    max-width: 220px;
    color: #000;
    margin: 0 auto;
}
/*---- steps css end form here now ----*/

/*---- your book css start form here now ----*/
.your-book {
    background: url(../images/backimg.jpg);
    background-repeat: repeat;
    background-position: center;
    height: 100%;
    padding: 40px 0 80px;
    text-align: center;
}
.build-book:hover {
    transform: translate(0,-20px);
    transition: all 0.25s ease-in-out;
    border-radius: 10px;
}
.form-book h2 {
    font-family: MyriadPro-Regular;
    font-size: 30px;
    margin-bottom: 20px;
    text-align: left;
    color: #fff;
    display: inline-block;
    width: 50%;
    background: #8ecdc3;
    padding: 15px 10px;
    border-radius: 6px;
}
.form-book form input[type="submit"] {
    background: #e6a201;
    color: #fff !important;
    text-transform: capitalize;
    padding: 6px 30px;
    border-radius: 4px;
    font-size: 18px;
    /*box-shadow: 0px 4px 0 1px #e79124;*/
    text-decoration: none;
    border: 1px solid #e6a201;
}
.input-first input#show_hide, .input-first label {
    width: 96% !important;
}
.cart-content img {
    max-width: 100%;
    width: 109px;
}
.right-cont h3 span {
    float: right;
    font-size: 18px;
}
.right-cont h3 span img {
    max-width: 100%;
    width: 20px;
}
.add-book-cart h2, .privacy-content h2, .privacy-content h3 {
    font-size: 25px;
    padding: 0 0 30px 0;
    font-family: OpenSans-bold;
    color: #000;
    line-height: 34px;
    letter-spacing: 0.3px;
}
.privacy-content p, .add-book-cart p {
    font-family: OpenSans;
    font-size: 15px;
}
.privacy-content {
    padding: 50px 0;
    background-color: #f3f3f3;
}
.add-book-cart h3 {
    font-family: OpenSans-bold;
    margin: 0 0 20px 0;
    color: #e6a201;
    font-size: 21px;
}
.right-cont h4 {
    font-size: 20px;
    color: #e6a201;
    font-family: MyriadPro-BOld;
}
.order-total {
    padding: 20px 0 0;
    border-top: 1px solid #ccc;
    margin: 20px 0;
    text-align: center;
}
.checkout a {
    padding: 16px 156px;
    background: #8ecdc3;
    border: 1px solid #8ecdc3;
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    font-family: OpenSans-Semibold;
}
.order-now input {
    color: #222;
    padding: 13px 30px;
    margin: auto;
    border-radius: 25px;
    border: 1px solid #e5e5e5;
    width: calc(100% - 97px);
    background: #f3f3f3;
    font-family: OpenSans-Semibold;
}

.order-now button {
    position: absolute;
    right: 68px;
    background: #e6a201;
    color: #fff;
    text-transform: capitalize;
    padding: 13px 20px;
    text-decoration: none;
    border: 1px solid #e6a201;
    border-top-right-radius: 28px;
    border-bottom-right-radius: 28px;
	font-family: OpenSans-Semibold;
}
.order-now button:hover{
   color: #e6a201;
   background: #fff;
}
.checkout {
    padding: 36px 0;
}
.cart-content a:hover {
    color: #e6a201;
    text-decoration: none;
}
.order-now a img {
    max-width: 100%;
}
.checkout a:hover{
   text-decoration:none;
    background: #fff;
	color:#8ecdc3;
}
.cart-content a {
    font-family: MyriadPro-Semibold;
    color: #8ecdc3;
    text-transform: capitalize;
}
.cart-content a .fa {
    margin-right: 7px;
}
.cart-content .right-cont {
    display: inline-block;
    width: calc(100% - 116px);
    vertical-align: top;
    padding-left: 15px;
}
.form-book form input[type="submit"]:hover {
    background: transparent;
    color: #e6a201 !important;
}
.bottom-submit {
    text-align: left;
    padding: 0 30px 0;
}
.form-book form h5 {
    font-size: 18px;
    color: #000;
    padding: 30px 0 0;
    font-family: MyriadPro-Regular;
}
.form-book form h5 a{
   color:#000;
}
.form-book form h5 a:hover, .right-side-review a{
    text-decoration: none;
}
.your-book .title {
    text-transform: uppercase;
    margin-top: 8px;
    margin-bottom: 60px;
}
.input-first span {
    background-image: url(../images/arrow1.png);
    width: 23px;
    height: 37px;
    background-position: center;
    z-index: 9999999;
    top: 31px;
    position: absolute;
    background-repeat: no-repeat;
    right: 5px;
    pointer-events: none;
    background-color: #fff;
}
.input-first select {
    height: 40px;	
}	
.build-book {
    padding: 77px 22px;
    height: 100%;
}
.cart-content {
    background: #fff;
    border: 1px solid #eee;
    margin-bottom: 20px;
    padding: 20px;
	box-shadow: 0 0 9px #e7e7e7;
}
.order-now {
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
	box-shadow: 0 0 9px #e7e7e7;
}
.order-now h2 {
    font-size: 20px;
    font-family: MyriadPro-Semibold;
    color: #131313;
	padding:0;
}
.add-book-cart {
    padding: 60px 0;
    background: #f3f3f3;
}
.right-cont h3 {
    font-size: 20px;
    font-family: MyriadPro-Regular;
}
.build-book.girl {
    background: #F3CD7A;
    box-shadow: 0 0 10px #c3c3c3;
}
.form-book p {
    font-family: OpenSans-Semibold;
    color: #121212;
}
.form-book form{
    position:relative;
 }
 .order-now h3 {
    font-size: 14px;
    font-family: OpenSans-Semibold;
    padding: 14px 0;
}
.order-total h4 span {
    float: right;
    color: #e6a201;
}
.order-total h4 {
    font-size: 20px;
    font-family: MyriadPro-Semibold;
    color: #131313;
    padding: 0;
    text-align: left;
	}
.order-now h3 span {
    float: right;
    font-family: OpenSans-Bold;
}
.form-side h3 {
    background-image: url(../images/user.png);
    position: absolute;
    height: 20px;
    width: 19px;
    left: 45%;
    top: 10px;
    background-repeat: no-repeat;
    background-size: 17px 17px;
    cursor: pointer;
}
.carousel-indicators li.active img {
    border: 4px solid #e6a201;
}
.bottom-reviews ul li {
    padding: 1px 0;
}
.bottom-reviews p, .bottom-reviews ul li {
    font-size: 16px;
    font-family: MyriadPro-Regular;
    padding-top: 20px;
    max-width: 350px;
}
.select-lightbox input {
    height: 119px;
    width: 138px;
}
.select-lightbox {
    position: relative;
    width: 95%;
    height: 153px;
    padding: 20px 40px;
    border: 1px solid #dadada;
    display: block;
    margin: 0 10px;
    text-align: left;
    background: #eee;
}
.select-lightbox img {
    padding: 8px;
    height: 116px;
    width: 116px;
    background: #fff;
    border: 1px solid #ccc;
    max-width: 100%;
    margin: 4px;
}
.select-lightbox input :checked ~ .select-lightbox input::after {
    border: 2px solid #e6a201;
}
.select-lightbox input[type="radio"] {
    position: absolute;
    margin-left: 0;
    opacity: 0;
}
.right-side-review {
    padding-left: 30px;
}
.bottom-reviews a img{
   margin-right:10px;
}
.carousel-indicators{
    max-height: 173px;
}
@media not all, (-webkit-transform-3d){
.carousel .carousel-inner>.item {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-transition: -webkit-transform 1600ms;
    transition: -webkit-transform 1600ms, transform 1600ms;
    -webkit-transform: scale(1);
    transform: scale(1);
}
}
.bx-wrapper {
    max-width: 100% !important;
}
.carousel-inner>.item.active{
    -webkit-transition: -webkit-transform 1600ms;
    transition: -webkit-transform 1600ms, transform 1600ms;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.build-book.boy{
    background: #C8E7E9;
	box-shadow: 0 0 10px #afaeae;
}
.build-book img {
	width: 100%;
}
.bx-wrapper {
 border: 0 !important;
	}
.build-book a {
    background: #fff;
    font-size: 25px;
    padding: 8px 0;
    display: block;
    width: 100%;
    max-width: 278px;
    margin: 14% auto 0;
    border-radius: 50px;
    color: #131313;
    text-decoration: none;
    transition: all .6s;
}
.build-book a:hover {
    background: #e6a201;
    color: #fff;
    text-decoration: none;
}
.bx-wrapper {
    margin-bottom: 0 !important;
}
.bx-wrapper .bx-prev {
    left: 10px;
    background: url("../images/controls.png") no-repeat 0 -32px !important;
}
.bx-wrapper .bx-next {
    right: 10px;
    background: url("../images/controls.png") no-repeat -43px -32px !important;
}


.your-book .col-md-6 {
	padding: 0 30px;
}
/*---- your book css end form here now ----*/
ul.nav.nav-tabs li {
    display: inline-block;
}



/*---- three box css start form here now ----*/
.three-box {
    background: url(../images/grren-bg.jpg);
    text-align: center;
    padding: 43px 0;
}

.content-layout p {
    margin: 15px 0 0;
    font-size: 22px;
    font-family: 'Archivo', sans-serif;
    font-weight: 500;
    color: #000;
}
.img-box {
	position: relative;
	height: 110px;
}
.img-box::after {
	content: " ";
	position: absolute;
	top: -4px;
	right: -8px;
	left: 0;
	bottom: 0;
	z-index: 0;
	background: url("../images/box-shadow.png");
	background-repeat: no-repeat;
	background-position: center;
}
.img-box img {
  position: relative;
  z-index: 99;
}
/*---- three box css end form here now ----*/
.muslims {
    padding: 70px 0;
}
.muslims-img img {
    width: 100%;
    max-width: 86%;
}
.muslims-content h3 {
    font-size: 31px;
    color: #131313;
    font-family: 'Archivo', sans-serif;
    width: 100%;
    font-weight: 600;
    line-height: 46px;
    margin-bottom: 20px;
    margin-top: 0;
}
.muslims-content p {
    font-size: 17px;
    line-height: 30px;
    margin-bottom: 40px;
    color: #000;
}

.muslims-content .btn-books {
    margin-left: 0;
    padding: 15px 20px;
    text-decoration: none;
    font-size: 19px;
}
.muslims-content a i {
	margin-left: 10px; 
}
.contact-us ul {
    background: #e6a201;
    border-radius: 94px;
    padding: 12px 4px;
}
/* css again n */
.contact-us ul li:last-child a:hover {
    background: #fff;
	text-decoration:none;
}
.top-footer {
    width: 100%;
    background-size: cover;
    background-position: center;
    background: url("../images/backimg.jpg");
    padding: 40px 0;
}
.contact-us ul li a:hover{
    text-decoration:none;
}
.contact-us ul li a {
    color: #fff;
    font-size: 19px;
    font-family: OpenSans;
}
.contact-us ul li {
    display: inline-block;
    margin: 0 45px;
    vertical-align: middle;
}
.footer-logo img {
    border-radius: 50%;
}
.copy-right p {
    text-align: center;
    padding: 30px 0 0 0;
    color: #000;
    font-weight: 700;
    font-size: 19px;
    margin: 0;
}
.footer-links ul li a:hover {
    color: #000;
    border-color: #000;
    text-decoration: none;
}
.footer-links ul li{
 display:inline-block;
}
.featured img {
    max-width: 100%;
}
.footer-links {
    text-align: center;
    padding: 6px 0 20px;
}
.social-icon ul {
    text-align: center;
}
.social-icon ul li {
  display:inline-block;
}
.footer-links ul li a {
    color: #e6a201;
    font-weight: 500;
    font-size: 17px;
}
.footer-links ul li {
 padding:0 10px;
}
.social-icon ul li a:hover {
    color: #e6a201;
    border-bottom: 2px solid #e6a201;
    padding-bottom: 3px;
}
.footer-links li:first-child {
    border-right: 1px solid #e6a201;
}
.social-icon ul li a {
    color: #000;
    font-size: 20px;
    margin: 0 9px;
}
.contact-us ul li:last-child a {
    background: #ecb227;
    padding: 8px 30px;
    border-radius: 7px;
    border: 2px solid #fff;
    color: #000;
    font-weight: 500;
}
.contact-us p {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    margin: 0;
}
.bx-wrapper {
    margin: auto;
}
.slider-testimonial {
    background-image: url(../images/testibanner.png);
    width: 100%;
    padding: 75px 0;
    background-size: contain;
}
.book-selves img {
    max-width: 80%;
}
.slider-testimonial .bx-wrapper {
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    background: transparent;
}
.slider-box {
    background: #fff;
    border-top-left-radius: 44px;
    border-bottom-right-radius: 44px;
}
.slider-box p {
    padding: 38px 30px 16px 30px;
    text-align: left;
    font-size: 16px;
    color: #000;
    overflow: auto;
    line-height: 26px;
    min-height: 259px;
}
.menu-box li a:hover {
    color: #e6a201;
	text-decoration: none;
}
.slider-testimonial h3.title {
    text-align: center;
    color: #fff;
    font-size: 36px;
    padding-bottom: 33px;
    font-weight: 500;
    line-height: 48px;
}
.slider-testimonial .bx-pager.bx-default-pager a.active{
    background: #e6a201 !important;
}
.slider-testimonial .bx-wrapper .bx-pager.bx-default-pager a {
    background: #fff;
    width: 40px;
    height: 4px;
    border-radius: 0;
}
.bottm-conslider-box {
    background: #e6a201;
    color: #fff;
    border-bottom-right-radius: 44px;
    padding: 18px 30px;
    border-top-left-radius: 44px;
}
.bottm-conslider-box p {
    margin: 0;
    color: #fff;
    padding: 0 !important;
    font-weight: 300;
}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
    bottom: -46px !important;
}
.bx-wrapper .bx-pager{
    padding-top:30px;
}
.bottm-conslider-box h5 {
    font-size: 17px;
    color: #000;
    font-weight: 500;
    margin: 0;
}
.bx-controls-direction a {
    background: transparent !important;
}
.your-book img {
    max-width: 390px;
}
.slider-testimonial a.bx-next, .slider-testimonial a.bx-prev {
    display: none;
}

/*----inner pages css---*/
section.inner-banner img {
    max-width: 100%;
    width: 100%;
}
.thumbbook-deatils .carousel-indicators {
    position: relative;
    margin: 0;
    padding: 20px 0;
}
.thumbbook-deatils {
    background-color: #f3f3f3;
    padding: 70px 0;
}
.build-a {
    background: #fff;
}
.build-a.girl-book {
    border: 5px solid #F3CD7A;
    border-top-left-radius: 45px;
    border-bottom-right-radius: 45px;
}
.build-a.girl-book h2{
    background:#F3CD7A;
    border-top-left-radius:38px;
    border-bottom-right-radius:40px;
	}
.build-a h2 {
    color: #fff;
    font-size: 18px;
    padding: 16px 0;
    font-weight: 600;
}
.build-a.boy-book h2{
    background:#C8E7E9;
    border-top-left-radius:38px;
    border-bottom-right-radius:40px;
}
.build-a.boy-book {
    border: 5px solid #C8E7E9;
	border-top-left-radius:45px;
    border-bottom-right-radius:45px;
}
.build-a img {
    max-width: 274px;
    padding: 28px 0;
}
.bottom-con {
    padding: 12px;
}
.bottom-con h3 {
    font-size: 19px;
    color: #000;
    font-weight: 600;
}
.bottom-con ul li {
    margin-right: 4px!important;
    display: inline-block;
}
.girl-book ul li:first-child a, .boy-book ul li:first-child a {
    padding: 9px 17px;
    background: #131313;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid #131313;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.girl-book ul li:first-child a:hover, .boy-book ul li:first-child a:hover {
 /*   background: #fff;
    color: #000;*/
    text-decoration: none;
}
.girl-book ul li:last-child a, .boy-book ul li:last-child a {
    padding: 9px 10px;
    background: #F3CD7A;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.bottom-con ul {
    margin: 27px 0;
}
.boy-book ul li:last-child a{
   background:#C8E7E9;
   border:2px solid #C8E7E9;
}
.girl-book ul li:last-child a{
   border:2px solid #F3CD7A;
}
.girl-book ul li:last-child a:hover{
/*   color: #e6a201;
   background:#fff;*/
   text-decoration:none;
}
.boy-book ul li:last-child a:hover{
  /* background:#fff;
   color:#8ecdc3;*/
   text-decoration:none;
}
.build-a p {
    text-align: left;
    font-size: 15px;
    color: #000;
    line-height: 22px;
}
.build-a img {
    max-width: 260px;
    padding: 20px 0 10px;
}
section.Our-book h3.title {
    padding-bottom: 25px;
}
section.Our-book {
    text-align: center;
    padding: 90px 0;
}
.build img {
    max-width: 150px;
}
.main-bann-book {
    background-image: url(../images/back-blue.png);
    background-position: center;
    background-size: cover;
    width: 100%;
    padding:  0;
    position: relative;
}
.left-book-options:hover, .right-book-options:hover ,.left-second_tab:hover, .rihgt-second_tab:hover{
    box-shadow: 0 0 9px #e6a201;
}
.main-bann-book form select {
    background: transparent;
    border: navajowhite;
    font-size: 17px;
    color: #fff;
    padding-bottom: 5px;
}
.select-add {
    padding: 30px 6px;
    text-align: center;
}
/*----checkbox-preview---*/
.main-bann-book .container {
    position: relative;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    color: #fff;
}
.main-bann-book .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    z-index: -1;
}
.select-add a {
    background: #e6a201;
    color: #fff;
    padding: 16px 54px 16px;
    border-radius: 4px;
    box-shadow: 2px 3px 0 1px #da9900;
    font-size: 18px;
    font-family: OpenSans;
    text-decoration: none;
    border: 1px solid #e6a201;
}
.con-vel textarea {
    background: transparent;
    border: none;
    padding: 10px 18px;
    height: 45px;
    width: 130px;
    font-family: OpenSans-Semibold;
    color: #fff;
	resize: none;
}
.left-second_tab, .right-second_tab textarea {
    box-shadow: 0 0 5px #e6a201;
}
.right-second_tab form textarea:focus{
   outline:none;
}
.con-vel select {
    padding: 12px 10px;
}
.con-vel textarea:focus {
    outline: none;
}
.select-book label p {
    display: inline-block;
}
.select-book label img {
    display: inline-block;
    vertical-align: sub;
    margin-right: 7px;
}
.select-book label {
    display: inline-block;
}
.toptab-preview .w3-bar.w3-black {
    text-align: center;
    padding: 10px 0 34px 0;
}
.toptab-preview .w3-button {
    background: #fff;
    border: 1px solid #dadada;
    border-radius: 3px;
    height: 44px;
    width: 44px;
    margin: 0 5px;
    padding: 1px;
}
.toptab-preview h2 {
    font-size: 22px;
    font-weight: 600;
}
.toptab-preview p {
    font-size: 16px;
}
.w3-container.city img {
    max-width: 100%;
    border: none;
    width: 100%;
}
.select-book {
    padding: 2px 15px;
    border: 1px solid #ccc;
    text-align: center;
	border-radius: 3px;
}
.w3-black button.active {
    border: 2px solid #e6a201;
}
.img-left, .img-right {
    padding: 0;
}
.toptab-preview .w3-button img {
    max-width: 100%;
}
.toptab-preview {
    background-color: #f3f3f3;
    padding: 60px 0 80px;
}
.tab-content img {
    width: 100%;
}
ul.nav.nav-tabs {
    padding: 10px 0 10px 0;
    width: 290px;
    position: relative;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
    display: block;
}
ul.nav.nav-tabs li.active {
    border: 2px solid #e6a201;
}
.toptab-preview .nav-tabs li a:hover {
    border: 3px solid #e6a201;
}
.toptab-preview .nav-tabs li a {
    height: 50px;
    width: 50px;
    background: #fff;
    text-align: center;
    padding: 0px;
    border-radius: 3px;
    margin: 0;
    border: 2px solid #ccc;
}
.nav-tabs .nav-link.active {
    border: 3px solid #e6a201;
}
.nav-tabs>li {
    margin: 0 7px;
}
.nav>li>a>img {
    max-width: 100%;
    min-height: 100%;
}
.toptab-preview h2, .toptab-preview p {
    text-align: center;
	color:#000;
}
.main-bann-book .checkmark {
    position: absolute;
    top: 0;
    text-align: center;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #fff;
    border-radius: 16px;
    margin: auto;
    left: 0;
    right: 90px;
}
/*#BroserModal{
    background: #00000087;
}*/
.form-side {
    border-bottom: 1px solid #e5e5e5;
    position: relative;
    margin-bottom: 14px;
    padding-bottom: 10px;
}
.select-lightbox::before {
    content: '';
    position: absolute;
    height: 33px;
    width: 28px;
    background-image: url(../images/tooltip.png);
    background-size: 28px 18px;
    background-repeat: no-repeat;
    top: -16px;
}
.con-vel label{
    position: absolute;
    height: 24px;
    width: 16px;
    background-image: url(../images/elect-arrow.png);
    background-repeat: no-repeat;
    right: 20px;
    top: 8px;
    margin: auto;
    text-align: center;
    background-position: center;
}
.inner-right h5 span {
    font-weight: 700;
    font-size: 15px;
    display: block;
}
.form-side span {
    top: 63px;
    /*right: 26px;*/
    height: 14px;
    width: 10px;
    text-align: center;
    position: absolute;
    background: #8ecdc3;
    pointer-events: none;
    background-image: url(../images/arrow1.png);
    background-repeat: no-repeat;
}
.con-vel {
    position: relative;
    max-width: 174px;
    text-align: center;
    margin: auto;
}
.main-bann-book form select:focus, .toptab-preview .w3-button{
outline:none;
}
.main-bann-book .container:hover input ~ .checkmark {
    background-color: #f3f3f3;
}
.main-bann-book .container input:checked ~ .checkmark {
  background-color: #fff;
}
.main-bann-book .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.main-bann-book .container input:checked ~ .checkmark:after {
  display: block;
}
.main-bann-book .container .checkmark:after {
    left: 6px;
    top: 4px;
    width: 6px;
    height: 9px;
    border: solid #82bab1;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.left-book-options p, .right-book-options p {
    width: calc(100% - 318px);
    color: #888;
    position: relative;
    display: inline-block;
    font-size: 14px;
    line-height: 21px;
    padding-top: 20px;
    text-align: left;
}
.select-add a:hover {
    background: #fff;
    text-decoration: none;
    color: #e6a201;
}
/*--checkbox- css end--*/

/*--thumbnail css --*/
.carousel-thumbnails .carousel-indicators img {
    max-width: 100%;
    overflow: hidden;
    display: block;
}
.carousel-thumbnails .carousel-indicators li {
    height: auto;
    max-width: 100%;
    width: 100%;
    border: none;
    box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.75);
}
.carousel-indicators li:last-child{
   margin-right:0;
}
.carousel-indicators li {
    margin-right: 18px;
    margin-left: 0;
}
.carousel-control-next-icon {
    background-image: url(../images/right-pager.png);
    background-size: 12px 20px;
}
.carousel-control-prev-icon{
    background-image: url(../images/left-pager.png);
    background-size: 12px 20px;
}
/*--thumbnail css end--*/

.right-side-review h2 {
    text-transform: capitalize;
    text-align: left;
    color: #000;
    font-size: 30px;
    font-weight: 600;
    margin: 20px 0;
}
h3 span {
    color: black;
}
.right-side-review h3 {
    text-align: left;
    color: #e6a201;
    font-weight: 600;
    margin: 20px 0;
}
.bottom-reviews {
    margin-top: 40px;
    border-top: 1px solid #ccc;
    padding-top: 20px;
}
.right-side-review a {
    background: #8ecdc3;
    padding: 7px 39px;
    border-radius: 6px;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
}
.bottom-reviews ul {
    padding-top: 12px;
    border-top: 1px solid #cccc;
    margin-top: 47px;
}
.bottom-reviews a {
    font-family: teal;
    color: #000;
    background: transparent;
    padding: 0;
    font-family: MyriadPro-Regular;
    font-size: 16px;
}
.teal-input-head .input-first label {
    color: #fff;
}
.form-book form input[type=text], select {
    border: 1px solid #aaa;
    padding: 8px 11px;
    border-radius: 3px;
    font-size: 15px;
    background: #fff;
    box-shadow: 0 0 2px #eee;
}
.form-book form {
    position: relative;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
.form-started {
    margin-top: 25px;
}
.teal-input-head {
    background: #8ecdc3;
    padding: 10px 0;
}
.form-book form input[type=text]:focus, select:focus{
    outline:none;
}
.form-book form input[type=text], .form-book form select, .form-book form label, .form-book form p {
    width: 96%;
    margin: 0 8px;
    display: inline-block;
    margin-bottom: 15px;
    box-sizing: border-box;
    text-align: left;
}
.form-book {
    padding: 50px 0;
}
.form-book form label {
    font-family: OpenSans-Semibold;
    margin-bottom: 5px;
}
.form-side select {
    background: #8ecdc3;
    font-family: OpenSans-Semibold;
    padding: 9px 10px;
    border-radius: 5px;
    font-size: 16px;
    color: #fff;
    margin-bottom: 5px;
}
.main-title h2, .main-title p {
    font-family: OpenSans-Semibold;
    margin: 20px 0;
    text-transform: capitalize;
}
.top-left-title p, .top-left-title h3 {
    color: #000;
    font-family: OpenSans-Semibold;
}
.input-first {
    width: 48%;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
.right-second_tab form button {
    display: inline-block;
    background: #e6a201;
    box-shadow: inset 0 -4px #d08931, 0 0 #d08931;
    border: 1px solid #e6a201;
    font-size: 20px;
    padding: 8px 33px;
    font-family: OpenSans;
    border-radius: 7px;
    float: right;
    color: #fff;
}
.right-second_tab form button:hover {
    background: #fff;
    color: #e6a201;
}
.top-title p, .top-title h3 {
    font-family: OpenSans-Semibold;
    margin: 20px 0;
    text-transform: capitalize;
}
.top-title p{
    font-size:15px;
}
.input-first input#fname {
    width: 97%;
}
.input-first label {
    width: 97% !important;
}
.left-book-options .top-left-title p {
    background: #e6a201;
    color: #fff;
    padding: 10px;
    text-align: center;
    width: 100%;
    font-size: 18px;
    text-transform: capitalize;
}
.input-first select {
    width: 97% !important;
}
.main-title {
    padding: 0 0 20px 0;
}
.select:hover {
    text-decoration: none;
}
.inner-right h5 {
    position: absolute;
    left: 30%;
    top: 28px;
    color: #fff;
    z-index: 99;
    font-size: 14px;
}
.toggled-on{
display:none;
}
.toggled{
display:block;
}
/*-----second tab ---*/
.tab {
    overflow: hidden;
}
.inner-rightt {
    margin-bottom: 14px;
}
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}
.tab .select-book.active {
    background-color: #81b9b0;
    border-top: 0;
}
.right-second_tab form textarea {
    width: 100%;
    min-height: 252px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 16px;
    resize: none;
    color: #888;
	margin-bottom:10px;
	}
	.top-title {
    padding-bottom: 20px;
}
.select-book select {
    background: transparent;
    color: #fff;
    border: 0 !important;
    border: 0;
    box-shadow: none;
	}
	.right-second_tab form p {
    display: inline-block;}
	.left-second_tab img {
    max-width: 100%;
	}
.tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: none;
}
.left-book-options .left-image img, .right-book-options .left-image img {
    max-width: 100%;
    width: 256px;
    position: relative;
    display: inline-block;
}
.left-image {
    display: inline-block;
    position: relative;
    vertical-align: top;
}
.tabcontent {
  display: none;
}
.tabbing-elements {
    position: relative;
    width: 100%;
    margin-top: 0;
    background: #81b9b0;
    z-index: 999;
}

div#London, #Paris {
    padding: 54px 0;
}
.top-left-title h3 {
    text-align: center;
    padding: 2px 0 8px 0;
    border-bottom: 1px solid #b5bcc3;
}
.select a {
    background: transparent;
    color: #e6a201;
    padding: 5px 74px;
    font-weight: 400;
    font-family: OpenSans-Semibold;
}
.inner-right {
    position: relative;
}
.inner-rightt h5 {
    position: absolute;
    background-image: url(../images/orange-bar.png);
    background-size: 85px 85px;
    background-repeat: no-repeat;
    width: 96px;
    height: 96px;
    z-index: 9;
    right: 17px;
    font-size: 17px;
    text-align: center;
    padding: 21px;
    padding-left: 0;
}
.select a:hover{
   text-decoration:none;
}
.select span {
    background: transparent;
    border: .11111rem solid #e6a201;
    color: #e6a201;
    font-weight: 500;
    border-radius: 3px;
    box-shadow: 0 0 2px #dcdcdc;
    padding: 6px 130px;
    margin: auto;
    text-align: center;
}
.right-book-options h2 {
    color: #000;
    border-bottom: 1px solid #b5bcc3;
    text-align: center;
    padding: 12px 0;
}
.left-book-options, .right-book-options {
    background: #fff;
    border: 1px solid #bcbcbc;
    border-radius: 4px;
    margin-bottom: 32px;
    padding-bottom: 20px !important;
    text-align: center;
}
.right-book-options {
    background: #fff;
    margin-top: 0;
    border-radius: 4px;
    padding-bottom: 1px;
    padding: 0 0 1px;
}
.con-vel p {
    margin-bottom: 0;
    padding: 10px 0;
}
.right-book-options h2 {
    color: #000;
    border-bottom: 1px solid #ccc;
    text-align: center;
    padding: 8px 0;
    border-top: 1px solid #ccc;
}
.input-first h3 {
    top: 38px;
    right: 20px;
    left: inherit;
}
.select-lightbox input[type="radio"]:checked ~ img {
    border: 2px solid #f59a2f;
}
#toggle_tst, #toggle_tst1, #toggle_tst2, #toggle_tst3 {
    display: none;
}

/* coming soon section css */
.coming_soon{
    text-align: center;
    background: url(../images/backimg.jpg);
    margin-top: : 10px;
    margin-top: : 5px;

}
.coming_1 .head{
    display: none;
    padding: 43% 0;
    position: absolute;
    background: #000000b3;
    width: 95%;
    color: wheat;
    /* padding: 100%; */
    height: 94%;
}
.coming_2 .head{
    display: none;
    padding: 43% 0;
    position: absolute;
    background: #000000b3;
    width: 95%;
    color: wheat;
    /* padding: 100%; */
    height: 94%;
}

.coming_1 h3{
    font-size: 49px;
}
.coming_2 h3{
    font-size: 49px;
}

.coming_1:hover .head{
    display:block;
}
.coming_2:hover .head{
    display:block;
}
.coming_soon img{
    width: inherit;
    margin-bottom: 32px;
}
/* coming soon section css end */

.right-book-options h4 {
    background: #e6a201;
    color: #fff;
    padding: 12px 10px;
    text-align: center;
    width: 100%;
    font-size: 18px;
    margin-bottom: 0px;
    text-transform: capitalize;
    font-weight: 600;
}
/* ---animation--- */

.view .slice {
    width: 135px;
    height: 100%;
    z-index: 100;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
    -webkit-transition: -webkit-transform 150ms ease-in-out;
    -moz-transition: -moz-transform 150ms ease-in-out;
    -o-transition: -o-transform 150ms ease-in-out;
    -ms-transition: -ms-transform 150ms ease-in-out;
    transition: transform 150ms ease-in-out;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}
.view {
    width: 100%;
    height: 100%;
    float: left;
    position: relative;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
    -o-perspective: 500px;
    -ms-perspective: 500px;
    perspective: 500px;
}
.view div.view-back {
    background: #0a0a0a;
    background: -moz-linear-gradient(left, #0a0a0a 0%, #666666 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0a0a0a), color-stop(100%,#666666));
    background: -webkit-linear-gradient(left, #0a0a0a 0%,#666666 100%);
    background: -o-linear-gradient(left, #0a0a0a 0%,#666666 100%);
    background: -ms-linear-gradient(left, #0a0a0a 0%,#666666 100%);
    background: linear-gradient(left, #0a0a0a 0%,#666666 100%);
}
.view div.view-back {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    background-image: url(../images/preview-left.png);
    z-index: 0;
}
.view .s1 {
    background-position: 0px 0px;
}
.view .s2 {
    background-position: -687px 0px;
}
.view .slice {
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
    backface-visibility: visible;
}
.view .s2, .view .s3, .view .s4, .view .s5 {
    -webkit-transform: translate3d(104px,0,0);
    -moz-transform: translate3d(104px,0,0);
    -o-transform: translate3d(104px,0,0);
    -ms-transform: translate3d(104px,0,0);
    transform: translate3d(104px,0,0);
}
.view .s3 {
    background-position: -790px 0px;
}
.view .s4 {
    background-position: -894px 0px;
}
.view .s5 {
    background-position: -997px 0px;
}
.view .s4 > .overlay {
    background: -moz-linear-gradient(right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}
.view .overlay {
    width: 136px;
    height: 100%;
    opacity: 0;
    position: absolute;
    -webkit-transition: opacity 150ms ease-in-out;
    -moz-transition: opacity 150ms ease-in-out;
    -o-transition: opacity 150ms ease-in-out;
    -ms-transition: opacity 150ms ease-in-out;
    transition: opacity 150ms ease-in-out;
}
.view .s5 > .overlay {
    background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}
.view:hover .s4 {
    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    transition-delay: 50ms;
    -webkit-transform: translate3d(104px,0,0) rotate3d(0,1,0,-30deg);
    -moz-transform: translate3d(104px,0,0) rotate3d(0,1,0,-30deg);
    -o-transform: translate3d(104px,0,0) rotate3d(0,1,0,-30deg);
    -ms-transform: translate3d(104px,0,0) rotate3d(0,1,0,-30deg);
    transform: translate3d(104px,0,0) rotate3d(0,1,0,-23deg);
}
.view:hover .overlay {
    opacity: 1;
}
.view:hover .s3 {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    transition-delay: 100ms;
    -webkit-transform: translate3d(104px,0,0) rotate3d(0,1,0,-16deg);
    -moz-transform: translate3d(104px,0,0) rotate3d(0,1,0,-16deg);
    -o-transform: translate3d(104px,0,0) rotate3d(0,1,0,-16deg);
    -ms-transform: translate3d(104px,0,0) rotate3d(0,1,0,-16deg);
    transform: translate3d(104px,0,0) rotate3d(0,1,0,-8deg);
}
.view:hover .s5 {
    -webkit-transform: translate3d(104px,0,0) rotate3d(0,1,0,-42deg);
    -moz-transform: translate3d(104px,0,0) rotate3d(0,1,0,-42deg);
    -o-transform: translate3d(104px,0,0) rotate3d(0,1,0,-42deg);
    -ms-transform: translate3d(104px,0,0) rotate3d(0,1,0,-42deg);
    transform: translate3d(135px,0,0) rotate3d(0,1,0,-90deg);
}
.view:hover .s1 {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    transition-delay: 200ms;
    -webkit-transform: rotate3d(0,1,0,-3deg);
    -moz-transform: rotate3d(0,1,0,-3deg);
    -o-transform: rotate3d(0,1,0,-3deg);
    -ms-transform: rotate3d(0,1,0,-3deg);
    transform: rotate3d(0,1,0,2deg);
}
.view:hover .s2 {
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    transition-delay: 150ms;
    -webkit-transform: translate3d(104px,0,0) rotate3d(0,1,0,-10deg);
    -moz-transform: translate3d(104px,0,0) rotate3d(0,1,0,-10deg);
    -o-transform: translate3d(104px,0,0) rotate3d(0,1,0,-10deg);
    -ms-transform: translate3d(104px,0,0) rotate3d(0,1,0,-10deg);
    transform: translate3d(105px,0,0) rotate3d(0,1,0,-8deg);
}



label.container.girl-first span.checkmark {
    background-image: url("../images/785C94E7-63A4-459D-9CB9-0E5A402A12C1.png");
	background-size: cover;
	margin: auto;
}

label.container.girl-second span.checkmark {
    background-image: url("../images/77D2B572-24C0-4E9E-84B6-F00A9E2003FC.png");
    background-size: cover;
    margin: auto;
}
label.container.girl-third span.checkmark {
    background-image: url("../images/D1FA953D-3FD1-4155-92EC-68915572C3EE.png");
    background-size: cover;
    margin: auto;
}
div#toggle_tst {
    height: auto;
}
label.container.mother-first span.checkmark {
    background-image: url("../images/BABDC835-E4C1-467A-BA67-9CCEC0F63EB8.png");
    background-size: cover;
    /*background-size: 130%;*/
    margin: auto;
}
label.container.mother-second span.checkmark {
    background-image: url("../images/1CD0B870-1702-40A8-84E5-81BDB2D2FF3A.png");
    background-size: cover;
    /*background-size: 130%;*/
    margin: auto;
}
label.container.mother-third span.checkmark {
    background-image: url("../images/DD6A5888-0CFE-4C53-A13D-1B415F674696.png");
    background-size: cover;
    /*background-size: 130%;*/
    margin: auto;
}
label.container.mother-fourth span.checkmark {
    background-image: url("../images/F280B25A-EA0C-4D08-B82B-D0F8F95E2DA4.png");
    background-size: cover;
    /*background-size: 130%;*/
    margin: auto;
}
#toggle_tst1{
        height: auto !important;
}
label.container.mother-fifth span.checkmark {
    background-image: url("../images/F7CD07F9-01AA-4F34-8226-DEEE02123EB4.png");
    background-size: cover;
    /*background-size: 130%;*/
    margin: auto;
}
label.container.daddy-first span.checkmark {
    background-image: url("../images/Screenshot_2.jpg");
	background-size: cover;
	margin: auto;
}
label.container.daddy-second span.checkmark {
    background-image: url("../images/Screenshot_3.jpg");
    background-size: cover;
    margin: auto;
}
label.container.daddy-third span.checkmark {
    background-image: url("../images/Screenshot_1.jpg");
    background-size: cover;
    margin: auto;
}
div#toggle_tst2 {
    height: auto;
}
label.container.friends-first span.checkmark {
    background-image: url("../images/37D7C612-35EA-4F47-AD0E-132CFE2FE86F.png");
	background-size: cover;
	margin: auto;
}
label.container.friends-second span.checkmark {
    background-image: url("../images/25FB38CA-07AC-442C-9CC7-9E3CDE86C0FC.png");
    background-size: cover;
    margin: auto;
}
div#toggle_tst3{
    height: auto;
}
label.container.boy-first span.checkmark {
    background-image: url("../images/9226FB2C-81B1-467B-BB2D-F476FA8F1E54.png");
	background-size: cover;
	margin: auto;
}
label.container.boy-second span.checkmark {
    background-image: url("../images/FCC15EF3-8A7D-435E-9AC2-F58AF0DB7280.png");
    background-size: cover;
    margin: auto;
}
label.container.boy-third span.checkmark {
    background-image: url("../images/242D0940-CD5C-4440-A03D-3FB301E5EE8A.png");
    background-size: cover;
    margin: auto;
}

.input-first .container {
    position: relative;
    padding-left: 0;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 82px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: transparent;
    display: inline-block;
    width: 44% !important;
    background: #fff;
    padding: 60px;
    margin: auto;
    border: 1px solid #ccc;
    text-align: center;
    margin-left: 3%;
}
.input-first .container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.input-first .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 115px;
    width: 100px;
    background-color: #fff;
}
.input-first .container:hover input ~ .checkmark {
  background-color: #fff;
}
.input-first .container input:checked ~ .checkmark {
    background-color: #fff;
}

.input-first .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.input-first .container input:checked ~ .checkmark:after {
  display: block;
}
.input-first .container .checkmark:after {
    top: 0;
    left: -22px;
    height: 120px;
    width: 151px;
    border-radius: 0;
    background: transparent;
    border: 6px solid #f59a2f;
}
.btn-shopping{
    display: inline-block;
}
.btn-shopping p {
    text-transform: capitalize;
    font-family: 'Archivo', sans-serif;
    color: #fff;
    font-size: 16px;
    letter-spacing: 0.5px;
    margin: 0;
    padding: 10px 6px;
    /* border: 1px solid #e6a201; */
    max-width: 100%;
    /* box-shadow: 1px 1px 21px #64ada1; */
    border-radius: 4px;
}
.right-header {
    display: inline-block;
    float: right;
    padding: 10px 0;
}
.right-header .pull-right {
    color: #fff;
}
.btn-shopping p span {
    font-weight: 600;
    background: #e6a201;
    padding: 8px 20px;
    border-radius: 4px;
    border: 1px solid #e6a201;font-size: 16px;
    margin-right:4px;
}

.featured .faq-con {
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
    font-family: OpenSans;
    letter-spacing: 0.4px;
    border-bottom: 2px solid #fff;
}
.featured .faq-con:hover {
    text-decoration: none;
    color: #e6a201;
    border-color: #e6a201;
}

.subhan_allah_button {
    position: absolute;
    left: 50%;
    top: 78%;
    width: 100%;
    /* transition: trnas; */
    transform: translate(-50%,-50%);
}
.subhan_allah_button a{
    background: #fff;
    font-size: 25px;
    padding: 8px 0;
    display: block;
    width: 100%;
    max-width: 278px;
    margin: 14% auto 0;
    border-radius: 50px;
    color: #131313;
    text-decoration: none;
    transition: all .6s;
}
 .subhan_allah_button_boy a{
    box-shadow: 0 6px 0 0 #8a5e60;
}

 .subhan_allah_button_girl a{
        box-shadow: 0 6px 0 0 #6d8884;
}
.subhan_allah_button a:hover {
    background: #e6a201;
    color: #fff;
    text-decoration: none;
}
/*===========================================================
        Subhan allah book start css start here 
======================================================*/

.build-book.subhan-allah-girl {
    background: #D2CBE2;
    box-shadow: 0 0 10px #c3c3c3;
}

.build-book.subhan-allah-boy {
    background: #D4CCDB;
    box-shadow: 0 0 10px #c3c3c3;
}
.badge-danger{
        padding: 1em 1.2em!important;
}
.avtar span.checkmark{
    background-size: cover;
    margin: auto;
    background-color: #fff;
}
/* girl avtar .......... */
label.container.subhan-girl-first span.checkmark {
    background-image: url("../images/girl-av-1.png");
}

label.container.subhan-girl-second span.checkmark {
    background-image: url("../images/girl-av-2.png");
}
label.container.subhan-girl-third span.checkmark {
    background-image: url("../images/girl-av-3.png");
}
label.container.subhan-girl-forth span.checkmark {
    background-image: url("../images/girl-av-4.png");
}
label.container.subhan-girl-fifth span.checkmark {
    background-image: url("../images/girl-av-5.png");
}
label.container.subhan-girl-sixth span.checkmark {
    background-image: url("../images/girl-av-6.png");
}
label.container.subhan-girl-saven span.checkmark {
    background-image: url("../images/girl-av-7.png");
}

/*boys avtar ..........*/
label.container.subhan-boy-first span.checkmark {
    background-image: url("../images/boy-av-1.png");
}

label.container.subhan-boy-second span.checkmark {
    background-image: url("../images/boy-av-2.png");
}
label.container.subhan-boy-third span.checkmark {
    background-image: url("../images/boy-av-3.png");
}
label.container.subhan-boy-forth span.checkmark {
    background-image: url("../images/boy-av-4.png");
}
label.container.subhan-boy-fifth span.checkmark {
    background-image: url("../images/boy-av-5.png");
}
label.container.subhan-boy-sixth span.checkmark {
    background-image: url("../images/boy-av-6.png");
}
label.container.subhan-boy-saven span.checkmark {
    background-image: url("../images/boy-av-7.png");
}

.form-check{
    display: inline-block!important;
    float: left!important;
}

.btn-circle.btn-sm { 
    width: 30px; 
    height: 30px; 
    padding: 6px 0px; 
    border-radius: 15px; 
    font-size: 8px; 
    text-align: center; 
    margin-left: 5px;
    float: left;
    margin-top: 4px;
} 
.input-first label.add-photo-label{
    background: #81b9b0;
    width: 30%!important;
    float: left;
    color: white;
    text-align: center;
    padding: 5px;
    border-radius: 6px;
    display: inline-block;
}
.cropper-modal-2{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: block;
    overflow: hidden;
    outline: 0;
    background: #00000045;
    opacity: 0.!important;
}
.cropper-modal-2 .cropper-content{
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    position: absolute;
    width: 70%;
      background: white;
    height: 494px;
    padding: 15px;
    height: auto;
}
.reactEasyCrop_Container{
    background: white;
    height: 400px;
    width: 96%!important;
    margin: auto;
    margin-top: 24px;
}
/*.cropper-controls{
    margin-top: 428px;
}
*/
.image_preview{
    
    /*width: 60%;*/
    border: 5px solid #ccc;
    border-radius: 2px;
    width: 240px;
    height: 230px;

}

.color-active{
    box-shadow: 0 0 0 0.2rem #8ecdc3de!important;
}
.subhan-allah-boy a{
    margin: -5% auto 0!important;
}

.subhan-allah-boy img{
    max-width: 100%!important;
}

.boy-emoji {
    position: relative;
}
.book-dow h2 {
    color: #fff;
    padding: 35px 0;
    margin: 0;
    font-weight: 700;
    font-size: 30px;
}
.boy-emoji {
    margin-top: 16px;
}
.main-gen:hover {
    background-color: #2cb492;
}
 .main-gen {
    width: 100%;
    font-weight: 700;
    border-radius: 5px;
    background-color: #6b7a87;
    border: 1px solid #999;
    font-size: 18px;
    text-align: center;
    padding: 5px 0;
    color: #fff;
    font-family: 'WonderblyBoingWEB-Regular';
    box-shadow: 0 0 12px #ccc;
}

#myDIV h4, #mYDIV h4 {
    font-size: 15px;
    text-align: left;
    margin-bottom: 20px;
    margin-top: 6px;
    color: #2cb492;
    text-transform: capitalize;
}
.mydiv {
    float: right;
    right: 0;
}
.mydiv {
    width: 74%;
    margin: auto;
    margin: 0 15px;
    padding: 10px;
    text-align: center;
    background-color: #f1f1f1;
    margin-top: 0;
    display: none;
    position: absolute;
    bottom: 42px;
    box-shadow: 0 0 9px #d9d9d9;
    border: 2px solid #ddd;
    border-radius: 3px;
    z-index: 50;
}
.mydiv{
    width: 55%;
}
.mydiv .container {
    width: 30%;
    display: block;
    position: relative;
    margin: 4px;
    margin-bottom: 8px;
    cursor: pointer;
    border: 1px saddlebrown;
    font-size: 28px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    float: left;
    border: 2px dotted #ccc6c6;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #ffffff;
    height: 124px;
    width: 100px!important;
    padding: 5px;
    padding-top: 7px;
}

.mydiv  .container img {
    max-width: 100%;
    margin: auto;
}

.mydiv .container input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    left: 0;
}

.mydiv .container input:checked ~ .checkmark:after {
  display: block;
  background: transparent!important;
}

.mydiv .container .checkmark:after {
    top: 0;
    left: 0;
    width: 100%;
    height: inherit;
    background: transparent!important;
    border: 4px solid #2cb492;
}
.mydiv .container input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    left: 0;
}
.mydiv .container .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: -webkit-fill-available;
    width: 100%;
    background: transparent!important;
}
#mYDIV{
    margin-right: 184px!important;
}
.badge-bg-style{
    background: #8ecdc3!important;
    padding: 9px 18px;
    border-radius: 6px;
    color: #fff;
    font-size: 17px;
    margin-bottom: 6px;
    font-weight: 400;
}
.right-side-review h3 span{
    font-size: 20px;
}
.btn-circle{
    border-radius: 50%!important;
    padding: 0px 8px!important;
    font-size: 14px!important;
}

.subhanallah-boy-girl-book{
    border: 5px solid #D4CCDB!important;
}

.subhanallah-boy-girl-book h2{
    background:#D4CCDB!important;
}
.subhanallah-boy-girl-book ul li:last-child a{
    background: #D4CCDB!important;
    border: 2px solid #D4CCDB!important;    
}
/*===========================================================
        Subhan allah book  css end 
======================================================*/

/*============================================
        Style update 12-4-2020
==============================================*/

.boy a:hover{
    background: #347f84!important;
    color: #fff;
    text-decoration: none;
}
.subhan-allah-boy a:hover{
    background: #6d2aa7!important;
    color: #fff;
    text-decoration: none;
}
/*============================================
        Style update 12-4-2020 end
==============================================*/

.meaning-of-name::placeholder {
    color: rgb(206, 206, 206);
  }

/*============================================
        Style update 04-02-2021 Start
==============================================*/
.banner-desc {
	background: #737a94;
	max-width: 430px;
	position: absolute;
	z-index: 9;
	bottom: 40px;
}
.banner-desc h1, .banner-desc p {
    padding-left: 20px;
    padding-right: 20px;
}
.banner-desc h1 {
	font-size: 60px;
	font-weight: bold;
	color: #fff;
	line-height: 60px;
	padding-top: 25px;
	display: inline-block;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: -2px;
}
.banner-desc p {
	text-transform: uppercase;
	font-size: 23px;
	line-height: normal;
	margin-top: 10px;
	margin-bottom: 0;
	font-family: 'Slabo 27px', serif;
	letter-spacing: 1px;
}
.banner-action {
	float: right;
}
.banner-action a {
	background: #fad052;
	color: #fff;
	padding: 13px 45px;
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
	font-size: 28px;
	display: inline-block;
	font-family: 'Slabo 27px', serif;
}
.banner-action a:hover {
	text-decoration:none;
}
.site-banner {
	position: relative;
}
.stroy-books {
	display: none;
}
/*============================================
        Style update 04-02-2021 Ends
==============================================*/

@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
.mySlides.fade img {
    max-width: 100%;
    display: block;
}
@media screen and (max-width: 1860px) {
.slider-testimonial {
    background-size: cover;
}
}

@media screen and (max-width: 1360px) {
.contact-us ul li {
    margin: 0 16px;
}
.checkout a {
    padding: 16px 50px;
}

}
@media screen and (max-width: 1024px) {
     .iframe-maindiv {
    height: 1735px;
}
.mydiv .container .checkmark:after {
    left: -1px;
    height: 119px;
    width: 99px;
}
.btn-shopping {
   text-align: center;
    margin: auto;
    width: 100%;
}
.btn-shopping p{
        text-align: center;
    margin: auto;
    width: 100%;
}
.right-header{
    padding: 0;
    width: 100%;
}
.right-header p{
    float: left;
    width: 100%;
    text-align: center;
    font-size: 12px;
    margin: 0;
}
.coming_1 .head{
    width: 94%;
    height: 93%;
}
.coming_2 .head{
    width: 94%;
    height: 94%;
}

}
@media screen and (max-width: 1199px) {
.input-first .container .checkmark:after {
    left: -7px;
    height: 120px;
    width: 130px;

}



.coming_1 .head{
    width: 94%;
    height: 93%;
}
.coming_2 .head{
    width: 94%;
    height: 94%;
}
/* =========== Eid book css ==============*/
.mydiv .container .checkmark:after {
    left: -1px;
    height: 119px;
    width: 99px;
}

.mydiv {
    width: 66%;
}
.mydiv .container.bothavatars{
    display:none;
}

.badge-li-style li{
    background: #8ecdc3;
}



/* =========== Eid book css end ==============*/


}
@media screen and (max-width: 1190px) {
.girl-book ul li:first-child a, .boy-book ul li:first-child a {
    padding: 5px 8px;
    font-size: 13px;

}
.slice.s1 {
    display: none;
}
.view div.view-back {
    position: relative;
}
.toptab-preview p {
    font-size: 14px;
}
.select-add a {
    padding: 10px 35px 10px;
}
ul.nav.nav-tabs {
    padding: 0;
	}
.girl-book ul li:last-child a, .boy-book ul li:last-child a {
    padding: 7px 15px;
}
.form-book h2 {
    font-size: 22px;
}
.input-first input#fname {
    width: 94%;
}
.input-first h3 {
    right: 12px;
}
.right-side-review a {
    padding: 6px 15px;
}
.bottom-reviews {
    margin-top: 20px;
    padding-top: 4px;
}
.bottom-reviews ul {
    padding-top: 2px;
    margin-top: 18px;
}
.right-side-review h2 {
    font-size: 25px;
	
}
.right-side-review, .right-side-review h2, .right-side-review h3, .bottom-submit, .muslims-content {
      text-align: center;
}
.bottom-reviews p, .bottom-reviews ul li{
      max-width: 100%;
}
.right-second_tab form textarea {
    width: 100%;
    min-height: 199px;
}
}


@media screen and (max-width: 991px) {
    .coming_1 .head {
        width: 92%;
        height: 91%;
    }
    .coming_2 .head {
        width: 92%;
        height: 91%;
    }
    .muslims,.steps, .your-book, .slider-testimonial{
        padding: 40px 0;
    }
    section.Our-book {
        padding: 30px 0;
    }
    .top-footer {
        padding: 20px 0;
    }
    .toptab-preview {
        padding: 30px 0;
    }
    .input-first span {
        right: 1px;
    }
    .add-book-cart {
        padding: 30px 0;
    }
    .banner-content h1 {
        line-height: 37px;
    }
    .inner-box {
        display: none;
        padding: 20px;
    }
    .build-book{
        padding:30px;
    }
    .build-book a {
        margin: 7% auto 0;
    }
    .carousel span.glyphicon {
        height: 42px;
        width: 42px;
        font-size: 20px;
    }
    .book-selves {
        margin-top: 50px;
    }
    .your-book .title {
        margin: 0;
        margin-bottom: 20px;
    }
    .title , .muslims-content h3, .slider-testimonial h3.title{
        font-size: 20px;
    	line-height:30px;
    	margin-bottom:10px;
    }
    .build-book.boy {
        margin: 30px 0;
    }
    .content-layout p {
        margin: 0px 0 20px;
    	}
    .muslims-content {
        padding: 20px 0;
    }
    .banner-content h1 {
        font-size: 24px;
        margin: 10px 0;
    }
    .sub-title {
        font-size: 15px;
    }
    .stroy-books {
        padding: 8px 0px;
    }
    .read-btn {
        text-align: center;
        margin: 20px 0;
    }
    .stroy-books p {
        font-size: 15px;
        text-align: center;
    }
    .menu-box {
        text-align: center;
    	padding:20px 0 0;
    }
    .site-logo {
        text-align: center;
    }
    .menu-box a ,.banner-content a, .read-btn a, .book-selves h3, .build-book a, .content-layout p,.btn-books, .contact-us ul li:last-child a{
        font-size: 18px;
    }
    .banner-content{
        right:inherit;
    }
    .banner-content {
        max-width: 340px;
        margin: auto;
        left: 0;
        transform: none;
        right: 0;
        top: 14%;
        text-align: center;
    }

    section.stroy-books::before {
        height: 80px;
    }
    .stroy-books {
        margin-top: 5px;
    }
    .muslims-img{
       text-align:center;
    }
    .muslims-content p {
        font-size: 14px;
    }
    .slider-testimonial .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
        bottom: -13px !important;
    }
    .form-book, .thumbbook-deatils {
        padding: 25px 0;
    }
    div#London, #Paris {
        padding: 30px 0;
    }
    .main-title h2, .main-title p {
        font-size: 22px;
    }
    .left-book-options h3, .right-book-options h2 {
        font-size: 18px;
    }
    .top-title p, .top-title h3 {
        font-size: 20px;
    }
    .input-first .container .checkmark:after {
        left: -11px;
        width: 127px;
    }
    .btn-shopping p span, .btn-shopping p {
        font-size: 11px;
        max-width: 290px;
        display: block;
        margin: auto;
    }
    }
    .submit-password{
        background: #e6a201;
        color: #fff !important;
        text-transform: capitalize;
        padding: 6px 30px;
        border-radius: 4px;
        font-size: 18px;
        /* box-shadow: 0px 4px 0 1px #e79124; */
        text-decoration: none;
        border: 1px solid #e6a201;
    }
    .enter-password{
        border: 1px solid #aaa;
        padding: 8px 11px;
        border-radius: 3px;
        font-size: 15px;
        background: #fff;
        box-shadow: 0 0 2px #eee;
        margin-bottom: 11px;
        width: 100%;
    }
  
    /* =========== Eid book css ==============*/
    .mydiv .container .checkmark:after {
        left: -1px;
        height: 119px;
        width: 99px;
    }


    .mydiv {
        width: 55%;
    }

    /* =========== Eid book css end ==============*/

}

@media screen and (max-width: 767px) {
 
.site-logo img, .footer-logo img {
    max-width: 60px;
}
.inner-rightt {
    text-align: left;
}
.form-started .input-first:nth-child(2) {
    display: none;
}
.contact-us p {
    font-size: 16px;
}
.form-book form h5 {
    font-size: 15px;
    padding: 10px 0 0;
}
.muslims-content .btn-books {
    font-size: 16px;
}
.counts {
    font-size: 18px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: -22px;
}
.slider-box p {
    font-size: 14px;
    line-height: 22px;
}
.copy-right p {
    font-size: 14px;
}
.book-selves img {
    max-width: 40%;
}
.add-book-cart h2 {
    font-size: 20px;
    padding: 0 0 12px 0;
}
.your-book img {
    max-width: 220px;
	}
.input-first input#show_hide, .input-first label {
    width: 100% !important;
}
.right-second_tab {
    margin: 30px 0;
}
.banner-content h1 {
    font-size: 20px;
}
.form-side {
    margin-bottom: 0;
    padding-bottom: 10px;
}
.form-book form input, .form-book form select {
    margin-bottom: 10px !important;
}
.form-book form {
    padding: 0;
	}
	.select-lightbox {
    padding: 20px 14px;
}
.bottom-submit {
    padding: 15px 10px 0;
}
.form-book form input[type=text], .form-book form select{
	 margin:0;
	 -webkit-appearance: none;
	}
.form-book h2 {
    font-size: 18px;
    width: 100%;
    margin: 0;
}
.muslims-content {
    margin: auto;
}
.slider-box {
    width: 343px !important;
    margin: 0 70px !important;
}
.input-first input#fname {
    width: 100%;
}
.input-first select {
    width: 100% !important;
}

.add-book-cart {
    padding: 20px 0;
}
.checkout a {
    padding: 16px 60px;
}
.input-first {
    width: 100%;
}
.form-book form input[type=text], .form-book form select, .form-book form label, .form-book form p {
    width: 100%;
}
.form-side h3 {
    right: 5px;
    left: inherit;
}
.build-a.girl-book {
    margin-bottom: 20px;
}
section.Our-book {
    padding: 30px 0;
}
.select-lightbox {
    width: 100%;
    margin: 0;
}
.your-book .col-md-6 {
    margin-bottom: 30px;
}
.contact-us ul li a {
    font-size: 18px;
}
.btn-shopping span {
    font-size: 14px;
}
.contact-us ul {
    text-align: center;
}
.slider-box p {
    padding: 20px;
    margin: 0;
}
.contact-us ul li {
    margin-bottom:20px;
    display:block;
}
.cart-content img {
    width: 60px;
}
.right-cont h3 {
    font-size: 16px;
}
.input-first .container {
    width: 26% !important;
}




}

@media screen and (max-width: 1024px) {
/* =========== Eid book css ==============*/
.banner-desc {
    background: transparent !important;
   max-width: 64% !important;
}
.banner-desc h1,.banner-desc p{
    color: transparent !important;
}
.mobileresponsive{
    display:block !important;
        right: 0;
}
.desktopview{
    display:none !important;
}
    .mydiv {
        width: 100%;
    }
		.banner-desc h1 {
    font-size: 36px !important;
    line-height: 40px;
    padding-top: 20px;
}
.banner-desc p {
    font-size: 24px;
    line-height: normal;
    margin-top: 5px;
}
.banner-desc h1, .banner-desc p {
    padding-left: 20px;
    padding-right: 20px;
}
.banner-action a {
    padding: 10px 30px;
}
/* =========== Eid book css end ==============*/
}
@media screen and (max-width: 767px) {
    
    .iframe-maindiv {
    height: 2334px;
}
    .attachoptionlabel{
            width: 100%;
    }
 .contact-us ul {
    text-align: center;
}
.Our-book .col-lg-4.offset-lg-2.col-md-6 {
    margin-bottom: 25px;

}
.contact-us ul li {
    margin-bottom: 20px;
    display: block;
}
.site-logo img, .footer-logo img {
    max-width: 60px;
}
}
@media screen and (max-width: 395px) {
    .menu-box a {
        font-size: 13px!important;
        padding: 8px 10px;
    }
}


@media screen and (max-width: 575px) {
    .close-click {
    top: 1%;
}
    .input-first {
    width: 100%;
}
.featured {
position: absolute;
right: 0;
top: -45px;
padding: 0 18px;
}
.left-image, .right-image {
    width: 100%;
    text-align: center;
}
.left-book-options .left-image img, .right-book-options .left-image img {
    max-width: 300px;
    width: 100%;
}
.select span {
    padding: 6px 45px;
}
.inner-rightt h5{
    right:50px;
}
.left-book-options p, .right-book-options p {
    width: 100%;
    padding: 0 20px;
    text-align: center;
}
.read-btn a {
    padding: 11px 11px 10px;
}
.right-cont h3 span {
    font-size: 14px;
}
.cart-content {
    margin-bottom: 8px;
	padding:10px;
}
.right-cont h3 span img {
    width: 10px;
}
.inner-box {
    padding: 15px;
}
.contact-us ul {
    border-radius: 54px;
}
.menu-box a, .banner-content a, .read-btn a, .book-selves h3, .build-book a, .content-layout p, .btn-books, .contact-us ul li:last-child a {
    font-size: 15px;
}
.stroy-books p {
    font-size: 14px;
}
.banner-content h1 {
    line-height: 30px;
    font-size: 14px;
}
.slider-box {
    width: 300px !important;
    margin: 0 80px !important;
}
.slider-testimonial h3.title {
    padding-bottom: 10px;
}

/* =========== Eid book css ==============*/
    .mydiv .container{
        height: 111px;
        width: 92px!important;
    }
    .mydiv .container .checkmark:after {
        left: -1px;
        height: 107px;
        width: 89px;
    }
/* =========== Eid book css end ==============*/
.reactEasyCrop_Container {
    height: 350px;
}
.cropper-modal-2.cropper-content {
    width: 95%;
}
.cropper-controls {
    /*margin-top: 360px;*/
}
.MuiSlider-root {
    padding: 8px 0 !important;
}

}

.li-style li{
    list-style: disc!important;
}
@media screen and (max-width: 480px) {
    .iframe-maindiv {
    height: 2287px;
}
.coming_1 .head {
    width: 94%;
    height: 93%;
}
.coming_2 .head {
    width: 94%;
    height: 93%;
}

/* =========== Eid book css ==============*/
    .mydiv .container{
        height: 100px;
        width: 76px!important;
    }
    #mYDIV {
        margin-right: inherit!important;
    }
    .mydiv .container .checkmark:after {
        left: -1px;
        height: 96px;
        width: 74px;
    }   

/* =========== Eid book css end ==============*/

}

@media screen and (max-width: 426px) {
    /* =========== Eid book css ==============*/
    .mydiv .container{
        height: 92px;
        width: 72px!important;
    }
    .mydiv .container .checkmark:after {
        left: -1px;
        height: 88px;
        width: 74px;
    }
    /* =========== Eid book css end ==============*/ 
}

@media screen and (max-width: 442px) {
.slider-box {
    margin: 0 50px !important;
}
.inner-rightt h5 {
    right: 28px;
}
}
@media screen and (max-width: 412px) {
    /* =========== Eid book css ==============*/
    .mydiv .container .checkmark:after {
        left: -1px;
        height: 77px;
        width: 67px;
    }
    /* =========== Eid book css ==============*/
}
@media screen and (max-width: 414px) {
.coming_1 .head {
    width: 93%;
    height: 92%;
}
.coming_2 .head {
    width: 93%;
    height: 92%;
}
.coming_1 h3 {
    font-size: 37px;
}
.coming_2 h3 {
    font-size: 37px;
}
.slider-box {
    width: 280px !important;
}
   .slider-box {
    margin: 0 36px !important;
}
.featured {
    width: 90px;
}
.banner-content {
    top: 10px;
}

   /* =========== Eid book css ==============*/
    .mydiv .container{
           height: 81px;
        width: 70px!important;
    }
    /* =========== Eid book css end ==============*/ 

}
@media screen and (max-width: 375px) {
.coming_1 .head {
    width: 92%;
    height: 91%;
}
.coming_2 .head {
    width: 92%;
    height: 91%;
}

/* =========== Eid book css ==============*/
    .input-first {
        width: 100%;
    }
    .mydiv {
        width: 51%;
    }
    #mYDIV {
        margin-right: 156px!important;
    }
    .mydiv .container{
        height: 71px;
        width: 62px!important;
    }
    .mydiv .container .checkmark:after {
        left: -1px;
        height: 68px;
        width: 60px;
    }
/* =========== Eid book css end ==============*/ 

}
@media screen and (max-width: 320px) {
    .coming_1 .head {
        width: 91%;
        height: 90%;
    }
    .coming_2 .head {
        width: 91%;
        height: 90%;
    }
    /* =========== Eid book css ==============*/

    .mydiv {
        width: 60%;
    }
    #mYDIV {
        margin-right: 111px!important;
    }
    /* =========== Eid book css end ==============*/ 
}
@media screen and (max-width: 365px) {
.featured {
    width: 40px;
}
.slider-box {
    margin: 0 25px !important;
}
}

@media screen and (max-width: 1199px) {
    .girl-book ul li:first-child a, .boy-book ul li:first-child a {
       padding: 5px 8px;
     font-size: 13px;
    }
    .girl-book ul li:last-child a, .boy-book ul li:last-child a {
        padding: 6px 7px;
        font-size: 13px;
    }
}
@media (min-width: 576px){
.modal-dialog {
    max-width: 700px;
    margin: 1.75rem auto;
}
}
.modal-body{
    max-height: 768px;
    overflow: auto;
}
@media screen and (max-width: 314px){
.menu-box a {
    font-size: 12px!important;
    padding: 3px 9px;
}
}

@media screen and (max-width: 294px){
.menu-box a {
   margin: 0 2px;
   padding: 1px 5px;
}
}
input.form-check-input {
    cursor: pointer;
}