/*Extra small devices (portrait phones, less than 544px)
No media query since this is the default in Bootstrap*/

/*-----------
Fuentes
------------*/
@import url('https://fonts.googleapis.com/css?family=Cabin:400,700|Fredoka+One|Pacifico');

/*-----------
Colores

azul: #009dff
amarillo: #fbe200
magenta: #e70094
negro: black
----------*/

/*-----------
Texto
----------*/

*{
	font-size: 16px;
}
p {
	font-family: 'Cabin', sans-serif;
	text-indent: 2rem; 
	color: black;
}
a {
	text-decoration: none;
}
.italica {
	font-style: italic;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: .0rem;
	text-align:center;
}
h1{
	font-family:  'Fredoka One', sans-serif;
	font-size: 1.5em;
}
h4{
	font-size: 1em;
}
.fa{
	font-size: 2em;
	color: white;
    margin-bottom: 1em;
}
.fa-bars{
	color: black;
	padding: 0.8em 0.5em 0 0;
}
#contacto p{
	text-indent: 0px;
}

/*----------- 
Header 
----------*/
header{
	background-color: #0275d8;
}
.contenedor{
	max-width: 1440px;
	margin: 0 auto;
}
.fondo-imagen-cabecera{
	background: url(../images/buena-impresion-color.jpg) no-repeat fixed;
	background-size: cover 100%;
	background-color:rgba(255,0,0,1);
	background-position: top;
	min-height: 550px;
}
.magenta{
	background-color: rgba(255,0,255,1);
}
.amarillo{
	background-color: rgba(255,255,0,1);
}
.cyan{
	background-color: rgba(0,153,255,1);
}
.negro{
	background-color: rgba(0,0,0,1);
}
/*----------- 
Pagina política de privacidad
----------*/
#politica-privacidad{
	background: rgba(0,0,0,0.7); 
	background-position:center;
	background-repeat: no-repeat;
	padding: 2em;
}
#politica-privacidad p{
	color: white;
	text-align: left;
	line-height: 1.8em;
}
#fondo-privacidad{
	background-size: cover 100%;
	background-color:rgba(255,0,0,1);
	background-position: top;
}

/*----------- 
Introducción
----------*/
section#introduccion{
	background: rgba(0,0,0,0.7); 
	background-position:center;
	background-repeat: no-repeat;
	padding: 2em;
}
/*----------- 
Botones
----------*/
.btn{
	border-radius: 0.2em;
	background: #fbe200;
	font-size: 1em;
	font-family: 'Fredoka One', sans-serif;
	color: #008aaa;
}
/*----------- 
Cita
----------*/
.cita{
	font-family: 'Pacifico', serif;
	text-align:center;
	line-height:1em;
}
.cita h2{
	color: #009dff;
	padding: 1em 0;
	line-height:1.4em;
}
.cita h4{
	color: #e70094;
	padding-bottom: 1em;
}
.cita h5{
	color: #009dff;
	padding-bottom: 2em;
}

/*----------- 
Titulo inicio seccion
----------*/
.titulo{
	background-color: black;
	font-family: 'Fredoka One', sans-serif;
	font-size: 1.5em;
	padding: .618em;
	margin-bottom: 1em;
	color: #fbe200;
-webkit-box-shadow: 0 3px 3px 0 rgba(0,0,0,0.6);
box-shadow: 0 3px 3px 0 rgba(0,0,0,0.6);
}
h1.titulo{
	padding-bottom: 0.7em;
	margin-bottom: 0px;
}

