* {margin:0px; padding:0px; border:0px;} 
 body {text-align:center; 
		margin-top: 10 px;
		margin-right: 40px;
		margin-bottom: 10px;
		margin-left: 40px;} 

body {
	padding-top: 0px;
	border: 0px;
	margin: 0px;
	height:100%;
	width: 100%;
	background-color: #ffffff;
	background-position: top;
	background-repeat: repeat-x
	}
	
#container{
	width: 80%;
	max-width: 1024px;
}

img {
    max-width: 100%;
    height: auto;
}	
	
	
 #cabecera {font-family: 'Capriola', sans-serif;text-align:center; color:#1E90FF; font-weight:bold; font-size:1.15em}
 #navegacion {background-color:#536dc2; border:#536dc2 6px solid; height:98px; font-family: calibri; font-size: 1.15em; width:auto;}
 #navegacion li {float:left; list-style:none; margin:0px 1px, 0px,1px; width:auto;}
 #navegacion ul{margin-left:60px; width:auto;}
 #navegacion ul li {display:block; float:left; width:20%; white-space: nowrap;}
 #contenido {background-color:#111111; width:900px; float:left; background-repeat:repeat;}
 #contenido p {padding:5px 10px 5px 10px; text-indent:10px;}
 #contenido1 {background-color:#000000; width:900px; float:left;}
 #contenido1 p {padding:5px 10px 5px 10px; text-indent:15px;}
 #contenido1 p3 {padding:5px 20px 5px 20px; text-indent:15px;}
 #pie {background-color:white; align:center}
 #global {width:900px; margin:10px auto;}
 #menu {background-color:#9966FF; width:160px; float:left; text-align:left; margin:3px 13px 3px 1px;}
 #menu li {list-style:none; margin:4px 0px 4px 6px; text-align:center;}
 #menu1 {background-color:white; width:690px; float:left; text-align:center; margin:3px 13px 3px 1px;}
 #menu1 li {list-style:none; margin:4px 0px 4px 6px; text-align:center;}
 
#izquierda{position:fixed;top: 200px;left: 5px;}
#derecha{position:fixed;top: 200px;right: 5px}

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);


button {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, input, select, textarea {
  color: #5A5A5A;
  font: inherit;
  margin: 0;
}

input {
  line-height: normal;
}


textarea {
  overflow: auto;
}

#container {
  border: solid 1.0px #6e6e6e;
  max-width: 768px;
  margin: 60px auto;
  position: relative;
}

form {
  padding: 37.5px;
  margin: 50px 0;
}

h1 {
  color: #474544;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 7px;
  text-align: center;
  
}

.underline {
  border-bottom: solid 2px #474544;
  margin: -0.512em auto;
  width: 80px;
}

.icon_wrapper {
  margin: 50px auto 0;
  width: 100%;
}

.icon {
  display: block;
  fill: #474544;
  height: 50px;
  margin: 0 auto;
  width: 50px;
}

.email {input[type='text'], [type='email'], [type='password'], [type='date'], [type='datetime'], select, textarea {
	background: white;
	border: none;
	border-bottom: solid 2px #000000;
	border-radius:0.1em;
	color: #000000;
	font-size: 1.000em;
	font-weight: 400;
	letter-spacing: 1px;
	margin: 0em 0 1.875em 0;
	padding: 0 0 0.875em 0;
	width: 100%;

	border-bottom: solid 2px #000000;
	border-top: solid 2px #000000;
	border-left: solid 2px #000000;
	border-right: solid 2px #000000;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	word-wrap: break-word; /* Divide palabras largas */
}

	float: right;
	width: 45%;
}


