/* Large width screens */

@media all and (min-width: 1500px) {
#timeline-targets li {
    font-size: 45px;
  }
}

@media (max-width: 1200px){
  .party figure {
    margin: 15px 15px 68px 15px;
  }
  .party .image-overlay h1 {
  font-size: 35px;
  line-height: 33px;
  }
  .gifts .content-box {
  	width:70%;
  }
}


/* Medium width screens */

@media screen and (max-width: 1000px) {
  
  .image-rate{
    height: 150px;
  }
  .content-box {
  	width: 90%;
  }
  #story .line {
    display: none;
  }
  .gifts .content-box {
  	width:90%;
  }
}


@media screen and (min-width: 700px) and (max-height: 820px) and (max-width: 1000px) {
	#story .line {
    display: block;
  }
}



/* Mobile screens */

@media screen and (max-width: 700px) {
	h1 {
		font-size:80px;
		text-align: center;
		line-height: 72px;
	}
	h2 {
		font-size: 26px;
		margin:0;
		line-height: 20px;
	}
	h5 {
		margin-bottom: 10px;
		font-size: 29px;
		line-height: 33px;
	}
	.home-img {
		width: 200px;
		height: 177px;
		background-size: cover;
	}
	.home .content-box {
		/*top: 50vh;*/
	}
	.video-container {
		display: none;
	}
	
	.home #wrapper h4 {
		letter-spacing: 3px;
		word-spacing: 2px;
	}
	#clock {
		font-size: 40px;
	}
	#clock div {
		margin: 10px 5px 0px 5px;
	}
	#clock div span {
	  font-size: 17px;
	  margin: 6px 0 0 0;
	}
	.hamburger {
		display: block;
		position: absolute;
		top: 6px;
		right: 6px;
	}
	.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after, .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {
		background-color:#fff;
	}
	.home-nav {
		display: block;
	}
	.home-nav img {
		width:45px;
	}
	ul#navigation {
		overflow: hidden;
		margin: 0;
		display: block;
		*-webkit-transition: .3s height ease-out;
	  -moz-transition: .3s height ease-out;
	  transition: .3s height ease-out;
	  *-webkit-transition: .3s max-height ease-out;
	  -moz-transition: .3s max-height ease-out;
	  transition: .3s max-height ease-out;
		max-height: 0;
	}
	ul#navigation.open {
		/*height: auto;*/
		max-height: 300px;
	}
	ul#navigation li {
		display: block;
		margin: 18px;
	}
	ul#navigation li a {
		padding: 18px 20%;
		font-size: 40px;
	}
	.content-box {
		width: 100%;
		margin:0;
		padding:0;
	}
	/* Our Story */
	.story .title {
		left:auto;
		right:auto;
		top: 72px;
		width:100%;
	}
	#story-content {
		padding-top: 150px;
		height: calc(100% - 150px);
	}
	.story-inner {
		width: 98%;
	}
	.timeline-arrow {
		width: 40px;
		height: 40px;
		top: 160px;
	}
	#timeline-hint {
		visibility: visible;
	}
	#timeline-targets {
		bottom:0;
	}
	#timeline-targets li {
		padding-left:3px;
	}
	#prev-arrow {
		left: 2px;
	}
	#next-arrow {
		right: 2px;
	}
	.acc-btn {
		margin-top: 0;
	}
	.acc-btn h3 {
		font-size: 40px;
		margin: 10px 0;
		padding: 0 20px;
	}
	.acc-content-inner {
		padding: 1px 20px;
		max-height: 30vh; 
		overflow-y: scroll;
		box-shadow: 0px -5px 5px -5px #909090 inset;
	}
	.story p {
		font-size: 14px;
		line-height: 17px;
		margin: 9px 0;
	}
	.carousel {
		height: 50vw;
	}
	.flickity-button {
	  width: 44px;
	  height: 44px;
	}
	.slide.info, .slide.rsvp {
		height: auto;
	}
	.info .content-box {
		padding: 80px 0 10px 0;
	}
	.info .title {
	  padding-top: 10px;
	}
	.info-icon, .info-wrapper {
		margin-top:0;
	}
	.party {
		padding-bottom: 80px;
		padding-top: 80px;
	}
	.party .toggle-team {
		padding: 10px 0px;
	}
	.party figure {
		width:25%;
		height: 24.5%;
		margin: 15px 1px 8px 1px;
	}
	.party figure img {
		/*width: 100%;*/
		/*height: 100%;*/
		/*margin: 0;*/
	}
	.party h3 {
		font-size: 49px;
		margin: 25px 0 5px 0;
	}
	.party .image-overlay h1 {
		font-size: 25px;
		line-height: 23px;
	}
	.party .image-overlay p {
		font-size: 12px;
	}
	.rsvp .content-box {
		padding-bottom: 60px;
	}
	.gifts .content-box {
		margin-top: 70px;
	}
	#responseForm div.btn {
		margin-bottom: 30px;
	}
	#responseForm .labels {
		width:80%;
		height: 27px;
		text-align: left;
		margin: 0 10% 0 10%;
		padding-top: 17px;
		padding-bottom: 0;
	}
	#responseForm .labels abbr {
		text-align: left;
	}
	#responseForm .forms {
		width:80%;
		margin: 0 10% 0 10%;
	}
	#responseForm input, #responseForm textarea {
		width:96%;
		padding: 0;
	}
	#thanksTextYes, #thanksTextNo {
		padding: 0 5%;
	}
  #thanksTextYes p, #thanksTextNo p {
		font-size: 44px;
		line-height: 35px;	
	}
	#next {
		bottom: 80px;
	}
	.gifts .content-box {
  	width:100%;
  }
	.registry {
		width:25%!important;
		height: 16vw;
	}
}

/* Screen too short */
@media screen and (min-width: 700px) and (max-height: 820px) {
	h1 {
		font-size:100px;
		text-align: center;
		line-height: 72px;
	}
	h2 {
		font-size: 28px;
		margin:0;
		line-height: 40px;
	}
	h5 {
		margin-bottom: 10px;
	}
	.story .title {
		left:auto;
		right:auto;
		top: 77px;
		width:100%;
	}
	#story-content {
		padding-top: 150px;
		height: calc(100% - 150px);
	}
	.story-inner {
		width: 98%;
	}
	.timeline-arrow {
		width: 40px;
		height: 40px;
		top: 160px;
	}
	#prev-arrow {
		left: 2px;
	}
	#next-arrow {
		right: 2px;
	}
	.acc-btn {
		margin-top: 0;
	}
	.acc-btn h3 {
		font-size: 40px;
		margin: 10px 0;
		padding: 0 20px;
	}
	.acc-content-inner {
		padding: 1px 20px;
		max-height: 30vh; 
		overflow-y: scroll;
		box-shadow: 0px -5px 5px -5px #909090 inset;
	}
	.story p {
		font-size: 14px;
		line-height: 17px;
		margin: 9px 0;
	}
	#story #svg-wrapper, #story #target-wrapper {
		max-width: 700px;
	}
	#story #svg-wrapper svg {
		top: -171px!important;
	}
	#story .line {
		bottom: 122px;
		height: 5px;
	}
	#timeline-targets li {
		font-size: 30px;
	}
}


/* Tiny screens */


@media (max-width: 480px){
  .image-rate{
    width: calc(50% - 5px);
    height: calc(50vw - 5px);
  }
}