/*Google fonts embed*/
@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

/*Set up CSS variables*/
:root {
    --primary-color: #0A3255;
    --primary-color-dark-variant: #062139;
    --primary-color-light-variant: #165083;
    --secondary-color: #F2723A;
    --secondary-color-dark-variant: #D05723;
    --secondary-color-light-variant: #F29065;
    --surface-color: #FFFFFF;
    --surface-color-variant: #DDDDDD;
    --on-surface-color: #696969;
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Karla', sans-serif;
    --font-lt: 100;
    --font-reg: 300;
    --font-semi-bold: 500;
    --font-bold: 600;
    --font-extra-bold: 700;
    --font-xl: 6.5rem;
    --font-lg: 3.6rem;
    --font-md: 2rem;
    --font-sm: 1.6rem;
    --font-xs: 1.4rem;
    --font-xxs: 1.2rem;
    --border-default: .5px solid #ddd;
    --shadow-elavation-one: 1px 1rem 1rem rgba(0,0,0,0.05);
    --shadow-elavation-two: 1px 1rem 5rem rgba(0,0,0,0.15);
}

html, body {
  height: 100%;
  width: 100%;
  position: relative;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-family: var(--font-primary);
  color: #696969;
  color: var(--on-surface-color);
  overflow-x: hidden;
}

.wrapper {
  min-height: 100%;
  margin-bottom: -100px; /*this is to support the sticky footer*/
  position: relative;
}

.desktop-only{
    display:none;
}


/*skipNav styling*/

.skip-to-content-link {
    left: 50%;
    position: absolute;
    transform: translateY(-100%);
    opacity: 0;
    border-radius: 0;
    border: 2px solid #F2723A;
}

.skip-to-content-link {
    background: #fff;
    left: 0.25rem;
    padding: 1rem;
    position: absolute;
    transform: translateY(-100%);
    transition: transform 0.3s;
}

.skip-to-content-link:focus {
    transform: translateY(.25rem);
    opacity: 1;
    outline: none;
}


/*Nav styling starts here*/

.navbar{
	margin-bottom: 0;
	z-index: 9999999;
}



.navbar-brand{
	padding: 5px 15px;
}

.navbar-inverse{
	background-color: rgba(255,255,255,0.95);
	border-color: transparent;
	top: 0;
	width: 100%;
	border-radius: 0;
}

.navbar-open {
    position: fixed;
    overflow-y: scroll;
    width: 100%;
    background-color: rgba(255,255,255,0.95);
    height: 100vh;
}

.nav > li > a {
    padding-left: .75rem;
    padding-right: .75rem;
}

/*mobile*/
.navbar-inverse .navbar-toggle,
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus{
	border:none;
	background-color: transparent;

}

.navbar-inverse .navbar-toggle .icon-bar{
    background-color: #0A3255; /*fallback*/
	background-color: var(--primary-color);
}

.navbar-toggle .icon-bar{
	width: 25px;
}

.navbar-toggle .icon-bar+.icon-bar{
	margin-top: 5px;
}

.navbar-collapse{
	border-top: none;
}

.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #0A3255; /*fallback*/
    color: var(--primary-color);
    font-weight: 600; /*fallback*/
    font-weight: var(--font-bold);
}

.navbar-inverse .navbar-nav>.active>a, 
.navbar-inverse .navbar-nav>.active>a:focus, 
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>li>a:focus,
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>.open>a, 
.navbar-inverse .navbar-nav>.open>a:focus, 
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus,
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover{
	background-color: transparent;
    color: #F2723A;
	color: var(--secondary-color);
}

.navbar-btn{
	margin-left: 1rem;
    margin-right: 0;
}

.navbar-btn.btn-sm{
    margin-bottom: 4rem;
}
.caret{
	margin-left: 5px;
}

.navbar-collapse .dropdown-menu .caret{
	display: none;
}

/*custom dropdown styling */
.sub-dropdown{
	list-style-type: none;
	margin-bottom: 1rem;
}


