/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media (max-width: 540px) {
	/*Navigation styles*/
	header button.main-help-btn {
		display: none;
	}
	
	header button.resp-nav-btn {
		right: 40px;
	}
	header .main-demo-btn {
		display: none;
	}
}

@media (max-width: 960px) {
	/*Navigation styles*/
    header nav {
        display: none;
    }
	header button.resp-nav-btn {
		display: block;
	}
}


/* ==========================================================================
   EXTRAS
   ========================================================================== */
@media (max-width: 540px) {

	.home_bx .fp-overflow {
		padding: 0 8%;
	}
    .home_bx h1 {
		font-size: 38px;
		line-height: 42px;
	}
	
	.home_bx h1 span{
		display: none;
	}
	
	.home_bx p {
		font-size: 20px;
		line-height: 22px;
	}
	
	.home_bx p span {
		display: none;
	}
	
	.home_bx img {
		display: inline-block;
		width: 80%;
		height: auto;
	}
	
	.products_bx .fp-overflow {
		padding-top: 160px;
	}
	
	.products_bx .col_tres {
		width: 100%;
		padding: 0 10%;
	}
	
	.products_bx .col_tres .go_btn {
		display: none;
	}
	
	.products_bx .products_list_bx {
		width: 100%;
		height: 90%;
		padding-top: 20px;
		background-color: rgba(255,255,255,0.2);
		backdrop-filter: blur(40px);
		-webkit-backdrop-filter: blur(40px);
	}
	.products_bx .products_list_bx .demo_cntnt {
		padding: 0 10%;
	}
	.products_bx .products_list_bx .btns_bxs {
		width: 90%;
		padding-left: 10%;
		box-sizing: border-box;
	}
	.products_bx .products_list_bx .btns_bxs a, .products_bx .products_list_bx .btns_bxs a:hover{
		width: 100%;
		display: inline-block;
		text-align: center !important;
		box-sizing: border-box;
		margin: 5px 0;
		border: 1px solid rgba(0, 0, 0, .1) !important;
	}
	
	.products_bx .products_list_bx h3 {
		line-height: 48px;
	}
	.products_bx .products_list_bx .demo_cntnt h3 span:last-child {
		display: inline;
	}
	
	.products_bx .products_list_bx .demo_cntnt h3 span:first-child {
		display: none;
	}
	
	.clients_bx .clnts_cntnt {
	    padding: 0 10% 50px 10%;
	}
	
	.clients_bx .clnts_cntnt h2 {
		font-size: 38px;
		line-height: 42px;
	}
	
	.clients_bx .clnts_cntnt p {
		font-size: 20px;
		line-height: 22px;
	}
	
	.clients_bx .logos_glide img {
		height: 55px;
	}
	
	.clients_bx .logos_glide .glide__bullets {
		text-align: center;
		padding-top: 20px;
	}
	
	.pilares_bx .fp-overflow {
	    padding-top: 140px;
	}
	
	.pilares_bx .plrs_plrs {
		box-sizing: border-box;
	    padding: 0 10%;
	}
	.pilares_bx .plrs_plrs img {
		width: 60%;
		margin: 0 0 60px 0;
	}
	
	.pilares_bx h2 {
		font-size: 38px;
		line-height: 42px;
	}
	
	.pilares_bx p {
		font-size: 20px;
		line-height: 22px;
	}
	
	.pilares_bx p span {
		display: none;
	}
	
	.pilares_bx p b {
		font-size: 20px;
		line-height: 22px;
	}
	
	.pilares_bx .plrs_cntnt {
	    padding: 0 10% 50px 10%;
	}
	
	.cert_bx .cert_txt p {
	  font-size: 22px;
	  line-height: 32px;
	}
	
	.cert_bx .cert_txt {
	  margin-top: 97px;
	  padding: 10%;
	}
	
	.cert_bx .cert_logos {
		padding: 0 5%;
		margin-top: 20px;
		cursor: pointer;
	}
	
	.cert_bx .cert_logos img {
		width: 90%;
	}
	
	.cert_bx .cert_logo {
		width: 44%;
	}
	
	.lead_bx .lead_txt{
		padding: 0 10%;
	}
	
	.lead_bx h2 {
		font-size: 38px;
		line-height: 42px;
	}
	
	.lead_bx p.lead_p {
		font-size: 20px;
		line-height: 22px;
	}
	
	.lead_bx p span {
		display: none;
	}
	
	.lead_bx p b {
		font-size: 20px;
		line-height: 22px;
	}
	
	.lead_bxin img {
		width: 180px;
	}
	
	.lead_crsl .glide__arrow--left {
		left: 5%;
		top: 60%;
		cursor: pointer;
		display: none;
	}
	
	.lead_crsl .glide__arrow--right {
		right: 5%;
		top: 60%;
		cursor: pointer;
		display: none;
	}
	
	.radar_bx .radar_left {
		width: 90%;
		padding-left: 10%;
		z-index: 9999;
	}
	.radar_bx .radar_right {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 9998;
		overflow: hidden;
	}
	.radar_bx .radar_right img {
		width: 220%;
		bottom: -50%;
		opacity: .1;
	}
	
	.radar_bx .radar_left h2 {
		font-size: 38px;
		line-height: 42px;
		padding-top: 0px;
	}
	
	.radar_bx .radar_ctnr {
		left: 0%;
		height: 85%;
		padding: 0 10%;
	}
	
	.contact_bx .form_side {
		width: 100%;
		padding: 150px 10% 60px 10%;
		box-sizing: border-box;
	}
	.contact_bx .contact_side {
		width: 100%;
		padding: 0 10% 50px 10%;
		box-sizing: border-box;
	}
	.contact_bx h2 {
		font-size: 38px;
		line-height: 42px;
	}
	.form_bx button.off_btn {
		margin-bottom: 10px;
	}

	.contact_bx .copy_ere {
		position: relative;
	    left: 10%;
	    width: auto;
	    display: inline-block;
	}
	.contact_bx .form_side input.nmbr, .contact_bx .form_side input#email, .contact_bx .form_side input#phone {
	    width: 99%;
	}
	
	.modal_vid_bx {
		width: 300px;
	    height: 168px;
	}
	
}

