/*****************/
/*    Header     */
/*****************/

/* BORRAR padding-top: 6rem;
(45deg, # 30%, # 50%, # 110%);*/
.header {
	position: relative;
	overflow: hidden;	
	padding-bottom: 13rem;
	background: linear-gradient(45deg, #00829B 0%, #00829B 20%, #90b5be 70%);
}



.header .ocean { 
	height: 2%;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	background: #ffffff;
}

/* BORRAR top: -190px;*/
.header .wave {
	background: url('../images/wave.svg') repeat-x; 
	position: absolute;
	top: -180px;
	width: 6400px;
	height: 198px;
	animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
	transform: translate3d(0, 0, 0);
}

.header .wave:nth-of-type(2) {
	top: -170px;
	animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
	opacity: 1;
}
  
/* Wave Animation */
@keyframes wave {
	0% {
		margin-left: 0;
	}
	100% {
		margin-left: -1600px;
	}
}

@keyframes swell {
	0%, 100% {
		transform: translate3d(0,-25px,0);
	}
	50% {
		transform: translate3d(0,5px,0);
	}
}
/* end of wave animation */




/*************************/
/*     Media Queries     */
/*************************/	
/* Min-width 768px */
@media (min-width: 768px) {

	/* General Styles */
	.frame-decoration {
		height: 64px;
	}
	/* end of general Styles */


	/* Header */
	.header {
		padding-top: 4rem;
	}
	/* end of header */


	/* Features */
	.basic-4 .text-box {
		padding-right: 2rem;
		padding-left: 2rem;
	}
	/* end of features */


	/* Invitation */
	.basic-6 h4 {
		width: 35rem;
		margin-right: auto;
		margin-left: auto;
	}
	/* end of invitation */
}
/* end of min-width 768px */


/* Min-width 992px */
@media (min-width: 992px) {
	
	/* General Styles */
	.h1-large {
		font-size: 3.5rem;
		line-height: 2.25rem;
	}

	.h2-heading {
		width: 35.25rem;
		margin-right: auto;
		margin-left: auto;
	}

	.p-heading {
		width: 42.5rem;
		margin-right: auto;
		margin-left: auto;
	}

	.frame-decoration {
		height: 96px;
	}
	/* end of general styles */