@charset "utf-8";


#interactive {
	display: flex;
    flex-flow: row nowrap;

    /*background-color: #000;*/
    min-height: 600px;
}

    #interactive-selection {
    	width: 25%;
        display: flex;
        flex-flow: column nowrap;
        padding:20px 30px 40px 0px;
    }

    	#interactive-selection p {
    		font-size:16px!important;
    		color:#000!important;
    	}

    	nav#interactive-nav {
            margin-top:40px;
        }

            nav#interactive-nav ul {
                margin: 0!important;
                /*border-top: 1px solid #818181;*/
            }
                nav#interactive-nav li {
                    margin: 0px 0px 0px 0px;
                    padding: 0px 0px 0px 0px;
                    background: none;
                    font-weight: 500;
                    font-size: 14px!important;
                    line-height: 1.3em!important;
                    color: #000!important;

                    border-bottom: 1px solid #818181;

                    text-transform: uppercase;
                }

                    nav#interactive-nav li a {
                        display: block;
                        padding: 12px 20px 12px 40px;
                        color: #0f2445!important;
                        text-decoration: none!important;
                    }

                nav#interactive-nav li.active {
                    font-weight: 700;
                    color: #000!important;
                    background-color: #d9d9d9;
                }
                    nav#interactive-nav li.active a {
                        color: #000!important;
                    }


@media (max-width: 1199px) {
    #interactive-selection {
        width: 25%;
        padding:20px 20px 20px 20px;
    }

        #interactive-selection p {
            font-size:14px!important;
            color:#fff!important;
        }

        nav#interactive-nav li {
            font-size: 12px!important;
        }

                    nav#interactive-nav li a {
                        display: inline-block;
                        padding: 4px 5px 4px 5px;
                    }
}

    			


    #interactive-map {
    	position: relative;
    	width: 75%;
        display: flex;
        flex-flow: column nowrap;

        padding:40px 0px 0px 0px;
        /*border-top: 20px solid #102245;
        border-bottom: 20px solid #102245;*/

        /*background-image: url(../img/interactive/interactive-ship-bg.jpg);
        background-position: center;
        background-size: cover;*/
    }



@media (max-width: 991px) {
    #interactive {
        display: block;
    }
    #interactive-selection {
        width: 100%;
        display: block;
        padding:20px 20px 0px 20px;
    }
    #interactive-map {
        display: block;
        width: 100%;
        padding:0px 0px 0px 0px;
       /* min-height: 500px;*/
    }

        nav#interactive-nav {
            margin-top:10px;
        }

            nav#interactive-nav ul {
                /*border-top: none;*/
            }
                nav#interactive-nav li {
                    display: inline-block;
                    margin: 0px 0px 0px 0px;
                    padding: 8px 8px 8px 8px;
                    background: none;
                    font-size: 12px!important;
                    line-height: 1.3em!important;
                    color: #fff!important;

                    border-bottom: none;

                    text-transform: uppercase;
                }
}



    	section.interactive-map-section {
            display: none;
    		/*display: flex;*/
    		/***align-items: center;***/
    		position: relative;
    		width:100%;
    		height: 100%;
    		/*background:rgb(0, 0, 0, 0.7);*/
    	}
        section.interactive-map-section.no-bg {
            background:none;
        }

    		section.interactive-map-section h2 {
    			position: absolute;
    			top:0;
    			z-index: 1;
    			font-size: 34px!important;
    			color:#fff!important;
    			padding: 30px 0px 0px 40px;
    		}

    		section.interactive-map-section a.closeButton {
    			position: absolute;
                z-index: 1;
    			top:10px;
    			right:10px;
    			width: 45px;
    			height: 45px;

    			background-image: url(../img/interactive/closeButton.png);
    			background-repeat: no-repeat;
    			background-size: 100%;
    		}


    		section.interactive-map-section .interactive-map-image-container {
    			position: relative;
    			display: flex;
                align-items: flex-start;
    			flex: 1;
    			width: 100%;
    			
    			/*top:0;
    			bottom: 0;
    			right: 0;
    			left: 0;
    			margin:auto;
    			width: 100%;
    			height: auto;*/

    			/*background-color: #ccc;*/
    		}

	    		section.interactive-map-section .interactive-map-image-container img.interactive-map-image {
	    			/*display: flex;
	    			align-content: center;
	    			position: relative;
	    			top:0;
	    			bottom: 0;
	    			right: 0;
	    			left: 0;
	    			margin:auto;*/
	    			width: 100%;
	    			height: auto;
	    		}

    			section.interactive-map-section .interactive-map-image-container svg {
	    			width: 100%;
	    			height: auto;
	    		}


    		a.interactive-video-button {
    			position: absolute;

    			border:1px solid #fff;
    			font-size:12px;
    			color:#fff!important;
    			text-decoration: none;

    			padding:0px 0px 0px 10px;

    		}

    			a.interactive-video-button:after {
    				content: '';
    				display: inline-block;
    				background-color:#fff;
    				width: 45px;
    				height: 45px;
    			}

    		.p-1 {
    			left:30%;
    			top:10%;
    		}


    .modal-content {
        background-color: #002344; /* #777677; */
    }

        .modal-header {
            position: relative;
            display: block;
            border: none!important;
            padding: 10px 30px 10px 30px!important;
        }

            .modal-header .close {
                position: absolute;
                right: 15px;
                font-size: 2.5rem;
                color:#fff;
                opacity: 1.0;
                padding: 10px!important;
            }

            #modalHeaderContent {
                padding:20px 0px 10px 0px;
                color:#fff;
                text-align: center;
            }

                .modal-title {
                    display: block;
                    font-weight: 700;
                    font-size:22px;
                    color:#007885;
                }
                .modal-name {
                    display: block;
                    font-size:20px;
                }

                .modal-body {
                    display: block;
                    font-size:16px;
                    color:#fff!important;
                }

                    .modal-body p {
                        color:#fff!important;
                    }

                    .modal-body ul {
                        margin: 0px auto 0px auto!important;
                        padding: 10px 0px 30px 0px!important;
                        text-align: center;
                        max-width: 300px;

                        border-top: 1px solid #ddd;
                    }

                        .modal-body ul li {
                            margin: 0px 0px 10px 0px!important;
                            padding: 0px 0px 10px 0px!important;
                            text-indent: 0!important;
                            background: none;

                            border-bottom: 1px solid #ddd;

                            color: #fff!important;
                            font-weight: 600;
                            font-size: 18px;
                        }
                        .modal-body ul li:before {
                            content: none;
                        }

                            .modal-body ul li a {
                                color: #fff!important;
                                text-decoration: none!important;
                            }

                                .modal-body ul li a:hover {
                                    text-decoration: underline!important;
                                }




                    .modal-body a.pdf-link {
                        position:relative;
                        display: inline-block;

                        color: #fff!important;

                        /*font-size: 16px;
                        */

                        /*background-color: #015da8;
                        padding: 8px 20px 8px 20px;
                        border-radius: 2px;*/

                        margin: 0px 0px 0px 0px;

                        text-decoration: none!important;
                        /*text-transform: uppercase;*/
                    }
                        .modal-body a.pdf-link:before {
                            position:relative;
                            display: inline-block;

                            vertical-align: middle;

                            content: "";
                            background: url(../img/ico-pdf-2.png) no-repeat;
                            padding: 8px 20px 33px 20px;
                        }