/*
Theme name: mettelnet
Description: Custom Theme
*/

/*
	Source post-css styles are located in resources/css/
	The compiled bundle is saved to `dist/css/bundle-${fingerprint}.css`
	(dist/manifest.json provides the exact path mapping).
	
	DEVELOPMENT.md file contains instructions how to get the compilation
	process up & running.

	If you need to make a quick fix, feel free to add CSS
	below this comment -- it's loaded after the compiled bundle. 
*/

@media (min-width: 768px){	
	.result .result__image img + noscript + img {	
    	display: none;	
	}	
}	
@media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape){	
	.intro--home .intro__content {	
		text-align: left;	
		margin-bottom: 160px;	
		padding-bottom: 0;	
	}	
}	
a.btn.btn-transparent {	
    background-color: transparent;	
}	
.intro__content a.btn ~ br {	
    display: none;	
}


.section-animation h3 {
    margin-bottom: 30px;
    color: #1c242b;
	font-size: 24px;
	line-height: 1.25;
}

.section-cta h4{
	font-size: 48px;
	margin-bottom: 37px;
	color: #fff;
}

a.btn.btn-transparent {	
    background-color: transparent;	
}	
.intro__content a.btn ~ br {	
    display: none;	
}

 .SkipNav {
 color: #092340; /* same color as background */
 text-decoration: none;
	 padding-right: 15px;
 }
 
@media (max-width:767px){
	.SkipNav{
		font-size: 1px;
	}
	.nav-access{
		padding-right: 12px;
	}
	
	.nav-access li {
		padding-left: 12px;
	}	


}

 .SkipNav:active, .SkipNav:focus {
 /* Becomes visible & underlined 
 when user tabs to it. 
 :active pseudo-class necessary for IE 
 :focus pseudo-class necessary for Mozilla 
 */
 color: #ffffff; 
 text-decoration: underline;
 }

.form-updates_wrapper.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]){
	color: rgba(4,42,82,.8);
}
.form-updates_wrapper.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):focus{
	color: rgba(4,42,82,.8);
}
.form-updates_wrapper.gform_wrapper input:-webkit-autofill {
   /*  -webkit-text-fill-color: rgba(4, 42, 82, .8); -webkit-box-shadow: 0 0 0 1000px #fff inset;
	-webkit-text-fill-color: rgba(255, 255, 255, .8); -webkit-box-shadow: 0 0 0 1000px #fff inset;*/
}
.form-updates_wrapper.gform_wrapper:not(.form-download_wrapper) input:-webkit-autofill {
    -webkit-text-fill-color: rgba(4, 42, 82, .8);
	    -webkit-box-shadow: 0 0 0 1000px #fff inset;
}

.section-updates .form-updates_wrapper.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]){
	    background-color: #fff;
}
/*
input#gform_submit_button_1.button-disabled,
input#gform_submit_button_3.button-disabled,
input#gform_submit_button_4.button-disabled,
input#gform_submit_button_8.button-disabled {
	background-color: #e7e7e7;
	color: white;
}
*/

.section-updates .form-updates_wrapper.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), .form-updates_wrapper.gform_wrapper ul.gform_fields li.gfield select{	
	border: none;	
}

/*5G page*/
.section-5g-hero-mobile{ display: none; }
.section-5g-title{
	padding: 100px 0 90px;
    overflow: hidden;
}
.section-5g-title .section__head{
	max-width: 625px;
    margin: 0 auto;
    text-align: center;
}
.section-5g-title h2, .section-5g-title p{
	text-align: center;
}
.section-5g-hero{
	background-color: #092340;
	text-align: left;
	padding: 20px 0;
	
}
.section-5g-hero .hero_5g__title{
	font-size: 66px;
	color: #189A96;
	padding-bottom: 0;
	margin-bottom: 0;
}
.section-5g-hero h2, .section-5g-hero-mobile h2{
	color: #fff;
}

.hero-image-5g-img{
	text-align: left;
}

.hero-image-5g{
	position: relative;
	/*margin-top: 20px;*/
}
}
.section-5g-hero h2{
	margin-bottom: 0;
}
.section-5g-hero p, .section-5g-hero-mobile p{
	color: white;
	font-size: 26px;
}

.hero-image-section h2{ margin-bottom: 0; }
/*
.hero-image-5g-section-1{
	position: absolute;
	top: 0px;
	left: 540px;
}
.hero-image-5g-section-2{
	position: absolute;
	top: 200px;
	left: 780px;
}
.hero-image-5g-section-3 {
    position: absolute;
    top: 500px;
    left: 870px;
}
.hero-image-5g-section-4 {
    position: absolute;
    top: 780px;
    left: 780px;
}
.hero-image-5g-section-5 {
    position: absolute;
    top: 1000px;
    left: 540px;
}
*/

