// Base theme template for reveal.js

/*********************************************

* GLOBAL STYLES
*********************************************/

body {

@include bodyBackground();
background-color: $backgroundColor;

}

.reveal {

font-family: $mainFont;
font-size: $mainFontSize;
font-weight: normal;
letter-spacing: -0.02em;
color: $mainColor;

}

::selection {

color: $selectionColor;
background: $selectionBackgroundColor;
text-shadow: none;

}

/*********************************************

* HEADERS
*********************************************/

.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {

margin: $headingMargin;
color: $headingColor;

font-family: $headingFont;
line-height: $headingLineHeight;
letter-spacing: $headingLetterSpacing;

text-transform: $headingTextTransform;
text-shadow: $headingTextShadow;

}

.reveal h1 {

text-shadow: $heading1TextShadow;

}

/*********************************************

* LINKS
*********************************************/

.reveal a:not(.image) {

color: $linkColor;
text-decoration: none;

-webkit-transition: color .15s ease;
   -moz-transition: color .15s ease;
    -ms-transition: color .15s ease;
     -o-transition: color .15s ease;
        transition: color .15s ease;

}

.reveal a:not(.image):hover {
        color: $linkColorHover;

        text-shadow: none;
        border: none;
}

.reveal .roll span:after {

color: #fff;
background: darken( $linkColor, 15% );

}

/*********************************************

* IMAGES
*********************************************/

.reveal section img {

margin: 15px 0px;
background: rgba(255,255,255,0.12);
border: 4px solid $mainColor;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);

-webkit-transition: all .2s linear;
   -moz-transition: all .2s linear;
    -ms-transition: all .2s linear;
     -o-transition: all .2s linear;
        transition: all .2s linear;

}

.reveal a:hover img {
        background: rgba(255,255,255,0.2);
        border-color: $linkColor;

        box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}

/*********************************************

* NAVIGATION CONTROLS
*********************************************/

.reveal .controls div.navigate-left, .reveal .controls div.navigate-left.enabled {

border-right-color: $linkColor;

}

.reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled {

border-left-color: $linkColor;

}

.reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled {

border-bottom-color: $linkColor;

}

.reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled {

border-top-color: $linkColor;

}

.reveal .controls div.navigate-left.enabled:hover {

border-right-color: $linkColorHover;

}

.reveal .controls div.navigate-right.enabled:hover {

border-left-color: $linkColorHover;

}

.reveal .controls div.navigate-up.enabled:hover {

border-bottom-color: $linkColorHover;

}

.reveal .controls div.navigate-down.enabled:hover {

border-top-color: $linkColorHover;

}

/*********************************************

* PROGRESS BAR
*********************************************/

.reveal .progress {

background: rgba(0,0,0,0.2);

}

.reveal .progress span {
        background: $linkColor;

        -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
           -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
            -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
             -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
                transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}

/*********************************************

* SLIDE NUMBER
*********************************************/

.reveal .slide-number {

color: $linkColor;

}