/*
Style for landing Phoenix
*/


/**             HEADER          **/
#top.phoenix .main_menu li.menu-item > a {
    color: #ffffff;
}
#top.phoenix .main_menu li.current-menu-item > a,
#top.phoenix .main_menu li.current-page-ancestor > a,
#top.phoenix .main_menu li.menu-item > a:hover {
    color: #fdd500 !important;
}
#top.phoenix #ow-after-header {
    background-color: #222020;
    border-color: #222020;
}
#top.phoenix #ow-after-header li.pagenav h6,
#top.phoenix #ow-after-header li.pagenav li.page_item > a {
    color: #9b9b9b;
}
#top.phoenix #ow-after-header li.pagenav li.page_item.current_page_item > a,
#top.phoenix #ow-after-header li.pagenav li.current_page_ancestor.current_page_parent > a {
    color: #fdd500;
}
#top.phoenix #ow-after-header a.avia-button.avia-color-dark {
    border-color: #979797;
    color: #979797;
}
#top.phoenix #ow-after-header a.avia-button.avia-color-theme-color {
    border-color: #fdd500;
    background-color: #fdd500;
    color: #292319;
}
#top.phoenix .header_bg {
    background-color: #0d0b0b;
}
#top.phoenix #scroll-top-link {
    background-color: #fdd500;
    color: #ffffff;
    border-color: #ffffff;
}


/**       CONTENT         **/
body#top.phoenix {
    font-size: 17px;
}
#top.phoenix #wrap_all .main_color h2 {
    font-family: Roboto;
    font-size: 2.8em;
    font-weight: bold;
    color: #fdd500;
    margin-bottom: 40px;
    text-transform: none;
}
#top.phoenix #wrap_all .main_color h3 {
    color: #292319;
    font-family: Roboto;
    font-size: 2.5em;
    font-weight: 700;
    text-transform: none;
    margin-bottom: 35px;
}
#top.phoenix #wrap_all p {
    font-family: Roboto;
    font-size: 0.95em;
    font-weight: 400;
    line-height: 1.5em;
    letter-spacing: 0.27px;
    font-size: 1em;
}
#top.phoenix #wrap_all .darker-text p {
    color: #292319;
}
#top.phoenix #wrap_all a {
    font-family: Roboto;
}
#top.phoenix #wrap_all .container {
    /*max-width: 1380px;*/
}
#top.phoenix .max-width-850 {
    max-width: 850px;
    margin: 0 auto;
    float: none;
}
#top .small-placeholder .av-flex-placeholder {
    width: 2%;
}
/*  Banner    */
#ow-phoenix-banner {
    position: relative;
    background-image: url(./images/svg/phoenix-banner-mask-bird.svg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    background-color: transparent;
    z-index: 10;
}
#ow-phoenix-banner .container {
    background-image: url(images/svg/phoenix-title.svg);
    background-repeat: no-repeat;
    background-position: center 66px;
    background-size: 66%
}
#top.phoenix #main a.avia-button {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    line-height: 25px;
    text-transform: uppercase;
}
#top .button-yellow a {
    min-height: 55px;
    padding-right: 40px !important;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.30px;
    white-space: nowrap;
    background-image: linear-gradient(to right, #fce130 0%, #fce130 33.3%, #1e1a1b 33.3%, #1e1a1b 66.6%, #fce130 66.6%, #fce130 100%);
    background-size: 309% 200%;
    border: none;
    transition: all .3s;
    clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0 100%);
    -webkitclip-path: polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0 100%);
}
#top .button-yellow a:hover {
    -webkit-animation: button-background .3s linear;
    -o-animation: button-background .3s linear;
    animation: button-background .3s linear;
    background-position: 50% center;
    color: #fff !important;
}
#top .button-underline a {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1.50px;
    padding: 15px 20px;
    border: none !important;
}
#top .button-underline a:before {
    content: "";
    border-bottom: 1px solid #fff;
    width: calc(100% - 40px);
    height: 0;
    display: block;
    position: absolute;
    bottom: 16px;
}
#top .button-underline a:hover:before {
    border-color: #fce130 !important;
}
#top #ow-phoenix-banner .button-underline a {
    background-color: transparent !important;
}
#top #ow-phoenix-banner .button-underline a:hover {
    color: #fce130 !important;
}
#top #ow-phoenix-banner .banner-text p {
    font-weight: 300;
}
#top #ow-phoenix-banner .banner-text p strong {
    font-weight: 500;
}

