@charset "utf-8";
html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

#envoltorio {
	width: 90%;
	max-width: 1024px;
	margin:auto;
	
}
body{
	height: 100%;
	}
   
h1, h2, h3, h4, h5, h6, h7, p {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: Trebuchet, Trebuchet MS, Tahoma, Arial, "Helvetica Neue", Helvetica, sans-serif;
	color:#373737;
	line-height: 1.7;
}
a { 
	text-decoration: none;
	color:#9D9D9D;
}
a:link{
	color:#9D9D9D;
	}
a:visited{
	color:#9D9D9D;
	}
a:hover{
	color:#ec4e4e;
	}
#logo { 
	display: block; 
	background-image: url(../img/logo.svg);
	background-repeat: no-repeat;
	background-position:right top;
	width: 160px; 
	height: 60px;
	margin-top:10px;
	margin-right:20px;
	float:left;
}
h2{
	margin-top:40px;
	color:#ec4e4e;
	font-size:0.8em;
	background-position:right top;	
}

#menu {
	width: 20%;
}
ul, li {
	list-style: none;
	padding-left: 0px;
	margin-top:20px;
	text-align: left;
	font-size:0.85em;
	font-family: Trebuchet, Trebuchet MS, Tahoma, Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: bold;
	color:#ec4e4e;
	text-transform:uppercase;
	background:#FFFFFF;
	}
	
#menu li{
	position:relative;
	background: #FFFFFF;
}
#menu li ul li{
	margin-left: 6px;
	margin-top: 10px;
}
#menu li ul li a {
	font-size:1.2em;
	text-transform: none;
	font-weight: normal;
	font-style:italic;
	background: #FFFFFF;
		}
#menu li:hover ul{

	}
.bt-menu {
	display:none;
}

	
#navegador{
	float:left;
	width:20%;
}
#global{
	margin-top: 20px;
	margin-left: 10px;
}
#central{
	min-height: 100%;
	clear:both;
 	}
main {
	box-sizing:border-box;
	}

#cabeza {
	border-bottom:1px solid #000000;
	}
#informacion{
	float:left;
	width:50%;
	}
#footer{

	text-align:right;
	font-size:0.7em;
	margin-top:60px;
	border-top:1px solid #000000;
	padding-top: 5px;
	color:#000000;
	}

#animacion{
	margin-top:20px;
	
	}
#arti{
	float:left;
	margin-top:50px;
	margin-right:1.6%;
	margin-left:1.6%;
	}
#bases{
	width:35%;
	margin-top:60px;
	font-size:0.8em;
	margin-left:auto;
	margin-right:auto;
	line-height: 2;
	}
#bases p{
	font-size:0.9em;
	}
#contacto{
	margin-top:60px;
	}
#contacto2{
	margin-top:100px;
	margin-right:auto;
	margin-left:none;
	}
#trabajos{
	width:80%;
	float:left;
	}
p{
	font-size:0.75em;
	}
h3 {
	font-size:0.8em;
	font-weight:bold;
	color:#000000;
	}
h6{
	font-size:0.7em;
	color: #9D9D9D;
}
#italic{
	font-style:italic;
	margin-top:40px;
	}
#italic2{
	font-style:italic;
	margin-top:40px;
	text-align:center;
	}
#imgenex{
	display:block;
	margin-left: auto;
  	margin-right: auto;
	margin-top:40px;
	margin-bottom:30px;
	}
#pies li{
	float:left;
	margin-top: 0px;
	margin: 4px;
	}
#banner{
	width:80%;
	height: auto;
	float:left;
	}
#infoban{
	max-width: 100%;
}
	
	
	
	
/* ==========================================================================
   Author's custom styles CARRUSEL
   ========================================================================== */
#todo{
	margin-top:20px;
	}

