/* ====================================
	
	Global Styles
	
==================================== */

h1 {
	font-family:'rokkitt',helvetica, arial, sans-serif !important;
	font-weight:700;
    letter-spacing:2px;
	
}

h2,h3,h4,h5,h6,p,li,a {
	font-family:'proxima-nova',helvetica,arial, sans-serif !important;	
}

h2,h3,h4,h5,h6 {
	line-height: 130%;
}

.bold {
	font-weight: 600;
}

a:hover,
a:focus,
a:focus:hover {
	text-decoration:none;
}

input:focus {
	outline:none;
}

.center {
	text-align: center;
}

.right {
	text-align:right;
}

.white {
	color:#fff;
}

.circle {
	border-radius:5000px;
}

.hide {
	display:none !important;
}

a.btn-orange,
a.btn-orang {
    border:none;
    border-radius:50px;
    background:#ef7622;
    color:#fff;
    font-size:16px;
    padding:15px 35px;
    line-height:1;
}

a.btn-orange:hover, 
a.btn-orang:hover,
a.btn-orange:focus, 
a.btn-orang:focus {
    border: none;
    border-radius: 50px;
    background: #fff;
    color: #ef7622;
    font-size: 16px;
    padding: 15px 35px;
    line-height: 1;
}

.white {
    color:#fff;
}

.center img {
    margin:0 auto;
}


.embed-container { 
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%; 	
} 

.embed-container iframe, 
.embed-container object, 
.embed-container embed { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
}

/* ====================================
	
	Page Styles
	
==================================== */




#header-section  {
    background:#fff;
}

#header-section img {
    max-width:100px;
    margin:10px 0;
}

#hero-banner-section {
/*
    background:transparent url(/img/hero-bkg.png) center center no-repeat;
    background-size:cover;
*/
    padding:10em 0;
}

#hero-banner-section h1 span {
    background: #6ec4e9;
    float: left;
    clear: both;
    margin: 9px 0;
    font-weight: 700;
    font-size: 75px;
    line-height: .75;
}

#hero-banner-section h3 {
    clear:both;
    padding-top:20px;
    padding-bottom:20px;
    font-size:20px;
    max-width:370px;
    font-weight:300;
    line-height:1.4;
}

#hero-banner-section a.btn-play {
    background:rgba(239,118,34,1) url(/img/play-icon.png) center left 8px no-repeat;
    background-size:29px;
    border:none;
    border-radius:400px;
    padding:12px 20px 12px 48px;
    color:#fff;
    font-weight:200;
    font-size:15px;

}

#intro-section {
    padding:60px 0 0 0;
}

#intro-section h2 {
    font-weight:200;
    font-size:40px;
}

#intro-section .col-md-4 .img-responsive {
    max-height:60px;
    margin-top:30px;
}

#intro-section .col-md-4 h2 {
    font-weight:700;
    font-size:30px;
    line-height:30px;
}

#intro-section .col-md-4 h2 span {
    display:block;
    font-weight:200;
    color:rgba(0,0,0,.5);
    font-size:14px;
    line-height: 120%;
}

#intro-section img.badge-image {
    max-width:210px;
    margin-top:40px;
    margin-bottom:-100px;
    padding:15px;
    background:#fff;
    border-radius:500px;

}

#data-section {
    background:#307aae;
    padding-top:110px;
}

#data-section h2 {
    font-weight:200;
    font-size:40px;  
    padding: 0 30px;  
}

#data-section h4 {
    font-weight:200;
    line-height:40px;
}

#data-section .well {
    margin-top:30px;
    margin-bottom:90px;
    border-radius:15px;
    background:#fff;
    padding:0;
    overflow:hidden;
}

#data-section .well .data-top {
    padding:70px 60px;
}

#data-section .well .data-top .data-outputs .output-wrapper {
    text-align:center;
    margin:30px 20px;
}

#data-section .well .data-top .data-outputs .output-wrapper .data-output {
    float:left;
    width:13.6666667%;
    margin:0 1.5%;
    border:1px solid #c5c5c5;
    border-radius:6px;
}

#data-section .well .data-top .data-outputs .output-wrapper .data-output.blue .data-bottom {
    background:#6ec4e9;
}

#data-section .well .data-top .data-outputs .output-wrapper .data-output.purple .data-bottom {
    background:#cb43b5;
}

#data-section .well .data-top .data-outputs .output-wrapper .data-output h3.center {
    color:rgba(0,0,0,.65);
    font-size:28px;
    font-weight:600;
    margin-bottom:20px;

}

