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

/*Mobile styles*/


.in-main-wrapper {
    padding: 0;
}   

    .in-content-wrapper{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal; 
        -ms-flex-direction: column; 
            flex-direction: column; 
        width: 100%;   
        padding-top: 15px; 
    }
    
        .in-main-content {
            max-width: 100%;
            -webkit-box-ordinal-group: 3;
                -ms-flex-order: 2;
                    order: 2;
            margin: 0;
            padding: 0 5% 32px 5%;
        }

    .in-main-content .cg-button {
            display:block;
            max-width: none;
        }
    
    
        /*Right column styles*/    
        .in-right-column {
            float: none;
            -webkit-box-ordinal-group: 4;
                -ms-flex-order: 3;
                    order: 3;
            width: 90%;
            margin: 0;
            padding: 0 5% 32px 5%;  
        }
    
        .in-right-column h3 {
            font-size: 2rem;
            line-height: 2.4rem;
            font-family: museo-sans-500, 'Open sans', Arial, sans-serif;
            padding: 10px;
            color: #fff;
            background: #002855;
            margin: 1.5em 0 1em -5%;
            width: calc(110% - 20px); /* testing - was causing horizontal scroll on mobile - ep 11/3*/
        }
        
        .in-right-column h3:first-child {
            margin-top: 0;   
        }

        .in-right-column .cg-button {
            width:auto;/*changed from 100% because it was overflowing its wrappers - ep 11/3 */ 
        }

 /*LISTS - testing*/
        .in-content-wrapper ul {
         width: calc(100% - 40px);
         padding-left: 40px;
         list-style-position: outside;
        }
        
        .in-content-wrapper ol {
         width: calc(100% - 40px);
         padding-left: 40px;
         list-style-position: outside;
        }
        
        .in-content-wrapper ol li {
         text-indent: 5px;
        }
        
        /*negates padding for special types of lists in the interior content area*/
        .in-content-wrapper ul.cg-list-no-bullets, .in-content-wrapper ul.cg-list-blocks {
            padding-left: 0;
            width: 100%;   
        }


/*social icons in right column*/
    .in-right-column .in-social-sidebar {
        background: #002855; 
        height: 40px; 
        margin-bottom: 15px;
    }

        .in-right-column .in-social-sidebar img {
            width: 30px;
            height: 30px;
            float: left; 
            margin: 5px 10px 5px 10px;
        }

        .in-right-column .in-social-sidebar p {
            font-family: museo-sans-100, 'Open Sans', Arial, sans-serif;
            font-size: 14px;   
            color: #fff;
            margin-top: 10px;
            display: inline-block;
        }
    
        .in-right-column .in-social-sidebar a, .in-right-column .in-social-sidebar a:visited {
            color: #fff;   
        }

    .in-main-content .cy-news .cy-social-bar {
        display:none;
    }


@media screen and (min-width: 769px) {
    .in-main-wrapper {
        padding: 48px 0 0 0;
        width: 100%;
        max-width: 1500px;
        margin: 0 auto;
    }

        .in-content-wrapper {
            width: 60%;
            border-left: 1px solid #e5e5e5;
            float: right;
            margin: 0 0 24px 0;
            padding-top: 0;
        }
        
            .in-feature-image {
                -webkit-box-ordinal-group: 2;
                    -ms-flex-order: 1;
                        order: 1;
                margin: 0 0 24px 0;
                padding: 0 0 0 5.3%;
               width: 94.6%;
            }

             .in-main-content {
                width: 89.3%;
            }
            
            .in-no-left-menu .in-content-wrapper {
                display: block;
                float: none;
                margin: auto;
                width: 100%;
            }
            
            .in-no-left-menu .in-main-content {
                padding: 0 7% 32px 7%;
            }
            
       .in-right-column h3 {
            margin: 1.5em 0 1em 0;
            width: 100%;
            box-sizing: border-box;
        }
            .in-main-content .cg-button {
            display:inline-block;/* added this because it was centered and full width on interior pages - ep 11/7*/
        }
    
    /*special case - used for course location pages - ticket request - but cy- styles only in category.css - eg 3/21/18  */
    .in-main-content .cy-news .cy-news-item  img.cg-hide-on-mobile {
        max-height: 100px!important;
        min-height: 100px!important;
        max-width: 100px;
        display: inline-block;
    }
    .in-main-content .cy-news .cg-desktop-card.cg-mobile-list-card {
        display: flex;
    }
    .in-main-content .cy-news .cg-card-content {
        padding: 10px 20px;
    }
    .in-main-content .cy-news .cg-action-button {
        top: 80px;
        right: auto;
        left: -19px;
    }
.in-main-content .cg-block.cy-news-item:last-child {
    margin-right: 5px;
}*/
	.in-main-content .cg-desktop-card.cg-mobile-list-card {
    margin: 0;
    background-size: 100px auto;
    background-repeat: no-repeat;
}

    
}

@media screen and (min-width: 992px) {

        .in-content-wrapper {
            display: block;
            width: 74.8%;
        }

        .in-no-left-menu .in-content-wrapper {
            display: block;
            float: none;
            margin: 0 auto 24px auto;
            width: 90%;
            max-width: 1100px;
            border: none;
        }
          .in-right-column {
                float: right;
                margin: 0;
                padding: 0 0 32px 4%;
                width: 33%;
                max-width: 330px;
                box-sizing: border-box;
            }

            .in-main-content {
                border-right: 1px solid #e5e5e5;
                /* These properties together allow in-main-content to fill remaining space */
                width: auto;
                overflow: hidden;
            }
        
            .in-no-left-menu .in-main-content {
                max-width: 100%;
                padding: 0 0 32px 0;
                width: auto;
                border: none;
            }
  
}

@media screen and (min-width:1200px) {
.in-main-content {
    max-width: 75%;
}

}