.ctct-header{
	display: none;
	position: relative;
	z-index: 2;
	@include wider-than('xsmall') {
		margin: 0 0 0 -20px;
		padding: 0 0 0 20px;
		background-color: $color-white;
		border-bottom: 1px solid #c3c4c7;
		display: flex; 
		width: 100%; 
		align-items: center;
	}

	h2{
		margin: 0;
		padding: 0 0 0 39px;
		min-height: 32px;
		line-height: 32px;
		background: $color-white url( ../images/ctct-icon-2x.png ) no-repeat 0 48%;
      background-size: 32px 32px;
		text-indent: -9999px;
		@include wider-than('small') {
			text-indent: 0;
		}
	}

	ul{
		padding: 0 0 0 20px;
		margin: 0;
		flex: 1;
		display: flex;
		align-items: center;
		width: 100%;

		li{
			margin: 0 15px 0 0;
			padding: 0;

			a{
				padding: 20px 5px;
				display: block;
				text-decoration: none;
				position: relative;

				&.is-active{
					font-weight: 600;
					text-decoration: underline;

					&::after, 
					&::before {
						top: 100%;
						left: 50%;
						border: solid transparent;
						content: "";
						height: 0;
						width: 0;
						position: absolute;
						pointer-events: none;
					}					

					&::after {
						border-color: rgba(255, 255, 255, 0);
						border-top-color: $color-white;
						border-width: 7px;
						margin-left: -7px;
					}

					&::before {
						border-color: rgba( #c3c4c7, 0);
						border-top-color: #c3c4c7;
						border-width: 8px;
						margin-left: -8px;
					}
				}

				&.ctct-connect-btn{
					color: $color-white;
					background-color: $color-blue;
					border: 1px solid $color-blue-alt;
					padding: 8px;
					border-radius: 3px;
					font-weight: 500;

					&:hover,
					&:focus{
						background-color: $color-blue-alt;
					}
				}

				&.ctct-disconnect{

					a{					
						background-color: $color-orange;
						border: 1px solid $color-orange-alt;

						&:hover,
						&:focus{
							background-color: $color-orange-alt;
						}
					} 
				}
			}
		}
	} 

	.ctct-status{
		display: none;
		@include wider-than('medium') {
			display: flex;
		}
		align-items: center;
		margin-right: 20px;
		font-weight: 500;
		padding: 7px 10px;
		border: 1px solid $color-white;
		border-radius: $radius;
		text-decoration: none;
		color: $color-modal-alt-text;

		&:hover,
		&:focus{
			color: $color-black;
			border-color: $color-silver;
			box-shadow: $shadow;
		}

		&:focus{
			background-color: $color-lighter-gray;
			color: $color-black;
			box-shadow: none;
		}

		&::before{
			content: '';
			display: block;
			width: 10px;
			height: 10px;
			border-radius: 100%;
			background-color: $color-red; 
			margin-right: 7px;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
		}

		&.ctct-connected{

			&::before{
				background-color: $color-green;;
			}
		}
	}
}