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

.bb-custom-wrapper { width: 100%; height: 100%; position: relative; }

 .bb-custom-wrapper .bb-bookblock { width: 97%; height: 100%; -webkit-perspective: 2000px; -moz-perspective: 2000px; perspective: 2000px; top: 6%; background:url(/images/logo.png) center 35% no-repeat;}

.bb-custom-side { position: relative; width: 50%; float: left; /*height: 100%;*/ overflow: hidden; /* Centering with flexbox */ display: -webkit-box; display: -moz-box; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -moz-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -webkit-align-items: center; align-items: center; }

.bb-custom-side { border: 1px solid #000; border-radius: 10px; }
.bb-custom-side { -webkit-box-shadow: 0px 9px 27px -6px rgba(0,0,0,0.70); -moz-box-shadow: 0px 9px 27px -6px rgba(0,0,0,0.70); box-shadow: 0px 9px 27px -6px rgba(0,0,0,0.70); }

/*.bb-custom-side p{position:absolute;width:50%;height:45%;top:40%;border:solid 1px #dddddd}*/

.bb-custom-side-last { border: none; }

.bb-custom-side img, .bb-custom-firstpage img { width: 100%; /*height:100%;*/ }

.bb-custom-firstpage h1 { font-size: 2.625em; line-height: 1.3; margin: 0; font-weight: 300; }

 .bb-custom-firstpage h1 span { display: block; font-size: 60%; opacity: 0.3; padding: 0 0 0.6em 0.1em; }

.bb-custom-firstpage { text-align: center; /*padding-top: 15%;*/ width: 50%; float: left; height: 100%; }

/*.bb-custom-side p { padding: 8%; font-size: 1.8em; font-weight: 300; }*/

.bb-custom-wrapper h3 { font-size: 1.4em; font-weight: 300; margin: 0.4em 0 1em; }

.bb-custom-wrapper > nav { z-index: 100; width: 100%; height: 10%; margin: 0.5em auto 0; position: absolute /*fixed*/; /*bottom: 20px;*/ bottom: 5px; text-align: center; }
.bb-custom-center { position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; z-index: 1000; background: rgba(0, 0, 0, 0.36); color: #fff !important; padding: 5px; width: 150px; text-align: center; border-radius: 2px; }

.bb-custom-wrapper > nav a { z-index: 100000; display: inline-block; width: 40px; height: 40px; text-align: center; border-radius: 2px; /*background: #1baede;*/ background: rgba(0, 0,0, 0.55); color: #fff; font-size: 0px; margin: 2px; /*position: absolute; bottom: 0; margin-bottom: 40px;*/ }

 .bb-custom-wrapper > nav a:hover { opacity: 0.6; }

.bb-custom-icon:before { font-family: 'arrows'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; font-size: 30px; line-height: 40px; display: block; -webkit-font-smoothing: antialiased; }

.bb-custom-icon-first:before,
.bb-custom-icon-last:before { content: "\e002"; }
/*.bb-custom-icon-arrow-left { position: absolute; left: 5px; bottom: 33%;border:2px solid rgba(255, 255, 255, 0.10); }
.bb-custom-icon-arrow-right { position: absolute; right: 5px; bottom: 33%;border:2px solid rgba(255, 255, 255, 0.10) }
.bb-custom-icon-first { left: 40%; }
.bb-custom-icon-last { right: 40%; }*/
.bb-custom-icon-exitfull { left: 48.5%; content: "\e002"; }

.bb-custom-icon-arrow-left:before,
.bb-custom-icon-arrow-right:before { content: "\e003"; }

.bb-custom-icon-arrow-left:before,
.bb-custom-icon-first:before { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }

/* No JS */
.no-js .bb-custom-wrapper { height: auto; }
.no-js .bb-custom-content { height: 470px; }

@media screen and (max-width: 61.75em) {
 .bb-custom-side { font-size: 70%; }
}

@media screen and (max-width: 33em) {
 .bb-custom-side { font-size: 60%; }
}

.topnav a { background: rgba(0, 0, 0, 0.35); padding: 5px 10px; color: #fff; top: 10px; font-size: 11px; font-family: 'Droid Sans Arabic'; border-radius: 10px; }