/*#popup_test_bar .plus_button, #popup_test_bar .open_popup { text-indent:0; background: none; display:inline; color:#fff; }
#popup_test_bar a { margin-right:5px; text-transform:uppercase; }*/

/* General styles */
@font-face {
    font-family: 'jackie_sue_bfregular';
    src: url('../fonts/bompartes_fonts_-_jackiesuebf-webfont.woff2') format('woff2'),
         url('../fonts/bompartes_fonts_-_jackiesuebf-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
html { 
    box-sizing:border-box;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
svg { box-sizing:border-box; }
*, *:before, *:after { box-sizing:inherit; }
body { font-family: Helvetica, Arial, sans-serif; background-color:#fff; background-image:url(../img/coca-cola-tile-bg.png); background-position:center; font-size:13px; -webkit-tap-highlight-color: rgba(0,0,0,0); }
body, html { height:100%; }
html.hide_scroll { -ms-overflow-style:none; }
html.hide_scroll::-webkit-scrollbar { display:none !important; width:0 !important; }
h1, h2, h3, h4 { }
h1 { font-weight:bold; font-size:40px; margin:0; padding:20px 0; }
h2 { font-size:20px; }
a, a:visited { text-decoration:none; color:#333; }
a:hover { text-decoration:none; }
.content a, a:visited { text-decoration:underline; color:#333; }
.content a:hover { text-decoration:none; }

.hide { position:absolute !important; top:-9999px !important; left:-9999px !important; }
.invisible { visibility:hidden; }
.show_for_print { display:none; }

#content_wrapper { position:relative; }
.section { display:none; padding:4rem 90px 0 90px; }
.section p { font-size:1rem; line-height:1.4; color:#231f20; margin:0; padding:0 0 1rem 0; }
.section ul:not(.scene_switcher):not(.dot_slider_widget) { margin-left:0; padding-left:30px; }
.section ul li { font-size:1rem; line-height:1.4; color:#231f20; margin:0; padding:0 0 1rem 0; }
.section_inner { margin:auto; max-width:750px; position:relative; }
.clearfloat { clear:both; }
.box_bg { position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; z-index:-1; }
.title { position:absolute; top:-70px; left:-50px; max-width:385px; }
.padder { height:30px; width:100%; padding:0; margin:0; }
.nobreak { white-space:nowrap; }

/*#section_0 .button:hover { background-size:200%; }*/
/* Pop */
@-webkit-keyframes pop { 50% { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } }
@keyframes pop { 50% { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } }
.pop:not(.disabled) {
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
}
.pop:not(.disabled):hover, .pop:not(.disabled):focus, .pop:not(.disabled):active {
    -webkit-animation-name: pop;
    animation-name: pop;
    -webkit-animation-duration: 0.3s;
    -ms-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -ms-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

/* Bounce In */
.bounce-in {
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.bounce-in:hover, .bounce-in:focus, .bounce-in:active {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    -ms-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

.bounce-in-small {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.bounce-in-small:hover, .bounce-in-small:focus, .bounce-in-small:active {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -moz-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    -ms-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}


/* Grow Rotate */
.grow-rotate {
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    -ms-transition-property: transform;
    transition-property: transform;
}
.grow-rotate:hover, .grow-rotate:focus, .grow-rotate:active {
    -webkit-transform: scale(1.1) rotate(4deg);
    -ms-transform: scale(1.1) rotate(4deg);
    transform: scale(1.1) rotate(4deg);
}



@-webkit-keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    50% {
        -webkit-transform: scale3d(1.15, 1.15, 1.15);
        transform: scale3d(1.15, 1.15, 1.15);
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    25% {
        -webkit-transform: scale3d(1.25, 1.25, 1.25);
        transform: scale3d(1.25, 1.25, 1.25);
    }
    50% {
        -webkit-transform: scale3d(1.15, 1.15, 1.15);
        transform: scale3d(1.15, 1.15, 1.15);
    }
    75% {
        -webkit-transform: scale3d(1.25, 1.25, 1.25);
        transform: scale3d(1.25, 1.25, 1.25);
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        -webkit-transform: none;
        transform: none;
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}



/* Back Pulse */
@-webkit-keyframes hvr-back-pulse { 50% { background-color: rgba(0, 0, 0, 0); } }

@keyframes hvr-back-pulse { 50% { background-color: rgba(0, 0, 0, 0); } }

.back-pulse {
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    -webkit-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-property: background-size, background-position;
    -ms-transition-property: background-size, background-position;
    transition-property: background-size, background-position;
}
.back-pulse:hover, .back-pulse:focus, .back-pulse:active {
    -webkit-animation-name: hvr-back-pulse;
    animation-name: hvr-back-pulse;
    -webkit-animation-duration: 1s;
    -ms-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 0.5s;
    -ms-animation-delay: 0.5s;
    animation-delay: 0.5s;
    -webkit-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}


.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}





@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}



/* Infinite pulse */
@keyframes infinitepulse {
    0% {
     transform: scale(1, 1);
    }

    50% {
     transform: scale(1.2, 1.2);
    }

    100% {
    transform: scale(1, 1);
    }
}

@keyframes infinitepulse_none {
}

.infinite_pulse {
    animation: infinitepulse 2.25s linear infinite;
}
/*.infinite_pulse:hover {
    animation:infinitepulse_none;
}*/



/* 
 *
 * TOOLTIPS
 *
 */
.tooltip { position:absolute; z-index:99999; background:url('../img/tooltip_bg.svg') 0 0; background-size:100% 100%; padding:15px 25px; font-weight:normal; color:#fff; font-size:17px; text-indent:0; width:auto; white-space:nowrap; }
.tooltip:after { content:''; background:url('../img/tooltip_arrow.svg'); width:11px; height:11px; background-size:11px 11px; position:absolute; right:-10px; top:20px; }

/* 
 *
 * POPUPS
 *
 */
.modal .popup_close { width:60px; height:60px; position:absolute; top:5px; right:30px; margin-left:0; padding:0; background:url('../img/x-close.svg') 50% 50% no-repeat; background-size:50px 50px; text-indent:-5000px; }
.modal .popup_close:hover { background-size:60px 60px; }
.modal h1 { font-family:'jackie_sue_bfregular', helvetica, arial, sans-serif; font-size:26px; line-height:1.2; color:#231f20; font-weight:normal; padding:0 0 5px 0; position:absolute; top:50px; left:60px; }
.modal h2 { font-size:17px; line-height:1.1; color:#de0b1c; font-family:"arial black", arial, sans-serif; padding:0; margin:5px 0 16px 0; }
.modal p { }
.modal .icon { width:60px; height:60px; position:absolute; top:0; left:10px; }
.overflow_hidden { overflow-y:hidden; }
.modal { background-image:url('../img/popup-bg.svg'); background-position:50% 50%; background-repeat:no-repeat; background-size:100% 100%; display:none; /*max-height:calc(100% - 60px);*/ position:fixed; top:50%; left:50%; right:auto; bottom:auto; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); z-index:990; padding:0; width:900px; max-height:700px; }
.modal.modal-is-visible { display:block; z-index:1010; }

.modal .modal-body { box-sizing:border-box; overflow:hidden; overflow-y:auto; padding:0 24px 35px 0; min-width:200px; position:absolute; top:90px; right:35px; bottom:120px; left:60px; }
.modal .modal-body-scroll-fade { 
    position:absolute; bottom:118px; left:60px; right:35px; height:30px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+96&0+0,1+96 */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk2JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 96%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 96%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 96%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.modal .modal-body.reallifestory { padding-top:15px; bottom:50px; }
.modal .modal-body-scroll-fade.reallifestory { position:absolute; bottom:68px; left:60px; right:35px; height:30px; }

.modal .panels li p { margin-top:0; margin-bottom:0.5em; line-height:1.3; }
.modal .panels li img { /*width:auto;*/ }
.modal-overlay { background-image:url(../img/coca-cola-tile-bg.png); background-position:center; display:none; position:absolute; top:0; right:0; bottom:0; left:0; z-index:980; }
.modal-overlay.modal-is-visible { display:block; z-index:1009; }
.modal.smallscreen { padding:0; max-width:640px; }
.modal.smallscreen h1 { font-size:19px; line-height:1.2; color:#231f20; font-weight:normal; padding:0 0 2px 0; left:25px; }
.modal.smallscreen h2 { font-size:14px; color:#de0b1c; }
.modal.smallscreen .icon { width:45px; height:45px; position:absolute; top:3px; left:5px; }
.modal.smallscreen .popup_close { width:50px; height:50px; top:5px; right:20px; margin-left:0; background-size:40px 40px; }
.modal.smallscreen .popup_close:hover { background-size:50px 50px; }

.modal.smallscreen .modal-body { top:90px; right:20px; bottom:80px; left:25px; }
.modal.smallscreen .modal-body-scroll-fade { right:20px; bottom:78px; left:25px; }

.modal.smallscreen .modal-body.reallifestory { bottom:80px; }
.modal.smallscreen .modal-body-scroll-fade.reallifestory { right:20px; bottom:78px; left:25px; }

.modal .picture_column { width:auto; max-width:40%; height:auto; float:right; margin:0 0 0 20px; padding:0; }
.modal .picture_frame { width:auto; height:auto; background:url('../img/picture_frame.svg') 0 0 no-repeat; background-size:100% 100%; margin-bottom:15px; overflow:hidden; display:block; padding:16px 23px 21px 16px; }
.modal.smallscreen .picture_frame { padding:8px 14px 9px 8px; }
.modal .picture_frame img { margin:0; width:100%; max-width:250px; }

.rotate_left {
    -webkit-transform:rotate(-1.5deg);
    -moz-transform:rotate(-1.5deg);
    -o-transform:rotate(-1.5deg);
    -ms-transform:rotate(-1.5deg);
    transform:rotate(-1.5deg);
}

.rotate_right {
    -webkit-transform:rotate(1.5deg);
    -moz-transform:rotate(1.5deg);
    -o-transform:rotate(1.5deg);
    -ms-transform:rotate(1.5deg);
    transform:rotate(1.5deg);
}

/* 899px */
@media only screen and (max-width: 56.188em) {
    .modal { width:100%; }
}
/* 768px */
@media only screen and (max-width: 48em) {
    .modal .popup_close { width:50px; height:50px; top:5px; right:20px; margin-left:0; background-size:40px 40px; }
    .modal .popup_close:hover { background-size:50px 50px; }
}
/* 639px */
@media only screen and (max-width: 39.938em) {
    .modal { padding:0; }
    .modal .icon { width:45px; height:45px; position:absolute; top:3px; left:5px; }
    .modal .modal-body-scroll-fade.reallifestory { right:20px; bottom:68px; left:25px; }
}
/* 460px */
@media only screen and (max-width: 28.75em) {
    .modal { padding:0; }
    .modal h1 { font-size:19px; line-height:1.2; color:#231f20; font-weight:normal; padding:0 0 2px 0; left:25px; }
    .modal.smallscreen h1 { left:25px; }
    .modal .modal-body { top:90px; right:20px; bottom:120px; left:25px; }
    .modal .modal-body-scroll-fade { right:20px; bottom:118px; left:25px; }
    
    .modal .modal-body-scroll-fade.reallifestory { right:20px; bottom:68px; left:25px; }
    
    .modal.smallscreen { padding-left:35px; padding-right:35px;  }
    .modal.smallscreen .modal-body { top:90px; right:20px; bottom:90px; left:25px; }
    .modal.smallscreen .modal-body-scroll-fade { right:20px; bottom:88px; left:25px; }
    
    .modal.smallscreen .modal-body.reallifestory { bottom:85px; }
    .modal.smallscreen .modal-body-scroll-fade.reallifestory { bottom:84px; }
    
    .modal .picture_frame { padding:8px 14px 9px 8px; }
    
    .modal#real_life_story_1 .panels li p { font-size:14px; line-height:1.4; }
    .modal.smallscreen#real_life_story_1 .panels li p { font-size:13px; line-height:1.2; }
    /*.modal.smallscreen .panels li img { max-height:190px; }*/
    /*.modal.smallscreen.tinyscreen .panels li img { max-height:140px; }*/
}
/* 375px */
@media only screen and (max-width: 23.438em) {

}


/*
 * ROTATING TEXT PANELS
 */
.panels { margin:0; padding:0; }
.panels li { margin:0; padding:0; display:none; }
.panels li.active { display:block; }
.panels li ul { list-style:circle; display:block; margin:0 0 10px 0; padding:10px 0 0 0; }
.panels li ul li { list-style:circle; display:block; padding:0 0 0.7rem 25px; font-size:17px; background:url('../img/bullet-dot.svg') 0 2px no-repeat; background-size:12px 12px; }
.panels li p { font-size:17px; }
.panels li p a { text-decoration:underline; }
.panels li p a:hover { text-decoration:none; }
.panels_controls { /*background:rgba(255,0,0,0.1);*/ margin:0; padding:0; position:absolute; bottom:75px; left:60px; right:60px; display:none; }
.modal.smallscreen .panels_controls { bottom:35px; left:20px; right:25px; display:none; }
.modal.smallscreen.tinyscreen .panels_controls { bottom:28px; }
.modal.smallscreen .panels li ul li { font-size:13px; }
.modal.smallscreen .panels li p { font-size:13px; }
.panels_controls .prev { float:right; }
.panels_controls .next { float:right; }
.panels_controls .prev { display:inline-block; width:40px; height:40px; background:url('../img/left-arrow.svg') 50% 50% no-repeat; background-size:35px 35px; text-indent:-5000px; margin-right:5px; }
.panels_controls .prev.disabled { background:url('../img/left-arrow-grey.svg') 50% 50% no-repeat; background-size:35px 35px; }
.panels_controls .prev:hover { background-size:40px 40px; }
.panels_controls .prev.disabled:hover { background-size:35px 35px; cursor:default; }
.panels_controls .next { display:inline-block; width:40px; height:40px; background:url('../img/right-arrow.svg') 50% 50% no-repeat; background-size:35px 35px; text-indent:-5000px; margin-left:5px;}
.panels_controls .next.disabled { background:url('../img/right-arrow-grey.svg') 50% 50% no-repeat; background-size:35px 35px; }
.panels_controls .next:hover { background-size:40px 40px; }
.panels_controls .next.disabled:hover { background-size:35px 35px; cursor:default; }
.panels_controls .bullets { float:left; width:calc(100% - 100px); text-align:center; height:40px; padding-top:2px; }
.panels_controls .bullet { width:32px; height:32px; background:url('../img/panel-bullet.svg') 50% 50% no-repeat; background-size:28px 28px; display:inline-block; margin-right:5px; }
.panels_controls .bullet:hover { background:url('../img/panel-bullet-active.svg') 50% 50% no-repeat; background-size:32px 32px; }
.panels_controls .bullet.active { background:url('../img/panel-bullet-active.svg') 50% 50% no-repeat; background-size:32px 32px; }
/* 768px */
@media only screen and (max-width: 48em) {
    .panels li ul li { font-size:15px; }
    .panels li p { font-size:15px; }
}
/* 639px */
@media only screen and (max-width: 39.938em) {

}
/* 460px */
@media only screen and (max-width: 28.75em) {
    .panels li ul li { font-size:14px; }
    .panels li p { font-size:14px; }
    .modal.smallscreen .panels li ul li { font-size:13px; }
    .modal.smallscreen .panels li p { font-size:13px; }
    .panels_controls { left:20px; right:30px; bottom:45px; }
    .modal.smallscreen .panels_controls { bottom:45px; }
}
/* 375px */
@media only screen and (max-width: 23.438em) {
    .panels_controls { left:10px; right:25px; }
}

.box { height:900px; width:300px; margin:auto; background-color:rgba(255,0,0,0.5); }
.box_a { height:300px; }

.dr_pemberton_inner { position:relative; max-width:250px; }
.dr_pemberton_inner img { max-width:250px; }

.speech_bubble p { padding:30px; margin:0; font-size:17px; }
.audio_controls { position:absolute; bottom:20px; left:7px; width:64px; height:64px; background:url('../img/audio-play.svg') 50% 50% no-repeat; background-size:60px 60px; text-indent:-5000px; }
.audio_controls:hover { background-size:64px 64px; }
.audio_controls.playing { background:url('../img/audio-stop.svg') 50% 50% no-repeat; background-size:60px 60px; }
.audio_controls.playing:hover { background-size:64px 64px; }

/*
 * MARGIN / PADDING CLASSES 
 * These are intended to be used for adding or removing padding or margins
 * on elements in a way to allow flexible variations between breakpoints
 */
.no-top-padding { padding-top:0 !important; }
.no-bottom-padding { padding-bottom:0 !important; }
.no-top-margin { margin-top:0 !important; }
.no-bottom-margin { margin-bottom:0 !important; }
/* 0.5rem Padding options */
.top-padding-half { padding-top:0.5rem !important; }
.bottom-padding-half { padding-bottom:0.5rem !important; }
.top-margin-half { margin-top:0.5rem !important; }
.bottom-margin-half { margin-bottom:0.5rem !important; }
/* 1rem Padding options */
.top-padding-one { padding-top:1rem !important; }
.bottom-padding-one { padding-bottom:1rem !important; }
.top-margin-one { margin-top:1rem !important; }
.bottom-margin-one { margin-bottom:1rem !important; }
/* 2rem Padding options */
.top-padding-two { padding-top:2rem !important; }
.bottom-padding-two { padding-bottom:2rem !important; }
.top-margin-two { margin-top:2rem !important; }
.bottom-margin-two { margin-bottom:2rem !important; }
/* 3rem Padding options */
.top-padding-three { padding-top:3rem !important; }
.bottom-padding-three { padding-bottom:3rem !important; }
.top-margin-three { margin-top:3rem !important; }
.bottom-margin-three { margin-bottom:3rem !important; }
/* 4rem Padding options */
.top-padding-four { padding-top:4rem !important; }
.bottom-padding-four { padding-bottom:4rem !important; }
.top-margin-four { margin-top:4rem !important; }
.bottom-margin-four { margin-bottom:4rem !important; }


/* 639px */
@media only screen and (max-width: 39.938em) {
    .section { display:none; padding:9rem 10px 0 10px; }
}

/* 460px */
@media only screen and (max-width: 28.75em) {
    .dr_pemberton_inner { position:relative; max-width:180px; }
    .dr_pemberton_inner img { max-width:180px; }
}

/* 375px */
@media only screen and (max-width: 23.438em) {
    .dr_pemberton_inner { position:relative; max-width:150px; }
    .dr_pemberton_inner img { max-width:150px; }
}