/* ==========================================================================
Import
========================================================================== */

@import url('bootstrap.min.css');
@import url('fontawesome-all.min.css');
@import url('animations.css');
/* @import url('https://use.typekit.net/aoq6wlq.css');
/* @import url('animations-ie-fix.css'); */

@font-face {
    font-family: 'proxima-nova';
    /* 2.2.7 - CK - Re-added '?' to fix fonts in IE */
    src: url("../webfonts/proxima-nova/regular.eot");
    src: url("../webfonts/proxima-nova/regular.eot?#iefix") format("embedded-opentype"), 
          url("../webfonts/proxima-nova/regular.woff") format("woff"), 
          url("../webfonts/proxima-nova/regular.ttf") format("truetype"), 
          url("../webfonts/proxima-nova/regular.svg#proximanova-regular") format("svg");
    font-weight: normal;
    font-style: normal;
    font-size-adjust: none;
}
 
/* ==========================================================================
Base
========================================================================== */
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
    height: 100%;
}

html {font-size: 16px;}
@media only screen and (max-width: 767px) {
	html {font-size: 13px;}
}
@media only screen and (max-width: 575px) {
	html {font-size: 11px;}
}
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: 'proxima-nova',sans-serif;
	font-weight: 300;
	background-color: #111111;
	overflow-x: hidden;
}

.frame {max-width: 1480px;}

 
footer.bg-dark {
    min-height: 200px;
    background: none !important;
    border-top: 1px solid #b7adad;
 
}


/* ==========================================================================
Typography + Colors
========================================================================== */

