/***********Desktop version***********/
html 
{ 
  overflow-x: hidden;
}
*{
font-family: sans-serif;
font-size: 12px;
color: #798e94;
}
::-webkit-scrollbar {
    width: 15px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
#bg 
{
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img 
{
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
  -webkit-filter: blur(2px)
}
body
{
 height: auto;
}
.Formu
{
	margin-bottom: 300px;
	height: 25%;
}
.title-form p
{
	font-size: 24px;
	color: rgba(16, 66, 140, 1);
	font-weight: bold;
	font-style: italic;
}
#buttontopage
{
	width: 30%;
	z-index: 999;
	left: 30%;
	margin-bottom: 5%;
	margin-top: 2%;
}
#buttontopage:hover
{
	width: 32%;
}
#prologo
{
	top:10%;
}
#prologo img
{
	width: auto;
	height: 99%;
	
}

#donador, #buttonmoveup
{
	width: 10%;
	position: fixed; ;
	z-index: 999;
	margin-top:5%;
}
#donador
{
	left: 10%;
}
#buttonmoveup
{
    left: 80%;
}

#buttonmoveup img
{
	width: auto;
	height:auto;
	 z-index: 999;
}
#donador:hover, #buttonmoveup:hover
{
	padding: 10px;
}
.Patrocinador-wrap
{
	left:10%;
	margin-top: 100px;
}

/************************* Modal ********************************/
.modal {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    
    position: absolute;
    top: 0;
    left: 0;
    
    display: flex;
    
    animation: modal 1s 2s forwards;
    visibility: hidden;
    opacity: 0;
    z-index: 9999;
}

.contenido {
    margin: auto;
    width: 30%;
    height: 35%;
    background: white;
    border-radius: 10px;
    position: fixed;
    padding: 10px;
    left: 40%;
    top: 25%;
 
}
.contenido > *
{
	font-weight: normal;
	color: rgba(242,138,43, 1);
}
.contenido h1
{
	font-weight: bold;
}
#cerrar {
    display: none;
}

#cerrar + label {
    position: fixed;
    color: #fff;
    font-size: 20px;
    z-index: 99999;
    background: darkred;
    height: 40px;
    width: 40px;
    line-height: 40px;
    border-radius: 50%;
    right: 25%;
    top: 25%;
    cursor: pointer;
    padding: 0px 0px 10px 10px;
    animation: modal 1s 2s forwards;
    visibility: hidden;
    opacity: 0;
}
#cerrar label
{
	margin-top:20%;
}
#cerrar:checked + label, #cerrar:checked ~ .modal {
    display: none;
}

@keyframes modal {
    100% {
        visibility: visible;
        opacity: 1;
    }
}
/***************************Formulario***********************/

