/*= Sites
----------------------------------------------*/

body {
    --custom-color-myagency:    #898c8e;
    --custom-color-myconcierge: #5d7b9e;
    --custom-color-mydmc:       #fd3724;
    --custom-color-myevent:     #7d0094;
    --custom-color-mytravel:    #2c2f88;
    --custom-color-mydriver:    #15af95;
    --custom-color-myproperty:  #e60d2d;
    --custom-color-myteam:      #f8c139;
    --custom-color-myday:       #d58b93;
}

/*= Link container
----------------------------------------------*/
.site-myagency .link,
.site-myagency .first-word,
.active .link-myagency a,
.link-myagency.active a,
.link-myagency a:hover{
    color: var(--custom-color-myagency) !important;
}
.site-myconcierge .link,
.site-myconcierge .first-word,
.active .link-myconcierge a,
.link-myconcierge.active a,
.link-myconcierge a:hover {
    color: var(--custom-color-myconcierge) !important;
}
.site-mydmc .link,
.site-mydmc .first-word,
.active .link-mydmc a,
.link-mydmc.active a,
.link-mydmc a:hover {
    color: var(--custom-color-mydmc) !important;
}
.site-myevent .link,
.site-myevent .first-word,
.active .link-myevent a,
.link-myevent.active a,
.link-myevent a:hover{
    color: var(--custom-color-myevent) !important;
}
.site-mytravel .link,
.site-mytravel .first-word,
.active .link-mytravel a,
.link-mytravel.active a,
.link-mytravel a:hover{
    color: var(--custom-color-mytravel) !important;
}
.site-mydriver .link,
.site-mydriver .first-word,
.active .link-mydriver a,
.link-mydriver.active a,
.link-mydriver a:hover{
    color: var(--custom-color-mydriver) !important;
}
.site-myproperty .link,
.site-myproperty .first-word,
.active .link-myproperty a,
.link-myproperty.active a,
.link-myproperty a:hover{
    color: var(--custom-color-myproperty) !important;
}
.site-myteam .link,
.site-myteam .first-word,
.active .link-myteam a,
.link-myteam.active a,
.link-myteam a:hover{
    color: var(--custom-color-myteam) !important;
}
.site-myday .link,
.site-myday .first-word,
.active .link-myday a,
.link-myday.active a,
.link-myday a:hover{
    color: var(--custom-color-myday) !important;
}


/*= Border container
----------------------------------------------*/
.border-site {
    border: transparent solid 1px;
}
.site-myagency .border,
.border-myagency {
    border-color: var(--custom-color-myagency) !important;
}
.site-myconcierge .border,
.border-myconcierge {
    border-color: var(--custom-color-myconcierge) !important;
}
.site-mydmc .border,
.border-mydmc {
    border-color: var(--custom-color-mydmc) !important;
}
.site-myevent .border,
.border-myevent{
    border-color: var(--custom-color-myevent) !important;
}
.site-mytravel .border,
.border-mytravel{
    border-color: var(--custom-color-mytravel) !important;
}
.site-mydriver .border,
.border-mydriver{
    border-color: var(--custom-color-mydriver) !important;
}
.site-myproperty .border,
.border-myproperty{
    border-color: var(--custom-color-myproperty) !important;
}
.site-myteam .border,
.border-myteam {
    border-color: var(--custom-color-myteam) !important;
}
.site-myday .border,
.border-myday {
    border-color: var(--custom-color-myday) !important;
}

