/*
Theme Name: Cash Advance Now
Theme URI: https://cashadvancenow.com/
Author: the CashAdvanceNow team
Author URI: https://cashadvancenow.com/
Description: Our 2021 default theme.
Requires at least: 4.9.6
Requires PHP: 5.2.4
Version: 1.0
Text Domain: cashadvancenow
Tags: custom
*/



@import 'css/box-sizing.css';
@import 'css/page.css';
@import 'css/header.css';
@import 'css/footer.css';
@import 'css/main.css';
@import 'css/faq.css';
@import 'css/cashform.css';
@import 'css/search.css';
@import 'css/affiliate.css';


.grid::before{
	position: fixed;
	top: 0;
	right:0;
	bottom:0;
	left:0;
	content:'';
	pointer-events:none;

	--grid-sides:16px;
	--grid-gutter:16px;
	--grid-columns:4;
	--grid-column-width: calc((100% - var(--grid-gutter) *  var(--grid-columns) )  /  var(--grid-columns));
	--grid-color: rgb(255 0 0 / 0.1);

	border:solid transparent;
	border-width: 0 calc(var(--grid-sides) - var(--grid-gutter)/2);

  	background-image: repeating-linear-gradient(
  		to right,
      transparent 0,
      transparent calc(var(--grid-gutter) / 2),
      var(--grid-color) calc(var(--grid-gutter) / 2),
     	var(--grid-color) calc(var(--grid-column-width) + var(--grid-gutter) / 2),
      transparent calc(var(--grid-column-width) + var(--grid-gutter) / 2),
		transparent calc(var(--grid-column-width) + var(--grid-gutter))
      );
	background-repeat: no-repeat;
}

@media (min-width: 736px){
	.grid::before{
		--grid-sides:24px;
		--grid-columns:8;
	}
}
@media (min-width: 1008px){
	.grid::before{
		--grid-sides:32px;
		--grid-columns:12;
	}
}




#how__work__blocks {
    position: relative;
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    font-weight: normal;
    font-family: 'Graphik Regular';
    font-size: 17px;
}

.blocks__grid{
  display: grid;
/*  grid-template-columns: 70px 370px 450px;*/
  grid-column-gap: 10px;
  grid-row-gap: 0px;
  
  align-items: center;
  padding: 22px 10px;
}
@media (min-width: 120px){
    grid-template-columns: 70px 1fr 1fr;
#how__work__blocks  .div1 { grid-area: 1 / 1 / 2 / 2;}
#how__work__blocks  .div2 { grid-area: 1 / 2 / 2 / 3;}
#how__work__blocks  .div3 { grid-area: 2 / 1 / 3 / 3;text-align: center;}
}

@media (min-width: 920px){
grid-template-columns: 70px 370px 450px;
#how__work__blocks .div1 { grid-area: 1 / 1 / 2 / 2;}
#how__work__blocks .div2 { grid-area: 1 / 2 / 2 / 3;}
#how__work__blocks .div3 { grid-area: 1 / 3 / 2 / 4;}
}



#how__work__blocks .block1{
background: #1db47a;	
padding: 34px;

}

#how__work__blocks .block1 h2, #how__work__blocks .block1  p{
text-align: center;
color:#FFF;
}
#how__work__blocks  h2{
    font-weight: bold;
    font-family: 'Graphik Bold';
    font-size: 42px;
}

#how__work__blocks  h3{
    font-weight: bold;
    font-family: 'Graphik Bold';
    font-size: 18px;
}

.circle{height: 60px;width: 60px;border-radius:50%;text-align: center;line-height: 60px;box-shadow: 4px 4px 4px 2px rgba(0, 0, 0, 0.2);}
.circle span{color:#FFF; font-weight: bold; font-family: 'Graphik Bold';font-size: 32px;}
.circle.green{background: #1db47a;}
.circle.orange{background: #ff9600;}

#how__work__blocks .block1 p{
    font-weight: normal;
    font-family: 'Graphik Regular';
    font-size: 24px;
}

.block2, .block4,  .block6{background: #FFF;}
.block3, .block5, .block7{background: #1db47a; }
.block3 .div2, .block5 .div2, .block7 .div2{color:#FFF;}

body.page-id-89 .inside .content__title{height:186px;}
body.page-id-89 .inside .content__title  h1 {padding-top:50px}