/*      Banner images      */
.banner-images-wrapper {
    position: relative;
    width: 654px;
    margin: 0 auto;
}
.banner-images-wrapper .banner-images-top {
    position: relative;
}
.banner-images-wrapper .image-left {
    position: relative;
    display: inline-block;
    width: 333px;
    height: 380px;
    background-image: url(./images/svg/banner-stroke-left.svg);
    background-repeat: no-repeat;
    background-size: 190px 334px;
    background-position: center center;
}
.banner-images-wrapper .image-left:before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(./images/svg/banner-stroke-left-yellow.svg);
    background-repeat: no-repeat;
    background-size: 190px 334px;
    background-position: center center;
    visibility: hidden;
}
.banner-images-wrapper .image-left:after {
    content: "";
    position: absolute;
    top: -10%;
    left: -10%;
    display: block;
    width: 120%;
    height: 120%;
    background-image: url(./images/assets/banner-image-shadow.png);
    background-repeat: no-repeat;
    background-position: center center;
    transform: scale(1, -1);
    visibility: hidden;
}
.banner-images-wrapper .image-left img {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    -webkit-animation: avia_image_appear 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
    animation: avia_image_appear 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
.banner-images-wrapper .image-left-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(./images/svg/banner-stroke-small-yellow.svg);
    background-repeat: no-repeat;
    background-size: 56px 32px;
    background-position: 59px calc(100% - 128px);
    transform: scaleX(-1);
    visibility: hidden;
}
.banner-images-wrapper .image-right {
    position: relative;
    display: inline-block;
    width: 306px;
    height: 380px;
    background-image: url(./images/svg/banner-stroke-right.svg);
    background-repeat: no-repeat;
    background-size: 190px 334px;
    background-position: 20% center;
}
.banner-images-wrapper .image-right:before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(./images/svg/banner-stroke-right-yellow.svg);
    background-repeat: no-repeat;
    background-size: 190px 334px;
    background-position: 20% center;
    visibility: hidden;
}
.banner-images-wrapper .image-right:after {
    content: "";
    position: absolute;
    top: -10%;
    left: -10%;
    display: block;
    width: 120%;
    height: 120%;
    background-image: url(./images/assets/banner-image-shadow.png);
    background-repeat: no-repeat;
    background-position: center center;
    visibility: hidden;
}
.banner-images-wrapper .image-right img {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    -webkit-animation: avia_image_appear 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
    animation: avia_image_appear 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
.banner-images-wrapper .image-right-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(./images/svg/banner-stroke-small-yellow.svg);
    background-repeat: no-repeat;
    background-size: 56px 32px;
    background-position: 13px calc(100% - 128px);
    visibility: hidden;
}
.banner-images-wrapper .banner-middle-icon {
    width: 84px;
    height: 98px;
    position: absolute;
    left: calc(50% - 56px);
    bottom: 65px;
    background-image: url(./images/svg/banner-middle-icon.svg);
    background-repeat: no-repeat;
    background-size: 84px 98px;
    background-position: center center;
    z-index: 10;
}
.banner-images-wrapper .banner-middle-icon span {
    width: 84px;
    text-align: center;
    display: inline-block;
    padding: 10px;
    color: #ffffff;
    font-width: 700;
    font-size: 15px;
}
.banner-images-wrapper .banner-images-bottom {
    position: relative;
    top: -40px;
}
.banner-images-wrapper .image-bottom {
    position: relative;
    width: 500px;
    height: 210px;
    background-image: url(./images/svg/banner-stroke-bottom.svg);
    background-repeat: no-repeat;
    background-size: 381px 197px;
    background-position: 39% center;
    margin: 0 auto;
    text-align: center;
}
.banner-images-wrapper .image-bottom:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(./images/svg/banner-stroke-bottom-yellow.svg);
    background-repeat: no-repeat;
    background-size: 381px 197px;
    background-position: 39% center;
    visibility: hidden;
}
.banner-images-wrapper .image-bottom:after {
    content: "";
    position: absolute;
    top: -10%;
    left: -10%;
    display: block;
    width: 120%;
    height: 120%;
    background-image: url(./images/assets/banner-image-shadow.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    transform: rotate(-63deg) scale(2, 3);
    z-index: -1;
    visibility: hidden;
}
.banner-images-wrapper .image-bottom img {
    z-index: 1;
    -webkit-animation: avia_image_appear 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
    animation: avia_image_appear 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
.banner-images-wrapper .image-bottom-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(./images/svg/banner-stroke-small-yellow.svg);
    background-repeat: no-repeat;
    background-size: 56px 32px;
    background-position: calc(50% - 81px) 150px;
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
    visibility: hidden;
}
.banner-images-wrapper:hover .banner-middle-icon {
    background-image: url(./images/svg/banner-middle-icon-yellow.svg);
}
.banner-images-wrapper .image-left:hover:before,
.banner-images-wrapper .image-left:hover .image-left-line,
.banner-images-wrapper .image-right:hover:before,
.banner-images-wrapper .image-right:hover .image-right-line,
.banner-images-wrapper .image-bottom:hover:before,
.banner-images-wrapper .image-bottom:hover .image-bottom-line,
.banner-images-wrapper .image-left:hover:after,
.banner-images-wrapper .image-right:hover:after,
.banner-images-wrapper .image-bottom:hover:after {
    visibility: visible;
}
.banner-images-wrapper img {
    transition: transform 0.3s;
}
.banner-images-wrapper .image-left:hover img,
.banner-images-wrapper .image-right:hover img,
.banner-images-wrapper .image-bottom:hover img {
    transform: scale(1.1);
}

/*      Liqiud cooling      */
#phoenix-liquid-cooling {
    position: relative;
    background-image: linear-gradient(180deg, #ffffff 0%, #c9c9c9 100%);
    margin-top: -120px;
    z-index: 9;
}
#phoenix-liquid-cooling:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-image: url(./images/assets/asset-4.png);
    background-repeat: no-repeat;
    background-position: left -10%;
    background-size: 27%;
}
#phoenix-liquid-cooling:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-image: url(./images/assets/asset-2.png);
    background-repeat: no-repeat;
    background-position: right -13%;
    background-size: 30%;
}
#phoenix-liquid-cooling .increase-image img {
    transform: scale(1.3);
}
#top .button-show-image {
	position: absolute;
	left: 50%;
    transform: translate(-50%);
}
#top .button-show-image	a {
	font-family: Roboto;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.30px;
    white-space: nowrap;
}
#top .show-on-hover {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
	transition: 0.3s opacity;
	opacity: 0;
}
#top .show-on-hover.hover {
	opacity: 1 !important;
}
#top .hide-on-hover {
    transition: 0.3s opacity;
	opacity: 1;
}
#top .hide-on-hover.hover {
	opacity: 0 !important;
}
.image-hover-panel {
	padding: 50px 0;
}
#top .image-hover-panel .avia-image-container {
	margin-bottom: 0;
}

