/*/@import url("princi.css"); */







#php {
	color: #004000;
	font-weight: bold;
	height: 30px;
	width: 140px;
	float: right;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 24px;
}
.ba {
	font: 22px Verdana, Geneva, sans-serif;
	color: #004040;
	width: 280px;
	height: 38px;
	}







#primaria {
	height: auto;
	width: 99%;
	margin-right: auto;
	margin-left: auto;
}


.produc {
	display: inline-table;
	height: 300px;
	width: 195px;
	background-color: #FFF;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #004000;
	margin: 5px;
	
	
        }


table {
	font: 14px Verdana, Geneva, sans-serif;
	color: #002800;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
}






@media (min-width: 1001px) {


#lightbox-container-image-box {
  width: 40% !important;
  height: 370px !important;
}
#lightbox-container-image-data-box {
  width: 40% !important;
}
#lightbox-image {
  height: 350px;
  width: 80%;
}




.muestra_pro {
	float: right;
	width: 40%;
	height: auto;
	margin-top: 30px;
	font: 14px Arial, Helvetica, sans-serif;
	color: #002800;
}
.imagen_pro {
	width: 33%;
	float: left;
	margin-top: 30px;
	margin-left: 30px;
	border: 1px solid #CCCCCC;
	height: auto;
	
}

.contenedor {
	text-align: center;
	overflow: hidden;
	width: 83%;
	float: right;
}

table {
	font: 14px Verdana, Geneva, sans-serif;
	color: #002800;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
}




#prin_trabajos {
	width: 90%;
	text-align: center;
	height: auto;
	
}
 

 
  .lbGallery1 {
	width: 75%;
	height: auto;
	clip: rect(auto,auto,auto,auto);
	margin-right: 50px;
	margin-bottom: 40px;
	float: right;
	margin-left: auto;
	/*display: inline-block;*/
	}
 
 
  .lbGallery {
	width: 75%;
	height: auto;
	clip: rect(auto,auto,auto,auto);
	margin-right: 50px;
	float: right;
	margin-left: auto;
/*	display: inline-block;*/
	background: #FFFFFF;
	}
 
 
 #primaria {
	height: auto;
	width: 95%;
	margin-right: auto;
	margin-left: auto;
}
 
}

@media (max-width: 1000px) {

#lightbox-container-image-box {
  width: 55% !important;
  height: 320px !important;
}
#lightbox-container-image-data-box {
  width: 55% !important;
}
#lightbox-image {
  height: 300px;
  width: 85%;
}

.muestra_pro {
	float: right;
	width: 40%;
	height: auto;
	margin-top: 30px;
	font: 14px Arial, Helvetica, sans-serif;
	color: #002800;
}
.imagen_pro {
	width: 50%;
	float: left;
	margin-top: 30px;
	margin-left: 60px;
	border: 1px solid #CCCCCC;
	height: auto;
	
}

#prin_trabajos {
	width: 100%;
	text-align: center;
	height: auto;
	
}
 
 #tipotrabajo2 {
	height: auto;
	width: 70%;

	*float: right;
	margin-top: 30px;
	margin-bottom: 30px;
	font-size: 14px;
	color: #002800;
	text-align: left;
	display: inline-block;
}
 
  .lbGallery1 {
	width: 75%;
	height: auto;
	clip: rect(auto,auto,auto,auto);
	margin-right: 50px;
	float: right;
	margin-left: auto;
	display: inline-block;
	}
 
 .lbGallery {
	width: 70%;
	height: auto;
	clip: rect(auto,auto,auto,auto);
	margin-right: auto;
	float: none;
	margin-left: auto;
	display: inline-block;
	}
 
}

/* @media (max-width: 800px) and (min-width: 600px) { */



@media only screen and (min-width: 600px), only screen and (max-device-width: 800px) {





#primaria {
	height: auto;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}



.cycle-slideshow img:first-child {
	z-index: 100;
	height: auto;
	width: 90%;
	margin-left: 10px;
	margin-right: auto;
}
/* slideshow images (for most of the demos, these are the actual "slides") */


