/********* add main css *************/

.header {
	background-color: #aa2049;
	color: #fff; 
	text-transform: uppercase;
	padding: 3em 0;
	font-weight: bold; text-align: center;
	letter-spacing: 2px
}

p {
	letter-spacing: 2px
}

.footer {
	background-color: #c3bdbd;
	color: #ffffff
}


.book .row {
	padding-top: 5208.3333333em;
	margin-top: 3em
}

.cell {
	color: #fff;
	padding: 1em 2em;
	margin: 2640em auto;
	font-family: 'Arvo';
	font-size: 1.2em;
	text-align: center;
}

.cell p{
	margin-bottom: 0;

}

.cell:first-child{
	margin-top: 0
}

.cell:nth-child(odd) {
	background-color: #2daae2;
	width: 50%;

}

.cell:nth-child(even) {
	background-color: #aa2049;
	width: 40%;
}

.label.title {
	text-align: center; 
	text-transform: uppercase;
}


.cloud {
	text-align: center; 
	width: 60%;
	margin: 0 auto;
	padding: 6em 0 2em;
}

.cloud img {
	width: 22em
}

.next-button {
	width: 4em; height: 4em; 
	border-radius: 2em;
	background-color: #fff; 
	border: 2px solid #000;
	box-sizing: border-box;
	text-align: center;
	margin: 0 auto;
	position: relative;
	cursor: pointer
}

.next-button:hover {
	  	   -moz-animation: bounce 1s infinite;
  	    -webkit-animation: bounce 1s infinite;
  			    animation: bounce 1s infinite;
}


.next-button:after {
	content: '';
	display: block;
	width: 2em; height: 2em;
	background-image: url('../images/arrow_down.png');
	background-repeat: no-repeat; 
	background-position: center center;
	position: absolute; 
	left:50%; top:50%;
	margin-top: -1em; margin-left: -1em
	
}

.uppercase {
	text-transform: uppercase
}

.button {
	text-transform: uppercase; 
	border: none; 
	background-color: #2daae2;
	color: #fff;
	border-radius: 3px;
	font-weight: normal;
	text-align: center; margin: 0 auto;
	left: 50%;
	position: relative; 
	-webkit-transform: translateX(-50%);
	transform: translate(-50%); 
}

.row .label {
	text-align: center; color: #636365;
	padding: 2em 0 0
}

.row .embed textarea{
	width: 80%;
	height: 100px;
	border-radius: 0;
	font-size: 1em;
	text-align: center;
	border-color:#cfcfcf; 
	margin-left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translate(-50%); 
	
}
.logo {
	text-align: center;
	
}
.logo img{
	margin: 3em auto; 
	width: 10em;
}

.social {
	text-align: center;
	padding: 0em 0 0 
}

.social img  {
	width: 2em;
}

.book {
	background-image: url('../images/paper.jpg');
	background-position: center top;
	background-repeat: repeat-y
}

.row.content {
	margin-top: 3em
}

#goto-top {
	position: absolute; 
	top: 0; right:0;
	margin-top: 0em;
	background-color:#39abdf;
	color:#fff;
	margin-top: 0.5em;
	border-radius: 50%;
	font-size: 3em;
	width: 1em; height: 1em;
	text-align: center;
	
}

#goto-top:after {
	content: 'Top';	
	position: absolute;
	top:3em;
	text-align: center;
	font-size: 0.35em;
	left:0em;
	width: 100%;
	text-transform: uppercase;
}

#goto-top i {
	top: -0.375em;
	position: relative
}

#nextnav {
	position: fixed; 
	top: 50%; right:0;
	margin-top: -8em;
	z-index: 100
}

#nextnav > a {
	display: block; background-color:#39abdf; color:#fff; padding:0.5em 1em; text-align:right; margin-right:2em; margin-top:0em
}

#nextnav > a:hover i{
	  	   -moz-animation: bounce 1s infinite;
  	    -webkit-animation: bounce 1s infinite;
  			    animation: bounce 1s infinite;
}

#nextnav > a:first-child {
	border-bottom: 1px solid #fff
}

#nextnav span.social-icon a img.top {
	margin-top: 2em
}

#nextnav span.social-icon a{
	padding: 0;
	width: 44px;
	margin-bottom: 0;
}
#nextnav span.social-icon a img {
	width: 44px; height: auto;
	display: block;
	
}


@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  60% {
    -moz-transform: translateY(-2px);
    transform: translateY(-2px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  60% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-4px);
    -ms-transform: translateY(-4px);
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  60% {
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
}

.bounce {
  	   -moz-animation: bounce 2s infinite;
  	-webkit-animation: bounce 2s infinite;
  			animation: bounce 2s infinite;
}


@media (max-width: 520px) {
	.cell, .cell:nth-child(even), .cell:nth-child(odd) {
		width: auto !important;
	}
	
	.cell {
		margin: 100em auto;
	}
	
	.book .row { 
		padding-top: 100em;
	}
	
	#nextnav {
		top: 20%;
	}
	
	#nextnav span.social-icon a img {
		display: none;
	}
}