#top .image-hover-panel:hover .hide-on-hover {
    opacity: 0 !important;
}
#top .image-hover-panel:hover .show-on-hover {
    opacity: 1 !important;
}

/*      Radiator core      */
#phoenix-radiator-core {
    background-image: url(./images/svg/phoenix-radiator-core-mask.svg);
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
    margin-top: -200px;
    position: relative;
    background-color: transparent;
    z-index: 9;
}

/*      QDC      */
#phoenix-qdc {
    position: relative;
    background-color: transparent;
    margin-top: -150px;
    z-index: 8;
}
#phoenix-qdc:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(./images/svg/phoenix-qdc-mask.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}
#phoenix-qdc:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(./images/svg/GPU_graphic.svg);
    background-repeat: no-repeat;
    background-position: 87% 40%;
    background-size: auto 50%;
    display: block;
}
#phoenix-qdc-image {
    z-index: 99;
    position: relative;
    background-color: transparent;
    margin-top: -310px;
}
#phoenix-qdc-image .container {
    min-height: 20vw;
}
.hotspot-hidden-image img { 
    opacity: 0;
    visibility: hidden;
}

/*      CPU      */
#phoenix-cpu {
    position: relative;
    background-image: url(./images/svg/phoenix-cpu-mask.svg);
    background-repeat: no-repeat;
    background-position: center calc(100% - 100px);
    background-size: cover;
    background-color: transparent;
    margin-top: -280px;
    z-index: 6;
}