.formulario form
{
	width: 100%;
	height: auto;
}
.formulario:hover
{
-webkit-box-shadow:10px 1px 0px 15px 0.3rem rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 1px 0px 15px 0.3rem rgba(0, 0, 0, 0.35);
	box-shadow: 1px 0px 15px 0.3rem rgba(0, 0, 0, 0.35);
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}
.contacto{
border: 1px solid #CED5D7;
border-radius: 6px;
padding: 45px 45px 20px;
margin-top: 40px;background-color: white;
box-shadow: 0px 5px 10px #B5C1C5, 0 0 0 10px #EEF5F7 inset;
}
.contacto label{
display: block;
font-weight: bold;
}
.contacto div{
margin-bottom: 15px;
}
.contacto input[type='text'], .contacto textarea{
padding: 7px 6px;
width: 294px;
border: 1px solid #CED5D7;
resize: none;
box-shadow:0 0 0 3px #EEF5F7;
margin: 5px 0;
}
.contacto input[type='text']:focus, .contacto textarea:focus{
outline: none;
box-shadow:0 0 0 3px #dde9ec;
}
.contacto input[type='submit']{
border: 1px solid #CED5D7;
box-shadow:0 0 0 3px #EEF5F7;
padding: 8px 16px;
border-radius: 20px;
font-weight: bold;
text-shadow: 1px 1px 0px white;
background: #e4f1f6;
background: -moz-linear-gradient(top, #e4f1f6 0%, #cfe6ef 100%);
background: -webkit-linear-gradient(top, #e4f1f6 0%,#cfe6ef 100%);
}
.contacto input[type='submit']:hover{
background: #edfcff;
background: -moz-linear-gradient(top, #edfcff 0%, #cfe6ef 100%);
background: -webkit-linear-gradient(top, #edfcff 0%,#cfe6ef 100%);
}
.contacto input[type='submit']:active{
background: #cfe6ef;
background: -moz-linear-gradient(top, #cfe6ef 0%, #edfcff 100%);
background: -webkit-linear-gradient(top, #cfe6ef 0%,#edfcff 100%);
}

.contacto label
{
	margin-top: -9px;
}

/************* class error agregga por el script *************/

.error
{
	background-color: #BC1010;
	padding: 6px 12px;
	border-radius: 4px;
	color: white;
	font-weight: bold;
	margin-left: 16px;
	margin-top: 6px;
	position: absolute;
}
.error:before
{
	content: '';
	border: 8px solid transparent;
	

	border-right: 8px solid #BC1010;
	left: -16px;
	position: absolute;
	top: 5px;
}


/************* class del resultado del correo *************/
.result_fail, .result_ok
{
	background: none repeat scroll 0 0 #BC1010;
	border-radius: 20px;
	color: white;
	font-weight: bold;
	padding: 10px 20px;
	text-align: center;
}
.result_ok
{
	background: #1EA700;
}
.button-social
{
	top: 20px;
	margin-bottom: 20px;
	right: 20px;
}

.button-social:hover
{
	padding: 1px;
}

.app-text p
{
	font-size: 20px;
	font-weight:bold;
	color: rgba(16, 66, 140, 1);
	position: center;
}
.app-slogan p
{
	font-size: 20px;
	font-weight:bold;
	color: rgba(242,138,43, 1);
	position: center center;
}
.contact-img
{
	left:60%;
	display: none;	
}

/************* Blog Area ********************************/
.blog-title
{
	left: 35%;
	margin-top: 5%;
}
.blog-title p
{
	font-size: 30px;
	color: rgba(16, 66, 140, 1);
	font-weight: bold;
	font-style: italic;

}
.blog-wrap
{
	border-radius: 5px;
	/*background: rgba(255,247,148, 1);*/
	background: rgba(43, 180, 214, 0.5);
	padding: 20px;
	width: 20%;
	height: auto;
	max-height: 500px;
	overflow: auto;
	margin-bottom: 30px;
}
.blog-wrap:hover
{
	-webkit-box-shadow:10px 1px 0px 15px 0.3rem rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 1px 0px 15px 0.3rem rgba(0, 0, 0, 0.35);
	box-shadow: 1px 0px 15px 0.3rem rgba(0, 0, 0, 0.35);
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}
.blog-wrap p
{
	color: rgba(242,138,43, 1);
	font-size:12px;
}
.blog-wrap::-webkit-scrollbar {
    width:10px;
}

.blog-name
{
	border-radius: 10px;
	margin-top: 5px;
	padding-bottom: -50px;
	background: rgba(255,255,255, 0.8);
	/* -webkit-filter: blur(10px)*/
}
.blog-name p
{
	font-size:18px;
	font-weight: bold;
	
}
.blog-suenos
{
	border-radius: 10px;
	padding: 5px;
	background: rgba(255,255,255, 0.5);
	/*background: rgba(242,138,43, 0.5);*/
	
}
.blog-suenos p
{
	font-size: 15px;
}

/********************Nav Behavior********************/
@font-face {
	font-family: 'arrows';
	src:url('../fonts/arrows/arrows.eot');
	src:url('../fonts/arrows/arrows.eot?#iefix') format('embedded-opentype'),
		url('../fonts/arrows/arrows.woff') format('woff'),
		url('../fonts/arrows/arrows.ttf') format('truetype'),
		url('../fonts/arrows/arrows.svg#arrows') format('svg');
	font-weight: normal;
	font-style: normal;
}

.bb-custom-wrapper {
	width: 420px;
	position: relative;
	margin: 0 auto 40px;
	text-align: center;
}

.bb-custom-wrapper .bb-bookblock {
	box-shadow: 0 12px 20px -10px rgba(81,64,49,0.0);
}


.bb-custom-wrapper nav {
	width: 100%;
	height: 30px;
	margin: 1em auto 0;
	position: relative;
	z-index: 0;
	text-align: center;
	
}

.bb-custom-wrapper nav a {
	display: inline-block;
	width: 30px;
	height: 30px;
	text-align: center;
	border-radius: 2px;
	background: #72b890;
	color: #fff;
	font-size: 0;
	margin: 2px;
}

.bb-custom-wrapper nav a:hover {
	opacity: 0.6;
}

.bb-custom-icon:before {
	font-family: 'arrows';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	font-size: 20px;
	line-height: 30px;
	display: block;
	-webkit-font-smoothing: antialiased;
}

.bb-custom-icon-first:before,
.bb-custom-icon-last:before {
	content: "\e002";
}

.bb-custom-icon-arrow-left:before,
.bb-custom-icon-arrow-right:before {
	content: "\e003";
}

.bb-custom-icon-arrow-left:before,
.bb-custom-icon-first:before {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

/* No JS */
.no-js .bb-custom-wrapper {
	height: auto;
}

.no-js .bb-custom-content {
	height: 470px;
}

/************************Smartphones***************************/
@media only screen 
and (min-width : 320px) and (max-height : 640px)and (-webkit-device-pixel-ratio: 3) and (orientation: portrait),
(min-width : 360px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait), 
(max-width: 480px) and (orientation: portrait),
(min-device-width : 320px) and (max-device-height : 533px)and (-webkit-device-pixel-ratio: 1.4)and (orientation: portrait),
(min-device-width : 640px) and (max-device-height : 360px) and (-webkit-device-pixel-ratio: 1) and (orientation: portrait),  
(min-device-width : 640px) and (max-device-height : 384px)and (-webkit-device-pixel-ratio: 1.25)and (orientation: portrait)
 {
 	#buttonmoveup, #donador
	{
   	  margin-left: 72%;  
   	  width: 20%; 
	}
	#donador
	{
	margin-left: 2%;
	}
	body
	{
		height: 800px;
	}
	#Nombre, #Mail, #Mensaje
	{
		width: 250px;
		margin-left: -20px;
	}
	.g-recaptcha
	{
		transform:scale(0.83);
		-webkit-transform:scale(0.83);
		transform-origin:0 0;
		-webkit-transform-origin:0 0;
		margin-left: -20px;
	}
	.contacto label
	{
		margin-left: -20px;
	}
	
 	.Develop
 	{
 		left: 25%;
 	}
 }




/****************************1366laps***************************/
@media only screen 
and (max-width : 1370px ) 
{
	.bb-custom-wrapper nav 
	{
	width: 100%;
	height: 30px;
	margin: 1em auto 0;
	position: relative;
	z-index: 0;
	text-align: center;
	bottom:45px;
	}
	#prologo img
{
	width: auto;
	height: 99%;
	
}
}