/*
 Theme Name:   TFF Child Theme
 description: >-
   A child theme of the TFF
 Author:       Forzi
 Template:     tff
 Version:      1.0.0
*/

a {
	color: #2da4f0;
	text-decoration: none;
}

b, strong {
    font-weight: 700;
}


.tff-container {
	display: grid;
	grid-template-columns: 1fr 0.25fr;
	padding: 10px;
	grid-gap: 10px;
}


.tff-page-header {
	display: grid;
	grid-template-columns: 1fr minmax(200px, 25%);
	grid-gap: 10px;
	padding: 10px;
}

.tff-headerwide {
	background:#01295c;
	color: #fff;
}

.sidebar-shortcode-content {
	list-style-type: none;
}

.sidebar-shortcode-content ul{
	list-style-type: none;
}

.page-sidebar {
	border-radius: 1rem;
	padding: 1rem;
	margin-bottom:1rem;
}

/*======================== TABLE CARD VIEW	========================*/
/* Grid for mobile datatable */
.dtmobile {
	display:none;
}

	.dtbonustext {
      font-weight: 800;
	}
	.dtreviewmobile {
      display:none;
	}
  .dtalignself {
    align-self: center;
  }

	.dtconditions {
	font-size:11px !important;
    line-height:1 !important;
	padding-bottom: 5px !important;
	}

	.dtwrapper {
	text-align:center;
  border-radius: 15px 10px 10px 15px;
  -webkit-box-shadow: 0 2px 10px rgba(40,62,81,.1);
  -moz-box-shadow: 0 2px 10px rgba(40,62,81,.1);
  box-shadow: 0 2px 10px rgba(40,62,81,.1);
    margin: 10px 0 10px 0;
	background: #fff;
	color:#666;
	}

	.btn-to-casino, .btn-playdt {
    cursor: pointer;
    border-radius: .25rem;
    line-height: 1.5;
    padding: .7rem 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle;
    text-align: center;
    display: block;
    border-radius: 10px;
    background-color: #65c82d;
    color: #fff;
    width: 100%;
    white-space:nowrap;
	margin:auto;
	max-width: 150px;

	}

    .dtmobilebonus { grid-area: dtmobilebonus; }    
    .dtmobileterms { grid-area: dtmobileterms; }
    .dtbonuscode { grid-area: dtbonuscode; }
    .dtmobilevisit { grid-area: dtmobilevisit; }   
    .dtmobiletnc { grid-area: dtmobiletnc; 
	display:grid;
    align-items:center;
	}   

  .dtmobilelogo { grid-area: dtmobilelogo; 
  align-items: center;
  display:flex;
  border-radius: 10px 0 0 10px;
	  overflow: hidden !important;
  }
  
  .dtmobilelogo img {
    border-radius: 10px 0 0 10px;
  }
    
  .dtmobilespins { grid-area: dtmobilespins; 
  font-weight: 800;
  font-size: 25px;
  }    
  .dtmobilevalue { grid-area: dtmobilevalue; 
  font-weight: 800;
  font-size: 25px;
  }   
  .dtmobilespinstxt { grid-area: dtmobilespinstxt; 
  font-weight: 800;
  font-size: 25px;
  } 
  .dtmobilespins i::before {
      margin: 0 !important;}
  .dtmobilevaluetxt { grid-area: dtmobilevaluetxt; 
  font-weight: 800;
  font-size: 25px;
  }

  .dtspinswager { grid-area: dtspinswager; 
  font-weight: 800;
  font-size: 14px;
  }

  .dtbonuswager { grid-area: dtbonuswager; 
  font-weight: 800;
  font-size: 14px;
  }

  .dtmobilevalue i::before {
      margin: 0 !important;}
      .dtsignificant   { grid-area: dtsignificant; }     

