html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}


body {font-family: "brandon-grotesque",sans-serif;
font-style: normal;
font-weight: 300;
background-color: #414040;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}


hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}


fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}


textarea {
    resize: vertical;
}

img {max-width: 100%; height: auto;}
p {margin-top:0px;}


* {
  box-sizing: border-box;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */


.span1 { width: 6.5%; }
.span2 {
width: 15%;
}
.span3 {
width: 23.5%;
}
.span4, .grid-sizer {
width: 33.33%; min-height:100px;
}
.span5 {
width: 40.5%;
}
.span6 {
width: 49%;
}
.span7 {
width: 57.5%;
}
.span8 {
width: 66%;
}
.span9 {
width: 74.5%;
}
.span10 {
width: 83%;
}
.span11 {
width: 91.5%;
}
.span12 {
width: 100%;
}


h2, h3 {margin: 0px;}

#container div {}
#container div.two {background-color:#393939;}
#container div.three {background-color: #00bafa;}

.mask {height:100%; width: 100%;    overflow: hidden;
    top: 0;
    left: 0; position: absolute;     opacity: 0;
    background-color:rgba(219,127,8, 0.7); 
    transition: all 0.4s ease-in-out; z-index: 3;}
#container div img {position: relative;  transition: all 0.2s linear; width: 100%;}
.fright {float:right;}
.fleft {float:left;}


.item:hover .mask { 
	opacity: 1;
}

.item:hover img {
transform: scale(1.1);
}

.item {font-size: 1em; overflow: hidden;}

.item a h2 {font-size: 1.5em; text-decoration: none; color: #ffffff; text-transform: uppercase; font-weight: 900; line-height: 1.15em; margin-bottom: 1em; }

.item .inner {text-align: center;  top: 50%;
  transform: translateY(-50%); position: relative; }
.item a {display: block; width: 100%; height: 100%; text-decoration: none;}

.item a span {text-align: center; background-color: transparent; border: 1px solid #ffffff; color: #ffffff; padding: 5px 10px 5px 10px; font-size: 12px; text-transform: uppercase; }
header {background-color: #ffffff; padding: 20px 0 20px 0;}
header h2 a {color: #000000; text-decoration: none;  padding:8px 20px 8px 20px; border:5px solid #000000; letter-spacing:.19em; }
header h2  {margin:9px 0 9px 15px;  font-size:1.25em;}

footer {}
/* ==========================================================================
Interior
   ========================================================================== */

#inner-container img {text-align: center; margin: 50px auto 80px auto; width: 90%; display: block; box-shadow:2px 2px 60px rgba(60,60,60,0.43);}
#inner-container img.mobile {width:30%; box-shadow:none !important;}

#inner-container {text-align: center;}

.fullWidth {width:80% !important; display: block !important; max-width:1200px; margin:60px auto !important; filter:none !important;}
.white {background-color:#ffffff !important;}
.hpef {background-color: #eeeeee;}

.intro {width: 70%; margin: 70px auto 90px auto; padding: 0 30px 0 30px; display: none; font-size:20px;}
.intro h2 {margin-bottom: 5px; font-size:22px; text-transform:uppercase; letter-spacing:.05em;}
#intro-banner img {  top: 50%; transform: translateY(-50%); position: relative;}
#intro-banner  {background-size: cover; background-position: center center; position: relative; height: 50vh; text-align: center;  margin-bottom: 0px; clip-path:polygon(0 0, 1600px 0, 1600px 87%, 0 100%);}
.intro h5 {font-size:12px; margin-bottom: 0px;}
.intro article:last-child p:after {content:""; display: block; width:30px; height:5px; background-color:#000000; margin:20px 0 10px 0;}
.intro article:last-child p:last-child:after {content:""; display: none;}
#inner-container .intro p {font-size:20px;}
.siteMap {background-color:#ffffff; padding:60px 0 140px 0;}

#section2  {background: linear-gradient(to bottom, rgba(0,179,137,1) 0%, rgba(0,179,137,1) 49%, rgba(255,255,255,1) 49%, rgba(255,255,255,1) 100%); padding-bottom: 10%;}
#inner-container #section2 img {box-shadow:none !important; width:19%; display: inline-block; margin-right:5rem; filter:drop-shadow(12px 12px 25px rgba(0,0,0,0.5));}
#inner-container #section2 img:first-child {}
#inner-container #section2 img:nth-child(3) { margin-right:0rem;}

#inner-container .wire {background-color:#323232;  padding:40px 10% 150px 10%; position: relative;}
.wire h3, .comp h3 {text-align:right; width:100%; font-size:65px; margin-top: 5rem; color:#ffffff;}
.comp h3 {color:#000000 !important; text-align: left; padding:70px 0 0 70px;}
#inner-container .wire img {width:45%; margin:20rem 30px 0 0; height:auto !important; display: inline-block; }
#inner-container .wire img:nth-child(2) {margin-top:-35rem;}
#inner-container .wire p {color:#ffffff; text-align:right; }
#inner-container .wire article {position:absolute; right:80px; top:20px;}
#inner-container .wire article.btm {bottom:43%; left:40px; top:auto;}
#inner-container .wire .fullWidth {width:100% !important;}
.comp {margin-top:-100px}
#inner-container .wire .fullWidth {margin-bottom:50px;}
#inner-container p {font-size:14px;}
#inner-container .comp article img {max-width:250px; margin:120px auto 0 30%; filter:drop-shadow(12px 12px 25px rgba(0,0,0,0.5)); box-shadow:none;}
#inner-container .comp article {overflow:hidden; background-color:#ffffff; position: relative;}
#inner-container .comp article div {transform:translateY(-50%);  position: absolute; top:50%; right:20%; text-align: left;}
#inner-container .comp article.leftCol {background-color:#e8e8e8;}
#inner-container .comp article.leftCol div {left:10%; text-align:right;}
#inner-container .comp article.leftCol img {margin:120px 10%  0 auto; max-width:600px; padding:20px 0 80px 0;}
.gray {background-color:rgba(204,204,204,1.00);}



#hpef {background-color:#ffffff;}
#hpef #intro-banner {background-image: url("../images/HPE-banner.jpg");  }
#hpef #inner-container {background:linear-gradient(to top, rgba(0,179,137,1) 92%, rgba(0,179,137,1) 0%, rgba(255,255,255,1) 92%, rgba(255,255,255,1) 0%);}
.intro {width:100%; text-align: left;  margin:30px auto 40px auto; color:#000000; background-color:#ffffff;  display: flex; flex-flow: row wrap;   align-items: center; justify-content: center; padding:3% 10% 3% 10%;}
.intro article { width:40%; padding:40px;}
.intro article:first-child  {width:60%;}
.intro article:last-child {padding-left:60px;}
#hpef #intro-banner {margin-bottom:0px;}
#hpef #section2  {background: linear-gradient(to bottom, rgba(0,179,137,1) 0%, rgba(0,179,137,1) 29%, rgba(255,255,255,1) 29%, rgba(255,255,255,1) 100%); padding-bottom: 10%;}

#best-in-class {background-color:#ffffff;}
#best-in-class #intro-banner img {max-width:500px;}
#best-in-class #intro-banner {background-image: url("../images/Commit-banner.jpg");}
#best-in-class .rScreens {background: linear-gradient(to bottom, rgba(0,136,163,1) 0%, rgba(0,136,163,1) 29%, rgba(255,255,255,1) 29%, rgba(255,255,255,1) 100%); padding-bottom: 10%;}
#best-in-class .wire svg {width:40%;}
#best-in-class #inner-container .wire img:nth-child(2) {margin-top:-70rem;}
#best-in-class #inner-container  {background:linear-gradient(to top, rgba(0,136,163,1) 92%, rgba(0,136,163,1) 0%, rgba(255,255,255,1) 92%, rgba(255,255,255,1) 0%);}

#taco-joint {background-color:#ffffff;}
#taco-joint #intro-banner { background-image: url("../images/TacoJointWebsite-banner.jpg");}
#taco-joint #intro-banner img {}
#taco-joint #inner-container {background: linear-gradient(to top, rgba(34,34,34,1) 0%, rgba(34,34,34,1) 90%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%); }
#taco-joint .rScreens {background: linear-gradient(to bottom, rgba(34,34,34,1) 0%, rgba(34,34,34,1) 25%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 100%); padding-bottom: 10%;}
#taco-joint #inner-container .wire img:nth-child(2) {margin-top:-52rem;}
#taco-joint #inner-container .wire article.btm {bottom:51%;}



#tx-paint {background-color: #ffffff; }
#tx-paint #inner-container {background: linear-gradient(to top, rgba(160,160,160,1) 0%, rgba(160,160,160,1) 88%, rgba(255,255,255,1) 88%, rgba(255,255,255,1) 0%); padding-bottom: 10%;}
#tx-paint #intro-banner {background-image: url("../images/TexasPaint-banner.jpg");}
#tx-paint .rScreens {background: linear-gradient(to bottom, rgba(160,160,160,1) 0%, rgba(160,160,160,1) 35%, rgba(255,255,255,1) 35%, rgba(255,255,255,1) 100%); padding-bottom: 10%;} 
#tx-paint #inner-container .wire {background-color: #a0a0a0;}

#tcc {}
#tcc #intro-banner  {background-color: #7f0000;}

#omni {background-color: #414040;}
#omni #intro-banner {background-image: url("../images/Omni-banner.jpg");}


#dcustom {background-color: #ffffff; }
#dcustom #intro-banner {background-image:url("../images/dcustom-topbanner.jpg");}
#dcustom #intro-banner img {max-width:30%;}
#dcustom .rScreens {background: linear-gradient(to bottom, rgba(88,182,179,1) 0%, rgba(88,182,179,1) 32%, rgba(255,255,255,1) 32%, rgba(255,255,255,1) 100%); padding-bottom: 10%;}
#dcustom #inner-container {background: linear-gradient(to top, rgba(88,182,179,1) 0%, rgba(88,182,179,1) 90%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%); }

#dell .intro {display:block; color:#ffffff;}
#dell #intro-banner {background-color: #1993de;}
#dell #intro-banner img {max-width:20%;}


#teradata {}
#teradata #intro-banner {background-image: url("../images/TD-banner.svg");}

#tfbic-contenthub {background-color: #ffffff;}
#tfbic-contenthub #intro-banner {background-image: url("../images/TFBIC-Chub-banner.jpg");}
#tfbic-contenthub #inner-container {background-color: #003663; background: linear-gradient(to top, rgba(0,54,99,1) 0%, rgba(0,54,99,1) 90%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%);}
#tfbic-contenthub .rScreens {background: linear-gradient(to bottom, rgba(0,54,91,1) 0%, rgba(0,54,91,1) 32%, rgba(255,255,255,1) 32%, rgba(255,255,255,1) 100%); padding-bottom: 10%;}

#tfbic-contenthub #inner-container .wire img:nth-child(2) {margin-top:-14rem;}
#tfbic-contenthub #inner-container .wire img {margin-top:25rem;}
#tfbic-contenthub #inner-container .wire article.btm {bottom:49%;}
#tfbic-contenthub #inner-container .wire .fullWidth {margin-top:250px !important;}

#tfbic {background-color: #ffffff;}
#tfbic #intro-banner {background-image: url("../images/TFBIC-contenthub-banner.jpg");}
#tfbic #inner-container {background-color: #003663; background: linear-gradient(to top, rgba(0,54,99,1) 0%, rgba(0,54,99,1) 90%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%);}
#tfbic .rScreens {background: linear-gradient(to bottom, rgba(0,54,91,1) 0%, rgba(0,54,91,1) 32%, rgba(255,255,255,1) 32%, rgba(255,255,255,1) 100%); padding-bottom: 10%;}

#tfbic #inner-container .wire img:nth-child(2) {margin-top:-22rem;}



#tfbic-portal {background-color: #ffffff;}
#tfbic-portal #intro-banner {background-image: url("../images/TFBIC-contenthub-banner.jpg");}
#tfbic-portal #intro-banner img, #tfbic-contenthub #intro-banner img, #tfbic #intro-banner img {width:30%;}
#tfbic-portal #inner-container { background: linear-gradient(to top, rgba(0,54,99,1) 0%, rgba(0,54,99,1) 90%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%);}

#rise-armament {background-color:#ffffff;}
#rise-armament #intro-banner {background-image: url("../images/RiseArm-banner.jpg");}
#rise-armament .rScreens {background: linear-gradient(to bottom, rgba(34,34,34,1) 0%, rgba(34,34,34,1) 36%, rgba(255,255,255,1) 36%, rgba(255,255,255,1) 100%); padding-bottom: 10%;}
#rise-armament #inner-container {background: linear-gradient(to top, rgba(34,34,34,1) 0%, rgba(34,34,34,1) 90%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%); }
#rise-armament #inner-container .wire img:nth-child(2) {margin-top:-60rem;}


#ryantax  {}
#ryantax #intro-banner {background-image: url("../images/RyanTax-banner.jpg");}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers:
 */

.hidden {
    display: none !important;
}



.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}


.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}



.invisible {
    visibility: hidden;
}



.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
 Media Queries
   ========================================================================== */


@media screen and (max-width: 800px) and (orientation: portrait) {
	
	.span4 {width:100%;}
	
}



@media screen and (max-width: 768px)  {
	
	#dcustom #intro-banner img {max-width:85%;}
	header h2 {text-align:center;}
	#hpef .intro article {width:100%;}
	#inner-container img {width:90%;}
	.wire h3 {text-align:center;}
	#inner-container .wire img {width:85%; margin-right:0;}
	#inner-container #section2 img {width:80%; display: block; margin:0 auto;}
	#inner-container #section2 img:last-child {margin-right:auto;}
	.wire h3 {font-size:45px; margin-top:1rem;}
	.intro article:last-child {padding-left:40px; padding-top: 0px;}
	.intro article {padding:40px 40px 20px 40px;}
	#tfbic-portal #intro-banner img, #tfbic-contenthub #intro-banner img, #tfbic #intro-banner img {width:350px;}
	.intro article:first-child, .intro article, .span5, .span3 {width:100%;}
	#inner-container #section2 img {width:70%;}
	#inner-container #section2 img:nth-child(3) {margin:0 auto;}
	#tfbic-contenthub #inner-container .wire img:nth-child(2), #tfbic #inner-container .wire img:nth-child(2), #inner-container .wire img:nth-child(2),#best-in-class #inner-container .wire img:nth-child(2) {margin-top:2rem;}
	.fullWidth, #tfbic-contenthub #inner-container .wire .fullWidth, #rise-armament .wire .fullWidth {width:100% !important; margin:20px auto 10px auto !important;}
	#inner-container .wire img, #tfbic-contenthub #inner-container .wire img {margin-top:5rem;}
	#inner-container .wire {padding:40px 10% 10px 10%;}
	#tfbic-contenthub #inner-container .wire article, #inner-container .wire article, #inner-container .wire article.btm, #taco-joint #inner-container .wire img:nth-child(2), #rise-armament #inner-container .wire img:nth-child(2) {position:inherit; width:100%;     right: auto;
    top: auto; text-align: center; left:auto; margin-top:20px;}
	#inner-container .wire p {text-align:center;}
	.comp {margin-top:0px;}
	
	#inner-container .comp article img {margin:20px auto;}
	.fright {float:none;}
	#inner-container .comp article div {position:static; transform:none; text-align:center !important; padding:0 20px 0 20px;}
	#inner-container .comp article.leftCol img, #inner-container .comp article.leftCol  {padding-bottom:20px;}
}


@media screen and (min-width: 1100px)  {
	
	#inner-container img {width:65%;}
	.intro article:last-child {padding-left:0px;}
}


@media screen and (max-width: 1200px)  {
	
	#inner-container img {width:75%;}
	.intro {padding:3% 2%;}
}



/* ==========================================================================
   Print styles.
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}