/*      GPU      */
#phoenix-gpu {
    position: relative;
    background-image: url(./images/svg/phoenix-gpu-mask.svg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    background-color: transparent;
    margin-top: -230px;
    z-index: 5;
}
#phoenix-gpu:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(./images/assets/asset-gpu1.png);
    background-repeat: no-repeat;
    background-position: left -10%;
    background-size: auto 40%;
    display: block;
}



/**             Hotspots          **/
#top.phoenix .av-hotspot-image-container .av-image-hotspot {
    height: 18px;
    width: 18px;
    line-height: 18px;
    font-size: 10px;
    animation: none !important;
}
#top.phoenix .av-hotspot-image-container .av-image-hotspot_inner,
#top.phoenix .av-hotspot-fallback-tooltip-count {
    background-color: #fdd500;
    border-color: #fdd500;
    color: #000;
}
#top.phoenix .av-hotspot-image-container .av-image-hotspot-pulse {
    height: 40px;
    width: 40px;
    top: -11px;
    left: -11px;
    background-color: #fdd500;
}
#top.phoenix .avia-arrow {
    display: none;
}
#top.phoenix .av-hotspot-fallback-tooltip-inner {
    border: 1px solid #fdd500;
    background-color: transparent;
    background-image: linear-gradient(180deg, rgba(44, 41, 42, 0.7) 0%, rgba(0, 0, 0, 0.38) 0%, rgba(83, 80, 81, 0.7) 100%);
}
#top.phoenix .av-hotspot-fallback-tooltip-inner p {
    font-size: 16px;
    color: #fff;
}

/*      BOX         */
#top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot {
    background: none;
    width: 320px;
    border: 1px solid #fdd500;
    background-image: linear-gradient(180deg, rgba(44, 41, 42, 0.7) 0%, rgba(0, 0, 0, 0.39) 0%, rgba(83, 80, 81, 0.7) 100%);
    padding: 25px 30px;
    overflow: visible;
    animation: hotspot-tooltip 0.6s linear;
}
#top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot .inner_tooltip {
}
#top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot:before {
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 185px;
    background-color: #fdd500;
    background: linear-gradient(to top, transparent 50%, #fdd500 50%);
    background-size: 100% 200%;
    animation: hotspot-line 0.2s linear;
}
#top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot:after {
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 100px;
    left: 50%;
    background-color: #fdd500;
    background: linear-gradient(to top, transparent 50%, #fdd500 50%);
    background-size: 100% 200%;
    animation: hotspot-line-2 0.4s linear;
}

/*  ABOVE   */
#top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot.av-tt-pos-above {
    margin-top: -207px;
}
#top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot.av-tt-pos-above:before {
    top: calc(100% + 65px);
}
#top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot.av-tt-pos-above:after {
    top: 100%;
}
/*  BELOW   */
#top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot.av-tt-pos-below {
    margin-top: 310px;
}
#top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot.av-tt-pos-below:before {
    bottom: calc(100% + 64px);
}
#top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot.av-tt-pos-below:after {
    bottom: 100%;
}
/*  RIGHT   */
#top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot.av-tt-pos-right {
    margin-left: 246px;
    animation: hotspot-tooltip-right 0.6s linear;
}
#top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot.av-tt-pos-right:before {
    right: calc(100% + 175px);
    animation: hotspot-line-reverse 0.2s linear;
}
#top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot.av-tt-pos-right:after {
    top: 0;
    right: calc(100% + 50px);
    left: auto;
    transform: rotate(90deg);
}

/*  RIGHT   */
#top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot.av-tt-align-right {
    margin-left: 300px;
}
#top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot.av-tt-align-right:before {
    left: calc(50% - 72px);
    transform: rotateZ(51.5deg);
}
/*  LEFT   */
#top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot.av-tt-align-left {
    margin-left: -300px;
}
#top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot.av-tt-align-left:before {
    left: calc(50% + 72px);
    transform: rotateZ(-51.5deg);
}
/* BOTTOM */
#top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot.av-tt-align-bottom {
    margin-top: 150px;
}
#top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot.av-tt-align-bottom:before {
    top: calc(50% - 144px);
    transform: rotateZ(-55deg);
}

