/* ====================================================
 * LAYOUT
 * ==================================================*/
.inner                                              { max-width: 1360px; margin:0 auto;}
.inner2016                                          { margin:0 auto; max-width: 1360px;}


/* ====================================================
 * HEADER
 * ==================================================*/
#header_2016                                        { width: 100%; float: left; }

#pb_2016_header                                     { width: 100%; padding: 0 1em; text-align: :center;}
#pb_2016_header .panel_1                            { width: 100%; text-transform: uppercase; font-size: 1.4em; font-weight: 500; color: #a3a2a2; display: inline-block; text-align: center;}
#panelnum_47.panel_1 a                              { -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; display: inline-block; }
#panelnum_47.panel_1 a:hover                        { -webkit-transform: scale(1.2); transform: scale(1.2);}


/* ====================================================
 * NAVIGATION
 * ==================================================*/
.menu_inner                                         { width:100%; text-align: center; float: left;}
#navigation_2016                                    { width: 98%;  margin: 0 1%; float: left; border-top: 1px solid #a0a0a0; font-family: "proxima-nova", inherit; position: relative; z-index: 999; font-size: 1.4em; }
#navigation_2016 .sf-menu                           { display: inline-block; list-style: none; margin-top: 10px;}
#navigation_2016 .sf-menu > li                      { float: left; position: relative;  }
#navigation_2016 .sf-menu > li:hover > a,
#navigation_2016 .sf-menu > li > a:hover            { background: #F0F0F0; border-radius: 3px; color: #3B3B3B; }
#navigation_2016 .sf-menu > li > a                  { text-transform: uppercase; color: #414143; font-weight: 500; display: block; padding: 10px; }
#navigation_2016 .sf-menu > li.menu_on > a          { color: #e30613; }
#navigation_2016 .sf-menu > li ul                   { background: url("../g/2016/template/bg_menu.png") no-repeat scroll 20px 10px transparent; list-style: none; display: none; position: absolute; left: 0; top: 44px; padding-top: 20px; }
#navigation_2016 .sf-menu > li:hover ul             { display: block; }
#navigation_2016 .sf-menu > li ul li                { width: 170px; }
#navigation_2016 .sf-menu > li ul li:first-child    { padding-top: 5px; background: #f0f0f0; border-radius: 3px 3px 0 0; }
#navigation_2016 .sf-menu > li ul li a              { padding: 5px 10px; background: #f0f0f0; display: block; color: #3B3B3B; font-size: 0.8em; }
#navigation_2016 .sf-menu > li ul li:first-child a  { border-radius: 3px 3px 0 0; }
#navigation_2016 .sf-menu > li ul li:last-child a   { border-radius: 0 0 3px 3px; }
#navigation_2016 .sf-menu > li ul li a:hover        { color: #e30613; }



/* ====================================================
 * MAIN
 * ==================================================*/
