@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');

html {
	height: 100%;
	font-family: 'Montserrat', sans-serif;
}

body {
	
	background-attachment: fixed;
	background-image: url("../images/img-head/guide-bk2.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-color: white;
	width: 100%;
	margin: 0px;
	padding: 0px;	
}

.titlepage{
	font-family: 'Alfa Slab One', cursive;
	font-size: 4.8rem;
	background-color: none;
	text-shadow: 0px 3px 2px #000;
	width: 87%;
	margin: auto;
	text-align: center;
	perspective: 800px;
	padding: 15px;
 }
.titlepage span {
   display:inline-block;
   margin-left: -20px;
   color: rgba(236,5,13,1.00);
   transform-origin: 50% 70%;
}
 span:nth-child(2n) {
  color: white;
}

span:nth-child(1) {
	 margin-right:20px;
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) both;
}

 span:nth-child(2) {
  margin-right:20px;
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) .2s both;
}

 span:nth-child(3) {
 margin-right:20px;
 animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) .4s both;
}

 span:nth-child(4) {
	 margin-right: 20px;
 animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) .6s both;
}

 span:nth-child(5) {
  margin-right: 20px;
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) .8s both;
 }

 span:nth-child(6) {
	 margin-right:20px; 
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1s both;
}

 span:nth-child(7) { 
  margin-right:20px;
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1.2s both;
}

span:nth-child(8) { 
 margin-right:20px;
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1.2s both;
}

span:nth-child(9) { 
 margin-right:20px;
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1.2s both;
}

span:nth-child(10) { 
 margin-right:20px;
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1.2s both;
}

span:nth-child(11) { 
 margin-right:20px;
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1.2s both;
}
span:nth-child(12) { 
 margin-right:20px;
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1.2s both;
}
span:nth-child(10) { 
 margin-right:20px;
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1.2s both;
}


@keyframes flipUp {
  from {transform: rotateX(90deg);}
  to {tranform: rotateX(0deg);}
}

*{
  margin: 0;
  padding: 0
}

.titlepage{
	font-family: 'Alfa Slab One', cursive;
	font-size: 4.8rem;
	background-color: none;
	text-shadow: 0px 3px 2px #000;
	width: 87%;
	margin: auto;
	text-align: center;
	perspective: 800px;
	padding: 15px;
 }
.titlepage span {
   display:inline-block;
   margin-left: -20px;
   color: rgba(236,5,13,1.00);
   transform-origin: 50% 70%;
}
 span:nth-child(2n) {
  color: white;
}

span:nth-child(1) {
	 margin-right:20px;
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) both;
}

 span:nth-child(2) {
  margin-right:20px;
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) .2s both;
}

 span:nth-child(3) {
 margin-right:20px;
 animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) .4s both;
}

 span:nth-child(4) {
	 margin-right: 20px;
 animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) .6s both;
}

 span:nth-child(5) {
  margin-right: 20px;
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) .8s both;
 }

 span:nth-child(6) {
	 margin-right:20px; 
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1s both;
}

 span:nth-child(7) { 
  margin-right:20px;
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1.2s both;
}

span:nth-child(8) { 
 margin-right:20px;
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1.2s both;
}

span:nth-child(9) { 
 margin-right:20px;
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1.2s both;
}

span:nth-child(10) { 
 margin-right:20px;
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1.2s both;
}

span:nth-child(11) { 
 margin-right:20px;
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1.2s both;
}
span:nth-child(12) { 
 margin-right:20px;
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1.2s both;
}
span:nth-child(10) { 
 margin-right:20px;
  animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1.2s both;
}


