/*
    MOBILE VERSION
*/
h2.title{
    font-size: 3.2rem;
    font-weight: 600;
    color: #498098;
    width: auto;
    min-width: 50%;
    border-bottom: 3px solid #94c7e4;
    margin-bottom: 20px;
}
h2.sub_title{
	font-size: 3.2rem;
	font-weight: 600;
	color: #498098;
	width: auto;
	min-width: 50%;
	margin-bottom: 20px;
}

p{
    font-size: 2.7em;
    color: #303030;
}

    /* COLUMNS */
    ul.Two_column, ul.Three_column{
        -moz-columns: 1 260px;
        -webkit-columns: 1 260px;
        columns: 1 260px;
    }
    ul.Two_column li, ul.Three_column li{
    	-webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid;
    }


.button{
	display:block;
	width: auto;
	height: 30px;
	float: right;
	font-size: 2.7em;
	line-height: 30px;
	padding: 0 10px;
	transition: background-color 200ms;
}
.button.blue{
	background-color: #498098;
	color: white;
}
.button.blue:hover{ background-color: #9ad2e8; }


/* MODAL */
div.modal_darkfilter{
    display: block;
    overflow: hidden;
    z-index: 29;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
    opacity: 0;
    transition: opacity 300ms;
}
div.modal_darkfilter.active{opacity: 1;}
div.modal{
    display: block;
    position: absolute;
    z-index: 30;
    margin: 10% auto 0;
    width: calc(80% - 10px);
    max-width: 400px;
    background-color: white;
    height: auto;
    padding: 20px 25px;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity 300ms;
}
div.modal.active{opacity: 1;}

         div.modal button.modal_buton{
            position: absolute;
            top: 10px;
            right: 10px;
            border: none;
            color: #498098;
            background-color: transparent;
            font-size: 2rem;
            cursor: pointer;
            transition: color 200ms;
        }
        div.modal button.modal_buton:hover{ color: #94c7e4; }
        div.modal h2.title{
            text-align: center !important;
            padding: 0 0 30px 0;
        }



div#map_content{
    max-width: 400px;
}
    div#map_content h1.firstHeading{
        color: #498098;
        font-size: 2.2rem;
        font-weight: 600;
        text-align: center;
    }
    div#map_content h5{
        font-size: 2rem;
        margin-bottom: 10px;
        text-align: center;
    }
    div#map_content h5.Open{ color: #b6bf6f; }
    div#map_content h5.Close{ color: #e86a64; }



/*
    TABLET VERSION
*/
@media screen and (min-width: 768px ){
    ul.Two_column{
        -moz-columns: 2 260px;
        -webkit-columns: 2 260px;
        columns: 2 260px;
        -webkit-column-gap: 20px;
        -moz-column-gap: 20px;
        column-gap: 20px;
    }
    ul.Three_column{
        -moz-columns: 3 160px;
        -webkit-columns: 3 160px;
        columns: 3 160px;
        -webkit-column-gap: 20px;
        -moz-column-gap: 20px;
        column-gap: 20px;
    }
}

/*
    SMALL SCREEN COMPUTER VERSION
*/
@media screen and (min-width: 992px ){

}

/*
    LARGE SCREEN COMPUTER VERSION
*/
@media screen and (min-width: 1200px ){}

/*
    SUPER LARGE SCREEN COMPUTER VERSION
*/
@media screen and (min-width: 1600px ){}