@charset "utf-8";
/* CSS Document */


#page #header #desktopHeader{
/*    display:none;*/
}

#page #header #mobileHeader{
    display:none;
    width:100%;
    height:81px;
}

#page #header #mobileHeader a#logo{
/*    margin:auto;*/
}

#page #header #mobileHeader .menu-btn span{
    display: block;
    width: 40px;
    height: 5.5px;
    margin: 6.5px 0;
    background: rgb(250,250,250);
    z-index: 99;
    cursor:pointer;
}

div#menu-btn.menu-btn{
    float:right;
    margin-right: 10px;
    margin-top: 7px;
    padding:12px 10px;
}

div#menu-btn:before {
	content: '';
    display: block;
    height: 49px;
    width: 1px;
    position: absolute;
    background: #868686;
    margin-left: -21px;
		margin-top:-3px;
}

.responsive-menu{
    display: none;
    position:absolute;
    left:0;
    right:0;
    top:81px;

}

.responsive-menu #navigation ul{
    width:100%;
    background-color:white;
    color:black;
    list-style: none;
    font-family:arial;
    font-weight:bold;
    font-size:18px;
    line-height:5rem;
/*    height:100vh;*/
    padding:0;
    margin:0;
}

.responsive-menu #navigation ul.menu li{
    float:none;
}

.responsive-menu #navigation ul.level1 li a{
    border:0;
    font-size:18px;
    color:black;
    letter-spacing:1px;
    line-height:35px;
    padding-left:0;
}

.responsive-menu #navigation ul.level1 li.expanded a{
    background:none;
}

.responsive-menu #navigation ul.level1 li.expanded a#nav-our-work.active{
    background:none;
}

 
.expand {
    display: block !important; 
    width:100%;
    clear:both;
    padding-top:38px;
    position:relative;
    z-index:1000;
}

#searchWrap{
    width:100%;
    background-color:#f0f0f0;
    height:55px;
    clear:both;
}

#searchWrap #search-block{
    border-left:0;
    margin:0 0 0 0;
    padding:0;
}

#searchWrap #search-block a#search-link{
    background:url(http://gavinsolmonesewp.kdgtest.com/wp-content/themes/gavinsolmonese/assets/images/mobileSearch.png) no-repeat;
    width:22px;
    height:23px;
    margin-top:16.75px;
    
}

#searchWrap #search-block.active .search-form{
    padding:0;
}

#searchWrap #search-block.active{
    width:100%;
}

#searchWrap #search-block #search-form-wrapper{
    background:none;
}

#searchWrap #search-block #search-form-wrapper input{
    height:55px;
    margin-top:0px;
    background-color:rgba(250,250,250,0);
    border:none;
    padding:0;
    box-sizing:border-box;
    padding-left:38px;
}

#searchWrap #search-block #search-form-wrapper button {
	margin-right:18px;
}

#searchWrap #search-block #search-form-wrapper button img{
    padding-top:16.75px;
    padding-right:20px;
		padding-bottom:11px;
		padding-left:20px;
}

.responsive-menu #navigation{
    float:none;
}

.responsive-menu #navigation nav#main-menu{
    padding:0;
}

.responsive-menu #main-menu ul.level1, #main-menu ul.level2, #main-menu ul.level3{
    padding-left:38px;
    box-sizing: border-box;
}

.responsive-menu #main-menu ul.level1 li{
    margin:0;
}

.responsive-menu #main-menu ul.level1 li.first.leaf{
    padding-left:30px;
}

.responsive-menu #main-menu ul.level1 li.first.leaf a{
    color:#858585;
    text-transform: none;
}

.responsive-menu #main-menu ul.level1 li.leaf{
    padding-left:30px;
}

.responsive-menu #main-menu ul.level1 li.first.expanded.level3mobile.expand li.leaf{
    border-left:5px solid #f0f0f0;
    margin-left:10px;
}

.responsive-menu #main-menu ul.level1 li.expanded.level2mobile.expand li.leaf{
    border-left:5px solid #f0f0f0;
    margin-left:10px;
}

.responsive-menu #main-menu ul.level1 li.leaf a{
    color:#858585;
    text-transform: none;
}

.responsive-menu #main-menu ul.level1 li.first.expanded.level3mobile{
    padding-left:30px;
}

.responsive-menu #navigation #main-menu ul.level1 li.first.expanded.level3mobile:before{
    content:'';
    background:url('../images/caret-right.png') left center no-repeat !important;
    display: block;
    width:8px;
    height: 12px;
    position:absolute;
    margin-left:-20px;
    box-sizing: border-box;
    padding:40px 20px 10px 0;
    
}