#main                                               { position: relative;; float: left; width: 100%;}
#main a                                             { -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}
.sheetbody                                          { max-width: 325px; height: 360px; overflow: hidden; margin: 10px; padding: 60px 30px; text-align: center; color: #fff; font-size: 1.2em;}
.sheetbody p                                        { background: url("../g/2016/template/ex.png") center top no-repeat; padding:top 80px; text-transform: uppercase; }
.sheetbody a                                        { color: #fff; font-style: italic; padding: 20px 30px; border: 2px solid #fff;}


/* SHEET:COPY ABOVE IMAGE */
.sheet--content-above-image                         { float: left; height: 360px; }
.sheet--content-above-image .sheet_image            { box-sizing: border-box; position: relative; height: 100%; background-repeat: no-repeat; background-size: cover; color: #fff; text-align: center; padding-top: 30px; }
.sheet--content-above-image .sheet_image img        { opacity: 0;}
.sheet--content-above-image .sheet_image .sheet_copy{ position: absolute; left: 0; top: 0; z-index: 9; display: inline-block; padding: 1em; background: rgba($color-white, 0.8); width: 100%; margin-top: 40px;}
.sheet--content-above-image .sheet_image .sheet_body{ background: url("../g/2016/template/ex.png") center top no-repeat; padding-top: 80px; text-transform: uppercase; line-height: 1.5em;  font-family: "source-sans-pro"; font-size: 1.5em; letter-spacing: 2px; width: 100%;}
.sheet--content-above-image .sheet_image .sheet_body a { color: #fff; padding:5px 30px; border:2px solid #fff; font-family: "merriweather"; text-transform: none; display: inline-block; letter-spacing: 1px;}
.sheet--content-above-image .sheet_image .sheet_body a:hover { background: rgba(255, 255, 255, 0.25);}

/* PLAIN IMAGE BORDERLESS SHEETS */
.sheetbody_4                                        { float: left; height: 360px; overflow:hidden;  float: left;}
.bodysheet4 img                                     { /*width: 100%!important;*/ height: auto; min-height: 360px; }


/* FLIP Sheets */
div.flip_2-image                                    {
    box-sizing: border-box;
    float: left;
    margin-bottom: 20px;
    margin-right: 1.5%;
    position: relative;
    padding: 2em;
    width: 90%;
    text-align: center;

    -webkit-perspective: 277px;
    -moz-perspective: 277px;
            perspective: 277px;
  }


.flip_2-image.flip .front {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
            backface-visibility: hidden;
    width: 100%;
    vertical-align: center;
    z-index: 900;
    border: none;
    background: #fff;
    -webkit-transform: rotateY(179deg);
    -moz-transform: rotateY(179deg);
            transform: rotateY(179deg);

    /* -- transition is the magic sauce for animation -- */
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
  }

  .flip_2-image .front { position: absolute; top: 0; left: 0; width: 100%; height:100%; box-sizing: border-box; border: 1px solid #b9b7b7;
 }
  .flip_2-image .back {
    float: none;
    position: absolute;
    vertical-align: center;
    padding: 40px 20px 0 20px;
    top: 0;
    left: 0;
    z-index: 800;
    width: 100%;
    height: 100%;
    background: #fff;
    border: 1px solid #b9b7b7;
    box-sizing: border-box;

    -webkit-transform: rotateY(-179deg);
    -moz-transform: rotateY(-179deg);
            transform: rotateY(-179deg);

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
            backface-visibility: hidden;

    /* -- transition is the magic sauce for animation -- */
    -webkit-transition: all .4s ease-in-out;
    -moz-transform: all .4s ease-in-out;
            transition: all .4s ease-in-out;
  }

  .flip_2-image.flip .back {
    z-index: 1000;
    -webkit-transform: rotateX(0) rotateY(0);
        -moz-transform: rotateX(0) rotateY(0);
            transform: rotateX(0) rotateY(0);

  }
  .back p                                           { float:none;}
  .back strong                                      { font-size:1.4em; }
  .back a                                           { display: inline-block; color:#fff; font-weight: 500; background: url("../g/2016/template/ic_arrow.png") no-repeat right center #ec1d23; padding:10px 60px 10px 20px; margin-top: 15px;}
  .back a:hover                                     { background-color: #c41116; color:#fff;}


/* ====================================================
 * FOOTER
 * ==================================================*/

#pb_2016_footer                                     { margin:0 1% 1% 1%; background: url("../g/2016/template/footer_bg_16.jpg") center top no-repeat; text-align: center; color:#fff; overflow:hidden; font-weight: 500; font-size: 1.1em;}
.pb_2016_footer_inner                               { padding:20px 0; font-size: 1.2em; width:100%;}
#panelnum_48                                        { background: url("../g/2016/template/ex.png") center top no-repeat; padding-top: 80px; width:100%; display:inline-block;}
#panelnum_48 p                                       { float:none;}
#pb_2016_footer strong a                            { text-transform: uppercase;  background: #414143; padding:10px 20px; color: #fff!important; font-size: 1.2em; font-weight: 700;}
#pb_2016_footer a                                   { -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; display: inline-block;}
#pb_2016_footer a:hover                             { -webkit-transform: scale(1.2); transform: scale(1.2);}
#pb_2016_footer img                                 { width:80%; height:auto;}

#footer                                             { float: left; background:none!important; width: 100%;  margin:1%;}

#footer-copyright                                   { float: left; color: #414143!important; margin-top: 7px; font-weight: 500;}
#footer-copyright a                                 { color: #414143!important;}
#footer-copyright a:hover                           { color: #000!important; }

#footer-links                                       { float: right; margin-top: 7px;}
#footer-links ul                                    { float: right; list-style: none; }
#footer-links ul li                                 { float: left; margin-left: 15px; }
#footer-links ul li a                               { color: #414143!important; font-weight: 500;}
#footer-links ul li a:hover                         { color: #e30613!important; }



/* =====================================================================================================================
//  RESPONSIVE : MOBILE & TABLET
// ===================================================================================================================== */


@media screen and (min-width: 961px)                {
    #header_2016                                    { padding: 45px 0 20px 0;}
    #header_2016 .panel_1                           { width: 33%; float: left;}
    #panelnum_45                                    { margin-top: 49px;}
    #panelnum_47                                    { margin-top: 29px;}

    div.flip_2-image                                { width: 23%; height: 360px;  padding:0; margin:1%;}
    .flip_2-image .front img                        { height: auto; width: 80%;}
    .flip_2-image .back                             { font-size: 0.9em; }
    .flip_2-image .back img                         { max-width: 100%; height: auto;}
    .sheet--content-above-image                     { width: 23%; height: 360px; font-size: 0.85em; padding:0; margin:1%;}
    .sheet--content-above-image .sheet_image img    { max-height: 235px; width: 22.25%;}
    .sheet--content-above-image .sheet_image .sheet_copy{ width: 95%;}
    .pb_2016_footer_inner                           { background: url("../g/2016/template/footer_bot.png") bottom right no-repeat; }

    .sheetbody_4                                    { width: 23%; margin:1%;}
}

@media screen and (max-width: 960px)                {
    #navigation_2016                                { display: none; }


    /* Sheets */
    .rightsheet, .leftsheet, .fullsheet             { width: 100%;}

    div.flip_2-image                                { width: 31.3333%; height: 320px; margin:1%;}
    .flip_2-image .front img                        { height: auto; }
    .sheet--content-above-image                     { width: 31.3333%; height: 320px; margin:1%; }
    .sheet--content-above-image .sheet_image img    { max-height: 300px; }
    .sheetbody_4                                    { width: 31.3333%; height: 320px;  margin:1%;}
    .sheetbody_4 img                                { width: 100% !important; }
}


@media screen and (max-width: 768px)                {
    div.flip_2-image                                { width: 48%; height: 320px; margin:1%;}
    .flip_2-image .front img                        { height: auto; }
    .flip_2-image .back                             { font-size: 0.9em; }
    .sheet--content-above-image                     { width: 48%; height: 320px; font-size: 0.85em; margin:1%;}
    .sheet--content-above-image .sheet_image img    { max-height: 235px; }
    .sheetbody_4                                    { width: 48%; height: 320px; margin:1%;}

}




@media screen and (max-width: 480px)                {
    div.flip_2-image                                { width: 98%; height: 360px; margin:1%;}
    .flip_2-image .front img                        { height: auto; width: 70%;}
    .sheet--content-above-image                     { width: 98%; height: 360px; margin:1%;}
    .sheet--content-above-image .sheet_image img    { max-height: 235px; }
    .sheetbody_4                                    { width: 98%; margin:1%;}
}