/* 
    Document   : product_hover
    Created on : Sep 6, 2013, 2:38:28 PM
    Author     : Ambities-1
    Description:
        Purpose of the stylesheet follows.
*/

/*html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
}*/
/* HTML5 display-role reset for older browsers */
article,figcaption, figure, 
section {
    display: block;
}
/*body {
        line-height: 1;
}
ol, ul {
        list-style: none;
}*/
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* base.css, part of YUI's CSS Foundation */
/*h1 {
        18px via YUI Fonts CSS foundation
        font-size:138.5%;  
}*/
/*h2 {
        16px via YUI Fonts CSS foundation
        font-size:123.1%; 
}*/
h3 {
    /*14px via YUI Fonts CSS foundation*/
    font-size:108%;  
}
/*h1,h2,h3 {
         top & bottom margin based on font size 
        margin:1em 0;
}*/
/*h1,h2,h3,h4,h5,h6,strong {
        bringing boldness back to headers and the strong element
        font-weight:bold; 
}*/
/*abbr,acronym {
        indicating to users that more info is available 
        border-bottom:1px dotted #000;
        cursor:help;
} */
/*em {
        bringing italics back to the em element
        font-style:italic;
}*/
/*blockquote,ul,ol,dl {
        giving blockquotes and lists room to breath
        margin:1em;
}*/
/*ol,ul,dl {
        bringing lists on to the page with breathing room 
        margin-left:2em;
}
ol li {
        giving OL's LIs generated numbers
        list-style: decimal outside;	
}
ul li {
        giving UL's LIs generated disc markers
        list-style: disc outside;
}
dl dd {
        giving UL's LIs generated numbers
        margin-left:1em;
}
th,td {
        borders and padding to make the table readable
        border:1px solid #000;
        padding:.5em;
}
th {
        distinguishing table headers from data cells
        font-weight:bold;
        text-align:center;
}*/
caption {
    /*coordinated marking to match cell's padding*/
    margin-bottom:.5em;
    /*centered so it doesn't blend in to other content*/
    text-align:center;
}
/*p,fieldset,table {
    so things don't run into each other
    margin-bottom:1em;
}*/

/* Style */
#box-6{  
    /*    margin: 1% 2%;*/
}

#mainwrapper {
    font: 10pt normal Arial, sans-serif;
    margin-bottom: 5%;
    clear: both;
}

#mainwrapper .box img {
    position: absolute;
    left: 0;
    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 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: 30px;
    width: 200px;
    display: block;
    bottom: -30px;
    line-height: 25pt;
    text-align: center;
}

/** Caption 2: Full Width & Height **/
#mainwrapper .box .full-caption {
    width: 170px;
    height: 170px;	
    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: 4%;
}

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

/** Caption 5: Rotate **/
#mainwrapper #box-5.box .rotate-caption {
    width: 170px;
    height: 170px;	
    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: 200px;
    height: 400px;
    -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);
}

.main_screen{
    clear: both;
    margin-top: 4%;
}


/* Image Box Style */
@media (max-width: 320px) {
    #mainwrapper .box {
        border: 1px solid #fff;
        cursor: pointer;
        height: 130px;
        float: left;
        border-radius: 6px; 
        /*	margin: 5px;*/
        position: relative;
        overflow: hidden;
        margin-top: 15%;
        width: 90%;
        -webkit-box-shadow: 1px 1px 1px 1px #ccc;
        -moz-box-shadow: 1px 1px 1px 1px #ccc;
        box-shadow: 1px 1px 1px 1px #ccc;
    }
    .main_screen{
        clear: both;
        margin-top: 4%;
    }
}

@media (max-width: 480px) {
    #mainwrapper .box {
        border: 1px solid #fff;
        cursor: pointer;
        height: 130px;
        float: left;
        border-radius: 6px; 
        /*	margin: 5px;*/
        position: relative;
        overflow: hidden;
        /*        margin-top: 15%;*/
        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;
    }
    .main_screen{
        clear: both;
        margin-top: 4%;
    }
}

@media only screen 
and (max-width : 768px)  {
    #mainwrapper .box {
        border: 1px solid #fff;
        cursor: pointer;
        height: 250px;
        float: left;
        border-radius: 6px; 
        /*	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;
    }

    .main_screen{
        clear: both;
        margin-top: 3%;
    }
}

/* iPads (portrait) ----------- */
@media only screen 
and (max-device-width : 1024px) and (orientation : landscape)  {
    /* Styles */
    #mainwrapper .box {
        border: 1px solid #fff;
        cursor: pointer;
        height: 230px;
        float: left;
        border-radius: 6px; 
        /*	margin: 5px;*/
        position: relative;
        overflow: hidden;
        margin-top: 15%;
        width: 90%;
        -webkit-box-shadow: 1px 1px 1px 1px #ccc;
        -moz-box-shadow: 1px 1px 1px 1px #ccc;
        box-shadow: 1px 1px 1px 1px #ccc;
    }

    .main_screen{
        clear: both;
        margin-top: 4%;
    }
}

@media (min-width: 350px) and (max-width : 1024px)  {
    #mainwrapper .box {
        border: 1px solid #fff;
        cursor: pointer;
        height: 250px;
        float: left;
        border-radius: 6px; 
        /*	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;
    }

    .main_screen{
        clear: both;
        margin-top: 3%;
    }
}

@media only screen 
and (min-width : 1224px)   {
    #mainwrapper .box {
        border: 1px solid #fff;
        cursor: pointer;
        height: 130px;
        float: left;
        border-radius: 6px; 
        /*	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;
    }
    .main_screen{
        clear: both;
        margin-top: 3%;
    }
}

@media only screen 
and (min-width : 1824px) {
    /* Styles */
    .main_screen{
        clear: both;
        margin-top: 4%;
    }
}