.responsive-menu #navigation #main-menu ul.level1 li.expanded.level3mobile.expand:before{
    content:'';
    background:url('../images/caret-expand.png') left center no-repeat !important;
    display: block;
    width:8px;
    height: 12px;
    position:absolute;
    margin-left:-24px;
    box-sizing: border-box;
    padding:60px 20px 10px 0;
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg);
		margin-top:-2px;
		
}

.responsive-menu #navigation #main-menu ul.level1 li.expanded.level2mobile:before{

    content:'';
    background:url('../images/caret-right.png') left center no-repeat !important;
    display: block;
    width:8px;
    height: 12px;
    position:absolute;
    margin-left:-20px;
    box-sizing: border-box;
    padding:40px 20px 10px 0;
    
}

.responsive-menu #navigation #main-menu ul.level1 li.expanded.level2mobile.expand:before{
    content:'';
    background:url('../images/caret-expand.png') left center no-repeat !important;
    display: block;
    width:8px;
    height: 12px;
    position:absolute;
    margin-left:-24px;
    box-sizing: border-box;
    padding:60px 20px 10px 0;
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg);
		margin-top:-2px;
}


.responsive-menu #navigation #main-menu ul.level1 li.first.expanded.level3mobile a{
    color:#858585;
    text-transform: none;
}

.responsive-menu #main-menu ul.level1 li.expanded.level2mobile{
    padding-left:30px;
}

.responsive-menu #main-menu ul.level1 li.expanded.level2mobile a{
    color:#858585;
    text-transform: none;
}

.responsive-menu #main-menu ul ul{
    position:relative;
    top:0;
}

.responsive-menu #navigation * {box-sizing:border-box;}











/*MEDIA QUERIES*/

@media screen and (max-width: 980px){
    #page #header #desktopHeader{
        display:none;
    }
}

@media screen and (max-width: 980px){
    #page #header #mobileHeader{
        display:block;
    }
}

@media screen and (max-width: 980px){
    #navigation ul li:hover ul, #navigation ul li.hover ul {
        display: none;
    }
}

@media screen and (max-width: 520px){
    #page #header #mobileHeader a#logo{
        margin-left:30px;
    }
}

@media screen and (max-width: 520px){
    #searchWrap #search-block #search-form-wrapper input{
        padding-left:30px;
    }
}


@media screen and (max-width: 520px){
    #searchWrap #search-block #search-form-wrapper button{
        margin-right:30px;
    }
}

@media screen and (max-width: 520px){
    .responsive-menu #main-menu ul.level1, #main-menu ul.level2, #main-menu ul.level3{
        padding-left:30px;
    }
}

@media screen and (max-width: 505px){
    #page #header #mobileHeader a#logo{
        margin-left:25px;
    }
}

@media screen and (max-width: 505px){
    #searchWrap #search-block #search-form-wrapper input{
        padding-left:25px;
    }
}


@media screen and (max-width: 505px){
    #searchWrap #search-block #search-form-wrapper button{
        margin-right:25px;
    }
}

@media screen and (max-width: 505px){
    .responsive-menu #main-menu ul.level1, #main-menu ul.level2, #main-menu ul.level3{
        padding-left:25px;
    }
}

@media screen and (max-width: 490px){
    #page #header #mobileHeader .menu-btn span{
        width: 30px;
        height: 4.5px;
        margin: 5.5px 0;
    }
    #page #header #mobileHeader a#logo{
        width:325px;
    }
		div#menu-btn:before {margin-top:-4px; height:44px;}
		#page #header #mobileHeader {height:74px;}
		.responsive-menu {top:74px;}
}


@media screen and (max-width: 460px){
    #page #header #mobileHeader a#logo{
        margin-left:20px;
    }
}

@media screen and (max-width: 460px){
    #searchWrap #search-block #search-form-wrapper input{
        padding-left:20px;
    }
		#searchWrap #search-block #search-form-wrapper button {
				margin-right:0;
		}
}

@media screen and (max-width: 460px){
    .responsive-menu #main-menu ul.level1, #main-menu ul.level2, #main-menu ul.level3{
        padding-left:20px;
    }
}


@media screen and (max-width: 440px){
    #page #header #mobileHeader a#logo{
        width:75%;
        margin-left:10px;
    }
}

@media screen and (max-width: 440px){
    #searchWrap #search-block #search-form-wrapper input{
        padding-left:10px;
    }
}

@media screen and (max-width: 440px){
    .responsive-menu #main-menu ul.level1, #main-menu ul.level2, #main-menu ul.level3{
        padding-left:10px;
    }
}


@media screen and (max-width: 440px){
    #searchWrap #search-block #search-form-wrapper button{
        margin-right:10px;
    }
		div#menu-btn.menu-btn {margin-right:5px;}
		div#menu-btn:before {margin-left:-16px;}
}

@media screen and (max-width: 360px){
	div#menu-btn.menu-btn {margin-right:0;}
	div#menu-btn:before {margin-left:-11px;}
}