input[type='submit'], [type='reset'] {
	background: #6c038f;
	border: none;
	border-bottom: solid 2px #000000;
	border-radius:0.1em;
	color: #ffffff;
	font-size: 1.010em;
	font-weight: bold;
	letter-spacing: 1px;
	margin: 0em 0 1.875em 0;
	padding: 0 0 0.875em 0;
	width: 70%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

input[type=button] {
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	box-sizing: border-box;
	border: none;
	border-radius: 15px;
	background-color: #3047f0;
	color: white;
}

.button-container{
	display:inline-block;
	position:relative;
}

.button-container a{
	position: absolute;
	bottom:4em;
	right:4em;
	background-color:#148f09;
	border-radius:2.5em;
	color:#25282a;
	text-transform:uppercase;
	padding:1em 1.5em;
}

div.usuario {
  width: 100%;
  margin: auto;
}

div.enviar {
  width: 100%;
  height:35px;
  margin: auto;
  border-radius:0.5em;
  background-color:#6c038f;
}

div.presenta {
  width: 80%;
  height:30px;
  margin: auto;
  border-radius:0.1em;
  background: #edebeb;
  margin-bottom: 20px;
  border:#382563;
	border-bottom: solid 2px #000000;
	border-top: solid 2px #000000;
	border-left: solid 2px #000000;
	border-right: solid 2px #000000;	
}

div.titulo_rojo {
  width: 90%;
  height:90%;
  margin: auto;
  color:white;  
  border-radius:0.1em;
  background: #f70202;
  margin-bottom: 20px;
}

div.titulo_morado {
  width: 90%;
  height:60%;
  margin: auto;
  color:white;  
  border-radius:0.0em;
  background: #3a2260;
  margin-bottom: 30px;
	
}


input[type='text']:focus, [type='email']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, textarea:focus {
	outline: none;
	padding: 0 0 0.875em 0;
}

.message {
	float: none;
}

.name {
	float: left;
	width: 45%;
}

.name1 {
	float: right;
	width: 45%;
}

select {
  background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-down-32.png') no-repeat right;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

select::-ms-expand {
  display: none;
}

.subject {
  width: 100%;
}

.telephone {
  width: 100%;
}

textarea {
	line-height: 150%;
	height: 150px;
	resize: none;
  width: 100%;
}

::-webkit-input-placeholder {
	color: #474544;
}

:-moz-placeholder { 
	color: #474544;
	opacity: 1;
}

::-moz-placeholder {
	color: #474544;
	opacity: 1;
}

:-ms-input-placeholder {
	color: #474544;
}

#form_button {
	background: none;
	border: solid 2px #474544;
	color: #474544;
	cursor: pointer;
	display: inline-block;
	font-family: 'Helvetica', Arial, sans-serif;
	font-size: 0.875em;
	font-weight: bold;
	outline: none;
	padding: 20px 35px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

#form_button:hover {
  background: #474544;
  color: #F2F3EB;
}


#navegacion a {
        text-decoration: none;
        color: #FFFFFF;
        background: #536dc2;
        display: block;
        padding: 3px 10px;
        text-align: center;
        border: 1px solid #536dc2;
        border-width: 1px 1px 1px 1px;
		 font-size: 1.0rem;
}

#navegacion a#primero {
        border-left: 1px solid #536dc2;
}

