.logorcm{
   width: 152px;
   height: 80px; 
   /*opacity: 0.75;
   filter: alpha(opacity=40);*/ /* For IE8 and earlier */
}
.logorcm:hover{
  /*opacity:1;*/
/*-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.3),0 0 40px rgba(0,0,0,.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0,0,0,.3),0 0 40px rgba(0,0,0,.1) inset;
box-shadow: 0 1px 4px rgba(0,0,0,.3),0 0 40px rgba(0,0,0,.1) inset;*/
}
.view {
   width: 250px;
   height: 225px;
   margin: 10px;
   float: left;
   border: 10px solid #eaeaea;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   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: 100%;
   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: 100%;
   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;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}

.view-first img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(245,88,88, 0.7);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.view-first h2 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first p {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.view-first a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-first:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view-first:hover a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}

#dvquehacemos{
   width:45%;
   height:80%;
   margin-left: 10%;
   margin-top: 10%;
   margin-right: 6%;
}

#imgquehacemos{
   width:80%;
   height:80%;
   margin-left: 10%;
   margin-top: 10%;
   margin-right: 6%;
}

#mainwrapper {
}

/* Image Box Style */
#mainwrapper .box {
   border: 5px solid #fff;
   cursor: pointer;
   height: 292px;
   float: left;
   margin: 5px;
   position: relative;
   overflow: hidden;
   width: 100%;
      -webkit-box-shadow: 1px 1px 1px 1px #ccc;
      -moz-box-shadow: 1px 1px 1px 1px #ccc;
      box-shadow: 1px 1px 1px 1px #ccc;
}
#mainwrapper .box img {
   position: absolute;
   left: 0;
      -webkit-transition: all 300ms ease-out;
      -moz-transition: all 300ms ease-out;
      -o-transition: all 300ms ease-out;
      -ms-transition: all 300ms ease-out; 
   transition: all 300ms ease-out;
}

/* Caption Common Style */
#mainwrapper .box .caption {
   background-color: rgba(0,0,0,0.8);
   position: absolute;
   color: #fff;
   z-index: 100;
      -webkit-transition: all 300ms ease-out;
      -moz-transition: all 300ms ease-out;
      -o-transition: all 300ms ease-out;
      -ms-transition: all 300ms ease-out; 
      transition: all 300ms ease-out;
   left: 0;
}


/** Caption 1: Simple **/
#mainwrapper .box .simple-caption {
   height: 100%;
   width: 100%;
   display: block;
   bottom: -30px;
   line-height: 25pt;
   text-align: center;
}

/** Caption 2: Full Width & Height **/
#mainwrapper .box .full-caption {
   width: 100%;
   height: 100%; 
   top: -200px;
   text-align: left;
   padding: 15px;
}

/** Caption 3: Fade **/
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption  {
   opacity: 0;
   width: 100%;
   height: 100%;
   text-align: left;
   padding: 15px;
}

/** Caption 4: Slide **/
#mainwrapper .box .slide-caption {
   width: 100%;
   height: 100%; 
   text-align: left;
   padding: 15px;
   left: 200px;
}

/** Caption 5: Rotate **/
#mainwrapper #box-5.box .rotate-caption {
   width: 100%;
   height: 100%; 
   text-align: left;
   padding: 15px;
   top: 200px;
   -moz-transform: rotate(-180deg);
   -o-transform: rotate(-180deg);
   -webkit-transform: rotate(-180deg);
   transform: rotate(-180deg);
}

#mainwrapper .box .rotate {
   width: 100%;
   height: 100%;
   -webkit-transition: all 300ms ease-out;
   -moz-transition: all 300ms ease-out;
   -o-transition: all 300ms ease-out;
   -ms-transition: all 300ms ease-out; 
   transition: all 300ms ease-out;
}

/** Caption 6: Scale **/
#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p {
   position: relative;
   left: -200px;
   width: 100%;
   -webkit-transition: all 300ms ease-out;
   -moz-transition: all 300ms ease-out;
   -o-transition: all 300ms ease-out;
   -ms-transition: all 300ms ease-out; 
   transition: all 300ms ease-out;
}

