/*--- last modified: January 15,2019 by Karen Truong ---*/

.home-banner{
    background-image: url("/content/dam/sfu/students/get-involved/home-banner-03.jpg") ;
    background-size:100%;
    background-repeat:no-repeat;
    padding:10% 0 11%;
    }

.home-banner h1 {
    color:#fff;
    font-size: 2.5em;
    text-shadow: 1px 0px 0px #000;
    margin:0;
    font-family:"Oswald", sans-serif;
    font-weight:400;
    letter-spacing:0.025em;
    }

.home-banner h2 {
    color:#fff;
    font-size: 4.25em;
    line-height:1.15em;
    text-shadow: 1px 0px 0px #000;
    font-family:"Oswald", sans-serif;
    font-weight:700;
    margin:0.25em;
    letter-spacing:0.025em;
    }
    
.home-banner h3  {
     text-transform:uppercase;
     font-size:0.9em;
     background:none;
     font-family:"DINWebMedium";
     }

.home-banner h3 a {
    color: #fff;
    padding: 0.65em 1.85em;
    margin: 0;
    display: inline-block;
    background: #a6192e;
    border:1px solid #fff;
    }

.home-banner h3 a:hover {
    background:#B84758;
    }

.home-banner h4  {
    color:#fff;
    margin:0;
    padding:0;
    font-family: "DINWebItalic";
    letter-spacing:0.0215em;
    text-transform:none;
    font-size:1.15em;
    text-shadow: 1px 1px 3px #000;
    }

.home-banner p  {
    font-family: Cambria,Georgia,"Times New Roman",Times,serif;
    color:#fff;
    font-size:0.8em;
    text-shadow:0px 0px;
    margin:0;
    padding:0;
    letter-spacing:0.025em;
    }

.home-banner p a {
    color:#fff;
    text-decoration:underline;
    }


.myInvovlement-button h4{
    padding:0;
    font-family:"DinWebMedium";
    letter-spacing:0;
    text-transform:none;
    display:block;
    margin-bottom: 0;
        } 
    
.myInvovlement-button h4 a{
    color:#fff;
    background:#006fb7;
    display:inline-block;
    padding:0.75em 1.25em;
    border:none;
    border-radius:0;
        }
    
.myInvovlement-button h4 a:hover   {
        background:#098ed8;
        color:#fff;
        }  

.ask-student p, .button-block p {
    font-family:"DinWebMedium";
    display:inline-block;
    text-transform:uppercase;
    font-size:0.8em;
    letter-spacing:0.05em;
    margin-top:2.5em;
    }

.button-block p{
    display:block;
}

.ask-student p a, .button-block p a{
    display:inline-block;
    background:#1e8ccc;
    padding:1.25em 1em 1em 1.25em;
    border-radius:0;
    color:#fff;
    }


.button-block p a{
    display:block;

        }    

.ask-student p a:hover, .button-block p a:hover{
    background:#3498D1;
    }




.header-programs li{
    font-family:"DinWebBold";
    color:#3d3935;
    font-size:0.85em;
    text-transform:uppercase;
    background:none;
    }

.programs li:first-child{
    margin-top:1em;
    padding-top:2.5em;
    padding-bottom:4em;
}

.programs li{
    padding:1em 0 4em 1em;
    }

.programs li:nth-child(2n){
    background:#f5f1ee;
    }     

.highlight-programs li {
    border:none;
    display: inline-block;
    width:100%;
    padding:0.5em 0;
    }

.highlight-programs li:nth-child(2n){
    background:#E8F4FA;
}

.highlight-programs li:last-child{
    border-bottom:7px solid #D1DCE1;
}

.position, .campus, .type, .application-period {
    float:left;
    margin-right:0em;
    padding:0;
    width:23%;
    color:#3d3935;
}

.position{
    width:28%;
}

.position, .campus{
    padding-right:0.8em;
    line-height:1em;
}

.position a{
    font-family:"DinWebMedium";    
    text-transform:uppercase;      
    font-size:0.87em;        
    }


/* ---- thumb view ----- */
.thumb-programs li{
	width:28%;
    padding:0;
    margin-right:4%;        
    border-top:1px solid #ccc;        
    float:left;
    height:270px;
       }

.position02, .campus02, .type02, .application-period02 {
	float:none;
    margin-right:0;
    display:block;
    width:100%; 
        }


.position02 a{
    font-family:"DinWebMedium";    
    text-transform:uppercase;      
    font-size:0.87em;        
    }
    
.position02{
	padding:1em 0;
    }
    
.campus02:before, .type02:before, .application-period02:before{
    color:#3d3935;
    font-family:"DinWebBold";
    font-size:0.85em;
        }

.campus02:before{
	content:"Campus: ";
        }
    
.type02:before{
  	 content:"Type: ";
        }
    
.application-period02:before{
	content:"Application Period: ";
    }

/* ------  list view for homepage ------ */


.position03 {
    padding:0.5em 0 0.5em 0.5em ;
    width:100%;
  }

.position03 a{
     color:#2E3132;
    }



/* ------  iPad portrait ------ */
@media only screen and (max-width: 1024px)    {
    .home-banner{
        padding:5% 0 5%;
    }
    
    
    .header-programs li{
        display:none;
        }
   
   .programs li{
       width:44%;
       padding:0;
       margin-right:6%;        
       border-top:1px solid #ccc;        
       float:left;
       height:150px;
       }

    .programs li:first-child{
        margin-top:0;
        padding:0;
        }

    .programs li:nth-child(even){
        background:none;
        }
    
    .position, .campus, .type, .application-period {
        float:none;
        margin-right:0;
        display:block;
        width:100%; 
        }
    
    .position{
        padding:1em 0;
        }
    
    .campus:before, .type:before, .application-period:before{
        color:#3d3935;
        font-family:"DinWebBold";
        font-size:0.85em;
        }
        
    .campus:before{
        content:"Campus: ";
        }
    
    .type:before{
        content:"Type: ";
        }
    
    .application-period:before{
        content:"Application Period: ";
    }
    
}

@media only screen and (max-width: 640px){
    .home-banner{
        background-size:cover;
        padding:10% 5%;
    }
    
    .home-banner h4, .home-banner p{
        display:none;
    }
}

/* ------  iphone portrait ------ */
@media only screen and (max-width: 480px) {   
    .programs li{
           width:100%;
       }
    }


    /* --- Classes archived on January 14, 2018. Remove if there are no reports of missing styles on the sites --


.view-all h4{
    margin:0;
}

.view-all h4 a {
    color: #fff;
    border:none;
    display:block;
    background:#a6192e;
    padding:1em;
    padding: 1em;
    font-size: 1.25em;
    margin:0;
    }

.view-all h4 a:hover {
    opacity:0.5;
    }

.nav-summary {
    margin: 0;
    background: #F3F3F3;
    padding: 0.5em 0 0.75em 0;
        min-height:98px;
    }
    
.nav-summary h3 {
    font-family: "DinWebMedium",sans-serif;
    font-size: 96%;
    margin: 0;
    padding: 0.5em 0 0.5em 0.95em;
}
.nav-summary h3 a {
    color: #3D3935;
}
.nav-summary p {
    font-family: "DinWebLight";
    font-size: 85%;
    line-height: 1.45em;
    margin: 0;
    padding: 0.15em 0.97em;
}


.red-top{
        border-top: 10px solid #CB4746;
}
    * -- /