@keyframes flipUp {
  from {transform: rotateX(90deg);}
  to {tranform: rotateX(0deg);}
}
div img{
	image: 100%;
	padding: 5px;
	margin: 2px 5px 2px 5px;
	position: relative;
	clear: both;
	text-align: center;
	
}
.container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.block {
  width: 550px;
  max-width: 90%;
  background: rgba(41,1,221,0.4);
  height: 300px;
  margin: 20px;
  position: relative;
  z-index: 1;
   padding: 10px;
}
.block h1{
	
	font-family:'Montserrat', sans-serif;
	color: white;
	font-size: 1.4em;
	font-weight: 700;
}
.block img {
	float: left;
	position: relative;
	padding: 3px;
}
.block p {
	font-family: 'Montserrat',sans-serif;
	color: white;
	font-size: 1em;
	padding: 15px;
	line-height: 1.5;
}

.firstcharacter {
	font-family: 'Georgia', serif;
	float: left;
	color: rgba(219,193,51,1);
	text-shadow: 0px 5px 2px #000;
	font-size: 3cm;
	line-height: 60px;
	padding-top: 30px;
	padding-right: 8px;
	padding-left: 3px;
	padding-bottom: 35px;
  }
.block a {
	font-family: 'Montserrat',sans-serif;
	color: white;
	font-size: 1em;
	padding: 15px;
	text-transform: uppercase;
	font-weight: 500;
	text-decoration: none;
	
}

.block a:hover {
	font-family: 'Montserrat',sans-serif;
	color: #d3b313;
	font-size: 1em;
	padding: 15px;
	text-transform: uppercase;
	font-weight: 500;
	text-decoration: none ;
	
}
.block.sticky h1{
	font-family: 'Abril Fatface', cursive;
	color: #fff;
	font-size: 1.5rem;
	padding: 15px;
}
.sticky {
  font-family: 'Abril Fatface', cursive;
  font-size: 1.5em;
  letter-spacing: 3px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  height: 130px;
  z-index: 150;
  background: rgba(214,11,14,0.6);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center
}

/* Footer
–––––––––––––––––––––––––––––––––––––––––––––– */

footer{
    background: rgba(41,1,221,0.8);
	height: auto;
	background-size: cover;
	margin-top: 40px;
	margin-bottom: 0px;
	position: relative;
	padding-right: 20px;
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 20px;
	display: block;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	clear: both;
}
footer img{
	padding: 7px;
}
.container{
	padding: 10px;
}

ul.social{
	display: block;
	margin: 5% 0;
	list-style-type: none;
	text-align: center;
}
ul.social li{
	font-size: 2em;
	display: inline;
	padding: 0 1%;
}
ul.social li a{
	color: white;
}
ul.social li.facebook a:hover{color: rgb(59,89,152);}
ul.social li.twitter a:hover{color: rgb(0,172,237);}
ul.social li.instagram a:hover{color: rgb(81,127,237);}
ul.social li.youtube a:hover{color: rgb(187,0,0);}
ul.social li.flickr a:hover{color: rgb(255,0, 132);}
 
 p.copyright{
	font-family: 'Montserrat', sans-serif;
	text-align: center;
	color: white;
	font-size: .7em;
}
 
footer #privacy {
	font-family: 'Montserrat', sans-serif;
	padding: 20px;
	margin-top: 20px;
	color: white;
}
h4 a{
	font-family: 'Montserrat', sans-serif;
	text-align: center;
	color: white;
	font-size: 0.8em;
	padding: 5px;
	text-decoration: none;
}
h4 a:hover{
	font-family: 'Montserrat', sans-serif;
	text-align: center;
	color: rgba(255,0,0,1);
	font-size: 0.8em;
	padding: 5px;
	text-decoration: none;
}
footer #privacy h3 {
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	font-weight: normal;
	text-transform: capitalize;
	color: rgba(51,51,51,1);
}
footer #privacy p {
	font-size: 0.5em;
	text-align: justify;
	-webkit-transition: font-size .5s ease;
	-moz-transition: font-size .5s ease;
	-o-transition: font-size .5s ease;
	transition: font-size .5s ease;
	color: rgba(51,51,51,1);
}
footer #privacy p:hover {
	font-size: 1em;
	font-family: 'Montserrat', sans-serif;
	color: white;
}