.sub-dropdown a{
    color: #0A3255;
	color: var(--primary-color);
}

.sub-dropdown a:focus,
.sub-dropdown a:hover{
	text-decoration: none;
    color: #F2723A;
	color: var(--secondary-color);
}


/*button styling starts here*/
.btn {
    border-radius: 0px;
    font-size: 1.2rem; /*fallback*/
    font-size: var(--font-xxs);
    font-weight: 600; /*fallback*/
    font-weight: var(--font-bold);
    color: #F2723A;
    color: var(--secondary-color);
    border: 2px solid;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.btn-lg {
    font-size: 1.2rem; /*fallback*/
    font-size: var(--font-xxs);
    padding: 1.5rem 3rem;
    min-width: 175px;
}

.btn-primary {
    background-color: transparent;
    border-color: #F2723A;
    border-color: var(--secondary-color);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{
    background-color: #F2723A !important;
	background-color: var(--secondary-color) !important;
    border-color: #F2723A !important;
	border-color: var(--secondary-color) !important;
}


.btn-info {
    background-color: #F2723A;
    background-color: var(--secondary-color);
    border-color: #F2723A;
    border-color: var(--secondary-color);
    color: #fff;
    color: var(--surface-color);
    letter-spacing: 1px;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active{
    background-color: #D05723 !important;
	background-color: var(--secondary-color-dark-variant) !important;
    border-color: #D05723 !important;
	border-color: var(--secondary-color-dark-variant) !important;
}

.btn-elevate {
    box-shadow: 1px 1rem 1rem rgba(0,0,0,0.05); /*fallback*/
    box-shadow: var(--shadow-elavation-one);
}

.btn-elevate:hover,
.btn-elevate:focus,
.btn-elevate:active {
    box-shadow: 1px 1rem 5rem rgba(0,0,0,0.15); /*fallback*/
    box-shadow: var(--shadow-elavation-two);
    transform: translateY(-2rem);
	transition-duration: .5s;
}

.btn-sm{
    letter-spacing: 0;
    text-transform: none;
}



/*footer styling starts here*/

.footer,
.push {
  height: 100px;
}

.footer p{
    font-size: 1.2rem; /*fallback*/
    font-size: var(--font-xxs);
}

.footer{
    background-color: #ddd;
	background-color: var(--surface-color-variant);
	padding: 2rem 0;
	text-align: center;
    color: #0A3255;
	color: var(--primary-color);
}

.footer a{
    color:#0A3255;
	color: var(--primary-color);
}


.footer a:focus,
.footer a:hover{
    color: #F2723A;
	color: var(--secondary-color);
}

/*container styling starts here*/

.hero-full {
    background-color: #fff;
    background-color: var(--surface-color);
    color: #fff;
    color: var(--surface-color);
    position: relative;
    background-size: contain;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
}

.hero-half {
    height: 85vh;
    background-color: #0A3255;
    background-color: var(--primary-color);
    color: #fff;
    color: var(--surface-color);
    position: relative;
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
}

.scrim-half {
    position: absolute;
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    /* display: -webkit-flex; NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
    top: 0;
    left: 0;
    width: 100%;
    height: 85vh;
    background: rgba(0,0,0,.35);
    align-items: center;
    justify-content: center;
}

/*keyframe animation*/
@keyframes bannerResize {
    from {
        height: 85vh;
    }

    to {
        height: 50vh;
    }
}

@keyframes bannerResizeReverse {
    from {
        height: 50vh;
    }

    to {
        height: 85vh;
    }
}


.scrim-half>div{
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

.scrim-half .row > div {
    padding: 0;
}

.hero-full h1{
	position: absolute;
	top: 30%;
	width: 100vw;
	left: 0;
	z-index: 999;
    font-size: 6.5rem; /*fallback*/
	font-size: var(--font-xl);
    font-weight: 700; /*fallback*/
	font-weight: var(--font-extra-bold);
    letter-spacing: .2rem;
}

.hero-half h1 {
    font-size: var(--font-lg);
    font-weight: 700; /*fallback*/
    font-weight: var(--font-extra-bold);
    letter-spacing: .2rem;
    margin-bottom: 0;
    text-align: center;
    margin-top: 0;
}

.panel-custom{
	padding: 2rem 0;
}

.panel-fluid{
	min-height: 0;
	padding: 3rem 0;
}

.subservice-content{
	padding-bottom: 0;
}

.core-service-container .col-xs-12>p{
	margin-bottom: 4rem;
}


/*text styling starts here*/

h2 {
    color: #0A3255;
    color: var(--primary-color);
    font-weight: 700; /*fallback*/
    font-weight: var(--font-extra-bold);
    font-size: 3.6rem; /*fallback*/
    font-size: var(--font-lg);
    margin-bottom: 3rem;
    margin-top: 0;
    line-height: 1.2;
}

.text-danger{
    color:#D05723;
    color: var(--secondary-color-dark-variant);
}

h3,
.panel-title a,
.carousel h5 {
    color: #0A3255;
    color: var(--primary-color);
    font-weight: 600; /*fallback*/
    font-weight: var(--font-bold);
    font-size: 2rem; /*fallback*/
    font-size: var(--font-md);
    margin-bottom: 2rem;
    line-height: 1.4;
}

.carousel h3,
.core-service-container h3,
.modal h1 {
    text-transform: uppercase;
    font-size: 1.2rem; /*fallback*/
    font-size: var(--font-xxs);
    letter-spacing: .25rem;
    color: #696969;
    color: var(--on-surface-color);
    font-weight: 700; /*fallback*/
    font-weight: var(--font-extra-bold);
    margin-bottom: 3rem;
}

.core-service-container h3 {
    padding-bottom: 1rem;
    border-bottom: #ddd;
    border-bottom: 2px dotted var(--surface-color-variant);
}

.carousel h4{
	margin-bottom: 3rem;
	font-size: var(--font-xs);
	letter-spacing: .25rem;
    font-weight: 500; /*fallback*/
	font-weight: var(--font-semi-bold);
}

p {
    font-size: var(--font-xs);
    margin-bottom: 2rem;
    font-family: 'Karla', sans-serif;
    font-family: var(--font-secondary);
}


a {
    color: #0A3255; /*fallback*/
    color: var(--primary-color);
}

a:hover,
a:focus{
	text-decoration: none;
    color: #F2723A;
	color: var(--secondary-color);
    font-weight: 600; /*fallback*/
	font-weight: var(--font-bold);
}

.text-sm{
	font-size: var(--font-xs);
}

.text-lg{
	font-size: var(--font-sm);
	margin-bottom: 0rem;
	line-height: 1.4;
}

#contact .text-lg{
    margin-bottom: 2rem;
}

#about .text-lg,
#work .text-lg {
    margin-bottom: 4rem;
}

.heading-highlight {
    color: #F2723A;
    color: var(--secondary-color);
}

.hero-full .btn-scroll-container {
    position: absolute;
    bottom: 4rem;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    display: none;
}

/*accordion styling starts here*/

.accordion .panel-default{
	border: none;
}

.accordion p{
	margin-bottom: 1rem;
    font-size: var(--font-xs);
}

.accordion .panel{
	box-shadow: none;
}

.accordion .panel>div{
	margin-bottom: 2rem;
}



.accordion .panel>div:last-child{
	margin-bottom: 0rem;
}

.accordion .panel-heading,
.accordion .panel-body{
	padding: 0;
	margin-bottom: 2rem;
}

.accordion .panel-default>.panel-heading+.panel-collapse>.panel-body{
	border: none;
}

.accordion .panel-default>.panel-heading{
	background-color: transparent;
	border: none;
}

.accordion .panel-title{
	position: relative;
	width: 100%;
}

.accordion .panel-title .fas{
	position: absolute;
	right: 0;
    margin-top: 5px;
}

.panel-group .panel-heading+.panel-collapse>.panel-body{
	border:none;
}


/*contextual nav styling starts here*/
.nav-contextual {
    background-color: #0A3255;
    background-color: var(--primary-color);
}

.nav-contextual a{
    color: #fff;
	color: var(--surface-color);
	font-size: var(--font-xs);
    font-weight: 600; /*fallback*/
	font-weight: var(--font-bold);
}

.nav-contextual li .active,
.nav-contextual a:hover,
.nav-contextual a:focus{
    color: #F2723A;
	color: var(--secondary-color);
}

.nav-contextual li{
	padding: 1rem;
	position: relative;
}

.nav-contextual ul{
	margin-bottom: 0;
}

.pointer {
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 12px solid #0A3255; /*fallback*/
    border-top: 12px solid var(--primary-color);
    position: absolute;
    bottom: -12px;
    left: 5%;
    display: none;
}

.breadcrumb .pointer{
    left: 25px;
}

.pointer.active{
	display: inline-block;
}

/*breadcrumb styling starts here*/
.breadcrumb{
	padding: 0;
	border-radius: 0;
	background-color: transparent;
}

.breadcrumb li{
	padding-right: 0;
	padding-left: 0;
}

ul.breadcrumb li+li:before {
  padding: 8px;
  color: #fff;
  color: var(--surface-color);
  content: ">";
}

/*card styling starts here*/

.card {
    text-align: center;
    box-shadow: 1px 1rem 1rem rgba(0,0,0,0.05); /*fallback*/
    box-shadow: var(--shadow-elavation-one);
    position: relative;
    padding-bottom: 2rem;
    margin-bottom: 1.5rem;
}

.card-img-wrapper{
	background-size: cover;
	height: 15rem;
}

#work .card-img-wrapper {
    height: auto;
    padding: 0;

}


/*carousel styling starts here*/
.subservice-carousel{
	margin-top: 4rem;
    min-height:700px;
}

.modal-carousel{
    min-height:0;
}

.carousel{
	background-color: rgba(0,0,0,0.05);
	padding: 2rem 0 8rem;
}

.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next, .carousel-control .icon-prev{
    bottom: 2rem;
    top: auto;
}

.carousel-control.left,
.carousel-control.right {
    background-image: none;
}

.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev{
    margin-left: 0;
}

.carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev {
    margin-right: 0;
}



.carousel-inner {
    max-width: 1170px;
}

.carousel-inner .col-xs-12:last-child{
	text-align: center;
}



.carousel-indicators li,
.carousel-indicators .active {
    background-color: #ddd;
    background-color: var(--surface-color-variant);
    border: none;
    width: 10px;
    height: 10px;
    margin: 0 .5rem;
}

.carousel-indicators .active {
    background-color: #0A3255;
    background-color: var(--primary-color);
}


.carousel-control {
    text-shadow: none;
    color: #696969;
    color: var(--on-surface-color);
    width: 5%;
    height:50px;
    top:90%;
}

.modal-carousel .carousel-control{
    top: 40%;
}

.carousel-control:hover,
.carousel-control:focus{
    color: #0A3255;
	color: var(--primary-color);
	opacity: 1;
}

/*modal carousel styling here*/

.modal-carousel{
	padding: 0;
	margin-top: 0rem;
	margin-bottom: 2rem;
}


/*form styling here*/
.form-control {
    border: none;
    border-radius: 2px;
    padding: 2.5rem 1rem;
    box-shadow: none;
}

form button{
    margin-top: 1rem;
}

label {
    font-size: var(--font-xs);
    font-weight: 600; /*fallback*/
    font-weight: var(--font-bold);
}

#B2BForm {
    padding: 4rem;
    background-color: rgba(0,0,0,.05);
    margin-bottom: 2rem;
}

#B2BForm h2{
    margin-bottom: 2rem;
    font-size: 2rem; /*fallback*/
    font-size: var(--font-md);
}

