body {
    background-color: #FFF;
    overflow-x: hidden;
}
.framing {
    background-color: #edefee;    
    position: absolute;
    bottom: 14px;
    right: 14px;
    top: 14px;
    left: 14px; 
    min-height: 450px;
}
    
.links {
    position: absolute;
    bottom: 10px;
    right: 10px;
    max-width: 50%;
    text-align: right;
}
.links span {
    margin-top: 5px;
    display: block;
}
@media (min-width: 400px) {
    .links span {
        display: inline;
    }
}

.links .icon_linkedin {
    position: inherit;    
    display: inline-block;
    width: 35px;
    height: 35px;
    background-image: url(../images/main/linkedin_bw.png);
    background-size: contain;    
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;    
}
.links .icon_linkedin:hover {
    background-image: url(../images/main/linkedin.png);
}

.links .icon_twitter {
    position: inherit;
    display: inline-block;
    width: 35px;
    height: 35px;
    background-image: url(../images/main/twitter_bw.png);
    background-size: contain;    
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;    
}
.links .icon_twitter:hover {
    background-image: url(../images/main/twitter.png);
}

.links .icon_email {
    display: inline-block;
    width: 35px;
    height: 35px;
    background-image: url(../images/main/mail_bw.png);
    background-size: contain;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;    
}
.links .icon_email:hover {
    background-image: url(../images/main/mail.png);
}
@media (min-width: 400px) {
    .links .icon_linkedin,
    .links .icon_twitter,
    .links .icon_email {
        width: 50px;
        height: 50px;
    }
}

.carousel {
    height: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 100px;
}
@media (min-width: 768px) {
    .carousel {
        padding-bottom: 50px;        
    }
}

.carousel .centerline {
    position: absolute;
    left: -14px;
    right: -14px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    top: 25%;
    overflow: hidden;
}
@media (min-width: 768px) {
    .carousel .centerline {
        max-width: 100vh;
        top: 45%;
        left: 0;
        right: 0;
        width: 80%;
    }
}
.carousel .nametag {
    position: relative;
    margin-top: 50%;
    visibility: hidden;
}
@media (min-width: 768px) {
    .carousel .nametag {
        visibility: inherit;
        margin-top: inherit;
    }
}
.carousel .nametag img {
    padding-left: 10px;
    padding-right: 10px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 768px) {
    .carousel .nametag img {
        padding-left: 80px;
        padding-right: 80px;
    }
}

.carousel-inner {
    height: 100%;
    max-height: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.carousel-inner .item .roletag {
    position: absolute;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    top: 70%;
    max-width: 35vh;
    min-width: 160px;
}
.carousel-inner .item .roletag img {
    margin-left: auto;
    margin-right: auto;    
}

.carousel .item {
    height: 100%;
    
/*  -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
*/
/*    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;        */
}

.carousel-inner .mainlink {
    position: absolute; 
    /*max-width: 676px;*/
    min-width: 200px; 
    /*max-height: 1000px;*/
    width:40%;
    height:100%;
    top:0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);    
    z-index: 25;
}

.carousel-inner .bg1 {
    background-image: url(../images/main/1.png);
    max-width: 502px;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-position-x: 50%;
    background-position-y: 50%;    
    background-repeat: no-repeat;
}
.carousel-inner .bg1_glow {
    background-image: url(../images/main/1_hl.png);
    max-width: 502px;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-position-x: 50%;
    background-position-y: 50%;       
    background-repeat: no-repeat;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;  
    opacity: 0;
}
.carousel-inner .bg2 {
    background-image: url(../images/main/2.png);
    max-width: 502px;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-position-x: 50%;
    background-position-y: 50%;          
    background-repeat: no-repeat;        
}
.carousel-inner .bg2_glow {
    background-image: url(../images/main/2_hl.png);
    max-width: 502px;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-position-x: 50%;
    background-position-y: 50%;       
    background-repeat: no-repeat;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;  
    opacity: 0;
}
.carousel-inner .bg3 {
    background-image: url(../images/main/3.png);
    max-width: 676px;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-position-x: 50%;
    background-position-y: 50%;       
    background-repeat: no-repeat;    
}
.carousel-inner .bg3_glow {
    background-image: url(../images/main/3_hl.png);
    max-width: 676px;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-position-x: 50%;
    background-position-y: 50%;       
    background-repeat: no-repeat;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;  
    opacity: 0;
}
.carousel-inner .bg4 {
    background-image: url(../images/main/4.png);
    max-width: 502px;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-position-x: 50%;
    background-position-y: 50%;       
    background-repeat: no-repeat;     
}
.carousel-inner .bg4_glow {
    background-image: url(../images/main/4_hl.png);
    max-width: 502px;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-position-x: 50%;
    background-position-y: 50%;       
    background-repeat: no-repeat;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;  
    opacity: 0;
}
.carousel-inner .bg1_glow:hover,
.carousel-inner .bg2_glow:hover,
.carousel-inner .bg3_glow:hover,
.carousel-inner .bg4_glow:hover {
    opacity: 1;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;      
}