a,
.text-red {color: #c50202}
a:hover {color: #990000}
.text-small {font-size: 12px}

.bg-transparent {background-color: transparent}
.bg-black-80 {background-color: rgba(0,0,0,0.85)}
.bg-black-50 {background-color: rgba(0,0,0,0.5)}
.bg-black {background-color: #190d10}
.bg-dark {background-color: #252525 !important}
.bg-white-20 {background-color: rgba(255,255,255,0.2)}
 {color: #c50202}

.text-spacing {letter-spacing: 2px}


.border-red {border: solid 2px #c50202}

.navbar-nav .active .nav-link {border-bottom: solid 1px #bc9b6a}

.border-color-light {
	border-top-color: rgba(255,255,255,0.2)
}


/* ==========================================================================
Navigation
========================================================================== */

.logo {
	width: 87px; height: 25px;
	background-image: url('../img/logo-avaya.png');
	float: left; 
	margin-right: 20px;
	position: relative;
}
.logo:after {
	content: '';
	position: absolute; top: -5px; right: -10px;
	width: 1px; height: 30px;
	background-color: #fff;
}

.navbar-top .nav-link {
	font-size: 12px; margin: 0 15px;
}
	.navbar-top.navbar-dark .nav-link {color: #fff}
	.navbar-top.navbar-light .nav-link {color: #1b1f34}
	.navbar-top .nav-item:hover .nav-link {color: #bc9b6a !important}
	
.header-subpage .navbar-top {border-bottom: solid 1px rgba(188,155,106, 0.5)}

@media only screen and (min-width: 768px) {
	.navbar-top {padding: 0 1rem}
	.navbar-top .nav-link {padding: 1rem;}
	.navbar-top .navbar-nav {position: relative;}
	.navbar-top .dropdown {position: static}
	.navbar-top .dropdown .dropdown-menu {
		background: none;
		top: 50px; left: 50%; margin-left: -380px;
		width: 760px;
		text-align: center;
		border: 0;
	}
		.navbar-top.dropdown:hover>.dropdown-menu {display: block}
	.navbar-top .dropdown .nav-link {border-bottom: none}
	.navbar-top .dropdown .dropdown-toggle:after {display: none}
	.navbar-top a.dropdown-item {
		
		display: inline;
		width: auto;
		white-space: normal;
		font-size: 12px;
		padding: .25rem 0.75rem;
		margin: 0 .25rem;
	}
		.navbar-top.navbar-dark a.dropdown-item {color: rgba(255,255,255,0.5);}
		.navbar-top.navbar-light a.dropdown-item {color: rgba(0,0,0,.5);}
		.navbar-top a.dropdown-item.active,
		.navbar-top a.dropdown-item:hover {background: none}
		.navbar-top a.dropdown-item.active {
			color: #bc9b6a;
			border-bottom: solid 1px #bc9b6a;
		}
		.navbar-top a.dropdown-item:hover {
			color: #bc9b6a;
		}
	
}

.nav-social .nav-link {
	width: 30px; height: 30px;
	color: #a2a2a4;
	position: relative;
}
	.nav-social .nav-link:first-child {}
.nav-social .nav-link:hover {color: #fff}
	.nav-social .nav-link:before {
		position: absolute; top: 8px; left: 10px;
		width: 20px;
		font-size: 14px;
		font-weight: 300;
	}
	.nav-social .nav-link-linkedin:before {content: "\f0e1"}
	.nav-social .nav-link-facebook:before {content: "\f39e"; left: 12px;}
	.nav-social .nav-link-youtube:before {content: "\f167"; left: 9px;}
	.nav-social .nav-link-instagram:before {content: "\f16d"; left: 11px;}
	.nav-social .nav-link-pinterest:before {content: "\f231"; left: 11px;}
	.nav-social .nav-link-google:before {content: "\f0d5"; left: 8px;}
	.nav-social .nav-link-twitter:before {content: "\f099"; left: 9px;}
	
@media only screen and (max-width: 991px) {
	.nav-social {
		margin-left: -10px; padding-top: 10px;
	}
}

/* ==========================================================================
Buttons
========================================================================== */

.btn-outline-gold {
	color: #bb9b6a;
	background-color: transparent;
	background-image: none;
	border-color: #bb9b6a;
}
	.btn-outline-gold:hover,
	.btn-outline-gold:not(:disabled):not(.disabled).active,
	.btn-outline-gold:not(:disabled):not(.disabled):active,
	.show > .btn-outline-gold.dropdown-toggle {
		color: #fff;
		background-color: #bb9b6a;
		border-color: #bb9b6a;
	}
	.btn-outline-gold.focus, .btn-outline-gold:focus {box-shadow: none}
	

.btn-arrow {
	position: relative;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	display: block;
	-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s
}

.btn-arrow {
	width: 120px; height: 20px;
}
	.btn-arrow:hover {
		text-decoration: none;
		-webkit-transform: translateX(10px);-moz-transform: translateX(10px);transform: translateX(10px);
	}
	.btn-arrow:before,
	.btn-arrow:after {position: absolute}
	.btn-arrow:before {
		content: "\f061";
		font-size: 13px;
		top: 9px; right: 0;
	}
	.btn-arrow:after {
		content: "";
		width: 110px; height: 2px;
		top: 8px; left: 0;
	}

.btn-back-top, .btn-scroll-down {
	text-transform: uppercase;
	font-size: 10px;
	font-weight: 300;
}
.btn-back-top {position: relative; width: 90px;margin-top: 30px;}
.btn-scroll-down {
	width: 50px;
	position: absolute;
	bottom: 30px; left: 50%; margin-left: -25px;
}
.btn-back-top:hover {-webkit-transform: translateY(-10px);-moz-transform: translateY(-10px);transform: translateY(-10px);}
.btn-back-top i, .btn-scroll-down i {display: block; width: 9px;}
.btn-back-top i {margin: 0 auto 20px}
.btn-scroll-down i {margin: 20px auto 0}
.btn-back-top i:after, .btn-scroll-down i:after {
	content: "";
	height: 10px; width: 1px;
	position: absolute; left: 50%; 
	background-color: #fff;
	margin-left: -1px;
}
.btn-back-top i:after {top: 9px;}
.btn-scroll-down i:after {bottom: 9px}

/* ==========================================================================
Mastheads
========================================================================== */

.masthead {
	background-image: url('../img/bg-masthead.jpg');
	background-position: center bottom !important;
	background-repeat: no-repeat;
	height: 832px;
	padding-top: 90px;
	position: relative;
}
.masthead:before {
	content: '';
	background-image: url('../img/el-road.gif');
	width: 42px; height: 300px;
	position: absolute; bottom: 0; left: 50%; 
	margin-left: -21px;
	background-size: cover;
}
	.masthead h1 {font-size: 3rem; padding-right: 40%; position: relative; z-index: 10; text-shadow: 1px 1px 4px black;}
	.masthead blockquote {
		position: relative;
		width: 350px;
		background-color: rgba(0,0,0,0.7);
		padding: 20px;
	}
		.masthead blockquote:before {
			content: '';
			position: absolute;
			bottom: -123px; left: 50%;
			margin-left: -16px;
			background-image: url('../img/obj-pole.png');
			width: 15px; height: 126px;
			background-size: cover;
			background-repeat: no-repeat;
		}
		.masthead blockquote.quote-1 {float: left;margin-top: 60px;}
		.masthead blockquote.quote-2 {float: right;margin-top: 80px;}
		
@media only screen and (max-width: 1199px) {
	.masthead {
		height: 700px;
		background-size: 1190px;
		padding-top: 70px;
	}
	.masthead:before {height: 240px}
	.masthead h1 {font-size: 2.5rem;padding-right: 30%}
	.masthead blockquote .lead {font-size: 1rem}
	.masthead blockquote.quote-1 {margin-top: 30px;}
	.masthead blockquote.quote-2 {margin-top: 20px;}
}
@media only screen and (max-width: 991px) {
	.masthead {background-size: 980px;height: 560px; padding-top: 50px}
	.masthead::before {height: 200px}
	.masthead h1 {font-size: 2.3rem; padding-bottom: 30px}
	.masthead blockquote:before {display: none}
	.masthead blockquote {width: 49.9%; margin-top:0 !important}
}
@media only screen and (max-width: 767px) {
	.masthead {background-size: 750px;height: 500px; padding-top: 50px}
	.masthead::before {height: 140px; width: 22px; margin-left: -11px}
	.masthead h1 {font-size: 2rem; padding-bottom: 30px;padding-right: 0}
}
@media only screen and (max-width: 575px) {
	.masthead {background-size: 1020px;height: auto; padding-top: 50px}
	.masthead::before {width: 42px; height: 180px; margin-left: -21px}
	.masthead h1 {font-size: 1.5rem;padding-right: 10%}
	.masthead blockquote {width: 100%; margin-bottom: 10px;font-size: 14px; padding: 5px 10px}
	.masthead blockquote .h2 {font-size:1.5rem}
	.masthead blockquote .lead {font-size: 16px}
}

.fullscreen-bg__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    height: 300%;
    top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: 300%;
    left: -100%;
  }
}

@media (max-width: 767px) {
  .fullscreen-bg__video {
    display: none;
  }
}
/* ==========================================================================
Sections
========================================================================== */

.top-bar {background-color: #c50202}

.cta-bar {background-color: #990000}
	
@media only screen and (max-width: 991px) {
	.top-bar small {line-height: 12px}
}
@media only screen and (max-width: 575px) {
	.top-bar small {margin-top: -3px; font-size: 10px}
}

#section2 {
	background-image: url('../img/bg-tile.jpg');
	background-repeat: repeat;
}

#section3 {
	background-image: url('../img/bg-section3.jpg');
	background-position: top center;
}

#section4 {background-color: #171a28}

#section5 {
	background-image: url('../img/bg-section5.png');
	background-position: top center;
}

/* ==========================================================================
Components
========================================================================== */

.chart-container {
	position: relative;
}

.chart-overall {
	background-image: url('../img/bg-chart.png');
	width: 100%; height: 583px;
	position: relative;
}
	.chart-overall .stat {position: absolute; width: 330px; z-index: 20}
		.chart-overall .stat .display-3 {float: left; margin-right: 10px;}
		.chart-overall .stat:before {
			content: ''; position: absolute;
			background-size: cover;
		}
	.chart-overall .stat.p1 {top: 50px; right: 0}
		.chart-overall .stat.p1 .display-3 {margin-top: -16px}
		.chart-overall .stat.p1:before {
			top: -40px; right: 270px;
			width: 171px; height: 71px;
			background-image: url('../img/el-chart-1.png');
		}
	.chart-overall .stat.p2 {top: 430px; left: 0}
		.chart-overall .stat.p2 .display-3 {margin-top: -28px}
		.chart-overall .stat.p2:before {
			top: -90px; left: 0;
			width: 475px; height: 92px;
			background-image: url('../img/el-chart-2.png');
		}
		
.chart-overall .h5 {font-size: 1.25em}
.chart-overall .display-3 {font-size: 4.5em}

.chart-label {position: relative; margin: 0}
.chart-label .label {
	width: 110px;
	text-align: center;
	position: absolute; top: -110px; left: 50%; margin-left: -55px;
	font-weight: bold;
}
.chart-overall .el {position: absolute; top: 50%; left: 50%; z-index: 10}

.chart-overall .el-1 {
	margin-top: -253px; margin-left: -264px;
	width: 493px; height: 469px;
	background-image: url('../img/bg-chart-el-1.png')
}

.chart-overall .el-2 {
	margin-top: -156px; margin-left: -184px;
	width: 289px; height: 286px;
	background-image: url('../img/bg-chart-el-2.png')
}

@media only screen and (max-width: 991px) {
	.chart-overall {height: 410px; font-size: 12px}
	.chart-overall .stat {width: 220px}
		.chart-overall .stat.p1 {top: 0;}
		.chart-overall .stat.p1 .display-3 {margin-top: -4px}
		.chart-overall .stat.p1:before {width: 85px; height: 35px; right: 200px; top: -20px}
	
		.chart-overall .stat.p2 {top: 290px}
		.chart-overall .stat.p2 .display-3 {margin-top: 4px}
		.chart-overall .stat.p2:before {width: 237px; height: 46px; top: -50px}
	.chart-overall .display-3 {font-size: 2.5em}
}
@media only screen and (max-width: 767px) {
	.chart-overall {height: 310px}
		.chart-overall .stat.p1 {top: 20px; right: -50px}
		.chart-overall .stat.p2 {top: 210px}
		
	.chart-overall .el-1 {
		margin-top: -133px; margin-left: -124px;
		width: 246px; height: 234px;
	}
	.chart-overall .el-2 {
		margin-top: -93px; margin-left: -84px;
		width: 144px; height: 143px;
	}
}
@media only screen and (max-width: 575px) {
	.chart-overall {height: 200px;font-size: 8px;}
	.chart-overall .stat {width: 140px}
	.chart-overall .stat.p1 {right: 50%;margin-right:-160px}
		.chart-overall .stat.p1:before {right: 90px}
	.chart-overall .stat.p2 {top: 130px;left:50%;margin-left:-160px}
		.chart-overall .stat.p2:before {width: 137px;height: 35px;top: -30px;}
	.chart-overall .el-1 {
		margin-top: -73px; margin-left: -84px;
		width: 162px; height: 154px;
	}
	.chart-overall .el-2 {
		margin-top: -48px; margin-left: -58px;
		width: 95px; height: 94px;
	}
}

.carousel-testimonials .carousel-item blockquote p {
	line-height: 60px;
}
.carousel-testimonials .carousel-item .blockquote-footer::before {display: none}


.carousel-indicators.cirle li {
	width: 12px; height: 12px;
	border-radius: 50%;
}

.list-comm-tech {font-size: 16px}

.list-comm-tech .lead {font-size: 1.25em}

.list-comm-tech li {
	position: relative;
	padding-left: 140px;
	min-height: 130px;
}
.list-comm-tech li:before {
	content: '';
	position: absolute; top: 0; left: 0; z-index: 1;
	width: 110px; height: 120px;
	-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	background-color: #383a44;
}
.list-comm-tech li:after {
	content: '';
	position: absolute; top: 10px; left: 10px; z-index: 2;
	width: 90px; height: 100px;
	-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	background-color: #2b2d37;
}
.list-comm-tech li p {position: relative}
.list-comm-tech li p:before {
	content: '';
	position: absolute; z-index: 3;
	background-size: cover;
	background-repeat: no-repeat;
}
	.list-comm-tech li.p1 p:before {
		width: 50px; height: 52px; 
		background-image: url('../img/icon-like.png');
		top: 3px; left: -107px;
	}
	.list-comm-tech li.p2 p:before {
		width: 57px; height: 64px; 
		background-image: url('../img/icon-connections.png');
		top: 0; left: -112px;
	}
	.list-comm-tech li.p3 p:before {
		width: 46px; height: 61px; 
		background-image: url('../img/icon-medal.png');
		top: 16px; left: -106px;
	}
	
@media only screen and (max-width: 1199px) {
	.list-comm-tech {font-size: 14px}
	.list-comm-tech li {padding-left: 110px;min-height: 110px;}
	.list-comm-tech li:before {width: 90px; height: 100px}
	.list-comm-tech li:after {width: 74px; height: 84px; top: 8px; left: 8px}
	.list-comm-tech li p {line-height: 20px}
		.list-comm-tech li.p1 p:before {
			width: 30px; height: 32px;
			top: 13px; left: -80px;
		}
		.list-comm-tech li.p2 p:before {
			width: 37px; height: 42px;
			top: 0; left: -82px;
		}
		.list-comm-tech li.p3 p:before {
			width: 30px; height: 40px;
			top: 13px; left: -80px;
		}
}

@media only screen and (max-width: 991px) {
	.list-comm-tech li.p1 p:before {top: 5px}
	.list-comm-tech li.p2 p:before {top: -9px}
	.list-comm-tech li.p3 p:before {top: 2px}
}

@media only screen and (max-width: 575px) {
	.list-comm-tech li.p2 p::before {top: 1px}
}
.component-enablers .nav-pills .nav-item {margin-left: 1px}
	.component-enablers .nav-pills .nav-item:first-child {margin-left: 0}
.component-enablers .nav-pills .nav-link {
	background-color: #190d10;
	height: 150px;
	color: #fff;
	line-height: 16px;
}

.component-enablers .nav-pills .nav-link.active, 
.component-enablers .nav-pills .show > .nav-link {
	background-color: #383536;
	position: relative; z-index: 1;
}
.component-enablers .nav-pills .nav-link.active {
	box-shadow: 0 0 25px rgba(255,255,255,0.6)
}
.component-enablers .nav-pills .nav-link .svg {
	width: 56px; height: 56px; display: block; 
	margin: 0 auto 10px;}
.component-enablers .nav-pills .nav-link.active .svg path,
.component-enablers .nav-pills .nav-link:hover .svg path {
    fill: red;
}

.component-enablers .tab-content {}
.component-enablers .card-header {background-color: #c50202; border-radius: 0;}
.component-enablers .card-header a {color: #fff}

.nav-pills {
    display:none;
}

@media(min-width:992px) {
    .nav-pills {
        display: flex;
    }
    
    .card {
        border: none;
    }

    .card .card-header {
        display:none;
    }  

    .card .collapse{
        display:block;
    }
}

@media(max-width:991px){
    .tab-pane {
        display: block !important;
        opacity: 1 !important;
    }
}

.card-bordered {
	position: relative;
}
.card-bordered:before,
.card-bordered:after,
.card-bordered > div:before,
.card-bordered > div:after {
	content: ''; position: absolute; top: -13px;
}
	.card-bordered:before {
		left: -13px;
		width: 115px; height: 129px;
		background-image: url('../img/el-btl.png');
	}
	.card-bordered:after {
		right: -13px;
		width: 146px; height: 84px;
		background-image: url('../img/el-btr.png');
	}
	.card-bordered > div:before {
		left: -13px; bottom: -13px; top: auto;
		width: 115px; height: 71px;
		background-image: url('../img/el-bbl.png');
	}
	.card-bordered > div:after {
		right: -13px; bottom: -13px; top: auto;
		width: 157px; height:108px;
		background-image: url('../img/el-bbr.png');
	}

/* ==========================================================================
Helper Classes
========================================================================== */

.w-40em {max-width: 40em}
.w-50em {max-width: 50em}
.w-60em {max-width: 60em}

.img-bg-cover {
	background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.no-underline:hover {text-decoration: none}

.title-custom {
	position: relative;
	display: inline-block;
	padding: 15px 55px 15px 15px;
	background-color: rgba(255,255,255,0.5);
	-webkit-clip-path: polygon(0 0, 80% 0%, 100% 100%, 0% 100%);
	clip-path: polygon(0 0, 80% 0%, 100% 100%, 0% 100%);
}

.title-custom2 {
	position: relative;
	display: inline-block;
	background-color: transparent;
	padding: 15px 55px 15px 15px;
	border: solid 1px #ccc ;
	-webkit-clip-path: polygon(0 0, 80% 0%, 100% 100%, 0% 100%);
	clip-path: polygon(0 0, 80% 0%, 100% 100%, 0% 100%);
}
.title-custom2:before {
	content: '';
	position: absolute; top: 0; right: -28px;
	width: 151px; height: 1px;
	background-color: #fff;
	-webkit-transform: rotate(49deg);
	transform: rotate(49deg);
}


/* ==========================================================================
Animations
========================================================================== */

.transition{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}