.error{
    display:none;
}

/*modal styling here*/

.modal h1{
	margin: 0rem;
	margin-top: .5rem;
}

.modal button.close {
    font-size: 1.2rem; /*fallback*/
    font-size: var(--font-xxs);
    color: #0A3255;
    color: var(--primary-color);
    opacity: 1;
    float: none;
    text-shadow: none;
    margin-top: .5rem;
    text-transform: uppercase;
    font-weight: 600; /*fallback*/
    font-weight: var(--font-bold);
}

.modal video{
    margin-bottom: 4rem;
}

.modal .carousel video{
    margin-bottom: 0;
}

.modal-content {
    height: auto;
    min-height: 100%;
    border-radius: 0;
    box-shadow: 1px 1rem 1rem rgba(0,0,0,0.05); /*fallback*/
    box-shadow: var(--shadow-elavation-one);
    border: none;
}

.modal-backdrop{
    opacity:.65 !important;
}

.modal-body{
	padding:0 0 2rem;
}


.modal .accordion .panel>div{
	margin-bottom: 2rem;
}

/*chip filter styling here*/
.chip {
    background-color: #ddd;
    background-color: var(--surface-color-variant);
    padding: 1rem 2rem;
    font-size: 1.2rem; /*fallback*/
    font-size: var(--font-xxs);
    margin-bottom: 1rem;
    margin-right: 1rem;
    font-weight: 600; /*fallback*/
    font-weight: var(--font-bold);
}

