/* Pretty on any device */
/* Responsive Styling */
@media screen and (max-width: 1150px) {
  .uiux-works{
    width: 100%;
  }
  .skill-item{
    max-width: 450px;
  }
}
@media screen and (max-width: 870px) {
  /* Base */
  .flex-section{
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .section-heading{
    text-align: left;
    margin: 0;
  }
  /* Work */
  .work-text-block{
    border: none;
    padding: 0 0 30px;
    max-width: 100%;
  }
  .work-list{
    width: 100%;
  }
  .web-works{
    margin: 0;
    padding: 0 var(--spacing-sm);
    border: none;
  }
  .uiux-works {
    width: 100%;
    margin: 40px 20px 0;
    padding: 40px 0 30px;
    border-top: 2px solid #efefef;
  }
  .carousel.add-margin {
    margin: 20px 0 0;
  }
  .carousel{
    height: auto;
    width: 50%;
    margin-top: var(--spacing-lg);
  }
  .carousel img {
    width: 280px;
  }

  /* Skills */
  .skills{
    padding-top: 80px;
  }
  .skills-flex{
    display: block;
    margin: 0 30px;
  }
	.skills-flex div {
    margin-bottom: 40px;
	}
  .skills-sub-heading{
    margin-bottom: 50px;
  }
  .skills-list{
    margin: 50px 20px 0;
  }
  .skill-item {
    max-width: 100%;
    margin: 0 var(--spacing-lg) 40px;
  }
	
	/* Side Project */
	.side-project-text {
    width: 100%;
		margin-bottom: 50px;
	}

  /* Contact */
  .contact {
    margin-top: 80px;
    padding: 100px 30px;
  }
}
@media screen and (max-width: 656px) {
  /* Generic */
  .text-blurb-center{
    text-align: left;
    padding: 0 0 40px;
  }

  /* Navigation */
  .email{
    display: none;
  }
	.navigation, .navigation-container{
		display: block;
	}
	.logo{
		width: 90px;
    padding: 0 20px;
	}
  .nav{
    display: block;
    text-align: center;
  }
	.nav a{
		display: none;
	}
	.nav a.icon {
    display: block;
    position: absolute;
    right: 24px;
    top: 0;
    padding-top: var(--spacing-lg);
    font-size: 30px;
	}
  .nav.responsive a:not(:last-child){
    display: block;
    padding: var(--spacing-sm) 0;
  }

  /* Banner */
  .my-name{
    font-size: 36px;
    display: inline-block;
  }
  .title{
    font-size: 56px;
  }
  .banner{
    height: auto;
    padding-bottom: var(--spacing-xl);
  }
  /* Work */
  .flex-section img {
    width: 100%;
  }
  .carousel{
    width: 100%;
  }

  /* Skills */
  .skills-flex .button-lg {
    width: 300px;
    margin: 0;
    padding: var(--spacing-md) 40px;
  }
	.side-project-list-flex{
		display: block;
	}
	.side-project-list-flex div {
    width: 100%;
	}

  /* Contact */
  .contact {
    text-align: left;
  }
  .contact.flex-me{
    align-items: baseline;
  }
}
@media screen and (max-width: 480px) {
	.button-combo {
	  display: flex;
	  flex-wrap: wrap;
	}
	.button-combo .add-margin {
  	margin: 20px 0;
	}
}
@media screen and (max-width: 360px){
	.my-name{
		line-height: 42px;
	}
	.skills-flex div {
  	margin-bottom: 60px;
	}
	.skills-flex .button-lg{
		padding: var(--spacing-md) var(--spacing-lg);
	}
}