@import url("https://fonts.googleapis.com/css?family=Oswald");
@import url("https://fonts.googleapis.com/css?family=Lato:300");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

.cm {
    /* HTML5 display-role reset for older browsers */
    margin-bottom:2rem;
    clear: both;
    display: table;
    width: 100%;
        max-width: 1000px;
}

.cm html,
.cm body,
.cm div,
.cm span,
.cm applet,
.cm object,
.cm iframe,
.cm h1,
.cm h2,
.cm h3,
.cm h4,
.cm h5,
.cm h6,
.cm p,
.cm blockquote,
.cm pre,
.cm a,
.cm abbr,
.cm acronym,
.cm address,
.cm big,
.cm cite,
.cm code,
.cm del,
.cm dfn,
.cm em,
.cm img,
.cm ins,
.cm kbd,
.cm q,
.cm s,
.cm samp,
.cm small,
.cm strike,
.cm strong,
.cm sub,
.cm sup,
.cm tt,
.cm var,
.cm b,
.cm u,
.cm i,
.cm center,
.cm dl,
.cm dt,
.cm dd,
.cm ol,
.cm ul,
.cm li,
.cm fieldset,
.cm form,
.cm label,
.cm legend,
.cm table,
.cm caption,
.cm tbody,
.cm tfoot,
.cm thead,
.cm tr,
.cm th,
.cm td,
.cm article,
.cm aside,
.cm canvas,
.cm details,
.cm embed,
.cm figure,
.cm figcaption,
.cm footer,
.cm header,
.cm hgroup,
.cm menu,
.cm nav,
.cm output,
.cm ruby,
.cm section,
.cm summary,
.cm time,
.cm mark,
.cm audio,
.cm video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    color: inherit;
}

.cm i.fa {
    font: normal normal normal 14px/1 FontAwesome
}

.cm .text-right {
    text-align: right;
}

.cm article,
.cm aside,
.cm details,
.cm figcaption,
.cm figure,
.cm footer,
.cm header,
.cm hgroup,
.cm menu,
.cm nav,
.cm section {
    display: block;
}

.cm body {
    line-height: 1;
}

.cm ol,
.cm ul {
    list-style: none;
}

.cm blockquote,
.cm q {
    quotes: none;
}

.cm blockquote:before,
.cm blockquote:after,
.cm q:before,
.cm q:after {
    content: "";
    content: none;
}

.cm table {
    border-collapse: collapse;
    border-spacing: 0;
}

.cm .slide {
    margin: 0 auto;
    width: 600px;
    border: solid thin #d8d8d8;
    /*responsive*/
    width: 100%;
}

.cm .slide img {
    margin: 0;
    padding: 0;
    line-height: 0;
    display: block;
    width: 100%;
    max-height: 500px;
}

.cm .slide .caption {
    background: #2C2C2C;
    box-sizing: border-box;
    font-family: "Oswald", sans-serif;
    color: white;
    min-height: 100px;
    padding: 25px 10px;
}

.cm .slide .caption h2 {
    margin: 0;
    padding: 0;
    max-width: 350px;
    float: left;
    line-height: 26px;

    font-size: 25px;
}

.cm .slide .caption h3 {
    margin-bottom: 2px;
    margin-top: 10px;
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-size: 14px !important;
}

.cm .slide .caption .options {
    float: right;
    position: relative;
}

.cm .caption:after {
    content: "";
    display: table;
    clear: both;
}

.cm .slide .caption .options input {
    border-radius: 3px;
    font-size: 20px;
    border: 0;
    padding: 10px;
    font-family: "Oswald", sans-serif;
}

.cm .slide .caption .options button {
    background: #32779F;
    font-size: 17px;
    border-radius: 3px;
    font-family: "Oswald", sans-serif;
    border: 0;
    color: white;
    padding: 10px;
    margin-left: 10px;
    padding: 15px;
}

.cm .slide[data-slide="0"] .caption p {
    float: left;
    margin-bottom: 0;
   
    display: block;
    clear: both;
}

.cm .slide[data-slide="1"] img,
.cm .slide[data-slide="0.5"] img {
    float: right;
    /*responsive*/
    width: 50%;
    object-fit: cover;
    height: 400px;
}

.cm .slide[data-slide="1"] img {
    height: 441px;
}