.list-inline > li.chip,
.list-inline > li.chip:hover,
.list-inline > li.chip :focus{
    padding: 1rem;
    cursor: pointer;
}

/*home page styling starts here*/

#home #heroVideo {
    width:100%;
}

#muteBtn {
    position: absolute;
    z-index: 999999;
    bottom: 15px;
    padding-top: 10px;
    right: 15px;
    width: 40px;
    height: 40px;
    color: #fff;
    color: var(--surface-color);
    background-color: #0A3255;
    background-color: var(--primary-color);
    border-radius: 50%;
}


#coreServiceOneCard .card-img-wrapper {
    background-image: url(../images/Home/Ad.png);
}

#coreServiceTwoCard .card-img-wrapper {
    background-image: url(../images/Home/Digital.png);
}

#coreServiceThreeCard .card-img-wrapper {
    background-image: url(../images/Home/Print-Production.png);
}

#workPanel{
	background-color: rgba(0,0,0,0.05);
}


/*work styling starts here*/

#work .container>.row>.col-xs-6:nth-child(even){
    padding-left: 7.5px;
}

#work .container>.row>.col-xs-6:nth-child(odd) {
    padding-right: 7.5px;
}


#work .card h3{
    margin-bottom: 1rem;
}



/*b2b stling start here*/
#B2B .accordion .panel-title a {
    font-size: 1.6rem; /*fallback*/
    font-size: var(--font-sm);
}

