/* FLEX_LP-custom.css */

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(1080deg);
    }
}

.logo-spin {
	animation-name: spin;
	animation-duration: 3s;
	animation-iteration-count: 1;
}

/* :::::::[sidebar]::::::: */
.sidebar-body .row {margin-left: -30px; margin-right: -30px;}
.sidebar-body .block {padding-left: 30px;padding-right: 30px;}


/* :::::::[floating header]::::::: */
/* floating header | position controlled by toggle ("" | float-top) */
.float-top {
    position: absolute;
    top: 0;
    z-index: 1024;
    width: 100%;
    transition: ease background .3s;
}

/* floating header | hover state */
.float-top:hover {background: #fff;}

/* reverse logo colors when hovered */
#HEAD.float-top:hover svg.logo-white path {fill: #002843;}


/* :::::::[floating labels]::::::: */
/* requires mktoForm-floatingLabels.js (requires jQuery) */
/* requires Marketo form label setting set to "Above" (instead of "Left") */

/* underlined form fields */
body.floatingLabels-on form.mktoForm input[type=url], 
body.floatingLabels-on form.mktoForm input[type=text], 
body.floatingLabels-on form.mktoForm input[type=date], 
body.floatingLabels-on form.mktoForm input[type=tel], 
body.floatingLabels-on form.mktoForm input[type=email], 
body.floatingLabels-on form.mktoForm input[type=number], 
body.floatingLabels-on form.mktoForm textarea.mktoField, 
body.floatingLabels-on form.mktoForm select.mktoField {
    z-index: 0;
    padding:20px 0px 5px 8px !important;
}

/* overlay labels atop inputs */
body.floatingLabels-on form.mktoForm label.mktoLabel {
    font-weight: normal !important;
    font-size: 0.9em !important;
    z-index: 1 !important;
    position:absolute;
    margin-top:10px;
    transition:ease all .3s !important;
    margin-left:8px;
    padding-top: 0.5rem !important;
    width: auto !important;
}
/* push labels above inputs when clicked / not-empty */
body.floatingLabels-on form.mktoForm label.mktoLabel.activeLabel {
    margin-top:0px;
    transition:ease all .3s !important;
    font-size:0.7em !important;
}
body.floatingLabels-on ::-moz-placeholder{color: transparent !important;}
body.floatingLabels-on ::-webkit-input-placeholder{color: transparent !important;}
body.floatingLabels-on :-ms-input-placeholder{color: transparent  !important;}
body.floatingLabels-on ::placeholder{color: transparent !important;}


/* EDIT Form Theme for "Labels Left" to account for stacked and unstacked layout */
/* define grid for labels-left to move error dialog below input */
/* media queries should be the SAME CSS */

form.mktoForm .mktoError {word-break: break-word;}
form.mktoForm.mktoLayoutLeft > div.mktoFormRow {
    display: block !important;
}
form.mktoForm.mktoLayoutLeft label.mktoLabel {text-align: left !important;}


/* ======================================================= */

@media screen and (min-width:576px) and (max-width:768px) {

    form.mktoForm.mktoLayoutLeft .mktoFieldWrap {
        display: grid !important;  
        grid-template-columns: 120px auto;
        grid-gap:0 10px;
        grid-template-areas: 
            "a b"
            "c d";
    }
    form.mktoForm.mktoLayoutLeft label.mktoLabel {
        grid-area: a;
     text-align: right !important;
    }
    form.mktoForm.mktoLayoutLeft input,
    form.mktoForm.mktoLayoutLeft textarea,
    form.mktoForm.mktoLayoutLeft select,
    form.mktoForm .mktoLogicalField {
        grid-area: b;
    }
    form.mktoForm.mktoLayoutLeft .mktoError {
        grid-area: d;
    }

    /* floating labels AND labels left */
    body.floatingLabels-on form.mktoForm.mktoLayoutLeft input[type] {
        padding-top: 8px !important;
    }
    body.floatingLabels-on form.mktoForm.mktoLayoutLeft label.mktoLabel {
        margin-top: 10px !important;
        font-size: 0.9em !important;
    }
}

@media screen and (min-width:991px) {
/* define grid for labels-left to move error dialog below input */
    form.mktoForm.mktoLayoutLeft .mktoFieldWrap {
        display: grid !important;
        grid-template-columns: 120px auto;
        grid-gap:0 10px;
        grid-template-areas: 
        "a b"
        "c d";
    }
    form.mktoForm.mktoLayoutLeft label.mktoLabel {
        grid-area: a;
        text-align: right !important;

    }
    form.mktoForm.mktoLayoutLeft input,
    form.mktoForm.mktoLayoutLeft textarea,
    form.mktoForm.mktoLayoutLeft select,
    form.mktoForm .mktoLogicalField {
        grid-area: b;
    }
    form.mktoForm.mktoLayoutLeft .mktoError {
        grid-area: d;
    }

    /* floating labels AND labels left */
    body.floatingLabels-on form.mktoForm.mktoLayoutLeft input[type] {
        padding-top: 8px !important;
    }
    body.floatingLabels-on form.mktoForm.mktoLayoutLeft label.mktoLabel {
        margin-top: 10px !important;
        font-size: 0.9em !important;
    }
}



/* :::::::[custom modules]::::::: */
/* text boxes */
.textBox-light {
    background-color: rgb(255 255 255 / 70%); 
}
.textBox-dark {
    background-color: rgb(0 0 0 / 70%); 
    color: #fff;
}
.textBox-dark a {
    color: #fff !important;
}
.textBox-bottom-left, .textBox-bottom-right {
    padding: 20px;
}
@media screen and (min-width:991px){
    .textBox-bottom-left {
      position: absolute;
      bottom:30px;
      left:30px;
      width:40%;
      min-height: 50%;
  }
  .textBox-bottom-right {
      position: absolute;
      bottom:30px;
      right:30px;
      width:40%;
      min-height: 50%;
  }
}

/* offset containers */
@media screen and (min-width:991px) {
 .offset-bottom-lg-300 {
     margin-bottom: -300px !important; /* bottom offset (desktop only) */
 }   
}