#data-section .well .data-top .data-outputs .output-wrapper .data-output h3 span.subtext {
    display:block;
    font-weight:200;
    font-size:14px;
    color:#cb43b5;
    position:absolute;
    margin-left:45px;
}

#data-section .well .data-top .data-outputs .output-wrapper .data-output img {
    margin:0 auto;
    max-height:40px;
    padding:7px;
    background:#fff;
    border-radius:500px;
    margin-bottom:0px;
}

#data-section .well .data-top .data-outputs .output-wrapper .data-output .data-bottom {
    padding-top:1px;
    border-radius:0 0 6px 6px;
    margin:-1px !important;
}

#data-section .well .data-top .data-outputs .output-wrapper .data-output .data-bottom h4 {
    padding:10px 0 0 0;
    line-height:20px;
    margin-bottom:2px;
}

#data-section .well .data-top .data-outputs .output-wrapper .data-output .data-bottom h5 {
    padding:0;
    line-height:1;
    margin:0;
    font-weight:200;
    font-size:13px;
    padding-bottom:15px;
}

.data-brackets {
    margin-top:30px;
}

.data-brackets .left-backet {
    border-bottom:2px solid #e5e5e5;
    border-left:2px solid #e5e5e5;
    padding:30px 0 0 0;
}

.data-brackets .right-backet {
    border-bottom:2px solid #e5e5e5;
    border-right:2px solid #e5e5e5;
    padding:30px 0 0 0;    
}

.data-brackets .aggragate-info {
    list-style-type:none;
    padding:0;
    margin:0;
    text-align:center;
}

.data-brackets .aggragate-info li {
    font-weight:600;
    font-size:23px;
    color:rgba(0,0,0,.7);
    text-align:left !Important;
    padding:0 10px 0 40px;
    margin:9px 5px 0 5px;
    display:inline-block;
    line-height:1;
}

.data-brackets .aggragate-info li span.subtext {
    display:block;
    font-weight:200;
    font-size:13px;
} 

.data-brackets .aggragate-info li.organizations{
    background:transparent url(/img/organizations-icon.png) center left no-repeat;
    background-size:35px;
}

.data-brackets .aggragate-info li.people{
    background:transparent url(/img/badge-icon.png) center left 7px no-repeat;
    background-size:22px;

}


.data-bottom-section {
    border-top:1px solid #d5d5d5;
    background:#e5e5e5;
}

.data-bottom-section .data-aggragates {
    padding:40px 0;
}

.data-bottom-section .data-aggragates h2 {
    font-weight:200 !important;
    font-size:30px !important;
}

.data-bottom-section .data-aggragates .benchmark-list {
    list-style-type:none;
    padding:none;
    text-align:center;
}

.data-bottom-section .data-aggragates .benchmark-list li {
    display:inline-block;
    margin:10px 40px;
    color:rgba(0,0,0,.45);
    line-height:1.1;
    font-weight:600;
    vertical-align:top;
    padding:0 !important;
}

.data-bottom-section .data-aggragates .benchmark-list li img {
    max-height:50px;
    margin:10px auto;
}

#tabbed-section {
    padding-top:30px;
}

#tabbed-section h2.center {
    font-weight:200;
    padding-bottom:40px;
    color:#444;
}

#tabbed-section .nav-justified {
    text-align:center;
}

#tabbed-section .nav-justified li {
    font-size:20px;
    font-weight:300;
    background:rgba(0,0,0,.05);
    border-radius:3px 4px 0 0 ;
    display:inline-block;
    width:32%;
}

#tabbed-section .nav-justified li a {
    line-height:2.7;
    background:#f6f9f7 !important;
    border:none !important;
    color: #7ba9ca;
}

#tabbed-section li img {
    opacity: .5;
}

#tabbed-section .nav-justified li.active a {
    background:#EBF0EC !important;
    border:none;
    color: #1B6DAC;
}

#tabbed-section .nav-justified img {
    max-height:35px;
}

#tabbed-section li.active img {
    opacity: 1;
}

#tabbed-section .tab-content {
    background:#ebf0ec;
}

#tabbed-section .tab-content #hr-exec {
    padding:100px 0 180px;
    background-color:transparent;
    background-image:url(/img/footer-overlay.png),url(/img/bg-persona-hr.jpg);
    background-size:1500px, cover;
    background-position:bottom -160px center, center right;
    background-repeat:repeat-x, no-repeat;
}

