﻿

*{
    /*box-sizing:border-box;*/
    /*margin:0;*/
    padding:0;
    }


body,td,th {
	color: #000000;
	font-size: medium;
	/*text-align:"center";
	align:"center";*/
}

table,td,tr,th {
	/*padding:0;*/
	height:auto;
}

body {
	background-color: #FFFFFF;
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
}

.flex-container {
  display: flex;
  /*height: 600px;*/
  flex-wrap: wrap;
  
  align-content: space-between;
  background-color: DodgerBlue;
}
.pic-container {
  display: flex;
  /*height: 600px;*/
  flex-wrap: wrap;
  flex-direction: row;
  align-content: space-between;
  background-color: DodgerBlue;
}
.pic-container > div{
  display: flex;
  /*height: 600px;*/
  flex-wrap: wrap;
  align-content: space-between;
  background-color: Red;
}


a:active {
	text-decoration: none;
}
.Estilo4 {font-family: "Arial Narrow"; font-size: 14px; font-weight: bold; color: #000000; }
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
.Estilo6 {
	font-family:"Arial Narrow";
	color: White;
	font-weight: bold;
	cursor:default;
}
.Estilo7 {color: #000000;}
.Estilo37 {
	background-color:#006699;
	color: White;
	
}
.Estilo8 {color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; }
.Estilo9 {font-family: Verdana, Arial, Helvetica, sans-serif}

.Estilo14 {
	font-size: 13px;
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
}


.Estilo15 {
	color: #000000;
	background-color: #C0C0C0;
	font-family: Open Sans,Ibm Plex Sans,Roboto,Verdana, Arial, Helvetica, sans-serif;
	font-size: 15px;
	text-align:center;
}

.Estilo16 {
	color: #000000;
	background-color: #CCCCCC;
	font-family: Open Sans,Ibm Plex Sans,Roboto,Verdana, Arial, Helvetica, sans-serif;
	font-size:15px;
	text-align:center;
}

.Estilo17 {color: #000000; font-family: Open Sans, sans-serif,Verdana, Arial, Helvetica; font-weight: normal; font-size: 18px;
}

.Estilo18 {font-family: Barlow, Roboto,Open Sans,  Verdana, Helvetica, sans-serif; font-size: 18px;
color: rgb(51,51,51);
letter-spacing: 0px;
line-height:24px;
font-weight: 400;
 text-align:justify;  
 text-justify:auto;
 margin-left: 20px;
}

.Estilo21 {
	font-family: Roboto, Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin-left: 20px;
}






.Estilo23 {
	background:#005961;
	text-align:center;
	color: White; 
	font-family: Barlow,Roboto,Open Sans,  Verdana, Arial, 			    Helvetica, sans-serif; 
	font-size: 1.125em; /*18px;*/
	 }
.Estilo24 {font-family: Barlow, Open Sans, Roboto, Verdana, Arial, Helvetica, sans-serif; font-size: 15px; 
}
.Estilo25 {
	color: #000000;
	/*background:#339999;*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 13px;
}
.Estilo27 {font-family: Barlow, Roboto, Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; margin-left: 20px;
margin-top: 1.25em; /*20px;*/
}
.Estilo29 {
	font-size: 0.8125em; /*13px;*/
	font-weight: bold;
}
.Estilo30 {font-family: "Arial Narrow"}
.Estilo31 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #0000FF; }
.Estilo40 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #333333; }
/*
.Estilo37 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: #666666; }
*/
.style2 {font-size: 12px; color: #0000FF; font-family: Verdana, Arial, Helvetica, sans-serif;}
-->
.picframe_gal {
	text-decoration:none;
	padding-top: 0px;
	/*height: 77px;*/
	overflow: hidden; 
	box-shadow: 2px 2px 2px black;
	filter:sepia(70%);
}
.picframe_gal:hover {
	
	background:lightgrey;
	box-shadow: 5px 5px 2px dimgray;
	/*filter:sepia(0%);*/
	opacity:0.95;
	/*transform:scale(1.5,1.5);*/
	filter:sepia(0%);
	transition: .5s ease;
}

.picframe {
	text-decoration:none;
	padding-top: 0px;
	height: 8.4375em; /*135px;*/
	overflow: hidden; 
	box-shadow: 2px 2px 2px gray;
	/*filter:sepia(10%);*/
}
.picframe:hover {
	
	background:lightgrey;
	box-shadow: 3px 3px 3px back;
	/*filter:sepia(0%);*/
	opacity:0.95;
	transform:scale(1.5,1.5);
	transition: .8s ease;
}





.correo {
    background:lightgray;
	color:blue;
	overflow:auto;
	display:inline-block;
	font-family: Roboto, Helvetica, sans-serif, Verdana, Geneva, Arial;
	font-size:0.875em; /*14px;*/
	width:31.6%;
	float:left;
	margin:0;
	padding:2px 0px;
	box-shadow: 2px 2px 3px gray;
	text-decoration:none;
	margin-left: 2px;
	padding-left: 9px;
}

.correo:hover {
	text-decoration:none;
	cursor:default;
}

.minicio {
	overflow: auto; /*hidden;*/
	padding-left:0;
	padding-right:0;
	margin-left:-2px;
	display:flex;  /* inline-block; */
	/*flex-direction:column;*/
	flex-wrap: wrap;
	background:black; /*linear-gradient(to bottom, gray, black, black); */
	/*padding:9px 0%;   //19px //9px  4%*/ 
	padding-top:9px;
	padding-bottom:9px;
	padding-left:3%;
	padding-right:3%;
	/*width:80%; /*120px; */ 
	/*margin:auto;*/
	cursor:pointer;
	margin-bottom:16px;
	text-align:center;
	
	font-family:Roboto,Open Sans,sans-serif, Geneva,Helvetica,Arial;
	font-size:18px;
	font-weight:bold;
	color:#fabc10;/* gold;*/
	box-shadow: 2px 2px 3px gray;
	transition: .8s ease;
	float:left;
	text-decoration:none;
  	/*width:120px; /* 6.1% The width is 20%, by default */
}
.minicio:hover {
	background:#fabc10;  /*Gold;/*linear-gradient(to bottom, Gold, Gold,Gold,Black);*/
	color:black;
	
	box-shadow: 3px 7px 2px gray;
	transition: .2s ease;
	text-decoration:none;
}

.menu_izq {
	
	display:inline-block;
	/*background: linear-gradient(to bottom, black, gold, gold, black); */ 
	background:#fabc10; /*#FFD100; /*GoldenRod;*/
	width:150px;
	margin:auto;
	padding:3px 5px;
	transition: 1s ease;
	cursor:pointer;
	text-decoration:none;
	font-family: Roboto,PT Sans, sans-serif, Verdana, Helvetica, Arial,Montserrat;
	font-size:14px;
	font-weight:bold;
	color: black;
	box-shadow: 2px 2px 3px gray;
	transition: 1s ease;
}
.menu_izq:hover {
	padding:3px 28px;
	/*color: white;*/
	transition: .2s ease;
	text-decoration:none;
}
.main_banner {
	/*width:739px;*/
	width:99%;
	box-shadow: 3px 3px 3px black;
	height:130px;
	margin-bottom:8px;
	
	
	/*filter:sepia(100%);
	transition: 20s ease;*/
}


.mapa {
	box-shadow: 3px 3px 3px black;	
	float:left;
}
.left_panel {
	/*background-image: url(Fotos/la%20foto.JPG);*/
	background:black;
	box-shadow: 3px 3px 3px gray;	
}

.mcontainer {
	/*position:absolute;*/
	width:75%;
	/*max-width:1080px;*/
	margin:auto; 
	background:gray;
	/*display: flex;
    align-items: flex-start;
	align-self: center;*/
}
/*
.text-block {
  position: relative;
  bottom: 20px;
  right: 2px;
  width:103px;
  /*background-color: teal;*/
/*  color: white;
  padding-left: 5px;
  padding-right: 5px;
  opacity:.8;
}
*/

.titulo_menu {
	/*background:MediumBlue;*/
	background-color:#006699;
}

.tabla_info {
	padding:0;
	cellspacing:0;
	colspacing:0;
	box-shadow: 3px 3px 3px black;
	margin-left: 20px;
	align:center;
	border-color:black;
}
@media only screen and (max-width: 600px) {
.tabla_info {
	width: 100%;
}
/*.main_banner {
	width:25%;
}*/
}

h1{
	font-size:20px;
}


ul {
	position:relative;
	top: 0;
	left: 0;
	width: 100%;
	height:240px; /*100vh;*/
	background: #ccc;
	margin:0;
	padding:0;
	
}

ul li {
	list-style: none;
	position: relative;
	width: 19%;
	height: 240px;  /*100%*/
	border-right: 1px solid #000;
	float: left;
	box-sizing: border-box;
	transition: 0.5s;
	text-align: center;
	overflow:hidden;
	margin:0;
	padding:0;
}

ul li:nth-child(1)
{
	background: url(Fotos/SII6-320-1.JPG);
	background-size: auto;
	background-position: left;
}

ul li:nth-child(2)
{
	background: url(Fotos/320-SR9-60-TA.JPG);
	background-size: auto;
	background-position: left;
}

ul li:nth-child(3)
{
	background: url(Fotos/320x240-noestacionarse-001.JPG);
	background-size: auto;
	background-position: left;
}

ul li:nth-child(4)
{
	background: url(Fotos/320x240-ceda001.JPG);
	background-size: auto;
	background-position: left;
}
ul li:nth-child(5)
{
	background: url(Fotos/320-SR6.JPG);
	background-size: auto;
	background-position: left;
}

ul:hover li
{
	width: 10%;
}

ul li:hover
{
	width: 60%;
}

/*****************  UL SP  **********************/

ul.sp {
	position:relative;
	top: 0;
	left: 0;
	width: 100%;
	height:240px; /*100vh;*/
	background: #ccc;
	margin:0;
	padding:0;
	
}

ul.sp li {
	display:inline-block;
	list-style: none;
	position: relative;
	width: 15%;
	height: 240px;  /*100%*/
	border-right: 1px solid #000;
	float: left;
	box-sizing: border-box;
	transition: 0.5s;
	text-align: center;
	overflow:hidden;
	margin:0;
	padding:0;
}

ul.sp li:nth-child(1)
{
	background: url(Fotos/SP06-320-CURVA4.PNG);
	background-size: auto;
	background-position: left;
}

ul.sp li:nth-child(2)
{
	background: url(Fotos/SP32-320-1.PNG);
	background-size: auto;
	background-position: left;
}

ul.sp li:nth-child(3)
{
	background: url(Fotos/SP10-320-SINUOSO.PNG);
	background-size: auto;
	background-position: left;
}

ul.sp li:nth-child(4)
{
	background: url(Fotos/320-SP33.PNG);
	background-size: auto;
	background-position: left;
}
ul.sp li:nth-child(5)
{
	background: url(Fotos/320-SP6D.JPG);
	background-size:auto;
	background-position: left;
}

ul.sp:hover li
{
	width: 10%;
}

ul.sp li:hover
{
	width: 60%;
}

/*****************   UL DEF ****************************/

ul.def {
	position:relative;
	top: 0;
	left: 0;
	width: 100%;
	height:240px; /*100vh;*/
	background: #ccc;
	margin:0;
	padding:0;
	
}

ul.def li {
	display:inline-block;
	list-style: none;
	position: relative;
	width: 15%;
	height: 240px;  /*100%*/
	border-right: 1px solid #000;
	float: left;
	box-sizing: border-box;
	transition: 0.5s;
	text-align: center;
	overflow:hidden;
	margin:0;
	padding:0;
}

ul.def li:nth-child(1)
{
	background: url(Fotos/DEF-320-DEFENSA-1.PNG);
	background-size: auto;
	background-position: left;
}

ul.def li:nth-child(2)
{
	background: url(Fotos/DEF-320-DEFENSA-2.PNG);
	background-size: auto;
	background-position: left;
}

ul.def li:nth-child(3)
{
	background: url(Fotos/DEF-320-DEFENSA-3.PNG);
	background-size: auto;
	background-position: left;
}

ul.def li:nth-child(4)
{
	background: url(Fotos/DEF-320-DEFENSA-4.PNG);
	background-size: auto;
	background-position: left;
}
ul.def li:nth-child(5)
{
	background: url(Fotos/DEF-320-DEFENSA-5.PNG);
	background-size:auto;
	background-position: left;
}

ul.def:hover li
{
	width: 10%;
}

ul.def li:hover
{
	width: 60%;
}
/*****************   UL OD5 ****************************/

ul.od5 {
	position:relative;
	top: 0;
	left: 0;
	width: 100%;
	height:240px; /*100vh;*/
	background: #ccc;
	margin:0;
	padding:0;
	
}

ul.od5 li {
	display:inline-block;
	list-style: none;
	position: relative;
	width: 15%;
	height: 240px;  /*100%*/
	border-right: 1px solid #000;
	float: left;
	box-sizing: border-box;
	transition: 0.5s;
	text-align: center;
	overflow:hidden;
	margin:0;
	padding:0;
}

ul.od5 li:nth-child(1)
{
	background: url(Fotos/OD5-320-1.PNG);
	background-size: auto;
	background-position: left;
}

ul.od5 li:nth-child(2)
{
	background: url(Fotos/OD5-320-2.PNG);
	background-size: auto;
	background-position: left;
}

ul.od5 li:nth-child(3)
{
	background: url(Fotos/OD5-320-3.PNG);
	background-size: auto;
	background-position: left;
}

ul.od5 li:nth-child(4)
{
	background: url(Fotos/OD5-320-4.PNG);
	background-size: auto;
	background-position: left;
}
ul.od5 li:nth-child(5)
{
	background: url(Fotos/OD5-320-5.PNG);
	background-size:auto;
	background-position: left;
}

ul.od5:hover li
{
	width: 10%;
}

ul.od5 li:hover
{
	width: 60%;
}

/*****************   UL OD6 ****************************/

ul.od6 {
	position:relative;
	top: 0;
	left: 0;
	width: 100%;
	height:240px; /*100vh;*/
	background: #ccc;
	margin:0;
	padding:0;
	
}

ul.od6 li {
	display:inline-block;
	list-style: none;
	position: relative;
	width: 15%;
	height: 240px;  /*100%*/
	border-right: 1px solid #000;
	float: left;
	box-sizing: border-box;
	transition: 0.5s;
	text-align: center;
	overflow:hidden;
	margin:0;
	padding:0;
}

ul.od6 li:nth-child(1)
{
	background: url(Fotos/OD6-320-1.jpg);
	background-size: auto;
	background-position: left;
}

ul.od6 li:nth-child(2)
{
	background: url(Fotos/OD6-320-2.jpg);
	background-size: auto;
	background-position: left;
}

ul.od6 li:nth-child(3)
{
	background: url(Fotos/OD6-320-3.jpg);
	background-size: auto;
	background-position: left;
}

ul.od6:hover li
{
	width: 10%;
}

ul.od6 li:hover
{
	width: 60%;
}


/*****************   UL OD12 ****************************/

ul.od12 {
	position:relative;
	top: 0;
	left: 0;
	width: 100%;
	height:240px; /*100vh;*/
	background: #ccc;
	margin:0;
	padding:0;
	
}

ul.od12 li {
	display:inline-block;
	list-style: none;
	position: relative;
	width: 15%;
	height: 240px;  /*100%*/
	border-right: 1px solid #000;
	float: left;
	box-sizing: border-box;
	transition: 0.5s;
	text-align: center;
	overflow:hidden;
	margin:0;
	padding:0;
}



ul.od12 li:nth-child(1)
{
	background: url(Fotos/OD12-320-1.PNG);
	background-size: auto;
	background-position: left;
}

ul.od12 li:nth-child(2)
{
	background: url(Fotos/OD12-2.PNG);
	background-size: auto;
	background-position: left;
}

ul.od12 li:nth-child(3)
{
	background: url(Fotos/OD12-3.PNG);
	background-size: auto;
	background-position: left;
}

ul.od12 li:nth-child(4)
{
	background: url(Fotos/OD12-4.PNG);
	background-size: auto;
	background-position: left;
}
ul.od12 li:nth-child(5)
{
	background: url(Fotos/OD5-320-5.PNG);
	background-size:auto;
	background-position: left;
}

ul.od12:hover li
{
	width: 10%;
}

ul.od12 li:hover
{
	width: 60%;
}

ul.sir {
	position:relative;
	top: 0;
	left: 0;
	width: 100%;
	height:240px; /*100vh;*/
	background: #ccc;
	margin:0;
	padding:0;
	
}

ul.sir li {
	display:inline-block;
	list-style: none;
	position: relative;
	width: 15%;
	height: 240px;  /*100%*/
	border-right: 1px solid #000;
	float: left;
	box-sizing: border-box;
	transition: 0.5s;
	text-align: center;
	overflow:hidden;
	margin:0;
	padding:0;
}

ul.sir:hover li
{
	width: 10%;
}

ul.sir li:hover
{
	width: 60%;
}

ul.sir li:nth-child(1),nth-child(2),nth-child(3),nth-child(4),nth-child(5)
{
	/*background: url(Fotos/OD5-320-5.PNG);*/
	background-size:auto;
	background-position: left;
}

ul.sir li:nth-child(1)
{
	background: url(Fotos/SIR-320X240-21.PNG);
}
ul.sir li:nth-child(2)
{
	background: url(Fotos/SIR-320X240-2.PNG);
}
ul.sir li:nth-child(3)
{
	background: url(Fotos/SIR-320X240-5.PNG);
}
ul.sir li:nth-child(4)
{
	background: url(Fotos/SIR-320X240-9.PNG);
}
ul.sir li:nth-child(5)
{
	background: url(Fotos/SIR-320X240-10.PNG);
}


.footer1, .footer2 {
	font-family: Ibm Plex Sans,Roboto,Verdana, Arial, Helvetica,	 	sans-serif;	
	left: 0;
    width: 100%;
    float: none;
   background-color: gray;
   color: white;
   text-align: center;
}


/*
.footer, .footer2 {
   font-family: Open Sans,Ibm Plex Sans,Roboto,Verdana, Arial, Helvetica, sans-serif;	
   position: fixed;
   
   left: 0;
   bottom: 0;
   width: 100%;
   /*height:80px;*/
  /* background-color: gray;
   color: white;
   text-align: center;
}*/
/*

.footer-widget-1 {
    width: 100%;
    float: none;
}

@media (min-width: 769px) {
    .footer-widget-2, 
    .footer-widget-3, 
    .footer-widget-4, 
    .footer-widget-5 { 
        width: 25%;
    }
}*/

/*
table, td,tr, div, p, ul, li, form, h2, img, textarea, h3, li{
  padding:0; margin:0;
  }*/






