/*
Theme Name: Bootin Child
Theme URI: http://www.wpbingosite.com/bootin
Author: wpbingo
Description: This is a child theme for Bootin
Version: 1.0
Author URI: http://wpbingosite.com
Template: bootin
Text Domain: bootin-child
*/
/*************** ADD YOUR CUSTOM CSS HERE  ***************/

.top-menu-book a:before {
  font-family: "ElegantIcons";
  content: "\e033"; 
  padding-right:8px;
  font-size:15px;
}

.top-menu-account a:before {
    font-family: "ElegantIcons";
    content: "\e08a";
    padding-right: 8px;
    font-size: 15px;
    vertical-align: bottom;
}

.top-menu-logout a:before {
    font-family: "ElegantIcons";
    content: "\e045";
    padding-right: 8px;
    font-size: 15px;
    vertical-align: bottom;
}

.bwp-header .wpbingoLogo img
{
    max-height: 50px;
}

.bwp-main .page-title
{
    display:none;
}

.send-link-button
{
  border-radius: 25px;
  font-weight: 600;
  font-size: 15px;
  padding: 0 20px;
  height: 40px;
  background:#13c3d3;
  border-color: #13c3d3;
  color:white;
  text-transform:uppercase;
  display:inline-block;
  line-height:40px;
  cursor: pointer;
  border: 0;
}


/******YETKİ GRID*****/

.grid-books{
  border-top: 1px solid rgba(144, 144, 144, 0.25);
  display: grid;
  align-items: flex-end;
  width: 100%;
}


.grid-books .open-button
{
  display: inline-block;
  text-align: center;
  color: #283038;
  padding: 10px 20px;
  font-weight: 600;
  position: relative;
  border: 1.5px solid #283038;
  cursor: pointer;
  border-radius: 25px;
  line-height: 14px;
}
.grid-books .open-button:hover
{
  background-color: #283038!important; 
  color: white!important;
}

.grid-books .yetki_title
{
  text-align: center;
  margin-bottom: 20px;
  color: #2b2b2b;
}

.grid-books .datetime
{
  margin-bottom: 10px;
}

.grid-books .yetki-content
{
  z-index: 3;
  white-space: nowrap;
}

