/*

    Droga5 Banner CSS
    Adrian Velazquez
    --------------------
    avelazquez@droga5.com

*/

/**********  Utilities  ***********/

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
    background-color: #fff;
    padding:0; margin:0;
}


/* set the dimensions of your banner here */
.dimensions {
    width: 300px;
    height: 600px;
    position: absolute;
    top: 0;
    left: 0;
}

/*  apply this class to retina sized graphics
    be sure to change the dimensions to double the width and height of your banner's actrual dimensions */
.retina {
    background-size: calc(600px/2) calc(1200px/2);
    width:calc(600px/2);
    height:calc(1200px/2);
}

/* centers elements horizontally */
.center-horiz {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

/* centers elements vertically */
.center-vert {
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
}

/* centers elements vertically */
.center {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

/*  apply this to initialize elements as hidden until they are needed.
    use 'autoAlpha:1' in GSAP to show hidden elements */
.hidden {
    visibility: hidden;
}
/*
.comp {
    background-repeat: no-repeat;
    background-image: url('../images/ref1.jpg');
    opacity: 0.4;
    background-size: cover;
}
*/

div {
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    overflow: hidden;
}

/* main container element for banner */
#banner {
    position: absolute;
    overflow: hidden;
    cursor: pointer;
    background-color: white;
    transform: translate3d(0px, 0px, 0px);
    /*margin: auto;*/
    top: 0;
    /*bottom: 0;*/
    left: 0;
    /*right: 0;*/
}

#banner .border {
    border: 1px solid rgb(197, 197, 197);
    z-index: 100;
    border: 1px solid rgba(0, 0, 0, 0.7);
    width: 300px;
    height: 600px;
    pointer-events: none;
}

/* sets up main stage clickable area */
#hit {
    background-color: rgba(0, 0, 0, 0);
    cursor: pointer;
}

/**********  Banner Elements/Layout  ***********/

#white-background {
    background-color: rgb(240, 240, 240);
}
#blue-background {
    background-color: #0179c1;
}

/* placeholder - replace this with the styling for your headlines. duplicate as needed */
.copy,
.image {
    background-repeat: no-repeat;
    background-size: cover;
}

/* controls */
#controls {
    width: 12px;
    height:12px;
    left: 285px;
    top: 8px;
}
#btn_pause, #btn_play {
    background-image: url('../images/playPause.svg');
    height: 10px;
    width: 10px;
    background-size: 40px 20px;
}

#btn_pause {
    background-position: -5px -5px;
}
#btn_play {
    background-position: -25px -5px;
}

#btn_replay {
    background-image: url('../images/replay.svg');
    width: 9px;
    height: 11px;
}

/**
 * Table elements
 */

.bg {
    background-image: url("../images/counter.jpg");
}
.plate {
    background-image: url("../images/plate.png");
    width: 439px;
    height: 477px;
}
.glass-top {
    background-image: url("../images/glass-upper-right.png");
}
.glass-bottom {
    background-image: url("../images/glass-lower-right.png");
}
/*
.silverware {
    background-image: url("../images/silverware.png");
}
*/

/*
 ** Footer
*/

.footer {
    width: 100%;
    height: 77px;
    top: 522px;
    background-color: rgb(240, 240, 240);
}

.logo-syc {
    background-image: url("../images/logo-syc.svg");
    width: 134px;
    height: 17px;
}

.logo-sapphire {
    background-image: url("../images/logo-sapphire-reserve.svg");
    width: 241px;
    height: 11px;
    left: 30px;
    top: 554px;
}
.card {
    background-image: url("../images/card.png");
    width: 203px;
    height: 131px;
    left: 48px;
    top: 231px;
}
.card-footer .card {
    width: 150px;
    height: 96px;
    left: 150px;
    top: 497px;
}
.card-facets-lower {
    background-image: url("../images/facets-lower.png");
}
.card-facets {
    background-image: url("../images/facets.png");
}
.facets-main {
    background-image: url("../images/facets-main.png");
}

/**
 * Headlines
 */

.headline1 {
    background-image: url("../images/text-1.png");
}
.headline2 {
    background-image: url("../images/text-2.png");
}
.headline3 {
    background-image: url("../images/text-3.png");
}

/**********  CTA  ***********/

/* placeholder - update these elements as needed */
#cta {
    background-image: url("../images/cta.svg");
    background-size: contain;
    width: 157px;
    height: 42px;
    left: 72px;
    top: 441px;
}