@font-face {
	font-family: 'LatoRegular';
	src: url('fonts/LatoRegular.eot');
	src: url('fonts/LatoRegular.eot') format('embedded-opentype'), url('fonts/LatoRegular.woff2') format('woff2'), url('fonts/LatoRegular.woff') format('woff'), url('fonts/LatoRegular.ttf') format('truetype'), url('fonts/LatoRegular.svg#LatoRegular') format('svg');
}
@font-face {
	font-family: 'LatoBold';
	src: url('fonts/LatoBold.eot');
	src: url('fonts/LatoBold.eot') format('embedded-opentype'), url('fonts/LatoBold.woff2') format('woff2'), url('fonts/LatoBold.woff') format('woff'), url('fonts/LatoBold.ttf') format('truetype'), url('fonts/LatoBold.svg#LatoBold') format('svg');
}
@font-face {
	font-family: "Flaticon";
	src: url("icon-fonts-start/flaticon.eot");
	src: url("icon-fonts-start/flaticon.eot#iefix") format("embedded-opentype"), url("icon-fonts-start/flaticon.woff") format("woff"), url("icon-fonts-start/flaticon.ttf") format("truetype"), url("icon-fonts-start/flaticon.svg") format("svg");
	font-weight: normal;
	font-style: normal;
}
body {
	background-image: url(../imagesStart/index_page/index.png);
	background-size: cover;
	background-position: center;
	margin-bottom: 60px;
	font-family: 'LatoRegular';
	color: #788491;
	font-size: 13px;
	margin: 0px;
}
html {
	position: relative;
	min-height: 100%;
}
.center_img {
	margin: 0px auto;
	max-width:300px;
	padding-top: 120px;
}
.tooltip_wrapper {
	text-transform: uppercase;
	color: #555;
	cursor: pointer;
	font-family: 'LatoRegular';
	font-size: 18px;
	margin: 0px 0;
	padding: 5px 0px;
	position: relative;
	text-align: right;
	width: auto;
	-webkit-transform: translateZ(0); /* webkit flicker fix */
	-webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}
.tooltip_icon {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-repeat: no-repeat;
	background: #ffffff; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(#ffffff, #dcebf6); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#ffffff, #dcebf6); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#ffffff, #dcebf6); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#ffffff, #dcebf6); /* Standard syntax */
	border: rgba(0,0,0,0.15) 4px solid;
	display: inline-block;
}

.tooltip_icon img { width:100%;
}

.tooltip_wrapper .tooltip {
	background: #8dc63f;
	bottom: 100%;
	text-align: center;
	border: 1px solid #85b315;
	color: #fff;
	border-radius: 3px;
	display: block;
	right: 35%;
	margin-bottom: -85px;
	opacity: 0;
	padding: 20px;
	pointer-events: none;
	position: absolute;
	width: 100%;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	-ms-transform: translateY(10px);
	-o-transform: translateY(10px);
	transform: translateY(10px);
	-webkit-transition: all .25s ease-out;
	-moz-transition: all .25s ease-out;
	-ms-transition: all .25s ease-out;
	-o-transition: all .25s ease-out;
	transition: all .25s ease-out;/* -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);*/
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.tooltip_wrapper .tooltip:before {
	bottom: -20px;
	content: " ";
	display: block;
	height: 20px;
	left: 0;
	position: absolute;
	width: 100%;
}
/* CSS Triangles - see Trevor's post */
.tooltip_wrapper .tooltip:after {
	/*  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #1496bb 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;*/
  
	border-top: solid transparent 10px;
	border-bottom: solid transparent 10px;
	border-left: solid #8dc63f 10px;
	bottom: 32px;
	content: " ";
	height: 0;
	right: -10px;
	margin-left: -13px;
	position: absolute;
	width: 0;
}
.tooltip_wrapper:hover .tooltip {
	opacity: 1;
	pointer-events: auto;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px);
}
/* IE can just show/hide with no transition */
.lte8 .tooltip_wrapper .tooltip {
	display: none;
}
.lte8 .tooltip_wrapper:hover .tooltip {
	display: block;
}
.click_more {
	font-family: 'LatoRegular';
	font-size: 15px;
	color: #000000;
}
#trigger-overlay {
	display: none;
}
.top_button {
	float: right;
}
.button {
	background-color: #4CAF50; /* Green */
	border: none;
	color: white;
	padding: 5px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 21px 10px;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	cursor: pointer;
	border-radius: 20px;
}
.button1 {
	background-color: white;
	color: black;
	border: 2px solid #aab718;
}
.button1:hover {
	background-color: #aab718;
	color: white;
}
.button2 {
	background-color: white;
	color: black;
	border: 2px solid #00aeef;
}
.button2:hover {
	background-color: #00aeef;
	color: white;
}
.button3 {
	background-color: white;
	color: black;
	border: 2px solid #f17192;
}
.button3:hover {
	background-color: #f17192;
	color: white;
}
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
	position: relative;
	background-color: #ffffff;
	margin: auto;
	padding: 0;
	max-height: 450px;
	border: 0px solid #888;
	width: 80%;
	max-width: 800px;
	border-radius: 5px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
 from {
top:-300px;
opacity:0
}
 to {
top:0;
opacity:1
}
}
 @keyframes animatetop {
 from {
top:-300px;
opacity:0
}
 to {
top:0;
opacity:1
}
}
/* The Close Button */
.popupclose {
	color: white;
	float: right;
	font-size: 28px;
	font-weight: bold;
	padding: 1px 10px;
	margin: -16px -25px 0px 0px;
	border-radius: 50%;
	background-color: #de608d;
}
.popupclose:hover, .popupclose:focus {
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	background-color: #8dc63f;
}
.modal-header {
	padding: 2px 16px;
	color: white;
}
.modal-body {
	padding: 35px;
	font-family: 'LatoRegular';
	font-size: 13px;
	text-align: justify;
	line-height: 20px;
}
.modal-footer {
	padding: 2px 16px;
	color: white;
}
.scrollbar {
	margin-left: 0px;
	height: 300px;
	width: 100%;
	overflow-y: scroll;
	padding-right: 20px;
	border-radius: 5px;
}
.force-overflow {
	min-height: 450px;
}
#wrapper {
	text-align: center;
	width: 500px;
	margin: auto;
}