/*----------- 
Divs principales con ID
----------*/
/*#introduccion, #reprografia, #encuadernacion, #impresion-de-planos, #material-de-oficina, #diseno-grafico, #contacto{
	
}*/
.container{
	padding: 1em;
}
.negro-transparente{
	background-color:rgba(0,0,0,0.7);
}
/*----------- 
Div Id reprografia
----------*/
#reprografia{
background: rgba(0,157,255,1);
background: rgba(4,116,186,1);
/* Old Browsers */background: -moz-linear-gradient(45deg, rgba(4,116,186,1) 0%, rgba(168,2,110,1) 100%);
 /* FF3.6+ */background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(4,116,186,1)), color-stop(100%, rgba(168,2,110,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(45deg, rgba(4,116,186,1) 0%, rgba(168,2,110,1) 100%);
 /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(45deg, rgba(4,116,186,1) 0%, rgba(168,2,110,1) 100%);
 /* Opera 11.10+ */background: -ms-linear-gradient(45deg, rgba(4,116,186,1) 0%, rgba(168,2,110,1) 100%);
 /* IE 10+ */background: linear-gradient(45deg, rgba(4,116,186,1) 0%, rgba(168,2,110,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0474ba', endColorstr='#a8026e', GradientType=1 );
/* IE6-9 fallback on horizontal gradient */
}
#reprografia p{
	color: white;
}
#reprografia ul li{
	color: white;
	font-family: 'Cabin', sans-serif;
}
/*#reprografia h5{
	color: white;
	font-size: 1.2em;
	font-family: 'Cabin', sans-serif;
}*/

.reprografia{
	margin-top: -10em;
	padding: 10em 1em 3em 1em;
	background-image:url(../images/reprografia-impresion-digital.jpg); 
	background-position:center;
	background-repeat: no-repeat;
}
h3{
	color:white;
	font-family: 'Cabin', sans-serif;
	font-size: 1.2em;
	margin-bottom: 1em;
}
.texto{
		padding: 1em;
}
/*----------- 
Div Id encuadernacion
----------*/
#encuadernacion{
background: rgba(247,232,24,1);
/* Old Browsers */background: -moz-linear-gradient(45deg, rgba(247,232,24,1) 0%, rgba(19,145,176,1) 100%);
 /* FF3.6+ */background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(247,232,24,1)), color-stop(100%, rgba(19,145,176,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(45deg, rgba(247,232,24,1) 0%, rgba(19,145,176,1) 100%);
 /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(45deg, rgba(247,232,24,1) 0%, rgba(19,145,176,1) 100%);
 /* Opera 11.10+ */background: -ms-linear-gradient(45deg, rgba(247,232,24,1) 0%, rgba(19,145,176,1) 100%);
 /* IE 10+ */background: linear-gradient(45deg, rgba(247,232,24,1) 0%, rgba(19,145,176,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7e818', endColorstr='#1391b0', GradientType=1 );
/* IE6-9 fallback on horizontal gradient */
}
#encuadernacion ul li{
	font-family: 'Cabin', sans-serif;
}
.encuadernacion{
	margin-top: -10em;
	padding: 10em 1em 3em 1em;
	background-image:url(../images/encuadernacion.jpg); 
	background-position:center;
	background-repeat: no-repeat;
}
/*----------- 
Div Id impresion-de-planos
----------*/
#impresion-de-planos{
background: rgba(0,157,255,1);
background: rgba(4,116,186,1);
/* Old Browsers */background: -moz-linear-gradient(45deg, rgba(4,116,186,1) 0%, rgba(168,2,110,1) 100%);
 /* FF3.6+ */background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(4,116,186,1)), color-stop(100%, rgba(168,2,110,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(45deg, rgba(4,116,186,1) 0%, rgba(168,2,110,1) 100%);
 /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(45deg, rgba(4,116,186,1) 0%, rgba(168,2,110,1) 100%);
 /* Opera 11.10+ */background: -ms-linear-gradient(45deg, rgba(4,116,186,1) 0%, rgba(168,2,110,1) 100%);
 /* IE 10+ */background: linear-gradient(45deg, rgba(4,116,186,1) 0%, rgba(168,2,110,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0474ba', endColorstr='#a8026e', GradientType=1 );
/* IE6-9 fallback on horizontal gradient */
}
#impresion-de-planos p{
	color: white;
}
#impresion-de-planos ul li{
	color: white;
	font-family: 'Cabin', sans-serif;
}
/*#impresion-de-planos h5{
	color: white;
	font-size: 1.2em;
	font-family: 'Cabin', sans-serif;
}*/

.impresion-de-planos{
	margin-top: -10em;
	padding: 10em 1em 3em 1em;
	background-image:url(../images/impresion-de-planos.jpg); 
	background-position:center;
	background-repeat: no-repeat;
}

/*----------- 
Div Id material-de-oficina
----------*/
#material-de-oficina{
background: rgba(247,232,24,1);
/* Old Browsers */background: -moz-linear-gradient(45deg, rgba(247,232,24,1) 0%, rgba(19,145,176,1) 100%);
 /* FF3.6+ */background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(247,232,24,1)), color-stop(100%, rgba(19,145,176,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(45deg, rgba(247,232,24,1) 0%, rgba(19,145,176,1) 100%);
 /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(45deg, rgba(247,232,24,1) 0%, rgba(19,145,176,1) 100%);
 /* Opera 11.10+ */background: -ms-linear-gradient(45deg, rgba(247,232,24,1) 0%, rgba(19,145,176,1) 100%);
 /* IE 10+ */background: linear-gradient(45deg, rgba(247,232,24,1) 0%, rgba(19,145,176,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7e818', endColorstr='#1391b0', GradientType=1 );
/* IE6-9 fallback on horizontal gradient */
}
#material-de-oficina ul li{
	font-family: 'Cabin', sans-serif;
}
.material-de-oficina{
	margin-top: -10em;
	padding: 10em 1em 3em 1em;
	background-image:url(../images/material-de-oficina.jpg); 
	background-position:center;
	background-repeat: no-repeat;
}
/*----------- 
Div Id diseno-grafico
----------*/
#diseno-grafico{
background: rgba(0,157,255,1);
background: rgba(4,116,186,1);
/* Old Browsers */background: -moz-linear-gradient(45deg, rgba(4,116,186,1) 0%, rgba(168,2,110,1) 100%);
 /* FF3.6+ */background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(4,116,186,1)), color-stop(100%, rgba(168,2,110,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(45deg, rgba(4,116,186,1) 0%, rgba(168,2,110,1) 100%);
 /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(45deg, rgba(4,116,186,1) 0%, rgba(168,2,110,1) 100%);
 /* Opera 11.10+ */background: -ms-linear-gradient(45deg, rgba(4,116,186,1) 0%, rgba(168,2,110,1) 100%);
 /* IE 10+ */background: linear-gradient(45deg, rgba(4,116,186,1) 0%, rgba(168,2,110,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0474ba', endColorstr='#a8026e', GradientType=1 );
/* IE6-9 fallback on horizontal gradient */
}
#diseno-grafico p{
	color: white;
}
#diseno-grafico ul li{
	color: white;
	font-family: 'Cabin', sans-serif;
}
.diseno-grafico{
	margin-top: -10em;
	padding: 10em 1em 3em 1em;
	background-image:url(../images/diseno-grafico.jpg); 
	background-position:center;
	background-repeat: no-repeat;
}

/*----------- 
Div Id contacto
----------*/
#contacto{
background: black;
margin-bottom: 2em;
padding: 1em}
#contacto p{
	color: white;
}
#contacto ul li{
	color: white;
	font-family: 'Cabin', sans-serif;
}