.bonus-mobile-container {
  display: grid;

grid-template-columns: repeat(12, 1fr);
grid-template-areas:
  "dtmobilelogo dtmobilelogo dtmobilespins dtmobilevalue dtmobilebonus dtmobilebonus dtmobilebonus dtmobilebonus dtmobilebonus dtmobilebonus dtmobilevisit dtmobilevisit"
  "dtmobilelogo dtmobilelogo dtmobilespins dtmobilevalue dtmobilebonus dtmobilebonus dtmobilebonus dtmobilebonus dtmobilebonus dtmobilebonus dtmobilevisit dtmobilevisit" 
  "dtmobilelogo dtmobilelogo dtmobilespinstxt dtmobilevaluetxt dtmobilebonus dtmobilebonus dtmobilebonus dtmobilebonus dtmobilebonus dtmobilebonus dtmobilevisit dtmobilevisit"   
  "dtmobilelogo dtmobilelogo dtspinswager dtbonuswager dtmobileterms dtmobileterms dtmobileterms dtbonuscode dtbonuscode dtbonuscode dtmobilevisit dtmobilevisit"
  "dtmobilelogo dtmobilelogo dtsignificant dtsignificant dtsignificant dtsignificant dtsignificant dtsignificant dtsignificant dtsignificant dtmobilevisit dtmobilevisit" 

}
@media only screen and (min-width: 767px) {
.dtwrapper:hover {
    transition: transform .4s;
    transform: scale(1.02);
}

.dtwrapper:hover img{
    transition: transform 1s;
    transform: scale(1.1);
}
}

@media only screen and (max-width: 767px) {
	
      .dtmobilelogo  { 
        border-radius: 10px 0 0 0 !important;
        justify-content: center;
      }

    .bonus-mobile-container {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "dtmobilelogo dtmobilelogo dtmobilespins dtmobilevalue" 
      "dtmobilelogo dtmobilelogo dtmobilespinstxt dtmobilevaluetxt"
	  "dtmobilelogo dtmobilelogo dtspinswager dtbonuswager"
      "dtmobiletnc dtmobiletnc dtmobiletnc dtmobiletnc"
      "dtmobilebonus dtmobilebonus dtmobilebonus dtmobilebonus"
	  "dtbonuscode dtbonuscode dtbonuscode dtbonuscode"
      "dtmobilevisit dtmobilevisit dtmobilevisit dtmobilevisit" 
      "dtmobileterms dtmobileterms dtmobileterms dtmobileterms" 
      "dtsignificant dtsignificant dtsignificant dtsignificant" 
  }
  .dtalignself {
    align-self:auto !important;
  }
  .dtmobilevalue {
      border-radius: 0 10px 0 0 !important;
  }
  .btn-to-casino {
  	font-size: 1.5em;
	font-weight: 700;
	max-width: none !important;
	width:90%;
  }
  .dtbonustext {
    margin: 5px;
  }
  .dtreviewdktp {
    display:none;
  }
	.dtdesktop {
		display:none;
	}
	.dtmobile {
		display:flex !important;
		justify-content: center;
		align-items: center;
	}
  .dtwrapper {
  	margin: 20px 0 20px 0 !important;
  }
}

@media only screen and (max-width: 838px) {
	.btn-to-casino {padding: 0.9rem 1px 0.9rem 1px;}
}

/*=== Featured mobile ===*/

.featured-mobile .dtmobilelogo  { 
  border-radius: 10px 0 0 0 !important;
  justify-content: center;
}

.featured-mobile .bonus-mobile-container {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "dtmobilelogo dtmobilelogo dtmobilespins dtmobilevalue" 
      "dtmobilelogo dtmobilelogo dtmobilespinstxt dtmobilevaluetxt"
	  "dtmobilelogo dtmobilelogo dtspinswager dtbonuswager"
      "dtmobiletnc dtmobiletnc dtmobiletnc dtmobiletnc"
      "dtmobilebonus dtmobilebonus dtmobilebonus dtmobilebonus"
	  "dtbonuscode dtbonuscode dtbonuscode dtbonuscode"
      "dtmobilevisit dtmobilevisit dtmobilevisit dtmobilevisit" 
      "dtmobileterms dtmobileterms dtmobileterms dtmobileterms" 
      "dtsignificant dtsignificant dtsignificant dtsignificant" 
  }
.featured-mobile .dtalignself {
align-self:auto !important;
}
.featured-mobile .dtmobilevalue {
border-radius: 0 10px 0 0 !important;
}
.featured-mobile .btn-to-casino {
font-size: 1.5em;
font-weight: 700;
max-width: none !important;
width:90%;
padding: 0.9rem 1px 0.9rem 1px;
color:white !important;
}
.featured-mobile .dtbonustext {
margin: 5px;
}
.featured-mobile .dtreviewdktp {
display:none;
}
.featured-mobile .dtdesktop {
display:none;
}
.featured-mobile .dtmobile {
display:flex !important;
justify-content: center;
align-items: center;
}
.featured-mobile .dtwrapper {
margin: 20px 0 20px 0 !important;
}