.imagen_pro {
    width: 40%;
    float: left;
    margin-top: 30px;
    margin-left: 15px;
    border: 1px solid #CCCCCC;
    height: auto;
    position: static;
	
}

.muestra_pro {
    float: right;
    width: 45%;
    height: auto;
    margin-top: 30px;
    font: 14px Arial, Helvetica, sans-serif;
    color: #002800;
    margin-left: 70px;
    display: inline-table;
}







.contenedor {
	text-align: center;
	overflow: hidden;
	width: 99%;
	float: none;
	margin-right: auto;
	margin-left: auto;
}


}



@media (min-width: 481px) and (max-width: 799px) {




#lightbox-container-image-box {
  width: 70% !important;
  height: 320px !important;
}
#lightbox-container-image-data-box {
  width: 70% !important;
}
#lightbox-image {
  height: 300px;
  width: 90%;
}





#php {
	color: #004000;
	height: 30px;
	width: 100px;
	float: right;
	margin-top: 2px;
	margin-right: 40px;
	font: bold 18px Verdana, Geneva, sans-serif;
}
.ba {
	font: 22px Verdana, Geneva, sans-serif;
	color: #004040;
	width: 240px;
	height: 33px;
	}









 .imagen_pro {
	width: 50%;
	margin-left: 20px;
	border: 1px solid #CCCCCC;
	height: auto;
	float: left;
	margin-bottom: 20px;
	position: relative;
	
}
.muestra_pro {
	float: right;
	width: 40%;
	height: auto;
	font: 14px Arial, Helvetica, sans-serif;
	color: #002800;
	margin-right: auto;
	margin-left: auto;
}






.contenedor {
	text-align: center;
	overflow: hidden;
	width: 90%;
	float: none;
	margin-right: auto;
	margin-left: auto;
}

.produc {
	display: inline-table;
	height: 300px;
	width: 200px;
	background-color: #FFF;
	  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		   -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
	

}

#prin_trabajos {
	width: 100%;
	text-align: center;
	height: auto;
	margin-top: 1px;
	margin-right: 1px;
	margin-bottom: 1px;
	margin-left: 1px;
	
}
 
 #tipotrabajo2 {
	height: auto;
	width: 70%;
	*float: right;
	font-size: 14px;
	color: #002800;
	text-align: left;
	display: inline-block;
	margin: 30px auto;
}
 
  .lbGallery1 {
	width: 95%;
	height: auto;
	clip: rect(auto,auto,auto,auto);
	margin-right: auto;
	float: right;
	margin-left: auto;
	display: inline-block;
	}
 .lbGallery {
	width: 90%;
	height: auto;
	clip: rect(auto,auto,auto,auto);
	margin-right: auto;
	float: none;
	margin-left: auto;
	display: inline-block;
	}
 
}

@media (max-width: 479px) {

.produc {
	display: inline-table;
	border: 1px solid #002000;
	height: 300px;
	width: 200px;
	background-color: #FFF;
	margin-bottom: 10px;
	 -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
	
	
        }


.para_ima {
	height: auto;
	width: 100%;
	clear: both;
	margin-right: auto;
	margin-left: auto;
	background: url(seg-info-princ.png);
	
}





#prin_trabajos {
	width: 100%;
	text-align: center;
	height: auto;
	
}
 
 #tipotrabajo2 {
	height: auto;
	width: 90%;
	margin-top: 30px;
	margin-bottom: 30px;
	font-size: 14px;
	color: #002800;
	text-align: left;
	display: inline-block;
}
 
  #tipotrabajo3 {
	height: auto;
	width: 90%;
	font-size: 14px;
	color: #002800;
	text-align: left;
	display: inline-block;
	margin: 30px auto;
}
 
 
  .lbGallery1 {
	width: 90%;
	height: auto;
	clip: rect(auto,auto,auto,auto);
	margin-left: auto;
	margin-right: 25px;
	}
 
 .lbGallery {
	width: 95%;
	height: auto;
	clip: rect(auto,auto,auto,auto);
	margin-right: 30px;
	float: none;
	margin-left: auto;
	display: inline-block;
	}
 
 #textocctv {
	font: 13px Verdana, Geneva, sans-serif;
	color: #002400;
	height: auto;
	width: 80%;
	margin-right: 40px;
	margin-bottom: auto;
	text-align: left;
	display: inline-block;
	margin-left: auto;
	float: right;
}
 
 .contenedor {
	text-align: center;
	overflow: hidden;
	width: 95%;
	margin-right: auto;
	margin-left: auto;
	
}



}