/*= Hover background color
----------------------------------------------*/
.link-bg-myagency:hover a,
.link-bg-myagency a:hover{
    color: #ffffff !important;
    background: var(--custom-color-myagency) !important;
    border-color: var(--custom-color-myagency) !important;
    
}
.link-bg-myconcierge:hover a,
.link-bg-myconcierge a:hover{
    color: #ffffff !important;
    background: var(--custom-color-myconcierge) !important;
    border-color: var(--custom-color-myconcierge) !important;
}
.link-bg-mydmc:hover a,
.link-bg-mydmc a:hover{
    color: #ffffff !important;
    background: var(--custom-color-mydmc) !important;
    border-color: var(--custom-color-mydmc) !important;
}
.link-bg-myevent:hover a,
.link-bg-myevent a:hover{
    color: #ffffff !important;
    background: var(--custom-color-myevent) !important;
    border-color: var(--custom-color-myevent) !important;
}
.link-bg-mytravel:hover a,
.link-bg-mytravel a:hover{
    color: #ffffff !important;
    background: var(--custom-color-mytravel) !important;
    border-color: var(--custom-color-mytravel) !important;
}
.link-bg-mydriver:hover a,
.link-bg-mydriver a:hover{
    color: #ffffff !important;
    background: var(--custom-color-mydriver) !important;
    border-color: var(--custom-color-mydriver) !important;
}
.link-bg-myproperty:hover a,
.link-bg-myproperty a:hover{
    color: #ffffff !important;
    background: var(--custom-color-myproperty) !important;
    border-color: var(--custom-color-myproperty) !important;
}
.link-bg-myteam:hover a,
.link-bg-myteam a:hover{
    color: #ffffff !important;
    background: var(--custom-color-myteam) !important;
    border-color: var(--custom-color-myteam) !important;
}
.link-bg-myday:hover a,
.link-bg-myday a:hover{
    color: #ffffff !important;
    background: var(--custom-color-myday) !important;
    border-color: var(--custom-color-myday) !important;
}


/*= Logo dans le menu
----------------------------------------------*/
.active .link-myagency a:after,
.link-myagency.active a:after{
    border-color: var(--custom-color-myagency) !important;
}

.active .link-myconcierge a:after,
.link-myconcierge.active a:after{
    border-color: var(--custom-color-myconcierge) !important;
}

.active .link-mydmc a:after,
.link-mydmc.active a:after{
    border-color: var(--custom-color-mydmc) !important;
}

.active .link-myevent a:after,
.link-myevent.active a:after{
    border-color: var(--custom-color-myevent) !important;
}

.active .link-mytravel a:after,
.link-mytravel.active a:after{
    border-color: var(--custom-color-mytravel) !important;
}

.active .link-mydriver a:after,
.link-mydriver.active a:after{
    border-color: var(--custom-color-mydriver) !important;
}

.active .link-myproperty a:after,
.link-myproperty.active a:after{
    border-color: var(--custom-color-myproperty) !important;
}

.active .link-myteam a:after,
.link-myteam.active a:after{
    border-color: var(--custom-color-myteam) !important;
}

.active .link-myday a:after,
.link-myday.active a:after{
    border-color: var(--custom-color-myday) !important;
}

/*= Logo dans le menu
----------------------------------------------*/
.shadow-myconcierge {
    -webkit-box-shadow: -15px 15px 0px 0px var(--custom-color-myconcierge);
    -moz-box-shadow: -15px 15px 0px 0px var(--custom-color-myconcierge);
    box-shadow: -15px 15px 0px 0px var(--custom-color-myconcierge);
}
.shadow-myteam {
    -webkit-box-shadow: -15px 15px 0px 0px var(--custom-color-myteam);
    -moz-box-shadow: -15px 15px 0px 0px var(--custom-color-myteam);
    box-shadow: -15px 15px 0px 0px var(--custom-color-myteam);
}
/*= Logo dans le menu
----------------------------------------------*/
.logo-myagency{
    margin-left: -20px;
}
.logo-myagency:after{
    margin-left: -5px;
}


/*= Timeline
----------------------------------------------*/

.tl-myagency h5 {
    color: var(--custom-color-myagency)
}
.timeline--horizontal .timeline__item.tl-myagency:nth-child(2n+1) .timeline__content::before {
    border-top-color: var(--custom-color-myagency) !important;
}
.timeline--horizontal .timeline__item.tl-myagency:nth-child(2n) .timeline__content::before {
    border-bottom-color: var(--custom-color-myagency) !important;
}
.timeline--mobile .timeline__item.tl-myagency .timeline__content::before{
    border-right-color: var(--custom-color-myagency) !important;
}
.tl-myagency .timeline__content {
    border-color: var(--custom-color-myagency);
}
.timeline__item.tl-myagency::after {
    background: var(--custom-color-myagency);
}


.tl-myconcierge h5 {
    color: var(--custom-color-myconcierge)
}
.timeline--horizontal .timeline__item.tl-myconcierge:nth-child(2n+1) .timeline__content::before {
    border-top-color: var(--custom-color-myconcierge) !important;
}
.timeline--horizontal .timeline__item.tl-myconcierge:nth-child(2n) .timeline__content::before {
    border-bottom-color: var(--custom-color-myconcierge) !important;
}
.timeline--mobile .timeline__item.tl-myconcierge .timeline__content::before{
    border-right-color: var(--custom-color-myconcierge) !important;
}
.tl-myconcierge .timeline__content {
    border-color: var(--custom-color-myconcierge);
}
.timeline__item.tl-myconcierge::after {
    background: var(--custom-color-myconcierge);
}


