/****** GENERIC ELEMENTS ******/
/* General element styles go here... */

/* colors:
	- ruby
	- white < whitesmoke < gainsboro < silver < dimgray < black */
/* headings:
	- h1: for masthead banner titles
	- h2: for section titles */

:root {
	--ruby: #F9034B;
	--wine: #B80036;
	--white75: rgba(255, 255, 255, 0.75);
	--font-family-sans-serif: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	background-color: white;
	color: black;
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	text-align: left;
}

p:last-child {
	margin-bottom: 0px;
}

.cxtext-ruby {
	color: var(--ruby) !important;
}

.cxtext-white-75 {
	color: var(--white75) !important;
}

.cxbg-ruby {
	background-color: var(--ruby);
}

.cxbg-whitesmoke {
	background-color: whitesmoke;
}

.cxbg-gainsboro {
	background-color: gainsboro;
}

.cxbg-jet {
	background-color: #343A40;
}

.cxsection {
	padding: 6rem 0;
}

.cxsection-divider {
	border-style: solid;
	border-width: 1px 0px 0px 0px;
	border-color: gainsboro;
}






/****** NAMED ELEMENTS ******/
/* Elements with individual/custom stylings go here... */

#cxNavMain {
	background-color: white;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	transition: background-color 0.2s ease;
}

#cxNavMain .navbar-brand {
	color: black;
	font-weight: 600;
	transition: 0.15s;
}

#cxNavMain .nav-link {
	color: silver;
	font-size: 0.9rem;
	font-weight: 600;
	padding: 0.75rem 0;
}

#cxNavMain .nav-link:hover,
#cxNavMain .nav-link:active {
    color: var(--ruby);
}

#cxNavMain .nav-link.active {
    color: var(--ruby) !important;
}

@media (min-width: 992px) {
    #cxNavMain { box-shadow: none; background-color: transparent; }
    #cxNavMain .navbar-brand { color: rgba(255, 255, 255, 0.7); transition: 0.15s; }
    #cxNavMain .navbar-brand:hover { color: white; }
	#cxNavMain .navbar-nav { margin-left: auto !important; }
    #cxNavMain .navbar-nav .nav-item .nav-link { color: rgba(255, 255, 255, 0.7); padding: 0 1rem; }
    #cxNavMain .navbar-nav .nav-item .nav-link:hover { color: white; }
    #cxNavMain .navbar-nav .nav-item:last-child .nav-link { padding-right: 0; }

    #cxNavMain.cxnavbar-scrolled { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); background-color: white; }
    #cxNavMain.cxnavbar-scrolled .navbar-brand { color: black; transition: 0.15s; }
    #cxNavMain.cxnavbar-scrolled .navbar-brand:hover { color: #F9034B; }
    #cxNavMain.cxnavbar-scrolled .navbar-nav .nav-item .nav-link { color: black; }
    #cxNavMain.cxnavbar-scrolled .navbar-nav .nav-item .nav-link:hover { color: #F9034B; }
}




.cxmasthead {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 00%, rgba(0, 0, 0, 0.8) 100%), url("../img/bg-masthead.jpg");
	background-attachment: scroll;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: white;
	padding-bottom: calc(10rem - 4.5rem);
	padding-top: 10rem;
}

.cxmasthead h1 {
	font-size: 2.25rem;
	font-weight: 600;
	margin-bottom: 50px;
}

.cxmasthead p {
	color: gainsboro;
	font-weight: 300;
	margin-bottom: 3rem !important;
}

@media (min-width: 992px) {
    .cxmasthead {
        height: 100vh;
        min-height: 40rem;
        padding-top: 4.5rem;
        padding-bottom: 0;
    }
    .cxmasthead p {
        font-size: 1.15rem;
    }
    .cxmasthead h1 {
        font-size: 3rem;
    }
}

@media (min-width: 1200px) {
    .cxmasthead h1 {
        font-size: 3.5rem;
    }
}

.cxmasthead-slim {
	background: linear-gradient(to bottom, goldenrod, gold);
	background-attachment: scroll;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: white;
	padding-bottom: calc(10rem - 4.5rem);
	padding-top: 10rem;
}

.cxmasthead-slim h1 {
	color: #F9034B;
	font-size: 2.25rem;
	font-weight: 600;
	margin-bottom: 25px;
}

.cxmasthead-slim p {
	color: gainsboro;
	font-weight: 300;
}

@media (min-width: 992px) {
    .cxmasthead-slim {
        height: 50vh;
        min-height: 20rem;
        padding-top: 4.5rem;
        padding-bottom: 0;
    }
    .cxmasthead-slim p {
        font-size: 1.15rem;
    }
    .cxmasthead-slim h1 {
        font-size: 3rem;
    }
}

@media (min-width: 1200px) {
    .cxmasthead-slim h1 {
        font-size: 3rem;
    }
}




.cxtext-expertise {
	color: silver;
	font-size: 14px;
	padding-left: 70px;
	padding-right: 70px;
}

.cxemployment-accordion-body {
	font-size: 0.9rem;
}




.cxgallery {
	position: relative;
	border: 1px solid gainsboro;
	border-radius: 5px;
	margin-bottom: 25px;
	transition: 0.25s ease;
}

.cxgallery:hover {
	opacity: 50%;
}

