@charset "utf-8";
/* Medios fluidos sencillos
   Nota: Los medios fluidos exigen la eliminación de los atributos de altura y anchura de los medios del código HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 no admite max-width (anchura máxima), por lo que usa de manera predeterminada una anchura del 100% */
.ie6 img {
	width:100%;
}

/*
	Propiedades de cuadrícula fluida de Dreamweaver
	----------------------------------
	dw-num-cols-mobile:		2;
	dw-num-cols-tablet:		4;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	15;
	
	Inspiración obtenida de "Responsive Web Design" de Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	y Golden Grid System de Joni Korpi
	http://goldengridsystem.com/
*/

@font-face {
	font-family: Antonio;
	src: url(Antonio-Regular.ttf); /* TTF file for CSS3 browsers */
}
@font-face {
	font-family: Antonio;
	src: url(Antonio-Regular.eot); /*EOT file for IE*/
}

@font-face {
	font-family: Casper;
	src: url(Casper.ttf), url(Casper%20Bold.ttf), url(Casper%20Bold%20Italic.ttf), url(Casper%20Italic.ttf);
}
@font-face {
	font-family: Casper;
	src: url(Casper.eot), url(Casper_Bold.eot), url(Casper_Bold_Italic.eot), url(Casper_Italic.eot); /*EOT file for IE*/
}

body {
	padding:0;
	margin:0;	
	
	
}

/* Diseño móvil: 480 px e inferior. */



/* aquí comença la pàgina 'disseny web' */
.section-padding{
	width: 100%;
	margin: 100px 0;
	}

.galeriaWeb {
    width: 90%;
    margin: 10% 0 0 5%;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
}
.galeriaWeb .mascara, .galeriaWeb .contentWeb {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 1px;
	left: 0
}
.galeriaWeb img {
	width: 100%;
    display: block;
    position: relative
}
.galeriaWeb h2 {
    text-transform: uppercase;
    color: #333;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    margin: 20px 0 0 0
}
.galeriaWeb p {
    font-family: "Antonio Regular", Georgia, serif;
    font-style: italic;
    font-size: 17px;
    position: relative;
    color: #333;
    padding: 10px 20px 20px;
    text-align: center
}
.galeriaWeb a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
	font-size: 17px;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.galeriaWeb a.info:hover {
    box-shadow: 0 0 5px #000
}
.view-second img { 	
	transition: all 0.2s ease-in;
}
.view-second .mascara {
	background-color: rgba(255,208,67,0.7);
	width: 100%;
	padding: 100%;
	height: 100%;
	opacity: 0;
	transform: translate(100%, 100%) rotate(45deg);
	transition: all 0.2s ease-in-out;
}
.view-second h2 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: translate(100%, -200%);
	transition: all 0.2s ease-in-out;
}
.view-second p { 
	transform: translate(-100%, 100%);
	transition: all 0.2s ease-in-out;
}
.view-second a.info { 
    transform: translate(0, 1100%);
	transition: all 0.2s 0.1s ease-in-out;
} 
.view-second:hover .mascara { 
	opacity:1; 
	transform: translate(-50%, -50%) rotate(45deg);
}							  
.view-second:hover h2 { 
	transform: translate(0px,0px);
	transition-delay: 0.3s; 
}
.view-second:hover p { 
    transform: translate(0px,0px); 
	transition-delay: 0.4s;
}
.view-second:hover a.info { 
	transform: translate(0px,0px); 
	transition-delay: 0.5s;
}
.tornarenrere-web{
	clear: both;
	float: left;
	margin-left: 27.55%;
	margin-top: 50px;
	margin-bottom: 50px;
	width: 45%;
	display: block;
	border: 1px solid #9d9e9e;
	font-weight: bold;
	font-family: Casper;
	color: #898989;
	text-align: center;
	
}

.tornarenrere-web:hover{
	background-color: #FFED00;
	color: black;
	border: 1px solid #FFED00;
	
}

/* aquí s'acaba la pàgina 'disseny web' */


/* Diseño tableta: de 481 px a 768 px. Hereda estilos de: Diseño móvil. */

@media only screen and (min-width: 610px) {
	
.galeriaWeb {
    width: 50%;
    margin: 5% 0 0 25%;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
}
.tornarenrere-web{
	clear: both;
	float: left;
	margin-left: 27.55%;
	margin-top: 100px;
	margin-bottom: 100px;
	width: 45%;
	display: block;
	border: 1px solid #9d9e9e;
	font-weight: bold;
	font-family: Casper;
	color: #898989;
	text-align: center;
	
}

}


/* Diseño escritorio: de 900 px hasta un máximo de 1200 px.  Hereda estilos de: Diseño móvil y Diseño tableta. */

@media only screen and (min-width: 900px) {

.section-padding{
	width: 100%;
	margin: 50px 0 0 0;
	}
	.galeriaWeb {
    width: 50%;
    margin: 15% 0 0 25%;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
}
	.tornarenrere-web{
	clear: both;
	float: left;
	margin-left: 27.55%;
	margin-top: 100px;
	margin-bottom: -150px;
	width: 45%;
	display: block;
	border: 1px solid #9d9e9e;
	font-weight: bold;
	font-family: Casper;
	color: #898989;
	text-align: center;
	
}
.galeriaWeb h2 {
    
    font-size: 20px;
    
    margin: 30px 0 0 0
}
.galeriaWeb p {
    
    font-size: 20px;
    
}
}



/*       disseny escriptori gran min 1200px       */
@media only screen and (min-width: 1200px) {

.galeriaWeb {
    width: 32%;
    margin: 7% 0 0 12%;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
}
.tornarenrere-web{
	clear: both;
	float: left;
	margin-left: 36.66%;
	margin-top: 100px;
	margin-bottom: -150px;
	width: 26.66%;
	display: block;
	border: 1px solid #9d9e9e;
	font-weight: bold;
	font-family: Casper;
	color: #898989;
	text-align: center;
	
}

}