#tabbed-section .tab-content #finance-exec {
    padding:100px 0 180px;
    background-color:transparent;
    background-image:url(/img/footer-overlay.png),url(/img/bg-persona-finance.jpg);
    background-size:1500px, cover;
    background-position:bottom -160px center, center right;
    background-repeat:repeat-x, no-repeat;    
}

#tabbed-section .tab-content #comp-exec {
    padding:100px 0 180px;
    background-color:transparent;
    background-image:url(/img/footer-overlay.png),url(/img/bg-persona-compensation.jpg);
    background-size:1200px, cover;
    background-position:bottom -120px center, center right;
    background-repeat:repeat-x, no-repeat;    
}

#tabbed-section .tab-content h3 {
    font-size:28px;
    font-weight:300;
    padding-bottom:10px;
    color: #444;
    line-height: 130%;
}

#tabbed-section .tab-content p {
    line-height:1.5;
    font-size:16px;
    margin-bottom:20px;
    color: #707371;
}

#footer-section {
    background:#4d4d4d;
    padding:30px;
    text-align:center;
}

#footer-section p {
    font-size: 12px;
    color: #bfbfbf;
}

#footer-section h4 {
    font-size:22px;
    font-weight:200;
}

#footer-section a {
    font-weight: 600;
}

#footer-section .footer-list {
    list-style-type:none;
    padding:0;
    margin-top:40px;
}

#footer-section .footer-list li {
    display:inline;
    margin:0 5px;
}

#footer-section .footer-list li a {
    font-weight:500;
    color:#fff;
    padding:5px 0 5px 40px;
}

#footer-section .footer-list li.case-study a {
    background:transparent url(/img/case-study-icon.png) center left 10px no-repeat;
    background-size:22px;
}

#footer-section .footer-list li.whitepaper a {
    background:transparent url(/img/whitepaper-icon.png) center left 14px no-repeat;
    background-size:16px;    
}

#footer-section .footer-list li.blog a {
    background:transparent url(/img/blog-icon.png) center left 12px no-repeat;
    background-size:20px;    
}

#footer-section .footer-list li.product-details a {
    background:transparent url(/img/product-details-icon.png) center left 12px no-repeat;
    background-size:20px;    
}

#footer-section img {
    margin:0 auto;
    max-width:100px;
    padding-right: 20px;
    padding-bottom: 20px;
/*     margin-top:50px; */
}

#footer-section p {
	color: #999;
	text-align: left;
}

#footer-section a {
	color: #FFF;
}

#data-dropdowns {
    text-align:center;
}

#data-dropdowns .btn-group {
    margin:0 15px;
}

#data-dropdowns .btn-group button {
    border:none;
    font-weight:500;
    width:280px !Important;
    text-align:left !important;
    padding-left:45px;
    padding-right:20px;
}


#data-dropdowns .btn-group button.job-toggle {
    background-image:url(/img/icon-headphones.png),url(/img/caret-icon.png);
    background-repeat:no-repeat;
    background-position: top 5px left, top 15px right ;
    background-size:35px,15px;
}

#data-dropdowns .btn-group button.state-toggle {
    background-image:url(/img/icon-us.png),url(/img/caret-icon.png);
    background-repeat:no-repeat;
    background-position: top 7px left, top 15px right ;
    background-size:40px,15px;
}

#data-dropdowns .btn-group button.industry-toggle {
    background-image:url(/img/icon-briefcase.png),url(/img/caret-icon.png);
    background-repeat:no-repeat;
    background-position: top 5px left, top 15px right ;
    background-size:35px,15px;
}

#data-dropdowns .btn-group button span {
    display:block;
    border-top:1px solid #000;
    margin-top:5px;
    padding-top:5px;
    color:rgba(0,0,0,.5);
    font-weight:400;
    font-size:13px;

}

#data-dropdowns .btn-group button:hover,
#data-dropdowns .btn-group button:focus,
#data-dropdowns .btn-group button.active,
.btn-group.open .dropdown-toggle {
    background-color:transparent;
    box-shadow:none !important;
}

.dropdown-menu {
    z-index:500000;
    position: absolute;
    top: 0;
    left: 40px;
    min-width: 245px;
    border-radius:0;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 0;
    background: #f2f2f2;
}

.dropdown-menu li {
	cursor: pointer;
	cursor: hand;
	margin: 1px 0;
    padding: 5px 10px;
    background: #FFF;
}

.dropdown-menu li a:focus {
	background: #bad5da;
}