#primaria .contenedor .produc table tr td div {
	text-align: center;
	width: 120px;
	margin-right: auto;
	margin-left: auto;
}



/* */


/*
    these are just the default styles used in the Cycle2 demo pages.  
    you can use these styles or any others that you wish.
*/


/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }


.cycle-slideshow {
	width: 80%;
	min-width: 200px;
	max-width: 500px;
	padding: 0;
	position: relative;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
 }

/* slideshow images (for most of the demos, these are the actual "slides") */
.cycle-slideshow img {
	/* 
    some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content
    */

	width: 80%;
	margin-left: 23px;
	height: auto;
}

/* in case script does not load */
.cycle-slideshow img:first-child {
	z-index: 100;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	height: auto;
}

/* pager */
.cycle-pager { 
    text-align: center; width: 100%; z-index: 500; position: absolute; top: 10px; overflow: hidden;
}
.cycle-pager span { 
    font-family: arial; font-size: 50px; width: 16px; height: 16px; 
    display: inline-block; color: #ddd; cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}


/* caption */
.cycle-caption { position: absolute; color: white; bottom: 10px; right: 10px; z-index: 700; }


/* overlay */
.cycle-overlay { 
    font-family: tahoma, arial;
    position: absolute; bottom: 0; width: 100%; z-index: 600;
    background: black; color: white; padding: 15px; opacity: .5;
}


/* prev / next links */



.cycle-prev, .cycle-next {
	position: absolute;
	top: 5px;
	width: 18%;
	height: 100%;
	cursor: pointer;
	z-index: 500;
	
}
.cycle-prev {
	left: 2px;
	background: url(/images/izq.png) 0% 100% no-repeat;
	
}
.cycle-next {
	right: 1px;
	background: url(/images/der.png) 0% 100% no-repeat;
	margin-right: 0px;
	margin-top: 3px;
}
.cycle-prev:hover, .cycle-next:hover {
	opacity: .6;
	filter: alpha(opacity=1);
	
}




/* display paused text on top of paused slideshow */
.cycle-paused:after {
    content: 'Paused'; color: white; background: black; padding: 10px;
    z-index: 500; position: relative; top: 10px; right: 10px;
    border-radius: 10px;
    opacity: .5; filter: alpha(opacity=50);
}

/* 
    media queries 
    some style overrides to make things more pleasant on mobile devices
*/

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {




#lightbox-container-image-box {
  width: 80% !important;
  height: 320px !important;
}
#lightbox-container-image-data-box {
  width: 80% !important;
}
#lightbox-image {
  height: 300px;
  width: 85%;
}

 .lbGallery {
	width: 100%;
	height: auto;
	clip: rect(auto,auto,auto,auto);
	margin-right: auto;
	float: none;
	margin-left: auto;
	display: inline-block;
	}







    .cycle-slideshow {
	width: 95%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}
    .cycle-overlay { padding: 4px }
    .cycle-caption { bottom: 4px; right: 4px }



 .imagen_pro {
	width: 90%;
	margin-left: auto;
	border: 1px solid #CCCCCC;
	height: auto;
	margin-right: auto;
	float: none;
	
}
.muestra_pro {
	float: none;
	width: 90%;
	height: auto;
	margin-top: 30px;
	font: 14px Arial, Helvetica, sans-serif;
	color: #002800;
	margin-right: auto;
	margin-left: auto;
}


.navbar .brand {
	float: none;
	padding: 10px 20px;
	margin-left: auto;
	font-size: 20px;
	font-weight: 200;
	color: #FFFFFF;
	margin-right: auto;
	text-align: center;
	width: 28%;
}

.navbar-inverse .brand,
.navbar-inverse .nav > li > a {
	color: #FFFFFF;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	font-weight: bold;
}


 .contenedor {
	text-align: center;
	overflow: hidden;
	width: 95%;
	margin-right: auto;
	margin-left: auto;
	
}


}