.cm .slide[data-slide="1"] .caption {
    float: left;
    width: 300px;
    height: 441px;
    padding-top: 10px;
    /*responsive*/
    width: 50%;
    padding: 44px;
}

.cm .slide[data-slide="1"] .options,
.cm .slide[data-slide="0.5"] .options {
    /*responsive*/
    float: left;
    width: 100%;
    position: relative;
}

.cm .slide[data-slide="1"] .note,
.cm .slide[data-slide="0.5"] .note {
    right: 10px
}

.cm .slide[data-slide="1"] .caption h2,
.cm .slide[data-slide="0.5"] .caption h2 {
    padding: 0;
}

.cm .slide[data-slide="1"] .caption .options input,
.cm .slide[data-slide="1"] .caption .options button,
.cm .slide[data-slide="0.5"] .caption .options input,
.cm .slide[data-slide="0.5"] .caption .options button {
    width: 100%;
    box-sizing: border-box;
    margin-left: 0px;
}

.cm .slide[data-slide="1"] .caption .options input,
.cm .slide[data-slide="0.5"] .caption .options input {
    padding: 8px;
}

.cm .slide[data-slide="1"] .caption .options button,
.cm .slide[data-slide="0.5"] .caption .options button {
    padding: 13px;
    margin-left: 0px;
}

.cm .slide[data-slide="0"] h3,
.cm .slide[data-slide="6"] h3 {
    float: left;
    min-width: 50%;
    clear: both;
}

.cm .slide[data-slide="2"] img {
    object-fit: cover;
} 


.cm .slide[data-slide="2"] h3,
.cm .slide[data-slide="2"] h3 {


    float: left;
    min-width: 50%;
}

.cm .slide[data-slide="4"] h3,
.cm .slide[data-slide="4"] h3,
.floaty {
    float: left;
    min-width: 50%;
}

.cm .floaty {
    max-width: 52%
}

.cm .shareresults {
    height: 150px;
    width: 200%;
}

.cm .shareresults .share {
    width: 16%;
    padding-right: 0;
    height: 190px;
    float: left;
    display: block;
}

.cm .shareresults .share img {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    object-fit: contain;
}

.cm .note {
    position: absolute;
    right: 80px;
    z-index: 9;
    color: #4e4e4e;
    pointer-events: none;
    font-size: 11px;
}

.cm .slide .caption .options input[type="number"] {
    padding-top: 22px;
    padding-bottom: 22px;
    margin-bottom: 0;
}

.cm .slide[data-slide="2"] .caption .options input[type="number"],
.cm .slide[data-slide="3"] .caption .options input[type="number"],
.cm .slide[data-slide="4"] .caption .options input[type="number"] {

    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 0;
}

.cm .share {
    position: relative;
}

.cm .share img {
    object-fit: contain;
}

.cm .share:hover .overlay {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    background: rgba(50, 119, 158, 0.8);

    z-index: 1;
    margin: 10px;
    padding: 10px;
    box-sizing: border-box;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    cursor: pointer;
}

.cm .share .overlay {
    display: none;
}

.cm .share .overlay iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cm .slide[data-slide="0.5"] li {
    display: block;
    color: white !important;
    padding: 15px 0 0 0;
    box-sizing: border-box;
    font-size: 24px;
    font-family: Oswald;
}

.cm .slide[data-slide="0"] .caption p {
    margin-right: 200px;
}

.cm .slide[data-slide="0.5"] .caption h2,
.cm .slide[data-slide="0.5"] .caption h3 {
    min-width: 100%;
}

.cm .slide[data-slide="0.5"] .caption {
    min-height: 400px;
    position: relative;
}

.cm .slide[data-slide="0.5"] .options {
    margin-top: 10px
}

.cm .slide[data-slide="0.5"] i.fa {
    font-size: 30px;
}

 
.cm .ctaButtons a {
    padding: 10px;
    color: white;
    background: rgb(244, 207, 35);
    background: linear-gradient(180deg, rgba(244, 207, 35, 1) 0%, rgba(231, 116, 0, 1) 100%);
    display: block;
    margin: 10px;
    float: left;
    border: 1px solid #333;
    border-radius: 3px;
    text-align: center;
    text-shadow: 1px 1px 1px #333;
}

.cm .ctaButtons a:last-of-type {
    float: right;
}

@media(max-width:1199px) {
    .cm .ctaButtons {
        max-width: 518px;
    }
}

