@charset "utf-8";
/* CSS Document */

#goToOrganizationManageContentButton,
#goToOrganizationManageOrganizationButton,
#goToOrganizationAnalyticsDashboardButton,
#goToOrganizationCreateOrganizationButton,
#recentContentDashboard,
#recentProgramDiv,
#recentCourseDiv,
#recentUnitDiv,
#recentLessonDiv,
#enrollInCommunityContainer,
#unenrollFromCommunityContainer,
#organizationDashboardContainer,
#memberDashboardContainer{
    display: none;
}
/* -- community select -- */
.organizationDetailsContainer{
    float: right;
    width: 100%;
    height: auto;
    display: flex;
    align-content: center;
    justify-content: flex-start;
}
.organizationSelectionContainer{
    float: right;
    width: 100%;
    height: auto;
}
.organizationSelectionContainer .cardContainer{
    overflow: hidden;
    height: 140px;
}
#organizationLogoImageContainer{
    height: 100px;
	min-height: 100px;
	max-height: 100px;
    overflow: hidden;
    position: relative;
    padding-top: 0;
    margin-top: 8px;
}
#organizationLogoImageContainer img{
    display: block;
    float: right;
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 90px;
}
.logoChangeOut{
    animation: organizationLogoChangeOut 0.5s 1;
    animation-delay: 0s;
    animation-fill-mode: forwards;
}
@keyframes organizationLogoChangeOut{
    0%{
        top: 0;
    }
    100%{
        top: -150px;
    }
}
.logoChangeIn{
    animation: organizationLogoChangeIn 0.5s 1;
    animation-delay: 0s;
    animation-fill-mode: forwards;
}
@keyframes organizationLogoChangeIn{
    0%{
        top: -150px;
    }
    100%{
        top: 0;
    }
}
.enrollUnenrollCommunityContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 2%;
}
#enrollInCommunityContainer, #unenrollFromCommunityContainer{
    width: 100%;
}
/* --- Blickel Community Introduction --- */
.blickelCommunityIntrodoction{
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 13px;
}
.blickelCommunityIntrodoction h2{
    margin-bottom: 6.5px;
}

/* responsive screen code */
@media only screen and (min-width: 1500px) {
/* Extra large devices (large laptops and desktops, 1500px and up) */	
}
@media only screen and (max-width: 1499px) {
/* Extra large devices (large laptops and desktops, 1200px and up) */	
}
@media only screen and (max-width: 1199px) {
/* Large devices (laptops/desktops, 992px and up) */
} 
@media only screen and (max-width: 991px) {
/* Medium devices (landscape tablets, 768px and up) */
} 
@media only screen and (max-width: 767px) {
/* Small devices (portrait tablets and large phones, 600px and up) */
    .organizationDetailsContainer{
        flex-wrap: wrap;
        margin-top: 1%;
    }
    .organizationSelectionContainer{
        width: 50%;
        margin-left: 0;
        padding-left: 1%;
        padding-right: 1%;
    }
    .enrollCommunityContainer{
        width: 50%;
    }
    .blickelCommunityIntrodoction h2{
        font-size: 2.6rem;
    }
}
@media only screen and (max-width: 600px) {
/* Extra small devices (phones, 600px and down) */
}
@media only screen and (max-width: 400px) {
/* Super Extra small devices (phones, 400px and down) */
    .organizationSelectionContainer{
        width: 100%;
    }
}