.data-overlay-block {
    position:absolute;
    z-index:5;
    width:1100px;
    left:50%;
    margin-left:-550px;
    margin-top:90px;
    padding:50px 0 150px 0;
    background:rgba(255,255,255,.9);
}

.data-overlay-block h3.orange {
    color:#ef7622;
    font-weight:200;
    font-size:28px;
    padding: 0 30px;
}

@media (min-width: 768px) {
    #videoModalSizzle .modal-dialog, #videoModalProductDetails .modal-dialog {
        width: 70%;
        margin: 50px auto;
    }
}

.modal-content {
    border-radius:0;
}

.modal-body {
    padding:0 15px;
}


.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline:none !important;
}

button.close {
    position:absolute;
    z-index:50000;
    right:0;
    line-height:.5;
    opacity:.8;
    text-shadow:none;
    background:#000 !important;
    padding:3px 5px 8px 4px;
    border-radius:15px;
    border:3px solid #fff;
    color:#fff;
    box-shadow:0 0 5px rgba(0,0,0,1);
    margin:-9px;
    font-weight:400;
}

button.close:hover {
    opacity:1;
    color:#fff;
}

#formModal .modal-dialog {
    max-width:500px;
}

#formModal .modal-content {
    background: #fff url(/img/confetti-popup.png) bottom -40px center no-repeat;
    background-size: 500px;
    padding-bottom: 50px;
}

.modal h2 {
    font-weight:200;
    color:#444;
    margin:0;
    padding:50px 0 0 0;
}

.modal form {
    max-width:350px;
    margin:20px auto 50px auto;
}


form input {
    display:block;
    width:100%;
    margin:8px 0;
    border-radius:3px;
    border:1px solid #c5c5c5;
    padding:3px 10px;
}

form input[type="submit"] {
    border-radius:500px;
    margin:20px auto 0 auto;
    max-width:210px;
    padding:12px;
    background:#ef7622;
    color:#fff;
    border:none;
    font-size:15px;
}

#formModal p {
    padding:0 15px;
    margin-top:20px;
    color:#707070;
    font-weight:300;
    font-size:13px;
}

#thanks-page #hero-banner-section {
    text-align:center !important;
}

#thanks-page #hero-banner-section h1 span {
    background: #6ec4e9;
    float: none;
    display:inline-block;
    padding:0:
    font-weight: 700;
    font-size: 70px;
    line-height: .75;
}

#thanks-page #hero-banner-section h3 {
    clear: both;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 20px;
    max-width: 500px;
    font-weight: 300;
    line-height: 1.4;
    margin:0 auto;
}

#thanks-page #intro-section {
    padding:60px 0;
}

#mep_0 {
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vw;   
	z-index:50000;
}

.mejs-mediaelement {
    overflow:hidden !important;
}

.mejs-mediaelement iframe {
    width:130vw;
    margin-top:-15vh;
    margin-left:-15vw;
    height:130vh;
}

#bigVideoClose {
    position:fixed;
    z-index:1000000;
    top:30px;
    right:30px;
}

/* ====================================
	
	Mobile Styles
	
==================================== */


@media screen and (max-width:1199px) {
    #data-dropdowns .btn-group button {
        width: 250px !Important;
    }

    .data-overlay-block {
        position: absolute;
        z-index: 5000;
        width: 900px;
        left: 50%;
        margin-left: -450px;
        margin-top: 90px;
        padding: 50px 0 150px 0;
        background: rgba(255,255,255,.9);
    }


    #data-section .well .data-top .data-outputs .output-wrapper {
        text-align: center;
        margin: 30px 0;
    }

    #data-section .well .data-top .data-outputs .output-wrapper .data-output {
        width: 15.6666666667%;
        margin: 0 .5%;
    }    

    .data-brackets .col-sm-4.left-backet,
    .data-brackets .col-sm-4.right-backet{
        width:25% !important;
    }

    .data-brackets .col-sm-4 {
        width:50%;
    }

}


@media screen and (max-width:991px) {
	
	#hero-banner-section {
	    padding: 6em 0;
	}	

    #intro-section .col-md-4.col-xs-12 {
        width:33.333% !important;
    }

    #data-dropdowns .btn-group button {
        width: 180px !Important;
    }

    #data-section .well .data-top .data-outputs .output-wrapper {

    }

    #data-section .well .data-top .data-outputs .output-wrapper .data-output {
        width: 21%;
        margin: 10px 1.5%;
        float:none;
        display:inline-block;
    }    

    .nav-justified a {
        font-size:14px;
        font-weight:400;
    }

    #tabbed-section .tab-content .tab-pane {
        background-position: bottom -160px center, center right 40% !important;    
    }
    
	.data-overlay-block {
	    width: 750px;
	    margin-left: -375px;
	    padding: 100px 0 360px 0;
	}    

}