/* === Bonus List Menu ===*/
.menu-wrapper a {
	color: white !important;
}

.menu-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit);
  grid-gap: 1px;
	padding: 10px;
}
.menu-wrapper.menu-desktop {
	background: #162353;
	border: 1px solid black;
	border-radius: 10px;
}

.menu-wrapper.mobile {
	background: #1c2237;;
	border: 1px solid black;
	justify-items: center;
  text-align: center;
	width:100%;
}

.one {
  grid-column: 1;
  grid-row: 1;
}
.two { 
  grid-column: 2;
  grid-row: 1;
}
.three {
  grid-column: 3;
  grid-row: 1;
}
.four {
  grid-column: 4;
  grid-row: 1;
}

@media only screen and (max-width: 838px) {
	.menu-wrapper.menu-desktop{
		display:none;
	}
	
	.menu-wrapper.mobile {
  display:grid !important;
	}
	
	.menu-wrapper.mobile p {
		margin:0;
	}
	
}

.show-me-btn {
	cursor:pointer;
	margin-bottom:10px;
}

blockquote::before {
    content: "\201C";
    font-size: 2em;
    margin-right: 15px;
    vertical-align: -15px;
    font-weight: 700;
	font-style: italic;
}

blockquote {
	border-left: 5px solid #6c556d;
	padding: 10px 20px;
	font-size: 2rem;
}

.toc {
	background: #4d4d4d;
	white-space: nowrap;
	text-align: center;
	overflow: auto;
}

.toc a {
	color:white;
	display: inline-block;
	padding: 14px;
}

.toc a:hover {
  background-color: #777;
}

.tableofcontent {
  display: table;
  padding: 7px;
  border: 1px solid rgb(162, 169, 177);
  background-color: rgb(248, 249, 250);
}

.review-header {
	align-items:center;
}

.ageplusreview {
	float:right;
	margin:5px;
}

@media only screen and (max-width: 767px) {
	.review-header {
	text-align:center;
}
	.hiddenmob {
		display:none;
	}
}

figure {
	margin:0;
}

.rank-math-breadcrumb p {
    margin: 0;
	font-size:1.5rem;
	color:white;
	padding:10px;
}

.breadcrumbwrap {
	background: #24252a;
}

.gutenimg img {
	border-radius:10px !important;
}

.gutenimg figcaption {
	text-align:center;
}

.imglang {
    vertical-align: middle;
    padding-right: 5px;
}

.reviewcontent {
	padding:10px;
}

.alignright {
	float:right;
}

.alignleft {
	float:left;
}

/* Review css */

.page-header-content-img {
	justify-self:center;
}

/* end */

/* ------------ AWEBER POP OVER ------------- */
#af-form-752667344 {
	position: fixed !important;
	left: 0px !important;
	bottom:0px !important;
/*	width: 225px !important; */
	height: 337px !important;
	top: auto !important

}

.af-form-close-button {
	position: fixed !important;
	left: 205px !important;
	bottom:0px !important;
	top: auto !important;
	margin-bottom:316px !important;
}

#popForm-752667344 + div{
	display:none !important;
}

.af-element p {
	font-size: 10px !important; 
	line-height: 1 !important; 
	padding: 0 !important;
	margin: 0 !important;
}

/* === SPOTLIGHT ===*/
.spotlight-wrapper {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

.spotlight-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}


/* === RIBBON === */

.dtribbon {
  -webkit-transform: rotate(35deg); 
     -moz-transform: rotate(35deg); 
      -ms-transform: rotate(35deg); 
       -o-transform: rotate(35deg); 
          transform: rotate(35deg); 
    position: absolute;
    bottom: 20px;
    left: -30px;
    padding: 0px 30px 0px 30px;
    width: 80px;
    color: white;
    font-family: sans-serif;
	z-index: 99;
  	background: rgb(4, 140, 0);
}

.dtribbon .dtribbontag {
  font-size:15px;
white-space: nowrap;
}

.dtmobilelogo {
	position: relative;
}