/* NAV BUTTON */
.show-menu {
    background-color: transparent;
    border: 0;
}

/* PAGINATION  */

section ul.pagination-list {
    display: flex;
	list-style: none;
    gap: 1rem;
}

section ul.pagination-list li {
    width: 2.5rem;
    text-align: center;
}

body.s-overflow-hidden {
    overflow: hidden !important;
}

/* DIALOG */
 .dialog {
	 display: none;
	 position: fixed;
	 z-index: 1000;
	 background-color: white;
	 top: 0;
	 left: 0;
	 right: 0;
	 bottom: 0;
}
 .dialog--full {
	 max-width: 100% !important;
	 max-height: 100vh !important;
	 width: 100vw;
	 height: 100vh;
	 overflow: scroll;
}
 .dialog--brands .dialog__header {
	 position: fixed;
	 top: 1rem;
	 right: 1rem;
	 z-index: 1;
	 color: white;
}
 .dialog.s-open {
	 display: block;
}
.dialog__content {
	background-color: white;
	color: black;
	width: 100%;
}
.dialog__content  h2 {
	color: black;
	font-size: 2rem;
}
 .dialog__header {
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 padding: 1rem;
}
 .dialog__title {
	 margin: 0;
}
 .dialog__button--reset[aria-disabled="true"] {
	 opacity: 0.5;
	 pointer-events: none;
}
[data-dialog-trigger] {
    background-color: #fff;
    border: none;
    border-radius: 0;
    width: 100%;
    margin: 0;
    color: black;
    display: flex;
    align-items: center;
    min-height: 46px;
}

[data-dialog-trigger] .bs-caret {
    margin-left: auto;
    width: 2rem;
    height: 2rem;
    position: relative;
}
[data-dialog-trigger] .caret {
    font-family: 'Glyphicons Halflings';
    color: black !important;
    height: 0;
    width: 0;
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
}
[data-dialog-trigger] .caret:before {
    content: "\e114";
}


.dialog__footer {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem;
	background-color: #004B90;
}

.dialog button {
	background-color: white;
	color: #004B90;
	border: 1px solid white;
	font-weight: 600;
	padding: 1rem 2rem;
}


/* CATEGORY */
.dialog__header {
     background-color: #004B90; 
     color: #fff;  
}

.dialog__content h2.dialog__title {
    color: white;
    margin: 0;
    padding: 0;
    font-family: "avenir", Helvetica, Arial, sans-serif, Verdana;
}

.category-selector__checkboxes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 2rem 0;
    padding-left: 0 !important;!i;!;
}