/*
 *  STYLE 3
 */

#style-3::-webkit-scrollbar-track {
	/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
	background-color: #fff;
}
 #style-3::-webkit-scrollbar {
 width: 6px;
 background-color: #F5F5F5;
}
 #style-3::-webkit-scrollbar-thumb {
 background-color: #f17192;
 border-radius:10px;
}




@media (max-width: 992px) {
#trigger-overlay {
	display: block;
	color: #ffffff;
	background-color: #eb5c81;
	border: 2px solid #ffffff;
	font-size: 18px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	outline: 0;
	cursor: pointer;
	z-index: 2;
	padding: 10px;
	position: absolute;
	right: 5%;
	top: 10%;
}
.top_button {
	display: none;
}
.tooltip_wrapper {
	text-transform: uppercase;
	color: #555;
	cursor: help;
	font-family: "Gill Sans", Impact, sans-serif;
	font-size: 20px;
	margin: 0;
	display: inline-table;
	padding: 15px 20px;
	position: relative;
	text-align: center;
	width: 200px;
	-webkit-transform: translateZ(0); /* webkit flicker fix */
	-webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}
.tooltip_wrapper .tooltip {
	background: #8dc63f;
	bottom: 100%;
	color: #fff;
	border: 1px solid #85b315;
	display: block;
	left: -25px;
	margin-bottom: 15px;
	opacity: 0;
	padding: 20px;
	pointer-events: none;
	position: absolute;
	width: 100%;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	-ms-transform: translateY(10px);
	-o-transform: translateY(10px);
	transform: translateY(10px);
	-webkit-transition: all .25s ease-out;
	-moz-transition: all .25s ease-out;
	-ms-transition: all .25s ease-out;
	-o-transition: all .25s ease-out;
	transition: all .25s ease-out;
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.tooltip_wrapper .tooltip:before {
	bottom: -20px;
	content: " ";
	display: block;
	height: 20px;
	left: 0;
	position: absolute;
	width: 100%;
}
/* CSS Triangles - see Trevor's post */
.tooltip_wrapper .tooltip:after {
	border-left: solid transparent 10px;
	border-right: solid transparent 10px;
	border-top: solid #8dc63f 10px;
	bottom: -20px;
	content: " ";
	height: 0;
	left: 50%;
	margin-left: -13px;
	position: absolute;
	width: 0;
}
.tooltip_wrapper:hover .tooltip {
	opacity: 1;
	pointer-events: auto;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px);
}
/* IE can just show/hide with no transition */
.lte8 .tooltip_wrapper .tooltip {
	display: none;
}
.lte8 .tooltip_wrapper:hover .tooltip {
	display: block;
}
}
#pajaro {
	left: 100%;
	-moz-animation: volar 20s infinite;
	-webkit-animation: volar 20s infinite;
	-o-animation: volar 20s infinite;
	-ms-animation: volar 20s infinite;
	-khtml-animation: volar 20s infinite;
	animation: volar 20s infinite;
	position: fixed;
}
@-moz-keyframes volar {
 0% {
 top:5px;
}
25% {
 top:100px;
}
50% {
 top:80px;
}
75% {
 top:25px;
}
100% {
 left:-177px;
 top:102px;
}
}
@-webkit-keyframes volar {
 0% {
 margin-left:100%;
 top:5px;
}
25% {
 top:100px;
}
50% {
 top:80px;
}
75% {
 top:25px;
}
100% {
 left:-177px;
 top:102px;
}
}
@-o-keyframes volar {
 0% {
 top:5px;
}
25% {
 top:100px;
}
50% {
 top:80px;
}
75% {
 top:25px;
}
100% {
 left:-177px;
 top:102px;
}
}
@-ms-keyframes volar {
 0% {
 top:5px;
}
25% {
 top:100px;
}
50% {
 top:80px;
}
75% {
 top:25px;
}
100% {
 left:-177px;
 top:102px;
}
}
@-khtml-keyframes volar {
 0% {
 top:5px;
}
25% {
 top:100px;
}
50% {
 top:80px;
}
75% {
 top:25px;
}
100% {
 left:-177px;
 top:102px;
}
}
@keyframes volar {
 0% {
 left:100%;
 top:5px;
}
25% {
 top:100px;
}
50px {
 top:80px;
}
75% {
 top:25px;
}
100% {
 left:-177px;
}