.reveal div.slide-background {
    background-size: 95% 100%
}

.reveal .lg-only, .reveal .sm-only {
    display: none;
}

.reveal .xsm-only {
    display: block;
}


.reveal h12where {
    color: #57d4eb;
    font-family: "ArimoRegular";
    font-size: 35px;
    font-style: bold;
    text-align: center;
    text-shadow: .5px .5px .5px #ffffff;

}

.rtop4x4 {
    position: relative;
    z-index: 555;
    top: 34%;
}

.rtop4xxx {
    position: relative;
    z-index: 55;
    top: 40%;
}
.reveal a {
    color: #7a7977;
    font-family: "Conv_CALIBRI";
    font-size: 15px;
    text-shadow: none;
    text-decoration: none;
}

.reveal a:hover {
    color: #74a7cb;
    font-family: "Conv_CALIBRI";
    font-size: 15px;
    text-shadow: none;
    text-decoration: none;
}


a.ex3b:link {
    color: #469ef1;
    font-family: "Conv_CALIBRI";
    font-size: 28px;
    text-decoration: none;
    line-height: 1.0em;
}

a.ex3b:visited {
    color: #d87277;
    font-family: "Conv_CALIBRI";
    font-size: 28px;
    text-decoration: none;
    line-height: 1.0em;
}

a.ex3b:hover {
    color: #1c7eb0;
    font-family: "Conv_CALIBRI";
    font-size: 28px;
    text-decoration: none;
    line-height: 1.0em;
}

a.ex3b:active {
    color: #000000;
    font-family: "Conv_CALIBRI";
    font-size: 28px;
    text-decoration: none;
    line-height: 1.0em;
}

.logob {
    position: absolute;
    top: 85.0%;
    left: 80%;
    bottom: 0;
    right: 0;
    padding: 0px;
    z-index: 200;

}

.logoby {
    width: 50%;
	
 
}


	.logob2 {
    position: absolute;
    top: 50.0%;
    left: 80%;
    bottom: 0;
    right: 0;
    padding: 0px;
    z-index: 200;

}

.logoby2 {
        width: 90%;
        height: 65%;
    }



@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .reveal div.slide-background {
        background-size: 40% 95%
    }


    .reveal .lg-only, .reveal .xsm-only {
        display: none;
    }

    .reveal .sm-only {
        display: block;
    }

    .reveal h12where {
        color: #57d4eb;
        font-family: "ArimoRegular";
        font-size: 50px;
        font-style: bold;
        text-align: center;
        text-shadow: .5px .5px .5px #ffffff;

    }

    .rtop4xxx {
        position: relative;
        z-index: 55;
        top: 40%;
    }

    .rtop4x4 {
        position: relative;
        z-index: 555;
        top: 36%;

    }

    .reveal a {
        color: #ffffff;
        font-family: "Conv_CALIBRI";
        font-size: 18px;
        text-shadow: none;
        text-decoration: none;
    }

    .reveal a:hover {
        color: #74a7cb;
        font-family: "Conv_CALIBRI";
        font-size: 18px;
        text-shadow: none;
        text-decoration: none;
    }

    .reveal .roll span:after {
        color: #dfghy2;
        font-family: "Conv_CALIBRI";
        font-size: 18px;
        text-shadow: none;
        text-decoration: none;
    }

    a.ex3b:link {
        color: #469ef1;
        font-family: "Conv_CALIBRI";
        font-size: 30px;
        text-decoration: none;
        line-height: 1.0em;
    }

    a.ex3b:visited {
        color: #d87277;
        font-family: "Conv_CALIBRI";
        font-size: 30px;
        text-decoration: none;
        line-height: 1.0em;
    }

    a.ex3b:hover {
        color: #1c7eb0;
        font-family: "Conv_CALIBRI";
        font-size: 30px;
        text-decoration: none;
        line-height: 1.0em;
    }

    a.ex3b:active {
        color: #000000;
        font-family: "Conv_CALIBRI";
        font-size: 30px;
        text-decoration: none;
        line-height: 1.0em;
    }


}