#mainwrapper .box .scale-caption h3 {
   -webkit-transition-delay: 300ms;
   -moz-transition-delay: 300ms;
   -o-transition-delay: 300ms;
   -ms-transition-delay: 300ms;  
   transition-delay: 300ms;
}

#mainwrapper .box .scale-caption p {
   -webkit-transition-delay: 500ms;
   -moz-transition-delay: 500ms;
   -o-transition-delay: 500ms;
   -ms-transition-delay: 500ms;  
   transition-delay: 500ms;
}

/** Simple Caption :hover Behaviour **/
#mainwrapper .box:hover .simple-caption {
   -moz-transform: translateY(-100%);
   -o-transform: translateY(-100%);
   -webkit-transform: translateY(-100%);
   opacity: 1;
   transform: translateY(-100%);
}

/** Full Caption :hover Behaviour **/
#mainwrapper .box:hover .full-caption {
   -moz-transform: translateY(100%);
   -o-transform: translateY(100%);
   -webkit-transform: translateY(100%);
   opacity: 1;
   transform: translateY(100%);
}

/** Fade Caption :hover Behaviour **/
#mainwrapper .box:hover .fade-caption, #mainwrapper .box:hover .scale-caption  {
   opacity: 1;
}

/** Slide Caption :hover Behaviour **/
#mainwrapper .box:hover .slide-caption {
   background-color: rgba(0,0,0,1) !important;
   -moz-transform: translateX(-100%);
   -o-transform: translateX(-100%);
   -webkit-transform: translateX(-100%);
   opacity: 1;
   transform: translateX(-100%);
}
#mainwrapper .box:hover img#image-4 {
   -moz-transform: translateX(-100%);
   -o-transform: translateX(-100%);
   -webkit-transform: translateX(-100%);
   transform: translateX(-100%);
   opacity: 1;
}

/** Rotate Caption :hover Behaviour **/
#mainwrapper .box:hover .rotate {
   background-color: rgba(0,0,0,1) !important;
   -moz-transform: rotate(-180deg);
   -o-transform: rotate(-180deg);
   -webkit-transform: rotate(-180deg);
   transform: rotate(-180deg);
}

/** Scale Caption :hover Behaviour **/
#mainwrapper .box:hover #image-6 {
   -moz-transform: scale(1.4);
   -o-transform: scale(1.4);
   -webkit-transform: scale(1.4);
   transform: scale(1.4);
}

#mainwrapper .box:hover .scale-caption h3, #mainwrapper .box:hover .scale-caption p {
   -moz-transform: translateX(200px);
   -o-transform: translateX(200px);
   -webkit-transform: translateX(200px);
   transform: translateX(200px);
}

@media (max-width: 1200px) {
   .view .mask,.view .content {
      width: 100%;
      height: 100%;
      position: absolute;
      overflow: hidden;
      top: 0;
      left: 0px;
   }

   .view h2 {
      text-transform: uppercase;
      color: #fff;
      text-align: center;
      position: relative;
      font-size: 90%;
      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: 90%;
      position: relative;
      color: #fff;
      padding: 10px 20px 20px;
      text-align: center;
   }

}

.dropshadowclass { border: solid 1px #CCC; -moz-box-shadow: 5px 5px 0px #999; -webkit-box-shadow: 5px 5px 0px #999; box-shadow: 5px 5px 0px #999; }

.imagedropshadowrojo { 
   padding: 5px; border: solid 1px #cd3c44;
} 

a:hover img.imagedropshadowrojo { 
   border: solid 1px #CCC; -moz-box-shadow: 1px 1px 5px #999; -webkit-box-shadow: 1px 1px 5px #999; box-shadow: 1px 1px 5px #999; 
}

.imagedropshadowazul { 
   padding: 5px; border: solid 1px #24407b;
} 

a:hover img.imagedropshadowazul { 
   border: solid 1px #CCC; -moz-box-shadow: 1px 1px 5px #999; -webkit-box-shadow: 1px 1px 5px #999; box-shadow: 1px 1px 5px #999; 
}