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

/* Mainwrapper */
#mainwrapper { font-family: 'Didact Gothic'; height: auto; margin: 0; text-align: center;}

/* Button */
#mainwrapper-button{ padding: 5px 20px 5px 20px; border: 1px solid #fff; text-decoration:none; color:#fff; font-size:16px; -webkit-transition: background-color 0.3s ease-in-out; -moz-transition: background-color 0.3s ease-in-out; -o-transition: background-color 0.3s ease-in-out; transition: background-color 0.3s ease-in-out;}
#mainwrapper-button:hover { padding: 5px 20px 5px 20px; border: 1px solid #fff; text-decoration:none; color:#fff; font-size:16px; background-color:hsla(0,0%,0%,0.75); -webkit-transition: background-color 0.3s ease-in-out; -moz-transition: background-color 0.3s ease-in-out; -o-transition: background-color 0.3s ease-in-out; transition: background-color 0.3s ease-in-out;}

/* Image Box Style */
#mainwrapper .box { border: 5px solid #fff; height: 230px; float: left; margin: 5px; position: relative; overflow: hidden; width: 340px; -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 2: Full Width & Height **/
#mainwrapper .box .full-caption { width: 340px; height: 230px; top: -200px; text-align: left; padding: 25px;}

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

/** Caption 6: Scale **/
#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p { position: relative; left: -200px; width: 300px; -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; font-weight:300;}
#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p { -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -o-transition-delay: 300ms; -ms-transition-delay: 300ms; transition-delay: 300ms;}

/** 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;}

/** 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 screen and (max-width: 640px) {
	
/* Button */
#mainwrapper-button{ padding: 5px 20px 5px 20px; border: 1px solid #fff; text-decoration:none; color:#fff; font-size:28px; -webkit-transition: background-color 0.3s ease-in-out; -moz-transition: background-color 0.3s ease-in-out; -o-transition: background-color 0.3s ease-in-out; transition: background-color 0.3s ease-in-out;}
#mainwrapper-button:hover { padding: 5px 20px 5px 20px; border: 1px solid #fff; text-decoration:none; color:#fff; font-size:28px; background-color:hsla(0,0%,0%,0.75); -webkit-transition: background-color 0.3s ease-in-out; -moz-transition: background-color 0.3s ease-in-out; -o-transition: background-color 0.3s ease-in-out; transition: background-color 0.3s ease-in-out;}

/* Image Box Style */
#mainwrapper .box { border: 5px solid #fff; height: 173px; float: left; margin: 5px; position: relative; overflow: hidden; width: 255px; -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 2: Full Width & Height **/
#mainwrapper .box .full-caption { width: 255px; height: 173px; top: -200px; text-align: left; padding: 25px;}

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

/** Caption 6: Scale **/
#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p { font-size:0px;}

}