.view {
    width: 100%;
    height: 100%;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0
}
.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view a.info:hover {
    box-shadow: 0 0 5px #000
}


.view-tenth img { 
	transform: scaleY(1);
	transition: all 0.7s ease-in-out;
}
.view-tenth .mask { 
    background-color: rgba(255, 231, 179, 0.3); 
    transition: all 0.5s linear;
    opacity: 0;
}	
.view-tenth h2{
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: scale(0);
    color: #333;
    transition: all 0.5s linear;
    opacity: 0;
}
.view-tenth p {
    color: #333;
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}
.view-tenth a.info { 
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}


On hover, we’ll simply scale the image up and fade it out by decreasing its opacity to 0:
.view-tenth:hover img { 
	transform: scale(10);
    opacity: 0;
}
.view-tenth:hover .mask { 
	opacity: 1;
}																			 
.view-tenth:hover h2,
.view-tenth:hover p,
.view-tenth:hover a.info{ 
    transform: scale(1);
    opacity: 1;
}




















html, body {background-color:#26292e;}
.tituloindividual {font-family: 'Questrial', sans-serif;}
#titulos {padding-top:5%; padding-bottom:5%; text-align:center;}
.subtitulo { margin-top:-3%; font-size:1em; font-weight:300;}



#center {  margin:0 auto; background-color:#03F; width:1200px;}
#profilepicture{ }
#fotos {text-align:center; padding-top:1%; padding-bottom:2%; background-image:url(img/bg.jpg); background-size:cover;}
	
	
.square {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain; /* you change this to "contain" if you don't want the images to be cropped */
	
	-webkit-box-shadow: 10px 10px 18px -10px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 18px -10px rgba(0,0,0,0.75);
box-shadow: 10px 10px 18px -10px rgba(0,0,0,0.75);

-o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
}

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}

.img_1-1{background-image:url(../_include/img/boxes/bio.jpg);}
.img_1-2{background-image:url(../_include/img/boxes/galeria.jpg);}
.img_1-3{background-image:url(../_include/img/boxes/videos.jpg);}
/* HOVER*/
.img_1-1:hover{background-image:url(../_include/img/boxes/bio_.jpg);}
.img_1-2:hover{background-image:url(../_include/img/boxes/galeria_.jpg);}
.img_1-3:hover{background-image:url(../_include/img/boxes/videos_.jpg);}

.img_2-1{background-image:url(../_include/img/boxes/medios.jpg);}
.img_2-2{background-image:url(../_include/img/boxes/marcas.jpg);}
.img_2-3{background-image:url(../_include/img/boxes/eventos.jpg);}
/* HOVER*/
.img_2-1:hover{background-image:url(../_include/img/boxes/medios_.jpg);}
.img_2-2:hover{background-image:url(../_include/img/boxes/marcas_.jpg);}
.img_2-3:hover{background-image:url(../_include/img/boxes/eventos_.jpg);}

.img_3-1{background-image:url(../_include/img/social/facebook_.jpg);}
.img_3-2{background-image:url(../_include/img/social/twitter_.jpg);}
.img_3-3{background-image:url(../_include/img/social/instagram_.jpg);}

/* HOVER*/
.img_3-1:hover{background-image:url(../_include/img/social/facebook.jpg);}
.img_3-2:hover{background-image:url(../_include/img/social/twitter.jpg);}
.img_3-3:hover{background-image:url(../_include/img/social/instagram.jpg);}


#redes {text-align:center;}
#redes h1 {font-size:1.5em; line-height:50px;}

#quotewrap {padding-top:5%; padding-bottom:5%;}
.quote { text-align:right; font-size:1.5em; font-family:'Titillium Web'}
.author { text-align:right; font-size:1.2em;}