* { margin: 0; padding: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); } html { overflow: hidden; } html *, html *:before, html *:after { box-sizing: inherit; } body { width: 100%; height: 450px; box-sizing: border-box; font-size: 16px; font-family: 'PT Sans', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none !important; } a { -webkit-user-select: none !important; } .hidden { display: none !important; opacity: 0; } .box { position: relative; width: 100%; max-width: 660px; height: 100%; margin: 0 auto; background: #F0F5FF; overflow: hidden; } .container { position: absolute; left: 0; width: 100%; } .container.title-container { height: 110px; z-index: 10; width: 300px; bottom: 0; padding-top: 10px; background: rgba(255, 255, 255, 0.48); } .container.title-container .title { position: relative; color: #28455F; padding: 0 40px; } .container.title-container .title .title-text { font-size: 1.4em; line-height: 1.2; color: #0c385f; font-family: 'PT Sans Narrow', sans-serif; font-weight: 600; } .container.title-container .title .title-number { margin-top: 2px; font-size: .9em; font-style: italic; } .container.title-container .title .title-desc { margin-top: 5px; font-size: .95em; } .container.title-container .title .labels { width: 40px; margin-right: 10px; display: inline-block; font-size: .8em; text-transform: uppercase; font-weight: 600;} .title-text-top { font-size: 1.4em; line-height: 1.2; color: #0c385f; font-family: 'PT Sans Narrow', sans-serif; font-weight: 600; position: absolute; top: -320px; left: 20px; } .title-des-top { margin-top: 5px; font-size: .95em; position: absolute; top: -295px ; left: 20px; z-index: 5; } .container.title-container.development { background: #eee7e1; } .container.title-container.development .title-status-text { color:#76451b; font-weight:600; } .container.title-container .title-button { position: absolute; top: 0; width: 40px; font-size: 1.8em; text-align: center; line-height: 80px; color: #6B8398; cursor: pointer; transition: all .5s ease; } .container.title-container .title-button:hover { color: #28455F; } .container.title-container .title-button.prev-button { left: 0; } .container.title-container .title-button.next-button { right: 0; } .container.photo-container { bottom: 0; height: 450px; } .container.photo-container .photo { position: absolute; top: 0; left: calc(50% - 330px); width: 660px; height: 450p; z-index: 0; } .container.photo-container .photo.photo-darken:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .3); z-index: 1; } .container.photo-container .photo.photo-overlay { z-index: 2; } .container.photo-container .photo.photo-overlay .photo-highlights { width: 100%; height: 450px; z-index: 1; position: absolute; top: 0px; left: 0; } .container.photo-container .photo.photo-overlay .photo-highlights svg { position: absolute; top: calc( 50% - 277px); width: 660px; height: 500px; } .container.photo-container .photo.photo-overlay .photo-highlights svg .label { fill-opacity: 0; } .container.photo-container .photo.photo-overlay .photo-highlights svg .label.current { fill-opacity: .9; fill: #FFFF00; animation: overlay-blink 3s; } .container.photo-container .photo.photo-overlay .photo-buttons { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .container.photo-container .photo.photo-overlay .photo-buttons .photo-button { position: absolute; left: 50%; width: 18px; height: 26px; margin-top: -13px; margin-left: -13px; border-radius: 50%; font-size: 1.3em; text-align: center; line-height: 26px; color: #fff; opacity: 1;cursor: pointer; transition: all .5s ease; transform: rotate(180deg); } .container.photo-container .photo.photo-overlay .photo-buttons .photo-button:hover { opacity: 1; color: #b51212; } .container.photo-container .photo.photo-overlay .photo-buttons .photo-button.current { opacity: 1; cursor: default; animation:1s fire2 ease-in; animation-fill-mode: forwards; } .container.photo-container .photo.photo-overlay .photo-buttons .photo-button#photo-button-0 { bottom: 1%; left: 62.9%; height: 75px; } .container.photo-container .photo.photo-overlay .photo-buttons .photo-button#photo-button-1 { bottom: 1%; left: 66.5%; height: 75px; } .container.photo-container .photo.photo-overlay .photo-buttons .photo-button#photo-button-2 { bottom: 1%; left: 70.4%; height: 100px; } .container.photo-container .photo.photo-overlay .photo-buttons .photo-button#photo-button-3 { bottom: 1%; left: 73.5%; height: 100px; } .container.photo-container .photo.photo-overlay .photo-buttons .photo-button#photo-button-4 { bottom: 1%; left: 76.9%; height: 115px; } .container.photo-container .photo.photo-overlay .photo-buttons .photo-button#photo-button-5 { bottom: 1%; left: 81.1%; height: 130px; } .container.photo-container .photo.photo-overlay .photo-buttons .photo-button#photo-button-6 { bottom: 1%; left: 85.7%; height: 145px; } .container.photo-container .photo.photo-overlay .photo-buttons .photo-button#photo-button-7 { bottom: 1%; left: 90.9%; height: 250px; } .container.photo-container .photo.photo-overlay .photo-buttons .photo-button#photo-button-8 { bottom: 1%; left: 71.3%; height: 135px; } .container.photo-container .photo.photo-overlay .photo-buttons .photo-button#photo-button-9 { bottom: 1%; left: 75.3%; height: 110px; } .container.photo-container .photo.photo-overlay .photo-buttons .photo-button#photo-button-10 { bottom: 1%; left: 78.8%; height: 130px; } .container.photo-container .photo.photo-overlay .photo-buttons .photo-button#photo-button-11 { bottom: 1%; left: 82.5%; height: 150px; } .container.photo-container .photo.photo-overlay .photo-buttons .photo-button#photo-button-12 { bottom: 1%; left: 86%; height: 160px; } .container.photo-container .photo.photo-overlay .photo-buttons .photo-button#photo-button-13 { bottom: 1%; left: 89.3%; height: 160px; } .container.photo-container .photo.photo-overlay .photo-buttons .photo-button#photo-button-14 { bottom: 1%; left: 93%; height: 240px; width: 20px; } #photo-overlay #range-1, #photo-overlay #range-2, #photo-overlay.active #cover, #photo-overlay .keys { opacity: 0 } #photo-overlay.KN1 #range-1, #photo-overlay.KN2 #range-1, #photo-overlay.KG3 #range-1, #photo-overlay.HG5 #range-1, #photo-overlay.HG6 #range-1, #photo-overlay.HG7 #range-1, #photo-overlay.KN11 #range-2, #photo-overlay.KN15 #range-2, #photo-overlay.ND #range-2, #photo-overlay.BM25 #range-2, #photo-overlay.HG12 #range-2, #photo-overlay.HG14 #range-2, #photo-overlay.KN8 #range-2, #photo-overlay.KN14 #range-2, #photo-overlay.TG2 #range-2, #photo-overlay.active .keys, #photo-overlay.share #range-2 { opacity: 1 } #photo-overlay svg #range-KG3, #photo-overlay svg #range-KN11 { opacity: 0 } #photo-overlay svg .st9 {fill: #b1b1b1 ; } #photo-overlay svg text { font-family: "PT Sans"; fill: #666; } #photo-overlay.KN1 svg #m-KN1 { fill: #435540 ; animation: 1s fire ease-in; animation-fill-mode: forwards ; } #photo-overlay.KN1 svg #range-KN1 .st8 { stroke: #b51212; stroke-width: 2px; transition: .5s ease .3s ; } #photo-overlay.KN1 svg #range-KN1 .st9 { fill: #b51212 ; transition: .5s ease .3s ; } #photo-overlay.KN2 svg #m-KN2 { fill: #435540 ; animation: 1s fire ease-in; animation-fill-mode: forwards; } #photo-overlay.KN2 svg #range-KN1 .st8 { stroke: #b51212; stroke-width: 2px; transition: .5s ease .3s ;} #photo-overlay.KN2 svg #range-KN1 .st9 { fill: #b51212 ; transition: .5s ease .3s ;} #photo-overlay.KG3 svg #m-KG3 { fill: #435540 ; animation: 1s fire ease-in; animation-fill-mode: forwards; } #photo-overlay.KG3 svg #range-KG3 { display: block; opacity:1; transition: .5s ease 1s ; animation: 6s roam2 linear infinite;} #photo-overlay.KG3 svg #range-KG3 .st8 { stroke: #b51212; stroke-width: 2px; transition: .5s ease .3s ; } #photo-overlay.KG3 svg #range-KG3 .st9 { fill: #b51212 ; transition: .5s ease .3s ;} #photo-overlay.HG5 svg #m-HG5 { fill: #435540 ; animation: 1s fire ease-in; animation-fill-mode: forwards; } #photo-overlay.HG5 svg #range-HG5 .st8 { stroke: #b51212; stroke-width: 2px; transition: .5s ease .3s ;} #photo-overlay.HG5 svg #range-HG5 .st9 { fill: #b51212 ; transition: .5s ease .3s ;} #photo-overlay.HG6 svg #m-HG6 { fill: #435540 ; animation: 1s fire ease-in; animation-fill-mode: forwards; } #photo-overlay.HG6 svg #range-HG6 .st8 { stroke: #b51212; stroke-width: 2px; transition: .5s ease .3s ;} #photo-overlay.HG6 svg #range-HG6 .st9 { fill: #b51212 ; transition: .5s ease .3s ;} #photo-overlay.HG7 svg #m-HG7 { fill: #435540 ; animation: 1s fire ease-in; animation-fill-mode: forwards; } #photo-overlay.HG7 svg #range-HG7 .st8 { stroke: #b51212; stroke-width: 2px; transition: .5s ease .3s ;} #photo-overlay.HG7 svg #range-HG7 .st9 { fill: #b51212 ; transition: .5s ease .3s ;} #photo-overlay.KN11 svg #m-KN11 { fill: #435540 ; animation: 1s fire ease-in; animation-fill-mode: forwards; } #photo-overlay.KN11 svg #range-KN11 { display: block; opacity:1; transition: .5s ease 1s ; animation: 6s roam linear infinite;} #photo-overlay.KN11 svg #range-KN11 .st8 { stroke: #b51212; stroke-width: 2px; transition: .5s ease .3s ;} #photo-overlay.KN11 svg #range-KN11 .st16 { fill: #b51212 ; transition: .5s ease .3s ;} #photo-overlay.KN15 svg #m-KN15 { fill: #435540 ; animation: 1s fire ease-in; animation-fill-mode: forwards; } #photo-overlay.KN15 svg #range-KN15 .st8, #photo-overlay.KN15 svg #range-KN15 .st19 { stroke: #b51212; stroke-width: 2px; transition: .5s ease .3s ; } #photo-overlay.KN15 svg #range-KN15 .st16 { fill: #b51212 ; transition: .5s ease .3s ;} #photo-overlay.ND svg #m-ND { fill: #435540 ; animation: 1s fire ease-in; animation-fill-mode: forwards; } #photo-overlay.ND svg #range-ND .st8 { stroke: #b51212; stroke-width: 2px; transition: .5s ease .3s ; } #photo-overlay.ND svg #range-ND .st16 { fill: #b51212 ; transition: .5s ease .3s ;} #photo-overlay.BM25 svg #m-BM25 { fill: #435540 ; animation: 1s fire ease-in; animation-fill-mode: forwards; } #photo-overlay.BM25 svg #range-BM25 .st8, #photo-overlay.BM25 svg #range-BM25 .st20 { stroke: #b51212; stroke-width: 2px; transition: .5s ease .3s ; } #photo-overlay.BM25 svg #range-BM25 .st16 { fill: #b51212 ; transition: .5s ease .3s ;} #photo-overlay.HG12 svg #m-HG12 { fill: #435540 ; animation: 1s fire ease-in; animation-fill-mode: forwards; } #photo-overlay.HG12 svg #range-HG12 .st8, #photo-overlay.HG12 svg #range-HG12 .st21 { stroke: #b51212; stroke-width: 2px; transition: .5s ease .3s ; } #photo-overlay.HG12 svg #range-HG12 .st16 { fill: #b51212 ; transition: .5s ease .3s ;} #photo-overlay.HG14 svg #m-HG14 { fill: #435540 ; animation: 1s fire ease-in; animation-fill-mode: forwards; } #photo-overlay.HG14 svg #range-HG14 #range-HG14-area { fill: #af9a9a; opacity: 1; transition: .5s ease .3s ; } #photo-overlay.HG14 svg #range-HG14 .st8 { stroke: #b51212; stroke-width: 2px; transition: .5s ease .3s ; } #photo-overlay.HG14 svg #range-HG14 .st16 { fill: #b51212 ; transition: .5s ease .3s ;} #photo-overlay.KN8 svg #m-KN8 { fill: #435540 ; animation: 1s fire ease-in; animation-fill-mode: forwards; } #photo-overlay.KN8 svg #range-KN14 .st8, #photo-overlay.KN8 svg #range-KN14 .st22, #photo-overlay.KN8 svg #range-KN14 .st23 { stroke: #b51212; stroke-width: 2px; transition: .5s ease .3s ; } #photo-overlay.KN8 svg #range-KN14 .st16 { fill: #b51212 ; transition: .5s ease .3s ;} #photo-overlay.KN14 svg #m-KN14 { fill: #435540 ; animation: 1s fire ease-in; animation-fill-mode: forwards; } #photo-overlay.KN14 svg #range-KN14 .st8, #photo-overlay.KN14 svg #range-KN14 .st22, #photo-overlay.KN14 svg #range-KN14 .st23 { stroke: #b51212; stroke-width: 2px; transition: .5s ease .3s ; } #photo-overlay.KN14 svg #range-KN14 .st16 { fill: #b51212 ; transition: .5s ease .3s ;} #photo-overlay.TG2 svg #m-TG2 {fill: #435540 ; animation: 1s fire ease-in; animation-fill-mode: forwards; } #photo-overlay.TG2 svg #range-TG2 .st8 { stroke: #b51212; stroke-width: 2px; transition: .5s ease .3s ; } #photo-overlay.TG2 svg #range-TG2 .st16 { fill: #b51212 ; transition: .5s ease .3s ;} .keys { position: absolute; z-index: 10; font-size: .8em; color: #435540; top: 315px; left: 40px; } .keys .label { width: 0; height: 0px; border-style: solid; border-width: 0 7px 10px 7px; border-color: transparent transparent #ff8c00 transparent; display: inline-block; } .photo-overlay .title-share { display: none } .photo-overlay.share .title-share { display: block; position: absolute; z-index: 10; top: 120px; background: #fff; left: calc(50% - 140px); padding: 20px; box-sizing: border-box; width: 300px; text-align: center; } .photo-overlay .title-share p { margin: 10px; color: #0c385f; } .photo-overlay .title-share a { margin: 10px; color: #108eff; text-decoration: none; border-bottom: 1px dotted #108eff; display: inline-block; } .title-container.share #title { display: none } .twitter-button { background: #5DB7D8; ;width: 34px; border-radius: 3px; text-align: center; line-height: 34px; color: #fff; cursor: pointer; transition: all .5s ease; margin: 0 5px; } .facebook-button { background: #6D90D8; width: 34px; border-radius: 3px; text-align: center; line-height: 34px; color: #fff; cursor: pointer; transition: all .5s ease; margin: 0 5px; } @keyframes overlay-blink { 0% { fill-opacity: .9; } 25% { fill-opacity: .2; } 50% { fill-opacity: .9; } 75% { fill-opacity: .2; } 100% { fill-opacity: .9; } } /*@keyframes fire { 0% { fill-opacity: 1; transform: translateY(0); } 70% { fill-opacity: 0; } 90% { fill-opacity: 0; transform: translateY(-50px); } 95% { fill-opacity: 0; transform: translateY(0); } 100% { fill-opacity: 1; transform: translateY(0); } } @keyframes fire2 { 0% { opacity: 1; transform: translateY(0) rotate(180deg); color:#b51212;} 80% { opacity: 0; color:#b51212;} 100% { opacity: 0; transform: translateY(-50px) rotate(180deg); color:#b51212;} }*/ @keyframes roam { 0% { transform: translate( 0px , 0px); } 50% { transform: translate( 20px , 20px); } 100% { transform: translate( 0px , 0px); } } @keyframes roam2 { 0% { transform: translate( 0px , 0px); } 50% { transform: translate( 20px , -30px); } 100% { transform: translate( 0px , 0px); } } @media screen and (min-width: 660px) { .container.title-container .title { padding: 0 40px; } } @media screen and (max-width: 590px) { .container.title-container { font-size: .85em; width: 100%; height: 70px; background: #e1e6ee; } .container.title-container .title .labels { width: 28px;} .container.photo-container .photo { width: 600px; left: calc(50% - 308px); top: -10px; } #missiles { transform: translateX(-40px) translateY(-75px); } .container.title-container .title .title-text { display: block; margin-right: 10px; } .container.title-container .title .title-clas { display: inline-block; } .container.title-container .title .title-range { display: inline-block; margin-right: 10px; } .container.title-container .title .title-status { display: inline-block; margin-right: 10px; } .container.title-container .title-button{ height: 70px; line-height: 70px;; } .container.photo-container .photo.photo-overlay .photo-buttons { top: -55px; left: -32px; } .container.photo-container .photo.photo-overlay .photo-buttons .photo-button { font-size: 1em; } #cover {position: absolute; transform: scale(.9) translate(50px, 20px);} .keys { top: 364px; left: 81px; z-index: 10; } .title-text-top { top: -365px; } .title-des-top { top: -345px; width: 200px; } .container.photo-container .photo.photo-overlay .photo-highlights { top: 58px; } .container.photo-container .photo.photo-overlay .photo-highlights svg { width: 100%; height: 100%; } } @media screen and (max-width: 470px) { #missiles { transform: translateX(-80px) translateY(-80px); } .container.photo-container .photo.photo-overlay .photo-buttons { top: -54px; left: -63px; } .container.photo-container .photo.photo-overlay .photo-buttons .photo-button { font-size: 1em; } #cover { top: 30%; left: 10%; transform: scale(.75) translate(138px, 40px); tran: ;} .keys { left: 137px; } } @media screen and (max-width: 350px) { .container.title-container .title .title-text { font-size: 1.2em; margin-bottom: 0;; } .container.title-container .title-button { width: 25px; } .container.title-container .title { padding: 0 25px; } .container.title-container .title .title-clas { margin-right: 5px; } .container.title-container .title .title-range { margin-right: 5px; } .container.title-container .title .title-status { margin-right: 5px; } .keys { left: 160px; } } @media screen and (max-width: 300px) { }