.section-5g-services{
	padding: 20px 0;
}
.section-5g-service-list{
	display: flex;
}
.section-5g-service-list-col{
	width: 50%;
	padding-right: 30px;
	margin-bottom: 15px;
}
.section-5g-services h2{
	color: #00b2ac;
	margin-bottom: 0;
}
.section-5g-services h3{
	color: #2F67AA;
	margin-bottom: 0;
	font-size: 20px;
    text-transform: uppercase;
}
.section-5g-footer{
	background-color: #092340;
	padding: 64px 0;
	text-align: center;
}
.section-5g-footer h2{
	color: white;
	text-align: center;
	font-size: 36px;
}
.section-5g-footer h3{
	color: #00b2ac;
	text-align: left;
}
.section-5g-footer p{
	color: white;
}

.mobile-img{ display: none;}


/*@media (max-width: 1230px){*/
	.hero-image-5g{
		padding-top: 20px;
	}
	.hero-image-5g-img{
		width: 550px;
	}
	.section-5g-hero h2{ font-size:	28px;}
	.section-5g-hero p{ font-size: 16px; }
	.hero-image-5g-section-1 { position: absolute; top: 40px; left: 340px; }
	.hero-image-5g-section-2 { position: absolute; top: 150px; left: 500px; }
	.hero-image-5g-section-3 { position: absolute; top: 340px; left: 560px;	}
	.hero-image-5g-section-4 { position: absolute; top: 520px; left: 500px;	}
	.hero-image-5g-section-5 { position: absolute; top: 670px; left: 350px; }	
/* } 
@media (max-width: 1023px){
	.hero-image-5g{
		padding-top: 20px;
	}
	.hero-image-5g-img{
		width: 540px;
	}
	.section-5g-hero h2{ font-size:	38px;}
	.section-5g-hero p{ font-size: 20px; }
	.hero-image-5g-section-1{ position: absolute; top: 0px; left: 340px; }
	.hero-image-5g-section-2{ position: absolute; top: 150px; left: 490px; }
	.hero-image-5g-section-3 { position: absolute; top: 330px; left: 550px;	}
	.hero-image-5g-section-4 { position: absolute; top: 510px; left: 490px;	}
	.hero-image-5g-section-5 { position: absolute; top: 650px; left: 340px; }	
}
*/
@media (max-width: 829px){
	.section-5g-service-list{ display: block; }
	.section-5g-service-list-col{ width: auto; padding-right: 0;}

	.hero-image-5g{
		padding-top: 30px;
	}
	.hero-image-5g-img{
		width: 400px;
	}
	.section-5g-hero h2{ font-size:	28px;}
	.section-5g-hero p{ font-size: 16px; }
	.hero-image-5g-section-1{ position: absolute; top: 0px; left: 250px; }
	.hero-image-5g-section-2{ position: absolute; top: 120px; left: 360px; }
	.hero-image-5g-section-3 { position: absolute; top: 270px; left: 410px;	}
	.hero-image-5g-section-4 { position: absolute; top: 390px; left: 360px;	}
	.hero-image-5g-section-5 { position: absolute; top: 500px; left: 250px; }	
}
@media (max-width: 640px){
	.hero-image-5g{
		padding-top: 10px;
		padding-bottom: 30px;
	}
	.hero-image-5g-img{
		width: 250px;
	}
	.section-5g-hero h2{ font-size:	16px;}
	.section-5g-hero p{ font-size: 12px; }
	.hero-image-5g-section-1{ position: absolute; top: 0px; left: 160px; }
	.hero-image-5g-section-2{ position: absolute; top: 70px; left: 230px; }
	.hero-image-5g-section-3 { position: absolute; top: 155px; left: 260px;	}
	.hero-image-5g-section-4 { position: absolute; top: 240px; left: 230px;	}
	.hero-image-5g-section-5 { position: absolute; top: 310px; left: 160px; }		
}
@media (max-width: 500px){
	
	
	
	.section-5g-hero-mobile{ background-color: #092340; padding-bottom: 20px; display: block; }
	.mobile-img{  width: 120px; }

	.section-5g-hero-mobile ul{
		list-style-type: none; 
	}
	.hero-image-5g{
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.hero-image-5g-img{
		width: 200px;
		padding-bottom: 20px;
	}
	.section-5g-hero h2{ font-size: 24px; }
	.hero-image-5g h2{ font-size: 22px; }
	.section-5g-hero-mobile h2{ font-size:	26px; margin-bottom: 0; }
	.section-5g-hero .hero-image-section p{ display: none;}
	.section-5g-hero-mobile p{ font-size: 14px; }
	
	



	/* ====== media ====== */

	.hero-image-section, .bd{overflow:hidden; _overflow:visible; zoom:1;}
	.mobile-img {float:left; margin-right: 10px;}
	.hero-image-section .mobile-img {display:block;}
	.hero-image-section .bd{ margin-top: 10px;  }

	
	.hero-image-5g-section-1{ position: absolute; top: 40px; left: 130px; }
	.hero-image-5g-section-2{ position: absolute; top: 85px; left: 190px; }
	.hero-image-5g-section-3 { position: absolute; top: 155px; left: 210px;	}
	.hero-image-5g-section-4 { position: absolute; top: 220px; left: 190px;	}
	.hero-image-5g-section-5 { position: absolute; top: 270px; left: 130px; }	
		
}

.solutions-features{ margin-top: 0; }	
.article--single .article__tags a { margin-bottom: 10px;}	
.solutions-features{ margin-top: 0; }	
.feature .feature_body{ margin-bottom: 35px; min-height: 272px;     justify-content: normal; }	
.feature .feature__inner { 	
    position: relative;	
    display: flex;	
    justify-content: space-between;	
    flex-direction: column;	
}	
.section-newsletters_archive{	
    background-color: hsla(180,3%,93%,.5);	
    padding: 70px 0 50px 0;	
}	
.news-archive{	
    display: flex;	
    -webkit-box-flex: 1;	
    flex-wrap: wrap;	
}	
.newsletters-archive{	
    display: flex;	
    -webkit-box-flex: 1;	
    -ms-flex: 1 1 auto;	
    -webkit-box-orient: vertical;	
    -webkit-box-direction: normal;	
    -ms-flex-direction: column;	
    flex-direction: column;	
    min-width: 0;	
    flex: 0 0 33.333333%;	
    margin-bottom: 40px;	
}	
.newsletters-archive__inner{	
    width: 85%;	
}	
.section-newsletters_archive .section__head h3{	
    margin-bottom: 30px;
}

	

#gform_21 label.gfield_label.gform-field-label {

    display: block;

}

#gform_22 label.gfield_label.gform-field-label {

    display: block;

}