#B2B .accordion .panel > div,
#B2B .accordion .panel-heading{
    margin-bottom: 1rem;
}

#B2B .accordion .panel > div {
    border-bottom: .5px solid #ddd; /*fallback*/
    border-bottom: var(--border-default);
}

#B2B .accordion .panel-title i{
    top: 5px;
}
/*contact styling here*/
#contact {
    background-color: rgba(0,0,0,.05);
    margin-bottom: 0;
}


/*hero images go here*/

/*#home .hero-full{
	background-image: url(../images/Hero/Home.png);
}*/

#about .hero-half{
	background-image: url(../images/Hero/About.jpg);
}

#B2B .hero-half {
    background-image: url(../images/Hero/B2B.jpg);
}

#work .hero-half {
    background-image: url(../images/Hero/Our-Work.jpg);
}

#contact .hero-half {
    background-image: url(../images/Hero/Contact-Us.jpg);
}




/*Advertising*/
#advertising .hero-half {
    background-image: url(../images/Hero/Ad.jpg);
}

#brandDevelopment .hero-half {
    background-image: url(../images/Hero/Brand-Development.jpg);
}

#creativeContent .hero-half {
    background-image: url(../images/Hero/Creative-Content.jpg);
}

#digitalStrategy .hero-half {
    background-image: url(../images/Hero/Digital-Strategy.jpg);
}

