/* CSS Document */
.transparenttext {
	background-color:#95DAFF; /* changed 4 aleploneda "background-color:#333333;" */
	margin-left:40%;
	margin-right:10%;
	margin-top:5%;
	color:#ffffff;
	font-size:1.5em;
	font:Verdana, Arial, Helvetica, sans-serif;
			/* to make the menu transparent 70% --- BEGIN */
			filter:alpha(opacity=70);
			-moz-opacity:.70;
			opacity:.70;			
			/* to make the menu transparent 70% --- END */
	padding:2%;
	border:21% solid #00FF33;
}

.transparenttext40 {
	background-color:#111000;
/*	margin-left:40%;
	margin-right:14%;
	margin-top:10%;
*/	color:#ffffff;
	font-size:1.5em;
	font:Verdana, Arial, Helvetica, sans-serif;
			/* to make the menu transparent 70% --- BEGIN */
			filter:alpha(opacity=50);
			-moz-opacity:.50;
			opacity:.50;			
			/* to make the menu transparent 70% --- END */
/*	padding:2%;
	border:21% solid #00FF33;*/
}

.transparenttextNoMargin {
	background-color:#111000;
/*	margin-left:40%;
	margin-right:14%;
/*	margin-top:10%;*/
	color:#ffffff;
	font-size:1.5em;
	font:Verdana, Arial, Helvetica, sans-serif;
			/* to make the menu transparent 70% --- BEGIN */
			filter:alpha(opacity=50);
			-moz-opacity:.50;
			opacity:.50;			
			/* to make the menu transparent 70% --- END */
/*	padding:2%;*/
/*\	border:21% solid #00FF33;*/
}

.bkgTranparentBlack{
	background-color:#111000;
/*	margin-left:40%;
	margin-right:14%;
/*	margin-top:10%;*/
			/* to make the menu transparent 70% --- BEGIN */
			filter:alpha(opacity=80);
			-moz-opacity:.60;
			opacity:.60;			
			/* to make the menu transparent 70% --- END */
/*	padding:2%;*/
/*\	border:21% solid #00FF33;*/
}

.contacttext{
	background-color:#FFFFFF;
/*	margin-left:40%;
	margin-right:10%;
	margin-top:10%;
*/	color:#000000;
	font:Verdana;
	font-size:1.15em;
			/* to make the menu transparent 70% --- BEGIN */
			filter:alpha(opacity=80);
			-moz-opacity:.80;
			opacity:.80;			
			/* to make the menu transparent 70% --- END */
	padding:2%;
	border:21% solid #00FF33;
}


.optFoto{ /* aleploneda - new */
	border-width: 100px;
/*	border-spacing:inherit; */
	border: solid #CCCCCC;
	float:left;
	background-repeat:no-repeat; 
	height: 300px; 
	width: 200px; 
	border: 10px solid white;
}

.image{
	position:relative;
}


.Text {
	font-size:24px;
	font-family:"AR BONNIE";
/*	opacity:.50; */
	color:#FFFFFF;
	font-weight:400;
	text-shadow: 2px 1px #333333;
/*	width:300px*/
/*	background-color:#CCCCCC;  /* aleploneda -- rojo es : "#FF0000;" */

}

.Text2 {
	font-size:18px;
	font-family:"AR BONNIE";
	font-family:Mistral;
	font-family:Verdana, Arial, Helvetica, sans-serif;
/*	opacity:.50; */
	color:#FFFFFF;
	font-weight:400;
	text-shadow: 1px 1px #000000;
/*	width:300px*/
/*	background-color:#CCCCCC;  /* aleploneda -- rojo es : "#FF0000;" */
}

.optText{
	font-size:24px;
	font-family:"AR BONNIE";
/*	position:relative; */
	top:210px;
	background-color:#FFFFFF;  /* aleploneda -- rojo es : "#FF0000;" */
	left: 2px;
/*	width: 150px;*/
	height: 40px;
	border-top: 15px solid #FFFFFF;
	opacity:.70;	

}

