@import url("https://cdnjs.cloudflare.com/ajax/libs/10up-sanitize.css/6.0.0/sanitize.min.css");


/*********************************************
 * VARIABLES
 *********************************************/
$background_color: #ffffcc;



/*********************************************
 * GLOBAL STYLES
 *********************************************/
html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
    margin: 0;
    padding: 0;
    border: none;
}

body {
	position: relative;
	line-height: 1;

	background-color: #fff;
	color: #000;
}




/*********************************************
 * Main slide setup
 *********************************************/

.slidey {
    height: 100%;
    width: 100%;
    position: relative;
    color: black;
    padding: 0px;

    .slides {
        position: absolute;
        width: 100%;
        height: 100%;
        padding: 0px;
        min-height: 0 !important;
        background-color: whitesmoke;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 100%


    }

    .slides section {
        position: absolute;
        width: 100%;
        left: 0;
        right: 0;
        align-items: center;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 100%;
        opacity: 0;


        @import "themes/main";


        div.embed {
            width: 100%;
            min-height: 100px;
            background-position: center;
            margin-top: 10px;
            margin-bottom: 10px;
            background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ibGRzLXNwaW5uZXIiIHdpZHRoPSIyMDBweCIgIGhlaWdodD0iMjAwcHgiICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiIHN0eWxlPSJiYWNrZ3JvdW5kOiBub25lOyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIyNCIgcng9IjIuODIiIHJ5PSIxLjQ0IiB3aWR0aD0iNiIgaGVpZ2h0PSIxMiIgZmlsbD0iI2NkY2RjMSI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjlzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDM2IDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjI0IiByeD0iMi44MiIgcnk9IjEuNDQiIHdpZHRoPSI2IiBoZWlnaHQ9IjEyIiBmaWxsPSIjY2RjZGMxIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuOHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNzIgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMjQiIHJ4PSIyLjgyIiByeT0iMS40NCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiNjZGNkYzEiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC43cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMDggNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMjQiIHJ4PSIyLjgyIiByeT0iMS40NCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiNjZGNkYzEiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxNDQgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMjQiIHJ4PSIyLjgyIiByeT0iMS40NCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiNjZGNkYzEiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC41cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxODAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMjQiIHJ4PSIyLjgyIiByeT0iMS40NCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiNjZGNkYzEiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTYgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMjQiIHJ4PSIyLjgyIiByeT0iMS40NCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiNjZGNkYzEiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4zcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNTIgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMjQiIHJ4PSIyLjgyIiByeT0iMS40NCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiNjZGNkYzEiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4ycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyODggNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMjQiIHJ4PSIyLjgyIiByeT0iMS40NCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiNjZGNkYzEiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4xcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgzMjQgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMjQiIHJ4PSIyLjgyIiByeT0iMS40NCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiNjZGNkYzEiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSIwcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48L3N2Zz4=)
        }


    }



//    .slide * {
//        margin-top: auto;
//        margin-bottom: auto;
//        display: block;
//        margin-left: auto;
//        margin-right: auto;
//    }






    .slides section.next {

    }

    .slides section.previous {

    }

}

/*********************************************
 * Transitions setups
 *********************************************/


@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}


.slides section {
//  animation:         fadeIn 5s 1;
}



/*********************************************
 * Setup rem based on window size
 *********************************************/

@media only screen {
    html {
        font-size: 4vw; /* 24 characters across in fixed-width */
    }

    section {
        max-height: 13.5rem;
        margin-top: auto;
        margin-bottom: auto;
        padding: 10px;
        margin-top: 10px;


    }
}

/* for print our standard size will be 24 point/px */
/* definitely will be a work in progress for a while */
@media  only print {
    html {
//        font-size: 24px;
        font-size: 4vw;

    }

    section {

        border: 1px solid black;
        max-height: 13.5rem;
        max-width: 24rem;
        padding: 0.5 rem;
        margin: auto;
        display: block;
        opacity: 1.0;
    }



}