/*  BELOW RIGHT   */
#top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot.av-tt-pos-below.av-tt-align-right:before {
    left: calc(50% - 72px);
    transform: rotateZ(-51.5deg);
}

/*      Hotspot content     */
#top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot .avia-arrow-wrap {
    display: none;
}
#top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot .inner_tooltip p {
    opacity: 0.8;
    font-family: Roboto;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.25px;
    text-align: center;
}


    /**             FOOTER          **/
#top #footer .ow-social-icons > a:before {
    margin: 0 10px 10px 0;
}
#top #footer .ow-social-icons .ow-discord {
    display: block;
    float: left;
    width: 40px;
    height: 40px;
    position: relative;
    margin: 0 10px 10px 0;
}
#top #footer .ow-social-icons .ow-discord:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: transparent;
    background-image: url(./images/svg/discord-icon.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    transition: opacity 0.3s;
    opacity: 1;
}
#footer .ow-social-icons .ow-discord:hover:before {
    opacity: 0;
}
#footer .ow-social-icons .ow-discord:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: transparent;
    background-image: url(./images/svg/discord-icon-hover.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    transition: opacity 0.3s;
    opacity: 0;
}
#footer .ow-social-icons .ow-discord:hover:after {
    opacity: 1;
}
#top.phoenix #footer {
    background-image: none;
    background-color: #222020;
}
#top.phoenix #footer .textwidget,
#top.phoenix #footer .textwidget p,
#top.phoenix #footer .textwidget strong,
#top.phoenix #footer .textwidget a,
#top.phoenix #footer .textwidget input {
    color: #949494;
}
#top.phoenix #footer .textwidget input {
    border-color: #979797;
}
#top.phoenix #footer .textwidget input[type="submit"] {
    color: #fdd500;
    border-color: #fdd500;
}
#top.phoenix #footer .textwidget ::-webkit-input-placeholder {
    color: #949494;
}
#top.phoenix #footer .textwidget ::-moz-placeholder {
    color: #949494;
}
#top.phoenix #footer .textwidget :-ms-input-placeholder {
    color: #949494;
}
#top.phoenix #footer .textwidget :-moz-placeholder {
    color: #949494;
}
#top.phoenix #footer .ow-social-icons > a:before {
    color: #222020;
}
#top.phoenix #socket {
    background-color: #0d0b0b;
}
/*#top.phoenix #socket .copyright {
    visibility: hidden;
}*/



@media only screen and (min-width: 1920px){
    #phoenix-qdc-image { margin-top: -16vw; }
}

@media only screen and (min-width: 990px){
    #top #ow-phoenix-banner .banner-text p strong {  display: block; }
}

@media only screen and (min-width: 768px){
    .big-screen-padding-left { padding-left: calc(21% - 150px) !important; }
    .big-screen-padding-right { padding-right: calc(21% - 150px) !important; }
    #phoenix-gpu .container > div { padding-top: 100px; }
}


@media only screen and (max-width: 1279px){
    #top.phoenix .main_menu li.menu-item > a {  padding: 0 15px; }
    #phoenix-qdc:before { clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);  }
    #phoenix-liquid-cooling:before { background-position: left -5%; background-size: 300px; }
    #phoenix-liquid-cooling:after { background-position: right -5%; background-size: 300px; }
    #phoenix-qdc .container > div { padding-right: 100px; }
    #phoenix-qdc:after { background-position: 99% 40%; }
    #top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot.av-tt-pos-right:before { right: calc(100% + 75px); }
    #top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot.av-tt-pos-right { margin-left: 146px; }
    #top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot.av-tt-pos-right:after { content: none; }

}