a{text-decoration:none; border:none; color:#2A5DB0;}

/************************** JP Slides ******************/

/*Slides default image */
.reg{max-height:400px;}
/*Full width image */
.full{width:100%;}
/*Touch enabled div*/
.swipe {position:absolute; top:0px; left:0px; width:100%; height:100%; background:white; opacity:0; z-index:10; }
/* Marker border radius*/
.round{border-radius: 5px;}
/*Slides Main image and title*/
.slides_view_wrap {position:relative; margin-bottom: 20px;}
.slide_view {max-width:100%; margin:0 auto; background:#FFF; max-height:500px; overflow: hidden; }
.slide_view img {display:block; margin:0 auto; max-width:100%; }
.slide_image_title {text-align:center;  display:block; width:100%; background:#F0F0F0;}
.slide_image_title p {margin:0px; padding:6px 4px; color:black;}
.slide_image_title a {position:relative; z-index:1500;}
@media (max-width: 700px) {   
/* Slides container max height for mobile*/
.slide_view{
    max-height:200px;
    }
/*max-height for default slides on mobile*/
.reg{
    max-height:150px;
    }
}/*End Media*/
/*Back and next buttons*/
.back{position:absolute; left:5px; z-index:1500; padding:20px; cursor:pointer; background: white; opacity: .8; top:40%; text-decoration:none; font-size: 1.5em;}
.next{position:absolute; right:5px; z-index:1500; padding:20px; cursor:pointer; background: white; opacity: .8; top:40%; text-decoration:none; font-size:1.5em;}
.back:hover{opacity:1; text-decoration:none;}
.next:hover{opacity:1; text-decoration:none;}
.back a{color:#909090;}
.next a{color:#909090;}
@media (max-width: 700px) {
/*remove back and next for mobile*/
.back, .next {display:none;}
}

/*Play Stop and Pause*/
.playStop{margin:0 auto; width:72px; margin-bottom:10px;}
.play_control{position:relative; width: 10px; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 14px solid #E0E0E0 ; display: inline-block; cursor: pointer;}
.stop_control{position:relative;width: 15px;height: 15px; background: #E0E0E0 ; display: inline-block; cursor: pointer;}
.pause_control{display:inline-block; margin-left:12px; cursor: pointer;}
.pauseline {width:5px; height:15px; display: inline-block; background: #E0E0E0; margin-right:5px;}
/*Play Stop and pause on and off states*/
.stopgrey{background:#686868;}
.playgrey{border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 14px solid #686868;}

/*Slide Images Thumbnails*/
.slide_imgs {text-align:center; max-width: 930px; margin:0 auto; padding-bottom: 20px;}
.slide_imgs a img{width:10%; margin:.5%;}
@media (max-width: 900px){
.slide_imgs {width:95%;text-align: justify}
.slide_imgs a img{width:23%; margin:.5%}  
}
/*Active State for thumbs*/
.active {box-shadow:0px 0px 2px 2px #686868;}

 /*Make text unselectable on back and next buttons*/   
.no_select{-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}


/* ==========================================================================
   Author's custom styles CONTACTO
   ========================================================================== */
label {
    display:block;
    margin-top:20px;
    letter-spacing:1px;
	font-size: 0.8em;
    font-weight: bold;
    color: #000000;
	font-family: Trebuchet, Trebuchet MS, Tahoma, Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.principal {
    display:block;
    margin:0 auto;
    width:500px;
    color: #FFFFFF;
    font-family:Arial;
}

form {
    width:100%;
	max-width: 400px;
}

input, textarea {
    width:90%;
    height:10px;
    background:#FFFFFF;
    border:1px solid #A9A9A9;
    padding:12px;
    margin-top:5px;
    font-size:0.75em;
    color:#7F7F7F;
}

textarea {
    height:100px;
}

#submit {
    width:85px;
    height:35px;
    border:1px solid #A9A9A9;
    margin-top:20px;
    cursor:pointer;
}




/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {

}
@media screen and (max-width: 800px){
	main img {
	width: 100%;
	height: auto;
		
}
	main .menu{
		flex-direction: column;
		display: flex;
		justify-content:space-around;
		width: 100%;
		padding: 1em;
	}
	/* main .menu .logo .btn-menu{
		direction: inline-block;
	}
	.bt-menu {
		display:block;
		padding-top: 10px;
		font-size:1em;
		
	}*/
	
	
	#canvas{
	width:100%;
	height: auto;
	float:left;
	}
	
	#informacion{
		width: 100%;
		float:left;
		font-size:1.2em;
	}
	#arti{
		width: 100%;
		float:left;
		font-size:1.2em;
	}
	#bases{
		width: 100%;
		float:left;
		font-size:1.2em;
	}
	
}
@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir { text-indent: 100%; white-space: nowrap; overflow: hidden; }

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* ==========================================================================
   juego styles
   ========================================================================== */
 #sortable { list-style-type: none; 
	 margin: 0; 
	 padding: 0; 
	 width: 450px; 
	 max-width: none;
}
 #sortable li { 
	 margin: 3px 3px 3px 0; 
	 padding: 1px; 
	 float: left; 
	 width: 100px; 
	 height: 100px; 
	 font-size: 4em; 
	 text-align: center; 
	 max-width: none;
}
main2{
	width:400px;
	height:300px;
}

/* CSS Document */