.style3 {
	font-family: 'Open Sans', sans-serif;
	font-size: 90%;
	color:#e15a1f; /* #c00; */
	color:#9CA8B6;
	color:#006699;
	color:#000099;
	float:left;
	text-align:center;
	padding:4px;
	text-decoration:none;
}

.SelectionText{
	font-size:24px;
	font-family:"AR BONNIE";
	background-color:#CCCCCC; 
	opacity:.70;
	text-align:center;
}

a.divlink { 
     display:block;
     width:500px;
     height:500px; 
     float:left;
}

#header {
	border-bottom:1x solid #000000;
/*	background-color:#CCFF00; /* new4 aleploneda */
}

#toptop {
/*	border-bottom:5x solid #000000; */
}

#gallery {
	background-color: #000000;
	margin: auto;
	padding: 1px; /*changed from 20px original */
	border-top-color:#FFFFFF;
	border-top-width: 0px;
}

#spaceout {
	border-top-color:#FFFFFF;
	border-top-width: 0px;
}

.logo {
	color:#9CA8B6;
	color:#006699;
}

#logo {
/*	font-family:Arial, Helvetica, sans-serif;
/*	font-family:"Times New Roman", Times, serif;
/*	font-family:"Courier New", Courier, monospace;
/*	font-family:Georgia, "Times New Roman", Times, serif, sans-serif; */
	font-family:Geneva, Arial, Helvetica, sans-serif; /* */
	font-family:Verdana, Arial, Helvetica, sans-serif; /* */
	font-family:Mistral;
	font-family:"AR BONNIE"; 
/*	font:Verdana, Arial, Helvetica, sans-serif;  /* DELETED for aleploneda */
	margin-top:auto; /* changed4 aleploneda from original "margin-top:auto;" */
	left:auto;
	padding:5px;
	top: 2%; /*--new: changed from 5% --- to from the edge of the window for the menu nav*/
	margin-left:13%;  -- aleploneda deleted line */
	color:#9CA8B6;
	color:#006699;
/*	background-color:#CCFF00; /* new4 aleploneda pistache bajito */
/*	background-color:#C8FC81; /* new4 aleploneda pistache bajito */
/*	background-color:#C6FBAE; /* new4 aleploneda pistache bajito */
/*	background-color:#A7D7E4; /* new4 aleploneda pistache bajito */
/*	background-color:#95DAFF; /* new4 aleploneda pistache bajito */
/*	background-color:#FFCCFF; /* new4 aleploneda ROSA bajito */
/*	background-color:#FF0000;  ROJO */
	background-image:url(../../images/intro.jpg);
	background-repeat:no-repeat;
}

/* -----------------------------to fix the content: the bottom part of the header --- but the menu is not working correctly in mobile
#content {

    position:absolute;
    top: 50px;
    left:0px;
    right:0px;
    bottom:0px;
    overflow-y:scroll; 
}
-----------------------------------*/
body {
/*	background-color:#E1FCCF; /* new4 aleploneda -- que es verde pistache bajito: "background-color:#E1FCCF;" */
	line-height: 1;
	margin:0; /* new aleploneda -- no margin at the top of the page over the header */
}

/* mouse over link */
a:hover {
	color:#006600;
}


.style2 {
	color: #FFFFFF;
	/*font-family: "Smudger LET";   /* deleted for aleploneda */
}