@media (min-width: 541px) and (max-width: 768px) {
	
	.products_bx .fp-overflow {
		padding-top: 23%;
	}
	.products_bx .col_tres {
		width: 100%;
		padding: 0 10%;
	}
	.products_bx .col_tres img:first-child {
		float: left;
		padding-bottom: 60px;
		margin-right: 30px;
	}
	.products_bx .col_tres .go_btn {
		margin-top: 0px;
		cursor: pointer;
		position: absolute;
		right: 10%;
		top: 20px;
	}
	.products_bx .col_tres span {
		left: 188px;
		position: relative;
	}
	.products_bx .products_list_bx {
		width: 100%;
		height: 55%;
		padding-top: 0px;
	}
	.products_bx .products_list_bx .demo_cntnt {
		padding: 0 20%;
	}
	.products_bx .products_list_bx .btns_bxs {
		padding-left: 20%;
	}
	.clients_bx .logos_glide img {
		height: 80px;
	}
	.pilares_bx .plrs_plrs {
		box-sizing: border-box;
	    padding: 0 10%;
	}
	.pilares_bx .plrs_plrs img {
		width: 25%;
		margin: 0 20px;
	}
	.cert_bx .cert_txt {
	  margin-top: 97px;
	  padding: 3% 10% 9% 10%;
	  background-color: rgba(0, 145, 255, 0.6);
	}
	.cert_bx .cert_logos {
		padding: 0 10%;
	}
	.cert_bx .cert_logo {
		width: 40%;
	}
	.radar_bx .radar_left {
		width: 60%;
		padding-left: 10%;
	}
	.radar_bx .radar_right {
		width: 30%;
		position: relative;
	}
	.radar_bx .radar_right img {
		width: 70%;
	}
	.contact_bx .form_side {
		width: 50%;
		padding-left: 10%;
	}
	.contact_bx .contact_side {
		width: 25%;
		padding-left: 5%;
	}
	.contact_bx .form_side input.nmbr, .contact_bx .form_side input#email, .contact_bx .form_side input#phone {
	    width: 99%;
	}
	
	#email {
		text-transform: lowercase;
	}
	
	.modal_vid_bx {
		width: 500px;
	    height: 281px;
	}
	
}

@media (min-width: 541px) and (max-width: 637px) {
	.pilares_bx .plrs_plrs {
		box-sizing: border-box;
	    padding: 0;
	}
	.pilares_bx .plrs_plrs img {
		width: 20%;
		margin: 0 20px;
	}
}

