/* CSS Document */

#payoffwrapper {
min-height:600px;
font-size:36px;
padding-bottom: 70px;
font-family: var(--headers-font-family);
text-align: left;
padding-top: 275px;
}

.payofftext {
float: left;
width: calc(100% - 450px);
}

.payoffimage {
float: left;
width: 450px;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right:0;
padding-top: 125px;
}

.payoffimage img {
max-width:100%;
height: auto;
}

#payoffwrapper span {
font-weight:200;
}

.typewrite > .wrap {
border-color: #212529!important;
}

#contentwrapper {
background-position: right -300px top -50px;
}

#content {
display: flex;
flex-wrap: wrap;
align-items: center;
}

#services-content {
width:40%;
padding-right:50px;
}

#services-blocks-wrapper {
width:60%;
display: flex;
align-items: center;
}

#services-blocks {
width: 100%;
position: relative;
}

.block {
float:right;
width:47.5%;
margin-left:5%;
padding:20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
background: var(--bg-color);
text-align:center;
position: relative;
margin-bottom: 35px;
}

.block-icon {
width: 75px;
height: 75px;
margin: 25px auto 15px auto;
border-radius: 40px;
background-color: var(--second-color);
padding: 10px;
}

.block-icon img {
position: relative;
  top: 50%;
 -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
width: auto;
height: auto;
max-height: 100%;
max-width: 100%;
filter: invert(54%) sepia(89%) saturate(3878%) hue-rotate(338deg) brightness(99%) contrast(86%);
}

.block i {
font-size:60px;
background: #212529;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding-bottom:15px;
}

.block h3 {
font-size:42px;
}

.block h3, .block p {
padding-bottom:20px;
}

.block a {
color: #00730c;
text-decoration: none;
}

.block a:hover {
color: #0c4b35;
}

/*.block a:after {
content:"\f061";
font-family:'Line Awesome Free';
font-weight:bold;
padding-left:6px;
position:relative;
top:1px;
}*/

.block:nth-of-type(2) {
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
margin-left:0;
float:left;
}

.block:nth-of-type(2) img {
filter: invert(54%) sepia(14%) saturate(1747%) hue-rotate(8deg) brightness(94%) contrast(98%);
}

.block:nth-of-type(3) img {
filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(248deg) brightness(106%) contrast(106%);
}

/*.block:after {
content: "";
  width: 100%;
  height: 30px;
  position: absolute;
  left: 0;
  bottom: -30px;
  border-radius: 20px;
  opacity: 0.04;
  background: linear-gradient(180deg,#00730C 50%, rgba(0, 115, 12, 0.00) 100%);
  filter: blur(5.3px);
  display: block;
}*/

#content {
padding-bottom:0;
}

#blog {
width:100%;
max-width:1400px;
margin:0 auto;
margin-top: 60px;
padding: 0 25px;
}

#blogheaderwrapper {
position: relative;
}

#blogheader {
position: relative;
padding:20px 20px 0 20px;
z-index: 1;
text-align:center; 
max-width:840px; 
margin:0 auto;
}

#sideimage {
position: absolute;
top: -10px;
right: 0;
width: 250px;
background: var(--bg-color);
box-shadow: inset 0 0 25px 25px #fff;
-webkit-border-radius: 80% 0px 0px 40%;
-moz-border-radius: 80% 0px 0px 40%;
-khtml-border-radius: 80% 0px 0px 40%;
border-radius: 80% 0px 0px 40%;
padding: 10px 0 15px 30px;
z-index: 0;
}

#sideimage img {
max-width: 100%;
height: auto;
}

#blog h1 {
text-align:center;
}

#reviewswrapper {
width:100%;
height:auto;
}

#reviews {
width:100%;
max-width:1300px;
margin:0 auto;
padding: 60px 30px;
}
#review {
float:left;
width:40%;
height:auto;
padding-left:40px;
}

img.portrait {
width:200px;
height:auto;
}

#about {
float:left;
width:60%;
padding-left:60px;
padding-top:30px;
}

@media screen and (max-width: 1400px) {
#sideimage {
width: 225px;
}

@media screen and (max-width: 1240px) {

#blogheader {
width: 100%;
padding-right: 250px;
}

#payoffwrapper {
padding-top:15vw;
min-height: 40vw;
}

.payoffimage {
width:250px;
}

}

@media screen and (max-width: 1024px) {



#review, #about {
width:50%;
}

#about {
padding-top:0;
}

img.portrait {
width:175px;
height:auto;
}

#blog {
padding-left:15px;
padding-right: 0;
}

} /* end mediaquery */

@media screen and (max-width:980px) {

#headerwrapper {
overflow: hidden;
}

#payoffwrapper {
padding-top: 125px;
  min-height: 400px;
  font-size: 28px;
  }

#payoffwrapper span {
font-size: 28px;
}

.payofftext {
width: calc(100% - 300px);
}

.payoffimage {
padding-top: 95px;
}

#services-content {
width:100%;
padding-right:0;
padding-top:0;
z-index:2;
position:relative;
top:inherit;
left: inherit;
-ms-transform: none;
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
transform: none;
}

#services-blocks-wrapper {
width:100%;
z-index:1;
}

#sideimage {
display: none;
}

#blogheader {
padding-right:20px;
}

} /* end mediaquery */

@media screen and (max-width: 750px) {

#payoffwrapper {
padding-left:0;
}

#review, #about {
width:100%;
}

img.portrait {
right:0;
left:inherit;
bottom:-120px;
}

#about {
padding-left:0;
}

#about *{
text-align:left !important;
}

#about h1[style*="right"]::before {
margin:0 0 30px 0;
}

} /* end mediaquery */

@media screen and (max-width: 640px) {

#payoffwrapper {
min-height:auto;
padding-top:120px;
}

.payofftext {
width: 100%;
padding: 20px;
padding-bottom: 50px;
}

.payoffimage {
display: none;
}

#services-blocks {
margin-top:20px;
}

.block {
float:right;
width:100%;
margin-left:0;
}

.block:nth-of-type(2) {
position:relative;
top: inherit;
-ms-transform: none;
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
transform: none;
}

} /* end mediaquery */

@media screen and (max-width: 450px) {

.payoffimage {
width: 90%;
padding-top: 160px
}

#reviews {
padding-left:20px;
padding-right:20px;
}


#review {
padding:30px 50px 30px 30px;
}

.review h3 {
font-size:18px;
}


} /* end mediaquery */