@media only screen and (max-width: 989px){
    #phoenix-qdc .container > div { padding-right: 200px; }
    #top .button-wrapper { width: 100% !important; }
    #top .button-wrapper .avia-button-wrap { float: none; display: block; text-align: center; }
    #top .button-wrapper .avia-button-wrap .avia-button { float: none;  display: inline-block; }
    #top #ow-phoenix-banner .button-underline a { margin-left: 0; }
    #phoenix-gpu:before { background-size: 300px; }
    #phoenix-gpu:after { background-size: 250px; }
    #top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot.av-tt-align-bottom:before { top: -145px; }
    #top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot.av-tt-align-bottom {  margin-top: 200px; }
    #top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot.av-tt-pos-right:before { right: calc(50% + 75px); }
    #top.phoenix .avia-tooltip.transparent_dark.av-tt-hotspot.av-tt-pos-right { margin-left: -11px; }
}


@media only screen and (max-width: 767px) {
    #phoenix-radiator-core .container > div { padding-bottom: 100px; }
    .mobile-hide { display: none !important; }
    #phoenix-radiator-core .container > div { padding-top: 100px; }
    #phoenix-cpu .container > div { padding-bottom: 230px; }
    .banner-images-container { position: relative; height: 500px; }
    .banner-images-wrapper { position: absolute; top: calc(50% - 300px); left: calc(50% - 327px); transform: scale(0.9); }
    #phoenix-qdc .container > div { padding-right: 0; }
    #phoenix-qdc-image { background-size: auto 200px !important; margin-top: -290px; }
    #phoenix-liquid-cooling { padding-top: 100px; }
    #phoenix-liquid-cooling .increase-image .avia-image-container-inner { padding: 25% 0; }
    #phoenix-qdc:after {  opacity: 0.4; }
    #phoenix-qdc .container { height: 800px !important; }
    #phoenix-qdc .post-entry { margin-top: -50px; }
    .move-up-mobile { top: -40px; }
    #phoenix-gpu .container { padding-top: 100px;}
	#top .button-show-image { bottom: 50px; }
}
@media only screen and (max-width: 600px) {
    .banner-images-container { height: 450px; }
    .banner-images-wrapper { transform: scale(0.8); }
}
@media only screen and (max-width: 500px) {
    .banner-images-container { height: 400px; }
    .banner-images-wrapper { transform: scale(0.7); }
}
@media only screen and (max-width: 480px) {
    .banner-images-container { height: 350px; }
    .banner-images-wrapper { transform: scale(0.6); }
    #top .button-yellow a { white-space: normal; padding: 15px 10px; }
    #top .button-yellow a:after { content: none; }
}
@media only screen and (max-width: 400px) {
    .banner-images-container { height: 300px; }
    .banner-images-wrapper { transform: scale(0.5); }
}