@media only screen and (max-height: 767px) and (min-width: 1024px) {
    .desk_x .section {
		transform: scale(0.8) !important;
	}
	.desk_x .section.cert_bx {
		transform: scale(1) !important;
	}
	
	.cert_bx .cert_txt p {
	  font-size: 28px;
	  line-height: 40px;
	}
	.cert_bx .cert_logos {
		padding: 0 20%;
		margin-top: 30px;
	}

	
	.products_bx .fp-overflow {
	    padding-top: 10%;
	}
}

@media only screen and (max-height: 634px) and (min-width: 1024px) {
    .desk_x .section {
		transform: scale(0.6) !important;
	}
	.products_bx .fp-overflow {
	    padding-top: 6%;
	}
}


/* ==========================================================================
   DEMOS
   ========================================================================== */
   
@media only screen and (max-width: 639px) {
   
   .demo_bx {
   	
   }
   
   .upload_bx .dos_bx {
   	display: none;
   }
   
   .demo_bx {
   	padding-left: 20px;
   	padding-right: 20px;
   	overflow: hidden;
   }
   
   .demo_bx p span {
   	display: none;
   }
   
   .demo_bx.compare_w {
   	width: auto;
   }
   
   .demo_bx.compare_w .compare_bx {
   	position: static;
   	margin-top: 75px;
   }
   
   .versus_bx img {
    margin-top: 131px !important;
    margin-left: -22px !important;
    z-index: 999;
   }
   
   .compare_line {
    top: 118%;
    left: 120px;
    margin-top: -1px;
   }
   
/*   .uno_bx  #btnFileArea {
   	display: none;
   }*/
   
   .uno_bx .compare_btn {
    margin-left: 0;
   }
   
   .upload_bx {
   	
   }
   
   .upload_bx .ocr_xtrct {
   	width: 100%;
   	display: block;
   }
   
   .upload_bx .ocr_xtrct label {
   	display: inline-block;
   }
   
   .ocr_xtrct .ocr_lft {
    width: 100%;
    float: none;
   }
   
   .ocr_xtrct .ocr_rght {
    width: 100%;
    float: none;
   }
   
}

/* ==========================================================================
   DEMOS
   ========================================================================== */


@media (min-width: 769px) and (max-width: 1024px) {
	.home_bx h1 {
		font-size: 50px;
		margin-bottom: 0;
	}
	
	.home_bx p {
		font-size: 28px;
		margin-top: 15px;
	}
	
	.home_bx img {
		display: inline-block;
		height: 180px;
	}
	
	.products_bx .col_tres.go_hover {
	  transform: scale(1);
	}
	
	.products_bx .products_list_bx .demo_cntnt h3 span:last-child {
		display: inline;
	}
	
	.products_bx .products_list_bx .demo_cntnt h3 span:first-child {
		display: none;
	}
	
	.clients_bx .clnts_cntnt h2 {
		font-size: 50px;
	}

	.clients_bx .clnts_cntnt p {
		font-size: 28px;
	}
	.clients_bx .clnts_cntnt {
	    padding: 0 15% 20px 15%;
	}
	
	.clients_bx .logos_glide .glide__bullets {
	    padding-top: 20px;
	}
	
	.pilares_bx h2 {
		font-size: 50px;
	}
	
	.pilares_bx p {
		font-size: 28px;
		margin-bottom: 5px;
	}
	
	.pilares_bx .plrs_plrs img {
		margin: 0 30px;
	}
	
	.cert_bx .cert_txt p {
	  font-size: 32px;
	  line-height: 44px;
	}
	
	.cert_bx .cert_txt {
	    padding: 3% 15% 5% 15%;
	}
	
	.lead_bx h2 {
		font-size: 50px;
	}
	
	.lead_bx p.lead_p {
		font-size: 28px;
	}
	
	.lead_bx p b {
		font-size: 28px;
	}
	
	.lead_bxin img {
		width: 180px;
	}
	
	.radar_bx .radar_left h2 {
		font-size: 50px;
		padding-top: 20px;
	}
	
	.radar_bx .radar_left {
		width: 50%;
		padding-left: 10%;
	}
	
	.radar_bx .radar_right {
		width: 40%;
		height: 100%;
		float: left;
		position: relative;
	}
	
	.radar_bx .radar_right img {
		width: 70%;
	}
	
	.contact_bx h2 {
		font-size: 50px;
	}
	
	.contact_bx .form_side {
		width: 47%;
		padding-left: 13%;
	}
	.contact_bx .contact_side {
		width: 25%;
		padding-left: 5%;
	}
	
}