@media only screen
and (min-device-width: 1024px) {

    .reveal div.slide-background {
        background-size: 34% 95%
    }


    .reveal .lg-only {
        display: block;
    }

    .reveal .sm-only, .reveal .xsm-only {
        display: none;
    }

    .reveal h12where {
        color: #57d4eb;
        font-family: "ArimoRegular";
        font-size: 50px;
        font-style: bold;
        text-align: center;
        text-shadow: .5px .5px .5px #ffffff;

    }

    .rtop4xxx {
        position: relative;
        z-index: 55;
        top: 43%;
    }

    .rtop4x4 {
        position: relative;
        z-index: 555;
        top: 40%;

    }

    .reveal a {
        color: #7a7977;
        font-family: "Conv_CALIBRI";
        font-size: 28px;
        text-shadow: none;
        text-decoration: none;
    }

    .reveal a:hover {
        color: #74a7cb;
        font-family: "Conv_CALIBRI";
        font-size: 28px;
        text-shadow: none;
        text-decoration: none;
    }

    .reveal .roll span:after {
        color: #dfghy2;
        font-family: "Conv_CALIBRI";
        font-size: 28px;
        text-shadow: none;
        text-decoration: none;
    }

    a.ex3b:link {
        color: #469ef1;
        font-family: "Conv_CALIBRI";
        font-size: 30px;
        text-decoration: none;
        line-height: 1.0em;
    }

    a.ex3b:visited {
        color: #d87277;
        font-family: "Conv_CALIBRI";
        font-size: 30px;
        text-decoration: none;
        line-height: 1.0em;
    }

    a.ex3b:hover {
        color: #1c7eb0;
        font-family: "Conv_CALIBRI";
        font-size: 30px;
        text-decoration: none;
        line-height: 1.0em;
    }

    a.ex3b:active {
        color: #000000;
        font-family: "Conv_CALIBRI";
        font-size: 30px;
        text-decoration: none;
        line-height: 1.0em;
    }
}

.buttonnext {
    width: 18%;
    height: 18%;
    position: absolute;
    top: 36.0%;
    left: 82%;
    bottom: 0;
    right: 0;
    padding: 0px;
    z-index: 10000;
}

@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .buttonnext {
        top: 40.0%;
        left: 77%;
    }

}


.buttonback {
    width: 18%;
    height: 18%;
    position: absolute;
    top: 55.0%;
    left: 82%;
    bottom: 0;
    right: 0;
    padding: 0px;
    z-index: 10000;

}

@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .buttonback {
        top: 50.0%;
        left: 77%;
    }
}


.center8 {
    position: absolute;
    z-index: 800;
    top: 1.0%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    background: none !important;

}

.centerp {
    position: absolute;
    z-index: 10;
    top: 0.0%;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0px;
}

.centerpx {
    width: 57%;
}

@media only screen
and (min-device-width: 1024px) {

    .centerp {
        top: 2.0%;
        bottom: 2.0%;
    }


}

.title {
    width: 100%;

}

@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {


    .title {
        width: 57%;
    }
}

.next {
    position: absolute;
    z-index: 60;
    top: 85.0%;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0px;
}

.nextb {
    width: 57%;

}

@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .next {
        top: 82.0%;
    }
}


.ending {
    position: absolute;
    z-index: 100;
    top: 0.0%;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0px;
}

.endingb {
    width: 100%;


}


.centerpvideo {
    position: absolute;
    z-index: 2;
    top: 0.0%;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0px;
}

.centerpvideox {
    width: 57%;

}

@media only screen
and (min-device-width: 1024px) {

    .centerpvideo {
        top: 2.0%;
        bottom: 2.0%;
    }


}


@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

   
}

.reveal h1234 {
    font-family: "ArimoRegular";
    color: #ffffff;
    font-size: 15px;
    font-style: bold;
    text-align: center;
    line-height: 1.5em;
}

@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {

    .reveal h1234 {
        font-size: 28px;
    }
}


@media only screen and (orientation: portrait) {
    .landscape {
        position: absolute;
        z-index: 10000;
        top: .0%;
        left: 0;
        bottom: 0;
        right: 0;
        padding: 0px;
        width: 100%;
    }
}




#scrollTitles {
    position: absolute;
    overflow: auto;
    overflow-y: hidden; /* Hide vertical scrollbar */
    width: 70%;
    height: 35%;
    top: 30%;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0px;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;

}


@media only screen
and (min-device-width: 768px)
and (orientation: landscape) {
	
	.logoby {
        width: 40%;
        height: 60%;
    }

    .logoby2 {
        width: 60%;
        height: 40%;
    }
}



@media only screen
and (min-device-width: 1024px) {
	
	.logob {
    position: absolute;
    top: 85.0%;
    left: 80%;
    bottom: 0;
    right: 0;
    padding: 0px;
    z-index: 200;

}

.logoby {
    width: 20%;
	
 
}


	.logob2 {
    position: absolute;
    top: 70.0%;
    left: 80%;
    bottom: 0;
    right: 0;
    padding: 0px;
    z-index: 200;

}

.logoby2 {
        width: 60%;
        height: 40%;
    }



}




.progress {
    pointer-events: none;
}