/*-----------------------------menu nav brgin-------------*/
		#nav
		{
			width: 40em; /* 1000 */ /* original was: "width: 40em" */
			font-family: 'Open Sans', sans-serif; /* deleted for aleploneda */
			font:Mistral;   /*"AR BONNIE"; aleploneda */
			font-weight: 100; /* changed for aleploneda original: "font-weight: 400;" */
			position: absolute; /*-- new: changed - deleted */
/*			position:relative; /* new aleploneda */
			top: 0%; /*--new: changed from 5% --- to from the edge of the window for the menu nav*/
			left: 35%; /* changed from "left: 25%;" to "left: 0%" -- aleploneda */
			margin-top:auto;
/* aleploneda line deleted --->>			margin-left: 15%; /* 30 480 */ /* -- changed from "margin-left: -30em;" */
			/* to make the menu transparent 70% --- BEGIN */
			filter:alpha(opacity=50);
			-moz-opacity:.70;
			opacity:.70;			
			/* to make the menu transparent 70% --- END */
			z-index:3;  /* to move the menu to the front also the dropdown in mobile */
		}

			#nav > a
			{
				display: none;
			}

			#nav li
			{
				position: relative;
				display:block;
			}
				#nav li a
				{
/*					color: #fff; /* todelete aleploneda */
					color: #000; /* added aleploneda */
					display: block;
					text-decoration: none;
				}
				#nav li a:active
				{
/*					background-color: #c00 !important;   aleploneda */
					background-color:inherit;   /* addded line aleploneda */
				}

			#nav span:after
			{
				width: 0;
				height: 0;
				border: 0.313em solid transparent; /* 5 */
				border-bottom: none;
				border-top-color: #efa585; /* before: #efa585 */
				content: '';
				vertical-align: middle;
				display: inline-block;
				position: relative;
				right: -0.313em; /* 5 */
			}

			/* first level */

			#nav > ul
			{
				height: 1.75em; /* 60 */ /* -- new: changed from 3.75em -- height size of the menu background --*/
/*				background-color: #000000; /* --- color of the background of the menu !! -- changed from #e15a1f */ 
				background-color:inherit;
			}
				#nav > ul > li
				{
					width: 20%;  /* aleploneda ---> changed from original "width: 25%;"  */ /* centrado las opciones */
					height: 100%;
					float: left;
				}
					#nav > ul > li > a
					{
						height: 100%;
						font-size: 1.0em; /* 24 */ /*--new: changed from 1.5em -- size of the menu */
						line-height: 1.5em; /* 60 (24) */ /*--new: changed from 2.5 -- space from the top */
						text-align: center;
					}
						#nav > ul > li:not( :last-child ) > a
						{
							border-right: 1px solid #cc470d;
						}
						#nav > ul > li:hover > a,
						#nav > ul:not( :hover ) > li.active > a
						{
/*							background-color: #cc470d;  /*  --- deleted for aleploneda */
							background:#E0FFCE;  /* new4 aleploneda verde bajito*/
						background-color:#B6DAE4; /* azul cielo */
 						background-image:url(../../images/optionIcon.png); /* aleploneda */
						background-repeat:no-repeat; /* aleploneda */
						}


				/* second level */

				#nav li ul
				{
/*					background-color: #cc470d;   /* deleted4 aleploneda */
							background:#E0FFCE;  /* new4 aleploneda */
					background-color:#B7DAEE; /* azul cielo */
					background-image:url(images/optionIcon.png); /* aleploneda */
					background-repeat:no-repeat; /* aleploneda */
					display: none;
					position: absolute;
					top: 100%;
				}
					#nav li:hover ul
					{
						display: block;
						left: 0;
						right: 0;
					}
						#nav li:not( :first-child ):hover ul
						{
							left: -1px;
						}
						#nav li ul a
						{
							font-size: 1.1em; /* 20 */ /* before was: "font-size: 1.25em" */
							border-top: 1px solid #e15a1f;
							padding: 0.25em; /* 15 (20) */
							text-align:left; /* added for cocoluz */
						}
							#nav li ul li a:hover,
							#nav li ul:not( :hover ) li.active a
							{
/*								background-color: #e15a1f;   aleploneda */
					background-color:inherit;   /* addded line aleploneda */
					background-repeat:no-repeat; /* aleploneda */
 						background-image:url(../../images/optionIcon.png); /* aleploneda */
						background-repeat:no-repeat; /* aleploneda */

							}


		@media only screen and ( max-width: 62.5em ) /* 1000 */
		{
			#nav
			{
				width: 100%;
				position: static;
				margin: 0;
			}
		}

		@media only screen and ( max-width: 40em ) /* 640 */
		{
			html
			{
				font-size: 75%; /* 12 */
			}
			
			
			#menudiv, #faresdiv{  /* this was added by me to decrease the size of menu letters */
				size:0.7em;
			}
			#nav
			{
				position: relative;
				top: auto;
				left: auto;
			}
				#nav > a
				{ /*-- NOTE: this is the square in the mobile menu */
					width: 3.125em; /* 50 */   /* before was : "width: 3.125em" */
					height: 3.125em; /* 50 */  /* before was : "height: 3.125em" */
					text-align: left;
					text-indent: -9999px;
					/*background-color:#669900; /*green #669900 /* changed for aleploneda to green from original: "background-color: #e15a1f;" */ 
					background-color:#006699; /* azul #006699 */ /* changed for aleploneda to green from original: "background-color: #e15a1f;" */ 
					background-color:#333333; /* gris #333333; */
					background-color:#ABCABC; /* azul bajito #ABCBF1 */
					/*background-color:#000000; /* negro #000000; */
					position:relative;
					position:fixed; /* modified so the square to be on the top ---- original was= position:relative; */
					margin-top:1%; /* added so the squer will be on the top always */
					top:0.5%; /* added so the squer will be on the top always */
					/*margin-left:10%;*/  /* position where the square menu will appear without it it will appear at the very left */
				}
					#nav > a:before,
					#nav > a:after
					{ /*about drawing inside the little square menu*/
						position: absolute;
						border: 2px solid #fff; /*about square menu*/
						top: 35%;
						left: 25%;
						right: 25%;
						content: '';
					} /*about square menu*/
					#nav > a:after
					{
						top: 60%;
					}

				#nav:not( :target ) > a:first-of-type,
				#nav:target > a:last-of-type
				{
					display: block;
				}


			/* first level */

			#nav > ul  /* only for small windows like smart phones */
			{
				height: auto; /* the original said: " height: auto; " --- to make size of the menu bar on mobile a little bit bigger */
				display: none;
				position: absolute;
				left: 0;
				right: 0;
				font-size:2em;
					background-color:#E0FFCE; /* added4 aleploneda verde claro */
					background-color:#B6DAE4; /* azul cielo */
			}
				#nav:target > ul
				{
					display: block;
				}
				#nav > ul > li
				{
					width: 100%;
					float: none;
				}
					#nav > ul > li > a
					{
						height: auto; /* the original said: " height: auto; " --- to make size of the menu bar on mobile a little bit bigger */
						text-align: left;
						padding: 0 0.833em; /* 20 (24) */
					/*	font-size:2em; */ /* new */
					}
						#nav > ul > li:not( :last-child ) > a
						{
							border-right:		 none;
							border-bottom: 1px solid #cc470d;
							
						}


				/* second level */

				#nav li ul
				{
					position: static;
					padding: 1.25em; /* 20 */
					padding-top: 0;
					top:50%;
					padding-bottom: 0; /* added 20160727 */ /* for NO SPACE between second level and next item in first level */
					padding-right: 0; /* added 20160727 *//* for NO SPACE between second level and next item in first level */
					border-bottom: 1px solid #cc470d;  /* for a LINE between second level and next item in first level */
				}
		}
/*----------------------------------menu nav end ------------------------*/
/* One */

	#acercadiv {
		background: url("../../images/thumbs/14.jpg");
/*		background-size: 256px 256px, cover;
		background-attachment: fixed, fixed;
*/		position:relative;
		background-repeat:no-repeat;
		margin-left:10%;
		margin-right:10%;
		margin-top:1%;

/*		background-color:#999999; /* new4 aleploneda */
	}

/* Two */

	#faresdiv {
		background: url("../../images/two.jpg");
/*		background-size: 256px 256px, cover;
		background-attachment: fixed, fixed;
		background-position: top left, center center; */
		background-repeat:no-repeat;
	}


/* intro */

	#contact {
		background: url("../../images/solido700x450.jpg");
/*		background-size: 256px 256px, cover;
		background-attachment: fixed, fixed;
		background-position: top left, center center; */
		background-repeat:no-repeat;
		background-position:center;
	}