@media (min-width: 600px) {
  .category-selector__checkboxes {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .category-selector__checkboxes {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 1200px) {
  .category-selector__checkboxes {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.category-selector__section-title {
    display: contents;
    position: relative;
    margin: 0;
    color: #333;
    font-weight: 400;
    font-family: "avenir", Helvetica, Arial, sans-serif, Verdana;
    color: #004B90;
}

.category-selector {
    background-color: #EBF1F6;
    padding: 1rem 2rem;
    max-height: 54vh;
    overflow: scroll;
}

fieldset.category-selector__section {
    border: 0;
    padding: 1rem;
    background-color: white;
    margin: 1.5rem 0;
}

label.category-selector__checkbox-label {
    margin: 0;
    color: #404040;
    font-weight: 500;
}

.disabled label.category-selector__checkbox-label {
	opacity: 0.6;
}

input[type="checkbox"].category-selector__checkbox-input {
    position: relative;
    height: auto;
    width: auto;
    left: 0;
    right: 100%;
    margin: 0;
    width: 1.5rem;
    height: 1.5rem;
}

input[type="checkbox"][disabled].category-selector__checkbox-input {
    opacity: 0.5;
    cursor: not-allowed;
}

.category-selector__checkbox {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.25rem;
    justify-content: space-between;
    cursor: not-allowed;
    line-height: normal !important;!i;!;
}

/* DROPDOWN */


[data-dropdown-toggle] .bs-caret {
    margin-left: auto;
    width: 2rem;
    height: 2rem;
    position: relative;
}
[data-dropdown-toggle] .caret {
    font-family: 'Glyphicons Halflings';
    color: black !important;
    height: 0;
    width: 0;
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
}
[data-dropdown-toggle] .caret:before {
    content: "\e114";
}
 /* DROPDOWN */
 .c-dropdown {
	 position: relative;
	 max-width: max-content;
	 width: 100%;
}
 .c-dropdown .c-dropdown-menu-toggle {
	 display: flex;
	 align-items: center;
	 gap: 0.5rem;
	 padding: 0.656rem;
	 background-color: white;
	 color: black;
	 border: 0;
	 border-radius: 0;
	 padding: 1rem;
	 display: flex;
	 gap: 1rem;
	 min-width: max-content;
	 min-height: 45px;
}
 .c-dropdown .c-dropdown-menu {
	 display: none;
	 flex-direction: column;
	 position: absolute;
	 width: max-content;
	 z-index: 1;
	 background-color: white;
	 color: black;
	 max-height: 271px;
	 overflow: scroll;
	 width: 100%;
	 padding: 5px;
	 min-width: max-content;
}
 .c-dropdown .c-dropdown-menu.s-open {
	 display: flex;
}
 .c-dropdown .c-dropdown-menu__item {
	 text-align: left;
	 white-space: nowrap;
	 display: flex;
	 align-items: center;
	 gap: 0.5rem;
	 padding: 0.656rem;
	 color: black;
	 word-break: break-word;
	 word-wrap: break-word;
	 width: 100%;
	 border: 0;
	 background-color: transparent;
}
 .c-dropdown .c-dropdown-menu__item:nth-child(odd) {
	 background-color: #f0f0f0;
}
 
 
/* A11Y */
/* Only show focus outlines for keyboard navigation (focus-visible) */
:focus {
    outline: none; /* Remove default focus outline for mouse clicks */
}

:focus-visible {
    outline: 2px solid #fd0 !important; /* Apply a visible focus outline for keyboard navigation */
    outline-offset: 3px !important;     /* Offset to prevent outline from overlapping the element */
}

:focus:not(:focus-visible) {
    outline: none; /* Ensure outline does not appear when element is focused via mouse */
}

/* Focus styles for form elements (input, select, textarea) */
input:focus,
textarea:focus,
select:focus,
button:focus {
    outline: 2px solid #fd0 !important;  /* Same focus style as for other elements */
    outline-offset: 3px !important;
}

.a11y-skip-link:not(:active):not(:focus) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 1001;
    /* position: relative; */
}

.a11y-skip-link {
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-decoration: underline;
    text-decoration-thickness: max(1px, .0625rem);
    text-underline-offset: .1578em;
    font-size: 1.25rem;
    line-height: 1.1428571429;
    display: block;
    padding: 10px 15px;
}

.a11y-skip-link:link, .a11y-skip-link:visited {
    color: #0b0c0c;
}

.a11y-skip-link:focus {
    outline: 3px solid #fd0;
    outline-offset: 0;
    background-color: #fd0;
    position: relative;
    z-index: 1001;
}


 /* SLICK SLIDE */

 .c-slider__btns {
    display: flex;
    gap: 2rem;
    justify-content: space-between;
}

 @media (min-width: 960px) {
    .c-slider__btns {        
        justify-content: flex-end;
    }
}



 .slick-slide.slick-current.slick-active::focus-with {
    outline: 2px solid blue;
    outline-offset: -2px;
 }
.c-slick-controls {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
}
.c-slick-controls  .slide-prev.slick-arrow {
    transform: rotate(180deg);
 }
 .slick-arrow {
    z-index: 1;
 }

 .slide-prev.slick-arrow {
    transform: rotate(180deg);
    left: 20px;
 }

 @media (min-width: 960px) {
    .slide-prev.slick-arrow {
        right: 6.5rem !important;
        left: auto;
    }
}
 
#history .sliderCard .slick-next, 
#history .sliderCard .slick-prev {
    position: relative;
}
 

/*
        Theme Name: Whitbread
        Author: Sandra Jurek @ Pink Squid (built on Todd Moto's naked template)
        Tags: Whitbread Careers

        License: MIT
        License URI: http://opensource.org/licenses/mit-license.php
*/

@-webkit-keyframes animation-transit {
    from {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    to {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
}

@-moz-keyframes animation-transit {
    from {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    to {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
}

@-o-keyframes animation-transit {
    from {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    to {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
}

@keyframes animation-transit {
    from {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    to {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
}

@-webkit-keyframes visible-text {
    from {
        opacity: 1;
    }
    to {
        opacity: 1;
    }
}

@-moz-keyframes visible-text {
    from {
        opacity: 1;
    }
    to {
        opacity: 1;
    }
}

@-o-keyframes visible-text {
    from {
        opacity: 1;
    }
    to {
        opacity: 1;
    }
}

@keyframes visible-text {
    from {
        opacity: 1;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes slide-1-2 {
    from {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    to {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-1-2 {
    from {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    to {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-1-2 {
    from {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    to {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-1-2 {
    from {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    to {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
}


/* animated transition from slide1 to slide0 */

@-webkit-keyframes slide-2-1 {
  from {
    width: 30%;
    height: 100px;
    min-height: 80px;
    right: 0;
    left: auto;
  }
  to {
    width: 600px;
    height: auto;
    min-height: 150px;
    right: 0;
    left: auto;
  }
}

@-moz-keyframes slide-2-1 {
  from {
    width: 30%;
    height: 100px;
    min-height: 80px;
    right: 0;
    left: auto;
  }
  to {
    width: 600px;
    height: auto;
    min-height: 150px;
    right: 0;
    left: auto;
  }
}

@-o-keyframes slide-2-1 {
  from {
    width: 30%;
    height: 100px;
    min-height: 80px;
    right: 0;
    left: auto;
  }
  to {
    width: 600px;
    height: auto;
    min-height: 150px;
    right: 0;
    left: auto;
  }
}

@keyframes slide-2-1 {
  from {
    width: 30%;
    height: 100px;
    min-height: 80px;
    right: 0;
    left: auto;
  }
  to {
    width: 600px;
    height: auto;
    min-height: 150px;
    right: 0;
    left: auto;
  }
}

@-webkit-keyframes slide-2-3-left {
    from {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
        padding: 15px 20px;
    }
    to {
        width: 52%;
        height: 300px;
        bottom: 0;
        left: 48%;
    }
}

@-moz-keyframes slide-2-3-left {
    from {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
        padding: 15px 20px;
    }
    to {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-2-3-left {
    from {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
        padding: 15px 20px;
    }
    to {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-2-3-left {
    from {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
        padding: 15px 20px;
    }
    to {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
}

@-webkit-keyframes slide-2-3-right {
    from {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
        padding: 15px 20px;
    }
    to {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-2-3-right {
    from {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
        padding: 15px 20px;
    }
    to {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-2-3-right {
    from {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
        padding: 15px 20px;
    }
    to {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-2-3-right {
    from {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
        padding: 15px 20px;
    }
    to {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
}

@-webkit-keyframes slide-3-2-left {
    from {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 525px;
        height: 360px;
        bottom: 10%;
        left: 0;
        padding: 15px 20px;
    }
}

@-moz-keyframes slide-3-2-left {
    from {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 525px;
        height: 360px;
        bottom: 10%;
        left: 0;
        padding: 15px 20px;
    }
}

@-o-keyframes slide-3-2-left {
    from {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 525px;
        height: 360px;
        bottom: 10%;
        left: 0;
        padding: 15px 20px;
    }
}

@keyframes slide-3-2-left {
    from {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 525px;
        height: 360px;
        bottom: 10%;
        left: 0;
        padding: 15px 20px;
    }
}

@-webkit-keyframes slide-3-2-right {
    from {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 525px;
        height: 360px;
        bottom: 10%;
        left: 0;
        padding: 15px 20px;
    }
}

@-moz-keyframes slide-3-2-right {
    from {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 525px;
        height: 360px;
        bottom: 10%;
        left: 0;
        padding: 15px 20px;
    }
}

@-o-keyframes slide-3-2-right {
    from {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 525px;
        height: 360px;
        bottom: 10%;
        left: 0;
        padding: 15px 20px;
    }
}

@keyframes slide-3-2-right {
    from {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 525px;
        height: 360px;
        bottom: 10%;
        left: 0;
        padding: 15px 20px;
    }
}

@-webkit-keyframes slide-1-3-left {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-1-3-left {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-1-3-left {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-1-3-left {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
}

@-webkit-keyframes slide-1-3-right {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-1-3-right {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 40px;
        height: 400px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-1-3-right {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 40px;
        height: 400px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-1-3-right {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
}

@-webkit-keyframes slide-3-1-left {
    0% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-3-1-left {
    0% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-3-1-left {
    0% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-3-1-left {
    0% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-webkit-keyframes slide-3-1-right {
    0% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-3-1-right {
    0% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-3-1-right {
    0% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-3-1-right {
    0% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-webkit-keyframes slide-2-4-left {
    0% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
}

@-moz-keyframes slide-2-4-left {
    0% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
}

@-o-keyframes slide-2-4-left {
    0% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
}

@keyframes slide-2-4-left {
    0% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
}

@-webkit-keyframes slide-2-4-right {
    0% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
}

@-moz-keyframes slide-2-4-right {
    0% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
}

@-o-keyframes slide-2-4-right {
    0% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
}

@keyframes slide-2-4-right {
    0% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
}

@-webkit-keyframes slide-4-2-right {
    0% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
    25% {
        width: 52%;
        height: 300px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-4-2-right {
    0% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
    25% {
        width: 52%;
        height: 300px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-4-2-right {
    0% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
    25% {
        width: 52%;
        height: 300px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-4-2-right {
    0% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
    25% {
        width: 52%;
        height: 300px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
}




@-webkit-keyframes slide-3-4-left {
    from {
        width: 46%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 49%;
        height: 340px;
        bottom: 0%;
        left: 0;
    }
}

@-moz-keyframes slide-3-4-left {
  from {
      width: 46%;
      height: 180px;
      bottom: 0;
      left: 0;
  }
  to {
      width: 49%;
      height: 340px;
      bottom: 0%;
      left: 0;
  }
}

@-o-keyframes slide-3-4-left {
  from {
      width: 46%;
      height: 180px;
      bottom: 0;
      left: 0;
  }
  to {
      width: 49%;
      height: 340px;
      bottom: 0%;
      left: 0;
  }
}

@keyframes slide-3-4-left {
  from {
      width: 46%;
      height: 180px;
      bottom: 0;
      left: 0;
  }
  to {
      width: 49%;
      height: 340px;
      bottom: 0%;
      left: 0;
  }
}

@-webkit-keyframes slide-3-4-right {
    from {
        width: 46%;
        height: 180px;
        bottom: 0;
        left: 51%;
    }
    to {
        width: 49%;
        height: 340px;
        bottom: 0%;
        left: 51%;
    }
}

@-moz-keyframes slide-3-4-right {
  from {
      width: 46%;
      height: 180px;
      bottom: 0;
      left: 51%;
  }
  to {
      width: 49%;
      height: 340px;
      bottom: 0%;
      left: 51%;
  }
}

@-o-keyframes slide-3-4-right {
  from {
      width: 46%;
      height: 180px;
      bottom: 0;
      left: 51%;
  }
  to {
      width: 49%;
      height: 340px;
      bottom: 0%;
      left: 51%;
  }
}

@keyframes slide-3-4-right {
  from {
      width: 46%;
      height: 180px;
      bottom: 0;
      left: 51%;
  }
  to {
      width: 49%;
      height: 340px;
      bottom: 0%;
      left: 51%;
  }
}



@-webkit-keyframes slide-3-4-alt-left {
  from {
      width: 525px;
      height: 360px;
      bottom: 0;
      left: 0;
      padding: 15px 20px;
        opacity: 0;
  }
  to {
      width: 52%;
      height: 300px;
      bottom: 0;
      left: 48%;
      opacity: 0;
  }
}

@-moz-keyframes slide-3-4-alt-left {
  from {
      width: 525px;
      height: 360px;
      bottom: 0;
      left: 0;
      padding: 15px 20px;
        opacity: 0;
  }
  to {
      width: 52%;
      height: 300px;
      bottom: 0;
      left: 48%;
  }
}

@-o-keyframes slide-3-4-alt-left {
  from {
      width: 525px;
      height: 360px;
      bottom: 0;
      left: 0;
      padding: 15px 20px;
        opacity: 0;
  }
  to {
      width: 52%;
      height: 300px;
      bottom: 0;
      left: 48%;
  }
}

@keyframes slide-3-4-alt-left {
  from {
      width: 525px;
      height: 360px;
      bottom: 0;
      left: 0;
      padding: 15px 20px;
        opacity: 0;
  }
  to {
      width: 52%;
      height: 300px;
      bottom: 0;
      left: 48%;
        opacity: 0;
  }
}

@-webkit-keyframes slide-3-4-alt-right {
  from {
      width: 525px;
      height: 360px;
      bottom: 0;
      left: 0;
      padding: 15px 20px;
  }
  to {
      width: 100%;
      height: 180px;
      bottom: 0;
      left: 0;
  }
}

@-moz-keyframes slide-3-4-alt-right {
  from {
      width: 525px;
      height: 360px;
      bottom: 0;
      left: 0;
      padding: 15px 20px;
  }
  to {
      width: 100%;
      height: 180px;
      bottom: 0;
      left: 0;
  }
}

@-o-keyframes slide-3-4-alt-right {
  from {
      width: 525px;
      height: 360px;
      bottom: 0;
      left: 0;
      padding: 15px 20px;
  }
  to {
      width: 100%;
      height: 180px;
      bottom: 0;
      left: 0;
  }
}

@keyframes slide-3-4-alt-right {
  from {
      width: 525px;
      height: 360px;
      bottom: 0;
      left: 0;
      padding: 15px 20px;
  }
  to {
      width: 100%;
      height: 180px;
      bottom: 0;
      left: 0;
  }
}



@-webkit-keyframes slide-4-3-alt-left {
    from {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
    to {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-4-3-alt-left {
    from {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;

    }
    to {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-4-3-alt-left {
    from {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;

    }
    to {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-4-3-alt-left {
    from {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
    to {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
}

@-webkit-keyframes slide-4-3-alt-right {
    from {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
        opacity: 0;
    }
    to {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
          opacity: 0;
    }
}

@-moz-keyframes slide-4-3-alt-right {
    from {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
        opacity: 0;
    }
    to {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
          opacity: 0;
    }
}

@-o-keyframes slide-4-3-alt-right {
    from {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
        opacity: 0;
    }
    to {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
          opacity: 0;
    }
}

@keyframes slide-4-3-alt-right {
    from {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
        opacity: 0;
    }
    to {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
          opacity: 0;
    }
}



@-webkit-keyframes slide-4-3-alt-left-960 {
  from {
      width: 47%;
      height: 340px;
      bottom: 0%;
      left: 0;
  }
  to {
      width: 44%;
      height: 230px;
      bottom: 0%;
      left: 0;
  }
}

@-moz-keyframes slide-4-3-alt-left-960 {
  from {
      width: 47%;
      height: 340px;
      bottom: 0%;
      left: 0;
  }
  to {
      width: 44%;
      height: 230px;
      bottom: 0%;
      left: 0;
  }
}

@-o-keyframes slide-4-3-alt-left-960 {
  from {
      width: 47%;
      height: 340px;
      bottom: 0%;
      left: 0;
  }
  to {
      width: 44%;
      height: 230px;
      bottom: 0%;
      left: 0;
  }
}

@keyframes slide-4-3-alt-left-960 {
  from {
      width: 47%;
      height: 340px;
      bottom: 0%;
      left: 0;
  }
  to {
      width: 44%;
      height: 230px;
      bottom: 0%;
      left: 0;
  }
}

@-webkit-keyframes slide-4-3-alt-right-960 {
    from {
        width: 44%;
        height: 340px;
        bottom: 0%;
        left: 50%;
    }
    to {
        width: 52%;
        height: 230px;
        bottom: 0%;
        left: 48%;
    }
}

@-moz-keyframes slide-4-3-alt-right-960 {
  from {
      width: 44%;
      height: 340px;
      bottom: 0%;
      left: 50%;
  }
  to {
      width: 52%;
      height: 230px;
      bottom: 0%;
      left: 48%;
  }
}

@-o-keyframes slide-4-3-alt-right-960 {
  from {
      width: 44%;
      height: 340px;
      bottom: 0%;
      left: 50%;
  }
  to {
      width: 52%;
      height: 230px;
      bottom: 0%;
      left: 48%;
  }
}

@keyframes slide-4-3-alt-right-960 {
  from {
      width: 44%;
      height: 340px;
      bottom: 0%;
      left: 50%;
  }
  to {
      width: 52%;
      height: 230px;
      bottom: 0%;
      left: 48%;
  }
}

@-webkit-keyframes slide-4-3-alt-left-1024 {
  from {
      width: 47%;
      height: 340px;
      bottom: 0%;
      left: 0;
  }
  to {
      width: 44%;
      height: 230px;
      bottom: 0%;
      left: 0;
  }
}

@-moz-keyframes slide-4-3-alt-left-1024 {
  from {
      width: 47%;
      height: 340px;
      bottom: 0%;
      left: 0;
  }
  to {
      width: 44%;
      height: 230px;
      bottom: 0%;
      left: 0;
  }
}

@-o-keyframes slide-4-3-alt-left-1024 {
  from {
      width: 47%;
      height: 340px;
      bottom: 0%;
      left: 0;
  }
  to {
      width: 44%;
      height: 230px;
      bottom: 0%;
      left: 0;
  }
}

@keyframes slide-4-3-alt-left-1024 {
  from {
      width: 47%;
      height: 340px;
      bottom: 0%;
      left: 0;
  }
  to {
      width: 44%;
      height: 230px;
      bottom: 0%;
      left: 0;
  }
}

@-webkit-keyframes slide-4-3-alt-right-1024 {
  from {
      width: 44%;
      height: 340px;
      bottom: 0%;
      left: 50%;
  }
  to {
      width: 52%;
      height: 230px;
      bottom: 0%;
      left: 48%;
  }
}

@-moz-keyframes slide-4-3-alt-right-1024 {
  from {
      width: 44%;
      height: 340px;
      bottom: 0%;
      left: 50%;
  }
  to {
      width: 52%;
      height: 230px;
      bottom: 0%;
      left: 48%;
  }
}

@-o-keyframes slide-4-3-alt-right-1024 {
  from {
      width: 44%;
      height: 340px;
      bottom: 0%;
      left: 50%;
  }
  to {
      width: 52%;
      height: 230px;
      bottom: 0%;
      left: 48%;
  }
}

@keyframes slide-4-3-alt-right-1024 {
  from {
      width: 44%;
      height: 340px;
      bottom: 0%;
      left: 50%;
  }
  to {
      width: 52%;
      height: 230px;
      bottom: 0%;
      left: 48%;
  }
}



@-webkit-keyframes slide-4-3-alt-left-1280 {
  from {
      width: 47%;
      height: 340px;
      bottom: 0%;
      left: 0;
  }
  to {
      width: 44%;
      height: 230px;
      bottom: 0%;
      left: 0;
  }
}

@-moz-keyframes slide-4-3-alt-left-1280 {
  from {
      width: 47%;
      height: 340px;
      bottom: 0%;
      left: 0;
  }
  to {
      width: 44%;
      height: 230px;
      bottom: 0%;
      left: 0;
  }
}

@-o-keyframes slide-4-3-alt-left-1280 {
  from {
      width: 47%;
      height: 340px;
      bottom: 0%;
      left: 0;
  }
  to {
      width: 44%;
      height: 230px;
      bottom: 0%;
      left: 0;
  }
}

@keyframes slide-4-3-alt-left-1280 {
  from {
      width: 47%;
      height: 340px;
      bottom: 0%;
      left: 0;
  }
  to {
      width: 44%;
      height: 230px;
      bottom: 0%;
      left: 0;
  }
}

@-webkit-keyframes slide-4-3-alt-right-1280 {
  from {
      width: 44%;
      height: 340px;
      bottom: 0%;
      left: 50%;
  }
  to {
      width: 52%;
      height: 230px;
      bottom: 0%;
      left: 48%;
  }
}

@-moz-keyframes slide-4-3-alt-right-1280 {
  from {
      width: 44%;
      height: 340px;
      bottom: 0%;
      left: 50%;
  }
  to {
      width: 52%;
      height: 230px;
      bottom: 0%;
      left: 48%;
  }
}

@-o-keyframes slide-4-3-alt-right-1280 {
  from {
      width: 44%;
      height: 340px;
      bottom: 0%;
      left: 50%;
  }
  to {
      width: 52%;
      height: 230px;
      bottom: 0%;
      left: 48%;
  }
}

@keyframes slide-4-3-alt-right-1280 {
  from {
      width: 44%;
      height: 340px;
      bottom: 0%;
      left: 50%;
  }
  to {
      width: 52%;
      height: 230px;
      bottom: 0%;
      left: 48%;
  }
}


@-webkit-keyframes slide-4-3-alt-left-1366 {
    from {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
    to {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-4-3-alt-left-1366 {
    from {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
    to {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-4-3-alt-left-1366 {
    from {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
    to {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-4-3-alt-left-1366 {
    from {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
    to {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
}

@-webkit-keyframes slide-4-3-alt-right-1366 {
    from {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
    to {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
}

@-moz-keyframes slide-4-3-alt-right-1366 {
    from {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
    to {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
}

@-o-keyframes slide-4-3-alt-right-1366 {
    from {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
    to {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
}

@keyframes slide-4-3-alt-right-1366 {
    from {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
    to {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
}










@-webkit-keyframes slide-4-3-left {
    from {
        width: 46%;
        height: 180px;
        bottom: 10%;
        left: 0;
    }
    to {
        width: 49%;
        height: 340px;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-4-3-left {
  from {
      width: 46%;
      height: 180px;
      bottom: 10%;
      left: 0;
  }
  to {
      width: 49%;
      height: 340px;
      bottom: 0;
      left: 0;
  }
}

@-o-keyframes slide-4-3-left {
  from {
      width: 46%;
      height: 180px;
      bottom: 10%;
      left: 0;
  }
  to {
      width: 49%;
      height: 340px;
      bottom: 0;
      left: 0;
  }
}

@keyframes slide-4-3-left {
  from {
      width: 46%;
      height: 180px;
      bottom: 10%;
      left: 0;
  }
  to {
      width: 49%;
      height: 340px;
      bottom: 0;
      left: 0;
  }
}

@-webkit-keyframes slide-4-3-right {
  from {
      width: 46%;
      height: 180px;
      bottom: 10%;
      left: 51%;
  }
  to {
      width: 49%;
      height: 340px;
      bottom: 0;
      left: 51%;
  }
}

@-moz-keyframes slide-4-3-right {
  from {
      width: 46%;
      height: 180px;
      bottom: 10%;
      left: 51%;
  }
  to {
      width: 49%;
      height: 340px;
      bottom: 0;
      left: 51%;
  }
}

@-o-keyframes slide-4-3-right {
  from {
      width: 46%;
      height: 180px;
      bottom: 10%;
      left: 51%;
  }
  to {
      width: 49%;
      height: 340px;
      bottom: 0;
      left: 51%;
  }
}

@keyframes slide-4-3-right {
  from {
      width: 46%;
      height: 180px;
      bottom: 10%;
      left: 51%;
  }
  to {
      width: 49%;
      height: 340px;
      bottom: 0;
      left: 51%;
  }
}

@-webkit-keyframes slide-1-4-left {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
}

@-moz-keyframes slide-1-4-left {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
}

@-o-keyframes slide-1-4-left {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
}

@keyframes slide-1-4-left {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
}

@-webkit-keyframes slide-1-4-right {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
}

@-moz-keyframes slide-1-4-right {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
}

@-o-keyframes slide-1-4-right {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
}

@keyframes slide-1-4-right {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
}

@-webkit-keyframes slide-4-1-left {
    0% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 45%;
    }
    25% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-4-1-left {
    0% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 45%;
    }
    25% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-4-1-left {
    0% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 45%;
    }
    25% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-4-1-left {
    0% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 45%;
    }
    25% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}


/* animated transition from slide3 to slide0 (right box) */

@-webkit-keyframes slide-4-1-right {
    0% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 70%;
    }
    25% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-4-1-right {
    0% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 70%;
    }
    25% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-4-1-right {
    0% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 70%;
    }
    25% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-4-1-right {
    0% {
        width: 25%;
        height: 400px;
        bottom: 10%;
        left: 70%;
    }
    25% {
        width: 100%;
        height: 180px;
        bottom: 0;
        left: 0;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-webkit-keyframes slide-2-3-left-960 {
    from {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
        padding: 15px 20px;
    }
    to {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-2-3-left-960 {
    from {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
        padding: 15px 20px;
    }
    to {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-2-3-left-960 {
    from {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
        padding: 15px 20px;
    }
    to {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-2-3-left-960 {
    from {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
        padding: 15px 20px;
    }
    to {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
}

@-webkit-keyframes slide-2-3-right-960 {
    from {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
        padding: 15px 20px;
    }
    to {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
}

@-moz-keyframes slide-2-3-right-960 {
    from {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
        padding: 15px 20px;
    }
    to {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
}

@-o-keyframes slide-2-3-right-960 {
    from {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
        padding: 15px 20px;
    }
    to {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
}

@keyframes slide-2-3-right-960 {
    from {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
        padding: 15px 20px;
    }
    to {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
}

@-webkit-keyframes slide-3-2-left-960 {
    from {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 525px;
        height: 360px;
          bottom: 10%;
        left: 0;
        padding: 15px 20px;
    }
}

@-moz-keyframes slide-3-2-left-960 {
    from {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 525px;
        height: 360px;
        bottom: 10%;
        left: 0;
        padding: 15px 20px;
    }
}

@-o-keyframes slide-3-2-left-960 {
    from {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 525px;
        height: 360px;
        bottom: 10%;
        left: 0;
        padding: 15px 20px;
    }
}

@keyframes slide-3-2-left-960 {
    from {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 525px;
        height: 360px;
        bottom: 10%;
        left: 0;
        padding: 15px 20px;
    }
}

@-webkit-keyframes slide-3-2-right-960 {
    from {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 525px;
        height: 360px;
          bottom: 10%;
        left: 0;
        padding: 15px 20px;
    }
}

@-moz-keyframes slide-3-2-right-960 {
    from {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 525px;
        height: 360px;
        bottom: 10%;
        left: 0;
        padding: 15px 20px;
    }
}

@-o-keyframes slide-3-2-right-960 {
    from {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 525px;
        height: 360px;
      bottom: 10%;
        left: 0;
        padding: 15px 20px;
    }
}

@keyframes slide-3-2-right-960 {
    from {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 525px;
        height: 360px;
      bottom: 10%;
        left: 0;
        padding: 15px 20px;
    }
}

@-webkit-keyframes slide-1-3-left-960 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-1-3-left-960 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-1-3-left-960 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-1-3-left-960 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
}

@-webkit-keyframes slide-1-3-right-960 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
}

@-moz-keyframes slide-1-3-right-960 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 40px;
        height: 400px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
}

@-o-keyframes slide-1-3-right-960 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 40px;
        height: 400px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
}

@keyframes slide-1-3-right-960 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
}

@-webkit-keyframes slide-3-1-left-960 {
    0% {
        width: 44%;
        height: 300px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-3-1-left-960 {
    0% {
        width: 44%;
        height: 300px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-3-1-left-960 {
    0% {
        width: 44%;
        height: 300px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-3-1-left-960 {
    0% {
        width: 44%;
        height: 300px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-webkit-keyframes slide-3-1-right-960 {
    0% {
        width: 52%;
        height: 300px;
        bottom: 0;
        left: 48%;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-3-1-right-960 {
    0% {
        width: 52%;
        height: 300px;
        bottom: 0;
        left: 48%;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-3-1-right-960 {
    0% {
        width: 52%;
        height: 300px;
        bottom: 0;
        left: 48%;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-3-1-right-960 {
    0% {
        width: 52%;
        height: 300px;
        bottom: 0;
        left: 48%;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-webkit-keyframes slide-2-4-left-960 {
    0% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
}

@-moz-keyframes slide-2-4-left-960 {
    0% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
}

@-o-keyframes slide-2-4-left-960 {
    0% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
}

@keyframes slide-2-4-left-960 {
    0% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
}

@-webkit-keyframes slide-2-4-right-960 {
    0% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
}

@-moz-keyframes slide-2-4-right-960 {
    0% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
}

@-o-keyframes slide-2-4-right-960 {
    0% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
}

@keyframes slide-2-4-right-960 {
    0% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
}

@-webkit-keyframes slide-4-2-left-960 {
    0% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-4-2-left-960 {
    0% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-4-2-left-960 {
    0% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-4-2-left-960 {
    0% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
}

@-webkit-keyframes slide-4-2-right-960 {
    0% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-4-2-right-960 {
    0% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-4-2-right-960 {
    0% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-4-2-right-960 {
    0% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
    }
}

@-webkit-keyframes slide-3-4-left-960 {
    from {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 49%;
        height: 340px;
        bottom: 0%;
        left: 0%;
    }
}

@-moz-keyframes slide-3-4-left-960 {
    from {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 49%;
        height: 340px;
        bottom: 0%;
        left: 0%;
    }
}

@-o-keyframes slide-3-4-left-960 {
    from {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 49%;
        height: 340px;
        bottom: 0%;
        left: 0%;
    }
}

@keyframes slide-3-4-left-960 {
    from {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 49%;
        height: 340px;
        bottom: 0%;
        left: 0%;
    }
}

@-webkit-keyframes slide-3-4-right-960 {
    from {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 49%;
        height: 340px;
        bottom: 0%;
        left: 51%;
    }
}

@-moz-keyframes slide-3-4-right-960 {
    from {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 49%;
        height: 340px;
        bottom: 0%;
        left: 51%;
    }
}

@-o-keyframes slide-3-4-right-960 {
    from {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 49%;
        height: 340px;
        bottom: 0%;
        left: 51%;
    }
}

@keyframes slide-3-4-right-960 {
    from {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 49%;
        height: 340px;
        bottom: 0%;
        left: 51%;
    }
}






@-webkit-keyframes slide-3-4-alt-left-960 {
  from {
      width: 49%;
      height: 340px;
      bottom: 0;
      left: 0;
  }
  to {
      width: 44%;
      height: 230px;
      bottom: 0;
      left: 0;
  }
}

@-moz-keyframes slide-3-4-alt-left-960 {
  from {
      width: 49%;
      height: 340px;
      bottom: 0;
      left: 0;
  }
  to {
      width: 44%;
      height: 230px;
      bottom: 0;
      left: 0;
  }
}

@-o-keyframes slide-3-4-alt-left-960 {
  from {
      width: 49%;
      height: 340px;
      bottom: 0;
      left: 0;
  }
  to {
      width: 44%;
      height: 230px;
      bottom: 0;
      left: 0;
  }
}

@keyframes slide-3-4-alt-left-960 {
  from {
      width: 49%;
      height: 340px;
      bottom: 0;
      left: 0;
  }
  to {
      width: 44%;
      height: 230px;
      bottom: 0;
      left: 0;
  }
}

@-webkit-keyframes slide-3-4-alt-right-960 {
  from {
      width: 49%;
      height: 340px;
      bottom: 0;
      left: 51%;
  }
  to {
      width: 52%;
      height: 230px;
      bottom: 0;
      left: 48%;
  }
}

@-moz-keyframes slide-3-4-alt-right-960 {
  from {
      width: 49%;
      height: 340px;
      bottom: 0;
      left: 51%;
  }
  to {
      width: 52%;
      height: 230px;
      bottom: 0;
      left: 48%;
  }
}

@-o-keyframes slide-3-4-alt-right-960 {
  from {
      width: 49%;
      height: 340px;
      bottom: 0;
      left: 51%;
  }
  to {
      width: 52%;
      height: 230px;
      bottom: 0;
      left: 48%;
  }
}

@keyframes slide-3-4-alt-right-960 {
  from {
      width: 49%;
      height: 340px;
      bottom: 0;
      left: 51%;
  }
  to {
      width: 52%;
      height: 230px;
      bottom: 0;
      left: 48%;
  }
}



@-webkit-keyframes slide-4-3-left-960 {
  from {
      width: 44%;
      height: 230px;
      bottom: 0%;
      left: 0;
  }
  to {
      width: 49%;
      height: 340px;
      bottom: 0%;
      left: 0;
  }
}

@-moz-keyframes slide-4-3-left-960 {
  from {
      width: 44%;
      height: 230px;
      bottom: 0%;
      left: 0;
  }
  to {
      width: 49%;
      height: 340px;
      bottom: 0%;
      left: 0;
  }
}

@-o-keyframes slide-4-3-left-960 {
  from {
      width: 44%;
      height: 230px;
      bottom: 0%;
      left: 0;
  }
  to {
      width: 49%;
      height: 340px;
      bottom: 0%;
      left: 0;
  }
}

@keyframes slide-4-3-left-960 {
  from {
      width: 44%;
      height: 230px;
      bottom: 0%;
      left: 0;
  }
  to {
      width: 49%;
      height: 340px;
      bottom: 0%;
      left: 0;
  }
}

@-webkit-keyframes slide-4-3-right-960 {
    from {
        width: 44%;
        height: 230px;
        bottom: 0%;
        left: 50%;
    }
    to {
        width: 49%;
        height: 340px;
        bottom: 0%;
        left: 51%;
    }
}

@-moz-keyframes slide-4-3-right-960 {
  from {
      width: 44%;
      height: 230px;
      bottom: 0%;
      left: 50%;
  }
  to {
      width: 49%;
      height: 340px;
      bottom: 0%;
      left: 51%;
  }
}

@-o-keyframes slide-4-3-right-960 {
  from {
      width: 44%;
      height: 230px;
      bottom: 0%;
      left: 50%;
  }
  to {
      width: 49%;
      height: 340px;
      bottom: 0%;
      left: 51%;
  }
}

@keyframes slide-4-3-right-960 {
  from {
      width: 44%;
      height: 230px;
      bottom: 0%;
      left: 50%;
  }
  to {
      width: 49%;
      height: 340px;
      bottom: 0%;
      left: 51%;
  }
}

@-webkit-keyframes slide-1-4-left-960 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
}

@-moz-keyframes slide-1-4-left-960 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
}

@-o-keyframes slide-1-4-left-960 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 44%;
        height: 300px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
}

@keyframes slide-1-4-left-960 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
}

@-webkit-keyframes slide-1-4-right-960 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
}

@-moz-keyframes slide-1-4-right-960 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
}

@-o-keyframes slide-1-4-right-960 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
}

@keyframes slide-1-4-right-960 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
}

@-webkit-keyframes slide-4-1-left-960 {
    0% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 45%;
    }
    25% {
        width: 44%;
        height: 300px;
        bottom: 0;
        left: 0;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-4-1-left-960 {
    0% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 45%;
    }
    25% {
        width: 44%;
        height: 300px;
        bottom: 0;
        left: 0;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-4-1-left-960 {
    0% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 45%;
    }
    25% {
        width: 44%;
        height: 300px;
        bottom: 0;
        left: 0;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-4-1-left-960 {
    0% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 45%;
    }
    25% {
        width: 44%;
        height: 300px;
        bottom: 0;
        left: 0;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}


/* animated transition from slide3 to slide0 (right box) */

@-webkit-keyframes slide-4-1-right-960 {
    0% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 70%;
    }
    25% {
        width: 52%;
        height: 300px;
        bottom: 0;
        left: 48%;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-4-1-right-960 {
    0% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 70%;
    }
    25% {
        width: 52%;
        height: 300px;
        bottom: 0;
        left: 48%;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-4-1-right-960 {
    0% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 70%;
    }
    25% {
        width: 52%;
        height: 300px;
        bottom: 0;
        left: 48%;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-4-1-right-960 {
    0% {
        width: 25%;
        height: 400px;
        bottom: 10%;
        left: 70%;
    }
    25% {
        width: 52%;
        height: 300px;
        bottom: 0;
        left: 48%;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-webkit-keyframes slide-3-2-left-1024 {
    from {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@-moz-keyframes slide-3-2-left-1024 {
    from {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@-o-keyframes slide-3-2-left-1024 {
    from {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@keyframes slide-3-2-left-1024 {
    from {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@-webkit-keyframes slide-3-2-right-1024 {
    from {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@-moz-keyframes slide-3-2-right-1024 {
    from {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@-o-keyframes slide-3-2-right-1024 {
    from {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@keyframes slide-3-2-right-1024 {
    from {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@-webkit-keyframes slide-1-2-1024 {
    from {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    to {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@-moz-keyframes slide-1-2-1024 {
    from {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    to {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@-o-keyframes slide-1-2-1024 {
    from {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    to {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@keyframes slide-1-2-1024 {
    from {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    to {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}


/* animated transition from slide1 to slide0 */

@-webkit-keyframes slide-2-1-1024 {
  from {
    width: 30%;
    height: 100px;
    min-height: 80px;
    right: 0;
    left: auto;
  }
  to {
    width: 600px;
    height: auto;
    min-height: 150px;
    right: 0;
    left: auto;
  }
}

@-moz-keyframes slide-2-1-1024 {
  from {
    width: 30%;
    height: 100px;
    min-height: 80px;
    right: 0;
    left: auto;
  }
  to {
    width: 600px;
    height: auto;
    min-height: 150px;
    right: 0;
    left: auto;
  }
}

@-o-keyframes slide-2-1-1024 {
  from {
    width: 30%;
    height: 100px;
    min-height: 80px;
    right: 0;
    left: auto;
  }
  to {
    width: 600px;
    height: auto;
    min-height: 150px;
    right: 0;
    left: auto;
  }
}

@keyframes slide-2-1-1024 {
    from {
      width: 30%;
      height: 100px;
      min-height: 80px;
      right: 0;
      left: auto;
    }
    to {
      width: 600px;
      height: auto;
      min-height: 150px;
      right: 0;
      left: auto;
    }
}

@-webkit-keyframes slide-2-3-left-1024 {
    from {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    to {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-2-3-left-1024 {
    from {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    to {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-2-3-left-1024 {
    from {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    to {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-2-3-left-1024 {
    from {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    to {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
}

@-webkit-keyframes slide-2-3-right-1024 {
    from {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    to {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
}

@-moz-keyframes slide-2-3-right-1024 {
    from {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    to {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
}

@-o-keyframes slide-2-3-right-1024 {
    from {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    to {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
}

@keyframes slide-2-3-right-1024 {
    from {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    to {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
}

@-webkit-keyframes slide-1-3-left-1024 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-1-3-left-1024 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-1-3-left-1024 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-1-3-left-1024 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
}

@-webkit-keyframes slide-1-3-right-1024 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
}

@-moz-keyframes slide-1-3-right-1024 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 40px;
        height: 400px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
}

@-o-keyframes slide-1-3-right-1024 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 40px;
        height: 400px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
}

@keyframes slide-1-3-right-1024 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
}

@-webkit-keyframes slide-2-4-left-1024 {
    0% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 44%;
        height: 300px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 45%;
    }
}

@-moz-keyframes slide-2-4-left-1024 {
    0% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 44%;
        height: 300px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 45%;
    }
}

@-o-keyframes slide-2-4-left-1024 {
    0% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 44%;
        height: 300px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 45%;
    }
}

@keyframes slide-2-4-left-1024 {
    0% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 44%;
        height: 300px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 45%;
    }
}

@-webkit-keyframes slide-2-4-right-1024 {
    0% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 52%;
        height: 300px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 70%;
    }
}

@-moz-keyframes slide-2-4-right-1024 {
    0% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 52%;
        height: 300px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 70%;
    }
}

@-o-keyframes slide-2-4-right-1024 {
    0% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 52%;
        height: 300px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 70%;
    }
}

@keyframes slide-2-4-right-1024 {
    0% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 52%;
        height: 300px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 70%;
    }
}

@-webkit-keyframes slide-4-2-left-1024 {
    0% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 45%;
    }
    25% {
        width: 44%;
        height: 300px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@-moz-keyframes slide-4-2-left-1024 {
    0% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 45%;
    }
    25% {
        width: 44%;
        height: 300px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@-o-keyframes slide-4-2-left-1024 {
    0% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 45%;
    }
    25% {
        width: 44%;
        height: 300px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@keyframes slide-4-2-left-1024 {
    0% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 45%;
    }
    25% {
        width: 44%;
        height: 300px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@-webkit-keyframes slide-4-2-right-1024 {
    0% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 70%;
    }
    25% {
        width: 52%;
        height: 300px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@-moz-keyframes slide-4-2-right-1024 {
    0% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 70%;
    }
    25% {
        width: 52%;
        height: 300px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@-o-keyframes slide-4-2-right-1024 {
    0% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 70%;
    }
    25% {
        width: 52%;
        height: 300px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@keyframes slide-4-2-right-1024 {
    0% {
        width: 20%;
        height: 400px;
        bottom: 10%;
        left: 70%;
    }
    25% {
        width: 52%;
        height: 300px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@-webkit-keyframes slide-3-4-left-1024 {
    from {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
        right: 0;
    }
    to {
        width: 49%;
        height: 340px;
        bottom: 0%;
        left: 0;
    }
}

@-moz-keyframes slide-3-4-left-1024 {
    from {
      width: 44%;
      height: 230px;
      bottom: 0;
      left: 0;
      right: 0;
    }
    to {
        width: 49%;
        height: 340px;
        bottom: 0%;
        left: 0;
    }
}

@-o-keyframes slide-3-4-left-1024 {
    from {
      width: 44%;
      height: 230px;
      bottom: 0;
      left: 0;
      right: 0;
    }
    to {
        width: 49%;
        height: 340px;
        bottom: 0%;
        left: 0;
    }
}

@keyframes slide-3-4-left-1024 {
    from {
      width: 44%;
      height: 230px;
      bottom: 0;
      left: 0;
      right: 0;
    }
    to {
        width: 49%;
        height: 340px;
        bottom: 0%;
        left: 0;
    }
}

@-webkit-keyframes slide-3-4-right-1024 {
    from {
        width: 52%;
        height: 300px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 49%;
        height: 340px;
        bottom: 0%;
        left: 51%;
    }
}

@-moz-keyframes slide-3-4-right-1024 {
    from {
        width: 52%;
        height: 300px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 49%;
        height: 340px;
        bottom: 0%;
        left: 51%;
    }
}

@-o-keyframes slide-3-4-right-1024 {
    from {
        width: 52%;
        height: 300px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 49%;
        height: 340px;
        bottom: 0%;
        left: 51%;
    }
}

@keyframes slide-3-4-right-1024 {
    from {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 49%;
        height: 340px;
        bottom: 0%;
        left: 51%;
    }
}






@-webkit-keyframes slide-3-4-alt-left-1024 {
  from {
      width: 49%;
      height: 340px;
      bottom: 0%;
      left: 0;
  }
  to {
      width: 44%;
      height: 230px;
      bottom: 0;
      left: 0;
  }
}

@-moz-keyframes slide-3-4-alt-left-1024 {
  from {
      width: 49%;
      height: 340px;
      bottom: 0%;
      left: 0;
  }
  to {
      width: 44%;
      height: 230px;
      bottom: 0;
      left: 0;
  }
}

@-o-keyframes slide-3-4-alt-left-1024 {
  from {
      width: 49%;
      height: 340px;
      bottom: 0%;
      left: 0;
  }
  to {
      width: 44%;
      height: 230px;
      bottom: 0;
      left: 0;
  }
}

@keyframes slide-3-4-alt-left-1024 {
  from {
      width: 49%;
      height: 340px;
      bottom: 0%;
      left: 0;
  }
  to {
      width: 44%;
      height: 230px;
      bottom: 0;
      left: 0;
  }
}

@-webkit-keyframes slide-3-4-alt-right-1024 {
  from {
      width: 49%;
      height: 340px;
      bottom: 0%;
      left: 51%;
  }
  to {
      width: 52%;
      height: 230px;
      bottom: 0;
      left: 48%;
  }
}

@-moz-keyframes slide-3-4-alt-right-1024 {
  from {
      width: 49%;
      height: 340px;
      bottom: 0%;
      left: 51%;
  }
  to {
      width: 52%;
      height: 230px;
      bottom: 0;
      left: 48%;
  }
}

@-o-keyframes slide-3-4-alt-right-1024 {
  from {
      width: 49%;
      height: 340px;
      bottom: 0%;
      left: 51%;
  }
  to {
      width: 52%;
      height: 230px;
      bottom: 0;
      left: 48%;
  }
}

@keyframes slide-3-4-alt-right-1024 {
  from {
      width: 49%;
      height: 340px;
      bottom: 0%;
      left: 51%;
  }
  to {
      width: 52%;
      height: 230px;
      bottom: 0;
      left: 48%;
  }
}



@-webkit-keyframes slide-4-3-left-1024 {
    from {
        width: 47%;
        height: 340px;
        /* bottom: 10%; */
        left: 0;
    }
    to {
        width: 49%;
        height: 340px;
        /* bottom: 0; */
        left: 0;
    }
}

@-moz-keyframes slide-4-3-left-1024 {
    from {
        width: 47%;
        height: 340px;
        /* bottom: 10%; */
        left: 0;
    }
    to {
        width: 49%;
        height: 340px;
        /* bottom: 0; */
        left: 0;
    }
}

@-o-keyframes slide-4-3-left-1024 {
    from {
        width: 47%;
        height: 340px;
        /* bottom: 10%; */
        left: 0;
    }
    to {
        width: 49%;
        height: 340px;
        /* bottom: 0; */
        left: 0;
    }
}

@keyframes slide-4-3-left-1024 {
    from {
        width: 47%;
        height: 340px;
        /* bottom: 10%; */
        left: 0;
    }
    to {
        width: 49%;
        height: 340px;
        /* bottom: 0; */
        left: 0;
    }
}

@-webkit-keyframes slide-4-3-right-1024 {
    from {
        width: 47%;
        height: 340px;
        /* bottom: 10%; */
        left: 51%;
    }
    to {
        width: 49%;
        height: 340px;
        /* bottom: 0; */
        left: 51%;
    }
}

@-moz-keyframes slide-4-3-right-1024 {
    from {
        width: 47%;
        height: 340px;
        /* bottom: 10%; */
        left: 51%;
    }
    to {
        width: 49%;
        height: 340px;
        /* bottom: 0; */
        left: 51%;
    }
}

@-o-keyframes slide-4-3-right-1024 {
    from {
        width: 47%;
        height: 340px;
        /* bottom: 10%; */
        left: 51%;
    }
    to {
        width: 49%;
        height: 340px;
        /* bottom: 0; */
        left: 51%;
    }
}

@keyframes slide-4-3-right-1024 {
    from {
        width: 47%;
        height: 340px;
        /* bottom: 10%; */
        left: 51%;
    }
    to {
        width: 49%;
        height: 340px;
        /* bottom: 0; */
        left: 51%;
    }
}

@-webkit-keyframes slide-1-4-left-1024 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
}

@-moz-keyframes slide-1-4-left-1024 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
}

@-o-keyframes slide-1-4-left-1024 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
}

@keyframes slide-1-4-left-1024 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
}

@-webkit-keyframes slide-1-4-right-1024 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
}

@-moz-keyframes slide-1-4-right-1024 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
}

@-o-keyframes slide-1-4-right-1024 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
}

@keyframes slide-1-4-right-1024 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
}

@-webkit-keyframes slide-4-1-left-1024 {
    0% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-4-1-left-1024 {
    0% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-4-1-left-1024 {
    0% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-4-1-left-1024 {
    0% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}


/* animated transition from slide3 to slide0 (right box) */

@-webkit-keyframes slide-4-1-right-1024 {
    0% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-4-1-right-1024 {
    0% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-4-1-right-1024 {
    0% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-4-1-right-1024 {
    0% {
        width: 49%;
        height: 340px;
        bottom: 10%;
        left: 51%;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-webkit-keyframes slide-3-1-left-1280 {
    0% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-3-1-left-1280 {
    0% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-3-1-left-1280 {
    0% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-3-1-left-1280 {
    0% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-webkit-keyframes slide-3-1-right-1280 {
    0% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-3-1-right-1280 {
    0% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-3-1-right-1280 {
    0% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-3-1-right-1280 {
    0% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-webkit-keyframes slide-2-4-left-1280 {
    0% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 35%;
    }
}

@-moz-keyframes slide-2-4-left-1280 {
    0% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 35%;
    }
}

@-o-keyframes slide-2-4-left-1280 {
    0% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 35%;
    }
}

@keyframes slide-2-4-left-1280 {
    0% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 35%;
    }
}

@-webkit-keyframes slide-2-4-right-1280 {
    0% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 70%;
    }
}

@-moz-keyframes slide-2-4-right-1280 {
    0% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 70%;
    }
}

@-o-keyframes slide-2-4-right-1280 {
    0% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 70%;
    }
}

@keyframes slide-2-4-right-1280 {
    0% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 70%;
    }
}

@-webkit-keyframes slide-4-2-left-1280 {
    0% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 35%;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@-moz-keyframes slide-4-2-left-1280 {
    0% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 35%;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@-o-keyframes slide-4-2-left-1280 {
    0% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 35%;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@keyframes slide-4-2-left-1280 {
    0% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 35%;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@-webkit-keyframes slide-4-2-right-1280 {
    0% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 70%;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@-moz-keyframes slide-4-2-right-1280 {
    0% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 70%;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@-o-keyframes slide-4-2-right-1280 {
    0% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 70%;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@keyframes slide-4-2-right-1280 {
    0% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 70%;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@-webkit-keyframes slide-3-4-left-1280 {
    from {
        width: 4%;
        height: 230px;
        bottom: 0;
        left: auto;
        right: 0;
    }
    to {
        width: 30%;
        height: 350px;
        bottom: 0%;
        left: 35%;
        right:0%;
    }
}

@-moz-keyframes slide-3-4-left-1280 {
    from {
        width: 4%;
        height: 230px;
        bottom: 0;
        left: auto;
      right: 0;

    }
    to {
        width: 30%;
        height: 350px;
        bottom: 0%;
        left: 35%;
          right: 0%;
    }
}

@-o-keyframes slide-3-4-left-1280 {
    from {
        width: 4%;
        height: 230px;
        bottom: 0;
        left: auto;
        right: 0;
    }
    to {
        width: 30%;
        height: 350px;
        bottom: 0%;
        left: 35%;
        right: 0%;
    }
}

@keyframes slide-3-4-left-1280 {
    from {
        width: 4%;
        height: 230px;
        bottom: 0;
        left: auto;
        right: 0;
    }
    to {
        width: 30%;
        height: 350px;
        bottom: 0%;
        left: 35%;
        right: 35%;
    }
}

@-webkit-keyframes slide-3-4-right-1280 {
    from {
        width: 4%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 30%;
        height: 350px;
        bottom: 0%;
        left: 70%;
    }
}

@-moz-keyframes slide-3-4-right-1280 {
    from {
        width: 4%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 30%;
        height: 350px;
        bottom: 0%;
        left: 70%;
    }
}

@-o-keyframes slide-3-4-right-1280 {
    from {
        width: 4%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 30%;
        height: 350px;
        bottom: 0%;
        left: 70%;
    }
}

@keyframes slide-3-4-right-1280 {
    from {
        width: 4%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 30%;
        height: 350px;
        bottom: 0%;
        left: 70%;
    }
}





@-webkit-keyframes slide-3-4-alt-left-1280 {
    from {
        width: 30%;
        height: 350px;
        bottom: 0;
        left: 35%;
    }
    to {
        width: 44%;
        height: 230px;
        bottom: 0%;
        left: 0%;
    }
}

@-moz-keyframes slide-3-4-alt-left-1280 {
  from {
      width: 30%;
      height: 350px;
      bottom: 0;
      left: 35%;
  }
  to {
      width: 44%;
      height: 230px;
      bottom: 0%;
      left: 0%;
  }
}

@-o-keyframes slide-3-4-alt-left-1280 {
  from {
      width: 30%;
      height: 350px;
      bottom: 0;
      left: 35%;
  }
  to {
      width: 44%;
      height: 230px;
      bottom: 0%;
      left: 0%;
  }
}

@keyframes slide-3-4-alt-left-1280 {
  from {
      width: 30%;
      height: 350px;
      bottom: 0;
      left: 35%;
  }
  to {
      width: 44%;
      height: 230px;
      bottom: 0%;
      left: 0%;
  }
}

@-webkit-keyframes slide-3-4-alt-right-1280 {
    from {
        width: 30%;
        height: 350px;
        bottom: 0;
        left: 70%;
    }
    to {
        width: 48%;
        height: 230px;
        bottom: 0%;
        left: 52%;
    }
}

@-moz-keyframes slide-3-4-alt-right-1280 {
  from {
      width: 30%;
      height: 350px;
      bottom: 0;
      left: 70%;
  }
  to {
      width: 48%;
      height: 230px;
      bottom: 0%;
      left: 52%;
  }
}

@-o-keyframes slide-3-4-alt-right-1280 {
  from {
      width: 30%;
      height: 350px;
      bottom: 0;
      left: 70%;
  }
  to {
      width: 48%;
      height: 230px;
      bottom: 0%;
      left: 52%;
  }
}

@keyframes slide-3-4-alt-right-1280 {
  from {
      width: 30%;
      height: 350px;
      bottom: 0;
      left: 70%;
  }
  to {
      width: 48%;
      height: 230px;
      bottom: 0%;
      left: 52%;
  }
}



@-webkit-keyframes slide-4-3-left-1280 {
  from {
      width: 44%;
      height: 230px;
      bottom: 0;
      left: 0;
  }
  to {
      width: 30%;
      height: 350px;
      bottom: 0%;
      left: 35%;
  }
}

@-moz-keyframes slide-4-3-left-1280 {
  from {
      width: 44%;
      height: 230px;
      bottom: 0;
      left: 0;
  }
  to {
      width: 30%;
      height: 350px;
      bottom: 0%;
      left: 35%;
  }
}

@-o-keyframes slide-4-3-left-1280 {
  from {
      width: 44%;
      height: 230px;
      bottom: 0;
      left: 0;
  }
  to {
      width: 30%;
      height: 350px;
      bottom: 0%;
      left: 35%;
  }
}

@keyframes slide-4-3-left-1280 {
  from {
      width: 44%;
      height: 230px;
      bottom: 0;
      left: 0;
  }
  to {
      width: 30%;
      height: 350px;
      bottom: 0%;
      left: 35%;
  }
}

@-webkit-keyframes slide-4-3-right-1280 {
  from {
      width: 52%;
      height: 230px;
      bottom: 0;
      left: 48%;
  }
  to {
      width: 30%;
      height: 350px;
      bottom: 0%;
      left: 70%;
  }
}

@-moz-keyframes slide-4-3-right-1280 {
  from {
      width: 52%;
      height: 230px;
      bottom: 0;
      left: 48%;
  }
  to {
      width: 30%;
      height: 350px;
      bottom: 0%;
      left: 70%;
  }
}

@-o-keyframes slide-4-3-right-1280 {
  from {
      width: 52%;
      height: 230px;
      bottom: 0;
      left: 48%;
  }
  to {
      width: 30%;
      height: 350px;
      bottom: 0%;
      left: 70%;
  }
}

@keyframes slide-4-3-right-1280 {
  from {
      width: 52%;
      height: 230px;
      bottom: 0;
      left: 48%;
  }
  to {
      width: 30%;
      height: 350px;
      bottom: 0%;
      left: 70%;
  }
}

@-webkit-keyframes slide-1-4-left-1280 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 35%;
    }
}

@-moz-keyframes slide-1-4-left-1280 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 35%;
    }
}

@-o-keyframes slide-1-4-left-1280 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 35%;
    }
}

@keyframes slide-1-4-left-1280 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 35%;
    }
}

@-webkit-keyframes slide-1-4-right-1280 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 70%;
    }
}

@-moz-keyframes slide-1-4-right-1280 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 70%;
    }
}

@-o-keyframes slide-1-4-right-1280 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 70%;
    }
}

@keyframes slide-1-4-right-1280 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 70%;
    }
}

@-webkit-keyframes slide-4-1-left-1280 {
    0% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 35%;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-4-1-left-1280 {
    0% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 35%;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-4-1-left-1280 {
    0% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 35%;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-4-1-left-1280 {
    0% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 35%;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}


/* animated transition from slide3 to slide0 (right box) */

@-webkit-keyframes slide-4-1-right-1280 {
    0% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 35%;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-4-1-right-1280 {
    0% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 35%;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-4-1-right-1280 {
    0% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 35%;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-4-1-right-1280 {
    0% {
        width: 30%;
        height: 350px;
        bottom: 10%;
        left: 35%;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-webkit-keyframes slide-4-3-left-1366 {
    from {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
    to {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-4-3-left-1366 {
    from {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
    to {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-4-3-left-1366 {
    from {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
    to {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-4-3-left-1366 {
    from {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
    to {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
}

@-webkit-keyframes slide-4-3-right-1366 {
    from {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
    to {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
}

@-moz-keyframes slide-4-3-right-1366 {
    from {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
    to {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
}

@-o-keyframes slide-4-3-right-1366 {
    from {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
    to {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
}

@keyframes slide-4-3-right-1366 {
    from {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
    to {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
}





@-webkit-keyframes slide-4-3-left-1600 {
  from {
      width: 30%;
      height: 230px;
      bottom: 0%;
      left: 15%;
  }
  to {
      width: 25%;
      height: 350px;
      bottom: 0;
      left: 45%;
  }
}

@-moz-keyframes slide-4-3-left-1600 {
  from {
      width: 30%;
      height: 230px;
      bottom: 0%;
      left: 15%;
  }
  to {
      width: 25%;
      height: 350px;
      bottom: 0;
      left: 45%;
  }
}

@-o-keyframes slide-4-3-left-1600 {
  from {
      width: 30%;
      height: 230px;
      bottom: 0%;
      left: 15%;
  }
  to {
      width: 25%;
      height: 350px;
      bottom: 0;
      left: 45%;
  }
}

@keyframes slide-4-3-left-1600 {
  from {
      width: 30%;
      height: 230px;
      bottom: 0%;
      left: 15%;
  }
  to {
      width: 25%;
      height: 350px;
      bottom: 0;
      left: 45%;
  }
}

@-webkit-keyframes slide-4-3-right-1600 {
  from {
      width: 52%;
      height: 230px;
      bottom: 0%;
      left: 48%;
  }
  to {
      width: 25%;
      height: 350px;
      bottom: 0;
      left: 75%;
  }
}

@-moz-keyframes slide-4-3-right-1600 {
  from {
      width: 52%;
      height: 230px;
      bottom: 0%;
      left: 48%;
  }
  to {
      width: 25%;
      height: 350px;
      bottom: 0;
      left: 75%;
  }
}

@-o-keyframes slide-4-3-right-1600 {
  from {
      width: 52%;
      height: 230px;
      bottom: 0%;
      left: 48%;
  }
  to {
      width: 25%;
      height: 350px;
      bottom: 0;
      left: 75%;
  }
}

@keyframes slide-4-3-right-1600 {
  from {
      width: 52%;
      height: 230px;
      bottom: 0%;
      left: 48%;
  }
  to {
      width: 25%;
      height: 350px;
      bottom: 0;
      left: 75%;
  }
}







@-webkit-keyframes slide-3-4-left-1366 {
  from {
      width: 9%;
      height: 230px;
      bottom: 0;
      left: auto;
      right: 0;
  }
  to {
      width: 25%;
      height: 350px;
      bottom: 0%;
      left: 5%;
      right: 5%;
  }
}


@-moz-keyframes slide-3-4-left-1366 {
  from {
      width: 9%;
      height: 230px;
      bottom: 0;
      left: auto;
      right: 0;
  }
  to {
      width: 25%;
      height: 350px;
      bottom: 0%;
      left: 5%;
      right: 5%;
  }
}

@-o-keyframes slide-3-4-left-1366 {
  from {
      width: 9%;
      height: 230px;
      bottom: 0;
      left: auto;
      right: 0;
  }
  to {
      width: 25%;
      height: 350px;
      bottom: 0%;
      left: 5%;
      right: 5%;
  }
}

@keyframes slide-3-4-left-1366 {
  from {
      width: 9%;
      height: 230px;
      bottom: 0;
      left: auto;
      right: 0;
  }
  to {
      width: 25%;
      height: 350px;
      bottom: 0%;
      left: 5%;
      right: 5%;
  }
}

@-webkit-keyframes slide-3-4-right-1366 {
    from {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 25%;
        height: 350px;
        bottom: 0%;
        left: 70%;
    }
}

@-moz-keyframes slide-3-4-right-1366 {
    from {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 25%;
        height: 350px;
        bottom: 0%;
        left: 70%;
    }
}

@-o-keyframes slide-3-4-right-1366 {
    from {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 25%;
        height: 350px;
        bottom: 0%;
        left: 70%;
    }
}

@keyframes slide-3-4-right-1366 {
    from {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 25%;
        height: 350px;
        bottom: 0%;
        left: 70%;
    }
}






@-webkit-keyframes slide-3-4-alt-left-1366 {
    from {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
}

@-moz-keyframes slide-3-4-alt-left-1366 {
    from {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
}

@-o-keyframes slide-3-4-alt-left-1366 {
    from {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
}

@keyframes slide-3-4-alt-left-1366 {
    from {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
}

@-webkit-keyframes slide-3-4-alt-right-1366 {
    from {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
}

@-moz-keyframes slide-3-4-alt-right-1366 {
    from {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
}

@-o-keyframes slide-3-4-alt-right-1366 {
    from {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
}

@keyframes slide-3-4-alt-right-1366 {
    from {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
}







@-webkit-keyframes slide-1-4-left-1600 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
}

@-moz-keyframes slide-1-4-left-1600 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
}

@-o-keyframes slide-1-4-left-1600 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
}

@keyframes slide-1-4-left-1600 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
}

@-webkit-keyframes slide-1-4-right-1600 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
}

@-moz-keyframes slide-1-4-right-1600 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
}

@-o-keyframes slide-1-4-right-1600 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
}

@keyframes slide-1-4-right-1600 {
    0% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
    25% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    50% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
}

@-webkit-keyframes slide-4-1-left-1600 {
    0% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-4-1-left-1600 {
    0% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-4-1-left-1600 {
    0% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-4-1-left-1600 {
    0% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}


/* animated transition from slide3 to slide0 (right box) */

@-webkit-keyframes slide-4-1-right-1600 {
    0% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-moz-keyframes slide-4-1-right-1600 {
    0% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-o-keyframes slide-4-1-right-1600 {
    0% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@keyframes slide-4-1-right-1600 {
    0% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    50% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    100% {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
    }
}

@-webkit-keyframes slide-2-4-left-1600 {
    0% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
}

@-moz-keyframes slide-2-4-left-1600 {
    0% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
}

@-o-keyframes slide-2-4-left-1600 {
    0% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
}

@keyframes slide-2-4-left-1600 {
    0% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
}

@-webkit-keyframes slide-2-4-right-1600 {
    0% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
}

@-moz-keyframes slide-2-4-right-1600 {
    0% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
}

@-o-keyframes slide-2-4-right-1600 {
    0% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
}

@keyframes slide-2-4-right-1600 {
    0% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
}

@-webkit-keyframes slide-4-2-left-1600 {
    0% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@-moz-keyframes slide-4-2-left-1600 {
    0% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@-o-keyframes slide-4-2-left-1600 {
    0% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@keyframes slide-4-2-left-1600 {
    0% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
    25% {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    100% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@-webkit-keyframes slide-4-2-right-1600 {
    0% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@-moz-keyframes slide-4-2-right-1600 {
    0% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@-o-keyframes slide-4-2-right-1600 {
    0% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@keyframes slide-4-2-right-1600 {
    0% {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
    25% {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    100% {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
    }
}

@-webkit-keyframes slide-3-4-left-1600 {
  from {
      width: 4%;
      height: 230px;
      bottom: 0;
      left: auto;
      right: 0;
  }
  to {
      width: 25%;
      height: 350px;
      bottom: 0%;
      left: 45%;
      right: 45%;
  }
}

@-moz-keyframes slide-3-4-left-1600 {
  from {
      width: 4%;
      height: 230px;
      bottom: 0;
      left: auto;
      right: 0;
  }
  to {
      width: 25%;
      height: 350px;
      bottom: 0%;
      left: 45%;
      right: 45%;
  }
}

@-o-keyframes slide-3-4-left-1600 {
  from {
      width: 4%;
      height: 230px;
      bottom: 0;
      left: auto;
      right: 0;
  }
  to {
      width: 25%;
      height: 350px;
      bottom: 0%;
      left: 45%;
      right: 45%;
  }
}

@keyframes slide-3-4-left-1600 {
  from {
      width: 4%;
      height: 230px;
      bottom: 0;
      left: auto;
      right: 0;
  }
  to {
      width: 25%;
      height: 350px;
      bottom: 0%;
      left: 45%;
      right: 45%;
  }
}


@-webkit-keyframes slide-3-4-right-1600 {
    from {
        width: 4%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 25%;
        height: 350px;
        bottom: 0%;
        left: 75%;
    }
}

@-moz-keyframes slide-3-4-right-1600 {
    from {
        width: 4%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 25%;
        height: 350px;
        bottom: 0%;
        left: 75%;
    }
}

@-o-keyframes slide-3-4-right-1600 {
    from {
        width: 4%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 25%;
        height: 350px;
        bottom: 0%;
        left: 75%;
    }
}

@keyframes slide-3-4-right-1600 {
    from {
        width: 4%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 25%;
        height: 350px;
        bottom: 0%;
        left: 75%;
    }
}


@-webkit-keyframes slide-3-4-alt-left-1600 {
    from {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
}

@-moz-keyframes slide-3-4-alt-left-1600 {
    from {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
}

@-o-keyframes slide-3-4-alt-left-1600 {
    from {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
}

@keyframes slide-3-4-alt-left-1600 {
    from {
        width: 44%;
        height: 230px;
        bottom: 0;
        left: 0;
    }
    to {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 45%;
    }
}

@-webkit-keyframes slide-3-4-alt-right-1600 {
    from {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
}

@-moz-keyframes slide-3-4-alt-right-1600 {
    from {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
}

@-o-keyframes slide-3-4-alt-right-1600 {
    from {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
}

@keyframes slide-3-4-alt-right-1600 {
    from {
        width: 52%;
        height: 230px;
        bottom: 0;
        left: 48%;
    }
    to {
        width: 25%;
        height: 350px;
        bottom: 10%;
        left: 75%;
    }
}



.internal-tabs {
    background: #1E427F;
}

.internal-tabs .col-md-12 {
    padding: 0;
}

.header-wrapper {
    display: block;
    text-align: left;
}

.paragraph-wrapper {
    text-align: left;
}

.replacement {
    display: none;
}

.button {
    margin-top: 20px;
    display: inline-block;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: #004a8d;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    color: #fff;
    overflow: hidden;
    min-width: 200px;
}

.question-frame .button {
    margin-top: 10px;
}

.schemes-container .button {
    margin-top: 45px;
}

.text-content-slide .button {
    margin-top: 10px;
}

.join-us .intro-slide .button {
    margin-top: 0;
}


/*------------------------------------*\
    MAIN
\*------------------------------------*/


/* global box-sizing */

*,
*:after,
*:before {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* html element 62.5% font-size for REM use */

html {
    font-size: 62.5%;
    overflow-y: auto;
}

body,
.internal quote {
    font: 300 15px/1.5 'Gotham', Helvetica, Arial, sans-serif;
    color: #fff;
    background-size: cover;
    overflow: auto;
}

.home #section3 .text-content {
    line-height: 1.4;
}


/* clear */

.clear:before,
.clear:after {
    content: ' ';
    display: table;
}

.clear:after {
    clear: both;
}

.clear {
    *zoom: 1;
}

img {
    max-width: 100%;
    vertical-align: bottom;
}

a {
    color: #fff;
    text-decoration: none;
}

a:hover {
    color: #fff;
    text-decoration: none;
}

a:focus {
    
    text-decoration: none;
}

a:hover,
a:active {
    
}

input:focus {
    
/* border: 1px solid #04A4CC; */
}

h4 {
    font-size: 20px;
    color: #004a8d;
    font-family: 'GothamRounded-Medium';
    padding-bottom: 10px;
}

@media only screen and (min-width:800px) {
    h4 {
        font-size: 22px;
        color: #004a8d;
        font-family: 'GothamRounded-Medium';
        padding-bottom: 10px;
    }
}


/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

.internal .intro-slide .container {
    margin-top: 40px;
}

.mobile-content .link-row {
    width: 100px;
    padding-left: 0;
    display: inline-block;
}

.mobile-content {
    max-height: 0;
    overflow: hidden;
}

.cambria {
    font-family: 'cambria';
}

.button.chosen+.mobile-content {
    max-height: 500px;
}

.footer-menu li a {
    color: #fff;
    font-family: 'proxima_novabold';
    font-size: 12px;
    display: block;
    padding: 10px;
}

.res-test {
    margin-top: 0;
}

.footer-menu {
    text-align: center;
    padding: 70px 0 20px;
    margin: 0;
}

.footer .container {
    position: relative;
}



#fullpage {
    z-index: 1;
    padding: 80px 0 130px;
    overflow: hidden;
}


/* wrapper */

.wrapper {
    max-width: 1280px;
    width: 95%;
    margin: 0 auto;
    position: relative;
}

/* sidebar */

.sidebar {}


/* footer */

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #004a8d;
    /*height: 135px;*/
    z-index: 99999;
}

.link-arrow {
    position: absolute;
    width: 20px;
    height: 100%;
    right: 150px;
    top: 0;
    background-image: url(/img/mini_arrow.png);
    background-repeat: no-repeat;
    background-position: center;
}
/*EO fix for job alert links not compiled via scss*/
.content-wrapper a {
    color: #004a8d;
}

.terms .content-wrapper a,
.content-wrapper .history-container a {
    color: #004a8d;
}

.gm-style-iw {
    color: #004a8d;
}


/*------------------------------------*\
    PAGES
\*------------------------------------*/


/*------------------------------------*\
    IMAGES
\*------------------------------------*/


/*------------------------------------*\
        TYPOGRAPHY
\*------------------------------------*/

@font-face {
    font-family: 'bebas_neuebold';
    src: url('/fonts/BebasNeue Bold-webfont.eot');
    src: url('/fonts/BebasNeue Bold-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/BebasNeue Bold-webfont.woff2') format('woff2'), url('/fonts/BebasNeue Bold-webfont.woff') format('woff'), url('/fonts/BebasNeue Bold-webfont.ttf') format('truetype'), url('/fonts/BebasNeue Bold-webfont.svg#bebas_neuebold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Cambria';
    src: url('/fonts/Cambria.eot?#iefix') format('embedded-opentype'), /* url('/fonts/Cambria.woff') format('woff'),  */
    url('/fonts/Cambria.ttf') format('truetype'), url('/fonts/Cambria.svg#Cambria') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GothamRounded-Bold';
    src: url('/fonts/GothamRounded-Bold.eot?#iefix') format('embedded-opentype'),
    url('/fonts/GothamRounded-Bold.otf') format('opentype'),
    url('/fonts/GothamRounded-Bold.woff') format('woff'),
    url('/fonts/GothamRounded-Bold.ttf') format('truetype'),
    url('/fonts/GothamRounded-Bold.svg#GothamRounded-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GothamRounded-Book';
    src: url('/fonts/GothamRounded-Book.eot?#iefix') format('embedded-opentype'),
    url('/fonts/GothamRounded-Book.otf') format('opentype'),
    url('/fonts/GothamRounded-Book.woff') format('woff'),
    url('/fonts/GothamRounded-Book.ttf') format('truetype'),
    url('/fonts/GothamRounded-Book.svg#GothamRounded-Book') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GothamRounded-Medium';
    src: url('/fonts/GothamRounded-Medium.eot?#iefix') format('embedded-opentype'),
    url('/fonts/GothamRounded-Medium.otf') format('opentype'),
    url('/fonts/GothamRounded-Medium.woff') format('woff'),
    url('/fonts/GothamRounded-Medium.ttf') format('truetype'),
    url('/fonts/GothamRounded-Medium.svg#GothamRounded-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GothamRounded-Light';
    src: url('/fonts/GothamRounded-Light.eot?#iefix') format('embedded-opentype'),
    url('/fonts/GothamRounded-Light.otf') format('opentype'),
    url('/fonts/GothamRounded-Light.woff') format('woff'),
    url('/fonts/GothamRounded-Light.ttf') format('truetype'),
    url('/fonts/GothamRounded-Light.svg#GothamRounded-Light') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'proxima_novabold';
    src: url('/fonts/ProximaNova-Bold-webfont.eot');
    src: url('/fonts/ProximaNova-Bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('/fonts/ProximaNova-Bold-webfont.woff2') format('woff2'),
    url('/fonts/ProximaNova-Bold-webfont.woff') format('woff'),
    url('/fonts/ProximaNova-Bold-webfont.ttf') format('truetype'),
    url('/fonts/ProximaNova-Bold-webfont.svg#proxima_novabold') format('svg');
    font-weight: normal;
    font-style: normal;
}


/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

@media only screen and (min-width:320px) {}

@media only screen and (min-width:480px) {}

@media only screen and (min-width:768px) {}

@media only screen and (min-width:1024px) {}

@media only screen and (min-width:1140px) {}

@media only screen and (min-width:1280px) {}

@media only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-resolution:144dpi) {}


/*------------------------------------*\
    MISC
\*------------------------------------*/

::selection {
    background: #04A4CC;
    color: #FFF;
    text-shadow: none;
}

::-webkit-selection {
    background: #04A4CC;
    color: #FFF;
    text-shadow: none;
}

::-moz-selection {
    background: #04A4CC;
    color: #FFF;
    text-shadow: none;
}


/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    background: #FFF;
    border: 1px solid #F0F0F0;
    max-width: 96%;
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption .wp-caption-text,
.gallery-caption {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

.sticky {}

.bypostauthor {}

p.intro-para {
    margin-bottom: 50px;
    padding: 0 10px;
}

.tab-content-wrapper img {
    display: none;
    margin: 0 auto;
}

.internal .tab-content-wrapper img {
    display: block;
}

.ceo-portait {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40%;
    display: none;
}


/*------------------------------------*\
    PRINT
\*------------------------------------*/

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    a,
    a:visited {
        text-decoration: underline;
    }
    a[href]:after {
        content: " (" attr(href) ")";
    }
    abbr[title]:after {
        content: " (" attr(title) ")";
    }
    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    thead {
        display: table-header-group;
    }
    tr,
    img {
        page-break-inside: avoid;
    }
    img {
        max-width: 100% !important;
    }
    @page {
        margin: 0.5cm;
    }
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }
    h2,
    h3 {
        page-break-after: avoid;
    }
}


/* Style for our header texts
* --------------------------------------- */

h1 {
    font-family: 'bebas_neuebold';
    color: #fff;
    font-size: 90px;
    margin: 0 0 0 7px;
    line-height: 0.8em;
    font-weight: normal;
}

.operations h1 {
    font-size: 65px;
}

.job-name {
    font-size: 26px;
}

.home h1 {
    font-size: 150px;
}

h2 {
    font-family: 'bebas_neuebold';
    color: #fff;
    font-size: 23px;
    margin: 0 0 0 10px;
    line-height: 1em;
    font-weight: normal;
}

h3 {
    font-family: 'GothamRounded-Medium';
    color: #fff;
    font-size: 24px;
    font-weight: normal;
}

h5 {
    font-size: 18px;
}

quote h5 {
    margin-top: 40px;
}


/* Centered texts in each section
* --------------------------------------- */

.section {
    text-align: center;
    position: relative;
}


/* Backgrounds will cover all the section
* --------------------------------------- */

.home #section0,
.home #section1,
.home #section2,
.home #section3,
.home #section4,
.roles #section0,
.roles #section1 {
    background-size: cover;
}

.blue-bg {
    background: #004a8d;
}

.dark-text {
    color: #4d4d4d;
}

.white-text {
    color: #fff;
}

quote.dark-blue {
    color: #004A8D;
    margin-top: 60px;
    text-align: left;
}

.internal .people-portait {
    display: none;
    position: absolute;
    bottom: -31px;
    left: -30%;
    width: 100%;
    max-width: 320px;
}

.internal .people-portait img {
    display: block;
}


/* Defining each section background and styles
* --------------------------------------- */

.social-footer {
    position: absolute;
    right: 0;
    top: 10px;
    width: 100%;
    text-align: center;
}

.social-footer ul {
    padding: 0;
    margin: 0;
}

.footer li {
    list-style: none;
    display: inline-block;
}

.home #section0 {
    padding: 30px 10px;
}

.home #section2 {
    display: none;
}

.home #section3 {
    background: #012a47;
}

.home #section1 .text-wrapper {
    padding: 10px;
}

.roles #section0 {
    height: 100%;
    width: 100%;
}

#fp-nav {
    display: none;
}

section {
    background-size: cover;
}

.roles .intro-slide {
    overflow: hidden;
}

.why-whitbread .intro-slide {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.content-wrapper {
    position: absolute;
    top: 96px;
    width: 100%;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    padding-bottom: 135px;
}

.roles .locations-container {
    padding: 50px 0;
}

.other-header-wrapper {
    margin: 5% 3%;
}

.locations-container .border-wrapper {
    background: rgba(0, 0, 0, .75);
}

.support-centre-container .border-wrapper {
    background: rgba(0, 0, 0, .25);
}

.support-centre-container .support-icon-container {
    display: table;
    width: 100%;
    height: 100%;
}

.blockAnimation {
    top: 0 !important;
}


.support-centre-container .support-icon-wrapper {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.roles .customer-hearbeat-container {
    padding: 100px 0;
}

.roles .brands-container {
}

.brands-container .border-wrapper {
    background: rgba(0, 0, 0, .8);
}

.roles .support-centre-container {
    padding: 100px 0;
}

.support-centre-container .container {
    position: relative;
}

.schemes-container .container {
    padding: 70px 0 0;
}

.schemes-container .container:first-child+.container {
    padding-bottom: 70px;
    padding-top: 0;
}

.round-icon {
    margin: 0 auto 30px;
    position: relative;
    width: 80px;
    height: 80px;
    display: block;
}

.round-icon.big {
    width: 70px;
    height: 70px;
}

.support-icon-wrapper .round-icon,
.support-icon-wrapper h4 {
    display: none;
}

.round-icon.medium {
    width: 100px;
    height: 100px;
}

.text-content a img,
.logos-wrapper a img,
.customer-hearbeat-container .col-md-10 .col-md-2 img {
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.text-content a:hover img,
.logos-wrapper a:hover img,
.customer-hearbeat-container .col-md-10 .col-md-2 img:hover {
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.customer-hearbeat-container .round-icon {
    margin: 0 auto 20px;
}

.customer-hearbeat-container .col-md-12 img {
    margin: 50px 0;
    max-width: 100%;
}

.customer-hearbeat-container .button {
    margin: 80px 0 10px;
}

.support-centre-container .container:first-child {
    margin-bottom: 70px;
}

.support-centre-container .container img {
    width: 100%;
}

.video-position {
    position: absolute;
    width: 90%;
    height: 90%;
    top: 0;
    left: 0;
    margin: auto;
    right: 0;
    bottom: 0;
    padding: 0;
    color: #fff;
    background: transparent;
}

.play-button {
    width: 75px;
    height: 75px;
    background: url(/img/play_button.png) no-repeat;
    border-radius: 50%;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.about-us .intro-slide {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.about-us .about-container {
    padding: 100px 0 30px;
}

.about-us .history-container {
    padding: 100px 0;
}

.about-us .pride-container {
    padding: 100px 0;
}

.about-us .employer-logo-wrapper img:first-child+img {
    margin: 0 60px;
}

.about-us .force-container .col-md-6:first-child+.col-md-6 {
    padding: 0;
}

.force-container .border-wrapper,
.growing-container .border-wrapper {
    border: none;
}

.force-container ul {
  margin-top: 0;
}

.force-container ul li:first-child {
  margin-top: 0;
}

.force-container .force-wrapper {
  overflow: auto;
}

.bright-container .force-wrapper{
  padding: 70px 0;
}

.about-us .bright-container .right-box {
  padding: 30px 15px;
}


.about-us .growing-container {
  padding: 100px 0;
}

.about-us .our-people-container {
  padding: 100px 0 200px;
}

.about-us quote {
  text-align: left;
  color: #fff;
  font-size: 15px;
  margin-top: 30px;
}

.about-us .tab-header span {
  padding: 30px 65px 30px 25px;
  display: block;
  text-align: left;
}

@media only screen and (min-width:992px) {
  .bright-container h1{
    font-size: 190px
  }
}

@media only screen and (min-width:1200px) {
  .bright-container h1{
    font-size: 230px
  }
}

.about-us .right-box {
    overflow: hidden;
    padding: 40px 0;
    background-size: cover;
}

.about-us .right-box:first-child {
    background-size: cover;
}

.operations .col-md-5-5 {
    margin: 20px 0;
}

.force-wrapper {
    padding: 70px 15px;
}

/* .force-wrapper ul {
    margin: 50px 0 0;
    padding: 0;
} */

.force-wrapper ul li {
    list-style: none;
    position: relative;
    padding-left: 40px;
    margin: 10px 0;
    min-height: 50px;
}

.force-wrapper ul li:before,
.force-wrapper ul li::before {
    content: '';
    background-image: url(/img/li_marker.png);
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    background-size: 100%;
}

quote {
    display: block;
    padding-left: 30px;
    position: relative;
    color: #004A8D;
    font-size: 17px;
    margin-top: 20px;
}

quote:before,
quote::before {
    content: '';
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 26px;
    background-size: 100%;
}

.about-container quote {
    padding-left: 0;
}

.about-container quote:before,
.about-container quote::before,
.our-people-container quote:before,
.our-people-container quote::before,
.inter-wrapper quote:before,
.inter-wrapper quote::before {
    background-image: none;
    content: '';
    display: none;
}

.about-container quote {
    width: 100%;
}

.corner-portrait {
    display: none;
}

.roles .roles-links-container .col-md-6:first-child {
    background: #034677;
}

.roles .roles-links-container .col-md-6 {
    background: #0f5991;
    padding: 50px 0;
}

.why-whitbread .culture-container {
    padding: 100px 0;
}

.culture-container ul {
    padding: 0;
    margin: 0;
}

.culture-container ul li:before,
.culture-container ul li::before {
    content: '';
    background-image: url(/img/li_marker_ok.png);
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    background-size: 100%;
}

.culture-container ul li {
    list-style: none;
    min-height: 50px;
    padding-left: 40px;
    position: relative;
    margin: 10px 0;
}

.why-whitbread .culture-fit-container {
    background-size: cover;
}

.why-whitbread .growing-container {
    padding: 100px 0;
}

.growing-container img {
    margin-bottom: 20px;
}

.internships-container {
    padding: 100px 0;
    background-size: cover;
}

.white-wrapper {
    width: 100%;
    background: #fff;
    color: #00498F;
    padding: 30px 20px;
    border-radius: 5px;
    overflow: hidden;
    text-align: center;
    margin: 20px 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.inter-wrapper {
    width: 100%;
    color: #fff;
    padding: 30px 20px;
    border-radius: 5px;
    overflow: hidden;
    text-align: center;
    margin: 20px 0;
}

.inter-wrapper.no-pad {
    padding: 0 20px 30px;
    margin-top: 0;
}

.internal-tabs p {
    margin: 20px 0;
}

.internships-container .border-wrapper {
    background: rgba(0, 0, 0, .75);
}

.role-box-container {
    padding: 100px 0;
}

.what-it-takes-container,
.management-and-team-roles {
    padding: 100px 0;
}

.management-and-team-roles .tab-content {
    /* max-height: 1100px; */
}

.what-it-takes-container .container:first-child,
.management-and-team-roles .container:first-child {
    margin-bottom: 50px;
}

.open-tab {
    width: 100%;
    display: table;
    position: relative;
    margin: 10px 0;
}

.internal .intro-container {
    color: #00498F;
    font-size: 18px;
    padding: 100px 0;
}

.internal-tabs .open-tab {
    border-top: 1px solid #00498F;
    display: inline-block;
}

.internal-tabs .open-tab:first-child {
    border-top: none;
    margin-top: 0;
}

.open-tab .tab-header {
  cursor: pointer;
}

.internal-tabs .tab-header span {
    font-size: 16px;
    padding: 30px 28px 20px;
}

.internal-tabs .open-tab .plus-container {
    top: 25px;
}

.tab-header {
    width: 100%;
    min-height: 80px;
    position: relative;
}

.internal .tab-header span {
    position: absolute;
    display: inline-block;
    left: 0;
    margin-left: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.faq-container .tab-header,
.join-faq-container .tab-header {
    border-top: 1px solid #000;
}

.faq-container .tab-header span {
    padding: 30px 0;
}

.faq-container .open-tab:first-child .tab-header,
.join-faq-container .open-tab:first-child .tab-header {
    border-top: none;
}

.tab-header span {
    padding: 30px 25px;
    display: block;
}

.faq-container .tab-content-wrapper {
    padding: 20px 0 30px;
}

.tab-content {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

details .tab-content {
	max-height: 0;
	overflow: visible;
}

.active > .tab-content {
    max-height: 10000px;
}

.internal .active .tab-content {
    max-height: 10000px;
}

.join-us .active .tab-content {
    max-height: 2000px;
}

.role-box-container .border-wrapper {
    background: rgba(0, 0, 0, .25);
}

.tab-content-wrapper {
    width: 100%;
    padding: 20px 28px 30px;
    overflow: hidden;
}

.your-app {
    width: 200px;
}

.roles-brand-container .border-wrapper {
    background: rgba(0, 0, 0, .8);
}

.apprenticeships-container {
    padding: 100px 0;
}

.why-whitbread .our-people-container {
    padding: 100px 0;
    position: relative;
}

.faq-container {
    padding: 100px 0;
}

.our-people-container .people-portait {
    display: none;
}

.join-us .intro-border-wrapper {
    width: 90%;
    margin: 0 auto 20px;
}

.join-us .intro-border-wrapper .border-wrapper {
    padding: 20px;
    text-align: left;
}

.intro-border-wrapper {
    position: relative;
    width: 90%;
    margin: 3% auto;
}

.intro-border-wrapper {
    background: rgba(0, 0, 0, 0.7);
}


.our-offer-container {
    padding: 100px 0;
}

.columns {
    padding: 20px 0 0;
}

.why-whitbread quote {
    text-align: left;
    color: #fff;
    font-size: 15px;
    margin-top: 30px;
}

.early-careers .intro-slide {
    width: 100%;
}

.content-wrapper section {
    overflow: hidden;
}

.internships-container .col-md-6 {
    margin: 20px auto;
}

.operations .intro-slide {
    width: 100%;
}

.operations .roles-brand-container {
    padding: 100px 0;
}

.join-us .intro-slide {
    width: 100%;
}

.internal .intro-slide {
    width: 100%;
}

.tab-content-wrapper .col-md-6:first-child {
    padding-left: 0;
}

.join-faq-container {
    padding: 100px 0;
}

.ats-container {
    padding: 100px 0;
}

.border-wrapper {
    text-align: center;
    border: 5px solid #fff;
    padding: 20px;
    line-height: 1.5;
    overflow: hidden;
}

.schemes-container .border-wrapper {
    border: none;
}


/* declaring styles for text wrappers */

.active .text-wrapper {
    opacity: 1;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-transition-delay: 0.65s;
    -moz-transition-delay: 0.65s;
    -ms-transition-delay: 0.65s;
    -o-transition-delay: 0.65s;
    transition-delay: 0.65s;
}

.onload .text-wrapper {
    opacity: 1;
}

#section3 .text-content {
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 15px 20px;
    min-height: 450px;
}

#section11 .text-content {
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 15px 20px;
    min-height: 450px;
}

#section2 .text-content {
    width: 44%;
    height: 300px;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .7);
}

#section2 .text-content:first-child+.text-content {
    left: 0;
    width: 100%;
    height: 180px;
}

#section1 .text-content {
    width: 100%;
    min-height: 290px;
    background: rgba(0, 0, 0, .7);
    border: 5px solid #fff;
    margin: 20px auto;
}

#section1 .text-content:first-child+.text-content {
    left: 51%;
}

section {
    position: relative;
    z-index: 1;
}

.home section {
    position: absolute;
}

.animated-class {
    position: fixed;
    /* padding:96px 3% 5.7%; */
    padding: 125px 3% 5.7%;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.corner {
    display: none;
}


/* Slide 1 -> Slide 2 animations */

.animated-class.slide12 {
    -webkit-animation: animation-transit 0.75s 1;
    -moz-animation: animation-transit 0.75s 1;
    -o-animation: animation-transit 0.75s 1;
    animation: animation-transit 0.75s 1;
    z-index: 999;
}

.animated-class.slide12 .text-wrapper {
    -webkit-animation: visible-text 0.8s 1;
    -moz-animation: visible-text 0.8s 1;
    -o-animation: visible-text 0.8s 1;
    animation: visible-text 0.8s 1;
}

.animated-class.slide12 .text-content {
    -webkit-animation: slide-1-2 0.8s 1 forwards;
    -moz-animation: slide-1-2 0.8s 1 forwards;
    -o-animation: slide-1-2 0.8s 1 forwards;
    animation: slide-1-2 0.8s 1 forwards;
}

@media only screen and (min-width:1024px) {
    .animated-class.slide12 .text-content {
        -webkit-animation: slide-1-2-1024 0.8s 1 forwards;
        -moz-animation: slide-1-2-1024 0.8s 1 forwards;
        -o-animation: slide-1-2-1024 0.8s 1 forwards;
        animation: slide-1-2-1024 0.8s 1 forwards;
    }
}


/* Slide 2 -> Slide 1 animations */

.animated-class.slide21 {
    -webkit-animation: animation-transit 0.75s 1;
    -moz-animation: animation-transit 0.75s 1;
    -o-animation: animation-transit 0.75s 1;
    animation: animation-transit 0.75s 1;
    z-index: 999;
}

.animated-class.slide21 .text-wrapper {
    -webkit-animation: visible-text 0.8s 1;
    -moz-animation: visible-text 0.8s 1;
    -o-animation: visible-text 0.8s 1;
    animation: visible-text 0.8s 1;
}

.animated-class.slide21 .text-content {
    -webkit-animation: slide-2-1 0.8s 1;
    -moz-animation: slide-2-1 0.8s 1;
    -o-animation: slide-2-1 0.8s 1;
    animation: slide-2-1 0.8s 1;
}

@media only screen and (min-width:1024px) {
    .animated-class.slide21 .text-content {
        -webkit-animation: slide-2-1-1024 0.8s 1;
        -moz-animation: slide-2-1-1024 0.8s 1;
        -o-animation: slide-2-1-1024 0.8s 1;
        animation: slide-2-1-1024 0.8s 1;
    }
}


/* Slide 2 -> Slide 3 animations */

.animated-class.slide23 {
    -webkit-animation: animation-transit 0.75s 1;
    -moz-animation: animation-transit 0.75s 1;
    -o-animation: animation-transit 0.75s 1;
    animation: animation-transit 0.75s 1;
    z-index: 999;
}

.animated-class.slide23 .text-wrapper {
    -webkit-animation: visible-text 0.8s 1;
    -moz-animation: visible-text 0.8s 1;
    -o-animation: visible-text 0.8s 1;
    animation: visible-text 0.8s 1;
}


/* left box */

.animated-class.slide23 .text-content:first-child {
    -webkit-animation: slide-2-3-left 0.8s 1;
    -moz-animation: slide-2-3-left 0.8s 1;
    -o-animation: slide-2-3-left 0.8s 1;
    animation: slide-2-3-left 0.8s 1;
}

@media only screen and (min-width:960px) {
    .animated-class.slide23 .text-content:first-child {
        -webkit-animation: slide-2-3-left-960 0.8s 1;
        -moz-animation: slide-2-3-left-960 0.8s 1;
        -o-animation: slide-2-3-left-960 0.8s 1;
        animation: slide-2-3-left-960 0.8s 1;
    }
}

@media only screen and (min-width:1024px) {
    .animated-class.slide23 .text-content:first-child {
        -webkit-animation: slide-2-3-left-1024 0.8s 1;
        -moz-animation: slide-2-3-left-1024 0.8s 1;
        -o-animation: slide-2-3-left-1024 0.8s 1;
        animation: slide-2-3-left-1024 0.8s 1;
    }
}

.animated-class.slide23 .text-content:first-child+.text-content {
    -webkit-animation: slide-2-3-right 0.8s 1;
    -moz-animation: slide-2-3-right 0.8s 1;
    -o-animation: slide-2-3-right 0.8s 1;
    animation: slide-2-3-right 0.8s 1;
}


/* right box */

@media only screen and (min-width:960px) {
    .animated-class.slide23 .text-content:first-child+.text-content {
        -webkit-animation: slide-2-3-right-960 0.8s 1;
        -moz-animation: slide-2-3-right-960 0.8s 1;
        -o-animation: slide-2-3-right-960 0.8s 1;
        animation: slide-2-3-right-960 0.8s 1;
    }
}

@media only screen and (min-width:1024px) {
    .animated-class.slide23 .text-content:first-child+.text-content {
        -webkit-animation: slide-2-3-right-1024 0.8s 1;
        -moz-animation: slide-2-3-right-1024 0.8s 1;
        -o-animation: slide-2-3-right-1024 0.8s 1;
        animation: slide-2-3-right-1024 0.8s 1;
    }
}


/* Slide 3 -> Slide 2 animations */

.animated-class.slide32 {
    -webkit-animation: animation-transit 0.75s 1;
    -moz-animation: animation-transit 0.75s 1;
    -o-animation: animation-transit 0.75s 1;
    animation: animation-transit 0.75s 1;
    z-index: 999;
}

.animated-class.slide32 .text-wrapper {
    -webkit-animation: visible-text 0.8s 1;
    -moz-animation: visible-text 0.8s 1;
    -o-animation: visible-text 0.8s 1;
    animation: visible-text 0.8s 1;
}


/* left box */

.animated-class.slide32 .text-content:first-child {
    -webkit-animation: slide-3-2-left 0.8s 1;
    -moz-animation: slide-3-2-left 0.8s 1;
    -o-animation: slide-3-2-left 0.8s 1;
    animation: slide-3-2-left 0.8s 1;
}

@media only screen and (min-width:960px) {
    .animated-class.slide32 .text-content:first-child {
        -webkit-animation: slide-3-2-left-960 0.8s 1;
        -moz-animation: slide-3-2-left-960 0.8s 1;
        -o-animation: slide-3-2-left-960 0.8s 1;
        animation: slide-3-2-left-960 0.8s 1;
    }
}

@media only screen and (min-width:1024px) {
    .animated-class.slide32 .text-content:first-child {
        -webkit-animation: slide-3-2-left-1024 0.8s 1;
        -moz-animation: slide-3-2-left-1024 0.8s 1;
        -o-animation: slide-3-2-left-1024 0.8s 1;
        animation: slide-3-2-left-1024 0.8s 1;
    }
}


/* right box */

.animated-class.slide32 .text-content:first-child+.text-content {
    -webkit-animation: slide-3-2-right 0.8s 1;
    -moz-animation: slide-3-2-right 0.8s 1;
    -o-animation: slide-3-2-right 0.8s 1;
    animation: slide-3-2-right 0.8s 1;
}

@media only screen and (min-width:960px) {
    .animated-class.slide32 .text-content:first-child+.text-content {
        -webkit-animation: slide-3-2-right-960 0.8s 1;
        -moz-animation: slide-3-2-right-960 0.8s 1;
        -o-animation: slide-3-2-right-960 0.8s 1;
        animation: slide-3-2-right-960 0.8s 1;
    }
}

@media only screen and (min-width:1024px) {
    .animated-class.slide32 .text-content:first-child+.text-content {
        -webkit-animation: slide-3-2-right-1024 0.8s 1;
        -moz-animation: slide-3-2-right-1024 0.8s 1;
        -o-animation: slide-3-2-right-1024 0.8s 1;
        animation: slide-3-2-right-1024 0.8s 1;
    }
}


/* Slide 1 -> Slide 3 animations */

.animated-class.slide13 {
    -webkit-animation: animation-transit 0.75s 1;
    -moz-animation: animation-transit 0.75s 1;
    -o-animation: animation-transit 0.75s 1;
    animation: animation-transit 0.75s 1;
    z-index: 999;
}

.animated-class.slide13 .text-wrapper {
    -webkit-animation: visible-text 0.8s 1;
    -moz-animation: visible-text 0.8s 1;
    -o-animation: visible-text 0.8s 1;
    animation: visible-text 0.8s 1;
}


/* left box */

.animated-class.slide13 .text-content:first-child {
    -webkit-animation: slide-1-3-left 0.8s 1;
    -moz-animation: slide-1-3-left 0.8s 1;
    -o-animation: slide-1-3-left 0.8s 1;
    animation: slide-1-3-left 0.8s 1;
}

@media only screen and (min-width:960px) {
    .animated-class.slide13 .text-content:first-child {
        -webkit-animation: slide-1-3-left-960 0.8s 1;
        -moz-animation: slide-1-3-left-960 0.8s 1;
        -o-animation: slide-1-3-left-960 0.8s 1;
        animation: slide-1-3-left-960 0.8s 1;
    }
}

@media only screen and (min-width:1024px) {
    .animated-class.slide13 .text-content:first-child {
        -webkit-animation: slide-1-3-left-1024 0.8s 1;
        -moz-animation: slide-1-3-left-1024 0.8s 1;
        -o-animation: slide-1-3-left-1024 0.8s 1;
        animation: slide-1-3-left-1024 0.8s 1;
    }
}


/* right box */

.animated-class.slide13 .text-content:first-child+.text-content {
    -webkit-animation: slide-1-3-right 0.8s 1;
    -moz-animation: slide-1-3-right 0.8s 1;
    -o-animation: slide-1-3-right 0.8s 1;
    animation: slide-1-3-right 0.8s 1;
}

@media only screen and (min-width:960px) {
    .animated-class.slide13 .text-content:first-child+.text-content {
        -webkit-animation: slide-1-3-right-960 0.8s 1;
        -moz-animation: slide-1-3-right-960 0.8s 1;
        -o-animation: slide-1-3-right-960 0.8s 1;
        animation: slide-1-3-right-960 0.8s 1;
    }
}

@media only screen and (min-width:1024px) {
    .animated-class.slide13 .text-content:first-child+.text-content {
        -webkit-animation: slide-1-3-right-1024 0.8s 1;
        -moz-animation: slide-1-3-right-1024 0.8s 1;
        -o-animation: slide-1-3-right-1024 0.8s 1;
        animation: slide-1-3-right-1024 0.8s 1;
    }
}


/* Slide 3 -> Slide 1 animations */

.animated-class.slide31 {
    -webkit-animation: animation-transit 0.75s 1;
    -moz-animation: animation-transit 0.75s 1;
    -o-animation: animation-transit 0.75s 1;
    animation: animation-transit 0.75s 1;
    z-index: 999;
}

.animated-class.slide31 .text-wrapper {
    -webkit-animation: visible-text 0.8s 1;
    -moz-animation: visible-text 0.8s 1;
    -o-animation: visible-text 0.8s 1;
    animation: visible-text 0.8s 1;
}


/* left box */

.animated-class.slide31 .text-content:first-child {
    -webkit-animation: slide-3-1-left 0.8s 1 ease-in-out;
    -moz-animation: slide-3-1-left 0.8s 1 ease-in-out;
    -o-animation: slide-3-1-left 0.8s 1 ease-in-out;
    animation: slide-3-1-left 0.8s 1 ease-in-out;
}

@media only screen and (min-width:960px) {
    .animated-class.slide31 .text-content:first-child {
        -webkit-animation: slide-3-1-left-960 0.8s 1 ease-in-out;
        -moz-animation: slide-3-1-left-960 0.8s 1 ease-in-out;
        -o-animation: slide-3-1-left-960 0.8s 1 ease-in-out;
        animation: slide-3-1-left-960 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1280px) {
    .animated-class.slide31 .text-content:first-child {
        -webkit-animation: slide-3-1-left-1280 0.8s 1 ease-in-out;
        -moz-animation: slide-3-1-left-1280 0.8s 1 ease-in-out;
        -o-animation: slide-3-1-left-1280 0.8s 1 ease-in-out;
        animation: slide-3-1-left-1280 0.8s 1 ease-in-out;
    }
}


/* right box */

.animated-class.slide31 .text-content:first-child+.text-content {
    -webkit-animation: slide-3-1-right 0.8s 1 ease-in-out;
    -moz-animation: slide-3-1-right 0.8s 1 ease-in-out;
    -o-animation: slide-3-1-right 0.8s 1 ease-in-out;
    animation: slide-3-1-right 0.8s 1 ease-in-out;
}

@media only screen and (min-width:960px) {
    .animated-class.slide31 .text-content:first-child+.text-content {
        -webkit-animation: slide-3-1-right-960 0.8s 1 ease-in-out;
        -moz-animation: slide-3-1-right-960 0.8s 1 ease-in-out;
        -o-animation: slide-3-1-right-960 0.8s 1 ease-in-out;
        animation: slide-3-1-right-960 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1280px) {
    .animated-class.slide31 .text-content:first-child+.text-content {
        -webkit-animation: slide-3-1-right-1280 0.8s 1 ease-in-out;
        -moz-animation: slide-3-1-right-1280 0.8s 1 ease-in-out;
        -o-animation: slide-3-1-right-1280 0.8s 1 ease-in-out;
        animation: slide-3-1-right-1280 0.8s 1 ease-in-out;
    }
}


/* Slide 3 -> Slide 4 animations */

.animated-class.slide34 {
    -webkit-animation: animation-transit 0.75s 1;
    -moz-animation: animation-transit 0.75s 1;
    -o-animation: animation-transit 0.75s 1;
    animation: animation-transit 0.75s 1;
    z-index: 999;
}

.animated-class.slide34 .text-wrapper {
    -webkit-animation: visible-text 0.8s 1;
    -moz-animation: visible-text 0.8s 1;
    -o-animation: visible-text 0.8s 1;
    animation: visible-text 0.8s 1;
}


/* left box */

.animated-class.slide34 .text-content:first-child {
    -webkit-animation: slide-3-4-left 0.8s 1 ease-in-out;
    -moz-animation: slide-3-4-left 0.8s 1 ease-in-out;
    -o-animation: slide-3-4-left 0.8s 1 ease-in-out;
    animation: slide-3-4-left 0.8s 1 ease-in-out;
}

@media only screen and (min-width:960px) {
    .animated-class.slide34 .text-content:first-child {
        -webkit-animation: slide-3-4-left-960 0.8s 1 ease-in-out;
        -moz-animation: slide-3-4-left-960 0.8s 1 ease-in-out;
        -o-animation: slide-3-4-left-960 0.8s 1 ease-in-out;
        animation: slide-3-4-left-960 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1024px) {
    .animated-class.slide34 .text-content:first-child {
        -webkit-animation: slide-3-4-left-1024 0.8s 1 ease-in-out;
        -moz-animation: slide-3-4-left-1024 0.8s 1 ease-in-out;
        -o-animation: slide-3-4-left-1024 0.8s 1 ease-in-out;
        animation: slide-3-4-left-1024 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1280px) {
    .animated-class.slide34 .text-content:first-child {
        -webkit-animation: slide-3-4-left-1280 0.8s 1 ease-in-out;
        -moz-animation: slide-3-4-left-1280 0.8s 1 ease-in-out;
        -o-animation: slide-3-4-left-1280 0.8s 1 ease-in-out;
        animation: slide-3-4-left-1280 0.8s 1 ease-in-out;
    }
}

/* @media only screen and (min-width:1366px) {
    .animated-class.slide34 .text-content:first-child {
        -webkit-animation: slide-3-4-left-1366 0.8s 1 ease-in-out;
        -moz-animation: slide-3-4-left-1366 0.8s 1 ease-in-out;
        -o-animation: slide-3-4-left-1366 0.8s 1 ease-in-out;
        animation: slide-3-4-left-1366 0.8s 1 ease-in-out;
    }
} */

@media only screen and (min-width:1600px) {
    .animated-class.slide34 .text-content:first-child {
        -webkit-animation: slide-3-4-left-1600 0.8s 1 ease-in-out;
        -moz-animation: slide-3-4-left-1600 0.8s 1 ease-in-out;
        -o-animation: slide-3-4-left-1600 0.8s 1 ease-in-out;
        animation: slide-3-4-left-1600 0.8s 1 ease-in-out;
    }
}


/* right box */

.animated-class.slide34 .text-content:first-child+.text-content {
    -webkit-animation: slide-3-4-right 0.8s 1 ease-in-out;
    -moz-animation: slide-3-4-right 0.8s 1 ease-in-out;
    -o-animation: slide-3-4-right 0.8s 1 ease-in-out;
    animation: slide-3-4-right 0.8s 1 ease-in-out;
}

@media only screen and (min-width:960px) {
    .animated-class.slide34 .text-content:first-child+.text-content {
        -webkit-animation: slide-3-4-right-960 0.8s 1 ease-in-out;
        -moz-animation: slide-3-4-right-960 0.8s 1 ease-in-out;
        -o-animation: slide-3-4-right-960 0.8s 1 ease-in-out;
        animation: slide-3-4-right-960 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1024px) {
    .animated-class.slide34 .text-content:first-child+.text-content {
        -webkit-animation: slide-3-4-right-1024 0.8s 1 ease-in-out;
        -moz-animation: slide-3-4-right-1024 0.8s 1 ease-in-out;
        -o-animation: slide-3-4-right-1024 0.8s 1 ease-in-out;
        animation: slide-3-4-right-1024 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1280px) {
    .animated-class.slide34 .text-content:first-child+.text-content {
        -webkit-animation: slide-3-4-right-1280 0.8s 1 ease-in-out;
        -moz-animation: slide-3-4-right-1280 0.8s 1 ease-in-out;
        -o-animation: slide-3-4-right-1280 0.8s 1 ease-in-out;
        animation: slide-3-4-right-1280 0.8s 1 ease-in-out;
    }
}

/* @media only screen and (min-width:1366px) {
    .animated-class.slide34 .text-content:first-child+.text-content {
        -webkit-animation: slide-3-4-right-1366 0.8s 1 ease-in-out;
        -moz-animation: slide-3-4-right-1366 0.8s 1 ease-in-out;
        -o-animation: slide-3-4-right-1366 0.8s 1 ease-in-out;
        animation: slide-3-4-right-1366 0.8s 1 ease-in-out;
    }
} */

@media only screen and (min-width:1600px) {
    .animated-class.slide34 .text-content:first-child+.text-content {
        -webkit-animation: slide-3-4-right-1600 0.8s 1 ease-in-out;
        -moz-animation: slide-3-4-right-1600 0.8s 1 ease-in-out;
        -o-animation: slide-3-4-right-1600 0.8s 1 ease-in-out;
        animation: slide-3-4-right-1600 0.8s 1 ease-in-out;
    }
}




/* Slide 3 -> Slide 4 animations */

.animated-class.slide34-alt {
    -webkit-animation: animation-transit 0.75s 1;
    -moz-animation: animation-transit 0.75s 1;
    -o-animation: animation-transit 0.75s 1;
    animation: animation-transit 0.75s 1;
    z-index: 999;
}

.animated-class.slide34-alt .text-wrapper {
    -webkit-animation: visible-text 0.8s 1;
    -moz-animation: visible-text 0.8s 1;
    -o-animation: visible-text 0.8s 1;
    animation: visible-text 0.8s 1;
}


/* left box */

.animated-class.slide34-alt .text-content:first-child {
    -webkit-animation: slide-3-4-alt-left 0.8s 1 ease-in-out;
    -moz-animation: slide-3-4-alt-left 0.8s 1 ease-in-out;
    -o-animation: slide-3-4-alt-left 0.8s 1 ease-in-out;
    animation: slide-3-4-alt-left 0.8s 1 ease-in-out;
}

@media only screen and (min-width:960px) {
    .animated-class.slide34-alt .text-content:first-child {
        -webkit-animation: slide-3-4-alt-left-960 0.8s 1 ease-in-out;
        -moz-animation: slide-3-4-alt-left-960 0.8s 1 ease-in-out;
        -o-animation: slide-3-4-alt-left-960 0.8s 1 ease-in-out;
        animation: slide-3-4-alt-left-960 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1024px) {
    .animated-class.slide34-alt .text-content:first-child {
        -webkit-animation: slide-3-4-alt-left-1024 0.8s 1 ease-in-out;
        -moz-animation: slide-3-4-alt-left-1024 0.8s 1 ease-in-out;
        -o-animation: slide-3-4-alt-left-1024 0.8s 1 ease-in-out;
        animation: slide-3-4-alt-left-1024 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1280px) {
    .animated-class.slide34-alt .text-content:first-child {
        -webkit-animation: slide-3-4-alt-left-1280 0.8s 1 ease-in-out;
        -moz-animation: slide-3-4-alt-left-1280 0.8s 1 ease-in-out;
        -o-animation: slide-3-4-alt-left-1280 0.8s 1 ease-in-out;
        animation: slide-3-4-alt-left-1280 0.8s 1 ease-in-out;
    }
}
/*
@media only screen and (min-width:1366px) {
    .animated-class.slide34-alt .text-content:first-child {
        -webkit-animation: slide-3-4-alt-left-1366 0.8s 1 ease-in-out;
        -moz-animation: slide-3-4-alt-left-1366 0.8s 1 ease-in-out;
        -o-animation: slide-3-4-alt-left-1366 0.8s 1 ease-in-out;
        animation: slide-3-4-alt-left-1366 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1600px) {
    .animated-class.slide34-alt .text-content:first-child {
        -webkit-animation: slide-3-4-alt-left-1600 0.8s 1 ease-in-out;
        -moz-animation: slide-3-4-alt-left-1600 0.8s 1 ease-in-out;
        -o-animation: slide-3-4-alt-left-1600 0.8s 1 ease-in-out;
        animation: slide-3-4-alt-left-1600 0.8s 1 ease-in-out;
    }
} */


/* right box */

.animated-class.slide34-alt .text-content:first-child+.text-content {
    -webkit-animation: slide-3-4-alt-right 0.8s 1 ease-in-out;
    -moz-animation: slide-3-4-alt-right 0.8s 1 ease-in-out;
    -o-animation: slide-3-4-alt-right 0.8s 1 ease-in-out;
    animation: slide-3-4-alt-right 0.8s 1 ease-in-out;
}

@media only screen and (min-width:960px) {
    .animated-class.slide34-alt .text-content:first-child+.text-content {
        -webkit-animation: slide-3-4-alt-right-960 0.8s 1 ease-in-out;
        -moz-animation: slide-3-4-alt-right-960 0.8s 1 ease-in-out;
        -o-animation: slide-3-4-alt-right-960 0.8s 1 ease-in-out;
        animation: slide-3-4-alt-right-960 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1024px) {
    .animated-class.slide34-alt .text-content:first-child+.text-content {
        -webkit-animation: slide-3-4-alt-right-1024 0.8s 1 ease-in-out;
        -moz-animation: slide-3-4-alt-right-1024 0.8s 1 ease-in-out;
        -o-animation: slide-3-4-alt-right-1024 0.8s 1 ease-in-out;
        animation: slide-3-4-alt-right-1024 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1280px) {
    .animated-class.slide34-alt .text-content:first-child+.text-content {
        -webkit-animation: slide-3-4-alt-right-1280 0.8s 1 ease-in-out;
        -moz-animation: slide-3-4-alt-right-1280 0.8s 1 ease-in-out;
        -o-animation: slide-3-4-alt-right-1280 0.8s 1 ease-in-out;
        animation: slide-3-4-alt-right-1280 0.8s 1 ease-in-out;
    }
}
/*
@media only screen and (min-width:1366px) {
    .animated-class.slide34-alt .text-content:first-child+.text-content {
        -webkit-animation: slide-3-4-alt-right-1366 0.8s 1 ease-in-out;
        -moz-animation: slide-3-4-alt-right-1366 0.8s 1 ease-in-out;
        -o-animation: slide-3-4-alt-right-1366 0.8s 1 ease-in-out;
        animation: slide-3-4-alt-right-1366 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1600px) {
    .animated-class.slide34-alt .text-content:first-child+.text-content {
        -webkit-animation: slide-3-4-alt-right-1600 0.8s 1 ease-in-out;
        -moz-animation: slide-3-4-alt-right-1600 0.8s 1 ease-in-out;
        -o-animation: slide-3-4-alt-right-1600 0.8s 1 ease-in-out;
        animation: slide-3-4-alt-right-1600 0.8s 1 ease-in-out;
    }
} */








/* Slide 4 -> Slide 3 animations */

.animated-class.slide43-alt {
    -webkit-animation: animation-transit 0.75s 1;
    -moz-animation: animation-transit 0.75s 1;
    -o-animation: animation-transit 0.75s 1;
    animation: animation-transit 0.75s 1;
    z-index: 999;
}

.animated-class.slide43-alt .text-wrapper {
    -webkit-animation: visible-text 0.8s 1;
    -moz-animation: visible-text 0.8s 1;
    -o-animation: visible-text 0.8s 1;
    animation: visible-text 0.8s 1;
}


/* left box */

.animated-class.slide43-alt .text-content:first-child {
    -webkit-animation: slide-4-3-alt-left 0.8s 1 ease-in-out;
    -moz-animation: slide-4-3-alt-left 0.8s 1 ease-in-out;
    -o-animation: slide-4-3-alt-left 0.8s 1 ease-in-out;
    animation: slide-4-3-alt-left 0.8s 1 ease-in-out;
}

@media only screen and (min-width:960px) {
    .animated-class.slide43-alt .text-content:first-child {
        -webkit-animation: slide-4-3-alt-left-960 0.8s 1 ease-in-out;
        -moz-animation: slide-4-3-alt-left-960 0.8s 1 ease-in-out;
        -o-animation: slide-4-3-alt-left-960 0.8s 1 ease-in-out;
        animation: slide-4-3-alt-left-960 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1024px) {
    .animated-class.slide43-alt .text-content:first-child {
        -webkit-animation: slide-4-3-alt-left-1024 0.8s 1 ease-in-out;
        -moz-animation: slide-4-3-alt-left-1024 0.8s 1 ease-in-out;
        -o-animation: slide-4-3-alt-left-1024 0.8s 1 ease-in-out;
        animation: slide-4-3-alt-left-1024 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1280px) {
    .animated-class.slide43-alt .text-content:first-child {
        -webkit-animation: slide-4-3-alt-left-1280 0.8s 1 ease-in-out;
        -moz-animation: slide-4-3-alt-left-1280 0.8s 1 ease-in-out;
        -o-animation: slide-4-3-alt-left-1280 0.8s 1 ease-in-out;
        animation: slide-4-3-alt-left-1280 0.8s 1 ease-in-out;
    }
}
/*
@media only screen and (min-width:1366px) {
    .animated-class.slide43-alt .text-content:first-child {
        -webkit-animation: slide-4-3-alt-left-1366 0.8s 1 ease-in-out;
        -moz-animation: slide-4-3-alt-left-1366 0.8s 1 ease-in-out;
        -o-animation: slide-4-3-alt-left-1366 0.8s 1 ease-in-out;
        animation: slide-4-3-alt-left-1366 0.8s 1 ease-in-out;
    }
} */


/* right box */

.animated-class.slide43-alt .text-content:first-child+.text-content {
    -webkit-animation: slide-4-3-alt-right 0.8s 1 ease-in-out;
    -moz-animation: slide-4-3-alt-right 0.8s 1 ease-in-out;
    -o-animation: slide-4-3-alt-right 0.8s 1 ease-in-out;
    animation: slide-4-3-alt-right 0.8s 1 ease-in-out;
}

@media only screen and (min-width:960px) {
    .animated-class.slide43-alt .text-content:first-child+.text-content {
        -webkit-animation: slide-4-3-alt-right-960 0.8s 1 ease-in-out;
        -moz-animation: slide-4-3-alt-right-960 0.8s 1 ease-in-out;
        -o-animation: slide-4-3-alt-right-960 0.8s 1 ease-in-out;
        animation: slide-4-3-alt-right-960 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1024px) {
    .animated-class.slide43-alt .text-content:first-child+.text-content {
        -webkit-animation: slide-4-3-alt-right-1024 0.8s 1 ease-in-out;
        -moz-animation: slide-4-3-alt-right-1024 0.8s 1 ease-in-out;
        -o-animation: slide-4-3-alt-right-1024 0.8s 1 ease-in-out;
        animation: slide-4-3-alt-right-1024 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1280px) {
    .animated-class.slide43-alt .text-content:first-child+.text-content {
        -webkit-animation: slide-4-3-alt-right-1280 0.8s 1 ease-in-out;
        -moz-animation: slide-4-3-alt-right-1280 0.8s 1 ease-in-out;
        -o-animation: slide-4-3-alt-right-1280 0.8s 1 ease-in-out;
        animation: slide-4-3-alt-right-1280 0.8s 1 ease-in-out;
    }
}

/* @media only screen and (min-width:1366px) {
    .animated-class.slide43-alt .text-content:first-child+.text-content {
        -webkit-animation: slide-4-3-alt-right-1366 0.8s 1 ease-in-out;
        -moz-animation: slide-4-3-alt-right-1366 0.8s 1 ease-in-out;
        -o-animation: slide-4-3-alt-right-1366 0.8s 1 ease-in-out;
        animation: slide-4-3-alt-right-1366 0.8s 1 ease-in-out;
    }
} */



/* Slide 4 -> Slide 3 animations */

.animated-class.slide43 {
    -webkit-animation: animation-transit 0.75s 1;
    -moz-animation: animation-transit 0.75s 1;
    -o-animation: animation-transit 0.75s 1;
    animation: animation-transit 0.75s 1;
    z-index: 999;
}

.animated-class.slide43 .text-wrapper {
    -webkit-animation: visible-text 0.8s 1;
    -moz-animation: visible-text 0.8s 1;
    -o-animation: visible-text 0.8s 1;
    animation: visible-text 0.8s 1;
}


/* left box */

.animated-class.slide43 .text-content:first-child {
    -webkit-animation: slide-4-3-left 0.8s 1 ease-in-out;
    -moz-animation: slide-4-3-left 0.8s 1 ease-in-out;
    -o-animation: slide-4-3-left 0.8s 1 ease-in-out;
    animation: slide-4-3-left 0.8s 1 ease-in-out;
}

@media only screen and (min-width:960px) {
    .animated-class.slide43 .text-content:first-child {
        -webkit-animation: slide-4-3-left-960 0.8s 1 ease-in-out;
        -moz-animation: slide-4-3-left-960 0.8s 1 ease-in-out;
        -o-animation: slide-4-3-left-960 0.8s 1 ease-in-out;
        animation: slide-4-3-left-960 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1024px) {
    .animated-class.slide43 .text-content:first-child {
        -webkit-animation: slide-4-3-left-1024 0.8s 1 ease-in-out;
        -moz-animation: slide-4-3-left-1024 0.8s 1 ease-in-out;
        -o-animation: slide-4-3-left-1024 0.8s 1 ease-in-out;
        animation: slide-4-3-left-1024 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1280px) {
    .animated-class.slide43 .text-content:first-child {
        -webkit-animation: slide-4-3-left-1280 0.8s 1 ease-in-out;
        -moz-animation: slide-4-3-left-1280 0.8s 1 ease-in-out;
        -o-animation: slide-4-3-left-1280 0.8s 1 ease-in-out;
        animation: slide-4-3-left-1280 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1600px) {
    .animated-class.slide43 .text-content:first-child {
        -webkit-animation: slide-4-3-left-1600 0.8s 1 ease-in-out;
        -moz-animation: slide-4-3-left-1600 0.8s 1 ease-in-out;
        -o-animation: slide-4-3-left-1600 0.8s 1 ease-in-out;
        animation: slide-4-3-left-1600 0.8s 1 ease-in-out;
    }
}


/* right box */

.animated-class.slide43 .text-content:first-child+.text-content {
    -webkit-animation: slide-4-3-right 0.8s 1 ease-in-out;
    -moz-animation: slide-4-3-right 0.8s 1 ease-in-out;
    -o-animation: slide-4-3-right 0.8s 1 ease-in-out;
    animation: slide-4-3-right 0.8s 1 ease-in-out;
}

@media only screen and (min-width:960px) {
    .animated-class.slide43 .text-content:first-child+.text-content {
        -webkit-animation: slide-4-3-right-960 0.8s 1 ease-in-out;
        -moz-animation: slide-4-3-right-960 0.8s 1 ease-in-out;
        -o-animation: slide-4-3-right-960 0.8s 1 ease-in-out;
        animation: slide-4-3-right-960 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1024px) {
    .animated-class.slide43 .text-content:first-child+.text-content {
        -webkit-animation: slide-4-3-right-1024 0.8s 1 ease-in-out;
        -moz-animation: slide-4-3-right-1024 0.8s 1 ease-in-out;
        -o-animation: slide-4-3-right-1024 0.8s 1 ease-in-out;
        animation: slide-4-3-right-1024 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1280px) {
    .animated-class.slide43 .text-content:first-child+.text-content {
        -webkit-animation: slide-4-3-right-1280 0.8s 1 ease-in-out;
        -moz-animation: slide-4-3-right-1280 0.8s 1 ease-in-out;
        -o-animation: slide-4-3-right-1280 0.8s 1 ease-in-out;
        animation: slide-4-3-right-1280 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1600px) {
    .animated-class.slide43 .text-content:first-child+.text-content {
        -webkit-animation: slide-4-3-right-1600 0.8s 1 ease-in-out;
        -moz-animation: slide-4-3-right-1600 0.8s 1 ease-in-out;
        -o-animation: slide-4-3-right-1600 0.8s 1 ease-in-out;
        animation: slide-4-3-right-1600 0.8s 1 ease-in-out;
    }
}


/* Slide 1 -> Slide 4 animations */

.animated-class.slide14 {
    -webkit-animation: animation-transit 0.75s 1;
    -moz-animation: animation-transit 0.75s 1;
    -o-animation: animation-transit 0.75s 1;
    animation: animation-transit 0.75s 1;
    z-index: 999;
}

.animated-class.slide14 .text-wrapper {
    -webkit-animation: visible-text 0.8s 1;
    -moz-animation: visible-text 0.8s 1;
    -o-animation: visible-text 0.8s 1;
    animation: visible-text 0.8s 1;
}


/* left box */

.animated-class.slide14 .text-content:first-child {
    -webkit-animation: slide-1-4-left 0.8s 1 ease-in-out;
    -moz-animation: slide-1-4-left 0.8s 1 ease-in-out;
    -o-animation: slide-1-4-left 0.8s 1 ease-in-out;
    animation: slide-1-4-left 0.8s 1 ease-in-out;
}

@media only screen and (min-width:960px) {
    .animated-class.slide14 .text-content:first-child {
        -webkit-animation: slide-1-4-left-960 0.8s 1 ease-in-out;
        -moz-animation: slide-1-4-left-960 0.8s 1 ease-in-out;
        -o-animation: slide-1-4-left-960 0.8s 1 ease-in-out;
        animation: slide-1-4-left-960 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1024px) {
    .animated-class.slide14 .text-content:first-child {
        -webkit-animation: slide-1-4-left-1024 0.8s 1 ease-in-out;
        -moz-animation: slide-1-4-left-1024 0.8s 1 ease-in-out;
        -o-animation: slide-1-4-left-1024 0.8s 1 ease-in-out;
        animation: slide-1-4-left-1024 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1280px) {
    .animated-class.slide14 .text-content:first-child {
        -webkit-animation: slide-1-4-left-1280 0.8s 1 ease-in-out;
        -moz-animation: slide-1-4-left-1280 0.8s 1 ease-in-out;
        -o-animation: slide-1-4-left-1280 0.8s 1 ease-in-out;
        animation: slide-1-4-left-1280 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1600px) {
    .animated-class.slide14 .text-content:first-child {
        -webkit-animation: slide-1-4-left-1600 0.8s 1 ease-in-out;
        -moz-animation: slide-1-4-left-1600 0.8s 1 ease-in-out;
        -o-animation: slide-1-4-left-1600 0.8s 1 ease-in-out;
        animation: slide-1-4-left-1600 0.8s 1 ease-in-out;
    }
}


/* right box */

.animated-class.slide14 .text-content:first-child+.text-content {
    -webkit-animation: slide-1-4-right 0.8s 1 ease-in-out;
    -moz-animation: slide-1-4-right 0.8s 1 ease-in-out;
    -o-animation: slide-1-4-right 0.8s 1 ease-in-out;
    animation: slide-1-4-right 0.8s 1 ease-in-out;
}

@media only screen and (min-width:960px) {
    .animated-class.slide14 .text-content:first-child+.text-content {
        -webkit-animation: slide-1-4-right-960 0.8s 1 ease-in-out;
        -moz-animation: slide-1-4-right-960 0.8s 1 ease-in-out;
        -o-animation: slide-1-4-right-960 0.8s 1 ease-in-out;
        animation: slide-1-4-right-960 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1024px) {
    .animated-class.slide14 .text-content:first-child+.text-content {
        -webkit-animation: slide-1-4-right-1024 0.8s 1 ease-in-out;
        -moz-animation: slide-1-4-right-1024 0.8s 1 ease-in-out;
        -o-animation: slide-1-4-right-1024 0.8s 1 ease-in-out;
        animation: slide-1-4-right-1024 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1280px) {
    .animated-class.slide14 .text-content:first-child+.text-content {
        -webkit-animation: slide-1-4-right-1280 0.8s 1 ease-in-out;
        -moz-animation: slide-1-4-right-1280 0.8s 1 ease-in-out;
        -o-animation: slide-1-4-right-1280 0.8s 1 ease-in-out;
        animation: slide-1-4-right-1280 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1600px) {
    .animated-class.slide14 .text-content:first-child+.text-content {
        -webkit-animation: slide-1-4-right-1600 0.8s 1 ease-in-out;
        -moz-animation: slide-1-4-right-1600 0.8s 1 ease-in-out;
        -o-animation: slide-1-4-right-1600 0.8s 1 ease-in-out;
        animation: slide-1-4-right-1600 0.8s 1 ease-in-out;
    }
}


/* Slide 4 -> Slide 1 animations */

.animated-class.slide41 {
    -webkit-animation: animation-transit 0.75s 1;
    -moz-animation: animation-transit 0.75s 1;
    -o-animation: animation-transit 0.75s 1;
    animation: animation-transit 0.75s 1;
    z-index: 999;
}

.animated-class.slide41 .text-wrapper {
    -webkit-animation: visible-text 0.8s 1;
    -moz-animation: visible-text 0.8s 1;
    -o-animation: visible-text 0.8s 1;
    animation: visible-text 0.8s 1;
}


/* left box */

.animated-class.slide41 .text-content:first-child {
    -webkit-animation: slide-4-1-left 0.8s 1 ease-in-out;
    -moz-animation: slide-4-1-left 0.8s 1 ease-in-out;
    -o-animation: slide-4-1-left 0.8s 1 ease-in-out;
    animation: slide-4-1-left 0.8s 1 ease-in-out;
}

@media only screen and (min-width:960px) {
    .animated-class.slide41 .text-content:first-child {
        -webkit-animation: slide-4-1-left-960 0.8s 1 ease-in-out;
        -moz-animation: slide-4-1-left-960 0.8s 1 ease-in-out;
        -o-animation: slide-4-1-left-960 0.8s 1 ease-in-out;
        animation: slide-4-1-left-960 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1024px) {
    .animated-class.slide41 .text-content:first-child {
        -webkit-animation: slide-4-1-left-1024 0.8s 1 ease-in-out;
        -moz-animation: slide-4-1-left-1024 0.8s 1 ease-in-out;
        -o-animation: slide-4-1-left-1024 0.8s 1 ease-in-out;
        animation: slide-4-1-left-1024 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1280px) {
    .animated-class.slide41 .text-content:first-child {
        -webkit-animation: slide-4-1-left-1280 0.8s 1 ease-in-out;
        -moz-animation: slide-4-1-left-1280 0.8s 1 ease-in-out;
        -o-animation: slide-4-1-left-1280 0.8s 1 ease-in-out;
        animation: slide-4-1-left-1280 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1600px) {
    .animated-class.slide41 .text-content:first-child {
        -webkit-animation: slide-4-1-left-1600 0.8s 1 ease-in-out;
        -moz-animation: slide-4-1-left-1600 0.8s 1 ease-in-out;
        -o-animation: slide-4-1-left-1600 0.8s 1 ease-in-out;
        animation: slide-4-1-left-1600 0.8s 1 ease-in-out;
    }
}


/* right box */

.animated-class.slide41 .text-content:first-child+.text-content {
    -webkit-animation: slide-4-1-right 0.8s 1 ease-in-out;
    -moz-animation: slide-4-1-right 0.8s 1 ease-in-out;
    -o-animation: slide-4-1-right 0.8s 1 ease-in-out;
    animation: slide-4-1-right 0.8s 1 ease-in-out;
}

@media only screen and (min-width:960px) {
    .animated-class.slide41 .text-content:first-child+.text-content {
        -webkit-animation: slide-4-1-right-960 0.8s 1 ease-in-out;
        -moz-animation: slide-4-1-right-960 0.8s 1 ease-in-out;
        -o-animation: slide-4-1-right-960 0.8s 1 ease-in-out;
        animation: slide-4-1-right-960 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1024px) {
    .animated-class.slide41 .text-content:first-child+.text-content {
        -webkit-animation: slide-4-1-right-1024 0.8s 1 ease-in-out;
        -moz-animation: slide-4-1-right-1024 0.8s 1 ease-in-out;
        -o-animation: slide-4-1-right-1024 0.8s 1 ease-in-out;
        animation: slide-4-1-right-1024 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1280px) {
    .animated-class.slide41 .text-content:first-child+.text-content {
        -webkit-animation: slide-4-1-right-1280 0.8s 1 ease-in-out;
        -moz-animation: slide-4-1-right-1280 0.8s 1 ease-in-out;
        -o-animation: slide-4-1-right-1280 0.8s 1 ease-in-out;
        animation: slide-4-1-right-1280 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1600px) {
    .animated-class.slide41 .text-content:first-child+.text-content {
        -webkit-animation: slide-4-1-right-1600 0.8s 1 ease-in-out;
        -moz-animation: slide-4-1-right-1600 0.8s 1 ease-in-out;
        -o-animation: slide-4-1-right-1600 0.8s 1 ease-in-out;
        animation: slide-4-1-right-1600 0.8s 1 ease-in-out;
    }
}


/* Slide 2 -> Slide 4 animations */

.animated-class.slide24 {
    -webkit-animation: animation-transit 0.75s 1;
    -moz-animation: animation-transit 0.75s 1;
    -o-animation: animation-transit 0.75s 1;
    animation: animation-transit 0.75s 1;
    z-index: 999;
}

.animated-class.slide24 .text-wrapper {
    -webkit-animation: visible-text 0.8s 1;
    -moz-animation: visible-text 0.8s 1;
    -o-animation: visible-text 0.8s 1;
    animation: visible-text 0.8s 1;
}


/* left box */

.animated-class.slide24 .text-content:first-child {
    -webkit-animation: slide-2-4-left 0.8s 1 ease-in-out;
    -moz-animation: slide-2-4-left 0.8s 1 ease-in-out;
    -o-animation: slide-2-4-left 0.8s 1 ease-in-out;
    animation: slide-2-4-left 0.8s 1 ease-in-out;
}

@media only screen and (min-width:960px) {
    .animated-class.slide24 .text-content:first-child {
        -webkit-animation: slide-2-4-left-960 0.8s 1 ease-in-out;
        -moz-animation: slide-2-4-left-960 0.8s 1 ease-in-out;
        -o-animation: slide-2-4-left-960 0.8s 1 ease-in-out;
        animation: slide-2-4-left-960 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1024px) {
    .animated-class.slide24 .text-content:first-child {
        -webkit-animation: slide-2-4-left-1024 0.8s 1 ease-in-out;
        -moz-animation: slide-2-4-left-1024 0.8s 1 ease-in-out;
        -o-animation: slide-2-4-left-1024 0.8s 1 ease-in-out;
        animation: slide-2-4-left-1024 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1280px) {
    .animated-class.slide24 .text-content:first-child {
        -webkit-animation: slide-2-4-left-1280 0.8s 1 ease-in-out;
        -moz-animation: slide-2-4-left-1280 0.8s 1 ease-in-out;
        -o-animation: slide-2-4-left-1280 0.8s 1 ease-in-out;
        animation: slide-2-4-left-1280 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1600px) {
    .animated-class.slide24 .text-content:first-child {
        -webkit-animation: slide-2-4-left-1600 0.8s 1 ease-in-out;
        -moz-animation: slide-2-4-left-1600 0.8s 1 ease-in-out;
        -o-animation: slide-2-4-left-1600 0.8s 1 ease-in-out;
        animation: slide-2-4-left-1600 0.8s 1 ease-in-out;
    }
}


/* right box */

.animated-class.slide24 .text-content:first-child+.text-content {
    -webkit-animation: slide-2-4-right 0.8s 1 ease-in-out;
    -moz-animation: slide-2-4-right 0.8s 1 ease-in-out;
    -o-animation: slide-2-4-right 0.8s 1 ease-in-out;
    animation: slide-2-4-right 0.8s 1 ease-in-out;
}

@media only screen and (min-width:960px) {
    .animated-class.slide24 .text-content:first-child+.text-content {
        -webkit-animation: slide-2-4-right-960 0.8s 1 ease-in-out;
        -moz-animation: slide-2-4-right-960 0.8s 1 ease-in-out;
        -o-animation: slide-2-4-right-960 0.8s 1 ease-in-out;
        animation: slide-2-4-right-960 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1024px) {
    .animated-class.slide24 .text-content:first-child+.text-content {
        -webkit-animation: slide-2-4-right-1024 0.8s 1 ease-in-out;
        -moz-animation: slide-2-4-right-1024 0.8s 1 ease-in-out;
        -o-animation: slide-2-4-right-1024 0.8s 1 ease-in-out;
        animation: slide-2-4-right-1024 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1280px) {
    .animated-class.slide24 .text-content:first-child+.text-content {
        -webkit-animation: slide-2-4-right-1280 0.8s 1 ease-in-out;
        -moz-animation: slide-2-4-right-1280 0.8s 1 ease-in-out;
        -o-animation: slide-2-4-right-1280 0.8s 1 ease-in-out;
        animation: slide-2-4-right-1280 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1600px) {
    .animated-class.slide24 .text-content:first-child+.text-content {
        -webkit-animation: slide-2-4-right-1600 0.8s 1 ease-in-out;
        -moz-animation: slide-2-4-right-1600 0.8s 1 ease-in-out;
        -o-animation: slide-2-4-right-1600 0.8s 1 ease-in-out;
        animation: slide-2-4-right-1600 0.8s 1 ease-in-out;
    }
}


/* Slide 4 -> Slide 2 animations */

.animated-class.slide42 {
    -webkit-animation: animation-transit 0.75s 1;
    -moz-animation: animation-transit 0.75s 1;
    -o-animation: animation-transit 0.75s 1;
    animation: animation-transit 0.75s 1;
    z-index: 999;
}

.animated-class.slide42 .text-wrapper {
    -webkit-animation: visible-text 0.8s 1;
    -moz-animation: visible-text 0.8s 1;
    -o-animation: visible-text 0.8s 1;
    animation: visible-text 0.8s 1;
}


/* left box */

.animated-class.slide42 .text-content:first-child {
    -webkit-animation: slide-4-2-left 0.8s 1 ease-in-out;
    -moz-animation: slide-4-2-left 0.8s 1 ease-in-out;
    -o-animation: slide-4-2-left 0.8s 1 ease-in-out;
    animation: slide-4-2-left 0.8s 1 ease-in-out;
}

@media only screen and (min-width:960px) {
    .animated-class.slide42 .text-content:first-child {
        -webkit-animation: slide-4-2-left-960 0.8s 1 ease-in-out;
        -moz-animation: slide-4-2-left-960 0.8s 1 ease-in-out;
        -o-animation: slide-4-2-left-960 0.8s 1 ease-in-out;
        animation: slide-4-2-left-960 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1024px) {
    .animated-class.slide42 .text-content:first-child {
        -webkit-animation: slide-4-2-left-1024 0.8s 1 ease-in-out;
        -moz-animation: slide-4-2-left-1024 0.8s 1 ease-in-out;
        -o-animation: slide-4-2-left-1024 0.8s 1 ease-in-out;
        animation: slide-4-2-left-1024 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1280px) {
    .animated-class.slide42 .text-content:first-child {
        -webkit-animation: slide-4-2-left-1280 0.8s 1 ease-in-out;
        -moz-animation: slide-4-2-left-1280 0.8s 1 ease-in-out;
        -o-animation: slide-4-2-left-1280 0.8s 1 ease-in-out;
        animation: slide-4-2-left-1280 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1600px) {
    .animated-class.slide42 .text-content:first-child {
        -webkit-animation: slide-4-2-left-1600 0.8s 1 ease-in-out;
        -moz-animation: slide-4-2-left-1600 0.8s 1 ease-in-out;
        -o-animation: slide-4-2-left-1600 0.8s 1 ease-in-out;
        animation: slide-4-2-left-1600 0.8s 1 ease-in-out;
    }
}


/* right box */

.animated-class.slide42 .text-content:first-child+.text-content {
    -webkit-animation: slide-4-2-right 0.8s 1 ease-in-out;
    -moz-animation: slide-4-2-right 0.8s 1 ease-in-out;
    -o-animation: slide-4-2-right 0.8s 1 ease-in-out;
    animation: slide-4-2-right 0.8s 1 ease-in-out;
}

@media only screen and (min-width:960px) {
    .animated-class.slide42 .text-content:first-child+.text-content {
        -webkit-animation: slide-4-2-right-960 0.8s 1 ease-in-out;
        -moz-animation: slide-4-2-right-960 0.8s 1 ease-in-out;
        -o-animation: slide-4-2-right-960 0.8s 1 ease-in-out;
        animation: slide-4-2-right-960 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1024px) {
    .animated-class.slide42 .text-content:first-child+.text-content {
        -webkit-animation: slide-4-2-right-1024 0.8s 1 ease-in-out;
        -moz-animation: slide-4-2-right-1024 0.8s 1 ease-in-out;
        -o-animation: slide-4-2-right-1024 0.8s 1 ease-in-out;
        animation: slide-4-2-right-1024 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1280px) {
    .animated-class.slide42 .text-content:first-child+.text-content {
        -webkit-animation: slide-4-2-right-1280 0.8s 1 ease-in-out;
        -moz-animation: slide-4-2-right-1280 0.8s 1 ease-in-out;
        -o-animation: slide-4-2-right-1280 0.8s 1 ease-in-out;
        animation: slide-4-2-right-1280 0.8s 1 ease-in-out;
    }
}

@media only screen and (min-width:1600px) {
    .animated-class.slide42 .text-content:first-child+.text-content {
        -webkit-animation: slide-4-2-right-1600 0.8s 1 ease-in-out;
        -moz-animation: slide-4-2-right-1600 0.8s 1 ease-in-out;
        -o-animation: slide-4-2-right-1600 0.8s 1 ease-in-out;
        animation: slide-4-2-right-1600 0.8s 1 ease-in-out;
    }
}

.heart {
    -webkit-animation: pulse2 1s linear infinite;
    -moz-animation: pulse2 1s linear infinite;
    -ms-animation: pulse2 1s linear infinite;
    animation: pulse2 1s linear infinite;
    position: relative;
    z-index: 6;
}

.heartbeat {
    position: relative;
}

.customer-hearbeat-container .col-md-12 img.under-heart,
.internal img.under-heart {
    position: absolute;
    z-index: 4;
    left: 50%;
    margin-left: -50%;
    bottom: 0;
}

.white-wrapper .icons-wrapper img {
    max-width: 120px;
}

.internal-tabs .heartbeat {
    max-width: 590px;
    margin: 0 auto;
}

@keyframes pulse2 {
    0% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
    50% {
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -o-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

@-moz-keyframes pulse2 {
    0% {
        -moz-transform: scale(1.1);
        transform: scale(1.1);
    }
    50% {
        -moz-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -moz-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes pulse2 {
    0% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    50% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-ms-keyframes pulse2 {
    0% {
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
    50% {
        -ms-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

.blue-bg a {
    color: #f9a634;
}

.schemes-container .border-wrapper p+span,
.internships-container .border-wrapper ul span {
    font-size: 18px;
    margin-top: 5px;
    margin-bottom: 10px;
    display: block;
}

.supporting-icon-wrapper span {
    font-size: 14px;
}

img.intro {
    position: relative;
    bottom: -15px;
    float: right;
    display: none;
    width: 154px;
}

.internal-header-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 75px;
    background: #fff;
}

.internal-header-bar .logo a {
    padding: 25px 0;
}

.internal-header-bar .logo {
    float: none;
    margin: 0 auto;
}

.video-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 74, 141, 0.9);
    visibility: hidden;
    width: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: width 0.5s 0.5s, visibility 0s 0.8s;
    -moz-transition: width 0.5s 0.5s, visibility 0s 0.8s;
    -ms-transition: width 0.5s 0.5s, visibility 0s 0.8s;
    -o-transition: width 0.5s 0.5s, visibility 0s 0.8s;
    transition: width 0.5s 0.5s, visibility 0s 0.8s;
    z-index: 9999;
}

.player-container {
    position: absolute;
    padding-bottom: 32.25%;
    padding-top: 25px;
    height: 0;
    width: 90%;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.player-container::after {
  position: absolute;
  right: 0;
  content: '';
  background: url(/img/icons/Close.png) no-repeat;
  z-index: 1;
  width: 30px;
  height: 30px;
  top: -40px;
  background-size: 30px;
  cursor: pointer;
}

@media only screen and (min-width:600px) {
  .player-container::after {
    right: -50px;
    width: 40px;
    height: 40px;
    top: -50px;
    background-size: 40px;
  }
}

.video-overlay.shown {
    visibility: visible;
    width: 100%;
    -webkit-transition: width 0.5s;
    -moz-transition: width 0.5s;
    -ms-transition: width 0.5s;
    -o-transition: width 0.5s;
    transition: width 0.5s;
}

.video-overlay.shown .player-container {
    opacity: 1;
    -webkit-transition: all 0.3s ease-in-out 0.6s;
    -moz-transition: all 0.3s ease-in-out 0.6s;
    -ms-transition: all 0.3s ease-in-out 0.6s;
    -o-transition: all 0.3s ease-in-out 0.6s;
    transition: all 0.3s ease-in-out 0.6s;
}

.player-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.text-content-slider {
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.text-content-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -200%;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.text-content-slide.active {
    left: 0;
    opacity: 1;
}

.core-light {
    font-family: 'GothamRounded-Light';
    font-size: 14px;
}

.early-careers .schemes-container .col-md-4 .border-wrapper p,
.early-careers .schemes-container .col-md-4 .border-wrapper ul {
    font-family: 'GothamRounded-Light';
    font-size: 14px;
}

.core-medium {
    font-family: 'GothamRounded-Medium';
    font-size: 14px;
}

.core-book {
    font-family: 'GothamRounded-Book';
    font-size: 14px;
}

.core-bold {
    font-family: 'GothamRounded-Bold';
    font-size: 14px;
}


/* animation to make the fake box visible */

.history-slider nav a {
    position: absolute;
    top: 50%;
    display: block;
    outline: none;
    text-align: left;
    z-index: 1000;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.history-slider {
    width: 100%;
    min-height: 300px;
    position: relative;
    margin: 40px 0;
}

.history-slide.active {
    width: 60%;
    position: absolute;
    left: 50%;
    margin-left: -30%;
    top: 0;
    height: 300px;
    opacity: 1;
    background: #fff;
    display: table;
    text-align: center;
    vertical-align: middle;
}

.history-slider nav a.prev {
    left: 0;
}

.history-slider nav a.next {
    right: 0;
}

.history-slider nav a svg {
    display: block;
    margin: 0 auto;
    padding: 0;
}

.nav-reveal a {
    overflow: hidden;
    width: 40px;
    height: 120px;
    background-color: transparent;
    -webkit-transition: width 0.4s, background-color 0.4s;
    transition: width 0.4s, background-color 0.4s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.nav-reveal .icon-wrap {
    position: absolute;
    z-index: 100;
    padding: 44px 4px;
    width: 50px;
}

.nav-reveal a.prev .icon-wrap {
    left: 0;
}

.nav-reveal a.next .icon-wrap {
    right: 0;
}

.nav-reveal svg.icon {
    fill: #fff;
}

.nav-reveal div {
    position: absolute;
    top: 0;
    padding: 0 50px;
    width: 400px;
    height: 100%;
}

.nav-reveal a.prev div {
    left: 0;
    padding-right: 130px;
    text-align: right;
}

.nav-reveal a.next div {
    right: 0;
    padding-left: 130px;
}

.nav-reveal h3 {
    position: relative;
    margin: 0;
    padding: 20px 0;
    color: #004A8D;
    font-weight: 300;
    font-size: 1.45em;
    line-height: 1.2;
}

.nav-reveal div h3 span {
    display: block;
    padding-top: 10px;
    color: #4d4d4d;
    letter-spacing: 1px;
    font-weight: 700;
    font-size: 50%;
}

.nav-reveal img {
    position: absolute;
    top: 10px;
    height: 100px;
}

.nav-reveal a.prev img {
    right: 10px;
}

.nav-reveal a.next img {
    left: 10px;
}

.history-slide.active .img-wrapper {
    display: table-row;
    text-align: center;
    vertical-align: middle;
}

.paragraph-wrapper .button {
    margin-top: 0;
}

.button.chosen {
    background: #fff;
    color: #004a8d;
}

section ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-position: inside;
}

.footer .navbar-brand {
    position: absolute;
    left: 0;
    top: 10px;
    padding: 15px 30px;
    display: none;
}

.footer .navbar-brand img {
    width: 130px;
    height: 16px;
}

.our-offer-container .button {
    margin-top: 20px;
}

.button.white {
    background: #fff;
    color: #004A8D;
}

.roles .intro-slide .button {
    width: 180px;
    margin: 10px;
}

.roles .intro-slide .button:before,
.internal .internal-tabs .white-wrapper .button:before {
    background: #f9a634;
}

.link-container {
    padding: 30px 50px;
    max-width: 760px;
    margin: 0 auto;
    border-radius: 50px;
    position: relative;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.white-wrapper .icons-wrapper img {
    opacity: 0.4;
}

.icons-wrapper {
    display: inline-block;
}

.footer-logos img {
    height: 55px;
}

.white-wrapper.link-wrapper:hover {
    background: #D4DFE8;
}

.link-container:after,
.link-container::after {
    position: absolute;
    right: 30px;
    content: '';
    background: url(/img/arrow_right.png) no-repeat;
    z-index: 1;
    width: 20px;
    height: 30px;
    top: 30px;
}

.link-container p.dark-text {
    display: block;
    width: 80%;
    margin: 0 auto;
    max-width: 530px;
}

.inter-wrapper.learn-more {
    background-size: cover;
    background-position: right;
}

.inter-wrapper.best-you-can-be {
    background-size: cover;
    background-position: right;
}

.inter-wrapper.heart-value {
    background-size: cover;
    background-position: right;
}

.inter-wrapper.louise-quote {
    background-size: cover;
    background-position: right;
    padding: 30px 20px 30px;
}

.inter-wrapper.more-information {
    background-size: cover;
}

.inter-wrapper.application {
    background-size: cover;
}

.inter-wrapper.harrison-quote {
    background-size: cover;
}

.roles .intro-slide .button:before {
    color: #fff;
}

.button:before {
    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #004a8d;
    color: #004a8d;
    -webkit-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate(-100%, 0);
    transform: translate3d(-100%, 0, 0);
}

.button:hover:before {
    background: #fff;
}

.button.white:before {
    background: #012a47;
    color: #fff;
}

.our-offer-container .button:before {
    background: #012a47;
    color: #fff;
}

.button:hover:before {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate(0, 0);
    transform: translate3d(0, 0, 0);
}


.button>span,
.button:before {
    padding: 15px 10px;
    font-family: 'GothamRounded-Medium';
    font-size: 14px;
    display: block;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}

.locations-container .button {
    width: 100%;
    margin: 10px 0;
}

.map-container {
    width: 50%;
    height: 100%;
    position: absolute;
    right: -50%;
    top: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.map-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: rgba(0, 74, 141, 0.8);
}

.map {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 100%;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.map.visible {
    bottom: 0;
}


#section0 .text-content {
  width: 100%;
  min-height: 290px;
  background: rgba(0, 0, 0, .7);
  border: 5px solid #fff;
  margin: 20px auto;
  position: relative;
  display: table;
  height: 100%;
}

@media only screen and (min-width:800px) {
  #section0 .text-content {
    position: absolute;
    width: auto;
    height: auto;
    min-height: 80px;
    max-width: 600px;
    border: 10px solid #fff;
    right: 0;
    left: auto;
    padding: 20px;
    display: block;
    margin: 0;
  }
}

#section0 .text-content .paragraph-wrapper{
    display: table-cell;
    padding: 20px;
    width: 100%;
    height: 100%;
    text-align: center;
}

@media only screen and (min-width:800px) {
  #section0 .text-content .paragraph-wrapper{
    position: static;
    transform: none;
    padding: 0;
    text-align: right;
  }
}

#section0 .text-content .paragraph-wrapper a{
  width: 100%;
  display: block;
  text-align: center;
  margin-top: 20px;
}

@media only screen and (min-width:800px) {
  #section0 .text-content .paragraph-wrapper a{
    text-align: right;
  }
}

#section0 svg {
    position: absolute;
    min-width: 120%;
    bottom: 0;
    right: 0;
    display: none;
}

.intro-paragraph {
    width: 100%;
    padding: 50px 0;
    background: #fff;
    text-align: center;
    color: #004a8d;
    font-size: 20px;
}

.roles-container {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.role-box {
    width: 50%;
    float: left;
    min-height: 450px;
    background: #034677;
    position: relative;
}

.role-box:first-child {
    background: #004A8D;
}

.role-icon {
    width: 80px;
    height: 80px;
    display: inline-block;
    margin: 50px 20px 20px;
}

.plus-container {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #fff;
    border: 8px solid #023962;
    position: absolute;
    top: 20px;
    right: 20px;
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    z-index: 999;
}

.internal .plus-container {
    width: 35px;
    height: 35px;
    border: 6px solid #023962;
}

.faq-container .plus-container {
    right: 0;
}

.faq-container .tab-header {
    padding-right: 50px;
}

.active > .tab-header > .plus-container {
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}

.plus_vert {
    width: 5px;
    height: 15px;
    background: #023962;
    display: block;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.plus_hori {
    width: 15px;
    height: 5px;
    background: #023962;
    display: block;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.role-box .plus-wrapper {
    position: absolute;
    bottom: 50px;
    text-align: center;
    left: 50%;
    margin-left: -22.5px;
}

.role-box p {
    max-width: 350px;
    margin: 0 auto;
}

.role-box-container .container:first-child {
    margin-bottom: 80px;
}

.logo-link-wrapper img {
    display: block;
    margin: 0 auto 30px;
}

.brands-wrapper .container {
    background: rgba(0, 0, 0, 0.6);
    border: 10px solid #fff;
}

.brands-wrapper {
    padding: 100px 0 150px;
}

.brands-container {
    padding: 50px 0;
    text-align: center;
}

.brand-logo {
    width: 12.5%;
    float: left;
    height: 50px;
    background: red;
}

.logos-container {
    overflow: hidden;
    margin-top: 50px;
}

.logos-wrapper,
.supporting-icons {
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

.supporting-icons .round-icon {
    margin-bottom: 20px;
    display: none;
}

.logos-wrapper>img {
    width: 50%;
    display: inline-block;
    float: left;
    margin-top: 10px;
}

.logo-link-wrapper {
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
    margin-top: 50px;
}

.employer-logo-wrapper .single-logo {
    margin: 30px 14px;
    display: inline-block;
}

.employer-logo-wrapper .single-logo img {
    display: block;
    margin: 0 auto;
}

.employer-logo-wrapper {
    text-align: center;
}

.supporting-icon-wrapper {
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
    width: 100%;
    font-weight: bold;
}

.res-test {
    width: 1px;
    opacity: 0;
    height: 1px;
}

.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

.customer-hearbeat-container .col-md-2 {
    width: 50%;
    display: inline-block;
    float: left;
    min-height: 160px;
}

.support-centre-container .button {
    margin: 30px 0 -40px;
}

.customer-hearbeat-container .button {
    display: none;
}

.terms-container .terms-bg-img-box {
  background-position: center;
  background-size: cover;
  width: 100%;
  height: auto;
  min-height: 300px;
}

@media only screen and (min-width:480px) {
    .logo-link-wrapper {
        width: 100%;
        text-align: center;
    }
    .operations h1 {
        font-size: 110px;
    }
    .columns .col-md-4 {
        width: 50%;
        float: left;
    }
    .columns .col-md-4:first-child+.col-md-4+.col-md-4 {
        width: 100%;
    }
    .customer-hearbeat-container .col-md-12 img {
        margin: -20px 0 20px;
    }
    .customer-hearbeat-container .col-md-2 {
        width: 33%;
    }
    .home h1 {
        font-size: 260px;
    }
    h1 {
        font-size: 140px;
        margin: 0 0 0 15px;
    }
    h2 {
        font-size: 45px;
    }
    .logos-wrapper>img {
        width: 33%;
    }
    .border-wrapper {
        border: 10px solid #fff;
    }
}

@media only screen and (max-height:500px) {
    .res-test {
        height: 0px;
    }
}

@media only screen and (min-width:640px) {
    .internal-tabs .tab-header span {
        font-size: 23px;
    }
    .link-container:before,
    .link-container::before {
        position: absolute;
        left: 40px;
        content: '';
        z-index: 1;
        width: 50px;
        height: 50px;
        top: 15px;
    }
    .internal .plus-container {
        width: 45px;
        height: 45px;
        border: 8px solid #023962;
    }
    .about-us .history-container {
        padding: 100px 0 60px;
    }
    .player-container {
        width: 60%;
    }
    .history-slide.active .img-wrapper {
        left: 0;
        display: table-cell;
    }
    .logos-wrapper>img {
        width: 25%;
    }
    .history-slide.active {
        width: 80%;
        margin-left: -40%;
        height: 260px;
    }
    .history-slider {
        min-height: 260px;
    }
    .operations h1 {
        font-size: 150px;
    }
    .logo-link-wrapper {
        width: 40%;
    }
    .logo-link-wrapper:first-child+.logo-link-wrapper+.logo-link-wrapper {
        width: 100%;
    }
    .supporting-icons .round-icon {
        display: block;
    }
    .supporting-icon-wrapper {
        text-align: center;
        width: 20%;
    }
    .roles-links-container .col-md-6 {
        width: 50%;
        float: left;
    }
    h1 {
        font-size: 170px;
    }
    h2 {
        font-size: 55px;
        margin: 0 0 0 15px;
    }
    .home h1 {
        font-size: 370px;
    }
    .history-slide.active {
        background: rgba(255, 255, 255, .15);
    }
    .nav-reveal a:hover {
        width: 400px;
        background-color: #fff;
    }
}

@media only screen and (min-width:768px) {
    .our-people-container .people-portait {
        display: block;
        width: 39%;
        position: absolute;
        bottom: 0;
        left: 5%;
    }
    .operations h1 {
        font-size: 190px;
    }
    .our-people-container quote {
        width: 60%;
        float: right;
    }
    .columns .button {
        min-width: 180px;
    }
    .columns .col-md-4,
    .columns .col-md-4:first-child+.col-md-4+.col-md-4 {
        width: 33%;
    }
    .force-wrapper ul li {
        padding-left: 60px;
        padding-top: 15px;
    }
    .force-wrapper ul li:before,
    .force-wrapper ul li::before {
        width: 50px;
        height: 50px;
    }
    h1 {
        font-size: 200px;
    }
    .internal h1 {
        font-size: 154px;
    }
    .internal h2 {
        font-size: 36px;
    }
    .home h1 {
        font-size: 440px;
    }
    quote {
        padding-left: 60px;
    }
    .about-container quote {
        width: 45%;
    }
    .corner-portrait {
        position: absolute;
        display: block;
        width: 40%;
        bottom: 0;
        right: 3%;
    }
    quote:before,
    quote::before {
        width: 54px;
        height: 46px;
    }

    .terms-container .terms-bg-img-box {
      min-height: 600px;
    }

    .terms-container .terms-bg-img-box--portrait {
        margin: 0 auto;
        width: 50%;
        min-width: 300px;
        max-width: 500px;

    }
}

@media only screen and (min-width:800px) {
    .internal .active .tab-header span {
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    /*    .schemes-container .border-wrapper h5 {
            min-height:45px;
            margin-bottom:30px;
        }

        .schemes-container .col-md-4 .border-wrapper h5 + p {
            min-height:255px;
        }

        .schemes-container .col-md-4 {
            width:50%;
            float:left;
        }*/
    .container.additional-content {
        padding: 50px 70px 0;
    }
    .customer-hearbeat-container .col-md-8 {
        margin-top: 60px;
    }
    .internal .other-header-wrapper {
        /*left: 0;*/
    }
    .customer-hearbeat-container .col-md-12 img.under-heart {
        margin-left: -295px;
    }
    #section3 .text-content {
        min-height: 0;
    }
    #section11 .text-content {
        min-height: 0;
    }
    .internships-container .border-wrapper {
        width: 90%;
        margin: 0 auto;
        min-height: 420px;
    }
    .line-row {
        width: 90%;
        height: 100%;
        border-top: 1px solid rgba(0, 0, 0, .15);
    }
    .text-nav {
        position: absolute;
        width: 100%;
        bottom: -15px;
        left: 0;
    }
    #section1 .text-nav {
        bottom: 5px;
    }
    .text-nav .bullet {
        display: inline-block;
        width: 14px;
        height: 14px;
    }
    .about-us .intro-paragraph svg,
    .early-careers .intro-paragraph svg,
    .operations .intro-paragraph svg {
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 9%;
        z-index: -1;
    }
    .about-us .history-container {
        background-position: top right;
        color: #4d4d4d;
    }
    .history-slide.active {
        width: 60%;
        margin-left: -30%;
    }
    @keyframes bounce {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-50%);
        }
        100% {
            transform: translateY(0);
        }
    }
    @-webkit-keyframes bounce {
        0% {
            -webkit-transform: translateY(0);
        }
        50% {
            -webkit-transform: translateY(-50%);
        }
        100% {
            -webkit-transform: translateY(0);
        }
    }
    @-moz-keyframes bounce {
        0% {
            -moz-transform: translateY(0);
        }
        50% {
            -moz-transform: translateY(-50%);
        }
        100% {
            -moz-transform: translateY(0);
        }
    }
    @-o-keyframes bounce {
        0% {
            -o-transform: translateY(0);
        }
        50% {
            -o-transform: translateY(-50%);
        }
        100% {
            -o-transform: translateY(0);
        }
    }
    .scroll-hint {
        display: block;
        width: 39px;
        height: 30px;
        position: absolute;
        bottom: 2px;
        left: 50%;
        margin-left: -20px;
        -webkit-animation: bounce 0.9s infinite;
        -moz-animation: bounce 0.9s infinite;
        -o-animation: bounce 0.9s infinite;
        animation: bounce 0.9s infinite;
        cursor: pointer;
        z-index: 20;
    }
    .scroll-left {
        width: 24px;
        height: 4px;
        border-radius: 4px;
        background: #fff;
        display: block;
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        position: absolute;
        left: 0;
        top: 15px;
    }
    .scroll-right {
        width: 24px;
        height: 4px;
        border-radius: 4px;
        background: #fff;
        display: block;
        -moz-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: 15px;
        position: absolute;
        right: 0;
    }
    .terms-container {
        padding: 150px 0;
    }
    .footer .navbar-brand {
        margin-left: -15px;
        display: block;
    }
    .force-container .border-wrapper {
        margin-right: 5%;
    }

    .corner {
        display: block;
        position: absolute;
        z-index: -1;
    }
    /* .disabled {
        display: none;
    } */
    #section0 .corner {
        z-index: 0;
        left: 0;
        bottom: 0;
        width: 100%;
    }
    #section1 .corner,
    #section3 .corner {
        z-index: 0;
        left: 0;
        bottom: 0;
        width: 14%;
    }
    #section2 .corner {
        z-index: 0;
        right: 0;
        bottom: 0;
        width: 8%;
    }
    .about-us .intro-paragraph .corner {
        bottom: 0;
        right: 0;
        width: 9%;
    }
    .about-us .about-container .corner {
        bottom: 0;
        left: 0;
        width: 9%;
    }
    .about-us .about-container svg.animated-home {
        bottom: 0;
        left: 0;
        width: 9%;
        display: block;
        z-index: -1;
        position: absolute;
        -moz-transform: scaleY(1.2);
        -webkit-transform: scaleY(1.2);
        -o-transform: scaleY(1.2);
        -ms-transform: scaleY(1.2);
        transform: scaleY(1.2);
    }
    .about-us .pride-container .corner {
        top: 0;
        right: 0;
        width: 12%;
    }
    .about-us .pride-container svg.animated-home {
        bottom: 0;
        right: 0;
        width: 12%;
        position: absolute;
        z-index: -1;
        display: Block;
        -moz-transform: scaleX(0.8) scaleY(0.6);
        -webkit-transform: scaleX(0.8) scaleY(0.6);
        -o-transform: scaleX(0.8) scaleY(0.6);
        -ms-transform: scaleX(0.8) scaleY(0.6);
        transform: scaleX(0.8) scaleY(0.6);
        -moz-transform-origin: 100% 100%;
        -webkit-transform-origin: 100% 100%;
        -o-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
    }
    .about-us .force-container .corner {
        bottom: 0;
        right: 50%;
        width: 51%;
        display: block !important;
    }
    .why-whitbread .intro-paragraph .corner {
        bottom: 0;
        left: 0;
        width: 8.5%;
    }
    .why-whitbread .intro-paragraph svg.animated-home {
        bottom: 0;
        left: 0;
        width: 8.5%;
        position: absolute;
        z-index: -1;
        display: block;
        -webkit-transform: scaleY(1.4) scaleX(1.2);
        -moz-transform: scaleY(1.4) scaleX(1.2);
        -ms-transform: scaleY(1.4) scaleX(1.2);
        -o-transform: scaleY(1.4) scaleX(1.2);
        transform: scaleY(1.4) scaleX(1.2);
    }
    .why-whitbread .culture-container .corner {
        bottom: 0;
        right: 0;
        width: 8%;
    }
    .why-whitbread .culture-container svg.animated-home {
        bottom: 0;
        right: 0;
        width: 8%;
        display: block;
        position: absolute;
        z-index: -1;
        -webkit-transform: scaleX(1.2) rotate(7deg);
        -webkit-transform-origin: -150% -20%;
        -moz-transform: scaleX(1.2) rotate(7deg);
        -moz-transform-origin: -150% -20%;
        -ms-transform: scaleX(1.2) rotate(7deg);
        -ms-transform-origin: -150% -20%;
        -o-transform: scaleX(1.2) rotate(7deg);
        -o-transform-origin: -150% -20%;
        transform: scaleX(1.2) rotate(7deg);
        transform-origin: -150% -20%;
    }
    .why-whitbread .growing-container .corner {
        top: 0;
        left: 0;
        width: 13%;
    }
    .why-whitbread .growing-container svg.animated-home {
        top: 0;
        left: 0;
        width: 13%;
        position: absolute;
        display: block;
        z-index: -1;
        -webkit-transform: translateX(-30%) rotate(17deg);
        -moz-transform: translateX(-30%) rotate(17deg);
        -ms-transform: translateX(-30%) rotate(17deg);
        -o-transform: translateX(-30%) rotate(17deg);
        transform: translateX(-30%) rotate(17deg);
    }
    .why-whitbread .our-offer-container .corner {
        right: 0;
        bottom: 0;
        width: 12%;
    }
    .why-whitbread .our-offer-container svg.animated-home {
        right: 0;
        bottom: 0;
        width: 7%;
        position: absolute;
        display: block;
        z-index: -1;
    }
    .early-careers .what-it-takes-container .corner {
        right: 0;
        bottom: 0;
        width: 12%;
    }
    .early-careers .what-it-takes-container svg.animated-home {
        right: 0;
        bottom: 0;
        width: 12%;
        position: absolute;
        display: block;
        z-index: -1;
        -webkit-transform: scaleY(0.6) scaleX(0.8);
        -webkit-transform-origin: 100% 100%;
        -moz-transform: scaleY(0.6) scaleX(0.8);
        -moz-transform-origin: 100% 100%;
        -ms-transform: scaleY(0.6) scaleX(0.8);
        -ms-transform-origin: 100% 100%;
        -o-transform: scaleY(0.6) scaleX(0.8);
        -o-transform-origin: 100% 100%;
        transform: scaleY(0.6) scaleX(0.8);
        transform-origin: 100% 100%;
    }
    .early-careers .schemes-container svg.animated-home {
        right: 0;
        bottom: 0;
        width: 35%;
        position: absolute;
        display: block;
        z-index: -1;
        -webkit-transform: scaleX(-1) rotate(0deg) scaleY(1.1);
        -webkit-transform-origin: 50% 50%;
        -moz-transform: scaleX(-1) rotate(0deg) scaleY(1.1);
        -moz-transform-origin: 50% 50%;
        -ms-transform: scaleX(-1) rotate(0deg) scaleY(1.1);
        -ms-transform-origin: 50% 50%;
        -o-transform: scaleX(-1) rotate(0deg) scaleY(1.1);
        -o-transform-origin: 50% 50%;
        transform: scaleX(-1) rotate(0deg) scaleY(1.1);
        transform-origin: 50% 50%;
    }
    .early-careers .apprenticeships-container .corner {
        left: 0;
        bottom: 0;
        width: 13%;
    }
    .early-careers .schemes-container .corner {
        right: 0;
        bottom: 0;
        width: 34%;
    }
    .early-careers .apprenticeships-container svg.animated-home {
        left: -4%;
        bottom: 0;
        width: 12%;
        display: block;
        position: absolute;
        z-index: -1;
        -webkit-transform: scaleY(1.4);
        -moz-transform: scaleY(1.4);
        -ms-transform: scaleY(1.4);
        -o-transform: scaleY(1.4);
        transform: scaleY(1.4);
    }
    .roles .intro-paragraph .corner {
        bottom: 0;
        left: 0;
        width: 8%;
    }
    .roles .intro-paragraph svg.animated-home {
        bottom: 0;
        left: 0;
        width: 13%;
        position: absolute;
        display: block;
        -webkit-transform: translateX(-40%);
        -moz-transform: translateX(-40%);
        -ms-transform: translateX(-40%);
        -o-transform: translateX(-40%);
        transform: translateX(-40%);
    }
    .roles .support-centre-container .corner {
        top: 0;
        left: 0;
        width: 14%;
    }
    .roles .support-centre-container svg.animated-home {
        top: 0;
        left: 0;
        width: 14%;
        position: absolute;
        display: block;
        z-index: -1;
        -webkit-transform: rotate(20deg) translateX(-30%) scaleX(1.6) scaleY(1.3);
        -moz-transform: rotate(20deg) translateX(-30%) scaleX(1.6) scaleY(1.3);
        -ms-transform: rotate(20deg) translateX(-30%) scaleX(1.6) scaleY(1.3);
        -o-transform: rotate(20deg) translateX(-30%) scaleX(1.6) scaleY(1.3);
        transform: rotate(20deg) translateX(-30%) scaleX(1.6) scaleY(1.3);
    }
    .roles .customer-hearbeat-container .corner {
        bottom: 0;
        right: 0;
        width: 9%;
    }
    .roles .customer-hearbeat-container svg.animated-home {
        bottom: 0;
        right: 0;
        width: 9%;
        position: absolute;
        display: block;
        z-index: -1;
    }
    .footer {
        height: 60px;
    }
    .content-wrapper {
        padding-bottom: 60px;
    }
    section {
        position: relative;
    }
    .footer-menu li a {
        padding: 20px 10px;
    }
    .footer-menu {
        padding: 0;
    }
    .social-footer {
        text-align: right;
        width: 20%;
    }

    .home #section3 {
        background-size: cover;
    }
    #section1 .text-content {
        width: 49%;
        min-height: 0;
        height: 340px;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, .7);
        border: 10px solid #fff;
        margin: 0;
    }
    .home #slide-3-4 .text-wrapper {
        padding: 0;
    }
    .home #section2 {
        display: block;
    }
    #section3 .text-content {
        width: 525px;
        height: 360px;
        bottom: 10%;
        left: 0;
        padding: 15px 20px;
    }
    #slide-3-41 .text-content {
        width: 525px;
        height: 360px;
        bottom: 0;
        left: 0;
        padding: 15px 20px;
    }
    .paragraph-wrapper {
        text-align: right;
    }
    .home #section0 {
        /* padding:96px 3% 5.7% */
        padding: 125px 3% 5.7%
    }
    #fullpage {
        padding: 96px 0 0;
    }

    .join-us .intro-border-wrapper {
        width: 35%;
    }
    .join-us .intro-slide,
    .internal .intro-slide {
        height: 575px;
    }
    /*.internal .intro-slide {
        background-position: 0 96px;
    }*/
    .operations .intro-slide {
        height: 575px;
    }
    h1 {
        margin: 0;
    }
    h2 {
        font-size: 45px;
        margin: 0;
    }
    .early-careers .intro-slide {
        height: 575px;
        padding-top: 50px;
    }
    .why-whitbread .our-people-container {
        padding: 100px 0 160px;
    }
    .our-people-container .people-portait {
        position: absolute;
        width: 40%;
        left: 5%;
        bottom: 0;
        display: block;
    }
    .culture-container ul li {
        padding-left: 80px;
    }
    .culture-container ul li:before,
    .culture-container ul li::before {
        width: 50px;
        height: 50px;
    }
    .culture-container ul {
        padding: 0 0 0 20px;
    }
    .force-wrapper ul li {
        padding-left: 80px;
        min-height: 50px;
        padding-top: 15px;
        margin: 30px 0;
    }
    .force-wrapper ul li:before,
    .force-wrapper ul li::before {
        width: 50px;
        height: 50px;
    }
    .force-wrapper {
        padding: 70px 50px;
    }
    .about-us .about-container {
        padding: 100px 0;
    }
    .corner-portrait {
        width: 45%;
        position: absolute;
        right: 5%;
        bottom: 0;
        display: block;
    }
    .about-container quote {
        width: 50%;
    }
    quote:before,
    quote::before {
        width: 50px;
        height: 43px;
    }
    quote {
        padding-left: 60px;
        font-size: 20px;
        margin-top: 0;
    }
    .customer-hearbeat-container .col-md-2 {
        width: 16.66666667%;
    }
    .customer-hearbeat-container .col-md-12 img {
        margin: 50px 0;
    }
    .brands-container {
        padding: 50px 50px 150px;
        ;
    }
    .round-icon.big {
        width: 90px;
        height: 90px;
    }
    .customer-hearbeat-container .button {
        display: block;
        width: 200px;
        margin: 30px auto 0;
    }
    .intro-paragraph {
        padding: 120px 0 40px;
        font-size: 22px;
    }
    .locations-container.active-map .col-md-6:first-child {
        width: 0;
        padding: 0;
    }
    .locations-container.active-map .map-container {
        right: 0;
    }
    .border-wrapper {
        border: 10px solid #fff;
        padding: 10px;
    }
    .intro-border-wrapper {
        width: 100%;
        margin: 0;
    }
    .about-us h1,
    .roles h1 {
        font-size: 232px;
    }
    .intro-container {
        color: #004A8D;
        font-size: 18px;
        padding: 100px 0;
    }
    .why-whitbread h1 {
        font-size: 162px;
    }
    .why-whitbread h2 {
        display: block;
        width: 50%;
    }
    .early-careers h1 {
        font-size: 221px;
    }
    .join-us h1 {
        font-size: 160px;
    }
    .operations h1 {
        font-size: 201px;
    }
    .other-header-wrapper {
        left: 3%;
        position: relative;
        top: 55%;
        margin: 0;
        -webkit-transition: transform 0.3s ease-in;
        -moz-transition: transform 0.3s ease-in;
        -ms-transition: transform 0.3s ease-in;
        -o-transition: transform 0.3s ease-in;
        transition: transform 0.3s ease-in;
        will-change: transform;
    }
    .internal .other-header-wrapper {
        top: 60%;
    }
    .intro-border-wrapper {
        position: absolute;
        width: 47%;
        right: 3%;
        top: 120px;
        -webkit-transition: transform 0.3s ease-in;
        -moz-transition: transform 0.3s ease-in;
        -ms-transition: transform 0.3s ease-in;
        -o-transition: transform 0.3s ease-in;
        transition: transform 0.3s ease-in;
        will-change: transform;
    }

    @media only screen and (min-width: 1024px) {
      .intro-border-wrapper {
        top: 64%;
      }
    }
    .roles .intro-slide .button {
        margin: 5px;
    }
    .content-wrapper {
        top: 0;
    }
    .roles .intro-slide {
        width: 100%;
        height: 100%;
        height: 100vh;
    }
    .home h1 {
        font-size: 160px;
    }
    .res-test {
        width: 2px;
    }
    .home-slider-navigation {
        position: fixed;
        top: 0;
        right: 0;
        width: 3%;
        height: 100%;
        z-index: 999;
        display: block;
    }
    .bullet-wrapper {
        height: 64px;
        width: 20px;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        cursor: pointer;
    }
    .bullet {
        width: 20px;
        height: 20px;
        background: #fff;
        border-radius: 50%;
        border: 2px solid transparent;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-background-clip: padding;
        -webkit-background-clip: padding;
        background-clip: padding-box;
        margin: 5px 0;
    }
    .bullet.active {
        border: 2px solid #fff;
        background: transparent;
    }
    .home .section {
        padding: 136px 3% 5.7%;
    }
    .animated-class {
        display: block;
    }
    #section0 svg {
        display: block;
    }
    #section1 svg {
        display: block;
        position: absolute;
        bottom: 0;
        left: -5px;
        width: 20%;
    }
    #section2 svg {
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10%;
    }
    #section1 svg {
        display: block;
        position: absolute;
        bottom: 0;
        left: -5px;
        width: 16%;
    }
    .text-content {
        width: 100%;
        height: 100%;
        position: absolute;
        border: 10px solid #fff;
        bottom: 0;
        left: 0;
        overflow: hidden;
    }
    #section2 .text-content:first-child {
        display: none;
    }
    .header-wrapper {
        padding: 10px 0 0 10px;
        float: left;
    }
    .paragraph-wrapper {
        width: 55%;
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 10px 10px 0;
    }
    .paragraph-wrapper p {
        display: none;
    }
    .paragraph-wrapper p.replacement {
        display: block;
        font-size: 14px;
        line-height: 1.1;
    }
    .text-wrapper {
        width: 100%;
        height: 100%;
        position: relative;
        opacity: 0;
        z-index: 2;
    }
    .about-container .col-md-6:first-child {
        margin-bottom: 40px
    }
    .force-container .col-md-7 {
        width: 70%;
        margin: 0 auto;
    }
    .force-container .col-md-7 .border-wrapper {
        padding: 40px;
    }
}

@media only screen and (min-width:960px) {
    .schemes-container .container:first-child+.container {
        padding-top: 30px;
    }
    .schemes-container .container:first-child+.container .col-md-4 h5+p {
        min-height: 300px;
    }
    .schemes-container .container:first-child+.container .col-md-4 ul {
        min-height: 60px;
    }
    .schemes-container .col-md-4 h5 {
        min-height: 45px;
        margin-bottom: 30px;
    }
    .schemes-container .col-md-4 h5+p {
        min-height: 240px;
    }
    .schemes-container .col-md-4 ul {
        min-height: 170px;
    }
    #section2 .text-content {
        height: 230px;
        background: rgba(0, 0, 0, .7);
    }
    #section2 .text-content:first-child+.text-content {
        left: 48%;
        width: 52%;
        height: 230px;
    }
    #section2 .text-content:first-child {
        display: block;
    }
    #section2 .text-content:first-child+.text-content {
        left: 48%;
        width: 52%;
        height: 230px;
    }
    .para-content {
        width: 50%;
        padding-top: 20px;
        font-size: 23px;
        line-height: 1.4;
    }
    .home #section0 {
        /* padding:96px 3% 5.7% */
        padding: 125px 3% 5.7%;
    }
    .home h1 {
        font-size: 210px;
    }
    #section0 svg {
        min-width: 110%;
    }
    .paragraph-wrapper {
        width: 50%;
        padding: 0 20px 20px 0;
    }
    .logo-link-wrapper:first-child+.logo-link-wrapper+.logo-link-wrapper {
        width: auto;
    }
    .join-us .intro-border-wrapper {
        width: 45%;
    }
    .logo-link-wrapper {
        width: auto;
    }
    quote {
        font-size: 24px;
    }
    .logos-wrapper>img {
        vertical-align: top;
        display: inline-block;
        *display: inline;
        zoom: 1;
        margin-top: 50px;
        width: 20%;
        float: none;
    }
    .customer-hearbeat-container .col-md-12 img {
        max-width: 100%;
    }
    .header-wrapper {
        padding: 20px 0 0 20px;
    }
}

@media only screen and (min-width:992px) {
    .what-it-takes-container .tab-content-wrapper img {
        display: block;
    }
    .res-test {
        margin-top: 1px;
    }
    #WayForward quote {
        margin-bottom: 20px;
    }
    .ceo-portait {
        display: block;
        width: 70%;
        right: -30%;
    }
    .internal .people-portait {
        display: block;
    }
    .mobile-content {
        display: none;
    }
    .locations-container .border-wrapper {
        padding: 0;
    }
    .locations-container .button {
        min-width: 150px;
    }
    .locations-container .button>span,
    .locations-container .button:before {
        font-size: 10px;
    }
}

@media only screen and (min-width:1024px) {
    .roles .locations-container {
        padding: 80px 0;
    }
    .internships-container .border-wrapper {
        min-height: 520px;
    }
    .inter-wrapper.harrison-quote {
        padding: 120px 20px 0;
    }
    .inter-wrapper.louise-quote {
        padding: 80px 20px 30px;
    }
    .locations-container .button {
        min-width: 160px;
    }
    .role-box-container .border-wrapper {
        min-height: 570px;
    }
    .role-box-container .border-wrapper .button {
        position: absolute;
        bottom: 70px;
        left: 50%;
        margin-left: -100px;
    }
    .header-wrapper {
        padding: 20px 0 0 20px;
    }
    #section3 .text-content {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
        padding: 15px 20px;
    }
    #section11 .text-content {
        width: 410px;
        height: 420px;
        bottom: 10%;
        left: 0;
        padding: 15px 20px;
    }
    .paragraph-wrapper {
        width: 40%;
        padding: 0 20px 20px 0;
    }
    .header-wrapper {
        padding: 20px 0 0 20px;
    }
    .supporting-icon-wrapper {
        width: 40%;
        margin-bottom: 20px;
        margin-top: 20px;
    }
    .join-us .intro-border-wrapper {
        width: 50%;
    }
    .operations h1 {
        font-size: 221px;
    }
    .growing-container .col-md-12+.col-md-2 {
        width: 0;
    }
    .growing-container .col-md-12+.col-md-2+.col-md-3 {
        width: 45%;
    }
    .growing-container .col-md-12+.col-md-2+.col-md-3+.col-md-5 {
        width: 50%;
    }
    .columns+.col-md-2 {
        width: 0;
    }
    .columns .col-md-2+.col-md-8 {
        width: 100%;
    }
    .our-people-container+.col-md-3 {
        width: 10%;
    }
    .our-people-container .col-md-3+.col-md-6 {
        width: 80%;
        margin-left: 10%;
    }
    .our-people-container quote {
        width: 100%;
        float: none;
    }
    .our-people-container .people-portait {
        width: 30%;
        left: 15%;
    }
    .why-whitbread .our-people-container {
        padding: 100px 0 200px;
    }
    .force-container .border-wrapper {
        border: 10px solid #fff;
    }
    .force-container .col-md-5 {
        width: 30%;
    }
    .force-container .col-md-7 {
        margin: 0;
    }
    .about-us .about-container {
        padding: 100px 0 20px;
    }
    .about-container quote {
        width: 100%;
    }
    .corner-portrait {
        width: 37%;
        right: 0;
    }
    .res-test {
        opacity: 1;
    }
    .round-icon.big {
        width: 120px;
        height: 120px;
    }
    .intro-paragraph {
        font-size: 26px;
    }
    .intro-border-wrapper {
        position: absolute;
        width: 50%;
        right: 3%;
        top: 55%;
    }
    .border-wrapper {
        padding: 40px;
    }
    .schemes-container .border-wrapper {
        padding: 0;
    }
    .support-centre-container .col-md-6:first-child+.col-md-6 {
        position: absolute;
        right: 0;
        height: 100%;
    }
    .support-centre-container .button {
        margin: 0;
    }
    .support-icon-wrapper .round-icon,
    .support-icon-wrapper h4 {
        display: block;
    }
    .home h1 {
        font-size: 260px;
    }
}

@media only screen and (min-width:1140px) {
    .internal .people-portait {
        left: -10%;
        max-width: 280px;
    }
    .ceo-portait {
        width: 60%;
        right: -20%;
        max-width: 340px;
    }
    .about-us .history-container {
        background-position: top left;
    }
    .schemes-container .container:first-child+.container .col-md-4 h5+p {
        min-height: 250px;
    }
    .schemes-container .col-md-4 h5+p {
        min-height: 190px;
    }
    .internships-container .border-wrapper {
        min-height: 480px;
    }
}

@media only screen and (min-width:1200px) {
    .locations-container .button>span,
    .locations-container .button:before {
        font-size: 13px;
    }
    .history-slider {
        min-height: 300px;
    }
    .history-slide.active {
        height: 300px;
    }
    .paragraph-wrapper {
        width: 45%;
        padding: 0 10px 10px 0;
        line-height: 1.1;
    }
    .role-box-container .border-wrapper {
        min-height: 520px;
    }
    .home h1 {
        font-size: 280px;
    }
    .growing-container .border-wrapper {
        border: 10px solid #fff;
    }
    .corner-portrait {
        width: 27%;
        right: 0;
    }
    .intro-paragraph {
        padding: 140px 0 60px;
        font-size: 26px;
    }
    .intro-border-wrapper {
        width: 45%;
    }
    .about-us h1,
    .roles h1,
    .why-whitbread h1 {
        font-size: 262px;
    }
    .paragraph-wrapper p.replacement {
        display: none;
    }
    .paragraph-wrapper p {
        display: block;
    }
}

@media only screen and (min-width:1280px) {
    .schemes-container .col-md-4 h5+p {
        min-height: 230px;
    }
    .schemes-container .col-md-4 ul {
        min-height: 150px;
    }
    #WayForward quote {
        margin-bottom: 70px;
    }
    .internships-container .border-wrapper {
        min-height: 450px;
    }
    .schemes-container .border-wrapper {
        width: 90%;
        margin: 0 auto;
    }
    .early-careers h1,
    .operations h1 {
        width: 94%;
    }
    .supporting-icon-wrapper {
        width: 24%;
    }
    img.intro {
        display: block;
    }
    .locations-container .border-wrapper {
        padding: 60px;
    }
    .role-box-container .border-wrapper {
        min-height: 500px;
    }
    .locations-container .button>span,
    .locations-container .button:before {
        font-size: 10px;
    }
    .paragraph-wrapper {
        width: 46%;
        padding: 0 30px 30px 0;
    }
    .para-content {
        width: 50%;
    }
    .header-wrapper {
        padding: 50px 0 0 50px;
    }
    #section2 .text-content:first-child+.text-content {
        left: 48%;
        width: 52%;
    }
    #section1 .text-content:first-child+.text-content {
        left: 70%;
    }
    #section1 .text-content {
        width: 30%;
        height: 350px;
        left: 35%;
    }
    .our-people-container .people-portait {
        width: 27%;
    }
    .about-us h1,
    .roles h1,
    .why-whitbread h1 {
        font-size: 292px;
    }
    .logos-wrapper>img {
        width: 10%;
    }
    .border-wrapper {
        padding: 40px;
    }
    .intro-border-wrapper {
        width: 40%;
    }
}

@media only screen and (min-width:1366px) {
    .header-wrapper {
        padding: 80px 0 0 80px;
    }
    .locations-container .button>span,
    .locations-container .button:before {
        font-size: 11px;
    }
    .internships-container .border-wrapper {
        min-height: 440px;
    }
    .schemes-container .container:first-child+.container .col-md-4 h5+p {
        min-height: 290px;
    }
    .schemes-container .container .col-md-4 .border-wrapper {
        padding: 30px;
    }
    .paragraph-wrapper {
        width: 37%;
    }
    .our-people-container .people-portait {
        width: 23%;
    }
    .schemes-container .button {
        margin-top: 25px;
    }
    .schemes-container .border-wrapper {
        border: 10px solid #fff;
    }
    .columns .col-md-2:first-child {
        width: 10%;
    }
    .columns .col-md-2+.col-md-8 {
        width: 80%;
    }
    .growing-container .col-md-12+.col-md-2+.col-md-3+.col-md-5 {
        width: 41.66666667%;
    }
    .growing-container .col-md-12+.col-md-2 {
        width: 16.66666667%;
    }
    .growing-container .col-md-12+.col-md-2+.col-md-3 {
        width: 25%;
    }
    .force-container .col-md-5 {
        width: 41.66666667%
    }
    .force-container .col-md-7 {
        width: 58.33333333%;
    }
    .border-wrapper {
        padding: 45px;
    }
    .intro-border-wrapper {
        width: 30%;
    }
    .intro-paragraph {
        padding: 196px 0 96px;
        font-size: 32px;
    }
    .intro-border-wrapper {
        top: 55%;
    }
    .join-us h1 {
        font-size: 200px;
    }
}

@media only screen and (min-width:1440px) {
    .locations-container .button>span,
    .locations-container .button:before {
        font-size: 12px;
    }
    .internal .people-portait {
        left: -5%;
    }
    .ceo-portait {
        right: -15%;
    }
    .internships-container .border-wrapper {
        min-height: 470px;
    }
    .history-slider {
        min-height: 360px;
    }
    .history-slide.active {
        height: 360px;
    }
    .role-box-container .border-wrapper {
        min-height: 530px;
    }
    .paragraph-wrapper {
        width: 35%;
    }
    .header-wrapper {
        padding: 100px 0 0 100px;
    }
    .join-us .intro-border-wrapper {
        width: 40%;
    }
    .join-us h1 {
        font-size: 221px;
    }
    .logos-wrapper>img {
        width: auto;
    }
    .intro-paragraph {
        font-size: 36px;
    }
    .border-wrapper {
        padding: 60px;
    }
}

@media only screen and (min-width:1600px) {
    #section1 .text-content {
        width: 25%;
        left: 45%;
    }
    .about-us .force-container .corner {
        width: 36%;
    }
    .internships-container .border-wrapper {
        min-height: 430px;
    }
    .ceo-portait {
        right: -10%;
    }
    .schemes-container .container:first-child+.container .col-md-4 h5+p {
        min-height: 230px;
    }
    .join-us .intro-border-wrapper {
        width: 30%;
    }
    .role-box-container .border-wrapper {
        min-height: 510px;
    }
    .schemes-container .container .col-md-4 .border-wrapper {
        min-height: 750px;
    }
    .schemes-container .container:first-child .col-md-4 .border-wrapper {
        min-height: 820px;
    }
    .supporting-icon-wrapper {
        width: 20%;
        margin-bottom: 20px;
    }
    .about-container quote {
        width: 70%;
    }
    .paragraph-wrapper {
        width: 32%;
    }
    #section1 .text-content:first-child+.text-content {
        left: 75%;
    }
    .intro-border-wrapper {
        width: 25%;
    }
    .growing-container .border-wrapper {
        padding: 40px;
    }
    .our-people-container .col-md-3+.col-md-6 {
        width: 50%;
        margin-left: 0;
    }
    .columns .col-md-2+.col-md-8 {
        width: 66.66666667%;
    }
    .columns .col-md-2:first-child {
        width: 16.66666667%;
    }
    .our-people-container .people-portait {
        width: 24%;
        left: 23%;
    }
    .about-us h1,
    .roles h1,
    .why-whitbread h1 {
        font-size: 342px;
    }
    h2 {
        font-size: 55px;
    }
}

@media only screen and (min-width:1800px) {
    .ceo-portait {
        right: -4%;
    }
    #WayForward quote {
        margin-bottom: 100px;
    }
    .internal .people-portait {
        left: 0;
    }
    .intro-border-wrapper {
        width: 21%;
    }
    .schemes-container .container:first-child+.container .col-md-4 h5+p {
        min-height: 200px;
    }
    .schemes-container .col-md-4 ul {
        min-height: 140px;
    }
    .schemes-container .col-md-4 h5+p {
        min-height: 170px;
    }
    .tab-content-wrapper img {
        display: block;
    }
    .internships-container .border-wrapper {
        min-height: 410px;
    }
    .role-box-container .border-wrapper {
        min-height: 480px;
    }
    .schemes-container .container .col-md-4 .border-wrapper {
        min-height: 700px;
    }
    .schemes-container .container:first-child .col-md-4 .border-wrapper {
        min-height: 720px;
    }
    .paragraph-wrapper {
        width: 28%;
    }
    .corner-portrait {
        width: 27%;
    }
}

@media only screen and (min-width:1920px) {
    .our-people-container .people-portait {
        width: 17%;
        left: 28%;
    }
    .ceo-portait {
        right: 0;
    }
    .about-us .force-container .corner {
        right: 40%;
    }
}

.history-slide {
    opacity: 0;
    overflow: hidden;
    top: 0;
    height: 0;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -ms-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

.nav-reveal img.navig {
    width: 40px;
    height: 40px;
}

.nav-reveal a.next img.navig {
    top: 40px;
    right: 0;
    left: auto;
}

.history-slide .positioner {
    width: 100%;
    height: 200px;
    position: relative;
}

.history-slide.active .positioner .position-wrapper {
    width: 100%;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 50%;
    margin-top: -100px;
    overflow: hidden;
}

.history-slide.active .history-text-wrapper {
    vertical-align: middle;
    display: table-cell;
    width: 60%;
    padding: 15px;
    position: relative;
    top: 0;
    right: 0;
    text-align: left;
}

.history-slide.active h4 {
    font-size: 36px;
}

.history-slide.active .img-wrapper img {
    width: 100%;
}

.history-slide.active .text-wrapper {
    width: 60%;
    left: 40%;
    top: 0;
    padding: 0;
    background: red;
}

.mini-logo {
    width: 100px;
    display: inline-block;
}

.link-row {
    position: relative;
    width: 100%;
    height: 64px;
    padding-left: 50px;
}

.link-row span {
    display: inline-block;
    height: 100%;
    position: absolute;
    top: 20px;
    margin-left: 20px;
    font-family: 'GothamRounded-Light';
}

.link-row-container {
    position: absolute;
    top: 50%;
    width: 100%;
}

.para-content {
    text-align: left;
    width: 100%;
    font-size: 15px;
    line-height: 1.2;
}

.home-logo-buttons {
    display: table;
    width: 100%;
    height: 100%;
}

.home-button {
    display: table-cell;
    width: 50%;
    text-align: center;
    vertical-align: middle;
}

.home-button.third {
    width: 20%;
}

.home-culture {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    padding: 20px;
}

.animated-home {
    display: none;
}

.nav-reveal a.prev img.navig {
    top: 40px;
    right: 10px;
}

@media only screen and (min-width:1024px) {
    .para-content {
        width: 80%;
    }
}

@media only screen and (min-width:1440px) {
    .para-content {
        width: 80%;
        font-size: 23px;
    }
}

@media only screen and (min-width:1800px) {
    .para-content {
        width: 75%;
        font-size: 23px;
    }
}

.slider-frame {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    text-align: center;
}

.question-frame {
    position: absolute;
    bottom: 0;
    left: 100%;
    width: 100%;
    height: 70%;
    display: table;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.genuine-frame .question-positioner,
.confident-frame .question-positioner,
.committed-frame .question-positioner,
.final-frame .question-positioner {
    height: 100%;
}

.genuine-frame.slideIn .question-positioner,
.confident-frame.slideIn .question-positioner,
.committed-frame.slideIn .question-positioner,
.final-frame.slideIn .question-positioner {
    height: 50%;
    -webkit-transition: all 0.3s ease-in-out 1s;
    -moz-transition: all 0.3s ease-in-out 1s;
    -ms-transition: all 0.3s ease-in-out 1s;
    -o-transition: all 0.3s ease-in-out 1s;
    transition: all 0.3s ease-in-out 1s;
}

.genuine-frame .question-frame.q1,
.confident-frame .question-frame.q1,
.committed-frame .question-frame.q1,
.final-frame .question-frame {
    bottom: -100%;
    -webkit-transition: all 0.3s ease-in-out, bottom 0.3s ease-in-out 1s;
    -moz-transition: all 0.3s ease-in-out, bottom 0.3s ease-in-out 1s;
    -ms-transition: all 0.3s ease-in-out, bottom 0.3s ease-in-out 1s;
    -o-transition: all 0.3s ease-in-out, bottom 0.3s ease-in-out 1s;
    transition: all 0.3s ease-in-out, bottom 0.3s ease-in-out 1s;
}

.genuine-frame.slideIn .question-frame.q1,
.confident-frame.slideIn .question-frame.q1,
.committed-frame.slideIn .question-frame.q1,
.final-frame.slideIn .question-frame {
    bottom: 0;
}

.question-frame.active {
    left: 0;
}

.question-frame.prev {
    left: -100%;
}

.question-frame.prev .question-content {
    left: -100%;
}

.slider-frame h3 {
    font-family: 'bebas_neuebold';
}

.starter-frame .value-big,
.genuine-frame .value-big,
.committed-frame .value-big,
.confident-frame .value-big {
    font-family: 'bebas_neuebold';
    font-size: 60px;
    margin-top: 60px;
    line-height: 1;
}

.final-frame .value-big {
    font-family: 'bebas_neuebold';
    font-size: 60px;
    margin-top: 20px;
    line-height: 1;
}

.slider-frame h4.white-text {
    padding-bottom: 0;
}

.starter-frame .value-big+p,
.genuine-frame .value-big+p,
.committed-frame .value-big+p,
.confident-frame .value-big+p,
.final-frame .value-big+p {
    opacity: 1;
}

.genuine-frame.slideIn .value-big,
.committed-frame.slideIn .value-big,
.confident-frame.slideIn .value-big,
.final-frame.slideIn .value-big {
    font-size: 50px;
    -webkit-transition: all 0.3s ease-in-out 1s;
    -moz-transition: all 0.3s ease-in-out 1s;
    -ms-transition: all 0.3s ease-in-out 1s;
    -o-transition: all 0.3s ease-in-out 1s;
    transition: all 0.3s ease-in-out 1s;
}

.genuine-frame.slideIn .value-big+p,
.committed-frame.slideIn .value-big+p,
.confident-frame.slideIn .value-big+p,
.final-frame.slideIn .value-big+p {
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out 1s;
    -moz-transition: all 0.3s ease-in-out 1s;
    -ms-transition: all 0.3s ease-in-out 1s;
    -o-transition: all 0.3s ease-in-out 1s;
    transition: all 0.3s ease-in-out 1s;
}

.question-positioner {
    position: relative;
    width: 100%;
    height: 30%;
    display: table;
}

.question-content {
    display: table-cell;
    vertical-align: middle;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .75);
}

.introduction-content {
    width: 100%;
    height: 30%;
    left: 0;
    top: 0;
    display: table-row;
}

.introduction-value {
    display: table-cell;
    vertical-align: middle;
}

.slider-frame ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.slider-frame ul li {
    display: inline-block;
    margin: 0 20px;
}

.slider-frame ul li input {
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
}

.slider-frame ul li input[type=radio]:checked+label.button,
.slider-frame ul li input[type=radio]:checked+label.button:before {
    background: #fff;
    color: #004a8d;
}

.slider-frame .button.next {
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    min-width: 40px;
    position: absolute;
    top: 75%;
    margin-top: -20px;
    right: 50px;
}

button.button {
    border: 0;
    margin: 0;
    outline: none;
}

.slider-frame .next {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 50px;
    top: 50%;
    margin-top: -25px;
    background: url(/img/right.png) no-repeat;
    border: 0;
    outline: none;
}

.slider-frame button.prev {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 5px;
    top: 62%;
    margin-top: -20px;
    background: url(/img/left.png) no-repeat;
    background-size: 100%;
    border: 0;
    outline: none;
}

.indicate {
    font-family: 'bebas_neuebold';
    position: relative;
    margin: 0 auto;
    top: 10px;
}

.indicate ul li.answered {
    background: #fff;
    color: #000a4a;
}

.indicate ul li {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #fff;
    border: 2px solid #fff;
    margin: 0 3px;
}

.indicate ul li span {
    display: block;
}

.clear-quiz-bg {
    background: #004a8d;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 1;
}

.clear-quiz-bg.dropdown {
    -webkit-animation: clear-the-bg 0.8s 1;
    /* Safari 4+ */
    -moz-animation: clear-the-bg 0.8s 1;
    /* Fx 5+ */
    -o-animation: clear-the-bg 0.8s 1;
    /* Opera 12+ */
    animation: clear-the-bg 0.8s 1;
    /* IE 10+, Fx 29+ */
}

@-webkit-keyframes clear-the-bg {
    0% {
        top: -100%;
    }
    40% {
        top: 0;
    }
    60% {
        top: 0;
    }
    100% {
        top: -100%;
    }
}

@-moz-keyframes clear-the-bg {
    0% {
        top: -100%;
    }
    40% {
        top: 0;
    }
    60% {
        top: 0;
    }
    100% {
        top: -100%;
    }
}

@-o-keyframes clear-the-bg {
    0% {
        top: -100%;
    }
    40% {
        top: 0;
    }
    60% {
        top: 0;
    }
    100% {
        top: -100%;
    }
}

@keyframes clear-the-bg {
    0% {
        top: -100%;
    }
    40% {
        top: 0;
    }
    60% {
        top: 0;
    }
    100% {
        top: -100%;
    }
}

.genuine-frame,
.confident-frame,
.committed-frame,
.starter-frame,
.final-frame {
    position: absolute;
    left: 100%;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slideIn {
    left: 0;
}

.slideOut {
    left: -100%;
}

.genuine-frame {
    background-size: cover;
    background-position: center;
}

.committed-frame {
    background-size: cover;
    background-position: center;
}

.confident-frame {
    background-size: cover;
    background-position: center;
}

.final-frame.pass {
    background-size: cover;
    background-position: center;
}

.final-frame.no-pass {
    background-size: cover;
    background-position: center;
}

.confident-frame.q1.slideIn,
.committed-frame.q1.slideIn,
.genuine-frame.q1.slideIn,
.result-frame {
    -webkit-transition: all 0s ease-in-out;
    -moz-transition: all 0s ease-in-out;
    -ms-transition: all 0s ease-in-out;
    -o-transition: all 0s ease-in-out;
    transition: all 0s ease-in-out;
}

.confident-frame .question-frame.q6.prev,
.committed-frame .question-frame.q5.prev,
.genuine-frame .question-frame.q7.prev {
    -webkit-transition: all 0.3s ease-in-out 0.4s;
    -moz-transition: all 0.3s ease-in-out 0.4s;
    -ms-transition: all 0.3s ease-in-out 0.4s;
    -o-transition: all 0.3s ease-in-out 0.4s;
    transition: all 0.3s ease-in-out 0.4s;
}

@media only screen and (min-width:640px) {
    .question-positioner {
        height: 50%;
    }
    .introduction-content {
        height: 50%;
    }
    .question-frame {
        height: 50%;
    }
    .slider-frame {
        height: 580px;
    }
    .indicate {
        top: 50px;
        right: 50px;
        position: absolute;
    }
    .indicate ul li {
        width: 30px;
        height: 30px;
        margin: 0 10px;
        float: left;
    }
    .indicate ul li span {
        margin-top: 3px;
    }
    .question-frame .button {
        margin-top: 20px;
    }
    .genuine-frame.slideIn .value-big+p,
    .committed-frame.slideIn .value-big+p,
    .confident-frame.slideIn .value-big+p,
    .final-frame.slideIn .value-big+p {
        opacity: 1;
    }
    .slider-frame button.prev {
        width: 50px;
        height: 50px;
        left: 20px;
        top: 50%;
        margin-top: -25px;
    }
}

@media only screen and (min-width:992px) {
    .slider-frame {
        height: 600px;
    }
    .starter-frame .value-big,
    .genuine-frame .value-big,
    .committed-frame .value-big,
    .confident-frame .value-big {
        margin-top: -20px;
    }
    .slider-frame button.prev {
        left: 50px;
    }
    .final-frame .value-big {
        margin-top: 0;
    }
}

@media only screen and (min-width:1024px) {
    .final-frame .value-big {
        margin-top: -60px;
    }
    .slider-frame {
        height: 600px;
    }
}

p.asterisk {
    font-size: 12px;
}

.sitesearch {
    background-color:  #333;/* #004992; */
    border: 0 none;
    height: 30px;
}

.sitesearch::placeholder {
    color: white;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: bold;
    font-family: GothamRounded-Medium, sans-serif;
}

.search-button {
    background: none;
    border: 0 none;
}

.latest-brand-jobs .button {
    min-width: 260px;
}

@media screen and (max-width: 420px) {
    .latest-brand-jobs {
        padding: 15px;
    }
    .latest-brand-jobs .button {
        min-width: 240px;
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
}

.brand-overview-col-left {
    font-size: 24px;
    font-weight: 500;
    line-height: 36px;
    text-align: left;
}

.brand-overview-col-right {
    font-size: 15px;
    font-weight: 300;
    line-height: 23px;
    text-align: left;
}

.brand-overview-col-right .button {
    float: right;
}

@media screen and (max-width: 420px) {
    .brand-overview-col-right .button {
        width: 100%;
        min-width: 100%;
    }
}

.management-and-team-roles {
    background: grey;
}

.management-and-team-roles .container .tab-header span {
    font-family: 'GothamRounded-Medium';
    color: #fff;
    font-size: 24px;
    font-weight: normal;
}

.management-and-team-roles p {
    color: #FFFFFF;
    font-family: 'GothamRounded-Light';
    font-size: 15px;
    font-weight: 300;
    line-height: 23px;
    text-align: center;
}

/* IE */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .management-and-team-roles p {
    font-family: "Gotham", Helvetica, Arial, sans-serif !important;
  }
}

.job-title {
    color: #FFFFFF;
    font-family: 'GothamRounded-Light';
    font-size: 26px;
    font-weight: 300;
    line-height: 26px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.brand-template .intro-slide {
    background-image: none;
    background-color: grey;
    overflow: visible;
    z-index: 3;
}

.brand-template .other-header-wrapper {
  top: 52%;
}

.brand-template .intro-border-wrapper {
  top: 55% !important;
}

.brand-template .other-header-wrapper img {
    margin-bottom: 50px;
}

@media screen and (max-width: 420px) {
    .brand-template .other-header-wrapper img {
        width: 103px;
        height: 24px;
    }
}

.brand-template .search-jobs {
  position: relative;
}

@media screen and (min-width: 768px){
  .brand-template .search-jobs {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)  {
  .brand-template .search-jobs {
    position: relative;
  }
}

.brand-template .search-jobs .button {
  margin: 0px;
}

.sub-functions {
    background: lightgrey;
    padding: 100px 0;
}

@media screen and (max-width: 420px) {
    .sub-functions {
        padding: 30px 0;
    }
}

.sub-functions .border-wrapper {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 40px;
    border: 5px solid #fff;
}

@media screen and (max-width: 420px) {
    .sub-functions .border-wrapper {
        margin: 25px;
    }
}

.sub-functions p {
    margin: 0;
    padding: 0;
}

.sub-functions .text-nav {
    position: absolute;
    width: 100%;
    bottom: -15px;
    left: 0;
}

.sub-functions .bullet {
    display: inline-block;
    width: 14px;
    height: 14px;
}

p.brand-name {
    font-family: 'GothamRounded-Medium';
    font-size: 15px;
    font-weight: 500;
    line-height: 23px;
}

p.location {
    font-family: 'GothamRounded-Light';
    font-size: 15px;
    font-weight: 300;
    line-height: 23px;
    text-align: center;
}

.sub-functions .button {
    margin-top: 30px;
}

@media screen and (max-width: 420px) {
    .sub-functions .button {
        min-width: 165px;
    }
}

.brand-template .internships-container {
    background-image: none;
    background: grey;
}

.brand-template .internships-container h3 {
    margin-bottom: 35px;
}

.brand-template .sub-functions .text-content-slider {
    min-height: 310px;
}

.search-jobs {
    background-color: #531F59;
    padding: 60px 0;
    z-index: auto;
    overflow: visible !important;
}

.search-jobs .form-group {
    padding-top: 15px;
    text-align: left !important;
}

.search-jobs .form-group label {
    font-family: 'GothamRounded-Medium';
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
}

.search-jobs .form-group .form-control,
.search-jobs .bootstrap-select,
.dropdown-toggle {
    height: 45px;
    border-radius: 0;
    min-width: 100%;
    width: 100% !important;
    text-align: left !important;
}

.search-jobs .form-group .button {
    background-color: #8AC6BA;
    height: 46px;
    margin-top: 25px;
    min-width: 100%;
    color: #531F59;
}

.chef-landing .search-jobs .bootstrap-select .btn.dropdown-toggle {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -o-flex;
  align-items: center;
  -ms-flex-align-items: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
}

.search-jobs .dropdown .btn {
    color: #000000;
    font-family: 'GothamRounded-Light';
    font-size: 15px;
    font-weight: 300;
}

.search-jobs .dropdown span.caret {
    right: 0;
}

.search-jobs input::placeholder,
.search-jobs .filter-option,
.search-jobs .dropdown-menu .text {
    font-family: 'GothamRounded-Light';
    font-size: 15px;
    font-weight: 300;
}

.search-jobs .button span {
    display: inline-block;
}

.search-jobs .button .glyphicon-search {
    font-family: 'Glyphicons Halflings';
}

.dropdown-menu.open {
    border-radius: 0;
    z-index: 100000;
}

.dropdown-menu.inner {
    z-index: 100000;
}

.management-and-team-roles .tab-content-wrapper img {
    display: block;
}

.no-gutter {
    padding-right: 0 !important;
    padding-left: 0 !important;
    position: relative;
    background-image: url('Http://placehold.it/320x400');
    background-size: cover;
    height: 320px;
    width: 400px;
    border: 1px solid grey;
}

.nopadding {
    padding: 0 !important;
    margin: 0 !important;
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.full-height {
    height: 100%;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.5);
    /*dim the background*/
}

@media screen and (max-width: 420px) {
    .display-none-mobile {
        display: none;
    }
}

.white-accordion {
    background-color: white;
}

.white-accordion .tab-header span {
    color: #531F59 !important;
}

.white-accordion .plus-container {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}

.internal-accordions {
    margin-top: 30px;
}

.search-jobs-intro-container {
    padding: 20px 0 !important;
}

@media only screen and (min-width:768px) {
    .search-jobs-intro-container {
        padding: 50px 0 !important;
    }
}

.job-search-intro-slide {
    height: auto !important;
}

@media only screen and (min-width: 800px) {
    .job-search-intro-slide {
        height: 435px !important;
    }
}

.job-search-intro-slide .container {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    justify-content: space-between;
    -ms-flex-justify-content: space-between;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    align-items: center;
    -ms-flex-align-items: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    width: 100%;
}

.job-search-intro-header,
.job-search-intro-buttons {
    width: auto;
}

.job-search-intro-slide h1 {
    font-size: 55px;
    margin: 0px;
}

@media only screen and (min-width:768px) {
    .job-search-intro-slide h1 {
        font-size: 122px !important;
    }
}

.job-search-border-wrapper {
    background: rgba(0, 0, 0, 0.7);
    max-width: 400px;
    display: none;
}

@media only screen and (min-width:768px) {
    .job-search-border-wrapper {
        display: block;
    }
}

.job-search-border-wrapper .border-wrapper {
    padding: 40px;
    width: 100%;
}

.job-search-border-wrapper .border-wrapper .button {
    width: 100%;
}

.job-search-border-wrapper .border-wrapper a:first-child .button {
    margin: 0px;
}

.search-jobs-blue {
    background-color: #004B90;
    padding: 30px 0px 0px 0px;
}

.search-jobs-blue form {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}

.search-jobs-blue .lightbox {
    display: none;
}

@media only screen and (max-width:768px) {
    .search-jobs-blue form .form-group {
        width: 100%;
    }
}

@media only screen and (min-width:768px) {
    .search-jobs-blue form {
        /* flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap; */
    }
    .search-jobs-blue form .form-group {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media only screen and (min-width:768px) {
    .form-group.long-input {
        width: 30%;
    }
    .form-group.medium-input {
        width: 20%;
    }
    .form-group.short-input {
        width: 20%;
    }
}

@media only screen and (min-width:1500px) {
    .form-group.long-input {
        width: 20%;
    }
    .form-group.medium-input {
        width: 15%;
    }
    .form-group.short-input {
        width: 10%;
    }
}

@media only screen and (min-width: 768px) {
    form.advanced-opened .form-group.long-input {
        width: 40%;
    }
    form.advanced-opened .form-group.medium-input {
        width: 30%;
    }
    form.advanced-opened .form-group.short-input {
        width: 20%;
    }
}

.search-jobs-blue .col-md-12 {
    padding: 0px !important;
}

@media only screen and (min-width:768px) {
    .search-jobs-blue {
        padding: 0px;
    }
}

.search-jobs-blue .button {
    margin-top: 5px !important;
    border: 1px solid #ffffff;
    background-color: #004B90 !important;
    color: white !important;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    align-items: center;
    -ms-flex-align-items: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    justify-content: center;
    -ms-flex-justify-content: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    margin-bottom: 20px;
}

@media only screen and (min-width:768px) {
    .search-jobs-blue .button {
        margin-top: 0px !important;
        margin-bottom: 0px;
    }
    .search-jobs-blue label {
        display: none;
    }
}

.search-jobs-blue .glyphicon-search {
    font-size: 15px;
}

.search-jobs-blue .advanced-search-input {
    display: none;
}

.advanced-search-input.active {
    display: block;
}

@media only screen and (min-width:1500px) {
    .search-jobs-blue .advanced-search-input {
        display: block;
    }
}

.search-jobs-blue .form-group {
    padding-top: 10px !important;
}

@media only screen and (min-width:768px) {
    .search-jobs-blue .form-group {
        padding-top: 15px !important;
    }
}

.results-bar, .results-bar-bottom {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    justify-content: space-between;
    -ms-flex-justify-content: space-between;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    margin-bottom: 15px;
    align-items: center;
    -ms-flex-align-items: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    font-family: 'GothamRounded-Light';
}

.results-bar-bottom {
  justify-content: center;
  -ms-flex-justify-content: center;
  -webkit-justify-content: center;
}

@media screen and (max-width: 768px) {
    .results-bar {
        border-bottom: 1px solid #DBDBDB;
        padding-bottom: 10px;
        position: relative;
    }
}

.results-bar-center {
  display: none;
}

.results-bar-center.active {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -o-flex;
}

.results-bar-left,
.results-bar-right {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
}

.results-bar-left {
    color: #004B90;
    font-family: 'GothamRounded-Medium';
    font-size: 20px;
    line-height: 36px;
}

@media only screen and (min-width:768px) {
    .results-bar-left {
        color: #004B90;
        font-family: 'GothamRounded-Medium';
        font-size: 24px;
        line-height: 36px;
    }
}

@media screen and (max-width: 768px) {
    .results-bar-center {
        position: absolute;
        bottom: -45px;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        width: auto;
    }
}

/* IE */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .results-bar-center a {
    font-family: "Gotham", Helvetica, Arial, sans-serif !important;
  }
}

@media only screen and (min-width:768px) {
    .results-bar-center.active {
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: -o-flex;
    }
}

.results-bar-center a {
    color: #262729;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 3px;
    line-height: 18px;
    text-align: center;
}

.results-bar-center div {
    margin-right: 10px;
}

.results-bar-center .active a {
    font-family: 'GothamRounded-Medium';
    color: #004B90;
    font-weight: bold;
}

.results-bar-right a {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    align-items: center;
    -ms-flex-align-items: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
}

.results-bar-right a span {
    color: #262729;
    font-family: 'GothamRounded-Medium';
    font-size: 14px;
    line-height: 16px;
}

.results-bar-right a span.view {
    display: none;
}

.results-bar-right .glyphicon {
    margin-left: 10px;
    font-size: 18px;
}

.show-jobs-list,
.show-jobs-map {
    cursor: pointer;
    background-color: transparent;
    border: 0;
}

.show-jobs-list.active span,
.show-jobs-map.active span {
    color: #004B90 !important;
    font-family: 'GothamRounded-Medium';
}

@media only screen and (min-width:768px) {
    .results-bar-right a span.view {
        display: block;
    }
}

.results-bar-right img {
    margin-left: 5px;
}

.results-bar-right div:first-child {
    margin-right: 5px;
}

@media only screen and (min-width:768px) {
    .results-bar-right div:first-child {
        margin-right: 25px;
    }
}

.job-item {
    padding: 10px 0 15px 0; /* 30px */
    margin-bottom: 10px;
    border-top: 1px solid #DBDBDB;
    display: block;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

@media only screen and (min-width:768px) {
    .job-item {
        padding: 40px;
        margin-bottom: 25px;
        position: relative;
        border: 1px solid #DBDBDB;
    }
}

.job-item-container {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

@media only screen and (min-width:768px) {
    .job-item-container {
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: -o-flex;
        flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
    }
}

.job-item-container:last-child {
    margin-bottom: 0px;
}

.job-item-left,
.job-item-right {
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100% !important;
}

@media only screen and (min-width:768px) {
    .job-item-left,
    .job-item-right {
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: -o-flex;
        flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
    }
    .job-item-left {
        /* width: 70% !important;
        max-width: 70%; */
        width: calc(100% - 270px) !important;
        padding-right: 50px;
        -ms-flex-preferred-size: 70%;
    }
    .job-item-right {
        width: 270px !important;
        max-width: 270px;
        -ms-flex-preferred-size: 30%;
    }
}

.job-item-right > div {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    justify-content: center;
    -ms-flex-justify-content: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    align-items: center;
    -ms-flex-align-items: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    max-width: 100%;
}

.job-item-right div:last-child a {
    width: 100%;
    max-width: 100%;
    display: block;
}

.job-item-right .the-icon {
    position: absolute;
    top: 30px;
    right: 0;
}

@media only screen and (min-width:768px) {
  .job-item-right .the-icon {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 50px;
    margin-bottom: 40px;
    max-height: 50px;
    position: relative;
  }
}

.job-item-right .button {
    width: 100% !important;
    margin: 0;
    margin-top: 5px;
    max-width: 100%;
    display: block;
}


/* @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .selector { property:value\9; }
.job-item-right .button {
    width: 90% !important;
} */

.job-item-title {
    width: 100%;
    color: #004B90;
    font-size: 15px;
    line-height: 23px;
    margin-bottom: 10px;
    font-family: 'GothamRounded-Medium';
    max-width: 100%;
}

@media only screen and (min-width:768px) {
    .job-item-title {
        font-size: 20px;
        line-height: 36px;
    }
}

.job-item-cat {
    display: block;
    color: #000000;
    font-size: 12px;
    max-width: 100%;
}

@media only screen and (min-width:768px) {
    .job-item-cat {
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: -o-flex;
        align-items: center;
        -ms-flex-align-items: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        font-size: 14px;
        line-height: 16px;
        margin-bottom: 30px;
    }
}

.job-item-cat div:first-child {
    margin-right: 50px;
}

.job-item-cat span {
    font-family: 'GothamRounded-Medium';
    margin-right: 5px;
}

.job-item-cat p {
    font-family: 'GothamRounded-Light';
}

/* IE */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .job-item-cat, .job-item-cat p {
    font-family: "Gotham", Helvetica, Arial, sans-serif !important;
    line-height: auto;
  }
}

.job-item-cat div {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
}

.job-item-descr {
    display: none;
}

@media only screen and (min-width:768px) {
    .job-item-descr {
        display: block;
        max-width: 100%;
        width: 100%;
    }
}

.job-item-descr p {
    font-family: 'GothamRounded-Light';
    color: #000000;
    font-size: 15px;
    line-height: 22px;
}

/* IE */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .job-item-descr p {
    font-family: "Gotham", Helvetica, Arial, sans-serif !important;
  }
}

.map-results,
.job-results {
    display: none;
}

@media screen and (max-width: 768px) {
    .job-results {
        padding-top: 25px;
    }

    .map-results {
      padding-top: 50px;
    }

    .job-results .job-item:first-of-type {
        border: 0 none !important;
    }
}

.job-results.active,
.map-results.active {
    display: block;
}

.glyphicon {
    font-family: 'Glyphicons Halflings' !important;
}

.job-details-descr ul li,
.job-details-descr i,
.job-details-descr b {
    color: #000000;
    font-family: 'GothamRounded-Light';
    font-size: 15px;
    line-height: 23px;
}

/* IE */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .job-details-descr p, .job-details-descr ul li, .job-details-descr b, .job-details-descr i, .job-details-ref p, .job-title, p.location {
    font-family: "Gotham", Helvetica, Arial, sans-serif !important;
  }
}

.job-details-descr a {
    color: #000000;
    font-family: 'GothamRounded-Medium';
    font-size: 15px;
    line-height: 23px;
    cursor: pointer;
    text-decoration: underline;
}

.job-details-intro-slide {
    height: auto !important;
    background-color: #5B3660;
    padding-bottom: 10px;
}

.colored-overlay {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: rgba(83, 31, 89, 0.3);
    z-index: 2;
}

@media only screen and (min-width:768px) {
    .job-details-intro-slide {
        height: 736px !important;
        padding: 0;
    }
}

.job-details-intro-slide .other-header-wrapper {
    display: block;
}

.job-details-intro-slide h1 {
    font-size: 40px;
}

@media only screen and (min-width:768px) {
    .job-details-intro-slide h1 {
        font-size: 70px;
    }
}

.job-details-logo,
.job-details-header {
    margin-bottom: 40px;
}

@media only screen and (min-width:768px) {
    .job-details-border-wrapper {
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: -o-flex;
        justify-content: space-between;
        -ms-flex-justify-content: space-between;
        -ms-flex-pack: space-between;
        -webkit-justify-content: space-between;
        align-items: center;
        -ms-flex-align-items: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
    }
}

.job-details-border-wrapper>div {}

@media only screen and (min-width:768px) {
    .job-details-border-wrapper>div {
        width: 33%;
        display: block;
    }
}

.job-details-border-wrapper>div span {
    display: block;
}

.job-detail {
    padding: 10px 0px;
}

.job-detail:after {
    content: "";
    display: block;
    margin: 0 auto;
    width: 40%;
    padding-top: 10px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

.job-detail:last-child:after {
    display: none;
}

@media only screen and (min-width:768px) {
    .job-detail {
        border-right: 2px solid rgba(255, 255, 255, 0.3);
        padding: 0px;
    }
    .job-detail:after {
        display: none;
    }
}

.job-detail:last-child {
    border: 0 none;
}

.job-detail h2 {
    font-size: 30px !important;
    margin-left: 0px;
}

.job-detail span {
    color: #FFFFFF;
    font-size: 20px;
    line-height: 40px;
    text-align: center;
    font-family: 'bebas_neuebold';
}

.job-details-container {
    display: block;
}

@media only screen and (min-width:768px) {
    .job-details-container {
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: -o-flex;
    }
}

@media only screen and (min-width:768px) {
    .job-details-content {
        padding-right: 130px;
    }
}

.mobile-job-details-btns {
    margin-bottom: 50px;
}

.mobile-job-details-btns a:first-child .button {
    border: 0 none;
}

@media only screen and (min-width:768px) {
    .mobile-job-details-btns {
        display: none;
    }
}

.job-details-content,
.job-details-btns {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.job-details-btns {
    margin-top: 50px;
    margin-bottom: 50px;
}

@media only screen and (min-width:768px) {
    .job-details-btns {
        margin-top: 0px;
        margin-bottom: 0px;
    }
}

.job-details-sub-heading {
    margin-bottom: 50px;
}

.job-details-sub-heading p {
    color: #531F59;
    font-family: 'GothamRounded-Medium';
    font-size: 20px;
    line-height: 24px;
}

@media only screen and (min-width:768px) {
    .job-details-sub-heading p {
        line-height: 36px;
    }
}

.job-details-descr {
    margin-bottom: 60px;
}

.job-details-descr p {
    color: #000000;
    font-family: 'GothamRounded-Light';
    font-size: 15px;
    line-height: 23px;
}

.job-details-ref div {
    color: #000000;
    font-family: 'GothamRounded-Light';
    font-size: 15px;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
}

.job-details-ref div span {
    font-family: 'GothamRounded-Medium';
    margin-right: 5px;
}

.job-details-btns a {
    width: 100%;
}

.job-details-btns .button,
.mobile-job-details-btns .button {
    width: 100% !important;
    min-width: 100% !important;
    border: 1px solid rgba(83, 31, 89, 0.5);
    background-color: #FFFFFF;
    color: #531F59;
}

.job-details-btns .button:before,
.mobile-job-details-btns .button:before {
    background: #531F59;
    color: #ffffff;
}

.job-details-btns a:first-child .button {
    margin-top: 0px;
    background-color: #FFCD21;
    border: 0 none !important;
}

.relevant-jobs {
    padding: 40px 0;
}

@media only screen and (min-width:768px) {
    .relevant-jobs {
        padding: 80px 0;
    }
}

.relevant-jobs h2 {
    color: #531F59 !important;
    font-family: 'bebas_neuebold';
    font-size: 22px !important;
    line-height: 21px;
    text-align: center;
    margin-bottom: 20px;
}

@media only screen and (min-width:768px) {
    .relevant-jobs h2 {
        font-size: 30px !important;
        margin-bottom: 50px;
    }
}

.relevant-jobs .text-content-slider {
    min-height: 350px;
}

.button-yellow:before {
    background: #531F59 !important;
    color: #ffffff;
}

.relevant-jobs .text-content-slide a,
.relevant-jobs .text-content-slide a .button {
    width: 100%;
}

.relevant-jobs .border-wrapper {
    background-image: url('http://placehold.it/600x600');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    -webkit-transition: all 1s ease-in;
    -moz-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    -ms-transition: all 1s ease-in;
    transition: all 1s ease-in;
}

.relevant-jobs .text-content-slider a {
    position: absolute;
    left: 0px;
    bottom: 45px;
}

.mobile-advanced-search {
    background: #003F82;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    justify-content: center;
    -ms-flex-justify-content: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    align-items: center;
    -ms-flex-align-items: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    padding: 20px 0px;
    cursor: pointer;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

@media only screen and (min-width:1500px) {
    .mobile-advanced-search {
        display: none;
    }
}

@media only screen and (min-width: 768px) and (max-height: 850px) {
  .mobile-advanced-search {
    padding: 10px 0px;
  }
}

.mobile-advanced-search p {
    color: #FFFFFF;
    font-family: Helvetica;
    font-size: 11px;
    line-height: 13px;
    text-transform: uppercase;
    margin: 0px;
    font-weight: bold;
    margin-right: 10px;
}

.search-tab-dropdown {
    font-family: 'GothamRounded-Light';
    height: 45px;
    border-radius: 0;
    min-width: 100%;
    width: 100% !important;
    text-align: left !important;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: black;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    justify-content: space-between;
    -ms-flex-justify-content: space-between;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    align-items: center;
    -ms-flex-align-items: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    cursor: pointer;
}

/* IE */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .search-tab-dropdown {
    font-family: "Gotham", Helvetica, Arial, sans-serif !important;
  }
}

.search-tab-dropdown p {
    margin: 0px;
}

#search-tabs-wrapper {
    background-color: #004B90;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.search-tab {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    position: relative;
    top: 0;
    left: 0;
    overflow: hidden;
    max-height: 0;
    -webkit-transition: max-height 0.3s ease-in-out, padding 0s 0.3s;
    -moz-transition: max-height 0.3s ease-in-out, padding 0s 0.3s;
    -ms-transition: max-height 0.3s ease-in-out, padding 0s 0.3s;
    -o-transition: max-height 0.3s ease-in-out, padding 0s 0.3s;
    transition: max-height 0.3s ease-in-out, padding 0s 0.3s;
}

.search-tab.active {
    max-height: 350px;
    padding: 15px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.search-tab-item-wrapper {
    width: 25%;
    box-sizing: border-box;
    padding-right: 5px;
}

.search-tab-item {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
}

.search-tab-item label {
    display: block !important;
    margin-left: 7px;
}

.featherlight-content {
    padding: 0px !important;
    border-bottom: none !important;
}

.featherlight-close-icon {
    height: 50px !important;
    width: 50px !important;
    border-radius: 50px !important;
    border: 7px solid #003C74 !important;
    background-color: white !important;
    top: 15px !important;
    right: 30px !important;
    color: #004B90 !important;
    font-size: 20px;
    font-family: 'GothamRounded-Medium' !important;
}

.searchbox {
    width: 300px;
    height: auto;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    padding-bottom: 65px;
}

@media screen and (min-width: 400px) {
    .searchbox {
        width: 350px;
    }
}

@media screen and (min-width: 500px) {
    .searchbox {
        width: 450px;
    }
}

@media screen and (min-width: 600px) {
    .searchbox {
        width: 550px;
    }
}

@media screen and (min-width: 768px) {
    .searchbox {
        width: 720px;
    }
}

@media screen and (min-width: 900px) {
    .searchbox {
        width: 850px;
    }
}

@media screen and (min-width: 1024px) {
    .searchbox {
        width: 970px;
    }
}

.searchbox-header {
    height: 80px;
    background-color: #004B90;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    align-items: center;
    -ms-flex-align-items: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    padding-left: 30px;
    box-sizing: border-box;
}

.searchbox-header h3 {
    font-size: 21px;
}

@media screen and (min-width: 500px) {
    .searchbox-header h3 {
        font-size: 24px;
    }
}

.searchbox-content {
    background-color: #EBF1F6;
    padding: 30px;
    box-sizing: border-box;
    max-height: 400px;
    overflow: scroll;
}

@media screen and (min-width: 768px) {
    .searchbox-content {
        max-height: 550px;
    }
}

@media screen and (min-height: 1024px) {
    .searchbox-content {
        max-height: 700px;
    }
}

.searchbox-row {
    background: white;
    padding: 20px 30px;
    box-sizing: border-box;
    margin-bottom: 30px;
}

.searchbox-row h4 {
  margin: 0;
  padding: 0;
}

.searchbox-row:last-of-type {
    margin-bottom: 0px;
}

.searchbox-checkboxes {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}

.searchbox-checkboxes div {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    padding-top: 20px;
    position: relative;
    align-items: center;
}

.searchbox-checkboxes div.disabled {
    opacity: 0.55;
}

.searchbox-checkboxes div label:first-of-type {
    width: calc(100% - 25px);
    word-break: break-word;
}

.searchbox-checkboxes div:first-of-type {
    padding-top: 0px;
}

#lightbox-btn.disabled .search-tab-dropdown {
  cursor: not-allowed
}

#lightbox-btn.disabled p {
  opacity: 0.6;
}

#lightbox-btn span.glyphicon {
  transition: opacity 0.2s;
}

#lightbox-btn.disabled span.glyphicon {
  opacity: 0;
}

@media screen and (min-width: 500px) {
    .searchbox-checkboxes div {
        width: 50%;
        padding-right: 15px;
    }
    .searchbox-checkboxes div:first-of-type {
        padding-top: 20px;
    }
}

@media screen and (min-width: 600px) {
    .searchbox-checkboxes div {
        width: 50%;
        padding-right: 30px;
    }
}

@media screen and (min-width: 768px) {
    .searchbox-checkboxes div {
        width: 25%;
        padding-right: 45px;
    }
}

@media screen and (min-width: 900px) {
    .searchbox-checkboxes div {
        padding-right: 55px;
    }
}

@media screen and (min-width: 1024px) {
    .searchbox-checkboxes div {
        padding-right: 55px;
    }
}

.searchbox-checkboxes label {
    color: #000000;
    font-family: 'GothamRounded-Light';
    font-size: 13px;
    font-weight: 300;
    line-height: 14px;
}

.searchbox-checkboxes input {
    margin: 0px;
    margin-left: 5px;
}

.searchbox-footer {
    height: 80px;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    justify-content: space-between;
    -ms-flex-justify-content: space-between;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    background-color: #004B90;
    padding: 15px 30px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.searchbox-footer .button {
    margin-top: 0px;
    min-width: 90px !important;
}

@media screen and (min-width: 768px) {
    .searchbox-footer .button {
        min-width: 200px !important;
    }
}

.searchbox-footer .button:first-of-type {
    border: 1px solid white;
}

.bootstrap-select.btn-group .dropdown-toggle .caret {
    font-family: 'Glyphicons Halflings';
    color: black !important;
    height: 0;
    width: 0;
    border: 0;
    top: 14px !important;
    right: 23px !important;
}

.bootstrap-select.btn-group .dropdown-toggle .caret:before {
    content: "\e114";
}

.bootstrap-select.btn-group.open .dropdown-toggle .caret:before {
    content: "\e113";
}

.bootstrap-select .filter-option {
    color: black;
}

.bootstrap-select .filter-option img {
    margin-right: 10px;
}

.bootstrap-select.open .filter-option {
    opacity: 0.4;
}

.bootstrap-select .btn.dropdown-toggle .filter-option {
    display: flex !important;
    display: -webkit-flex !important;
    display: -moz-flex !important;
    display: -ms-flexbox !important;
    display: -o-flex !important;
    align-items: center !important;
    -ms-flex-align-items: center !important;
    -ms-flex-align: center !important;
    -webkit-align-items: center !important;
}

.bootstrap-select .btn.dropdown-toggle {
    padding: 0px 12px !important;
}

.bootstrap-select.open .btn.dropdown-toggle {
    border-bottom: 0 none;
    background-color: white;
}

.dropdown-menu {
    padding: 0px;
    margin: 0px;
    top: 45px;
    border: 1px solid #adadad;
    border-top: 0 none;
}

.dropdown-menu.inner li {
    padding: 0px;
}

.dropdown-menu.inner li span.text {
    color: black;
}

.dropdown-menu.inner li:nth-child(odd) {
    background-color: #F0F0F0;
}

.dropdown-menu.inner li a {
    height: 50px;
    padding: 0px 13px;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    align-items: center;
    -ms-flex-align-items: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
    background-color: #d0d0d0;
}

.dropdown-menu.inner li img {
    margin-right: 10px;
}

.job-item-right.barblock .the-icon {
    background-image: url("/img/brand_icons/barblock_large.png");
    width: 100px;
    height: 50px;
}

.job-item-right.barblock .button {
    background: #47433d !important;
}

.job-item-right.barblock .button:before {
    background: #47433d !important;
}

.job-item-right.beefeater .the-icon {
    background-image: url("/img/brand_icons/beefeater_large.png");
    width: 100px;
    height: 50px;
}

.job-item-right.beefeater .button {
    background: #e56209 !important;
}

.job-item-right.beefeater .button:before {
    background: #e56209 !important;
}

.job-item-right.brewersfayre .the-icon {
    background-image: url("/img/brand_icons/brewersfayre_large.png");
    width: 50px;
    height: 50px;
}

.job-item-right.brewersfayre .button {
    background: #ea3024 !important;
}

.job-item-right.brewersfayre .button:before {
    background: #ea3024 !important;
}

.job-item-right.cookhousepub .the-icon {
    background-image: url("/img/brand_icons/cookhousepub_large.png");
    background-repeat: no-repeat; /* */
    width: 100px;
    height: 50px;
}

.job-item-right.cookhousepub .button {
    background: #194437 !important; /* #716359 */
}

.job-item-right.cookhousepub .button:before {
    background: #194437 !important; /* #716359 */
}

.job-item-right.costa .the-icon {
    background-image: url("/img/brand_icons/costa_large.png");
    width: 50px;
    height: 50px;
}

.job-item-right.costa .button {
    background: #98142e !important;
}

.job-item-right.costa .button:before {
    background: #98142e !important;
}

.job-item-right.hubpremierinn .the-icon {
    background-image: url("/img/brand_icons/hubpremierinn_large.png");
    width: 50px;
    height: 50px;
}

.job-item-right.hubpremierinn .button {
    background: #bcd11b !important;
}

.job-item-right.hubpremierinn .button:before {
    background: #bcd11b !important;
}

.job-item-right.premierinn .the-icon {
    background-image: url("/img/brand_icons/premierinn_large.png");
    background-repeat: no-repeat; /* */
    width: 100px;
    height: 50px;
}

.job-item-right.premierinn .button {
    background: #4c1b5c !important;
}

.job-item-right.premierinn .button:before {
    background: #4c1b5c !important;
}

.job-item-right.tabletable .the-icon {
    background-image: url("/img/brand_icons/tabletable_large.png");
    width: 50px;
    height: 50px;
}

.job-item-right.tabletable .button {
    background: #86978e !important;
}

.job-item-right.tabletable .button:before {
    background: #86978e !important;
}

.job-item-right.whitbreadinns .the-icon {
    background-image: url("/img/brand_icons/whitbreadinns_large.png");
    width: 100px;
    height: 50px;
}

.job-item-right.whitbreadinns .button {
    background: #6d6d6d !important;
}

.job-item-right.whitbreadinns .button:before {
    background: #6d6d6d !important;
}

.job-item-right.whitbread .the-icon {
    background-image: url("/img/brand_icons/whitbread_large.png");
    width: 100px;
    height: 50px;
}

.job-item-right.whitbread .button {
    background: #00498F !important;
}

.job-item-right.whitbread .button:before {
    background: #00498F !important;
}

.job-item-right.job-item-right .button:before {
    color: white;
}

.job-item-right.job-item-right .button:hover {
    color: #337ab7;
    background: white !important;
}

button.button span {
    padding: 12px 10px;
}

.categories-wrapper, .categories-wrapper-popup {
    display: none;
}

.categories-chosen, .categories-chosen-popup {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    align-items: center;
    -ms-flex-align-items: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    margin-top: 35px;
    width: 100%;
}

.categories-chosen-popup {
    margin-top: 0;
    margin-bottom: 10px;
}

.category-label button {
    background-color: #F4F4F4;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    align-items: center;
    -ms-flex-align-items: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    margin-right: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    /* width: 20%; */
}

.categories-chosen-popup .category-label button {
    background-color: #D3E0EA;
}

.category-label:last-of-type {
    margin-right: 0px;
}

.category-label button {
    font-family: 'GothamRounded-Medium';
    font-size: 14px;
    line-height: 16px;
    color: #8D8D8D;
    border: 0;
}

.categories-chosen-popup .category-label button {
    color: #004B90;
}

.category-label span.glyphicon {
    color: #B6B6B6;
    font-weight: 100;
    font-size: 18px;
    margin-left: 20px;
}

.categories-chosen-popup .category-label button.glyphicon {
    color: #9EBAD4;
}


/* JOB DETAILS BARBLOCK STYLES */

.content-wrapper.barblock .colored-overlay {
    background-color: rgba(224, 122, 63, 0.3);
}

.content-wrapper.barblock .job-details-btns a:first-child .button,
.content-wrapper.barblock .button-yellow {
    background: #012a47 !important;
    color: white !important;
}

.content-wrapper.barblock .job-details-btns a:first-child .button:before,
.content-wrapper.barblock .button-yellow:before {
    color: #012a47 !important;
    background: white !important;
    border: 1px solid #012a47 !important;
}

.content-wrapper.barblock .job-details-btns .button {
    border-color: #012a47;
    color: #012a47;
}

.content-wrapper.barblock .job-details-btns .button:before {
    background: #012a47;
}

.content-wrapper.barblock .job-details-sub-heading p,
.content-wrapper.barblock .relevant-jobs h2 {
    color: #012a47 !important;
}


/* JOB DETAILS BEEFEATER STYLES */

.content-wrapper.beefeater .colored-overlay {
    background-color: rgba(234, 109, 0, 0.3);
}

.content-wrapper.beefeater .job-details-btns a:first-child .button,
.content-wrapper.beefeater .button-yellow {
    background: #eba94b !important;
    color: white !important;
}

.content-wrapper.beefeater .job-details-btns a:first-child .button:before,
.content-wrapper.beefeater .button-yellow:before {
    color: #eba94b !important;
    background: white !important;
    border: 1px solid #eba94b !important;
}

.content-wrapper.beefeater .job-details-btns .button {
    border-color: #eba94b;
    color: #eba94b;
}

.content-wrapper.beefeater .job-details-btns .button:before {
    background: #eba94b;
}

.content-wrapper.beefeater .job-details-sub-heading p,
.content-wrapper.beefeater .relevant-jobs h2 {
    color: #ea6d00 !important;
}


/* JOB DETAILS BREWERSFAYRE STYLES */

.content-wrapper.brewersfayre .colored-overlay {
    background-color: rgba(247, 185, 24, 0.3);
}

.content-wrapper.brewersfayre .job-details-btns a:first-child .button,
.content-wrapper.brewersfayre .button-yellow {
    background: #d51500 !important;
    color: white !important;
}

.content-wrapper.brewersfayre .job-details-btns a:first-child .button:before,
.content-wrapper.brewersfayre .button-yellow:before {
    color: #d51500 !important;
    background: white !important;
    border: 1px solid #d51500 !important;
}

.content-wrapper.brewersfayre .job-details-btns .button {
    border-color: #d51500;
    color: #d51500;
}

.content-wrapper.brewersfayre .job-details-btns .button:before {
    background: #d51500;
}

.content-wrapper.brewersfayre .job-details-sub-heading p,
.content-wrapper.brewersfayre .relevant-jobs h2 {
    color: #d51500 !important;
}


/* JOB DETAILS COOKHOUSEPUB STYLES */

.content-wrapper.cookhousepub .colored-overlay {
    background-color: rgba(234, 131, 0, 0.3);
}

.content-wrapper.cookhousepub .job-details-btns a:first-child .button,
.content-wrapper.cookhousepub .button-yellow {
    background: #675b53 !important;
    color: white !important;
}

.content-wrapper.cookhousepub .job-details-btns a:first-child .button:before,
.content-wrapper.cookhousepub .button-yellow:before {
    color: #675b53 !important;
    background: white !important;
    border: 1px solid #675b53 !important;
}

.content-wrapper.cookhousepub .job-details-btns .button {
    border-color: #675b53;
    color: #675b53;
}

.content-wrapper.cookhousepub .job-details-btns .button:before {
    background: #675b53;
}

.content-wrapper.cookhousepub .job-details-sub-heading p,
.content-wrapper.cookhousepub .relevant-jobs h2 {
    color: #675b53 !important;
}


/* JOB DETAILS COSTA STYLES */

.content-wrapper.costa .colored-overlay {
    background-color: rgba(224, 122, 63, 0.3);
}

.content-wrapper.costa .job-details-btns a:first-child .button,
.content-wrapper.costa .button-yellow {
    background: #2f3130 !important;
    color: white !important;
}

.content-wrapper.costa .job-details-btns a:first-child .button:before,
.content-wrapper.costa .button-yellow:before {
    color: #2f3130 !important;
    background: white !important;
    border: 1px solid #2f3130 !important;
}

.content-wrapper.costa .job-details-btns .button {
    border-color: #2f3130;
    color: #2f3130;
}

.content-wrapper.costa .job-details-btns .button:before {
    background: #2f3130;
}

.content-wrapper.costa .job-details-sub-heading p,
.content-wrapper.costa .relevant-jobs h2 {
    color: #2f3130 !important;
}


/* JOB DETAILS HUB PREMIER INN STYLES */

.content-wrapper.hubpremierinn .colored-overlay {
    background-color: rgba(114, 128, 0, 0.3);
}

.content-wrapper.hubpremierinn .job-details-btns a:first-child .button,
.content-wrapper.hubpremierinn .button-yellow {
    background: #531f59 !important;
    color: white !important;
}

.content-wrapper.hubpremierinn .job-details-btns a:first-child .button:before,
.content-wrapper.hubpremierinn .button-yellow:before {
    color: #531f59 !important;
    background: white !important;
    border: 1px solid #531f59 !important;
}

.content-wrapper.hubpremierinn .job-details-btns .button {
    border-color: #531f59;
    color: #531f59;
}

.content-wrapper.hubpremierinn .job-details-btns .button:before {
    background: #531f59;
}


/* JOB DETAILS PREMIER INN STYLES */

.content-wrapper.premierinn .colored-overlay {
    background-color: rgba(83, 31, 89, 0.3);
}


/* JOB DETAILS TABLE TABLE STYLES */

.content-wrapper.tabletable .colored-overlay {
    background-color: rgba(245, 129, 69, 0.3);
}

.content-wrapper.tabletable .job-details-btns a:first-child .button,
.content-wrapper.tabletable .button-yellow {
    background: #b7af99 !important;
    color: white !important;
}

.content-wrapper.tabletable .job-details-btns a:first-child .button:before,
.content-wrapper.tabletable .button-yellow:before {
    color: #b7af99 !important;
    background: white !important;
    border: 1px solid #b7af99 !important;
}

.content-wrapper.tabletable .job-details-btns .button {
    border-color: #b7af99;
    color: #b7af99;
}

.content-wrapper.tabletable .job-details-btns .button:before {
    background: #b7af99;
}

.content-wrapper.tabletable .job-details-sub-heading p,
.content-wrapper.tabletable .relevant-jobs h2 {
    color: #2f3130 !important;
}


/* JOB DETAILS WHITBREAD INNS STYLES */

.content-wrapper.whitbreadinns .colored-overlay {
    background-color: rgba(142, 78, 95, 0.3);
}

.content-wrapper.whitbreadinns .job-details-btns a:first-child .button,
.content-wrapper.whitbreadinns .button-yellow {
    background: #4e7593 !important;
    color: white !important;
}

.content-wrapper.whitbreadinns .job-details-btns a:first-child .button:before,
.content-wrapper.whitbreadinns .button-yellow:before {
    color: #4e7593 !important;
    background: white !important;
    border: 1px solid #4e7593 !important;
}

.content-wrapper.whitbreadinns .job-details-btns .button {
    border-color: #4e7593;
    color: #4e7593;
}

.content-wrapper.whitbreadinns .job-details-btns .button:before {
    background: #4e7593;
}

.content-wrapper.whitbreadinns .job-details-sub-heading p,
.content-wrapper.whitbreadinns .relevant-jobs h2 {
    color: #4e7593 !important;
}


/* JOB DETAILS WHITBREAD STYLES */

.content-wrapper.whitbread .colored-overlay {
    background-color: rgba(0, 74, 141, 0.3);
}

.content-wrapper.whitbread .job-details-btns a:first-child .button,
.content-wrapper.whitbread .button-yellow {
    background: #dc002e !important;
    color: white !important;
}

.content-wrapper.whitbread .job-details-btns a:first-child .button:before,
.content-wrapper.whitbread .button-yellow:before {
    color: #dc002e !important;
    background: white !important;
    border: 1px solid #dc002e !important;
}

.content-wrapper.whitbread .job-details-btns .button {
    border-color: #dc002e;
    color: #dc002e;
}

.content-wrapper.whitbread .job-details-btns .button:before {
    background: #dc002e;
}

.content-wrapper.whitbread .job-details-sub-heading p,
.content-wrapper.whitbread .relevant-jobs h2 {
    color: #004a8d !important;
}

.always-centered {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    justify-content: center;
    -ms-flex-justify-content: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
}

.three-dots {
    color: grey;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 3px;
    text-align: center;
}

.job-search .content-wrapper {
    min-height: 100vh;
}


/* Job Search - Google map styles */

.gm-style-iw {
    width: 350px !important;
    top: 15px !important;
    left: 0px !important;
    background-color: #fff;
    box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
    border-radius: 10px;
}

#iw-container {
    margin-bottom: 10px;
}

#iw-container .iw-title {
    font-family: 'GothamRounded-Medium';
    font-size: 15px;
    background-color: #004B90;
    border-radius: 2px 2px 0 0;
    color: white;
    font-size: 12px;
    margin: 0;
    padding: 10px 30px;
}

#iw-container .iw-content {
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    margin-right: 1px;
    padding: 0 30px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

#iw-container .iw-content a {
    display: block;
    font-family: 'GothamRounded-Medium';
    font-size: 15px;
    color: #004B90;
    width: 100%;
    border-bottom: 1px solid #004B90;
    padding: 15px 0;
}

#iw-container .iw-content a:last-child {
    border-bottom: none;
}

#iw-container .iw-content a img {
    float: right;
}

.iw-jobrole__title {
    width: calc(100% - 30px);
    display: inline-block;
}

.iw-bottom-gradient {
    position: absolute;
    width: 326px;
    height: 25px;
    bottom: 10px;
    right: 18px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}

.search-jobs.barblock {
  background-color: #e07a3f;
}

.search-jobs.barblock .mobile-advanced-search {
  background-color: #ca6e38;
}

.search-jobs.barblock .button {
  background: #47433d !important;
}

.search-jobs.barblock .button:before {
  background: #47433d !important;
}

.search-jobs.beefeater {
  background-color: #ea6d00;
}

.search-jobs.beefeater .mobile-advanced-search {
  background-color: #cc5f00;
}

.search-jobs.beefeater .button {
  background: #e56209 !important;
}

.search-jobs.beefeater .button:before {
  background: #e56209 !important;
}

.search-jobs.brewersfayre {
  background-color: #f7b918;
}

.search-jobs.brewersfayre .mobile-advanced-search {
  background-color: #dea717;
}

.search-jobs.brewersfayre .button {
  background: #ea3024 !important;
}

.search-jobs.brewersfayre .button:before {
  background: #ea3024 !important;
}

.search-jobs.cookhousepub {
  background-color: #ea8300;
}

.search-jobs.cookhousepub .mobile-advanced-search {
  background-color: #d07400;
}

.search-jobs.cookhousepub .button {
  background: #716359 !important;
}

.search-jobs.cookhousepub .button:before {
  background: #716359 !important;
}

.search-jobs.hubpremierinn {
  background-color: #728000;
}

.search-jobs.hubpremierinn .mobile-advanced-search {
  background-color: #5d6900;
}

.search-jobs.hubpremierinn .button {
  background: #bcd11b !important;
}

.search-jobs.hubpremierinn .button:before {
  background: #bcd11b !important;
}

.search-jobs.premierinn {
  background-color: #531f59;
}

.search-jobs.premierinn .mobile-advanced-search {
  background-color: #411846;
}

.search-jobs.premierinn .button {
  background: #f9a634 !important;
}

.search-jobs.premierinn .button:before {
  background: #f9a634 !important;
}

.search-jobs.tabletable {
  background-color: #f58145;
}

.search-jobs.tabletable .mobile-advanced-search {
  background-color: #da723c;
}

.search-jobs.tabletable .button {
  background: #86978e !important;
}

.search-jobs.tabletable .button:before {
  background: #86978e !important;
}

.search-jobs.whitbreadinns {
  background-color: #8e4e5f;
}

.search-jobs.whitbreadinns .mobile-advanced-search {
  background-color: #713f4c;
}

.search-jobs.whitbreadinns .button {
  background: #6d6d6d !important;
}

.search-jobs.whitbreadinns .button:before {
  background: #6d6d6d !important;
}

input[type="checkbox"] {
  /* opacity: 0; */
  position: absolute;
  z-index: +2;
  cursor : pointer;
  height: 20px;
  width: 20px;
  right: 0px;
}

@media screen and (min-width: 500px) {
    input[type="checkbox"] {
        right: 15px;
    }
}

@media screen and (min-width: 600px) {
    input[type="checkbox"] {
        right: 30px;
    }
}

@media screen and (min-width: 768px) {
    input[type="checkbox"] {
        right: 45px;
    }
}

@media screen and (min-width: 1020px) {
    input[type="checkbox"] {
        right: 55px;
    }
}

.mark-label {
  background: #ffffff;
  border: 2px solid #cccccc;
  display: block;
  float: left;
  clear: none;
  height: 20px;
  width: 20px;
  position: relative;
  cursor: pointer;
  transition: box-shadow 0.3s;
  vertical-align: middle;
  margin-left: 6px;
  color: #ffffff;
}

.mark-label svg {
  height: 100%;
  width: 100%;
  padding: 1px;
  display: none;
}

.mark-label svg path {
  fill: #004B90;
}

.mark-label .icon {
  width: 32px;
  text-align: center;
  position: absolute;
  left: -1px;
  top: -1px;
  line-height: 32px;
  font-size: 24px;
}

.disabled .mark-label {
  background: #f6f6f6;
  color: #f6f6f6;
  cursor: default;
}

/* .disabled input[type="checkbox"] {
  cursor: default;
} */

.disabled input[type="checkbox"]:hover ~ .mark-label,
.disabled input[type="checkbox"]:focus ~ .mark-label{
  border-color: #cccccc;
  box-shadow: none;
}

input[type="checkbox"]:checked ~ .mark-label {
  box-shadow: 0 0 0 0 transparent;
  background: #CCDBE9;
  border: 2px solid #004B90;
}

input[type="checkbox"]:checked ~ .mark-label svg {
  display: block;
}

input[type="checkbox"]:hover ~ .mark-label, input[type="checkbox"]:focus ~ .mark-label {
  border-color: #004B90;
  box-shadow: 0 0 0 4px rgba(204,219,233,0.5);
}

input[type="checkbox"]:focus:checked ~ .mark-label {
  box-shadow: 0 0 0 4px rgba(204,219,233,0.5);
}

.no-jobs-message {
  display: none;
}

.no-jobs-message.active {
  display: block;
}

.featherlight-plus {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

@media only screen and (min-width:768px) {
  .sticky-job-search .search-jobs {
    position: fixed;
    top: 131px;
    width: 100%;
    z-index: 3;
  }
}

.job-details-share {
  display: table;
  font-family: 'GothamRounded-Medium';
  margin-top: 60px;
}

.job-details-share > span {
  color: #939393;
  display: table-cell;
  font-size: 14px;
  line-height: 14px;
  padding-right: 15px;
  vertical-align:middle
}

.job-details-share ul,
.job-details-share li {
  display: inline-block
}

.job-details-share li {
  margin-right: 10px;
}

.job-details-intro-slide .other-header-content {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  max-width: 1200px;
}

@media only screen and (min-width:800px) {
  .job-details-intro-slide .other-header-content {
    width: 90%;
  }
}

/* Search page */
.search-intro {
  font-size: 24px;
  padding: 10px 0;
}
.search-intro p {
  margin: 0;
}
.search-page-results {
  font-size: 18px;
  text-align: left;
}
.search-item__link a{
  font-weight: bold;
  text-decoration: none;
}
.search-item__link:active a,
.search-item__link:focus a,
.search-item__link:hover a {
  border-bottom: 1px solid #004992;
}

.search-item__content + .search-item__link {
  margin-top: 15px;
}

/* IE9 */
/* Search & Apply form */
.no-flexbox .search-jobs-blue form .form-group {
  display: inline-block;
  float: left;
}

/* Job details page */
.no-flexbox .job-detail {
  display: inline-block;
}

/*
    2022 brand page styles for search apply widget
*/

.brandMainPage .barblock .search-jobs-blue {
    background-color: #3A3537; /*#212F34;*/
}

.brandMainPage .barblock .mobile-advanced-search {
    background-color: #3A3537;
}

.brandMainPage .barblock .search-jobs .form-group .button {
    color: #fff !important; 
    background-color: #E5620A !important; 
    border: 0px;
}

.brandMainPage .barblock .search-jobs .form-group .button:before {
    color: #fff !important;
    background-color: #E5620A !important;
    border: 0px;
}


.brandMainPage .job-item-right.barblock .button {
    color: #fff;
    background-color: #E5620A !important;
}

.brandMainPage .job-item-right.barblock .button:before {
    color: #fff;
    background-color: #E5620A !important;
}

/*.brandMainPage .job-item-right.barblock .the-icon {
    background-image: url('/img/brand-main/image-list.jpg') !important;
}*/
/* beefeater */
.brandMainPage .beefeater .search-jobs-blue {
    background-color: #212F34;
}

.brandMainPage .beefeater .mobile-advanced-search {
    background-color: #212F34;
}

.brandMainPage .beefeater .search-jobs .form-group .button {
    color: #fff !important; 
    background-color: #E5620A !important; /*#FDCB5F*/
    border: 0px;
}

.brandMainPage .beefeater .search-jobs .form-group .button:before {
    color: #fff !important;
    background-color: #E5620A !important; /*#FDCB5F*/
    border: 0px;
}

.brandMainPage .job-item-right.beefeater .button {
    color: #fff;
    background-color: #E5620A !important;
}

.brandMainPage .job-item-right.beefeater .button:before {
    color: #fff;
    background-color: #E5620A !important;
}

/*.brandMainPage .job-item-right.beefeater .the-icon {
    background-image: url('/img/brand-main/image-list.jpg') !important;
}*/
/* premier inn */
.brandMainPage .premierinn .search-jobs-blue {
    background-color: #531F59;
}

.brandMainPage .premierinn .mobile-advanced-search {
    background-color: #531F59;
}

.brandMainPage .premierinn .search-jobs .form-group .button {
    color: #575756 !important;
    background-color: #FFCF21 !important; /*#FDCB5F*/
    border: 0px;
}

.brandMainPage .premierinn .search-jobs .form-group .button:before {
    color: #575756 !important;
    background-color: #FFCF21 !important; /*#FDCB5F*/
    border: 0px;
}

.brandMainPage .job-item-right.premierinn .button {
    color: #575756;
    background-color: #FFCF21 !important;
}

.brandMainPage .job-item-right.premierinn .button:before {
    color: #575756;
    background-color: #FFCF21 !important;
}

.brandMainPage .job-item-right.premierinn .the-icon {
    background-image: url('/img/brand_icons/premierinn_large.png');
    width: 100px;
    height: 50px;
    background-repeat: no-repeat;
}

/* cookhousepub */
.brandMainPage .cookhousepub .search-jobs-blue {
    background-color: #194437;
}

.brandMainPage .cookhousepub .mobile-advanced-search {
    background-color: #194437;
}

.brandMainPage .cookhousepub .search-jobs .form-group .button {
    color: #194437 !important;
    background-color: #FBCF69 !important; /*#FDCB5F*/
    border: 0px;
}

.brandMainPage .cookhousepub .search-jobs .form-group .button:before {
    color: #194437 !important;
    background-color: #FBCF69 !important; /*#FDCB5F*/
    border: 0px;
}

.brandMainPage .job-item-right.cookhousepub .button {
    color: #194437;
    background-color: #FBCF69 !important;
}

.brandMainPage .job-item-right.cookhousepub .button:before {
    color: #194437;
    background-color: #FBCF69 !important;
}


/*.brandMainPage .job-item-right.beefeater .the-icon {
    background-image: url('/img/brand-main/image-list.jpg') !important;
}*/

/* brewersfayre */
.brandMainPage .brewersfayre .search-jobs-blue {
    background-color: #FBC92C;
}

.brandMainPage .brewersfayre .mobile-advanced-search {
    background-color: #FBC92C;
}

.brandMainPage .brewersfayre .search-jobs .form-group .button {
    color: #fff !important;
    background-color: #EF5D4B !important; /*#FDCB5F*/
    border: 0px;
}

.brandMainPage .brewersfayre .search-jobs .form-group .button:before {
    color: #fff !important;
    background-color: #EF5D4B !important; /*#FDCB5F*/
    border: 0px;
}

.brandMainPage .job-item-right.brewersfayre .button {
    color: #fff;
    background-color: #EF5D4B !important;
}

.brandMainPage .job-item-right.brewersfayre .button:before {
    color: #fff;
    background-color: #EF5D4B !important;
}


/*.brandMainPage .job-item-right.beefeater .the-icon {
    background-image: url('/img/brand-main/image-list.jpg') !important;
}*/

/* whitbreadinns */
.brandMainPage .whitbreadinns .search-jobs-blue {
    background-color: #212F34;
}

.brandMainPage .whitbreadinns .mobile-advanced-search {
    background-color: #212F34;
}

.brandMainPage .whitbreadinns .search-jobs .form-group .button {
    color: #212F34 !important;
    background-color: #FDCB5F !important; /*#FDCB5F*/
    border: 0px;
}

.brandMainPage .whitbreadinns .search-jobs .form-group .button:before {
    color: #212F34 !important;
    background-color: #FDCB5F !important; /*#FDCB5F*/
    border: 0px;
}

.brandMainPage .job-item-right.whitbreadinns .button {
    color: #212F34;
    background-color: #FDCB5F !important;
}

.brandMainPage .job-item-right.whitbreadinns .button:before {
    color: #212F34;
    background-color: #FDCB5F !important;
}


/*.brandMainPage .job-item-right.beefeater .the-icon {
    background-image: url('/img/brand-main/image-list.jpg') !important;
}*/

/* hubpremierinn */
.brandMainPage .hubpremierinn .search-jobs-blue {
    background-color: #363636;
}

.brandMainPage .hubpremierinn .mobile-advanced-search {
    background-color: #363636;
}

.brandMainPage .hubpremierinn .search-jobs .form-group .button {
    color: #fff !important;
    background-color: #B4D600 !important; /*#FDCB5F*/
    border: 0px;
}

.brandMainPage .hubpremierinn .search-jobs .form-group .button:before {
    color: #fff !important;
    background-color: #B4D600 !important; /*#FDCB5F*/
    border: 0px;
}

.brandMainPage .job-item-right.hubpremierinn .button {
    color: #fff;
    background-color: #B4D600 !important;
}

.brandMainPage .job-item-right.hubpremierinn .button:before {
    color: #fff;
    background-color: #B4D600 !important;
}


.brandMainPage .job-item-right.hubpremierinn .the-icon {
   /* background-image: url('/img/brand_icons/premierinn_large.png');
    width: 100px !important;
    height: 50px;*/
    background-repeat: no-repeat;
}

/* tabletable */
.brandMainPage .tabletable .search-jobs-blue {
    background-color: #66BEA8;
}

.brandMainPage .tabletable .mobile-advanced-search {
    background-color: #66BEA8;
}

.brandMainPage .tabletable .search-jobs .form-group .button {
    color: #fff !important;
    background-color: #E5620A !important; /*#FDCB5F*/
    border: 0px;
}

.brandMainPage .tabletable .search-jobs .form-group .button:before {
    color: #fff !important;
    background-color: #E5620A !important; /*#FDCB5F*/
    border: 0px;
}

.brandMainPage .job-item-right.tabletable .button {
    color: #fff;
    background-color: #E5620A !important;
}

.brandMainPage .job-item-right.tabletable .button:before {
    color: #fff;
    background-color: #E5620A !important;
}


/*.brandMainPage .job-item-right.beefeater .the-icon {
    background-image: url('/img/brand-main/image-list.jpg') !important;
}*/


/*
    2022 adding more brand styles for role pages
*/
/* override default styles */
#brandHousekeeping #bannerPage .btnSite {
    color: #575756;
    background-color: #FFCF21;
}

#brandHousekeeping .search-jobs-blue,
#brandHousekeeping .mobile-advanced-search {

    background-color: #531F59 !important;
}

#brandHousekeeping .search-jobs-blue .button,
#brandHousekeeping .search-jobs-blue .button:before {
    color: #fff !important;
    background-color: #FFCF21 !important;
}

#brandHousekeeping .mobile-advanced-search p {
    color: #FFFFFF;
    font-family: Helvetica;
    font-size: 11px;
    line-height: 13px;
    text-transform: uppercase;
    margin: 0px;
    font-weight: bold;
    margin-right: 10px;
}

#brandHousekeeping .sectionMeetTeam {
    background-color: #F4EAE0;
}

#brandHousekeeping #infoText.section-ec.bgPurple h2,
#brandHousekeeping #infoText.section-ec.bgPurple p {
    color: #fff;
}

#brandHousekeeping .tab-content {
    max-height: none;
}

#brandHousekeeping .nav-tabs {
    border-bottom-style: none;
}

#brandHousekeeping .nav > li > a {
    padding: 0px;
    display: inline;
}

#brandHousekeeping .nav-tabs > li > a,
#brandHousekeeping nav-tabs > li.active > a {
    border: none;
}

#brandHousekeeping .sectionCareers .tabs .nav-tabs li {
    float: none;
}

/* cookhousepub */
.cookhousepub-rolepage #brandHousekeeping #bannerPage .btnSite {
    color: #FFF;
    background-color: #FBCF69;
}

.cookhousepub-rolepage #brandHousekeeping .search-jobs-blue .button,
.cookhousepub-rolepage #brandHousekeeping .search-jobs-blue .button:before {
    color: #fff !important;
    background-color: #FBCF69 !important;
}

.cookhousepub-rolepage #infoText.section-ec.bgPurple {
    background-color: #194437;
}

/* .cookhousepub-rolepage #brandHousekeeping #infoText.section-ec.bgPurple h2,
.cookhousepub-rolepage #brandHousekeeping #infoText.section-ec.bgPurple p {
    color: #fff;
}*/


.cookhousepub-rolepage #brandHousekeeping #infoText.section-ec.bgGray h2,
.cookhousepub-rolepage #brandHousekeeping .sectionCareers h2,
.cookhousepub-rolepage #brandHousekeeping .sectionCareers .tabs .nav-tabs li.active a,
.cookhousepub-rolepage #brandHousekeeping .sectionCareers .tabs .tab-content .tab-pane h3,
.cookhousepub-rolepage #brandHousekeeping .sectionCareers #accordion h4 a,
.cookhousepub-rolepage #brandHousekeeping .sectionMeetTeam h2,
.cookhousepub-rolepage #brandHousekeeping .sectionMeetTeam #sliderTeam .slide .teamText h3,
.cookhousepub-rolepage #brandHousekeeping .sectionMeetTeam #sliderTeam button.slick-arrow:after {
    color: #194437; /*#3C3C3B;*/
}

.cookhousepub-rolepage #brandHousekeeping .sectionCareers .tabs .nav-tabs li.active a,
.cookhousepub-rolepage #brandHousekeeping .sectionCareers .tabs .nav-tabs li:hover a {
    color: #194437;
    border-left: 2px solid #194437;
}

.cookhousepub-rolepage #brandHousekeeping .sectionMeetTeam #sliderTeam ul.slick-dots li.slick-active button {
    background-color: #194437;
    opacity: 1;
}

.cookhousepub-rolepage #brandHousekeeping .sectionOpportunities h3 {
    color: #194437;
}

.cookhousepub-rolepage #brandHousekeeping .search-jobs-blue,
.cookhousepub-rolepage #brandHousekeeping .mobile-advanced-search {
    background-color: #194437 !important;
}

/* .cookhousepub-rolepage #brandHousekeeping .sectionMeetTeam {

    background-color: #F4EAE0;
}*/
/* brewers fayre */
.brewersfayre-rolepage #brandHousekeeping #bannerPage .btnSite {
    color: #FFF;
    background-color: #EF5D4B;
}

.brewersfayre-rolepage #infoText.section-ec.bgPurple {
    background-color: #EF5D4B;
}

.brewersfayre-rolepage #brandHousekeeping .search-jobs-blue .button,
.brewersfayre-rolepage #brandHousekeeping .search-jobs-blue .button:before {
    color: #fff !important;
    background-color: #EF5D4B !important;
}

/* .brewersfayre-rolepage #brandHousekeeping #infoText.section-ec.bgPurple h2,
.brewersfayre-rolepage #brandHousekeeping #infoText.section-ec.bgPurple p {
    color: #fff;
}*/


.brewersfayre-rolepage #brandHousekeeping #infoText.section-ec.bgGray h2,
.brewersfayre-rolepage #brandHousekeeping .sectionCareers h2,
.brewersfayre-rolepage #brandHousekeeping .sectionCareers .tabs .nav-tabs li.active a,
.brewersfayre-rolepage #brandHousekeeping .sectionCareers .tabs .tab-content .tab-pane h3,
.brewersfayre-rolepage #brandHousekeeping .sectionCareers #accordion h4 a,
.brewersfayre-rolepage #brandHousekeeping .sectionMeetTeam h2,
.brewersfayre-rolepage #brandHousekeeping .sectionMeetTeam #sliderTeam .slide .teamText h3,
.brewersfayre-rolepage #brandHousekeeping .sectionMeetTeam #sliderTeam button.slick-arrow:after {
    color: #EF5D4B; /*#3C3C3B;*/
}

.brewersfayre-rolepage #brandHousekeeping .sectionCareers .tabs .nav-tabs li.active a,
.brewersfayre-rolepage #brandHousekeeping .sectionCareers .tabs .nav-tabs li:hover a {
    color: #EF5D4B;
    border-left: 2px solid #EF5D4B;
}

.brewersfayre-rolepage #brandHousekeeping .sectionMeetTeam #sliderTeam ul.slick-dots li.slick-active button {
    background-color: #EF5D4B;
    opacity: 1;
}

.brewersfayre-rolepage #brandHousekeeping .sectionOpportunities h3 {
    color: #EF5D4B;
}

.brewersfayre-rolepage #brandHousekeeping .search-jobs-blue,
.brewersfayre-rolepage #brandHousekeeping .mobile-advanced-search {
    background-color: #FBC92C !important;
}

/* .brewersfayre-rolepage #brandHousekeeping .sectionMeetTeam {

    background-color: #F4EAE0;
}*/

/* hubpremierinn */
.hubpremierinn-rolepage #brandHousekeeping #bannerPage .btnSite {
    color: #FFF;
    background-color: #B4D600;
}

.hubpremierinn-rolepage #infoText.section-ec.bgPurple {
    background-color: #B4D600;
}

.hubpremierinn-rolepage #brandHousekeeping .search-jobs-blue .button,
.hubpremierinn-rolepage #brandHousekeeping .search-jobs-blue .button:before {
    color: #fff !important;
    background-color: #B4D600 !important;
}

/* .hubpremierinn-rolepage #brandHousekeeping #infoText.section-ec.bgPurple h2,
.hubpremierinn-rolepage #brandHousekeeping #infoText.section-ec.bgPurple p {
    color: #fff;
}*/


.hubpremierinn-rolepage #brandHousekeeping #infoText.section-ec.bgGray h2,
.hubpremierinn-rolepage #brandHousekeeping .sectionCareers h2,
.hubpremierinn-rolepage #brandHousekeeping .sectionCareers .tabs .nav-tabs li.active a,
.hubpremierinn-rolepage #brandHousekeeping .sectionCareers .tabs .tab-content .tab-pane h3,
.hubpremierinn-rolepage #brandHousekeeping .sectionCareers #accordion h4 a,
.hubpremierinn-rolepage #brandHousekeeping .sectionMeetTeam h2,
.hubpremierinn-rolepage #brandHousekeeping .sectionMeetTeam #sliderTeam .slide .teamText h3,
.hubpremierinn-rolepage #brandHousekeeping .sectionMeetTeam #sliderTeam button.slick-arrow:after {
    color: #B4D600; /*#3C3C3B;*/
}

.hubpremierinn-rolepage #brandHousekeeping .sectionCareers .tabs .nav-tabs li.active a,
.hubpremierinn-rolepage #brandHousekeeping .sectionCareers .tabs .nav-tabs li:hover a {
    color: #B4D600;
    border-left: 2px solid #B4D600;
}

.hubpremierinn-rolepage #brandHousekeeping .sectionMeetTeam #sliderTeam ul.slick-dots li.slick-active button {
    background-color: #B4D600;
    opacity: 1;
}

.hubpremierinn-rolepage #brandHousekeeping .sectionOpportunities h3 {
    color: #B4D600;
}

.hubpremierinn-rolepage #brandHousekeeping .search-jobs-blue,
.hubpremierinn-rolepage #brandHousekeeping .mobile-advanced-search {
    background-color: #363636 !important;
}

/* .hubpremierinn-rolepage #brandHousekeeping .sectionMeetTeam {

    background-color: #F4EAE0;
}*/
/* table table, beefeater */
.beefeater-rolepage #brandHousekeeping #bannerPage .btnSite,
.tabletable-rolepage #brandHousekeeping #bannerPage .btnSite {
    color: #FFF;
    background-color: #E5620A;
}

.beefeater-rolepage #infoText.section-ec.bgPurple,
.tabletable-rolepage #infoText.section-ec.bgPurple {
    background-color: #E5620A;
}

.beefeater-rolepage #brandHousekeeping .search-jobs-blue .button,
.beefeater-rolepage #brandHousekeeping .search-jobs-blue .button:before,
.tabletable-rolepage #brandHousekeeping .search-jobs-blue .button,
.tabletable-rolepage #brandHousekeeping .search-jobs-blue .button:before {
    color: #fff !important;
    background-color: #E5620A !important;
}

/* .tabletable-rolepage #brandHousekeeping #infoText.section-ec.bgPurple h2,
.tabletable-rolepage #brandHousekeeping #infoText.section-ec.bgPurple p {
    color: #fff;
}*/
.beefeater-rolepage #brandHousekeeping #infoText.section-ec.bgGray h2,
.beefeater-rolepage #brandHousekeeping .sectionCareers h2,
.beefeater-rolepage #brandHousekeeping .sectionCareers .tabs .nav-tabs li.active a,
.beefeater-rolepage #brandHousekeeping .sectionCareers .tabs .tab-content .tab-pane h3,
.beefeater-rolepage #brandHousekeeping .sectionCareers #accordion h4 a,
.beefeater-rolepage #brandHousekeeping .sectionMeetTeam h2,
.beefeater-rolepage #brandHousekeeping .sectionMeetTeam #sliderTeam .slide .teamText h3,
.beefeater-rolepage #brandHousekeeping .sectionMeetTeam #sliderTeam button.slick-arrow:after,
.tabletable-rolepage #brandHousekeeping #infoText.section-ec.bgGray h2,
.tabletable-rolepage #brandHousekeeping .sectionCareers h2,
.tabletable-rolepage #brandHousekeeping .sectionCareers .tabs .nav-tabs li.active a,
.tabletable-rolepage #brandHousekeeping .sectionCareers .tabs .tab-content .tab-pane h3,
.tabletable-rolepage #brandHousekeeping .sectionCareers #accordion h4 a,
.tabletable-rolepage #brandHousekeeping .sectionMeetTeam h2,
.tabletable-rolepage #brandHousekeeping .sectionMeetTeam #sliderTeam .slide .teamText h3,
.tabletable-rolepage #brandHousekeeping .sectionMeetTeam #sliderTeam button.slick-arrow:after {
    color: #E5620A; /*#3C3C3B;*/
}

.beefeater-rolepage #brandHousekeeping .sectionCareers .tabs .nav-tabs li.active a,
.beefeater-rolepage #brandHousekeeping .sectionCareers .tabs .nav-tabs li:hover a,
.tabletable-rolepage #brandHousekeeping .sectionCareers .tabs .nav-tabs li.active a,
.tabletable-rolepage #brandHousekeeping .sectionCareers .tabs .nav-tabs li:hover a {
    color: #E5620A;
    border-left: 2px solid #E5620A;
}

.beefeater-rolepage #brandHousekeeping .sectionMeetTeam #sliderTeam ul.slick-dots li.slick-active button,
.tabletable-rolepage #brandHousekeeping .sectionMeetTeam #sliderTeam ul.slick-dots li.slick-active button {
    background-color: #E5620A;
    opacity: 1;
}

.beefeater-rolepage #brandHousekeeping .sectionOpportunities h3,
.tabletable-rolepage #brandHousekeeping .sectionOpportunities h3 {
    color: #E5620A;
}

.beefeater-rolepage #brandHousekeeping .search-jobs-blue,
.beefeater-rolepage #brandHousekeeping .mobile-advanced-search,
.tabletable-rolepage #brandHousekeeping .search-jobs-blue,
.tabletable-rolepage #brandHousekeeping .mobile-advanced-search {
    background-color: #3A3537 !important;
}

/* .tabletable-rolepage #brandHousekeeping .sectionMeetTeam {

    background-color: #F4EAE0;
}*/

/* whitbread */
.whitbread-rolepage #brandHousekeeping #bannerPage .btnSite {
    color: #FFF;
    background-color: #004A8D;
}

.whitbread-rolepage #infoText.section-ec.bgPurple {
    background-color: #004A8D;
}

.whitbread-rolepage #brandHousekeeping .search-jobs-blue .button,
.whitbread-rolepage #brandHousekeeping .search-jobs-blue .button:before {
    color: #fff !important;
    background-color: #004A8D !important;
}

/* .whitbread-rolepage #brandHousekeeping #infoText.section-ec.bgPurple h2,
.whitbread-rolepage #brandHousekeeping #infoText.section-ec.bgPurple p {
    color: #fff;
}*/


.whitbread-rolepage #brandHousekeeping #infoText.section-ec.bgGray h2,
.whitbread-rolepage #brandHousekeeping .sectionCareers h2,
.whitbread-rolepage #brandHousekeeping .sectionCareers .tabs .nav-tabs li.active a,
.whitbread-rolepage #brandHousekeeping .sectionCareers .tabs .tab-content .tab-pane h3,
.whitbread-rolepage #brandHousekeeping .sectionCareers #accordion h4 a,
.whitbread-rolepage #brandHousekeeping .sectionMeetTeam h2,
.whitbread-rolepage #brandHousekeeping .sectionMeetTeam #sliderTeam .slide .teamText h3,
.whitbread-rolepage #brandHousekeeping .sectionMeetTeam #sliderTeam button.slick-arrow:after {
    color: #004A8D; /*#3C3C3B;*/
}

.whitbread-rolepage #brandHousekeeping .sectionCareers .tabs .nav-tabs li.active a,
.whitbread-rolepage #brandHousekeeping .sectionCareers .tabs .nav-tabs li:hover a {
    color: #004A8D;
    border-left: 2px solid #004A8D;
}

.whitbread-rolepage #brandHousekeeping .sectionMeetTeam #sliderTeam ul.slick-dots li.slick-active button {
    background-color: #004A8D;
    opacity: 1;
}

.whitbread-rolepage #brandHousekeeping .sectionOpportunities h3 {
    color: #004A8D;
}

.whitbread-rolepage #brandHousekeeping .search-jobs-blue,
.whitbread-rolepage #brandHousekeeping .mobile-advanced-search {
    background-color: #004A8D !important;
}

/* .whitbread-rolepage #brandHousekeeping .sectionMeetTeam {

    background-color: #F4EAE0;
}*/

/* bar block */
.barblock-rolepage #brandHousekeeping #bannerPage .btnSite {
    color: #FFF;
    background-color: #EF7D3A;
}

.barblock-rolepage #infoText.section-ec.bgPurple {
    background-color: #EF7D3A;
}

.barblock-rolepage #brandHousekeeping .search-jobs-blue .button,
.barblock-rolepage #brandHousekeeping .search-jobs-blue .button:before {
    color: #fff !important;
    background-color: #EF7D3A !important;
}

/* .barblock-rolepage #brandHousekeeping #infoText.section-ec.bgPurple h2,
.barblock-rolepage #brandHousekeeping #infoText.section-ec.bgPurple p {
    color: #fff;
}*/


.barblock-rolepage #brandHousekeeping #infoText.section-ec.bgGray h2,
.barblock-rolepage #brandHousekeeping .sectionCareers h2,
.barblock-rolepage #brandHousekeeping .sectionCareers .tabs .nav-tabs li.active a,
.barblock-rolepage #brandHousekeeping .sectionCareers .tabs .tab-content .tab-pane h3,
.barblock-rolepage #brandHousekeeping .sectionCareers #accordion h4 a,
.barblock-rolepage #brandHousekeeping .sectionMeetTeam h2,
.barblock-rolepage #brandHousekeeping .sectionMeetTeam #sliderTeam .slide .teamText h3,
.barblock-rolepage #brandHousekeeping .sectionMeetTeam #sliderTeam button.slick-arrow:after {
    color: #EF7D3A; /*#3C3C3B;*/
}

.barblock-rolepage #brandHousekeeping .sectionCareers .tabs .nav-tabs li.active a,
.barblock-rolepage #brandHousekeeping .sectionCareers .tabs .nav-tabs li:hover a {
    color: #EF7D3A;
    border-left: 2px solid #EF7D3A;
}

.barblock-rolepage #brandHousekeeping .sectionMeetTeam #sliderTeam ul.slick-dots li.slick-active button {
    background-color: #EF7D3A;
    opacity: 1;
}

.barblock-rolepage #brandHousekeeping .sectionOpportunities h3 {
    color: #EF7D3A;
}

.barblock-rolepage #brandHousekeeping .search-jobs-blue,
.barblock-rolepage #brandHousekeeping .mobile-advanced-search {
    background-color: #3A3537 !important;
}

/* .barblock-rolepage #brandHousekeeping .sectionMeetTeam {

    background-color: #F4EAE0;
}*/