/*  ENFOLD Animations    */
.avia_transform #top.phoenix .avia_start_delayed_animation.right-to-left {
    -webkit-animation: avia-rtl 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1);
    animation: avia-rtl 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1);
}
.avia_transform #top.phoenix .avia_start_delayed_animation.left-to-right {
    -webkit-animation: avia-ltr 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1);
    animation: avia-ltr 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1);
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes hotspot-line {
    from {background-position: center -100%;}
    to {background-position: center 0;}
}
/* Standard syntax */
@keyframes hotspot-line {
    from {background-position: center -100%;}
    to {background-position: center 0;}
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes hotspot-line-2 {
    0% {background-position: center -100%;}
    50% {background-position: center -100%;}
    100% {background-position: center 0;}
}
/* Standard syntax */
@keyframes hotspot-line-2 {
    0% {background-position: center -100%;}
    50% {background-position: center -100%;}
    100% {background-position: center 0;}
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes hotspot-line-reverse {
    0% {background-position: center 100%;}
    100% {background-position: center 0;}
}
/* Standard syntax */
@keyframes hotspot-line-reverse {
    0% {background-position: center 100%;}
    100% {background-position: center 0;}
}
/* Safari 4.0 - 8.0*/
@-webkit-keyframes hotspot-tooltip {
    0% {
        clip-path: polygon(0 101%, 100% 101%, 100% 1000%, 0 1000%);
        -webkit-clip-path: polygon(0 101%, 100% 101%, 100% 1000%, 0 1000%);
    }
    66% {
        clip-path: polygon(0 101%, 100% 101%, 100% 1000%, 0 1000%);
        -webkit-clip-path: polygon(0 101%, 100% 101%, 100% 1000%, 0 1000%);
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 1000%, 0 1000%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 1000%, 0 1000%);
    }
}
/* Standard syntax*/
@keyframes hotspot-tooltip {
    0% {
        clip-path: polygon(0 101%, 100% 101%, 100% 1000%, 0 1000%);
        -webkit-clip-path: polygon(0 101%, 100% 101%, 100% 1000%, 0 1000%);
    }
    66% {
        clip-path: polygon(0 101%, 100% 101%, 100% 1000%, 0 1000%);
        -webkit-clip-path: polygon(0 101%, 100% 101%, 100% 1000%, 0 1000%);
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 1000%, 0 1000%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 1000%, 0 1000%);
    }
}
/* Safari 4.0 - 8.0*/
@-webkit-keyframes hotspot-tooltip-right {
    0% {
        clip-path: polygon(-300px -100px, 0 -100px, 0 100%, -300px 100%);
        -webkit-clip-path: polygon(-300px -100px, 0 -100px, 0 100%, -300px 100%);
    }
    66% {
        clip-path: polygon(-300px -100px, 0 -100px, 0 100%, -300px 100%);
        -webkit-clip-path: polygon(-300px -100px, 0 -100px, 0 100%, -300px 100%);
    }
    100% {
        clip-path: polygon(-300px -100px, 100% -100px, 100% 100%, -300px 100%);
        -webkit-clip-path: polygon(-300px -100px, 100% -100px, 100% 100%, -300px 100%);
    }
}
/* Standard syntax*/
@keyframes hotspot-tooltip-right {
    0% {
        clip-path: polygon(-300px -100px, 0 -100px, 0 100%, -300px 100%);
        -webkit-clip-path: polygon(-300px -100px, 0 -100px, 0 100%, -300px 100%);
    }
    66% {
        clip-path: polygon(-300px -100px, 0 -100px, 0 100%, -300px 100%);
        -webkit-clip-path: polygon(-300px -100px, 0 -100px, 0 100%, -300px 100%);
    }
    100% {
        clip-path: polygon(-300px -100px, 100% -100px, 100% 100%, -300px 100%);
        -webkit-clip-path: polygon(-300px -100px, 100% -100px, 100% 100%, -300px 100%);
    }
}


@-webkit-keyframes button-background {
    from {background-position: 100% center;}
    to {background-position: 50% center;}
}
@keyframes button-background {
    from {background-position: 100% center;}
    to {background-position: 50% center;}
}

@-webkit-keyframes image-fade-in {
    from {max-height: 0;}
    to {max-height: 400px;}
}
@keyframes image-fade-in {
    from {max-height: 0;}
    to {max-height: 400px;}
}

/*  Subscribe button - animation   */
#top #ow-newsletter-form .ow-submit {
    background-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 33.3%, #d58f3e 33.3%, #d58f3e 66.6%, rgba(0,0,0,0) 66.6%, rgba(0,0,0,0) 100%) !important;
    background-size: 309% 200% !important;
    transition: all .3s;
}
#top #ow-newsletter-form .ow-submit:hover {
    -webkit-animation: button-background .3s linear;
    -o-animation: button-background .3s linear;
    animation: button-background .3s linear;
    background-position: 50% center !important;
    color: #e1e1e1 !important;
    border-color: #e1e1e1 !important;
    background-color: transparent !important;
}

#top.phoenix #ow-newsletter-form .ow-submit {
    background-image: linear-gradient(to right, #222020 0%, #222020 33.3%, #fdd500 33.3%, #fdd500 66.6%, #222020 66.6%, #222020 100%) !important;
    background-size: 309% 200% !important;
    transition: all .3s;
}
#top.phoenix #ow-newsletter-form .ow-submit:hover {
    -webkit-animation: button-background .3s linear;
    -o-animation: button-background .3s linear;
    animation: button-background .3s linear;
    background-position: 50% center !important;
    color: #1e1a1b !important;
}
/*  END Subscribe button - animation   */

/*Harej - social icons footer*/
.ow-social-icons img {
    height: 30px;
    margin-right: 5px;
    margin-top: 10px;
}
/*Harej - END social icons footer*/