.carousel .active {
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    -o-filter: none;
    filter: none;
}

.carousel-control {
    border-radius: 100%;
    width: 50px;
    height: 50px;
    top: 50%;
    opacity: 1;
    margin-top: -25px;
    z-index: 20;
}

@media (min-width: 768px) {
    .carousel-control {
        width: 70px;
        height: 70px;
        margin-top: -35px;        
    }    
}
.carousel-control.left {
    background-image: none;
    background-color: #FFF;    
    margin-left: -12px;
}
@media (min-width: 768px) {
    .carousel-control.left {
        background-color: transparent; 
        margin-left: 0px;
    }
}
.carousel-control.right {
    background-image: none;
    background-color: #FFF;
    margin-right: -12px;  
}
@media (min-width: 768px) {
    .carousel-control.right {
        background-color: transparent;        
        margin-right: 0px;    
    }
}
.carousel-control.left:hover {
    background-color: #ffbd7f;
}
.carousel-control.right:hover {
    background-color: #ffbd7f;
}
.carousel-control .glyphicon-chevron-left {
    margin-left: -11px;
    margin-top: -10px;
    color: #6c6c6c;
}
.carousel-control .glyphicon-chevron-right {
    margin-top: -11px;
    color: #6c6c6c;
}
@media (min-width: 768px) {
    .carousel-control .glyphicon-chevron-left {
        margin-left: -17px;
        margin-top: -15px;        
        color: #323232;        
    }
    .carousel-control .glyphicon-chevron-right {
        margin-right: -15px;
        margin-top: -16px;
        color: #323232;          
    }
}

.indicators {
    position: absolute;
    bottom: 10px;
    left: 10px;
    max-width: 250px;
    height: auto;
}
.frontpage-indicator {
    position: relative;
    width: auto;    
    left: 0px;
    bottom: -79px;
    -webkit-transition: .5s all ease;
    -o-transition: .5s all ease;
    -moz-transition: .5s all ease;
    transition: .5s all ease;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0\'/></filter></svg>#grayscale"); /* Firefox 4+ */
    filter: gray; /* IE 6-9 */    
}
.frontpage-indicator:hover {
    -webkit-transition: .5s all ease;
    -o-transition: .5s all ease;
    -moz-transition: .5s all ease;
    transition: .5s all ease;
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    -o-filter: none;
    filter: none;
}
.carousel-indicators {
    position: relative;
    width: auto;
    left: 5px;
    bottom: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    text-align: left;

}
.carousel-indicators .active {
    width: auto;
    height: auto;    
    background-color: transparent;
}

.carousel-indicators li {
    width: auto;
    height: auto;
    border-style: none;
    text-indent: 0px;
    margin: 0px;
}