#video .hero-half {
    background-image: url(../images/Hero/Video.jpg);
}

#print .hero-half {
    background-image: url(../images/Hero/Print.jpg);
}

/*Digital*/
#digital .hero-half {
    background-image: url(../images/Hero/Digital.jpg);
}

#webDevelopmentAndECommerce .hero-half {
    background-image: url(../images/Hero/Web-Development-and-E-Commerce.jpg);
}

#customDigitalSolutions .hero-half {
    background-image: url(../images/Hero/Custom-Digital-Solutions.jpg);
}

#consulting .hero-half {
    background-image: url(../images/Hero/Consulting.jpg);
}

#appDevelopment .hero-half {
    background-image: url(../images/Hero/App-Development.jpg);
}

#uxAndUIDesign .hero-half {
    background-image: url(../images/Hero/UX-and-UI-Design.jpg);
}

/*Print Production*/
#printProduction .hero-half {
    background-image: url(../images/Hero/Print-Production.jpg);
}

#offSetLitho .hero-half {
    background-image: url(../images/Hero/Off-Set-Litho.jpg);
}

#digitalPrinting .hero-half {
    background-image: url(../images/Hero/Digital-Printing.png);
}

#mockupPrototype .hero-half {
    background-image: url(../images/Hero/Mockup-Prototype.jpg);
}
#prePressAndPrePressPackaging .hero-half {
    background-image: url(../images/Hero/Pre-Press-and-Pre-Press-Packaging.png);
}

#retailKitting .hero-half {
    background-image: url(../images/Hero/Retail-Kitting.jpg);
}

#specialtyCoating .hero-half {
    background-image: url(../images/Hero/Specialty-Coating.jpg);
}

#uVPrinting .hero-half {
    background-image: url(../images/Hero/UV-Printing.jpg);
}