@media(max-width:979px) {

 
    .cm .ctaButtons a {
        width: 150px;
    }
}

@media(max-width:768px) {
    .cm .slide .caption .options {
        width: 100%;
    }

    .cm .slide .caption .options button {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        margin-left: 0;
    }

    .cm .slide .caption .options input {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        margin-left: 0;
    }

    .cm .slide[data-slide="1"] .caption,
    .cm .slide[data-slide="1"] .option,
    .cm .slide[data-slide="1"] img,
    .cm .slide[data-slide="0.5"] .caption,
    .cm .slide[data-slide="0.5"] .option,
    .cm .slide[data-slide="0.5"] img {
        width: 100%;
    }

    .cm .slide img {
        max-height: 300px;
        object-fit: cover;
    }

    .cm .slide[data-slide] .caption .options input[type="number"] {
        padding-top: 22px;
        padding-bottom: 22px;

    }

    .cm .note {
        position: absolute;
        right: 10px;
    }

    .cm .slide .caption h2 {
        margin-bottom: 10px;
    }

    .cm .slide[data-slide="0.5"] .options {
        position: relative;
        right: 0;
        bottom: 0;
    }

    .cm .slide[data-slide="6"] .caption h2 {
        margin: 20px 0 0;
    }

    .cm .floaty {
        max-width: 100%
    }

 

    .cm .slide[data-slide="0"] .caption p {
        margin-right: 0;
    }

    #backResults {
        margin-bottom: 10px;
    }

    .cm .shareresults {
        height: 150px;

    }

    .cm .shareresults .share img {
        padding: 0 5px 0px;
        margin-bottom: -46px;
    }

    .cm .share .overlay,
    .cm .share:hover .overlay {
        position: relative;
        width: 100%;
        background: none;
        z-index: 1;
        margin: 0 0 0 5px;
        padding: 0px;
        display: block;
    }

    .cm .share .overlay iframe {
        position: relative;
        top: 30px;
        left: 0;
        transform: none;
    }

    .cm .shareresults .share:nth-child(1n + 3) {
        margin-top: 15px;
    }

}

@media(max-width:500px) {
    .cm .ctaButtons {
        position: relative;
    }

    .cm .ctaButtons a {
        width: 35%;
        padding: 8px;
    }
}

.cm input {
    height: auto;
}

@media(max-width:700px) {
    .mobileonlyfront {
        display: block !important
    }

    .desktoponlyfront {
        display: none !important
    }
}

@media(min-width:701px) {
    .mobileonlyfront {
        display: none !important
    }

    .desktoponlyfront {
        display: block !important
    }
}

.cm .c,
.slide[data-slide="3"] {
    clear: both;
    text-align: center;
}

.cm .slide[data-slide="3"] {
    position: relative;
}

.cm .slide[data-slide="3"] .ctaButtons {
    position: absolute;
    top: 48%;
    width: 100%;
}

.cm .slide[data-slide="3"] .ctaButtons a {
    width: 47%;
    background: #32779F;
    font-size: 17px;
    border-radius: 3px;
    font-family: "Oswald", sans-serif;
    border: 0;
    color: white;
    padding: 10px;
    margin-left: 10px;
    padding: 15px;
    border: solid;
    box-sizing: border-box;
}

.cm .slide[data-slide="3"] .ctaButtons a:hover {
    background: #f3a701;
}

.slide[data-slide="3"] .c h2 {

    text-align: center !important;
    width: 100% !important;
    float: none !important;

}

.slide[data-slide="3"] .c h3 {
    text-align: center !important;
    width: 100% !important;
    float: none !important;
}

.cm .slide[data-slide="3"] h2 {
    width: 100%;
    text-align: left;
    float: left;
    margin: 0 auto;
}

.cm .slide[data-slide="3"] h3 {
    float: left;
}

.cm .slide[data-slide="3"] input {
    background: #32779F;
    font-size: 17px;
    border-radius: 3px;
    font-family: "Oswald", sans-serif;
    border: 0;
    color: white;
    padding: 10px;
    margin-left: 10px;
    padding: 15px;
}

.cm .slide[data-slide="3"]>img {
    width: 50%;
    height: auto;
    float: left;
    object-fit: cover;
    object-fit: cover;
    object-position: center bottom;
}

.cm .scontainer {
    width: 100%;
    overflow: scroll;
}