/*------------------ 
    General Formatting
    --------------------*/

    .id7-main-content-area>.id7-main-content, .container {
        padding:0;
        margin:0;
    }  

    .id7-page-title {
        display:none;
    }
    
    .navbar-tertiary {
        display:none;
    }


    .title-section {
        margin-top:-11px;
    }

    .wrapper {
        padding:0 5px 5px 5px;
    }


    /* ---------------------------
    Header Section 
    -----------------------------*/

    /*Left-side- Header text */

    section.title-section {
        display:flex;
        /* font-family: 'Raleway', sans-serif; */
    }

    div.title {
        width:50%;
        background: linear-gradient(119deg, #ffffff, #c9ebfb, #ffffff);
        display:flex;
        flex-direction: column;
        text-align:center;
        justify-content: center;
        color:#204f79;    
        align-items:center;    
    }

    div.title h2 {
        width: 320px;
        text-transform: uppercase;
        font-size: 75px; 
    }

    /* Right side- Header Img */

    div.title-image {
        width:50%;	
        height:300px;
    }

    div.title-image img {
        height:300px;
        width:100%;
        object-fit:cover;
    }

    /*------------------------------------- 
        Study Section Stuctural Formatting
    --------------------------------------*/

    /* Study Intro */
        .study-intro {
            padding: 5px;
            margin: 5px 0; 
        }

    /* Study - Main Section */
        .study-section .flex-container {
            display:flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .study-section .why-study,
        .study-section .study-options {
            flex: 0 0 auto;
            width: calc(50% - 2px);
        }
    
    /* -------------------------------------
            Study Section Formatting 
    --------------------------------------*/
    
    /* Study - Left side - Why Study */
        .study-section .why-study {
            display: flex;
            flex-wrap:wrap;
            margin-right:2.5px;
        }

    /* Study - Right side - Study Options */
    
        .study-options  {
            display:flex;
            flex-wrap:wrap;
            justify-content: space-around; 
        }

        .study-options h4 {
            width: 100%;
            margin: 1.25px !important;
            padding: 10px;
        }

        .study-options h5 {
            width:100%;
            margin:0;
            text-align:center;
        }

        .modules, .postgrad-courses {
            display:flex;	
            width:100%;
            align-items: center;
            justify-content: space-between;
        }

        .modules {
            margin-bottom:2.5px;
        }

        .module-options, .postgrad-options {
            display:flex;
            flex-wrap: wrap;
            justify-content:center;
            width:100%;
        }

        .modules p {
            padding: 10px;
        }

        div.modules-title, div.postgrad-title {
            flex: 1 37%;
            height: 100%;
            text-align:center;
            background: #c9ebfb;
        }

        div.postgrad-title { 
            background: rgba(59, 143, 142, 0.2);
        }

        .modules div.module-options, .postgrad-courses .postgrad-options {
            flex: 1 63%;
            height: 100%;
        }
		
		
    /*-------------------------------------
    Study Section- Left Side - Why Study 
    ------------------------------------*/

    .why-caption-1, .why-caption-2, .why-caption-3 {
        display: flex;
        height: 185px;
        margin: 1.25px;
        align-items: center;
        justify-content: flex-start;
        flex: 1 0 auto;
        width: calc(50% - 5px);
        background: linear-gradient(119deg,#f1f1f1, #ffffff);
    }

    .why-caption-1 {
        border-right: solid 2px #1f4f79;
    }

    .why-caption-1 h4 {
        max-width: 35%;
        font-size: 36px;
        text-align: left;
        padding: 15px;
        margin:0;
    }

    .why-caption-2 h4, .why-caption-3 h4 {
        max-width: 80%;
        padding: 10px;
        margin:0;
    }

    div.collage-img {
        flex: 1 0 auto;	
        width: calc(50% - 5px);	
        position:relative;  
        background: rgba(0, 0, 0, 1);
        height:185px;
        margin: 1.25px;
    }
    
    .collage-img .card {
        position:relative;
        height:100%;
    }

    div.collage-img img {
        width:100%;
        height:100%;
        object-fit: cover;
    }

    div.collage-img.image-1 img {
        object-position: 50% 53%;
    }
    
    div.collage-img.image-2 img {
        object-position: 50% 78%;
    } 
    
    div.collage-img.image-3 img {
        object-position: 50% 60%;
    } 

    .collage-img .card .caption {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
        /* font-family: 'Shadows into light', serif; */
		background: black;
        color:white;
        opacity:0;	
    }
    
    div.collage-img div.caption p {
        font-size:22px;
    }
        
    .collage-img img, .collage-img .caption {
        transition: opacity ease-in-out 400ms;
    }
    
    .collage-img:hover .card  div.caption {
        opacity: 1; 
    }

    .collage-img a:focus .card  div.caption {
        opacity: 1; 
    }

    .collage-img:hover .card img {
        opacity:0.1;
    }
    
    .collage-img a:focus .card img {
        opacity:0.3;
    }

    div.collage-img a::before {
        content:'';
        position:absolute;
        top:1.5em;
        bottom:1.5em;
        right:1.5em;
        left:1.5em;
        border-right: solid 1px white;
        border-left: solid 1px white; 
        transform: scale(1, 0);
        transition: transform ease-out 400ms;
    }

    div.collage-img a::after {
        content:'';
        position:absolute;
        top:1.5em;
        bottom:1.5em;
        right:1.5em;
        left:1.5em;
        border-top: solid 1px white;
        border-bottom: solid 1px white; 
        transform: scale(0, 1);
        transition: transform ease-out 400ms;
    }
        
    div.collage-img a:hover::before {
        transform: scale(1,1.05);
    }

    div.collage-img a:focus::before {
        transform: scale(1,1.05);
    }

    div.collage-img a:hover::after {
        transform: scale(1.05,1);
    }

    div.collage-img a:focus::after {
        transform: scale(1.05,1);
    }
        
    /* Modal Formatting */
    
    .custombox-content>* {
        max-height: unset;	
    }

    .modal-box {
        background-color: #FFF;
        box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
        padding: 24px;
        position: relative;
        border-radius: 5px;
        width:40%;
        /* font-family:'Raleway', serif; */
        display: none;
    }
    
    /* modal-container & modal-inner-container ensure that scrolling is possible, but that the scrollbar is hidden */
    .modal-container {
        overflow: hidden;			
    }
    .modal-inner-container {
        height: 100%;
        margin-right: -50px; /* maximum width of scrollbar */
        padding-right: 50px; /* maximum width of scrollbar */
        overflow-y: scroll;	
    }

    .close-button {
        display: block;
        position: absolute;
        top: -35px;
        right: 0;
        z-index: 10000;
        outline: none;
        font-size: 30px;
        line-height: 30px;
        transition: transform .3s ease-in-out;
        color: #FFF !important;
    }

    .close-button:hover {
        transform: rotate(360deg);
        color: #FFF;
    }

    .profile {
        display:flex !important;
    }

    .profile-image img {
        width:300px;
        height: 300px;
        border-radius:50%;
        object-fit:cover;
    }
    .profile-image {
        float:left;
        shape-outside: circle();
        padding-right:30px;
    }
    p.title, p.course, p.discipline, p.why {
        font-size: 20px;
        font-weight: bold;
        margin: 0;
    }

    p.name, p.course-details, p.disciline-details, p.why-details {
        font-size: 16px;
    }

    /*------------------------------------------
    Study Section- Right Side- Cards Formatting 
    -------------------------------------------*/
    
    .study-options .choices {
        display: flex;
        width: 100%;
        background: linear-gradient(119deg,#f1f1f1, #ffffff);
        padding: 10px;
        margin-top: 1px;
        margin-bottom: 2.5px;
        border-left: solid 2px #1f4f79;
    }

    .study-options .choices h3 {
        margin:0;
        font-size:30px;
    }

    .undergraduate, .postgraduate, .humeng.card, .pga.card  {
        flex: 1;
        margin: 0 2.5px;
    } 

    .undergraduate.card img, .postgraduate.card img, .humeng.card img, .pga.card img {
        height:125px;   
        width:100%;
        object-fit:cover;
    }
                
    .undergraduate.card, .postgraduate.card, .humeng.card, .pga.card {
        flex: 1 100%;
        background: rgba(0, 0, 0, 0.5);
    }

    .undergraduate.card, .humeng.card {
        margin-bottom:2.5px;
    }

    .card-item {
        position:relative;
        height:100%;
    }
    
    .card img {
        transition:350ms ease-out;
    }

       

    .card:hover img {
        opacity: 0.1;
    }

    .card a:focus .card-item img {
        opacity: 0.1;
    }

    .card-item .caption {
        position: absolute;
        font-size: 24px;
        background: rgba(252, 252, 252, 0.9);
        top: 0;
        bottom: 0%;
        left: 0;
        right: 0;
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1.1;
        padding: 5px;
        transition: opacity 350ms;
        display: flex;
        align-items: flex-end;
        border-top: solid 2px;
    }

    .card:hover .caption {
        opacity:0;
    }

    .card a:focus .card-item .caption {
        opacity:0;
    }

    .card-item .hover-caption {
        display: flex;
        flex-direction: column;
        position: absolute;
        text-align: center;
        background: black;
        color: white;
        font-weight: lighter;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1,0);
        transition: ease-in-out 350ms;
        /* font-family: 'Raleway', serif; */
    }

    .hover-caption p {
        margin:0;
    }

    .hover-caption p:first-of-type {
        font-size: 20px;
    }

    .hover-caption p:last-of-type {
        font-style: italic;
    }

    .card:hover .hover-caption {
        transform:translate(-50%, -50%) scale(1,1);
    }

    .card a:focus .card-item .hover-caption {
        transform:translate(-50%, -50%) scale(1,1);
    }

    .card-item::after {
        content:'';
        position:absolute;
        top:50%;
        margin:0 20px;
        bottom: 0;
        left: 0;
        right: 0;
        transform:scale(0, 1);
        transition: transform ease-in-out 450ms;
    }

    .card:hover .card-item::after{
        transform:scale(1,1);
    }

    .card a:focus .card-item::after {
        transform:scale(1,1);
    }

		
			For general buttons
*/

		.buttonwrapper a
		{
			text-decoration: none;
			color: white;
		}

		.button
		{
			background-color:#204F79;
			font-size: 1.4em;
			text-align: center;
			padding: 10px;
			margin-bottom: 45px;
			display: block;
			border-radius: 10px;
		}


		.button:hover
		{
			background-color: #153551;
		}

		
		
    /* ---------------------------
   Button Section 
    -----------------------------*/


    section.button-section {
        display:flex;
        /* font-family: 'Raleway', sans-serif; */
		background: linear-gradient(119deg,#f1f1f1, #ffffff);
    }

    div.buttonforall {
        width:100%;
		height: 100px;
        display:flex;
        flex-direction: column;
        text-align:center;
        justify-content: center;
        color:#204f79;    
        align-items:center;    
    }

    /*--------------------------------------------------------------
                            Media Queries
    --------------------------------------------------------------*/

   
    
    @media screen and (max-width:990px) {
        .why-study
{ width: 100%
}

        /* Right Side-  Modal Box */
        .modal-box {
            width:50%;	
        }

        .profile-image {
            padding:0;
        }

        .profile-image img {
            width:150px;
            height: 150px;
            border-radius:50%;
            object-fit:cover;
        }
        
        .profile-image {
            float:unset;
            display:block;
            text-align:center;
        }
        
        div.details {
            text-align:center;	
        }

        p.title, p.course, p.why, p.discipline, 
        p.name, p.course-details, p.why-details, p.discipline-details {
            margin:0 auto !important;
        }

        div.collage-img div.caption p {
            font-size: 16px;
        }

        div.collage-img a::before {
            top: 20px;
            bottom: 20px;
            right: 5px;
            left: 5px;
        }

        div.collage-img a::after {
            top: 20px;
            bottom: 20px;
            right: 5px;
            left: 5px;
        }

        div.why-caption-2 h4, div.why-caption-3 h4{
            font-size:19px;
        }

        /* Study Options */
        .study-options h4 {
            font-size: 24px;
        }
    }    

    @media screen and (max-width:767px) {
        
        /* Header Section */
        .title-section {
            position:relative;
        }

        div.title {
            position: absolute;
            top:0;
            bottom:0;
            left:0;
            right:0;
            width:100%;
        }

        div.title-image {
            width:100%;
        }

        .title-section .title {
            background: linear-gradient(119deg, rgba(255, 255, 255, 0.4), rgba(32, 143, 142, 0.1), rgba(255, 255, 255, 0.6));
        }
        
        .title-section .title h2 {
            background: rgba(255,255,255,0.5);
            width: 100%;
        }

        
        /* Why Study */
        div.collage-img {
            flex: 0 0 auto;
            width: calc(48% - 5px);
            margin:0;
        }

        div.collage-img, div.why-caption-1, div.why-caption-2, div.why-caption-3 {
            height: 180px
        }
        
        div.flex-container .why-study{
            margin: 2.5px 0 0 0;	
        }
        
        div.collage-img a::before {
            top:1.5em;
            bottom:1.5em;
            right:1.5em;
            left:1.5em;
        }
        
        div.collage-img a::after {
            top:1.5em;
            bottom:1.5em;
            right:1.5em;
            left:1.5em;
        }

        div.collage-img div.caption p {
            font-size: 22px;
        }

        div.why-caption-1 h4 {
            max-width: 100%;
            text-align: center;
        }

        .why-caption-1, .why-caption-2, .why-caption-3 {
            justify-content: center;
            margin: 0 2.5px 2.5px 0;
        }

        .collage-img.image-3 {
            display:block;
            order:5;
        }


        /* Study Options */
        .modules, .postgrad-courses {
            flex-direction: column;
            height:60%;

        }
        div.flex-container .study-options {
            flex:1 100%;
            margin-bottom:2.5px;
        }
        .undergraduate.card, .postgraduate.card, .humeng.card, .pga.card {
            flex: 1;
            height:135px;
            margin: 2.5px 2.5px 2.5px 0;
        }            
        .study-options h5 {
            padding:10px;;
        }                   
        .undergraduate.card img, .postgraduate.card img, .humeng.card img, .pga.card img {
            height: 135px;
        }         
        div.modules-title, div.postgrad-title {  
            width:100%;
            flex:none;
            height:auto;
        }        
        .card-item {
            height:unset;
        }
        .card-item .caption {
            font-size: 24px;
        }     
        .modules div.module-options, .postgrad-courses .postgrad-options {
            flex:none;
        }
        
    }

    @media screen and (max-width:530px) {

        .study-section .why-study,
        .study-section .study-options {
            flex: 0 0 auto;
            width: 100%;
        }
        
        .module-options .caption h4, .postgrad-options .caption h4 {
            font-size:18px;
            padding:5px;
        }
        
        /* Why Study */
        
        .modal-box {
            width:80%;	
        }

        .why-study {
            justify-content: center;
        }

        div.why-caption-1 h4 {
            font-size:22px;
        }

        div.collage-img {
            flex: 0 1 80%;
        }

        div.collage-img div.caption p {
            font-size: 20px;
        }

        div.why-caption-1 , div.why-caption-2, div.why-caption-3 {
            flex: 0 80%;
        }

        div.collage-img, div.why-caption-1, div.why-caption-2, div.why-caption-3 {
            height: 200px;
        }

        /* Study Options */
        .card-item .caption {
            font-size: 20px;
        }      
        .study-options h4 {
            font-size: 18px;
        }
    }


    @media screen and (max-width:425px) {
        /* Title section */
        div.title h2 {
            font-size: 46px;
        }



        .undergraduate.card, .postgraduate.card, .humeng.card, .pga.card {
            flex: 0 100%;
        }

        div.collage-img div.caption p {
            font-size: 16px;
        }

        div.collage-img, div.why-caption-1 , div.why-caption-2, div.why-caption-3 {
            flex: 0 100%;
            margin-bottom:2.5px;
        }
    }