/*E-commerce  */
.border-box-product{border:1px solid #f5f5f5}
.box-product-height{height:300px}
.box-product-title{height:50px}
.box-product-image {height:200}
.box-product-cta {height:50px;width:100%;}

/*Fonts */
.roboto{font-family:'roboto'}
	.serif{font-family:'PT Serif'}
	.sans{font-family:'Open Sans'}
	
/* Font Sizes: Font size standard is 12px and goes up by the rule of 6 to superheadline*/
	.superheadline{font-size:36px;font-weight:900}
	.special{font-size:30px;font-weight:800}
	.headline{font-size:20px;font-weight:600}
	.subheadline{font-size:16px;font-weight:300}
	.copy{font-size:14px;font-weight:200}
	.fineprint{font-size:12px;font-weight:200}
	
	/* colors fonts and backgrounds Basic color palette with accent */
	.blackfont{color:#111111}
	.drkgreyfont{color:#555555}
	.greyfont{color:#777777}
	.whitefont{color:#FFFFFF}
	.bluefont{color:#222c6a}
    .powderblue{color:#AFD6F6}
	.powdergreen{color:#83D891}
	.white{color:#FFFFFF}
	.powdergrey{color:#393939}
	
/* background colors Note: Blue background can only use white font */
	.bluebkgd{background-color:#222C6A;color:#fff!important}
	.whitebkgd{background-color:#ffffff}
	.blkbkgd{background-color:#000;color:#fff!important}
	..powderbluebkgd{background-color: #afd6f6}
	.powdergreenbkgd{background-color:#83d891}

/* Font Transform */    
.uppercase{text-transform: uppercase}
	.lowercase{text-transform: lowercase}
	.capitalize{text-transform: capitalize}
	.bold{font-weight:bold}
	.center-content{text-align:center}
	
/*Padding Standards*/
	/*spacers Rule of 6 */
	.std-spacer{height:6px}
	.sm-spacer{height:12px}
	.md-spacer{height:18px}
	.lg-spacer{height:24px}
	.xl-spacer{height:36px}
	.xxl-spacer{height:175px;}
	/* Top Bottom Padding Rule of 6 */
	.std-tb-padding{padding:6px 0px}
	.sm-tb-padding{padding:12px 0px}
	.md-tb-padding{padding:18px 0px}
	.lg-tb-padding{padding:24px 0px}
	.xl-tb-padding{padding:36px 0px}
	/* left right padding rule of 6*/
	.std-lr-padding{padding 0px 6px}
	.sm-lr-padding{padding: 0px 12px}
	.md-lr-padding{padding: 0px 18px}
	.lg-lr-padding{padding: 0px 26px}
	.xl-lr-padding{padding: 0px 36px}
	/* Overall Square Padding Rule of 6 */
	.std-overall-padding{padding:6px}
	.sm-overall-padding{padding:12px}
	.md-overall-padding{padding:18px}
	.lg-overall-padding{padding:24px}
	.xl-overall-padding{padding:36px}
	
/* Content-sections */
	/* square content containers note no width is greater then 450 px to accomidate mobile */
	.sm-content-section-sq{height:200px;width:200px}
	.md-content-section-sq{height:400px;width:400px}
	.lg-content-section-sq{height:450px;width:4500px}
	/* rectangle containers are designed to specific heights width are scaled to column size */
	.sm-content-section-rec{width:100%;height:200px}
	.md-content-section-rec{width:100%;height:600px}
	.lg-content-section-rec{width:100%;height:800px}
/* same as above but with built in overall small padding 12px */
	.sm-content-section-sqp{height:200px;width:200px;padding:12px}
	.md-content-section-sqp{height:400px;width:400px;padding:12px}
	.lg-content-section-sqp{height:450px;width:450px;padding:12px}
	.sm-content-section-recp{width:100%;height:200px;padding:12px}
	.md-content-section-recp{width:100%;height:600px;padding:12px}
	.lg-content-section-recp{width:100%;height:800px;padding:12px}
/* Used for uniform section heights */
	.sm-height-box{height:200px}
	.md-height-box{height:300px}
	.lg-height-box{height:400px}
	.xl-height-box{height:600px}
	.xxl-height-box{height:800px}
	.equal-height-box{height:100%}
/*used for uniform section widths */	
	.sm-width-box{width:200px}
	.md-width-box{width:300px}
	.lg-width-box{width:400px}
	.xl-width-box{width:100%}
/* used to create width limits on content for uniform spacing */	
	.sm-reduce-content{width:90%}
	.md-reduce-content{width:70%}
	.lg-reduce-content{width:45%}
	.xl-reduce-content{width:35%}
	.half-reduce-content{width:50%}	
	
	
	
	
	
/*utility calls */

.blk-boxshadow{box-shadow: 4px 2px 3px 1px}
.gry-boxshadow{box-shadow: 4px 2px 3px 1px #393939}
	.sticky{top:0px ;z-index:10}
/* Button setup */
	.sq-button-outline{border:1px solid #000;width:50%;padding:10px 80px;font-size:18px;font-weight:bolder;background-color:#222c6a;color:#fff}
	.sq-button-outline:hover {width:50%;padding:10px 80px;font-size:18px;font-weight:bolder;background-color:#000 ;color:#fff ;box-shadow: 4px 2px 3px 1px}
	.lg-sq-button-outline{border:1px solid #555;width:100%;padding:10px 100px;font-size:18px;font-weight:bolder;background-color:#222c6a;color:#fff}
	.lg-sq-button-outline:hover {width:100%;padding:10px 100px;font-size:18px;font-weight:bolder;background-color:#777 ;color:#fff ;box-shadow: 4px 2px 3px 1px}
	.wlg-sq-button-outline{border:1px solid #fff;width:40%;padding:18px 50px;font-size:18px;font-weight:bolder;color:#fff}
	.on-sq-button-outline
/* Body setup */
	body{background-color:#fff;font-family:'Open Sans';color:#555}
/*header setup */
	.header-container{width:100%;background-color:#fff;height:65px;}
.logo-box{padding:15px 25px; Background-color:#fff}
	.header-image{;background-repeat:no-repeat;background-position: cover;height:750px;}
/*navigation setup */
	.nav-element{font-weight:bolder;color:#000;text-transform: uppercase}
	.nav-active {color:#222c6a;text-decoration-col;list-style: none}
	.cd-primary-nav .cd-secondary-nav{background:#fff}
	
	/*hero setup **/
	.overall-hero-container{height:400px}
	.hero-content-wrapper{padding: 12% 0px}
	.hero-content-block{height:300px;width:400px;background-color:#fff;opacity:.7}
	.carousel-item img{height:600px}
	.hero-center-content{padding:80px}
	.nav-list{list-style: none}
	/* section containers*/
	.sm-container-two{height:210px;width:410px;padding:5px}
	.md-container-two{height:410px;width:810px;padding:5px}
	.lg-container-two{height:610px;width:100%;padding:5px}
	.section-center-content{padding: 135px 0px}
	/*decorations */
	.sideborder{border-left:2px solid #f6f6f6}
/*Bootstrap 4 overrides */
	.card-header{text-align: center;padding:0px;border:0px ;border-radius:0px ;height:10px}
	.card{border:none}
	ul li {list-style: none}
	hr{margin:0px;padding 0px 5px;color:#ffffff}
	
/*picture grid spacers */
	.w-spacer{width:10px}
	.nav-pills .nav-link.active, .nav-pills .show>.nav-link{;color: #222;background-color:#fff;border-radius:0px;font-weight:bold}
	a {color:#999}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {border:none}
.nav-link.active{font-weight:bold;}
.nav-link a {color:#707070}