.cxgallery img {
	border-radius: 5px;
	height: 100%;
	width: 100%;
}

/* Note: The default color for gallery captions are white. You should edit the gallery image so that it's visible */
.cxgallery-caption {
	background-color: rgba(0, 0, 0, 0.35);
	display: flex;
	flex-direction: column;
	position: absolute;
	/* width: inherit; */
	width: 100%;
	color: white;
	padding: 25px;
}

.cxgallery-caption .cxgallery-captiontag {
	font-size: 0.75rem;
	font-weight: 400;
}

.cxgallery-caption .cxgallery-captiontitle {
    font-size: 2rem;
    font-weight: 400;
	line-height: 120%;
}




.cxbtn-ruby {
    color: #fff;
    background-color: #F9034B;
    border-color: #F9034B;
}
.cxbtn-ruby:hover {
    color: #fff;
    background-color: #B80036;
    border-color: #B80036;
}
.cxbtn-ruby:focus,
.cxbtn-ruby.focus {
    color: #fff;
    background-color: #B80036;
    border-color: #B80036;
    box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}
.cxbtn-ruby.disabled,
.cxbtn-ruby:disabled {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.cxbtn-ruby:not(:disabled):not(.disabled):active,
.cxbtn-ruby:not(:disabled):not(.disabled).active,
.show > .cxbtn-ruby.dropdown-toggle {
    color: #fff;
    background-color: #bd2130;
    border-color: #b21f2d;
}
.cxbtn-ruby:not(:disabled):not(.disabled):active:focus,
.cxbtn-ruby:not(:disabled):not(.disabled).active:focus,
.show > .cxbtn-ruby.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}




.cxicon-contact {
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0px;
	height: 35px;
	width: 35px;
	margin-right: 5px;
}




.cxaccordion-button {
	display: block;
	background-color: whitesmoke;
	font-size: 0.9rem;
}

.cxaccordion-button:not(.collapsed) {
	color: black;
	background-color: silver;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
}




.cxbtn-array {
	text-decoration: none;
	position: relative;
	display: flex;
}

.cxbtn-array-btn,
.cxbtn-array-label {
	border: 0px;
	display: inline-block;
	vertical-align: middle;
}

.cxbtn-array-btn {
	background-color: var(--ruby);
	border-radius: 5px;
	color: white;
	font-size: 0.9rem;
	font-weight: 700;
	min-width: 35px;
	min-height: 35px;
	max-width: 35px;
	max-height: 35px;
	text-align: center;
	padding: 0px;
}

.cxbtn-array-label {
	color: black;
	padding-top: 5px;
	padding-left: 10px;
}

.cxbtn-array:hover>.cxbtn-array-btn {
	background-color: var(--wine);
	transition: 0.25s;
}

.cxbtn-array:hover>.cxbtn-array-label {
	color: var(--wine);
	cursor: pointer;
	transition: 0.25s;
}

.cxbtn-array-inline {
	text-decoration: none;
	display: inline;
}




.cxbtn-hollow {
    color: rgba(255, 255, 255, 0.7);
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.7);
}
.cxbtn-hollow:hover {
    color: white;
    border-color: white;
}
.cxbtn-hollow:focus,
.cxbtn-hollow.focus {
    color: white;
    border-color: white;
}




.cxmodal {
	font-family: "Open Sans";
}

.cxmodal-imgfull {
	position: relative;
	padding: 0px !important;
}
.cxmodal-imgfull img {
	border-top-left-radius: .3rem;
	border-top-right-radius: .3rem;
}
.cxmodal-imgfull .cxmodal-btnclose {
	position: absolute;
	top: 15px;
	right: 15px;
	height: 2rem;
	width: 2rem;
	border: 1px solid white;
	border-radius: 50px;
	background-color: transparent;
	color: white;
}

.cxmodal-body {
	border-top: 1px solid gainsboro;
	padding: 1.5rem;
}
.cxmodal-body h6 {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 15px;
}
.cxmodal-body a {
	font-size: 0.85rem;
}
.cxmodal-body p {
	font-size: 0.85rem;
}

.cxmodal-footer {
	justify-content: flex-start;
}

.cxmodal-btn {
	font-size: 0.9rem;
}

.cxOpenPortfolio {
	cursor: pointer;
}

.cxform-errorlabel {
	padding-left: 12px;
	color: var(--ruby);
}




.cxgallery-temp {
	background-color: whitesmoke;
	border-radius: 5px;
	box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.35);
}

.cxgallery-temp .cxgallery-temp-img {
	border-radius: 5px;
}

.cxgallery-temp .cxgallery-temp-desc {
	padding: 20px;
}

.cxgallery-temp .cxgallery-temp-desc .cxgallery-temp-desctitle {
	font-size: 1.5rem;
	margin-bottom: 15px;
}




.cxanim-slidedown {
	-ms-transform: translate(0px, 70px);
	transform: translate(0px, 70px);
	opacity: 0;
	transition: opacity 1s, transform 1s ease;
}

.cxanim-slideup {
	-ms-transform: translate(0px, 0px);
	transform: translate(0px, 00px);
	opacity: 1;
	transition: opacity 1s, transform 1s ease;
}





/****** OVERRIDE OTHER VENDOR CSS ******/
.cc-window {
	font-family: "Open Sans";
}

.cc-dismiss {
	text-decoration: none;
}