.tl-mydmc h5 {
    color: var(--custom-color-mydmc)
}
.timeline--horizontal .timeline__item.tl-mydmc:nth-child(2n+1) .timeline__content::before {
    border-top-color: var(--custom-color-mydmc) !important;
}
.timeline--horizontal .timeline__item.tl-mydmc:nth-child(2n) .timeline__content::before {
    border-bottom-color: var(--custom-color-mydmc) !important;
}
.timeline--mobile .timeline__item.tl-mydmc .timeline__content::before{
    border-right-color: var(--custom-color-mydmc) !important;
}
.tl-mydmc .timeline__content {
    border-color: var(--custom-color-mydmc);
}
.timeline__item.tl-mydmc::after {
    background: var(--custom-color-mydmc);
}


.tl-mytravel h5 {
    color: var(--custom-color-mytravel)
}
.timeline--horizontal .timeline__item.tl-mytravel:nth-child(2n+1) .timeline__content::before {
    border-top-color: var(--custom-color-mytravel) !important;
}
.timeline--horizontal .timeline__item.tl-mytravel:nth-child(2n) .timeline__content::before {
    border-bottom-color: var(--custom-color-mytravel) !important;
}
.timeline--mobile .timeline__item.tl-mytravel .timeline__content::before{
    border-right-color: var(--custom-color-mytravel) !important;
}
.tl-mytravel .timeline__content {
    border-color: var(--custom-color-mytravel);
}
.timeline__item.tl-mytravel::after {
    background: var(--custom-color-mytravel);
}


.tl-myevent h5 {
    color: var(--custom-color-myevent)
}
.timeline--horizontal .timeline__item.tl-myevent:nth-child(2n+1) .timeline__content::before {
    border-top-color: var(--custom-color-myevent) !important;
}
.timeline--horizontal .timeline__item.tl-myevent:nth-child(2n) .timeline__content::before {
    border-bottom-color: var(--custom-color-myevent) !important;
}
.timeline--mobile .timeline__item.tl-myevent .timeline__content::before{
    border-right-color: var(--custom-color-myevent) !important;
}
.tl-myevent .timeline__content {
    border-color: var(--custom-color-myevent);
}
.timeline__item.tl-myevent::after {
    background: var(--custom-color-myevent);
}


.tl-mydriver h5 {
    color: var(--custom-color-mydriver)
}
.timeline--horizontal .timeline__item.tl-mydriver:nth-child(2n+1) .timeline__content::before {
    border-top-color: var(--custom-color-mydriver) !important;
}
.timeline--horizontal .timeline__item.tl-mydriver:nth-child(2n) .timeline__content::before {
    border-bottom-color: var(--custom-color-mydriver) !important;
}
.timeline--mobile .timeline__item.tl-mydriver .timeline__content::before{
    border-right-color: var(--custom-color-mydriver) !important;
}
.tl-mydriver .timeline__content {
    border-color: var(--custom-color-mydriver);
}
.timeline__item.tl-mydriver::after {
    background: var(--custom-color-mydriver);
}


.tl-myproperty h5 {
    color: var(--custom-color-myproperty)
}
.timeline--horizontal .timeline__item.tl-myproperty:nth-child(2n+1) .timeline__content::before {
    border-top-color: var(--custom-color-myproperty) !important;
}
.timeline--horizontal .timeline__item.tl-myproperty:nth-child(2n) .timeline__content::before {
    border-bottom-color: var(--custom-color-myproperty) !important;
}
.timeline--mobile .timeline__item.tl-myproperty .timeline__content::before{
    border-right-color: var(--custom-color-myproperty) !important;
}
.tl-myproperty .timeline__content {
    border-color: var(--custom-color-myproperty);
}
.timeline__item.tl-myproperty::after {
    background: var(--custom-color-myproperty);
}