.panel{
	background-color: rgba(255,255,255,0.25); /*blanco transparente*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding: 0.7em;
	margin-bottom:1em;
}
.panel h3{
	padding-bottom: 0.5em;
	border-bottom: solid 2px rgba(255,255,255,0.5); /*blanco transparente*/
	margin-bottom: 1em;
}
/*----------- 
Formulario
----------*/
#formulario iframe	{
    height: 542px;
}

/*----------- 
Pie
----------*/

.footer{
  display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.logo-pie{
	webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
	max-width: 250px;
}

#redes-sociales{
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}
#redes-sociales{
	padding:2em;
}
#redes-sociales .fa{
	color:black;
}

/*----------- 
Divs flexibles centrar imagen
----------*/
.flexible{
	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.flexible img{
	max-width:300px;
}
/*----------- 
Divs semejante a borde para divs de contenido. Div baqueta vertical izquierda
----------*/
.baqueta{
	visibility:hidden;
}

/*----------- 
Formulario
----------*/


/*Small devices (landscape phones, 544px and up)*/
@media (min-width: 544px) { ... }

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
.logo-pie{
	max-width:300px;
}	
	}


/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { ... }

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { ... }

/*Extra large devices (large desktops, 1024px and up)*/
@media (min-width: 1024px) {

/*----------- 
Divs flexibles con imagen, texto y cita
----------*/
#reprografia, #encuadernacion, #impresion-de-planos, #material-de-oficina, #diseno-grafico, #contacto{
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: stretch;
	}
	#encuadernacion{
		min-height: 500px;
	}
.texto{
	order: 2;
    flex: 1 0 33%;
    align-self: center;
	margin-right: 0;
	padding: 2em 1em;
	}
.flexible{
	order: 1	;
    flex: 1 0 35%;
    align-self: center;
	margin-right: 0;
	}
.reprografia, .encuadernacion, .impresion-de-planos, .material-de-oficina, .diseno-grafico{
	order: 3;
    flex: 1 0 30%;
    align-self: strech;
	margin-top:0px; 
	margin-right: 0;
	padding: 0 1em;
	
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
	}
	
/*----------- 
Divs contacto
----------*/
#contacto{
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: center;
	padding-bottom: 1em;
	}	
.texto-contacto{
	order: 0;
    flex: 0 1 100%;
    align-self: auto;
	padding: 1em 2em;
	}
.sucursal, .formulario{
	order: 1;
    flex: 0 1 48%;
    align-self: stretch;	
	margin: 0 0.5em;
}
.formulario{
	order: 1;
    flex: 0 1 100%;
    align-self: stretch;
	margin-right: 0;
	
	margin: 1em 0.5em;
}
/*----------- 
Divs semejante a borde para divs de contenido. Div baqueta vertical izquierda
----------*/
.baqueta{
	visibility: visible;
	background-image: url(../images/reprografia-impresion-digital.jpg);
	
	order: 0;
    flex: 1 0 2%;
    align-self: strech;
	margin-top:0px; 
	margin-right: 0;
	width: 1em;
}
}

@media print{
body{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15pt;
	color: black !important;
	background-color: white;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, a, buttom {
	color:black !important;
}
img, div.reprografia, div.encuadernacion, div.impresion-de-planos, div.diseno-grafico, div.mouse, div.material-de-oficina, iframe, script{
	display: none !important;
	
}
div#introduccion{
	height: 200px;
}
#formulario{
	display:none;
}
img.logo-pie{
	display: inline !important;
	
}
@page:blank{
visibility:hidden;
overflow: hidden;
}

 
html,body{
	height: auto !important;
	page-break-after:avoid;
	page-break-inside:avoid;
	page-break-before: avoid;
}
* {margin:0;padding:0}
footer:before,footer,.redes-sociales{
	margin:0pt !important;
	padding:0pt !important;
}
*:first-letter{
	line-height:auto;
	padding:0pt;
}

}