.carousel-indicators li .icon_1 {
    -webkit-transition: all 700ms ease;
    -moz-transition: all 700ms ease;
    -ms-transition: all 700ms ease;
    -o-transition: all 700ms ease;
    transition: all 700ms ease;    
    position: inherit;    
    display: inline-block;
    width: 28px;
    height: 79px;
    background-image: url(../images/main/1_small_bw.png);
    background-size: contain;    
}
.carousel-indicators li .icon_1:hover {
    -webkit-transition: all 700ms ease;
    -moz-transition: all 700ms ease;
    -ms-transition: all 700ms ease;
    -o-transition: all 700ms ease;
    transition: all 700ms ease;       
    background-image: url(../images/main/1_small.png);
}
.carousel-indicators .active .icon_1 {
    -webkit-transition: all 700ms ease;
    -moz-transition: all 700ms ease;
    -ms-transition: all 700ms ease;
    -o-transition: all 700ms ease;
    transition: all 700ms ease;    
    background-image: url(../images/main/1_small_sel.png);
    background-size: contain;    
}
.carousel-indicators li .icon_2 {
    position: inherit;    
    display: inline-block;
    width: 45px;
    height: 80px;
    background-image: url(../images/main/2_small_bw.png);
    background-size: contain;    
    -webkit-transition: all 700ms ease;
    -moz-transition: all 700ms ease;
    -ms-transition: all 700ms ease;
    -o-transition: all 700ms ease;
    transition: all 700ms ease;    
}
.carousel-indicators li .icon_2:hover {
    background-image: url(../images/main/2_small.png);
    -webkit-transition: all 700ms ease;
    -moz-transition: all 700ms ease;
    -ms-transition: all 700ms ease;
    -o-transition: all 700ms ease;
    transition: all 700ms ease;        
}
.carousel-indicators .active .icon_2 {
    background-image: url(../images/main/2_small_sel.png);
    background-size: contain;    
    -webkit-transition: all 700ms ease;
    -moz-transition: all 700ms ease;
    -ms-transition: all 700ms ease;
    -o-transition: all 700ms ease;
    transition: all 700ms ease;    
}
.carousel-indicators li .icon_3 {
    position: inherit;    
    display: inline-block;
    width: 58px;
    height: 80px;
    background-image: url(../images/main/3_small_bw.png);
    background-size: contain;    
    -webkit-transition: all 700ms ease;
    -moz-transition: all 700ms ease;
    -ms-transition: all 700ms ease;
    -o-transition: all 700ms ease;
    transition: all 700ms ease;    
}
.carousel-indicators li .icon_3:hover {
    background-image: url(../images/main/3_small.png);
    -webkit-transition: all 700ms ease;
    -moz-transition: all 700ms ease;
    -ms-transition: all 700ms ease;
    -o-transition: all 700ms ease;
    transition: all 700ms ease;        
}
.carousel-indicators .active .icon_3 {
    background-image: url(../images/main/3_small_sel.png);
    background-size: contain;    
    -webkit-transition: all 700ms ease;
    -moz-transition: all 700ms ease;
    -ms-transition: all 700ms ease;
    -o-transition: all 700ms ease;
    transition: all 700ms ease;    
}
.carousel-indicators li .icon_4 {
    position: inherit;    
    display: inline-block;
    margin-left: -22px;
    width: 43px;
    height: 80px;
    background-image: url(../images/main/4_small_bw.png);
    background-size: contain;    
    -webkit-transition: all 700ms ease;
    -moz-transition: all 700ms ease;
    -ms-transition: all 700ms ease;
    -o-transition: all 700ms ease;
    transition: all 700ms ease;    
}
.carousel-indicators li .icon_4:hover {
    background-image: url(../images/main/4_small.png);
    -webkit-transition: all 700ms ease;
    -moz-transition: all 700ms ease;
    -ms-transition: all 700ms ease;
    -o-transition: all 700ms ease;
    transition: all 700ms ease;        
}
.carousel-indicators .active .icon_4 {
    background-image: url(../images/main/4_small_sel.png);
    background-size: contain;    
    -webkit-transition: all 700ms ease;
    -moz-transition: all 700ms ease;
    -ms-transition: all 700ms ease;
    -o-transition: all 700ms ease;
    transition: all 700ms ease;    
}

/* ADD THIS TO CSS */
div#preloaded-images {
    position: absolute;
    overflow: hidden;
    left: -9999px; 
    top: -9999px;
    height: 1px;
    width: 1px;
}