.tl-myteam h5 {
    color: var(--custom-color-myteam)
}
.timeline--horizontal .timeline__item.tl-myteam:nth-child(2n+1) .timeline__content::before {
    border-top-color: var(--custom-color-myteam) !important;
}
.timeline--horizontal .timeline__item.tl-myteam:nth-child(2n) .timeline__content::before {
    border-bottom-color: var(--custom-color-myteam) !important;
}
.timeline--mobile .timeline__item.tl-myteam .timeline__content::before{
    border-right-color: var(--custom-color-myteam) !important;
}
.tl-myteam .timeline__content {
    border-color: var(--custom-color-myteam);
}
.timeline__item.tl-myteam::after {
    background: var(--custom-color-myteam);
}


.tl-myday h5 {
    color: var(--custom-color-myday)
}
.timeline--horizontal .timeline__item.tl-myday:nth-child(2n+1) .timeline__content::before {
    border-top-color: var(--custom-color-myday) !important;
}
.timeline--horizontal .timeline__item.tl-myday:nth-child(2n) .timeline__content::before {
    border-bottom-color: var(--custom-color-myday) !important;
}
.timeline--mobile .timeline__item.tl-myday .timeline__content::before{
    border-right-color: var(--custom-color-myday) !important;
}
.tl-myday .timeline__content {
    border-color: var(--custom-color-myday);
}
.timeline__item.tl-myday::after {
    background: var(--custom-color-myday);
}







/*= Animation Burger
----------------------------------------------*/