#navegacion a:hover {
        background: #5ca6bf;
		cursor:pointer;
}
#navegacion ul li ul {
	display:none;
}
#navegacion ul li a:hover + ul, .navegacion ul li ul:hover {
		display: block;
	}

 aa {color:w; font-size:1.3em; text-decoration:none;}
 aa 			{color:brown; text-decoration:none}
 aa:link		{}
 aa:visited 	{color:#000000; text-decoration:none}
 aa:hover	{color:white; text-decoration:underline; background-color: silver;}
 aa:active	{} 
 aa {color:black; text-decoration:none; display:block;}   
  
 b {color:w; font-size:1.3em; text-decoration:none;}
 b 			{color:brown; text-decoration:none}
 b:link		{}
 b:visited 	{}
 b:hover	{color:#9966FF; text-decoration:underline; background-color: #FFFFFF;}
 b:active	{} 
 b {color:black; text-decoration:none; display:block;}    
   
    p {
        text-align: justify;
        color: black;
        font-family: calibri, sans-serif;
        font-size: 18;
    }

    p1 {
        text-align: center;
        color: black;
        font-family: calibri, verdana, sans-serif;
        font-size: 12;
    }
	
	p2 {
        text-align: center;
        color: blue;
        font-family: calibri, verdana, sans-serif;
        font-size: 16;
    }
	
	p3 {
        text-align: justify;
        color: black;
        font-family: calibri, verdana, sans-serif;
        font-size: 16;
    }
	
	p4 {
        text-align: justify;
        color: black;
        font-family: calibri, sans-serif;
        font-size: 18;
        
    }
	
	p5 {
        text-align: center;
        color: black;
        font-family: calibri, verdana, sans-serif;
        font-size: 18;
        
    }
	p10 {
		background-color:white;
	}
	p10.margin {
	margin-top:100px;
	margin-bottom:100px;
	margin-right:80px;
	margin-left:50px;
	}


 h1 {font-size:1.3em; color:black; font-weight:bold; text-decoration:none; text-align:center;}
 h2 {font-size:1.1em; color:#615e5e; font-weight:bold; text-decoration:none; text-align:center;} 
 h3 {font-size:1.1em; color:white; font-weight:bold; text-decoration:none; text-align:center; background:#001388;}
 h4 {font-size:0.8em; color:#737272; font-weight:bold; text-decoration:none; text-align:center;}  
 h5 {font-size:1.1em; color:black; font-weight:bold; text-decoration:none; text-align:center; }
 h6 {font-size:1.1em; color:#f70000; font-weight:bold; text-decoration:none; text-align:center; }
 h7 {font-size:0.9em; color:white; font-weight:bold; text-decoration:underline; text-align:left;}
 
 
/* estilos del carrousel de imagenes */
#carousel {
	margin: 0 auto;
	width: 400px;
	height: 390px;
	padding: 0;
	overflow: scroll;
	border: 2px solid #999;
}
#carousel ul {
	list-style: none;
	width: 1500px;
	margin: 0;
	padding: 0;
	position: relative;
}
#carousel li {
	display: inline;
	float: left;
}

/* fin de estilos del carrousel de imagenes */


/* estilos de para menus dinamicos */
/* https://www.youtube.com/watch?v=oZa2Ut8u2S0 */
#nav { margin: 0; padding: 7px 6px 0; line-height: 100%; border-radius: 2em; -webkit-border-radius: 2em; -moz-border-radius: 2em; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); background: #8b8b8b; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a'); background: -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a)); background: -moz-linear-gradient(top, #a9a9a9, #7a7a7a); border: solid 1px #6d6d6d; }
#nav li { margin: 0 5px; padding: 0 0 8px; float: left; position: relative; list-style: none; }
#nav a { font-weight: bold; color: #e7e5e5; text-decoration: none; display: block; padding: 8px 20px; margin: 0; -webkit-border-radius: 1.6em; -moz-border-radius: 1.6em; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
#nav .current a, 
#nav li:hover > a { background: #d1d1d1;  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#a1a1a1');  background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1));  background: -moz-linear-gradient(top, #ebebeb, #a1a1a1);  color: #444; border-top: solid 1px #f8f8f8; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2); box-shadow: 0 1px 1px rgba(0, 0, 0, .2); text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }
#nav ul li:hover a, 
#nav li:hover li a { background: none; border: none; color: #666; -webkit-box-shadow: none; -moz-box-shadow: none; }
#nav ul a:hover { background: #0399d4 !important;  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#04acec', endColorstr='#0186ba');  background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)) !important;  background: -moz-linear-gradient(top, #04acec, #0186ba) !important;  color: #fff !important; -webkit-border-radius: 0; -moz-border-radius: 0; text-shadow: 0 1px 1px rgba(0, 0, 0, .1); }
#nav ul { background: #ddd;  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cfcfcf');  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cfcfcf));  background: -moz-linear-gradient(top, #fff, #cfcfcf);  display: none; margin: 0; padding: 0; width: 185px; position: absolute; top: 35px; left: 0; border: solid 1px #b4b4b4; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
#nav li:hover > ul { display: block; }
#nav ul li { float: none; margin: 0; padding: 0; }
#nav ul a { font-weight: normal; text-shadow: 0 1px 1px rgba(255, 255, 255, .9); }
#nav ul ul { left: 181px; top: -3px; }
#nav ul li:first-child > a { -webkit-border-top-left-radius: 9px; -moz-border-radius-topleft: 9px; -webkit-border-top-right-radius: 9px; -moz-border-radius-topright: 9px; }
#nav ul li:last-child > a { -webkit-border-bottom-left-radius: 9px; -moz-border-radius-bottomleft: 9px; -webkit-border-bottom-right-radius: 9px; -moz-border-radius-bottomright: 9px; }
#nav:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
#nav { display: inline-block; }
html[xmlns] #nav { display: block; }
* html #nav { height: 1%; }

/* Fin estilos de para menus dinamicos */

/* menu lateral fijo */
.sidebar {
  margin: 0;
  padding: 0;
  width: 600px;
  background-color: #ffffff;
  position: fixed;
  height: 100%;
  overflow: auto;
}

.sidebar a {
  display: block;
  color: #d5dcf5;
padding:8px 10px;
  
  text-decoration: none;
}
 
.sidebar a.active {
  background-color: #4CAF50;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: #567af5;
  color: white;
}

div.content {
  margin-left: 200px;
  padding: 1px 16px;
  height: 1000px;
}




@media only screen and (max-width:800px) {
  /* For tablets: */
  .main {
    width: 80%;
    padding: 0;
  }
  .right {
    width: 100%;
  }
}
@media only screen and (max-width:500px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width: 100%;
  }
}







/* The side navigation menu */
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #6c038f;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #bababa;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #ffffff;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}



/* The side navigation menu */

	
	*{
    box-sizing:border-box;
    margin:0;
    padding:0;
	font-family:Arial, Helvetica, sans-serif;
    }
                  
    li{
    list-style-type:none;
    position:relative;
    width:160px;
    }
                
    li a{
    text-decoration:none;
    display:block;
    padding:5px 10px;
    width:160px;
    height:30px;
    border:1px solid #000;
    color:#fff;
    background-color:#000;
    }
            
    li a:hover{
    color:#000;
    background-color:#567af5;
                
    }
    
    nav li ul{
        display:none;
        position:absolute;
        top:0px;
        left:160px;
    }
	           
    nav li:hover ul{display:block;}
	
/* menu lateral con movimiento */

.menu {
    width: 2.2rem;
    height: 2.7rem;
    background: #6a329f;
    border-radius: 0.5rem;
    position: absolute;
    top: 10%;
    left: 2%;
    font-family: sans-serif;
    font-size: 2rem;
    color: white;
    text-align: center;
    transition: left 0.7s;
}

.checkbox:checked ~ .menu {
    left: 15%;
    border-radius: 0 0.5rem 0.5rem 0;
}

.left-panel {
    width: 15%;
    height: 40%;
    /*safari*/
    background:  -webkit-linear-gradient(##6a329f, #6a329f, #6a329f);
    /*opera*/
    background: -o-linear-gradient(#6a329f, #6a329f, #6a329f);
    /*estandar*/
    background: linear-gradient(#6a329f, #6a329f, #6a329f);
    position: absolute;
    top: 0;
    left: -40%;
    display: flex;
    align-items: top;
    justify-content: top;
    transition: left 0.5s;
	font-family: sans-serif;
    font-size: 1rem;
	overflow: auto;
}


.checkbox:checked ~ .left-panel {
    left: 0;
}

.checkbox {
    visibility:hidden;
}

ul a {
    color: #F7F7F7;
    text-decoration: none;
}

li {
    list-style: none;
    font-size: 1.0rem;
    text-align: center;
    padding: 0 0.5rem;
    margin: 1rem 0;
}
	
li:hover {
    color: white;
    border: #9813b0;
    border-width: 0 0.1rem;
	background: #9813b0;
	cursor:pointer;
}

    a li:hover{
    color:#fff;
    background-color:#9813b0;
                
    }