#gform_23 label.gfield_label.gform-field-label {

    display: block;

}

#gform_24 label.gfield_label.gform-field-label {

    display: block;

}





/* --------- Tooltip Styles ---------- */



.tooltip1{

position: relative;

    background: rgba(0,0,0,.3);

    padding: 2px 8px;

    border-radius: 100%;

    font-size: 16px;

    cursor: help;

}









.tooltip1:before, .tooltip1:after {

    position: absolute;

    left: 0;

    display: none;

    transition: all ease 0.3s;

}

.tooltip1:before {

    content: "";

    border-width: 10px 8px 8px;

    border-style: solid;

    border-color: rgba(0,0,0,.9) transparent transparent transparent;

    top: 0;

    margin-left: 30px;

    transform: rotate(90deg);

    left: -7px;

}

.tooltip1:after {

    content: attr(data-tooltip1);

    background: rgba(0,0,0,.9);

    top: 50px;

    transform: translateY(-100%);

    font-size: 14px;

    margin-left: 40px;

    width: 300px;

    border-radius: 10px;

    color: #fff;

    padding: 14px;

}





/* Hover states */



.tooltip1:hover::before, .tooltip1:hover::after{

display: inline-block;

}









/* --------- Tooltip Styles ---------- */



.tooltip2{

position: relative;

    background: rgba(0,0,0,.3);

    padding: 2px 8px;

    border-radius: 100%;

    font-size: 16px;

    cursor: help;

}









.tooltip2:before, .tooltip2:after {

    position: absolute;

    left: 0;

    display: none;

    transition: all ease 0.3s;

}

.tooltip2:before {

    content: "";

    border-width: 10px 8px 8px;

    border-style: solid;

    border-color: rgba(0,0,0,.9) transparent transparent transparent;

    top: 0;

    margin-left: 30px;

    transform: rotate(90deg);

    left: -7px;

}

.tooltip2:after {

    content: attr(data-tooltip2);

    background: rgba(0,0,0,.9);

    top: 50px;

    transform: translateY(-100%);

    font-size: 14px;

    margin-left: 40px;

    width: 300px;

    border-radius: 10px;

    color: #fff;

    padding: 14px;

}





/* Hover states */



.tooltip2:hover::before, .tooltip2:hover::after{

display: inline-block;

}



@media(max-width: 767px){

	.tooltip1:after, .tooltip2:after{

		width: 150px;

	}

}