@media screen and (max-width:767px) {

    h2 {
        font-size:28px !important;
    }

    #header-section img {
        max-width: 100px;
        margin: 10px 15px;
    }

    #hero-banner-section {
        padding:2em 0;
    }

    #hero-banner-section h1 span {
        display:block;
        text-align:center !Important;
        float:middle;
        font-size:47px !important;
    }

    #intro-section img.badge-image {
        max-width: 150px;
        margin-top: 10px;
        margin-bottom: -80px;
        padding: 8px;
        background: #fff;
        border-radius: 500px;
    }

    #data-section {
        padding-top:70px;
    }

    #data-section h4 {
        font-weight: 200;
        line-height: 1.3;
        padding:10px 5%;
    }

    #data-section .well {
        margin: 30px 15px 90px 15px;
        border-radius: 15px;
        background: #fff;
        padding: 0;
        overflow: hidden;
    }

    #data-section .well .data-top {
        padding: 20px 30px;
    }

    #data-section .well .data-top .btn-group {
        width:92%;
    }

    #data-dropdowns .btn-group button {
        width: 100% !Important;
    }

    #data-section .well .data-top .data-outputs .output-wrapper .data-output {
        width:100%;
        margin:2px 0;
    }

    #data-section .well .data-top .data-outputs .output-wrapper .data-output.purple:last-child h3 {
        margin: 11px 15px;    
    }

    #data-section .well .data-top .data-outputs .output-wrapper .data-bottom {
        float:left;
        width:58%;
        border-radius:6px 0 0 6px !important;
    }

    #data-section .well .data-top .data-outputs .output-wrapper .data-output h3.center {
        font-size:18px;
        text-align:right;
        margin: 18px 15px;
        float:right;
    }

    #data-section .well .data-top .data-outputs .output-wrapper .data-output h3 span.subtext {
        margin-left:-1px;
    }

    #data-section .well .data-top .data-outputs .output-wrapper .data-output img {
        position:absolute;
        width:40px;
        height:40px;
        padding:6px;
        margin:10px 8px;
    }

    #data-section .well .data-top .data-outputs .output-wrapper .data-output .data-bottom h4 {
        padding:2px 0 0 0;
        line-height:18px;
        text-align:left;
        padding-left:55px;    
    }

    #data-section .well .data-top .data-outputs .output-wrapper .data-output .data-bottom h5 {
        text-align:left;
        padding-left:55px;
    }


    .data-brackets {
        margin:0 -15px 50px -15px !important;
    }
    
    .data-brackets .col-sm-4.left-backet,
    .data-brackets .col-sm-4.right-backet{
        display:none !important;
    }

    .data-brackets .col-sm-4 {
        width:100%;
    }


    .data-bottom-section .data-aggragates h2 {
        font-size:25px !important;
        color:#505050;
        margin-top:0;
    }

    ul.benchmark-list {
        padding:0;
    }

    .nav-justified li:first-child a,
    .nav-justified li:nth-child(2) a,
    .nav-justified li:last-child a {
        font-size:0px !important;
    }

    .nav-justified li:first-child a:after {
        content:"HR";
        font-size:13px !important;
        display:block;
        padding:0;
        line-height:1;
        color:#307AAE;
    }

    .nav-justified li:nth-child(2) a:after {
        content:"Finance";
        font-size:13px !important;
        display:block;
        padding:0;
        line-height:1;
        color:#307AAE;
    }

    .nav-justified li:last-child a:after {
        content:"Compensation";
        font-size:13px !important;
        display:block;
        padding:0;
        line-height:1;
        color:#307AAE;
    }

    #tabbed-section .tab-content .tab-pane {
        background-position: bottom -100px center, center right 70% !important;
        background-size:1000px, 1500px !important;
        text-align:center !important;
        padding:2em 0 5em 0 !Important;
    }

    #footer-section .footer-list li {
        line-height: 3;
    }

	.data-overlay-block {
	    width: 90%;
	    margin-left: -45%;
	    margin-top:210px;
	    padding: 100px 0 360px 0;
	}
	
	#tabbed-section .tab-content h3 {
	    font-size:22px;
	    padding: 0 30px;
	}
	
	#tabbed-section .tab-content p {
	    padding: 0 30px;
	}

}