/*
Theme Name: Spectrum Technologies
Author: Spectrum Technologies
Author URI: https://www.spectrumtechistechnology.com
Description: Base Theme Developed by Spectrum Technologies
Version: 1.0
Text Domain: spectrumtech
*/

/*** General ***/
body{}
h1{}
h2{line-height: 1.5;}
h3{}
h4{}
h5{}
p{margin: 0 0 1.7rem 0; line-height: 1.8; color: #333;}
.remove-padding{padding: 0;}
.btn-block{width: 100% !important;}

/*** Media **/
img.alignleft{display: block; margin: 20px auto; max-width: 100%; height: auto;}
img.alignright{display: block; margin: 20px auto; max-width: 100%; height: auto;}
#com-video .wpb_video_wrapper{padding: 0;}

/*** Header ***/
/** Top Bar **/
#top-bar #txdot-logo{width: 90%; max-width: 220px;}
#top-bar .social-media-links{float: right;}
#top-bar .social-media-links li.social-link a:hover{background: #fff !important;}
#top-bar .social-media-links li.social-link a:hover i{color: #1f4383}
.social-media-links{margin: 0; padding: 0; list-style: none;}
.social-media-links li{display: inline-block; float: left; min-width: 10px;}
.social-media-links li.lang-item{margin: 0 6px; width: 20px;}
.social-media-links li.lang-item img{width: 100%; height: auto}
.social-media-links li.social-link a{display: block; width: 35px; height: 35px; border-radius: 50%; position: relative; transition: 0.3s all ease;}
.social-media-links li.social-link a.facebook-link{background: #3b5998;}
.social-media-links li.social-link a.facebook-link:hover{background: #25385F;}
.social-media-links li.social-link a.twitter-link{background: #1da1f2;}
.social-media-links li.social-link a.twitter-link:hover{background: #1679B5;}
.social-media-links li.social-link a i{position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); color: #fff; font-size: 14pt;}
.social-media-links li.lang-item a{display: block; position: relative; color: #fff;}
/** Branding **/
#branding{padding: 0.4rem 0}
#branding img.custom-logo{max-width: 130px; width: 90%;}
.header-links .header-link{font-size: 14px; line-height: 1.3; padding: 3px!important; border-radius: 23px; }
.header-link-contents{display: flex; align-items: center; justify-content: center;}
.header-link-contents .header-link-image{width: 35px; height: 35px; background-position: center; background-repeat: no-repeat; margin: 0 10px 0 0; }
.header-links .header-link .header-link-text{text-align: left; }
.header-links .header-link .header-link-text > div:last-child{font-weight: 700;}
/** Navigation **/
nav#navigation #mobile-logo{width: 80px;}
nav#navigation .nav-item > a{display: inline-block;}
nav#navigation .nav-item > span{display: inline-block; padding: 0.5rem 0.5rem 0.5rem 0; margin: 0 0 0 -5px;}
nav#navigation .nav-item .dropdown-menu{margin-top: -1px;}
nav#navigation .nav-item .dropdown-toggle{padding: 0.5rem; cursor: pointer; float: right;}
nav#navigation .nav-item .dropdown-toggle::after{display: none;}
#main-navigation li{border: 0px;}

/*** Homepage ***/
/** Meeting Announcement **/
#meeting-announcement{background-color: #02b4ad; padding: 20px 0; position: relative;}
#meeting-announcement::before{content: ""; position: absolute; top: 0; bottom: 10px; right: 0; left: 0; background-size: cover;background-image: url(https://www.i10connectelpaso.com/wp-content/uploads/2019/04/separator-sm.svg); background-position: 60% 0; opacity: 0.2; }
#meeting-announcement #watch-now{font-size: 2.3rem; line-height: 1;}
#meeting-announcement #watch-now div{display: inline-block;}
#meeting-announcement .announcement-title{font-size: 1.5rem; margin: 20px 0; line-height: 1.3;}
#meeting-announcement .btn{padding: 6px 30px; font-size: 1rem; border-radius: 30px; }
#meeting-announcement .btn:hover{color: #02b4ad}
/** Banners **/
#homepage-banners{padding: 1rem 0; background-image: url(/wp-content/uploads/2019/01/bg-landing-page.jpg); background-position: top center; background-size: cover; background-repeat: no-repeat;}
#homepage-banners .btn{margin: 0 0 1rem 0; }
/** Content **/
#homepage-content{padding: 5rem 0 0;}
/** Divider **/
#homepage-divider{padding: 0 0 2rem;}
/** Updates **/
#homepage-updates{padding: 2rem 0 3rem;}
#homepage-updates .section-header{font-size: 1.1rem; padding: 0.45rem 0; height: 42px;}
#homepage-updates #twitter-feed .fa-twitter{font-size: 1.2rem; margin: 0 10px 0 0;}
#homepage-updates #construction-advisories .fa-i-10-connect-el-paso{background-image: url(/wp-content/uploads/2019/04/connect-star.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; display: inline-block; width: 25px !important; height: 23px; margin-bottom: -3px}
#homepage-updates #construction-advisories .advisory{color: #3B3B3B !important; text-decoration: none; transition: 0.3s all ease;  padding: 20px 10px;}
#homepage-updates #construction-advisories .advisory.odd{background: #F4F4F4;}
#homepage-updates #construction-advisories .advisory:hover{opacity: 0.8;}
#homepage-updates #construction-advisories .advisory ul{margin-left: 4rem; margin-bottom: 0; }
#homepage-updates #construction-advisories .advisory p{margin: 0;}
#homepage-updates #construction-advisories .advisory .title{font-weight: 400 !important; position: relative; margin-left: 35px;}
#homepage-updates #construction-advisories .advisory .title::before{content: ""; width: 20px; height: 20px; position: absolute; top: -3px; left: -30px; display: inline-block; background-image: url(/wp-content/uploads/2019/05/connect-star-blue.svg); background-size: cover; background-position: center center; background-repeat: no-repeat;}


/*** Interior Page ***/
/*
#interior-page-banner{height: 100px; position: relative;}
#interior-page-banner .container{position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);}
#interior-page-banner .page-title{margin: 5px 0 ;} */
#interior-page-banner{padding: 30px 0;}
#interior-page-content{padding: 3rem 0;}
#breadcrumbs{font-size: 0.8rem;}
#breadcrumbs a{color: rgba(103, 103, 103, 0.7)}
.floating-frame{margin: 0 auto; display: block; width: 100%; min-height: 285px;}

/*** Maps Page ***/
.lightbox-image a{height: 100%; width: 100%;}

/*** Traffic Updates Page ***/
.traffic-update {font-size: 0.93rem; border-bottom: 1px solid #e8e8e8; margin: 0 -15px 20px; padding: 20px 20px; transition: 0.3s all ease;}
.traffic-update:hover{background: #F4F4F4;}
.traffic-update h5{font-weight: 400 !important; position: relative; margin-left: 20px;}
.traffic-update h5::before{content: ""; width: 25px; height: 25px; position: absolute; top: -3px; left: -30px; display: inline-block; background-image: url(/wp-content/uploads/2019/05/connect-star-blue.svg); background-size: cover; background-position: center center; background-repeat: no-repeat;}
.traffic-update .description{margin: 0 0 0 20px;}
.traffic-update p,
.traffic-update ul{margin-bottom: 0.7rem;}

/*** Search Form ***/
.form-control-borderless {border: none;}
.form-control-borderless:hover, .form-control-borderless:active, .form-control-borderless:focus {border: none; outline: none; box-shadow: none;}

/*** Footer ***/
footer{padding: 3rem 0 2rem; font-size: 0.9rem;}
footer ul{margin: 0; padding: 0; list-style: none;}
footer li{line-height: 2.1;}
footer a{color: #5c5c5c;}
footer .custom-logo{max-width: 250px; margin: 0 auto; display: block;}
footer #quick-links ul{}
footer .social-media-links{font-size: 1.1rem; margin: 10px 0 0 0; float: none;}
footer .social-media-links li{display: inline-block; float: none; }
footer .footer-contact-info ul{margin-left: 40px; margin-bottom: 0;}
footer .footer-contact-info ul li{margin-bottom: 10px;}
footer #footer-txdot-logo{left: 15px; right: 15px; bottom: 0;}
footer #footer-line{height: 1px; background: #000000; opacity: 0.2; margin: 20px 0;}
footer #credit a{color: #000; font-weight: 400; text-decoration: none; display: block; opacity: 0.4; transition: all 0.5s ease;}
footer #credit a:hover{opacity: 1;}
footer #credit img{width: 120px; margin: 0 0 0 5px;}

/*** Gravity Forms ***/
.gfield_required{color: #ac202d; margin: 0 0 0 5px;}
.ginput_container textarea{border: 1px solid #cfcfcf;}
.gform_wrapper label.gfield_label{font-weight: 400 !important; margin: 10px 0 0!important;}
.gform_button{width: 100% !important; text-transform: uppercase;}
.validation_error{border: none !important; padding: 10px 15px !important; text-align: left !important; color: #fff !important; background-color: #ac202d; font-weight: 300 !important;}
.validation_error::before{content: "\f00d"; font-family: "Font Awesome 5 Pro"; margin: 0 10px 0 0;}
.gfield_error{border: none !important; background-color: transparent !important; }
.gform_wrapper .gfield_error .gfield_label,
.gform_wrapper li.gfield_error div.ginput_complex.ginput_container label,.gform_wrapper li.gfield_error ul.gfield_checkbox,.gform_wrapper li.gfield_error ul.gfield_radio{color: #ac202d !important;}
.gform_wrapper li.gfield_error input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),.gform_wrapper li.gfield_error textarea{border: 1px solid #ac202d !important; }
.gform_wrapper .validation_message{background-color: #ac202d; padding: 5px 10px !important; color: #fff !important; font-weight: 400 !important; display: inline; }
.gform_wrapper .ginput_container_fileupload .validation_message{padding: 0px !important;}
.gform_confirmation_message{background-color: #27ae60; color: #fff !important; padding: 5px 10px; font-weight: 300 !important;}
.gform_confirmation_message a{color: #fff !important; text-decoration: underline;}
.gform_confirmation_message::before{content: "\f00c"; font-family: "Font Awesome 5 Pro"; margin: 0 10px 0 0;}
.gf_progressbar{padding: 0 !important;}
.gform_wrapper .percentbar_blue{background-color: #ac202d !important;}
.gform_wrapper .gf_progressbar:after,
.gform_wrapper .gf_progressbar_percentage,
.gform_wrapper .gf_progressbar{border-radius: 0px !important;}
.gfield_checkbox li{margin: 0 0 50px !important; }
.gfield_checkbox li label{margin: 0 0 0 10px !important;}
.gfield_checkbox li label h5{color: #ac202d; }
.fancy-radio li{width: 50%; display: inline-block; text-align: center; margin: 0 !important;}
.fancy-radio li input{display: none !important;}
.fancy-radio li label{border: 1px solid #ac202d; border-radius: 22px; color: #ac202d; margin: 0 auto !important; width: 150px !important; display: block !important; text-align: center; padding: 0.6rem 0 !important; position: relative;}
.fancy-radio li input:checked+label{background-color: #ac202d; color: #fff;}
.fancy-radio li input:checked+label::before{content: "\f14a"; font-family: "Font Awesome 5 Pro"; font-weight: 400; margin: 0 10px 0 0;}
.fancy-radio li label::before{content: "\f0c8"; font-family: "Font Awesome 5 Pro"; font-weight: 400; margin: 0 10px 0 0;}

/*** Text Sign Up Form ***/
#signup-wrapper{background: #f3f3f3; padding: 20px; border-radius: 20px; margin-top: 20px;}
/** Promise Button **/
.btn.ng-isolate-scope span{padding-right: 0; transition: 0.3s all ease;}
.btn.is-loading{position: relative; transition: 0.3s all ease; cursor: not-allowed;}
.btn.is-loading span:not(.btn-spinner){padding-right: 10px;}
.btn.is-loading .btn-spinner{display: inline-block;}
.btn-spinner{border-radius: 50%; margin: 0px; font-size: 10px; border-top: 2px solid rgba(255, 255, 255, 0.5); border-right: 2px solid rgba(255, 255, 255, 0.5); border-bottom: 2px solid rgba(255, 255, 255, 0.5); border-left: 2px solid rgb(255, 255, 255); -webkit-animation: spin 1.1s infinite linear; animation: spin 1.1s infinite linear; width: 17px; height: 17px; position: absolute; display: none;}
@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes spin {
  0% {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
/** Form Validity **/
.ng-invalid-required.ng-submitted input.ng-invalid,
.ng-invalid.ng-dirty{border-color: #c0392b !important;}
.ng-valid.ng-dirty{border-color: #1abc9c !important;}
/** Verification Form **/
#verify-card{display: none;}
/** Success Message **/
#success-card,
#already-verified-card{display: none;}
#success-checkmark{font-size: 23pt; border: 3px dashed #28a745; border-radius: 50%; width: 70px; height: 70px; margin: 0 auto; position: relative;}
#verified-checkmark{font-size: 23pt; border: 3px dashed #007bff; border-radius: 50%; width: 70px; height: 70px; margin: 0 auto; position: relative;}
#success-checkmark i,
#verified-checkmark i{position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);}


/*** Media Queries ***/
/* Small devices (576px and up) */
@media (min-width: 576px) {

}

/* Medium devices (768px and up) */
@media (min-width: 768px) {

	/*** Media **/
	img.alignleft{float: left; margin: 20px 20px 20px 0px;}
	img.alignright{float: right; margin: 20px 0 10px 20px;}

	/*** Header ***/
	/** Top Bar **/
	#top-bar{padding: 0.4rem 0;}
	.social-media-links li.lang-item{margin-top: 5px;}
	/** Navigation **/
	nav#navigation{border-top: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;}

	/*** Homepage ***/
	/** Meeting Announcement **/
	#meeting-announcement::before{background-image: url(https://www.i10connectelpaso.com/wp-content/uploads/2019/04/separator-sm.svg); background-position: 75% 0;}
	#meeting-announcement .announcement-title{margin: 10px 0;}
	/** Banners **/
	#homepage-banners{padding: 4rem 0;}
}

/* Large devices (992px and up) */
@media (min-width: 992px) {

	/*** Header ***/
	/** Site Branding **/
	#branding img.custom-logo{margin-top: -55px;}
	/** Navigation **/
	.nav-item .dropdown-toggle{display: none;}
	.navbar .navbar-nav > li.dropdown > .dropdown-menu {display: block; opacity: 0; visibility: hidden; transition: all 0.1s ease;}
	.navbar .navbar-nav > li.dropdown:hover > .dropdown-menu {display: block; opacity: 1; visibility: visible;}
	#main-navigation li{border-right: 1px solid #E5E5E5;}
	#main-navigation ul li:first-child{border-left: 1px solid #E5E5E5;}

	.floating-frame{float: right; margin: 0 0 10px 20px; max-width: 560px; height: 315px;}

	/*** Homepage ***/
	/** Meeting Announcement **/
	#meeting-announcement::before{background-image: url(https://www.i10connectelpaso.com/wp-content/uploads/2019/04/separator-sm.svg); background-position: 85% 0;}
	#meeting-announcement #watch-now{font-size: 3.2rem; line-height: 1;}
	#meeting-announcement #watch-now div{display: inline-block;}
	#meeting-announcement .announcement-title{font-size: 2.1rem; margin-bottom: 10px; line-height: 1.3;}
	#meeting-announcement .btn{padding: 6px 30px; font-size: 1.4rem; border-radius: 30px; }

	/*** Footer ***/
	#footer-txdot-logo{position: absolute;}

}

/* Extra Large devices (1200px and up) */
@media (min-width: 1200px) {

	/*** Homepage ***/
	/** Meeting Announcement **/
	#meeting-announcement::before{background-image: url(https://www.i10connectelpaso.com/wp-content/uploads/2019/04/separator-sm.svg); background-position: 95% 0;}

}

@media (min-width: 1600px){

	/*** Homepage ***/
	/** Meeting Announcement **/
	#meeting-announcement::before{background-image: url(https://www.i10connectelpaso.com/wp-content/uploads/2019/04/separator-md.svg); background-position: 90% 0;}

}

@media (min-width: 2100px){

	/*** Homepage ***/
	/** Meeting Announcement **/
	#meeting-announcement::before{background-image: url(https://www.i10connectelpaso.com/wp-content/uploads/2019/04/separator-lg.svg); background-position: 85% 0;}

}

/** Dev **/
.container.dev,
.container-fluid.dev { border: 1px solid green; }
.container.dev .row,
.container-fluid.dev .row { border: 1px solid blue; }
.container.dev .row [class*="col-"],
.container-fluid.dev .row [class*="col-"] { border: 1px solid red; }
.row.dev { border: 1px solid blue; }
.row.dev [class*="col-"] { border: 1px solid red; }
form.dev { border: 1px solid blue; }
form.dev [class*="col-"] { border: 1px solid red; }