@media (max-width: 479px) {



	
	
	#lightbox-container-image-box {
  width: 90% !important;
  height: 280px !important;
}
#lightbox-container-image-data-box {
  width: 90% !important;
}
#lightbox-image {
  height: 260px;
  width: 85%;
}
	
.lbGallery {
	width:95%;
	/*background: #FFF; */
	height: auto;
	clip: rect(auto,auto,auto,auto);
	margin-right: auto;
	margin-left: auto;
	display: inline-block;
	/*float: right;*/
	}
	
	 .lbGallery1 {
	width: 100%;
	height: auto;
	clip: rect(auto,auto,auto,auto);
	margin-left: auto;
	
	}
	
	
.navbar .brand {
	float: none;
	padding: 10px 20px;
	margin-left: auto;
	font-size: 20px;
	font-weight: 200;
	color: #FFFFFF;
	margin-right: auto;
	text-align: center;
	width: 60%;
}

.navbar-inverse .brand,
.navbar-inverse .nav > li > a {
	color: #FFFFFF;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	font-weight: bold;
}


	
}

/*@media (min-width: 350px) and (max-width: 480px) { */
	
@media (max-width: 450px) {


.cycle-prev, .cycle-next {
	position: absolute;
	top: 0;
	width:   19%;
	height: 100%;
	cursor: pointer;
	z-index: 500;
	
}


.cycle-prev {
	left: 1px;
	background: url(/images/izq.png) 0% 100% no-repeat;
	
}



.cycle-slideshow img {
	/* 
    some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content
    */

	width: 80%;
	margin-left: 25px;
	text-align: center;
	height: auto;
}

.produc {
	display: inline-table;
	border: 1px solid #002000;
	height: 300px;
	width: 80%;
	background-color: #FFF;
	margin-bottom: 10px;
        -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
	
	    }


}

@media (min-width: 1200px) {




}





	.img_tui {
	height: 100px;
	width: 90%;
	color: #FFFFFF;
	vertical-align: middle;
	font: bold 24px Verdana, Geneva, sans-serif;
	text-align: left;
	margin: 20px auto 70px;
	background: no-repeat;
}
.color_deini {
	font-size: 18px;
	font-weight: bold;
	color: #002D00;
	text-align: left;
	float: none;
	width: 90%;
	height: 35px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
}
#primaria {
	font-size: 18px;
	font-weight: bold;
	color: #003500;
}


/*media only screen and (max-width: 480px){*/
@media (max-width: 482px) {

	#lightbox-container-image-box {
  width: 90% !important;
  height: 250px !important;
}
#lightbox-container-image-data-box {
  width: 85% !important;
}
#lightbox-image {
  height: 230px;
  width: 94%;
}


.color_deini {
	font-size: 18px;
	font-weight: bold;
	color: #002D00;
	text-align: left;
	float: none;
	width: 99%;
	height: 35px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 30px;
}



#content {
	width: 90%;
	height: 480px;
	margin-bottom: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
}

#imatgeGran {
	margin-left: auto;
	margin-right: auto;
	width:90%;

}


.container{
	
max-width:90%!important}
/*width:98%; */


#carrusel{
	float: none;
	width: 305px;
	overflow: hidden;
	height: 120px;
	position: relative;
	margin-top: 20px;
}


.muestra_pro {
    float: none;
    width: 95%;
    height: auto;
    margin-top: 30px;
    font: 14px Arial, Helvetica, sans-serif;
    color: #002800;
    display: inline-table;
}


}

@media only screen and (max-width: 250px) {
	
#lightbox-container-image-box {
 width: 90% !important;
 height: 200px !important;
}
#lightbox-container-image-data-box {
 width: 85% !important;
}
#lightbox-image {
  height: 180px;
  width: 85%;
}
  

}



.menu_p ul {
	font-size: 12px;
	color: #FFFFFF;
}

#importcon {
	float: none;
	height: 101px;
	width: 201px;
	font: normal 14px Verdana, Geneva, sans-serif;
	color: #004000;
	text-align: center;
	margin: 30px auto 10px;
}