/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay {
    background: #333;
}
#colorbox {
    outline: 0;
}
#cboxContent {
    margin: 35px 25px;
    background: #333;
}
.cboxIframe {
    background: #fff;
}
#cboxError {
    padding: 50px;
    border: 1px solid #ccc;
}
#cboxLoadedContent {
    background: #fff;
}
#cboxTitle {
    /*width: 100%;
    padding: 5px 10px;
    position: absolute;
    bottom: 100%;
    left: 0;
    color: #fff;*/
    display: none;
}
#cboxCurrent {
    width: 100%;
    padding: 5px 0;
    position: absolute;
    bottom: -35px;
    left: 0;
    text-align: center;
    color: #fff;
}
#cboxLoadingGraphic {
    background: url("../img/loading.gif") no-repeat center center;
}
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
    border: 0;
    padding: 0;
    margin: 0;
    overflow: visible;
    width: auto;
    background: none;
    outline: none;
}     
#cboxSlideshow {
    position: absolute;
    top: -20px;
    right: 90px;
    color: #fff;
}
#cboxPrevious,
#cboxNext {
    width: 44px;
    height: 44px;
    position: absolute;
    top: 50%;
    margin-top: -22px;
    background: #ffffff;
    border: 2px solid #1f83c2;
    text-indent: -9999px;
    -webkit-border-radius: 44px;
    border-radius: 44px;
}
    #cboxPrevious {
        left: -22px;
    }
    #cboxNext {
        right: -22px;
    }
    #cboxPrevious:hover,
    #cboxNext:hover {
        background: #1f83c2;
    }
    #cboxPrevious::before,
    #cboxPrevious::after, 
    #cboxNext::before,
    #cboxNext::after {
        content: " ";
        width: 16px;
        height: 3px;
        position: absolute;
        top: 20px;
        left: 20px;
        background: #1f83c2;
    }
    #cboxPrevious::before,
    #cboxPrevious::after {
        margin-left: -10px;
    }
    #cboxNext::before,
    #cboxNext::after {
        margin-left: -6px;
    }
    #cboxPrevious::before {
        -webkit-transform: translateX(0) translateY(5px) rotate(45deg);
        -moz-transform: translateX(0) translateY(5px) rotate(45deg);
        -ms-transform: translateX(0) translateY(5px) rotate(45deg);
        -o-transform: translateX(0) translateY(5px) rotate(45deg);
        transform: translateX(0) translateY(5px) rotate(45deg);
    }
    #cboxPrevious::after {
        -webkit-transform: translateX(0) translateY(-5px) rotate(-45deg);
        -moz-transform: translateX(0) translateY(-5px) rotate(-45deg);
        -ms-transform: translateX(0) translateY(-5px) rotate(-45deg);
        -o-transform: translateX(0) translateY(-5px) rotate(-45deg);
        transform: translateX(0) translateY(-5px) rotate(-45deg);
    }
    #cboxNext::before {
        -webkit-transform: translateX(0) translateY(5px) rotate(-45deg);
        -moz-transform: translateX(0) translateY(5px) rotate(-45deg);
        -ms-transform: translateX(0) translateY(5px) rotate(-45deg);
        -o-transform: translateX(0) translateY(5px) rotate(-45deg);
        transform: translateX(0) translateY(5px) rotate(-45deg);
    }
    #cboxNext::after {
        -webkit-transform: translateX(0) translateY(-5px) rotate(45deg);
        -moz-transform: translateX(0) translateY(-5px) rotate(45deg);
        -ms-transform: translateX(0) translateY(-5px) rotate(45deg);
        -o-transform: translateX(0) translateY(-5px) rotate(45deg);
        transform: translateX(0) translateY(-5px) rotate(45deg);
    }
    #cboxPrevious:hover::before,
    #cboxPrevious:hover::after,
    #cboxNext:hover::before,
    #cboxNext:hover::after {
        background: #ffffff;
    }
#cboxClose {
    width: 45px;
    height: 45px;
    display: block;
    position: absolute;
    top: -22px;
    right: -22px;
    background: #ffffff;
    border: 2px solid #1f83c2;
    text-indent: -9999px;
    -webkit-border-radius: 45px;
    border-radius: 45px;
}
    #cboxClose:hover {
        background: #1f83c2;
    }
    #cboxClose::before,
    #cboxClose::after {
        content: " ";
        width: 24px;
        height: 3px;
        position: absolute;
        top: 21px;
        left: 8px;
        background: #1f83c2;
        -webkit-transform-origin: 0% 50%;
        -moz-transform-origin: 0% 50%;
        -ms-transform-origin: 0% 50%;
        -o-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
    }
    #cboxClose::before {
        margin-top: -6px;
    }
    #cboxClose::after {
        margin-top: 6px;
    }
    #cboxClose::before {
        -webkit-transform: translateX(4px) translateY(-3px) rotate(45deg);
        -moz-transform: translateX(4px) translateY(-3px) rotate(45deg);
        -ms-transform: translateX(4px) translateY(-3px) rotate(45deg);
        -o-transform: translateX(4px) translateY(-3px) rotate(45deg);
        transform: translateX(4px) translateY(-3px) rotate(45deg);
    }
    #cboxClose::after {
        -webkit-transform: translateX(4px) translateY(2px) rotate(-45deg);
        -moz-transform: translateX(4px) translateY(2px) rotate(-45deg);
        -ms-transform: translateX(4px) translateY(2px) rotate(-45deg);
        -o-transform: translateX(4px) translateY(2px) rotate(-45deg);
        transform: translateX(4px) translateY(2px) rotate(-45deg);
    }
    #cboxClose:hover::before,
    #cboxClose:hover::after {
        background: #ffffff;
    }