.books-info-box
{
  padding: 35px 25px;
  padding-bottom: 0px;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.books-icon-wrap
{
  margin: auto;
  margin-bottom: 20px;
  box-shadow: 0px 0px 12px 0px rgba(43, 43, 43, 0.3);
}

.books-icon-content
{
  text-align: center;
  line-height: 1em;
  border-radius: 0px;
  margin-bottom: 28px;
  background-position: center center;
}

.sidebar-authorize .widget-title
{
  color: #2b2b2b;
  padding: 0;
  background: transparent;
  font-weight: 700;
  font-size: 22px;
  margin: -3px 0 35px 0;
  position: relative;
  text-transform: none;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(20, 194, 210, 0.25);
}

.sidebar-authorize .widget-title:before
{
  content: "";
  position: absolute;
  width: 50px;
  height: 2px;
  left: 0;
  bottom: -2px;
  background: #13c3d3;
}

.sidebar-authorize .locked-div
{
  display: none;
}

.sidebar-authorize
{
  background: white;
  padding-right: 15px;
  padding-left: 0px;
}


.sidebar-authorize .locked-div ul
{

  padding: 0;
  list-style: none;
}

.sidebar-authorize .locked-div ul li
{
  text-align: left;
  margin: 5px 0;
}

.sidebar-authorize .locked-div ul li:before
{
  float: left;
  margin-right: 10px;
}
.authorize-books
{
  float: right;
  padding-top: 31px;
  padding-right: 0px;
  padding-left: 0px;
}

.authorize-select
{
  float: none!important;
  margin: auto;
  padding-top: 31px;
  padding-right: 0px;
  padding-left: 0px;
}

.services-click
{
  cursor: pointer;
}

@media only screen and (min-width: 768px) and (max-width: 991px)
{
  .authorize-books-parent
  {
    width: 50%;
  }
}

@media only screen and (max-width: 767px) 
{
  .authorize-hizmet
  {
    display: inline-grid;
  }
  .authorize-books-parent
  {
    order: 1;
  }
  .authorize-books
  {
    order: 2;
  }
}

@media only screen and (min-width: 1199px) {
  .grid-books
  {
    grid-template-columns: 33.34% 33.34% 33.34%;
  }
  .sb1:before {
    right: 14px;
  }
  .bubble
  {
    right: 3.2%;
  }
}

@media only screen and (min-width: 993px) and (max-width:1198px) {
  .grid-books
  {
    grid-template-columns: 50% 50%;
  }
  .bubble
  {
    right: 1%;
  }
   .sb1:before {
    right: 14px;
  }
}

@media only screen and (min-width: 481px) and (max-width: 767px)
{
  .grid-books
  {
    grid-template-columns: 50% 50%;
  }
  .sb1:before {
    right: 10px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 992px)
{
  .grid-books
  {
    grid-template-columns: 100%;
  }
  .authorize-books
  {
    width: 50%;
    overflow-y: scroll;
    height: 1000px;
  }
  .sb1:before {
    right: 10px;
  }
}

@media only screen and (min-width: 400px) and (max-width: 480px)
{
.grid-books
  {
    grid-template-columns: 100%;
  }

  .bubble
  {
    right: 4%;
  }
  .sb1:before {
    right: 9px;
  }
}

@media only screen and (min-width: 320px) and (max-width: 399px)
{
.grid-books
  {
    grid-template-columns: 100%;
  }

  .bubble
  {
    right: 5%;
  }
  .sb1:before {
    right: 9px;
  }
}

.bubble
{
  width: auto;
  height: auto;
  position: absolute!important;
  padding: 0!important;
  top: 140%;
  transform: scale(0);
  animation-fill-mode: forwards;
  transform-origin: 90% 0%;
}

.box {
  background: #13c3d3;
  padding:10px 15px;
  text-align: center;
  font-weight: 900;
  color: #fff;
  position: relative;
  border-radius:8px;
}

.sb1:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 10px solid transparent;
  border-right: 10px solid #13c3d3;
  border-top: 7px solid #13c3d3;
  border-bottom: 7px solid transparent;
  bottom: 42px;
  transform:rotateX(180deg);
}
@keyframes expand-bounce {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

/* Here the scale simply goes from 1 back to 0 */
@keyframes shrink {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

.video-div
{
  margin-top: 20px;
  margin-bottom: 20px;
  line-height:20px;
}

.volume-div
{
  margin-top: 20px;
  margin-bottom: 20px;
  line-height:20px;
}

.comp-div ul
{
  margin-top: 20px;
  margin-bottom: 20px;
  line-height:20px;
}

.doc-div
{
  margin-top: 20px;
  margin-bottom: 20px;
  line-height:20px;
}

.lock-div ul
{
  color: #2b2b2b;
  margin-top: 20px;
  line-height:20px;
  margin-bottom: 20px;
}

.video-div li:before
{
    content: "\e0a3";
    font-family: ElegantIcons !important;
    color: #020202 !important;
    font-size: 1.1em;
}
.volume-div li:before
{
    content: "\7a" !important;
    font-family: ElegantIcons !important;
    color: #020202 !important;
    font-size: 1.1em;
    margin-top:-1px
}
.doc-div ul
{
  list-style-type:none;
  line-height:25px;
}

.doc-div ul li:before
{
    content: "\68" !important;
    font-family: ElegantIcons !important;
    color: #020202 !important;
    font-size: 1.1em;
    margin-right:5px;
    display: inline-block;
}

.comp-div ul li:before
{
    content: "\e00e" !important;
    font-family: ElegantIcons !important;
    color: #020202 !important;
    font-size: 1.1em;
}

.lock-div ul li:before
{
    content: "\7e" !important;
    font-family: ElegantIcons !important;
    color: #020202 !important;
    font-size: 1.1em;
    margin-top:-1px
}

.checkbox-wrapper-31:hover .check {
  stroke-dashoffset: 0;
}

.checkbox-wrapper-31 {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
}
.checkbox-wrapper-31 .background {
    fill: #ccc;
    transition: ease all 0.6s;
    -webkit-transition: ease all 0.6s;
}
.checkbox-wrapper-31 .stroke {
    fill: none;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: 2px;
    stroke-dashoffset: 100;
    stroke-dasharray: 100;
    transition: ease all 0.6s;
    -webkit-transition: ease all 0.6s;
}
.checkbox-wrapper-31 .check {
    fill: none;
    stroke: #fff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2px;
    stroke-dashoffset: 22;
    stroke-dasharray: 22;
    transition: ease all 0.6s;
    -webkit-transition: ease all 0.6s;
}
.checkbox-wrapper-31 input[type=checkbox] {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    margin: 0;
    opacity: 0;
    -appearance: none;
    -webkit-appearance: none;
}
.checkbox-wrapper-31 input[type=checkbox]:hover {
    cursor: pointer;
}
.checkbox-wrapper-31 input[type=checkbox]:checked + svg .background {
   fill: #6cbe45;
}
.checkbox-wrapper-31 input[type=checkbox]:checked + svg .stroke {
    stroke-dashoffset: 0;
}
.checkbox-wrapper-31 input[type=checkbox]:checked + svg .check {
    stroke-dashoffset: 0;
}

.product-title, .product-subtitle, .text-block-wapper-2, .widget-title, .entry-title, h1, h2, h3, h4, h5, h6, .post-single .entry-meta > *, .post-single .entry-meta > *.cat-links a, .bwp-recent-post.slider4 span.entry-date time, .bwp-recent-post.slider4 .categories, .bwp-recent-post.slider .categories {
    font-family: Muli,sans-serif!important;
}


.loader {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000111;
  background-color: #fff;
  animation: fadeout 1s ease 3s 1 forwards;
  -webkit-animation: fadeout 1s ease 3s 1 forwards;
}

.loader.animated{
  pointer-events:none;
}

.book {
  margin:auto;
  border: 4px solid #f7f6f7;
  width: 60px;
  height: 45px;
  position: relative;
  perspective: 150px;
  background:#13c3d3;
}

.dot {
  display: block;
  width: 30px;
  height: 45px;
  border: 4px solid #f7f6f7;
  border-left: 1px solid #0f98a4;
  margin: 0;
  position: absolute;
  right: -4px;
  top: -4px;
  overflow: hidden;
  background: #0f98a4;
  transform-style: preserve-3d;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}

.book .dot:nth-child(1) {
  -webkit-animation: pageTurn 1.2s cubic-bezier(0, .39, 1, .68) 1.6s infinite;
  animation: pageTurn 1.2s cubic-bezier(0, .39, 1, .68) 1.6s infinite;
}

.book .dot:nth-child(2) {
  -webkit-animation: pageTurn 1.2s cubic-bezier(0, .39, 1, .68) 1.45s infinite;
  animation: pageTurn 1.2s cubic-bezier(0, .39, 1, .68) 1.45s infinite;
}

.book .dot:nth-child(3) {
  -webkit-animation: pageTurn 1.2s cubic-bezier(0, .39, 1, .68) 1.2s infinite;
  animation: pageTurn 1.2s cubic-bezier(0, .39, 1, .68) 1.2s infinite;
}

@keyframes fadeout{
    from{
       opacity: 1;
    }
    to{
        opacity: 0;
    }
}

@-webkit-keyframes fadeout{
    from{
       opacity: 1;
    }
    to{
        opacity: 0;
    }
}


/* Page turn */

@-webkit-keyframes pageTurn {
  0% {
    -webkit-transform: rotateY( 0deg);
    transform: rotateY( 0deg);
  }
  20% {
    background: #0f98a4;
  }
  40% {
    background: #13c3d3;
    -webkit-transform: rotateY( -180deg);
    transform: rotateY( -180deg);
  }
  100% {
    background: #13c3d3;
    -webkit-transform: rotateY( -180deg);
    transform: rotateY( -180deg);
  }
}

@keyframes pageTurn {
  0% {
    transform: rotateY( 0deg);
  }
  20% {
    background: #0f98a4;
  }
  40% {
    background: #13c3d3;
    transform: rotateY( -180deg);
  }
  100% {
    background: #13c3d3;
    transform: rotateY( -180deg);
  }
}

/*******/