/* Add here all your css styles (customizations) */

/* Body font size */

body { 
   color: #333; 
   font-weight: 300 !important;
   line-height: 1.6;
}

/*Navbar Nav set to center*/
@media (min-width: 992px) {
    .header-v5 .navbar-nav {
        float: right !important;
        margin: 0 auto;
        display: table;
        table-layout: fixed;
    }
}

/*H1 changes so it looks like main top menu and filter menu*/

h1 {
    margin-top: 5px;
    font-size: 16px;
    font-weight: 200 !important;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* " style="line-height: 23px !important;" " was added so the space is even between the top and the bottom
<div class="navbar-brand">
                        <a href="home.html"  style="line-height: 23px !important;">
                            <img class="default-logo" src="assets/img/all/crome-logo-final.png" alt="Logo">
                            <img class="shrink-logo" src="assets/img/all/crome-logo-small-final.png" alt="Logo">
                        </a>
                    </div>
*/

/*Fix for social media icons in footer-v1*/

------------------------------------*/
.footer-v1 .footer {
	padding: 40px 0;	
	background: none !important;
	border-bottom: solid 2px #eee;
}

.footer-v1 .footer p {
	color: #eee;
}

.footer-v1 .footer h2 {
	color: #eee;
	font-size: 18px;
	font-weight: 200;
}

/*Link List*/
.footer-v1 .link-list li {
	border-top: solid 1px #353535;
}

.footer-v1 address,
.footer-v1 .link-list a,
.footer-v1 .link-list i {
	color: #eee;
}

.footer-v1 address {
	line-height: 23px;
}

/*Dotted Map*/
.footer-v1 .footer .map-img {
	background: url(../../img/map-img.png) 5px 60px no-repeat;
}

/*Copyright*/
.footer-v1 .copyright {
	background: #f5f5f5 !important;
	padding: 0px 0 5px !important;
	border-top: solid 1px #eee !important;
}

.footer-v1 .copyright p {
	font-size: 13px !important;
	color: #555 !important;
	margin-top: 14px;
}

.footer-v1 .copyright a {
	margin: 0 2px;
}

.footer-v1 .footer-socials {
	margin-top: 12px;
	text-align: right;
}

.footer-v1 .footer-socials li a {
	color: #777;
	font-size: 16px;
}

@media (max-width: 991px) {
	.footer-v1 .copyright,
	.footer-v1 .footer-socials {
		text-align: center !important;

	}
}

/* No shadow over images on Revolution slider */

.revolution-mch-1:after {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  content: ' ';
  position: absolute;
  background: none !important;
}

/* No more Underline, keep hover/active for header-v6 menu, letter spacing 3px*/
@media (min-width: 992px) {
.header-v6 .navbar-nav > li > a:hover,
.header-v6 .navbar-nav > li > a:focus,	
.header-v6 .navbar-nav > .active > a, 
.header-v6 .navbar-nav > .active > a:hover, 
.header-v6 .navbar-nav > .active > a:focus {
	text-decoration: none !important; 
	background: none;
	color: #95a5a6 !important;
}

.header-v6 .navbar-nav > li > a{
	text-decoration: none !important; 
	background: none;
	color: #555 !important;
  letter-spacing: 3px !important;
}

}

@media (min-width: 992px) {
.header-v6-home .navbar-nav > li > a:hover,
.header-v6-home .navbar-nav > li > a:focus,	
.header-v6-home .navbar-nav > .active > a, 
.header-v6-home .navbar-nav > .active > a:hover, 
.header-v6-home .navbar-nav > .active > a:focus {
	text-decoration: underline !important; 
	background: none;
}

}


/* CHANGES MADE IN header-v6-home.css */

/*Navbar Brand line 101 the line-height was deleted (used to be 65px) and the property height was changed from 93px to auto so the logo is closer to the top of the window browser*/

/*Navbar line 368 the line-height was deleted (used to be 54px) the menu elements on Desktop view are closer to the top of the window browser*/

/*Containers line 72 (.header-v6-home .menu-container {}) padding-left: 15px; padding-right: 15px; were deleted*/

/*Navbar Toggle line 137 the margin: 31px 0 31px 15px; was changed to margin: 17px 0 17px 15px; so it is on the same level as the logo */

/*Design for max-width: 991px* line 329 color for active menu link was replaced from color: #72c02c !important; to color: #95a5a6 !important; light gray*/

/*Media Queries* line 122 padding-left: 0 !important; was added so it overwrites the original bootstrap property so the logo it is not far from the left size of the window browser*/


/* CHANGES MADE IN header-v6.css */

/*header-v6.css line 1397 changed the font-weight from 400 to 200 so it matches the weight on header-v6-home.css*/

/* Lines 1407 to 1435 so the correct logo displays depending when the windows ir resize

	.header-fixed .header-v6.header-classic-white .navbar-brand img.default-logo {
		display: none;
	}

	.header-fixed .header-v6.header-classic-white .navbar-brand img.shrink-logo {
		display: inherit;
	}


	.header-fixed .header-v6.header-classic-white li.menu-icons i.menu-icons-style {
		color: #555;
	}

	.header-fixed .header-v6.header-classic-white.header-dark-search li.menu-icons i.fa-times {
		color: #fff;
	}
}

TO

	
	.header-fixed .header-v6.header-classic-white .navbar-brand img.default-logo {
		display: inherit;
	}

	.header-fixed .header-v6.header-classic-white .navbar-brand img.shrink-logo {
		display: none;
	}


	.header-fixed .header-v6.header-classic-white li.menu-icons i.menu-icons-style {
		color: #555;
	}

	.header-fixed .header-v6.header-classic-white.header-dark-search li.menu-icons i.fa-times {
		color: #fff;
	}
}

@media (max-width: 991px) {
	.header-fixed .header-v6.header-classic-white .navbar-brand img.shrink-logo {
		display: inherit;
	}

	.header-v6 .navbar-brand img.default-logo {
		display: none;
	}
}

/*

/*Navbar line 536 the line-height was deleted (used to be 54px) the menu elements on Desktop view are closer to the top of the window browser*/

/*Navbar Brand line 101 the line-height was deleted (used to be 65px) and the property height was changed from 93px to auto so the logo is closer to the top of the window browser*/

/*Containers line 72 (.header-v6 .menu-container {}) padding-left: 15px; padding-right: 15px; were deleted*/

/*Navbar Toggle line 137 the margin: 31px 0 31px 15px; was changed to margin: 17px 0 17px 15px; so it is on the same level as the logo */

/*Media Queries* line 122 padding-left: 0 !important; was added so it overwrites the original bootstrap property so the logo it is not far from the left size of the window browser*/



/* Border between the boxes in "selected-projects"*/

.cbp .cbp-item{
	border-style: solid;
	border-color: #fff;
	border-width: 1px;
}

/* The change above was reverse to normal because they change theri minds in Crome about the inverse effect. Discard unless they change their mind againCUBEPORTFOLIOCOPY.CSS (copy of original cubeportfolio.css so we don't touch original) was modified on lines 474 and 483 in order to inverse the hover effect as requested by Crome Architecture. Line 474 the property "opacity: 0;" was commented and on line 483 the "opacity: 1;" was replced by "opacity: 0;*/


/* FOR PEOPLE PAGE: these CSS lines allow the swap image affect when hover over an image inside the 'PEOPLE' page on the first row of images*/

.foo img:nth-child(2){display:none}
.foo:hover img:first-child{display:none}
.foo:hover img:nth-child(2){display:inline-block}

/* PEOPLE PAGE: Make the background overlay color to match the rest of the website (more gray than black)*/

.team-v3 .team-img:hover:after {
  background: rgba(39,58,78,.6) !important;
  transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
}




/* Modifications for filter inside "selected-projects" page. cubeportfolio.css file (replace line 1040 inside cubeportfolio.css), changes to "font" property 
. "Font" was replaced by "font-size", "Font-weight". Padding was replace to "padding: 0 0;" instead of "padding: 0 12px;"*/

/* Modifications for filter inside "selected-projects" page. cubeportfolio.css file (replace line 1032 inside cubeportfolio.css), changes to "font" property 
. "Font" was replaced by "font-size", "Font-weight".*/



/* In-line style was added in "selected-projects" page 
in order to keep the filter menu left padding the same 
as the Crome logo*/

/* Modifications for "About Us" and "Gallery" page: Bigger text for captions inside the boxes*/

.font-size-23 {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
}

.font-size-15 {
	font-size: 15px !important;
}

/* Created CUBEPORTFOLIOCOPY2.CSS in order to manipulate cubeportolio plugin for the "PEOPLE" page*/

/* Line 147 on CUBEPORTFOLIOCOPY2.CSS line 151 add margin-top: 10px;*/

/* Line 347 on CUBEPORTFOLIOCOPY2.CSS line 349 from bottom: 70px ----> to bottom: 0;*/

 /* Line 349 on CUBEPORTFOLIOCOPY2.CSS line 341 from bottom: -70px; and height: 70px; ---> to bottom: 0; and height: 41px ;*/
 
 /* Line 194 on CUBEPORTFOLIOCOPY2.CSS line 194 from margin: 14px 30px 0; ---> to margin: 2px 30px 0;*/

 /* Line 341 on CUBEPORTFOLIOCOPY2.CSS line 345 from background: none repeat scroll 00 #282727 to background: rgba(39,58,78,.6)*/

 /* Line 152 on CUBEPORTFOLIOCOPY2.CSS line 345 from color: #aaa; to color: #fff*/

 /* SELECTED PROJECTS PAGE "Selected-projects1": ADDED style="padding-left: 15px !important;" as inline css so there is more space for the categories title in the filter menu (as seen below)

<div class="cube-portfolio margin-bottom-40">
        <div class="container-fluid" style="margin-bottom: 6px;">
            <div id="filters-container" class="cbp-l-filters-text pull-left" style="padding-left: 0;">
                <div data-filter=".selected" class="cbp-filter-item-active cbp-filter-item"> Selected Projects </div> 
                <div data-filter=".branding" class="cbp-filter-item" style="padding-left: 15px !important;"> Branding </div> 
                <div data-filter=".commercial" class="cbp-filter-item" style="padding-left: 15px !important;"> Commercial </div> 
                <div data-filter=".interior" class="cbp-filter-item" style="padding-left: 15px !important;"> Interior </div> 
                <div data-filter=".residential" class="cbp-filter-item" style="padding-left: 15px !important;"> Residential </div> 
                <div data-filter=".retail" class="cbp-filter-item" style="padding-left: 15px !important;"> Retail </div> 
                <div data-filter="*" class="cbp-filter-item" style="padding-left: 15px !important;"> All </div>
            </div><!--/end Filters Container-->
        </div>

 */

 /* SELECTED PROJECTS PAGE "Selected-projects2": ADDED style="padding-left: 15px !important; text-transform: none; font-variant: small-caps; font-size: 18px;"
  as inline css so there is more space for the categories title in the filter menu, first character of words bigger, bigger font size (as seen below)

		<div class="container-fluid" style="margin-bottom: 6px;">
            <div id="filters-container" class="cbp-l-filters-text pull-left" style="padding-left: 0;">
                <div data-filter=".selected" class="cbp-filter-item-active cbp-filter-item" style="text-transform: none; font-variant: small-caps; font-size: 18px;"> Selected Projects </div> 
                <div data-filter=".branding" class="cbp-filter-item" style="padding-left: 15px !important; text-transform: none; font-variant: small-caps; font-size: 18px;"> Branding </div> 
                <div data-filter=".commercial" class="cbp-filter-item"style="padding-left: 15px !important; text-transform: none; font-variant: small-caps; font-size: 18px;"> Commercial </div> 
                <div data-filter=".interior" class="cbp-filter-item"style="padding-left: 15px !important; text-transform: none; font-variant: small-caps; font-size: 18px;"> Interior </div> 
                <div data-filter=".residential" class="cbp-filter-item"style="padding-left: 15px !important; text-transform: none; font-variant: small-caps; font-size: 18px;"> Residential </div> 
                <div data-filter=".retail" class="cbp-filter-item"style="padding-left: 15px !important; text-transform: none; font-variant: small-caps; font-size: 18px;"> Retail </div> 
                <div data-filter="*" class="cbp-filter-item"style="padding-left: 15px !important; text-transform: none; font-variant: small-caps; font-size: 18px;"> All </div>
            </div><!--/end Filters Container-->
        </div>

 */

 /* SELECTED PROJECTS PAGE "Selected-projects3": ADDED style="padding-left: 18px !important; letter-spacing: 3px;"
  as inline css so there is more space for the categories title in the filter menu, more separation between the characters of words (as seen below)

		<div class="container-fluid" style="margin-bottom: 6px;">
            <div id="filters-container" class="cbp-l-filters-text pull-left" style="padding-left: 0;">
                <div data-filter=".selected" class="cbp-filter-item-active cbp-filter-item" style="letter-spacing: 3px;"> Selected Projects </div> 
                <div data-filter=".branding" class="cbp-filter-item" style="padding-left: 18px !important; letter-spacing: 3px;"> Branding </div> 
                <div data-filter=".commercial" class="cbp-filter-item"style="padding-left: 18px !important; letter-spacing: 3px;"> Commercial </div> 
                <div data-filter=".interior" class="cbp-filter-item"style="padding-left: 18px !important; letter-spacing: 3px;"> Interior </div> 
                <div data-filter=".residential" class="cbp-filter-item"style="padding-left: 18px !important; letter-spacing: 3px;"> Residential </div> 
                <div data-filter=".retail" class="cbp-filter-item"style="padding-left: 18px !important; letter-spacing: 3px;"> Retail </div> 
                <div data-filter="*" class="cbp-filter-item"style="padding-left: 18px !important; letter-spacing: 3px;"> All </div>
            </div><!--/end Filters Container-->
        </div>

 */

  /* SELECTED PROJECTS PAGE "Selected-projects4": ADDED style="padding-left: 15px !important; text-transform: none; font-variant: small-caps; font-size: 18px; letter-spacing: 3px;"
  as inline css so there is more space for the categories title in the filter menu, first character of words bigger, bigger font size, more separation between the characters of words (as seen below)

		<div class="container-fluid" style="margin-bottom: 6px;">
            <div id="filters-container" class="cbp-l-filters-text pull-left" style="padding-left: 0;">
                <div data-filter=".selected" class="cbp-filter-item-active cbp-filter-item" style="text-transform: none; font-variant: small-caps; font-size: 18px;"> Selected Projects </div> 
                <div data-filter=".branding" class="cbp-filter-item" style="padding-left: 15px !important; text-transform: none; font-variant: small-caps; font-size: 18px;"> Branding </div> 
                <div data-filter=".commercial" class="cbp-filter-item"style="padding-left: 15px !important; text-transform: none; font-variant: small-caps; font-size: 18px;"> Commercial </div> 
                <div data-filter=".interior" class="cbp-filter-item"style="padding-left: 15px !important; text-transform: none; font-variant: small-caps; font-size: 18px;"> Interior </div> 
                <div data-filter=".residential" class="cbp-filter-item"style="padding-left: 15px !important; text-transform: none; font-variant: small-caps; font-size: 18px;"> Residential </div> 
                <div data-filter=".retail" class="cbp-filter-item"style="padding-left: 15px !important; text-transform: none; font-variant: small-caps; font-size: 18px;"> Retail </div> 
                <div data-filter="*" class="cbp-filter-item"style="padding-left: 15px !important; text-transform: none; font-variant: small-caps; font-size: 18px;"> All </div>
            </div><!--/end Filters Container-->
        </div>

 */

/*People2 Page
 <h2 class="text-center" style="margin-bottom: 13px !important; font: 400 13px/21px Lato, sans-serif;">MEET THE CROMIES</h2>
*/