@charset "UTF-8";
/* CSS Document */

/*------------------------------- RESET ---------------------------------------*/
* {
	box-sizing: border-box;
	outline: none;
}
body, html {
   margin: 0;
   padding:0;
   font-family: 'Ubuntu', sans-serif;
   font-size:18px;
   line-height:26px;
   font-weight:300;
   background-color:#ffffff;
   color:#121212;
}
html{
    height: 100%;
    /*overflow-x: hidden;*/
}
img/all {
   border:0;
   margin:0;
   padding:0;
}
h1,h2,h3,h4,p,ul,ol,li,form,blockquote {
   margin:0;
   padding:0;
   border:0px;
}
ul {
   list-style:none;
}
a {
   color:#494949;
   text-decoration:none;
   outline:none;
}
a img {
   border:none;
}
a:hover {
   text-decoration:underline;
}
a:active, a:active * { outline: none !important; -moz-outline-style: none !important; }
a:focus, a:focus * { outline: none !important; -moz-outline-style: none !important; }
p {
	margin:0 0 20px;
}
fieldset {
   border:0;
   padding:0;
   margin:0;
}
.floatLeft{
	float:left;
}
.floatRight{
	float:right;
}
.clearBoth {
	clear:both;
}
.clearLeft {
	clear:left;
}
.clearRight {
	clear:right;
}
.ocultar {
	position:absolute;
	left:-9999px;
	top:-9999px;
}
.boxSizing{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}
/*------------------------------- /RESET ---------------------------------------*/
/*------------------------------- FONT-FACE BORRAR CUANDO SE ACTIVE ENLACE GOOGLE FONTS ---------------------------------------*/
@font-face {
    font-family: 'ubuntulight_italic';
    src: url('../fonts/Ubuntu-LightItalic-webfont.eot');
    src: url('../fonts/Ubuntu-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Ubuntu-LightItalic-webfont.woff') format('woff'),
         url('../fonts/Ubuntu-LightItalic-webfont.ttf') format('truetype'),
         url('../fonts/Ubuntu-LightItalic-webfont.svg#ubuntulight_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ubuntumedium';
    src: url('../fonts/Ubuntu-Medium-webfont.eot');
    src: url('../fonts/Ubuntu-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Ubuntu-Medium-webfont.woff') format('woff'),
         url('../fonts/Ubuntu-Medium-webfont.ttf') format('truetype'),
         url('../fonts/Ubuntu-Medium-webfont.svg#ubuntumedium') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ubuntumedium_italic';
    src: url('../fonts/Ubuntu-MediumItalic-webfont.eot');
    src: url('../fonts/Ubuntu-MediumItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Ubuntu-MediumItalic-webfont.woff') format('woff'),
         url('../fonts/Ubuntu-MediumItalic-webfont.ttf') format('truetype'),
         url('../fonts/Ubuntu-MediumItalic-webfont.svg#ubuntumedium_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ubunturegular';
    src: url('../fonts/Ubuntu-Regular-webfont.eot');
    src: url('../fonts/Ubuntu-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Ubuntu-Regular-webfont.woff') format('woff'),
         url('../fonts/Ubuntu-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Ubuntu-Regular-webfont.svg#ubunturegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ubuntubold';
    src: url('../fonts/Ubuntu-Bold-webfont.eot');
    src: url('../fonts/Ubuntu-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Ubuntu-Bold-webfont.woff') format('woff'),
         url('../fonts/Ubuntu-Bold-webfont.ttf') format('truetype'),
         url('../fonts/Ubuntu-Bold-webfont.svg#ubuntubold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ubuntubold_italic';
    src: url('../fonts/Ubuntu-BoldItalic-webfont.eot');
    src: url('../fonts/Ubuntu-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Ubuntu-BoldItalic-webfont.woff') format('woff'),
         url('../fonts/Ubuntu-BoldItalic-webfont.ttf') format('truetype'),
         url('../fonts/Ubuntu-BoldItalic-webfont.svg#ubuntubold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ubuntuitalic';
    src: url('../fonts/Ubuntu-Italic-webfont.eot');
    src: url('../fonts/Ubuntu-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Ubuntu-Italic-webfont.woff') format('woff'),
         url('../fonts/Ubuntu-Italic-webfont.ttf') format('truetype'),
         url('../fonts/Ubuntu-Italic-webfont.svg#ubuntuitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ubuntulight';
    src: url('../fonts/Ubuntu-Light-webfont.eot');
    src: url('../fonts/Ubuntu-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Ubuntu-Light-webfont.woff') format('woff'),
         url('../fonts/Ubuntu-Light-webfont.ttf') format('truetype'),
         url('../fonts/Ubuntu-Light-webfont.svg#ubuntulight') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*------------------------------- /FONT-FACE BORRAR CUANDO SE ACTIVE ENLACE GOOGLE FONTS ---------------------------------------*/
/*------------------------------- PROVISIONAL ---------------------------------------*/
.provisional {
	text-align:center;
} 
.provisional h1{
	background-color:#1a1a1a;
	width:100%;
}
.provisional .contenido {
	padding:100px 0 0;
	overflow:hidden;
} 
.provisional .contenido .imgNovios {
    margin: 100px 0 0;
    width: 100%;
	height:500px;
	background:url(../img/novios-proxi.jpg) no-repeat top center;
}
.provisional h2 {
	text-transform:uppercase;
	font-size:28px;
	color:#dbdbdb;
	margin:0 0 30px;
}
.provisional h3 {
	font-size:35px;
	font-weight:500;
}
.provisional h4 {
	font-size:18px;
	font-weight:500;
	margin:0 0 15px;
}
@media (max-width: 768px) {
	.provisional .contenido {
		padding:70px 0 0;
	}
	.provisional .contenido .imgNovios {
		margin:70px 0 0;
		background:url(../img/novios-proxi-tablet.jpg) no-repeat top center;
	}
}
@media (max-width: 450px) {
	.provisional .contenido {
		padding:50px 0 0;
	}
	.provisional .contenido .imgNovios {
		margin: 50px 0 0;
		background:url(../img/novios-proxi-movil.jpg) no-repeat top center;
	}
}
/*------------------------------- /PROVISIONAL ---------------------------------------*/
/*------------------------------- LAYOUT ---------------------------------------*/
/*---- cookies ------*/
#cookies:target {
	display: none;
}
.contCookies {	
	width:100%;
	font-size: 12px;
	position:relative;
	background-color: #000000;
	color:#999999;
	position: fixed;
	bottom: 0;
	z-index: 5;
}
.contCookies div {	
	padding:20px;
	width:90%;
	max-width:600px;
	margin:0 auto;
	text-align:center;
	overflow:hidden;
	line-height:14px;
}
.contCookies button,	
.contCookies a {	
  background-color: #999999;
  padding: 5px 15px;
  color: #000000;
  font-family: 'ubuntubold';
  text-transform: uppercase;
  transition: background-color 0.5s ease;
  border:none;
  margin:0 10px 0 0;
}
.contCookies a {	
  border:2px solid #999999;
  background-color:#000000;
  padding: 3px 13px;
  color:#999999;
  text-decoration:none;
}
.contCookies button:hover,
.contCookies a:hover {	
  background-color: #ffffff;
}
.contCookies a:hover {	
  border:2px solid #ffffff;
  color:#000000;
}
/*---- /cookies ------*/
.cabecera {
	position:absolute;
	background:url(../img/trasparencia-50.png) repeat 0 0;
	z-index:1000;
	width:100%;
	height:88px;
	overflow: hidden;
}
.cabecera h1 {
/* cuando salga la opcion de menu tarifas
	width:88px;
	height:88px;
	overflow:hidden;
	position:absolute;
	left:50%;
	top:0;
	margin:0 0 0 -38px;
*/
	float: left;
	width:88px;
	height:88px;
	overflow:hidden;
}
.cabecera h1 img{
	transition:margin 0.5s ease;
	width:100%;
}
.cabecera h1:hover img,
.cabecera h1.activo img {
	margin:-88px 0 0;
}
.cabecera .menuHamburguesa {
	position:relative;
}
.cabecera .hamburguesa {
	position:absolute;
	top:-99999px;
	left:-99999px;
}
.cabecera ul {
	max-width:530px;
	width:100%;
	margin:0 auto;
	color:#ffffff;
	font-size:14px;
    font-family: 'ubuntumedium';
    /* quitar cuando salga tarifas */
    margin:0 0 0 60px;
}
.cabecera ul li a,
.cabecera ul li.activo {
	color:#ffffff;
	text-transform:uppercase;
    font-family: 'ubuntumedium';
	font-size:14px;
	line-height:16px;
	padding:34px 15px;
	display:block;
}
.cabecera ul li a:hover,
.cabecera ul li.activo {
	text-decoration:none;
	border-bottom:4px solid #ffffff;
}
.cabecera .telefonoCabecera {
	width:0;
	height:88px;
	top:0;
	right:0;
	position:absolute;
	color:#ffffff;
	font-size:26px;
	background:url(../img/bg-llamar.png) no-repeat 0 0;
	padding:30px 0 30px 45px;
	transition:width 0.5s ease;
}
.cabecera .telefonoCabecera span {
	margin:0 0 -50px;
	display:none;
	width:220px;
}
.cabecera .telefonoCabecera:hover {
	background:url(../img/bg-llamar.png) no-repeat 0 -88px;
	right:0;
	cursor:pointer;
	width:220px;
	padding:30px 0 30px 60px;
}
.cabecera .telefonoCabecera:hover span {
	margin:0;
	display:block;
}
.btn-hamburger,
.menu {display: none;}

/* --- menu fixed -- */
.cabecera.menuFixed {
	position:fixed;
	height:46px;
	top:0;
	overflow: hidden;
}
.cabecera.menuFixed h1 {
    height: 60px;
/*    margin: -6px 0 0 -28px;
*/    margin: -6px 0 0 0;
    width: 60px;
}
.cabecera.menuFixed h1:hover img,
.cabecera.menuFixed h1.activo img {
	margin:-60px 0 0;
}
.cabecera.menuFixed ul {
/*	margin:-20px auto 0;
*/}
.cabecera.menuFixed ul li a,
.cabecera.menuFixed ul li.activo {
/*    padding: 34px 15px 12px;
*/    padding: 14px 15px 12px;
}
.cabecera.menuFixed .telefonoCabecera {
	padding:10px 0 20px 45px;
	background-position:0 -20px;
	height:46px;
	font-size:20px;
/*	top:20px;
*/}
.cabecera.menuFixed .telefonoCabecera:hover {
	background-position:0 -108px;
	padding:10px 0 20px 60px;
	width:190px;
}
.btn-hamburger.menuFixed {
	position: fixed;
}
/* --- /menu fixed -- */
.contenido {
	width:100%;
	overflow:hidden;
	position:relative;
}
.pie {
	clear:both;
	background-color:#000000;
	color:#f0f0f0;
	overflow:hidden;
	float:left;
	width:100%;
    font-family: 'ubuntumedium';
	font-size:14px;
	text-transform:uppercase;
	position: relative;
}
.pie p {
	width:30%;
	float:left;
	margin:20px 0 0 30px;
}
.pie ul {
	width:60%;
	float:right;
	text-align:right;
	margin:0 30px 0 0;
}
.pie ul li,
.pie ul li a {
    font-family: 'ubuntumedium';
	font-size:14px;
	color:#f0f0f0;
	padding:15px 10px 20px;
	display:inline-block;
    border-top:4px solid #000000;
}
.pie ul li {
	padding:0;
	border:none;
}
.pie ul li.activo,
.pie ul li a:hover {
    border-top:4px solid #ffffff;
	color:#ffffff;
	text-decoration:none;
	padding:15px 10px 20px;
}
h2 {
    font-family: 'ubuntulight';
	font-size:40px;
	line-height:40px;
	margin:0 0 30px;
}
h2 strong {
    font-family: 'ubuntubold';
}
h3 {
    font-family: 'ubuntubold';
	font-size:28px;
	line-height:30px;
	margin:40px 0 10px;
}
.subir {
	position: fixed;
	bottom: 30px;
	right: 30px;
	z-index: 1210;
	text-align: left;
	text-indent: -9999px;
	width:37px;
	height:35px;
	display:block;
	background:url(../img/subir.png) no-repeat 0 0;
	transition:background-position 0.5s ease;
	cursor: pointer;
}
.subir:hover {
	background-position:0 -50px;
}

/*------------------------------- /LAYOUT ---------------------------------------*/
/*------------------------------- HOME ---------------------------------------*/
.home {
	background-color: #ffffff;
} 
#cabeceraBodas,
#cabeceraBodasMov {
	width:100%;
	overflow:hidden;
	float:left;
}
#cabeceraBodas img,
#cabeceraBodasMov img {
	width:100%;
	height:auto;
	float:left;
}
.escritorioNone,
.cabecera ul li.activo.escritorioNone {
	display:none;
}
.escritorio25 {
	width:25%;
}
.escritorio50 {
	width:50%;
}
.escritorio75 {
	width:75%;
}
.escritorio25,
.escritorio50,
.escritorio75 {
	float:left;
}
.escritorio25.floatRight,
.escritorio50.floatRight,
.escritorio75.floatRight {
	float:right;
}
.escritorio25 img,
.escritorio50 img,
.escritorio75 img {
	width:100%;
	height:auto;
	float:left;
}
.bodaComunion,
.sobreMi {
	float:left;
}
.txt.boda {
	margin:-100px 0 0;
	background:url(../img/triangulo-arriba.png) no-repeat 20% 0;
	padding:20px 0 0;
}
.txt > div {
	width:100%;
	background-color:#ffffff;
}
.txt .contTxt{
	margin:0 auto;
	padding:12% 0 0;
	width:70%;
	overflow:hidden;
}
.txt.comunion {
	margin:0;
	padding:0 0 20px;
	position:relative;
	z-index:10;
}
.txt.comunion > div {
	padding: 0 0 20px;
	position:absolute;
	z-index:10;
	background:url(../img/triangulo-abajo.png) no-repeat 80% bottom;
}
.txt.comunion > div > div {
	background:#ffffff;
	padding:0 0 15%;
}
.txt .boton {
    background-color:#f3d2c6;
	padding:12px 30px;
	color:#ffffff;
    font-family: 'ubuntubold';
	text-transform:uppercase;
	float:left;
	transition:background-color 0.5s ease;
}
.txt.comunion .boton {
    background-color:#c5e1a5;
}
.txt .boton:hover {
    background-color:#333333;
	text-decoration:none;
}
.iconoBoda,
.iconoComunion {
	position:relative;
}
.iconoBoda {
	background-color:#f3d2c6;
	transition:background-color 0.5s ease;
}
.iconoBoda:hover {
	background-color:#efb9a6;
}
.iconoComunion {
	background-color:#c5e1a5;
	transition:background-color 0.5s ease;
}
.iconoComunion:hover {
	background-color:#b2d08e;
}
.iconoBoda,
.iconoComunion {
	overflow:hidden;
	cursor:pointer;
}
.iconoBoda .icono,
.iconoComunion .icono {
	width:68px;
	margin:-34px 0 0 -34px;
	position:absolute;
	left:50%;
	top:50%;
	transition:top 0.5s ease;
}
.iconoBoda h2,
.iconoComunion h2 {
	width:100%;
	position:absolute;
	top:150%;
	text-align:center;
	color:#ffffff;
    font-family: 'ubuntubold';
	text-transform:uppercase;
	font-size:30px;
	transition:top 0.5s ease;
}
.iconoBoda:hover .icono,
.iconoComunion:hover .icono {
	top:-50%;
}
.iconoBoda:hover h2,
.iconoComunion:hover h2 {
	top:45%;
}
/*---- sobre mi ----*/
.sobreMi {
	background:url(../img/fotografo-gipuzkoa_fernan-puras_01.jpg) no-repeat left bottom;
	background-size:50.1%;
}
.contSobreMi {
	width:50%;
	float:right;
}
.sobreMi .txt {
	background:url(../img/trasparencia-85.png) repeat 0 0;
	color:#ffffff;
}
.sobreMi .contTxt {
	background-color:inherit;
	color:#ffffff;
	padding:15% 0 40px;
}
.sobreMi .contSobreMi a {
	background-color:#ffffff;
	color:#000000;
	text-align:center;
	padding:30px 0 25px;
	height:80px;
	overflow:hidden;
	text-transform:uppercase;
	display:block;
	width:100%;
    font-family: 'ubuntubold';
	transition:background-color 0.5s ease;
}
.sobreMi .contSobreMi a:hover {
	background-color:#000000;
	color:#ffffff;
	text-decoration:none;
}
.sobreMi .redes {
	width:50%;
	background:url(../img/trasparencia-60.png) repeat 0 0;
	text-align:right;
	float:left;
	margin:-81px 0 0;
	padding:23px 0;
	height:81px;
	overflow:hidden;
	clear:right;
}
.redes li {
	display:inline-block;
	margin:0 20px 0 0;
}
.redes li a {
	width:37px;
	height:35px;
	display:inline-block;
	background:url(../img/redes-sociales.png) no-repeat 0 0;
	transition:background-position 0.5s ease;
}
.redes li a:hover {
	background-position:0 -50px;
}
.redes li.instagram a {
	background-position:0 -100px;
}
.redes li.instagram a:hover {
	background-position:0 -150px;
}
.redes li.flickr a {
	background-position:0 -200px;
}
.redes li.flickr a:hover {
	background-position:0 -250px;
}
/*---- /sobre mi ----*/
/*------------------------------- /HOME ---------------------------------------*/
/*------------------------------- CONTACTO ---------------------------------------*/
.contacto {
}
.cabContacto {
	overflow:hidden;
	position:relative;
}
.cabContacto > img{
	width:100%;
	height:auto;
	float:left;
}
.cabContacto .contCab {
	width:50%;
	position:absolute;
	left:25%;
	bottom:0;
}
.cabContacto .info {
	background:url(../img/trasparencia-60.png) repeat 0 0;
	padding:70px 0 40px;
	color:#ffffff;
	position:absolute;
	right:0;
	bottom:0;
}
.cabContacto h2 {
	margin:0 15% 10px;
	line-height:34px;
	font-size:34px;
}
.cabContacto ul {
	margin:0 15%;
}
.cabContacto ul li,
.cabContacto ul li a {
	color:#ffffff;
}
.cabContacto .redes {
    padding:35px 0 0;
}
.cabContacto .redes li {
    float: left;
    margin: 0 20px 0 0;
}
.mapaBio {
	xdisplay:table;
}
.contMapaBio {
	xdisplay:table-row;
	float:none;
	position:relative;
}
.mapa {
	display:table-cell;
	float:none;
	background:url(../img/fotografo-gipuzkoa_tolosa2.jpg) no-repeat center center;
	background-size:cover;
	position:relative;
	width:50%;
	vertical-align:top;
}
.mapa .localidad {
	background-color:#000000;
	color:#ffffff;
	position:absolute;
	top:0;
	z-index:500;
}
.mapa .localidad p {
	font-size:33px;
	margin:20% 15% 10%;
    font-family: 'ubuntulight';
}
.mapa .localidad p span {
	font-size:25px;
	text-transform:uppercase;
	color:#999999;
}
.biografia {
	background-color:#f3f3f3;
	padding:80px 0 40px;
	display:table-cell;
	width:50%;
}
.biografia .contBio {
	padding:0 5% 0 0;
	float:right;
	width:45%;
}
.biografia .contBio blockquote {
	background:url(../img/comillas.png) no-repeat 0 0;
	padding:30px 0 0 30px;
    font-family: 'ubuntulight_italic';
	font-size:36px;
	line-height:36px;
	margin:30px 0;
	color:#a7a7a7;
}
.biografia .contBio blockquote strong {
    font-family: 'ubuntubold_italic';
}
.botonContacto {
	margin:0 0 0 25%;
	background-color:#000000;
	color:#ffffff;
	text-align:center;
	padding:30px 0 25px;
	height:80px;
	overflow:hidden;
	text-transform:uppercase;
	display:block;
    font-family: 'ubuntubold';
	clear:both;
	transition:background-color 0.5s ease;
	width:25%;
	position:absolute;
	bottom:-80px;
	left:0;
}
.botonContacto:hover {
	background-color:#ffffff;
	color:#000000;
	text-decoration:none;
}
.servicios {
	position:relative;
	clear:both;
	overflow:hidden;
	margin:160px 0 0;
	float:left;
	width:100%;
	background:#000000 url(../img/fotografo-gipuzkoa_fernan-puras_05.jpg) no-repeat center top;
	background-size:cover;
}
.servicios .contServicios {
	margin:40px 0;
	position:relative;
	z-index:50;
	text-align:center;
}
.servicios .contServicios h2 {
	color:#ffffff;
	text-align:center;
	clear:both;
	padding:0 20px;
}
.servicios .contServicios .rombos {
	overflow:hidden;
	width:100%;
	text-align:center;
}
.servicios .contServicios .bodas,
.servicios .contServicios .comuniones {
	display:inline-block;
	position:relative;
	margin:0 20px;
	overflow:hidden;
}
.servicios .contServicios .bodas a,
.servicios .contServicios .comuniones a {
	display:inline-block;
	width:244px;
	height:244px;
	position:relative;
}
.servicios .contServicios .bodas a img,
.servicios .contServicios .comuniones a img {
	position:absolute;
	top:0;
	left:0;
	transition:top 0.5s ease;
}
.servicios .contServicios .bodas a:hover img,
.servicios .contServicios .comuniones a:hover img {
	top:-300px;
}
.servicios .contServicios h3 {
	position:absolute;
	top:450px;
	text-align:center;
	color:#ffffff;
	transition:top 0.5s ease;
	width:100%;
    font-family: 'ubuntubold';
	font-size:26px;
}
.servicios .contServicios a:hover h3 {
	top:70px;
}
.servicios h2.italic {
    font-family: 'ubuntulight_italic';
}
.servicios ul {
    margin:0 auto 30px;
	width:980px;
	text-align:center;
	clear:both;
}
.servicios ul li {
    background:url(../img/rombo-datos.png) no-repeat 0 0;
	width:319px;
	height:321px;
	display:inline-block;
	color:#ffffff;
	text-transform:uppercase;
	margin:-80px 0 0;
}
.servicios ul li span {
    font-size:62px;
	line-height:62px;
    font-family: 'ubuntubold';
	display:block;
	padding:115px 0 0;
}
.servicios ul li span img {
    margin:0 0 0 10px;
}
/*------------------------------- /CONTACTO ---------------------------------------*/
/*------------------------------- TEXTUALES ---------------------------------------*/
.textual {
	background-color:#f3f3f3;
	padding:130px 0 80px;
}
.textual .contTextual {
	background-color:#ffffff;
	width:90%;
	max-width: 680px;
	margin:0 auto;
	padding:60px 5% 30px;
}
.textual ul {
	padding:20px 0;
}
.textual ul li {
	margin:0 0 20px;
	padding:0 0 0 25px;
	background:url(../img/bullet.png) no-repeat 0 12px;
}
.textual a {
	font-weight:bold;
}
/*------------------------------- /TEXTUALES ---------------------------------------*/
/*------------------------------- MASONRY BODAS ---------------------------------------*/
#container {
	width:100%;
	overflow:hidden;
	float:left;
}
.item {
	width: 25%;
	overflow:hidden;
	height:auto;
	float:left;
}
.item.floatRight {
	float:right;
}
.item.w2 { width: 50%; }
.item.w3 { width: 75%; }
.item.w4 { width: 100%; }
.item img {
	width: 100%;
	height:auto;
	float:left;
}
.item.floatRight img {
	float:right;
}
.contenido h2.masonry {
	position:absolute;
	z-index:100;
	top:88px;
	width:20%;
	background-color:#000000;
	color:#ffffff;
	padding:10px 5% 10px 0;
	text-align:right;
	font-size:24px;
	text-transform:uppercase;
}
.item.escritorioNone {
	display:none;
}
.item.bigEscritorio {
	display:block;
}
.item.escritorio,
.item.tablet,
.item.tabletMovil,
.item.movil {
	display:none;
}
/*------------------------------- /MASONRY BODAS ---------------------------------------*/
/*------------------------------- MAPA WEB ---------------------------------------*/
.mapaWeb {
	background:url(../img/mapa-web-fernan-puras-fotografo.jpg) no-repeat top center;
	background-size:cover;
	overflow:hidden;
	width:100%;
	height:auto;
	background-color: #000000;
	padding: 0 0 8%
}
.mapaWeb img.imgFondo {
	width:100%;
	height:auto;
	min-height:1024px;
	position:relative;
	z-index:1;
}
.contenido.mapaWeb h2 {
  position: absolute;
  z-index: 100;
  top: 88px;
  width: 20%;
  background-color: #000000;
  color: #ffffff;
  padding: 10px 5% 10px 0;
  text-align: right;
  font-size: 24px;
  text-transform: uppercase;
}
.mapaWeb .rombos {
	z-index:20;
	xposition:absolute;
	top:0;
	width:100%;
}
.mapaWeb .rombos .contRombos{
	width:70%;
	margin:180px auto;
	overflow:hidden;
}
.mapaWeb .rombos .contRombos > div {
	overflow:hidden;
	float:left;
}
.mapaWeb .rombos .contRombos > div a {
	width:244px;
	height:244px;
	position:relative;
	display:inline-block;
}
.mapaWeb .rombos .contRombos > div a img {
	left: 0;
    position: absolute;
    top: 0;
}
.mapaWeb .rombos .contRombos > div a:hover {
	text-decoration:none;
}
.mapaWeb .rombos .contRombos > div a:hover img {
    top: -300px;
}
.mapaWeb .rombos .contRombos > div a h3 {
    color:#ffffff;
	font-size:24px;
	font-weight:normal;
	text-align:center;
	margin:130px 0 0;
    font-family: 'ubunturegular';
	position:relative;
}
.mapaWeb .rombos .contRombos > div a:hover h3 {
    color:#323232;
}
.mapaWeb .rombos .contRombos .comuniones {
    margin:132px 0 0 -112px;
}
.mapaWeb .rombos .contRombos .tarifas {
    margin:-112px 0 0 0;
}
.mapaWeb .rombos .contRombos .contacto {
    /*margin:22px 0 0 -112px; para cuando salga tarifas*/
    margin:-112px 0 0 0;
}
/*------------------------------- /MAPA WEB ---------------------------------------*/
@media (min-width: 1681px) {
	/*-- home --*/
	.bodaComunion .txt .contTxt {
		width:50%;
	}
	.bodaComunion h2,
	.servicios .contServicios h2,
	.cabContacto h2 {
		font-size: 54px;
		line-height: 54px;
	}
	.bodaComunion p {
		margin:0 0 40px;
	}
	.sobreMi {
		background-position: left 85%;
		background-size:50%;
	}
	/*-- /home --*/
	/*-- contacto --*/
	.servicios .contServicios {
		margin: 80px 0 100px;
	}
	/*-- /contacto --*/
	/*-- MAPA WEB --*/
	.mapaWeb .rombos .contRombos {
		margin: 300px auto;
		width: 40%;
	}
	/*-- /MAPA WEB --*/
}
@media (max-width: 1680px) {
	/*-- masonry bodas --*/
	.item.escritorio {
		display:block;
	}
	.item.bigEscritorio,
	.item.tablet,
	.item.tabletMovil,
	.item.movil {
		display:none;
	}
	/*-- /masonry bodas --*/
}
@media (max-width: 1024px) {
	/*-- home --*/
	.txt .contTxt {
	  padding: 10% 0 0;
	  width: 78%;
	}
	.txt h2 {
		font-size:36px;
		line-height:36px;
		margin:0 0 20px;
	}
	/*-- /home --*/
	/*-- contacto --*/
	.servicios {
		background-position:-75px 0;
	}
	.cabContacto h2 {
	  line-height: 25px;
	  font-size:27px;
	}
	.cabContacto .info {
		padding: 60px 0 20px;
	}
	.cabContacto .redes {
		padding: 20px 0 0;
	}
	.biografia .contBio blockquote {
		font-size: 30px;
		line-height: 30px;
	}
	/*-- /contacto --*/
}
@media (max-width: 1014px) {
	/*-- layout --*/
	.cabecera,
	.cabecera.menuFixed {
		height:62px;
	}
	.cabecera h1,
	.cabecera.menuFixed h1 {
		width:72px;
		height:72px;
		margin:-3px 0 0 5px;
		left:0;
	}
	.cabecera h1:hover img,
	.cabecera h1.activo img,
	.cabecera.menuFixed h1:hover img,
	.cabecera.menuFixed h1.activo img {
		margin:-72px 0 0;
	}
	.btn-hamburger,
	.menu {display: block;}
	.cabecera .hamburguesa {
		position:absolute;
		top:0;
		left:-62px;
		display:table;
		width:62px;
		height:62px;
		overflow:hidden;
	}
	.menuHamburguesa {
		display: none;
	}
	.menu ul li {
		float:none;
		display:block;
		border-bottom:1px solid #444444;
		padding:0;
		margin:0;
	}
	.menu ul li a,
	.menu ul li.activo {
		display:block;
		padding:15px 0;
		text-align:center;
		transition:background-color 0.5s ease;
		width:100%;
		color:#cccccc;
	}
	.menu ul li.activo {
		background-color:#cccccc;
		color: #333333;
	}
	.menu ul li a:hover {
		background-color:#cccccc;
		border-bottom:none;
		text-decoration: none;
		color: #333333;
	}
	.menu .telefonoCabecera {
		color: #cccccc;
		text-align: center;
		padding: 18px 0;
		height: 62px;
		margin: 0;
		background-color: #000000;
		font-weight: bold;
	}
	.pie p,
	.pie ul {
		width:100%;
		text-align:center;
		float:none;
		margin:0;
		padding:20px 0 0;
	}
	.pie ul {
		padding:0;
	}
	/*-- /layout --*/
	/*-- home --*/
	.escritorio25,
	.escritorio50,
	.escritorio75 {
		width:inherit;
	}
	.tablet50 {
		width:50%;
	}
	.tablet100 {
		width:100%;
	}
	.tabletNone {
		display:none;
	}
	.txt.boda {
		margin:-20px 0 0;
	}
	.txt.comunion {
		margin:0 0 -20px;
	}
	.txt .contTxt {
	  padding: 10% 0 5%;
	  width: 80%;
	}
	.txt.comunion .contTxt {
	  padding: 20% 0 10%;
	}
	/*-- /home --*/
	/*-- contacto --*/
	.cabContacto .contCab {
		width:100%;
		position:relative;
		left:inherit;
		overflow:hidden;
		padding:62px 0 0;
		background-color:#262626;
	}
	.cabContacto .info {
	  background:none;
	}
	.biografia .contBio {
	  padding: 0 15% 0 0;
	  width: 75%;
	}
	.botonContacto {
	  margin: 0;
	}
	.mapa .fotoTolosa {
		background-position: center top;
		min-height:inherit;
}
	.servicios ul {
		width:auto;
	}
	.servicios ul li {
		margin:0;
	}
	.servicios ul li.last {
		margin:-155px 0 0;
	}
	.servicios .contServicios .bodas img,
	.servicios .contServicios .comuniones img,
	.servicios .contServicios .bodas:hover img,
	.servicios .contServicios .comuniones:hover img {
		top:-300px!important;
	}
	.servicios .contServicios h3,
	.servicios .contServicios h3:hover {
		top:70px!important;
	}
	/*-- /contacto --*/
	/*-- masonry bodas --*/
	.grid-sizer {width:50%;}
	.item { width: 50%; }
	.item.w2 { width: 50%;}
	.item.w2Tablet { width: 50%; display:block; }
	.item.w3 { width: 75%; }
	.item.w4,
	.item.w4Tablet { width: 100%; }
	.item.floatRightTablet {
		float:right;
	}
	.item.floatRightTablet img {
		float:right;
	}
	.contenido.masonry {
		background-color:#262626;
	}
	#container {
		margin:62px 0 0;
	}
	.contenido h2.masonry {
		top:62px;
		width:45%;
	}
	.item.tablet,
	.item.tabletMovil {
		display:block;
	}
	.item.bigEscritorio,
	.item.escritorio,
	.item.movil {
		display:none;
	}
	/*-- /masonry bodas --*/
}
@media (max-width: 768px) {
	.iconoBoda h2,
	.iconoComunion h2 {
		top:55%;
	}
	.iconoBoda .icono,
	.iconoComunion .icono {
		top:45%;
	}
	.txt.comunion > div {
	  padding: 0 0 13%;
	}
	/*-- TEXTUALES --*/
	.textual {
	  padding: 100px 0 40px;
	}
	/*-- TEXTUALES --*/
	/*-- MAPA WEB --*/
	.mapaWeb .rombos .contRombos {
		width: 90%;
	}
	/*-- /MAPA WEB --*/
}
@media (max-width: 645px) {
	.servicios ul li.last {
		margin:0;
	}
}
@media (max-width: 604px) {
	.movil100 {
		width:100%;
		display:block;
	}
	.movil100 img {
		width:100%;
		height:auto;
		float:left;
	}
	.movilNone {
		display:none;
	}
	.txt .contTxt,
	.txt.comunion .contTxt {
		padding:15% 0;
	}
	.txt.comunion > div {
		padding:0;
	}
	/*---- sobre mi ----*/
	.sobreMi {
		background:none;
	}
	.contSobreMi {
		width:100%;
		float:none;
	}
	.sobreMi .redes {
		width:100%;
		float:none;
		margin:0;
		text-align:center;
	}
	.redes li {
		margin:0 10px;
	}
	/*---- /sobre mi ----*/
	/*---- contacto ----*/
	.biografia .contBio {
		width: 85%;
	}
	.cabContacto .info {
	  padding: 60px 0;
	  position: relative;
	}
	.botonContacto {
		position: relative;
		bottom: 0;
	}  
	.biografia {
	  padding: 50px 0 40px;
	  display:table-cell;
	}
	.servicios {
		margin:0;
		padding:60px 0 0;
		background-size: 280%;
	}
	.servicios .contServicios {
	  margin: 40px 0 0;
	}
	.servicios h2.italic {
	  margin:90px 0 20px;
	  clear:both;
	  float:left;
	  width:100%;
	}
	.servicios ul {
		margin:0;
		clear:both;
	}
	.servicios ul li,
	.servicios ul li.last {
		background:#111111 none;
		width:100%;
		height:auto;
		padding:20px 0 30px;
		margin:0;
		border-bottom:1px solid #000000;
	}
	.servicios ul li span {
	  padding: 15px 0 0;
	}
	/*---- /contacto ----*/
	/*-- masonry bodas --*/
	.contenido h2.masonry {
		width:50%;
	}
	.grid-sizer {width:100%;}
	.item { width: 100%; }
	.item.w2 { width: 100%; }
	.item.w3 { width: 100%; }
	.item.w4 { width: 100%; }
	.item.w2Tablet { width: 100%; }
	.item.movilNone {
		display:none;
	}
	.contenido #container {
		margin:120px 0 0;
	}
	.item.movil,
	.item.tabletMovil {
		display:block;
	}
	.item.bigEscritorio,
	.item.escritorio,
	.item.tablet {
		display:none;
	}
	/*-- /masonry bodas --*/
}
@media (max-width: 450px) {
	.btn-hamburger {
	    right: 6px;
	}
	.txt .boton {
		padding: 12px 10px;
	} 
	/*---- contacto ----*/
	.cabContacto h2 {
	  font-size:34px;
	}
	/*---- /contacto ----*/
	/*-- TEXTUALES --*/
	.textual {
	  padding: 100px 0 40px;
	}
	.textual .contTextual {
		padding:30px 10% 30px;
	}
	.textual h2 {
	    font-size: 30px;
	    line-height: 34px;
	    margin: 0 0 0px;
	}
	.textual h3 {
	    font-size: 24px;
	    line-height: 26px;
	    margin: 20px 0 10px;
	}
	/*-- TEXTUALES --*/
	/*-- masonry bodas --*/
	.contenido h2.masonry {
		width:100%;
		text-align:center;
	}
	/*-- /masonry bodas --*/
	/*-- MAPA WEB --*/
	.mapaWeb {
		background-position:-500px 0;
		background-size:300%;
	}
	.contenido.mapaWeb h2 {
		width:100%;
		text-align:center;
	}
	.mapaWeb .rombos .contRombos {
		width: 100%;
		margin:370px 0 50px;
	}
	.mapaWeb .rombos .contRombos > div,
	.mapaWeb .rombos .contRombos .comuniones,
	.mapaWeb .rombos .contRombos .tarifas,
	.mapaWeb .rombos .contRombos .contacto {
	  float: none;
	  margin:0;
	  width:auto;
	  height:auto;
	}
	.mapaWeb .rombos .contRombos > div a h3 {
	 margin: 10px 0;
	}
	.mapaWeb .rombos .contRombos > div a {
	  width:auto;
	  height:auto;
	  padding:0 20px;
	  background:#000000;
	}
	.mapaWeb .rombos .contRombos > div a:hover h3 {
	  color: #bbbbbb;
	}
	.mapaWeb .rombos .contRombos > div img {
	  display:none;
	}
	/*-- /MAPA WEB --*/
	.subir {
		bottom: 15px;
		right: 15px;
	}
	.contCookies div {
		padding: 20px 0;
	} 

}
@media (max-width: 350px) {
	.sobreMi {
		margin: 70px auto 0;
	}
}