/* ============================================
   Component: Homepage Legacy Interaction Core
   Source: Styles/css/components/homepage-legacy-baseline.css (229-449)
   - header hover state fallback
   - custom cursor/pointer legacy behavior
   ============================================ */

html.no-touch .header_item.menu:hover .header_icon .line_dot,
html.no-touch .header_item.portal:hover .header_icon:after,
html.no-touch .header_item:hover .header_text {
    opacity: 1;
}

html.no-touch .header_item.portal:hover .header_icon:before {
    opacity: 0;
}

html.no-touch .header_item.contact:hover .header_icon:after,
html.no-touch .header_item.contact:hover .header_icon:before {
    opacity: 1;
}

@media screen and (min-width: 1024px) {
    html.no-touch .header_item.contact:hover .header_icon:before {
        opacity: 0;
    }
}


#cursor {
    border: 2px solid rgba(173, 167, 185, 0.5);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 30px;
    margin: -15px;
    opacity: 0;
    padding: 0;
    -webkit-transition-duration: 0.15s;
    -moz-transition-duration: 0.15s;
    -o-transition-duration: 0.15s;
    transition-duration: 0.15s;
    visibility: hidden;
    width: 30px;
    z-index: 10000000;
}

#cursor.isShowingText {
    border-color: rgba(173, 167, 185, 0.4);
    height: 70px;
    opacity: 1;
    visibility: visible;
    width: 70px;
}

#cursor.isShowingText:before {
    color: #fff;
    font-size: 19px;
    left: 50%;
    letter-spacing: 0.08em;
    position: absolute;
    text-transform: uppercase;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#cursor.isShowingText.read:before {
    content: 'read';
}

#cursor.isShowingText.watch:before {
    content: 'watch';
}

#cursor.anchor {
    border-color: rgba(173, 167, 185, 0.5);
    height: 44px;
    width: 44px;
}

#cursor.hidden {
    border-color: transparent;
}

#pointer {
    background: #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 6px;
    margin: -3px;
    opacity: 0;
    padding: 0;
    visibility: hidden;
    width: 6px;
    z-index: 10000000;
}

#pointer.hidden {
    background: transparent !important;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

#pointer.input {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    height: 26px;
    margin: -13px 0 0;
    width: 2px;
}

.targetable {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

@-webkit-keyframes cursorClick {

    0%,
    to {
        border: 3px solid #34657f;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    60% {
        border: 3px solid rgba(173, 167, 185, 0);
        -webkit-transform: scale(2);
        transform: scale(2);
    }

    70% {
        border: 3px solid rgba(173, 167, 185, 0);
        -webkit-transform: scale(1.4);
        transform: scale(1.4);
    }
}

@-moz-keyframes cursorClick {

    0%,
    to {
        border: 3px solid #34657f;
        -moz-transform: scale(1);
        transform: scale(1);
    }

    60% {
        border: 3px solid rgba(173, 167, 185, 0);
        -moz-transform: scale(2);
        transform: scale(2);
    }

    70% {
        border: 3px solid rgba(173, 167, 185, 0);
        -moz-transform: scale(1.4);
        transform: scale(1.4);
    }
}

@-o-keyframes cursorClick {

    0%,
    to {
        border: 3px solid #34657f;
        -o-transform: scale(1);
        transform: scale(1);
    }

    60% {
        border: 3px solid rgba(173, 167, 185, 0);
        -o-transform: scale(2);
        transform: scale(2);
    }

    70% {
        border: 3px solid rgba(173, 167, 185, 0);
        -o-transform: scale(1.4);
        transform: scale(1.4);
    }
}

@keyframes cursorClick {

    0%,
    to {
        border: 3px solid #34657f;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }

    60% {
        border: 3px solid rgba(173, 167, 185, 0);
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        -o-transform: scale(2);
        transform: scale(2);
    }

    70% {
        border: 3px solid rgba(173, 167, 185, 0);
        -webkit-transform: scale(1.4);
        -moz-transform: scale(1.4);
        -o-transform: scale(1.4);
        transform: scale(1.4);
    }
}