.animated-burger {
    width: 20px;
    height: 20px;
    position: relative;
    margin: 0px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

.animated-burger span {
    display: block;
    position: absolute;
    height: 1px;
    width: 100%;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.animated-burger span {
    background: #898c8e;
}

.animated-burger span:nth-child(1) {
    top: 0px;
}

.animated-burger span:nth-child(2) {
    top: 7px;
}

.animated-burger span:nth-child(3) {
    top: 14px;
}

.animated-burger.open span:nth-child(1) {
    top: 8px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

.animated-burger.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
}

.animated-burger.open span:nth-child(3) {
    top: 8px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}


/*= Hover images
----------------------------------------------*/


/* Zoom In #1 */
.hover01 img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.hover01:hover img {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

/* Zoom In #2 */
.hover02 img {
    width: 300px;
    height: auto;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.hover02:hover img {
    width: 350px;
}

/* Zoom Out #1 */
.hover03 img {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.hover03:hover img {
    -webkit-transform: scale(1);
    transform: scale(1);
}

/* Zoom Out #2 */
.hover04 img {
    width: 400px;
    height: auto;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.hover04:hover img {
    width: 300px;
}

/* Slide */
.hover05 img {
    margin-left: 30px;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;

    transform-origin: 60px 20px;
}
.hover05:hover img {
    margin-left: 0;
}

/* Rotate */
.hover06 img {
    -webkit-transform: rotate(15deg) scale(1.4);
    transform: rotate(15deg) scale(1.4);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.hover06:hover img {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);
}

/* Blur */
.hover07 img {
    -webkit-filter: blur(3px);
    filter: blur(3px);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.hover07:hover img {
    -webkit-filter: blur(0);
    filter: blur(0);
}

/* Gray Scale */
.hover08 img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.hover08:hover img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

/* Sepia */
.hover09 img {
    -webkit-filter: sepia(100%);
    filter: sepia(100%);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.hover09:hover img {
    -webkit-filter: sepia(0);
    filter: sepia(0);
}

/* Blur + Gray Scale */
.hover10 img {
    -webkit-filter: grayscale(0) blur(0);
    filter: grayscale(0) blur(0);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.hover10:hover img {
    -webkit-filter: grayscale(100%) blur(3px);
    filter: grayscale(100%) blur(3px);
}

/* Opacity #1 */
.hover11 img {
    opacity: 1;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.hover11:hover img {
    opacity: .5;
}

/* Opacity #2 */
.hover12 {
    background: #1abc9c;
}
.hover12 img {
    opacity: 1;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.hover12:hover img {
    opacity: .5;
}

/* Flashing */
.hover13:hover img {
    opacity: 1;
    -webkit-animation: flash 1.5s;
    animation: flash 1.5s;
}
@-webkit-keyframes flash {
    0% {
        opacity: .4;
    }
    100% {
        opacity: 1;
    }
}
@keyframes flash {
    0% {
        opacity: .4;
    }
    100% {
        opacity: 1;
    }
}

/* Shine */
.hover14 {
    position: relative;
}
.hover14::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}
.hover14:hover::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
}
@-webkit-keyframes shine {
    100% {
        left: 125%;
    }
}
@keyframes shine {
    100% {
        left: 125%;
    }
}

/* Circle */
.hover15 {
    position: relative;
}
.hover15::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    content: '';
    width: 0;
    height: 0;
    background: rgba(255,255,255,.2);
    border-radius: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
}
.hover15:hover::before {
    -webkit-animation: circle .75s;
    animation: circle .75s;
}
@-webkit-keyframes circle {
    0% {
        opacity: 1;
    }
    40% {
        opacity: 1;
    }
    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}
@keyframes circle {
    0% {
        opacity: 1;
    }
    40% {
        opacity: 1;
    }
    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}





.ih-item.square {
    position: relative;
    width: 100%;
    height: 100%;
}
.ih-item.square .info {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}


.ih-item.square.effect4 {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}

.ih-item.square.effect4.colored .mask1,
.ih-item.square.effect4.colored .mask2 {
    background: #1a4a72;
    background: rgba(26, 74, 114, 0.6);
}
.ih-item.square.effect4 .img {
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}
.ih-item.square.effect4 .mask1,
.ih-item.square.effect4 .mask2 {
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    height: 100%;
    width: 100%;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
    transform: rotate(180deg);
}
.ih-item.square.effect4 .mask1 {
    left: auto;
    right: 0;
    top: 0;
    -webkit-transform: rotate(70deg) translateX(-180px);
    -moz-transform: rotate(70deg) translateX(-180px);
    -ms-transform: rotate(70deg) translateX(-180px);
    -o-transform: rotate(70deg) translateX(-180px);
    transform: rotate(70deg) translateX(-180px);
    -webkit-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -o-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
}
.ih-item.square.effect4 .mask2 {
    top: auto;
    bottom: 0;
    left: 0;
    -webkit-transform: rotate(70deg) translateX(180px);
    -moz-transform: rotate(70deg) translateX(180px);
    -ms-transform: rotate(70deg) translateX(180px);
    -o-transform: rotate(70deg) translateX(180px);
    transform: rotate(70deg) translateX(180px);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}
.ih-item.square.effect4 .info {
    height: 100%;
    visibility: hidden;
}
.ih-item.square.effect4 .info {
    opacity: 0;
    -webkit-transition: all 0.35s ease-in-out 0.35s;
    -moz-transition: all 0.35s ease-in-out 0.35s;
    transition: all 0.35s ease-in-out 0.35s;
}

.ih-item.square.effect4 a:hover .mask1 {
    -webkit-transform: rotate(0deg) translateX(1px);
    -moz-transform: rotate(0deg) translateX(1px);
    -ms-transform: rotate(0deg) translateX(1px);
    -o-transform: rotate(0deg) translateX(1px);
    transform: rotate(0deg) translateX(1px);
}
.ih-item.square.effect4 a:hover .mask2 {
    -webkit-transform: rotate(0deg) translateX(-1px);
    -moz-transform: rotate(0deg) translateX(-1px);
    -ms-transform: rotate(0deg) translateX(-1px);
    -o-transform: rotate(0deg) translateX(-1px);
    transform: rotate(0deg) translateX(-1px);
}
.ih-item.square.effect4 a:hover .info {
    visibility: visible;
}
.ih-item.square.effect4 a:hover .info  {
    opacity: 1;
}




.ba-slider {
    position: relative;
    overflow: hidden;
}

.ba-slider img {
    width: 100%;
    display:block;
}

.resize {
    position: absolute;
    top:0;
    left: 0;
    height: 100%;
    width: 50%;
    overflow: hidden;
}


.handle { /* Thin line seperator */
    position:absolute;
    left:50%;
    top:0;
    bottom:0;
    width: 4px;
    margin-left:-2px;

    background: rgba(255, 255, 255, 0.1);
    cursor: ew-resize;
}

.handle:after {  /* Big orange knob  */
    position: absolute;
    top: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -30px;

    color: rgba(255, 255, 255, 0.2);
    content: "\e989";
    text-align:center;
    font-size: 36px;
    font-family: icomoon !important;
    font-style: normal;
    font-weight: 400;
}

.handle:hover:after {
    color: rgba(255, 255, 255, 1);
}
.draggable:after {
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -22px;
    line-height:48px;
    font-size:30px;
}