/* Map Code */
.campuses h1 { color: #1a1a1a; }
div#campus-map-bg { position: relative; background: url(/impact-of-the-csu/alumni/made-in-the-csu/PublishingImages/csu-campus-map.png) no-repeat top center; width: 700px !important; height: 789px !important; margin: 0 auto !important; }

/*Campus Positions*/

.show { display: block; }
.hide { display: none; }
/* Campus Locations - North to South */
#campus-locations #Humboldt { top: 12.3%; left: 3.1%; }
#campus-locations #Chico { top: 24.08%; left: 22.77%; }
#campus-locations #Sacramento { top: 36.0%; left: 27%; }
#campus-locations #Sonoma { top: 38.5%; left: 15.5%; }
#campus-locations #Maritime { top: 39.5%; left: 16.5%; }
#campus-locations #Maritime { top: 41.2%; left: 19.2%; }
#campus-locations #SanFrancisco { top: 45%; left: 16.9%; }
#campus-locations #EastBay { top: 43.9%; left: 19%; }
#campus-locations #Stanislaus { top: 46.8%; left: 32.3%; }
#campus-locations #SanJose { top: 48.8%; left: 22.3%; }
#campus-locations #MontereyBay { top: 55.9%; left: 23.9%; }
#campus-locations #Fresno { top: 54.35%; left: 42.4%; }
#campus-locations #SanLuisObispo { top: 69.9%; left: 34.7%; }
#campus-locations #Bakersfield { top: 69.6%; left: 48.5%; }
#campus-locations #ChannelIslands { top: 81.4%; left: 50.4%; }
#campus-locations #Northridge { top: 80.6%; left: 55.7%; }
#campus-locations #DominguezHills { top: 84.6%; left: 57.9%; }
#campus-locations #LosAngeles { top: 82.2%; left: 59%; }
#campus-locations #LongBeach { top: 85.2%; left: 60.3%; }
#campus-locations #Fullerton { top: 84.2%; left: 63.3%; }
#campus-locations #Pomona { top: 81.6%; left: 63%; }
#campus-locations #SanBernardino { top: 79.6%; left: 68%; }
#campus-locations #SanMarcos { top: 91.4%; left: 69.9%; }
#campus-locations #SanDiego { top: 95.4%; left: 69.5%; }
#campus-locations #csuco { top: 87.2%; left: 58.3%; }


/*Tool Tip Styling*/
a.tooltips { position: relative; display: inline;  min-width: unset !important;}
    a.tooltips p { position: absolute; width: 140px; color: #FFFFFF; background: #6e6058; border: 2px solid #CC0B2A; height: 30px; line-height: 25px; text-align: center; visibility: hidden; border-radius: 6px; }
        a.tooltips p:before { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -12px; width: 0; height: 0; border-top: 12px solid #CC0B2A; border-right: 12px solid transparent; border-left: 12px solid transparent; }
        a.tooltips p:after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -8px; width: 0; height: 0; border-top: 8px solid #6e6058; border-right: 8px solid transparent; border-left: 8px solid transparent; }
a:hover.tooltips p { visibility: visible; bottom: 30px; left: 50%; margin-left: -73px; margin-bottom: -5px; z-index: 999; }

/*Infopanels*/
div.campusInfo div.campusLinks { background: #fff; padding: 15px; border: 1px solid #ddd; float: right; margin-top: 145px; }


@media only screen and (max-width: 1025px){
    div#campus-map-bg a.tooltips { display: none !important;}
    div#campus-map-bg { background: none; display: inline-table; }
    div#campus-map-bg {width: 100% !important;}
    .campusLinks.hide { display: block !important; }
    .col-md-6.campusLinks { margin-top: 0 !important; width: 100%; height:100%; }
}
@media only screen and (max-width : 1025px) {
    div#campus-map-bg { width: 100% !important; }
    div#campus-locations { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 15px; row-gap: 15px; }    
}

@media only screen and (max-width : 769px) {
    div#campus-locations { display: grid; grid-template-columns: 1fr 1fr; column-gap: 15px; row-gap: 15px; }

    .campusInfo { border-bottom: none; }
}

@media only screen and (max-width : 767px) {
    .generic .container {width: 100% !important;}
}
@media only screen and (max-width : 666px) {
    div#campus-locations { display: grid; grid-template-columns: 100%; row-gap: 15px; }

}

@media only screen and (min-width : 320px) and (max-width : 1080px) {
    div#campus-locations li { margin-bottom: 1em !important; }    
}

@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
    div#campus-locations a { width: 300px !important; }
    div.news-events main h4 { width: 310px; }
}

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
    a.ms-rteElement-actionlink { background: #cc0b2a !important; }
    .campus-buttons { margin-top: 25px; }
    main { padding-bottom: 0 !important; }
    .row.col-container { display: flex; width: 100%; }
    .col-md-4 .card { border: solid 1px #eee; padding: 25px; margin-bottom: 30px; }

    /*Campus Map Update*/
    div#campus-locations a.no-button { border-radius: 0% !important; background-color: initial !important; }
}


/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    div#campus-locations a.tooltips { background-color: #cc0b2a !important; position: absolute !important; cursor: pointer; width: 1em; height: 1em;  border-radius: 50%; transition: background-color .3s ease; /* opacity: 0.5; */ }
    div#campus-locations p a.ms-rteElement-actionlink, div#campus-locations p a.ms-rteElement-whiteactionlink { position: relative !important; border-radius: 6%; }
    .campus-buttons { margin-top: 45px; }
    div#campus-locations p a.ms-rteElement-actionlink:hover { color: #cc0b2a !important; background: #fff !important; }
    div#campus-locations p a.ms-rteElement-whiteactionlink { color: #cc0b2a !important; background: #FFF !important; }
        div#campus-locations p a.ms-rteElement-whiteactionlink:hover { background-color: #cc0b2a !important; color: #fff !important; border-color: #cc0b2a !important; }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
    div.campusInfo div.campusLinks { margin-top: inherit; }
    .col-md-6.campusLinks.csuco { border-bottom: none; }
    div#campus-locations a { position: inherit !important; }

    select#campusSelect { margin-bottom: 15px; }
    #chiefs, p { text-align: center; }
    div#university-policies { margin-bottom: 45px; }
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
    div.campusInfo div.campusLinks { margin-top: 35px !important; margin-bottom: 0 !important; }
    .card-border { border: solid 1px #ececec; padding: 25px; width: 100%; }
    .col-md-4 { width: 100%; }
    .campus-buttons a.ms-rteElement-actionlink { background-color: #cc0b2a !important; }
        .campus-buttons a.ms-rteElement-actionlink:hover { background-color: #fff !important; color: #cc0b2a !important; border-color: #cc0b2a !important; font-weight: initial; }
    .campus-buttons a.ms-rteElement-whiteactionlink:hover { background-color: #cc0b2a !important; color: #FFF !important; }

    a.no-button { background-color: transparent !important; }
}