/*
1.Globals
2.Navbar
3.Buttons
4.Features
5.Sections
6.Footer
7.Pricing
*/


/* 1.Globals */


* {
	font-family: 'Space Mono', monospace;
	box-sizing: border-box;
}
 
@font-face {font-family: "Circular Std";
  src: url("../fonts/@font-face/860c3ec7bbc5da3e97233ccecafe512e.eot"); /* IE9*/
  src: url("../fonts/@font-face/860c3ec7bbc5da3e97233ccecafe512e.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("../fonts/@font-face/860c3ec7bbc5da3e97233ccecafe512e.woff2") format("woff2"), /* chrome、firefox */
  url("../fonts/@font-face/860c3ec7bbc5da3e97233ccecafe512e.woff") format("woff"), /* chrome、firefox */
  url("../fonts/@font-face/860c3ec7bbc5da3e97233ccecafe512e.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("../fonts/@font-face/860c3ec7bbc5da3e97233ccecafe512e.svg#Circular Std Book") format("svg"); /* iOS 4.1- */
}

.bg-black{
	background: #222222!important;
}

main{
	text-align:left;
	margin-top:100px!important;
}

.logo>img{
	max-width: 100%;
}

.blur{
	width: 116.32px;
    height: 116.32px;
    left: 52px;
    top: 677.34px;

    background: rgba(183, 251, 150, 0.19);
    filter: blur(56px);
}
 
.blur-step-process{
    width: 387px;
    height: 298px;
    left: -151px;
    top: 1666px;

    background: rgba(183, 251, 150, 0.42);
    filter: blur(200px);
}


/* 2.Navbar */
.header>.nav>.nav-link {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 21px;
    text-transform: uppercase;
    color: #FFFFFF;
} 

.header>.nav>.nav-link:hover{
	/* background: url(../images/menu_hover.png);
    background-position: top;
    background-repeat:no-repeat; */
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* 3.Buttons */

.login-btn{
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 21px;
    text-transform: uppercase;
    width: 124px;
    background: #B7FB96;
    color: #222222!important;
    text-decoration: none;
    padding: .5rem 1rem;
    border: 1px solid #B7FB96;
}

.login-btn:hover{
	background: #6DA8FF;
	border: 1px solid #6DA8FF;
}

.try-free-btn{
	font-family: Space Mono;
    font-style: normal;
    font-weight: bold; 
    font-size: 17px;
    line-height: 103.6%;
    text-transform: uppercase;
    color: #B7FB96;
	text-decoration:none;
} 

.try-free-btn:hover{
	color: #B7FB96;
	border-bottom: 2px solid #B7FB96;
}

.try-on{
	background: #B7FB96;
    margin-top: 25px;
    display: block;
    height: 120px;
    width: 120px;
    border-radius: 50%; 
    border: 1px solid #B7FB96;
	
	font-family: Space Mono;
    font-style: normal;
    font-weight: bold;
    font-size: 13px;
    line-height: 19px;
    text-transform: uppercase;
	justify-content: space-around;
    align-items: center;
    display: flex;
    color: #222222;
	text-decoration:none;
}

.try-on:hover{
	transform: rotate(16deg);
	 color: #222222;
}

/* End Buttons */


/* 4.Features */

.features .feature_item h4{
	font-family: Space Mono;
    font-style: normal;
    font-weight: bold;
    font-size: 23px;
    line-height: 107.6%;
    /* or 25px */

    color: #FFFFFF;
}

.features .feature_item p{
    font-family: Circular Std;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    /*line-height: 113.6%;*/
    /* or 18px */

    color: #FFFFFF;
}

.features .feature_item{
	/*padding: 115px 0px 87px 95px;*/
	padding: 85px 25px 87px 25px;
}

.features .feature_item:hover{
	background: url(../images/special_features_hover.png);
    background-repeat:no-repeat;
    background-position-y: 8px;
    background-position-x: -18px;

}


/* END Features */


/* 5. Sections / <main> content*/
.section-heading{
	font-family: Space Mono;
    font-style: normal;
    font-weight: bold;
    font-size: 66px;
    line-height: 107.6%;
    /* or 71px */

    color: #FFFFFF;
}

.section-name{
    font-family: Circular Std;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 132%;
	/* or 21px */
    display: flex;
    align-items: center;
    text-transform: uppercase;
    color: rgba(180, 194, 199, 0.31);
	margin-bottom:13px;
}

.section-title{
    font-family: Space Mono;
    font-style: normal;
    font-weight: bold;
    font-size: 49px;
   /* line-height: 107.6%;*/
    /* or 53px */
    
	color: #FFFFFF;
}

.section_subtitle_box{
	
    padding: 0 35px 0px 95px;
}

.section-subtitle{
    font-family: Circular Std;
    font-style: normal;
    font-weight: normal;
    font-size: 19px;
    /*line-height: 119.1%;*/
    /* or 23px */
    color: #FFFFFF;	
}

/* Review */

.img-right{
	pointer-events: none;
	margin-top: -203px; 
	margin-left: -276px;
}

.process{
	margin-top:30px!important;
}

.process_1{
	justify-content: center;
}

.process_1_sub div{
	/*padding:3rem 3rem 3rem 3rem;*/
}

.process_2_sub div{
/*	padding:5rem;*/
}

.process_2{
	margin-top:91px;justify-content: center;
}

.alternative-tool{
	margin-top: 120px;
}

.alternative-items{
	text-align:left;
}

.item-title{
	font-family: Space Mono;
    font-style: normal;
    font-weight: bold;
    font-size: 23px;
    line-height: 107.6%;
    /* or 25px */

    color: #FFFFFF;
	
	margin-bottom:20px;
}

.item-subtitle{
	font-family: Circular Std;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    /*line-height: 130%;*/
    /* or 21px */

    color: #FFFFFF;
}





.try-free-box{
	text-align: center;
    border: 2px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 23px;
}

.try-free-box h1{
    font-family: Space Mono;
    font-style: normal;
    font-weight: bold;
    font-size: 66px;
    line-height: 110.6%;
    /* or 73px */

    text-align: center;

    color: #FFFFFF;
	margin-top: 140px;
}

.try-free-box p{
    font-family: Circular Std;
    font-style: normal;
    font-weight: normal;
    font-size: 19px;
    line-height: 119.1%;
    /* or 23px */

    text-align: center;

    color: #FFFFFF;
	
}

.try-free-section{
	background-image: url('../images/free_trial_for_a_month.png');
    background-repeat: no-repeat;
    
    background-position: center;
}

/* Footer */
footer{
  text-align:left;
  font-family: Circular Std;
  font-style: normal;
  font-weight: normal;
}

footer p{
  font-size: 16px;
  line-height: 130%;
  color: #FFFFFF;
  opacity: 0.42;
  margin-top:24px;
}

footer a{
  font-size: 17px;
  line-height: 22px;
  color: #FFFFFF!important;
  text-decoration:none
}

footer a:hover{
text-decoration-line: underline;text-underline-offset: 4px;
}

footer ul{
  list-style-type: none;
  font-size: 17px;
  line-height: 22px;
  /  * identical to box height */
  color: #FFFFFF;
}

footer li{
	padding: 14px;
}

/* Other */
.testimonial .message{
    text-align:left;
	font-family: Circular Std;
    font-style: normal;
    font-weight: normal;
    font-size: 17px;
    line-height: 130%;
    /* or 22px */

    color: #FFFFFF;
}

.testimonial .message-from{
   text-align:left;font-family: Space Mono;
   font-style: normal;
   font-weight: bold;
   font-size: 16px;
   line-height: 130%;
   /* identical to box height, or 21px */

    letter-spacing: -0.035em;

    color: #B7FB96;
}

			.hover1{
				transform: unset;
				transition: 2s;
			}				
			.hover2{
				transform: translateX(400px);
				transition: 2s;
			}			
			.hover3{
				transform: translateX(700px);
				transition: 2s;
			}
		
.integrations{
    #height: 287px;
    #width: 340px;
    justify-content: center;
}

.integrations:hover {
    #background: url(../images/integrations_hover.png);
    #background-repeat: no-repeat;
    #background-position-y: -45px;
    #background-position-x: -13px;
}

.alt-item:hover {
    background: url(../images/special_features_hover.png);
    background-repeat: no-repeat;
    background-position-y: -1px;
    background-position-x: -13px;
}

.alt-item {
    /*padding: 130px 0px 0px 100px;*/
    padding: 110px 50px 30px 50px;
}


/* Blur */

.blue-circle{
    width: 31px;
    height: 9px;
    left: 676px;
    top: 1194px;
    background: #83c0f6;
    border-radius: 100%;
}


/* Pricing */
.pricing>div>.pricing-text>div>h4{
	font-family: Circular Std;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 119.1%;
    /* or 26px */

    color: #FFFFFF;
}

.pricing>div{
	#margin-top:133px;
}

.pricing_item{
	border: 2px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
    border-radius: 23px;
	max-width: 275px;
	margin: 10px; 
}

.pricing_item li{
	list-style-type: none;
}

.pricing-text li:before{
	
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #83C0F6; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */

}

.pricing-item-title{
	font-family: Circular Std;
    font-style: normal;
    font-weight: 500;
    font-size: 21px;
    line-height: 119.1%;
    /* identical to box height, or 25px */

    color: #FFFFFF;
}

.pricing-item-price{
	font-family: Space Mono;
    font-style: normal;
    font-weight: bold;
    font-size: 51px; 
    line-height: 107.6%;
    /* identical to box height, or 71px */

    color: #FFFFFF;
}

.pricing-item-price>small{
    font-family: Circular Std;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 119.1%;
    /* identical to box height, or 18px */

    color: #FFFFFF;

    opacity: 0.41;
}

.standard-feature{
	font-family: Circular Std;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 119.1%;
    /* identical to box height, or 19px */

    color: #FFFFFF;
}

.lite-feature{
	font-family: Circular Std;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 119.1%;
    /* identical to box height, or 19px */

    color: #FFFFFF;

    opacity: 0.29;
}

.free-trial{
	font-family: Space Mono;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 119.1%;
    /* identical to box height, or 19px */

    color: #B7FB96;
	opacity:1;
}



a.gen-link{
	color:#FFF;
	text-decoration-line: underline;
  text-underline-offset: 4px;
}

a.gen-link:hover{
	text-decoration:none;
}


/* RESPONSIVE CSS */


@media (max-width: 575.98px) { 
    .main{
		
	}

.process_1_sub div {
    padding: 1rem;
}

.process_2_sub div {
    padding: 1rem;
}

.alt-item:hover {
    background: unset!important;
    background-repeat:unset!important;
    background-position-y:unset!important;
    background-position-x:unset!important;
}

.alt-item {
    padding: unset;
}

.try-free-box h1 {
  
    font-size: 26px;
    line-height: 110.6%;
  
}

.features .feature_item:hover {
    background: unset!important;
    background-repeat: unset!important;
    background-position-y: unset!important;
    background-position-x: unset!important;
    background-size: unset!important;
}


    .content{
		margin-top:25px!important;
		padding-left:15px!important;
		padding-right:15px!important;
	}
	
    .section-title {
        font-size: 30px;
    }    
	
	.section_subtitle {
        padding-top: unset!important;
        padding-bottom: unset!important;
    }
	
	.section_subtitle_box {
        padding: unset;
    }
	
	.img-right {
        max-width:100%;
        margin-top: unset!important;
        margin-left: unset!important;
    }
	
	.items{
		padding-left:unset!important;
		padding-right:unset!important;
	}	
	
	.feature_item{
		padding: 35px!important;
        padding-left: 15px!important;
        padding-right: 15px!important;
		
	}
	
	.process_1{
	    margin-top:40px;justify-content: center;flex-direction: column-reverse;
    }	
	
	.process_2{
	    margin-top:25px;justify-content: center;
    }
	
	.process_1_sub{
	    margin-top: 25px;
		max-width:unset;
    }
	
	.integrations{
		justify-content: center;
		padding: 9px;
	}
	
	
	

	.alternative-tool{
		margin-top: unset;
	}
		
	.alternative-items{
	    text-align:left;
		margin-top:50px!important;
		padding-right: unset!important;
        padding-left: unset!important;
        margin: unset!important;
		
    }
	
	.pricing_item {
 
     max-width: 100%; 
  
}
} 

@media (min-width: 576px) and (max-width: 767.98px) { 
    .alt-item:hover {
    background: unset!important;
    background-repeat: unset!important;
    background-position-y: unset!important;
    background-position-x: unset!important;
}
	
	
	.section-title {
        font-size: 26px;
		text-align:center;
    }

	.section_subtitle_box {
        padding: unset;
    }
    .img-right {
        max-width:100%;
        margin-top: unset!important;
        margin-left: unset!important;
    }
	
	.items{
		padding-left:unset!important;
		padding-right:unset!important;
	}	
	
	.feature_item{
		padding-left:unset!important;
		padding-right:unset!important;
		margin-bottom:35px;
	}
	
	.process_1{
	    margin-top:40px;justify-content: center;flex-direction: column-reverse;
    }	
	
	.process_2{
	    margin-top:25px;justify-content: center;
    }
	
	.process_1_sub{
	    margin-top: 25px;
		max-width:unset!important;
    }
	
	.integrations{
		justify-content: center;
		padding: 21px;
	}
	
	.alternative-tool{
		margin-top: 50px!important;
	}
	
.alternative-items{
	    text-align:left;
		margin-top:50px!important;
		padding-right: unset!important;
        padding-left: unset!important;
        margin: unset!important;
		
    }
	
	.pricing_item {
 
     max-width: 100%; 
  
}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	
	    .alt-item:hover {
    background: unset!important;
    background-repeat: unset!important;
    background-position-y: unset!important;
    background-position-x: unset!important;
}

.alt-item {
    padding: 20px 10px 0px 10px;
}

.section-title {
    font-size: 31px;
    margin-bottom: 67px;
}
	.section-title {
        font-size: 31px;
    }
	
	.section_subtitle_box {
        padding: 0 5px 0px 30px;
    }
	
	.img-right {
        max-width:100%;
        margin-top: unset!important;
        margin-left: unset!important;
    }
	
	.alternative-items{
		padding-right: unset!important;
        padding-left: unset!important;
        margin: unset!important;
    }
	
	.features .feature_item {
        padding: 63px 0 87px 51px;
		display: unset!important;
    }
	
	.features .feature_item h4 {
        font-size: 15px;
    }	
	
	.features .feature_item p {
        font-size: 14px;
    }
	
	.features .feature_item:hover {
        background-size: 88% 49%;
		background-position-y: -8px;
        background-position-x: -6px;
    }
	
	.process{
		margin-top: -60px!important;
	}	
	
	.process_1{
		margin-top: -110px;
	}
	
	.process_1_sub div{
	    padding:0.5rem;
    }
	
	.process_2_sub div{
	    padding:0.5rem;
    }
	
	.integrations{
        height: 100px;
        width: 125px;
	}

}