/* 
 * Can't put some directives in Less becuase Grunt can't process grid-row/column config – it tries to divide the integers
 */
.ece-video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    margin-bottom: 80px;
    margin-top: -20px;
}

.ece-video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.grid-row{                                                                        
        box-shadow: 0 1px 2px rgba(0,0,0,.2);                                         
    }   
.grid-box{
    background-color:#4b2f92;
    color:#fff;
    padding:20px;
    margin-bottom:6px;
}
h3.grid-box a:link,
h3.grid-box a:visited{
    color:#fff;
}

.grid-sidebar-left-2 #timeline h3:after{
    background: url(assets/images/rainier-fig1.png) no-repeat;
}
.grid-sidebar-left #timeline h3{
    background-size:25%;
    padding-right:35%;
    background-position:center right;
}
.grid-content-2 ul {
    background-color:#4b2f92;
    color:#fff;
}
.grid-content-2 ul li{
     background: url('assets/images/rainier-grid-ol-list.jpg') no-repeat left;
     padding:10px 30px 10px 50px;
     list-style:none;
     margin:0;
 }

@media (min-width: 768px){
    .inset-callout,
    #block-block-203 {
            width:15vw;
        }
    .grid-container {
        display: grid;
        grid-template-columns: 0.4fr 0.3fr 0.3fr;
        /*   grid-template-rows: auto 25px auto 25px auto 25px auto 25px auto 25px auto; */
        grid-column-gap: 60px;
        grid-row-gap: 15px;
    }
    #pl-grid {
        display: grid;                                                            
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));              
        grid-gap: 10px;
    }  
    #grid-2 {
        display: grid;                            
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        grid-gap: 10px;                           
    }
    #grid-3 {
        display: grid;                           
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        grid-gap: 10px;                           
        width: @container-sm;
    }
    .grid-row{
        box-shadow: 0 1px 2px rgba(0,0,0,.2);
    }
    .grid-row a.uw-btn{
        color: #5a5a5a;
    }
    /*Rainier Center styles*/
     
    .grid-intro {
        grid-column:2/4;
        grid-row: 1 / 3;
    }
    .grid-sidebar-left-2 {
        grid-column: 1 / 2;
        grid-row: 3 / 5;
    }
    .grid-content-1 {
        grid-column: 2 / 4;
        grid-row:3;
    }
    .grid-video {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }
    .grid-video iframe {
        margin-top:0;
    }
    .grid-content-2 {
        grid-column:2/4;
        grid-row:4;
    }
    .grid-sidebar-left-2 #timeline{
        background-color:#fdfaf7;
        padding-bottom:24px;
    }
    .grid-sidebar-left-2 #timeline h2{
        background-color:#4b2f92;
        color:white;
        padding:24px;
    }
    .grid-sidebar-left-2 #timeline ul{
        margin-left:40px;
    }
    .grid-sidebar-left-2 .inner {
        padding:12px 24px 0;
    }
    .grid-sidebar-left-2 .inner h3{
        color:#4b2f92;
    }
    .grid-sidebar-left-2 .inner h4{
        color:#4b2f92;
        text-transform:uppercase;
        font-weight:400;
    }
    .rvec {
        margin-top:20px
    }
    .rvec .grid-sidebar-left {
        margin-top:12px;
    }
    .testimonial{
        margin-top:42px;
    }
    div.ds-1col .field-name-body .testimonial img{
        width:33%;
        height:auto;
        padding:0 0 8px 20px;
    }
    div.ds-1col .field-name-body .grid-row img{
        width:100%;
        height:auto;
        padding:0 0 8px;
    }
    div.ds-1col .field-name-body .grid-row h3{
        padding:16px 8px 0;
    }
    div.ds-1col .field-name-body div#grid-3.coaching .grid-row h3{
	margin-top:8px;
	}
    div.ds-1col .field-name-body div#grid-3.coaching .grid-row img{
	float:none; 	
	display:block;  	
	margin-left:20px;
	}
    div.ds-1col .field-name-body .grid-row p{
        padding:8px;
    }
    .grid-2row{
        grid-row: 3 / 5;
        width: 40px;
    }
}