Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* Clickable Map
- _________________________________________________*/
- #interactive-map-section {
- background-color: #f5f5f5;
- padding-top: 6em;
- }
- #interactive-map-section h3 {
- font-weight: 700;
- margin-bottom: 20px;
- text-align: left;
- }
- #interactive-map-section .map-title-text a {
- font-weight:700;
- }
- #interactive-map-section .map-title-text {
- padding-top: 40px;
- }
- #interactive-map-section h2 {
- color: #214091;
- line-height: 1.3;
- font-size: 28px;
- }
- #interactive-map-section .box {
- width: 670px;
- height: 430px;
- margin: auto; /* Remove the absolute path from url */
- background: url(/users/u119/119777/aptTransBkgd2.png) no-repeat;
- background-size: contain;
- background-position: center;
- position: relative;
- }
- /* Change color of markers */
- #interactive-map-section .marker,
- #interactive-map-section .marker::before {
- background:#0123b4;
- }
- #interactive-map-section .marker-info,
- #interactive-map-section .marker-info::after {
- background: #333;
- color: #fff;
- }
- #interactive-map-section .marker {
- position: absolute;
- transform: translateY(-50%) translateX(-50%);
- font-weight: 700;
- width: 30px;
- height: 30px;
- text-align: center;
- border-radius: 50%;
- cursor: pointer;
- transition: all ease 0.3s;
- z-index: 999;
- box-shadow: 0 5px 10px -1px rgba(0, 0, 0, 0.4);
- }
- #interactive-map-section .marker::before {
- content: "";
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- z-index: -1;
- border-radius: 50%;
- transform: scale(0);
- animation: markerPulse 3s ease infinite;
- }
- @keyframes markerPulse {
- 0%,
- 20% {
- transform: scale(0);
- opacity: 1;
- }
- 100% {
- transform: scale(2);
- opacity: 0;
- }
- }
- #interactive-map-section .marker::after {
- content: "+";
- line-height: 30px;
- font-weight: 900;
- position: absolute;
- width: 30px;
- left: 0px;
- top: 0px;
- font-size: 24px;
- transition: all ease 0.35s;
- color:#fff;
- }
- #interactive-map-section .marker.active::after {
- transform: rotate(135deg);
- }
- #interactive-map-section #marker01 {
- left: 40%;
- top: 25%;
- }
- /*#interactive-map-section #marker02 {
- left: 85%;
- bottom: 58%;
- }*/
- #interactive-map-section #marker02 {
- left: 80%;
- bottom: 45%;
- }
- #interactive-map-section #marker03 {
- left: 17%;
- top: 53%;
- }
- #interactive-map-section #marker04 {
- right: 37%;
- bottom: 9%;
- }
- #interactive-map-section #marker05 {
- left: 20%;
- top: 81%;
- }
- #interactive-map-section #marker06 {
- left: 76%;
- top: 32%;
- }
- #interactive-map-section #marker07 {
- left: 59%;
- top: 66%;
- }
- p.markerLabel-fire,
- p.markerLabel-access,
- p.markerLabel-burglar,
- p.markerLabel-monitor,
- p.markerLabel-camera,
- p.markerLabel-data {
- color: #00257c;
- font-size: 23px;
- font-weight: 800;
- width: 70px;
- position: relative;
- text-shadow: 0px 2px 3px #fff;
- left: 128%;
- top: -20%;
- line-height: 1.1;
- display:none;
- }
- #interactive-map-section .marker-info {
- display: none;
- position: absolute;
- bottom: 50px;
- width: 200px;
- left: -85px;
- text-align: center;
- padding: 15px 12px;
- box-sizing: border-box;
- border-radius: 3px;
- animation: fadeDown 0.5s ease forwards 1;
- opacity: 0;
- transform: translateY(-15px);
- font-size: 12px;
- font-weight: 500;
- cursor: default;
- }
- #interactive-map-section .marker-info p {
- font-size: 12px;
- line-height: 1.8em;
- color: #fff;
- }
- #interactive-map-section .marker-info h4 {
- font-size: 15px;
- font-weight: 700;
- margin: 0;
- text-align: left;
- color: #fff;
- margin-bottom: 3px;
- }
- #interactive-map-section .marker-info h4 img {
- margin-right: 5px;
- }
- @keyframes fadeDown {
- 0% {
- opacity: 0;
- transform: translateY(-15px);
- }
- 100% {
- opacity: 1;
- transform: translateY(0px);
- }
- }
- #interactive-map-section .marker.active .marker-info {
- display: block;
- }
- #interactive-map-section .marker-info::after {
- content: "";
- position: absolute;
- width: 10px;
- height: 10px;
- bottom: -5px;
- left: calc(50% - 5px);
- transform: rotate(45deg);
- z-index: 999;
- }
- #interactive-map-section .marker .mobile-map {
- display: none;
- }
- /* Media Queries for Clickable Map
- ______________________________________________________________ */
- @media screen and (max-width: 720px) {
- #interactive-map-section .box {
- width: 100%;
- height: auto;
- background: none;
- }
- #interactive-map-section .marker {
- position: relative;
- left: auto !important;
- top: auto !important;
- bottom: auto !important;
- right: auto !important;
- display: block;
- width: auto;
- height: auto;
- border-radius: 3px;
- transform: none;
- }
- #interactive-map-section .marker-info {
- display: block;
- animation: none;
- opacity: 1;
- position: relative;
- left: auto;
- top: auto;
- bottom: auto;
- right: auto;
- transform: none;
- margin-bottom: 10px;
- width: 100%;
- }
- #interactive-map-section .marker-info::after {
- display: none;
- }
- #interactive-map-section .marker .marker-info h4 {
- margin-bottom: 0px;
- }
- #interactive-map-section .marker .marker-info h4::before,
- #interactive-map-section .marker .marker-info h4::after {
- content: "";
- width: 20px;
- height: 3px;
- background: #fff;
- position: absolute;
- right: 18px;
- top: 26px;
- transition: all ease 0.4s;
- }
- #interactive-map-section .marker .marker-info h4::after {
- transform: rotate(90deg);
- }
- #interactive-map-section .marker.active .marker-info h4::before,
- #interactive-map-section .marker.active .marker-info h4::after {
- transform: rotate(180deg);
- }
- #interactive-map-section .marker.active .marker-info h4 {
- margin-bottom: 10px;
- }
- #interactive-map-section .marker-info p {
- display: none;
- margin-bottom: 0;
- }
- #interactive-map-section .marker.active .marker-info p {
- display: block;
- }
- #interactive-map-section .marker,
- #interactive-map-section .marker-info,
- #interactive-map-section .marker-info::after {
- background: #04285e;
- color: #fff;
- }
- #interactive-map-section .map-title-text {
- padding-top: 0px;
- margin-bottom: 20px;
- }
- #interactive-map-section .marker.active .mobile-map {
- display: block;
- }
- #interactive-map-section .marker::after,
- #interactive-map-section .marker::before {
- display: none;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement