/*-----------------------------------------------------------------------------------*/
/*  Footer
/*-----------------------------------------------------------------------------------*/

#colophon {
    clear: both;
    overflow: hidden;
    margin: 0 auto;
    background: $color-footer-background;
    border-top: 1px solid  $color-footer-background;  
      // seems useless, but in case someone changes the background via user style
      // this will make a line between main content and footer
    color: #fff;
    padding-top: 40px;
    padding-bottom: 40px;
  
    .no-sidebar & {
	margin-top: 60px;
    }

    .footer-menu ul a {
        color: $color-footer-text-links;
    }
    p,
    #site-info {
        color:  $color-footer-text;
        a {
            color:  $color-footer-text-links;
        }
    }
  
    .footer-menu ul a:focus, 
    #site-info a:focus,
    .footer-menu ul a:hover, 
    #site-info a:hover {
        color:  $color-footer-text-links-hover;
    }
    a {
        color: $color-footer-text-links;
    }

    .custom-logo-wrap {
	text-align: left;
	display: block;
	padding-bottom: 45px;
    }
    
}

.page-template-shop-front #colophon {
  margin-top: 0;
}

#site-info {
  padding-top: 10px;
  ul {
    margin: 0;
    padding: 0;
    li {
        display: block;

        &.copyright:after, 
        &.wp-credit:after, 
        &.theme-author:after {
              content: '\002E';
        }
    }
  }
}

.title-footer {
  display: block;
  margin: 0;
  padding-bottom: 45px;
  font-size: 24px;
  font-size: 1.5rem;
  font-weight: bold;
}

/* --- Big Footer Featured Area --- */

.big-footer-feature {
  display: block;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
#big-footer-feature h2.footer-feature-title,
#big-footer-feature h3.footer-feature-title {
  position: relative;
  display: block;
  padding: 8px 0 20px;
}

.big-footer-feature p {
  margin-bottom: 0;
  &.text-small {
	padding: 10px 0 0 0;
  }
}

.footer-feature-textwrap {
  padding: 15px 0 0 50px;
}

.footer-feature-image a {
  display: block;
  line-height: 0;
}

/* --- Big Instagram Footer Widget Area --- */

.big-instagram-wrap {
  .widget h2.widget-title {
    display: none;
  }
  .widget-area .widget {
    position: relative;
    padding: 35px 0 0 0;
  }
}

.widget ul.instagram-pics li {
  a {
    width: 16.66666666666667%;
  }
  &:after {
    display: none;
  }
  a {
    display: block;
    float: left;
    line-height: 0;
  }
}

.null-instagram-feed {
  position: relative;
  overflow: hidden;
}

.big-instagram-wrap .null-instagram-feed .clear {
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
}

/* --- Footer Menus --- */

.footer-wrap {
  margin: 0 auto;
}

.footer-menus-wrap {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-menu {
  h3.footer-menu-title {
    padding: 0 0 20px;
  }
  width: 50%;
  float: left;
}

#footer-menu-one, 
#footer-menu-three {
  clear: left;
}

#footer-menu-two, 
#footer-menu-four {
  clear: right;
}

.footer-menu ul {
  margin: 0;
  padding: 0 0 60px;
  ul {
    margin: 0;
    padding: 0;
  }
  li {
    padding: 0 0 10px;
  }
  ul li:last-child {
    padding: 0;
  }
}

/* --- Footer Search --- */

#footer-search {
    width: 100%;
    margin: 0 auto;
    text-align: left;
}

/* --- Footer Social --- */

#footer-social {
  padding-top: 30px;

  ul {
    margin: 0;
    padding: 0;
    display: inline-block;
  }
  h3.socialmedia,
  span {
    @extend .screen-reader-text;
    color: rgba(255, 255, 255, 0.5);
  }
  ul li {
    display: inline-block;
  }
}



@media screen and (min-width: $breakpoint-600) {
    .footer-feature-image {
	width: 47.8134110787172%;
	float: left;
	margin-right: 2.1865889212828%;
    }
    .footer-feature-textwrap {
	width: 47.8134110787172%;
	float: right;
	padding-top: 0;
	margin-left: 2.1865889212828%;
    }
}

@media screen and (min-width: $breakpoint-sm) {
    #colophon {
      padding-top: 70px;
    }
    #site-info {
	font-size: 14px;
	font-size: 0.875rem;
	ul li {
	  display: inline-block;
	}
    }
    #footer-social {
	padding-top: 10px;
    }	
    .big-footer-feature {
	margin-bottom: 70px;
	padding-bottom: 70px;
	
	h3.footer-feature-title {
	    padding: 8px 0 35px;
	}
    }
    .big-instagram-wrap .widget-area .widget {
	padding: 45px 0 0 0;
    }
}

@media screen and (min-width: $breakpoint-1024) { 
    .footer-feature-btn {
	margin: 40px 0 0 0;
	padding: 18px 40px;
    }
    .big-footer-feature p.text-small {
	padding: 20px 0 0 0;
    }
}

@media screen and (min-width: $breakpoint-1060) {
   .footer-feature-textwrap {
        p.text-big {
	    font-size: 1.4rem;
        }
        p.text-small {
            font-size: .8rem;
            line-height: 1rem;
        }
    }
    .title-footer {
	width: 31.74603174603175%;
	/* -- 400px at 1440px ---*/
	margin-right: 2.38095238095238%;
	/* -- 30px at 1440px ---*/
	float: left;
    }
     #colophon {
	padding-left: 0;
	padding-right: 0;
	
	.custom-logo-wrap {
	    width: 31.74603174603175%;
	    /* -- 400px at 1440px ---*/
	    margin-right: 2.38095238095238%;
	    /* -- 30px at 1440px ---*/
	    float: left;
	    .custom-logo-link img {
		max-width: 130px;
		max-height: 59px;
	    }
	}
    }
  

    #footer-menu-one, 
    #footer-menu-two, 
    #footer-menu-three, 
    #footer-menu-four {
	clear: none;
    }
    .footer-menu {
	width: 14.68253968253968%;
	/* -- 185px at 1440px ---*/
	float: left;
    }
    #footer-menu-one, 
    #footer-menu-two, 
    #footer-menu-three {
	margin-right: 2.38095238095238%;
	/* -- 30px at 1440px ---*/
    }
    .title-footer {
	font-size: 36px;
	font-size: 2.25rem;
    }
    #site-info {
	width: 50%;
	float: left;
    }
    #footer-social {
	padding-top: 23px;
	float: right;
	text-align: right;
	ul {
	    float: left;
	}

	span {
	    display: inline-block;
	    float: left;
	    padding: 8px 15px 0px 0px;
	}
    }
    .footer-feature-image {
	width: 31.74603174603175%;
	margin-right: 0;
    }
    .footer-feature-textwrap {
	width: 65.87301587301587%;
	margin-left: 0;
    }
}