/* MENU DESPLEGABLE
------------------------------------------------------*/
@font-face {
    font-family: 'robotobold';
    
    src: url('/MSJ/SiteAssets/roboto-fontfacekit/web%20fonts/roboto_bold_macroman/Roboto-Bold-webfont.eot');
    src: url('/MSJ/SiteAssets/roboto-fontfacekit/web%20fonts/roboto_bold_macroman/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/MSJ/SiteAssets/roboto-fontfacekit/web%20fonts/roboto_bold_macroman/Roboto-Bold-webfont.woff') format('woff'),
         url('/MSJ/SiteAssets/roboto-fontfacekit/web%20fonts/roboto_bold_macroman/Roboto-Bold-webfont.ttf') format('truetype'),
         url('/MSJ/SiteAssets/roboto-fontfacekit/web%20fonts/roboto_bold_macroman/Roboto-Bold-webfont.svg#robotobold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'robotoregular';
    src: url('/MSJ/SiteAssets/roboto-fontfacekit/web%20fonts/roboto_regular_macroman/Roboto-Regular-webfont.eot');
    src: url('/MSJ/SiteAssets/roboto-fontfacekit/web%20fonts/roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/MSJ/SiteAssets/roboto-fontfacekit/web%20fonts/roboto_regular_macroman/Roboto-Regular-webfont.woff') format('woff'),
         url('/MSJ/SiteAssets/roboto-fontfacekit/web%20fonts/roboto_regular_macroman/Roboto-Regular-webfont.ttf') format('truetype'),
         url('/MSJ/SiteAssets/roboto-fontfacekit/web%20fonts/roboto_regular_macroman/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


.menuBackground {
/* background: #08A3DB; */
 text-align: center; /* or change the value to left to align left*/
font-family: robotobold;



 background: #5E73CA; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left top, #5E73CA, #47B772); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, #5E73CA, #47B772); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, #5E73CA, #47B772); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, #5E73CA, #47B772); /* Standard syntax (must be last) */


}
.dropDownMenu a {
 color: white; /*Color de letra menu a*/
 border-left: 2px solid #3AAD49;
}
.dropDownMenu,
.dropDownMenu ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
.dropDownMenu li {
 position: relative;
}
.dropDownMenu a {
 padding: 10px 20px;
 display: block;
 text-decoration: none;
}
.dropDownMenu a:hover {
 background: #000;
}


/* Level 1 Drop Down Menu */
.dropDownMenu > li {
 display: inline-block;
 vertical-align: top;
 margin-left: -4px; /* solve the 4 pixels spacing between list-items */
}
.dropDownMenu > li:first-child {
 margin-left: 0;
}
.dropDownMenu > li > a {}
.dropDownMenu > li > a:hover {}



/* Level 2 */
.dropDownMenu > li > ul {
 text-align: left;
 width: auto; /* change auto value with 200px if you want a bigger menu */
 display: none;

 background: green; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left top, #5E73CA, #47B772); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, #5E73CA, #47B772); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, #5E73CA, #47B772); /* For Firefox 3.6 to 15 */
    
        /*IE*/
       background: -ms-linear-gradient(bottom right, #5E73CA, #47B772);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5E73CA', endColorstr='#47B772',GradientType=1 );


    background: linear-gradient(to bottom right, #5E73CA, #47B772); /* Standard syntax (must be last) */




 position: absolute;
 top: 100%;
 left: 0;
 z-index: 9999999; /* if you have YouTube iframes, is good to have a bigger z-index so the video can appear above the video */
}
.dropDownMenu > li:hover > ul {
 display: block;
}
.dropDownMenu ul li a {}
.dropDownMenu ul li a:hover {}



/* Level 3 */
.dropDownMenu > li > ul > li > ul {
 text-align: left;
 display: none;

  background: yellow; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left top, #5E73CA, #47B772); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, #5E73CA, #47B772); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, #5E73CA, #47B772); /* For Firefox 3.6 to 15 */
    
        /*IE*/
       background: -ms-linear-gradient(bottom right, #5E73CA, #47B772);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5E73CA', endColorstr='#47B772',GradientType=1 );


    background: linear-gradient(to bottom right, #5E73CA, #47B772); /* Standard syntax (must be last) */



 position: absolute;
 left: 100%;
 top: 0;
 z-index: 9999999;
}
.dropDownMenu > li > ul > li:hover > ul {
 display: block;
}
.dropDownMenu ul ul li {}
.dropDownMenu ul ul li a {}
.dropDownMenu ul ul li a:hover {}

/* Fin menu desplegable ---------------------------*/





/*MENU PRINCIPAL*/


.mPrincipal li {
    float: left;
}

.mPrincipal li a {
    display: block;
    color: blue;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.mPrincipal li a:hover {
    background-color: #111;
}

/*Fin menu principal*/




/*MENU SOCIAL*/
*{
    margin: 0;
    padding: 0;
}
.social li a{
    color: white;
    text-align: center;
        display: inline-block;
    text-decoration: none;
    font-size: 25px;
    width: 50px;
    height: 45px;
    padding: 10px;
}

/*menu Social 2*/

.social {
	position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
	left: 0; /* Establecemos la barra en la izquierda */
	top: 200px; /* Bajamos la barra 200px de arriba a abajo */
	z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
}
 
	.social ul {
		list-style: none;
	}
 
	.social ul li a {
		display: inline-block;
		color:#fff;
		background: #000;
		padding: 10px 15px;
		text-decoration: none;
		-webkit-transition:all 500ms ease;
		-o-transition:all 500ms ease;
		transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
	}
 
	.social ul li .icon-facebook {background:#3b5998;} /* Establecemos los colores de cada red social, aprovechando su class */
	.social ul li .icon-twitter {background: #00A7E0;}

	.social ul li .icon-youtube {background:#EB1C2D;}

	.social ul li .icon-flickr {background: #B73293;}
	.social ul li .icon-instagram{background: #B73293;}
 

 
	.social ul li a:hover {
		background: #000; /* Cambiamos el fondo cuando el usuario pase el mouse */
		padding: 10px 60px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
	}