/*MEDIA QUERIES*/
/*styling for anything larget than mobile*/
@media only screen and (min-width: 768px) {

	.navbar-inverse{
		position: absolute;
	}

    .navbar-btn.btn-sm {
        margin-bottom: auto;
        max-height:33px;
    }

    .navbar-inverse:hover {
        background-color: #fff;
        background-color: var(--surface-color);
    }

    .navbar-right {
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        /* display: -webkit-flex; NEW - Chrome */
        display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

	.navbar-collapse .dropdown-menu .caret{
		display: inline-block;
	}

    .dropdown-menu {
        min-width: 100vw;
        border: none;
        box-shadow: none;
        background-color: #0A3255;
        background-color: var(--primary-color);
        border-radius: 0;
        text-align: center;
        padding: 0;
    }

	.dropdown-menu > li{
		padding-top: 5px;
		padding-bottom: 5px;
	}

    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
        color: #fff;
        color: var(--surface-color);
        font-weight: 500; /*fallback*/
        font-weight: var(--font-semi-bold);
    }

	.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus,
	.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover{
        color: #F2723A;
		color: var(--secondary-color);
	}

	.navbar-right .dropdown-menu{
		right: -400px;
	}

    .sub-dropdown {
        position: absolute;
        background-color: #fff;
        background-color: var(--surface-color);
        left: 0;
        top: 35px;
        padding: 2rem 0rem 0;
        width: 100vw;
        margin-left: 0;
        display: none;
        text-align: left;
        z-index: 9999999;
        box-shadow: 1px 1rem 1rem rgba(0,0,0,0.05); /*fallback*/
        box-shadow: var(--shadow-elavation-one);
    }

	.sub-dropdown > .container{
		max-width: 768px;
	}

	.sub-dropdown li{
		margin-bottom: 2rem;
	}

    .hero-full .btn-scroll-container{
        display: block;
    }

    /*work*/
    #work .card {
        min-height: 0;
    }

    /*footer*/
    .footer p {
        font-size: 1.4rem; /*fallback*/
        font-size: var(--font-xs);
    }

    /*home brand logos*/
    #workPanel img {
        padding: 0 2.5rem 2.5rem;
    }


    /*carousel*/
    .subservice-carousel {
        min-height: 0;
    }

    /*mute btn*/
    #muteBtn{
        top:65px;
    }

    #navSocial {
        text-align: right;
    }

    .panel-custom,
    .panel-fluid{
        padding: 6rem 0;
    }

    .subservice-content{
        padding-bottom:0rem;
    }

    .hero-half h1 {
        font-size: 6.5rem; /*fallback*/
        font-size: var(--font-xl);
    }


    .scrim-half > div {
        margin-left: auto;
        margin-right: auto;
    }

    /*card stylign starts here*/
    .card {
        text-align: left;
        padding-bottom: 0;
    }


	/*footer styling starts here*/

	.wrapper {
		margin-bottom: -60px;
	}

	.footer,
	.push {
		height: 60px;
		text-align: left;
	}


	/*carousel styling here*/
	.carousel-inner .col-xs-12:last-child{
	text-align: left;
}

	/*btn styling starts here*/

	.btn-container{
		width: 100%;
		text-align:right;
	}

	/*card stylig here*/
    .card-img-wrapper {
        height: 28rem;
        background-position: center;
        background-color: #ddd;
        background-color: var(--surface-color-variant);
    }

    /*work styling here*/
    #work .container > .row > .col-xs-6:nth-child(even) {
        padding-left: 15px;
    }

    #work .container > .row > .col-xs-6:nth-child(odd) {
        padding-right: 15px;
    }


}


/*styling for anything larget than tablet*/
@media only screen and (min-width: 992px) {

    .desktop-only {
        display: block;
    }

	.hero-full h1{
		top: 35%;
	}

    .hero-full {
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        /* display: -webkit-flex; NEW - Chrome */
        display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
        align-items: center;
        max-height: 95vh;
    }

    /*about page styling*/
    #about .card,
    #home .card {
        min-height: 580px;
        position: relative;
    }

    #about .btn-container,
    #home .btn-container {
        position: absolute;
        top: 300px;
        left: 0;
    }

    /*carousel*/
    .carousel-control{
        top:40%;
    }

    /*work*/
    #work .card {
        min-height: 445px;
    }

    #work .card h3{
        min-height: 55px;
    }

    #work .btn-container{
        position: absolute;
        top: 245px;
        left: 0;
        text-align: center;
        width: 100%;
    }


	/*card stylign starts here*/
	.card{
		text-align: center;
		padding-bottom: 2rem;
	}

	.card:hover{
		border: none;
        box-shadow: 1px 1rem 5rem rgba(0,0,0,0.15); /*fallback*/
		box-shadow: var(--shadow-elavation-two);
		transform: translateY(-2rem);
		transition-duration: .5s;
	}

    #workPanel img{
        padding: 0 3.5rem 4.5rem;
    }

	/*btn styling starts here*/

	.btn-container{
		text-align:center;
	}


    /*work*/
    #work .card{
        margin-bottom: 3rem;
    }


	/*card stylig here*/
	.card-img-wrapper{
		height: 20rem;
	}

    /*carousel arrows*/
    .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next, .carousel-control .icon-prev {
        bottom: 0;
        top: 50%;
    }
}



/*styling for anything larget than tablet*/
@media only screen and (min-width: 1200px) {

    /*about page styling*/
    #about .card,
    #home .card {
        min-height: 540px;
    }

    #about .btn-container,
    #home .btn-container {
        top: 260px;
    }

    /*work*/
    #work .card{
        min-height: 460px;
    }

    #work .btn-container {
        top: 220px;

    }

}