/* ==========================================================================
   UPM Front Page Styling
   Forces front page to 2 columns on 479-960px screen widths
   Applied to 
     UPM.Internet.Responsive.Content.Section
   ========================================================================== */

@media (min-width: 479px) and (max-width: 960px) {
  .container {
    width: 100%;
  }
  [class*='span'] + [class*='span']:last-child {
      float: left;
  }
  .row {
    margin-left: 0px;
  }
  .span12 {
    width: 100%;
    margin-left: 0px;
  }
}

@media (min-width: 620px) and (max-width: 960px) {

    .main {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .span4, .span5, .span6 {
        margin-left: 0 !important;
        width: 270px;  
    }

    .span3 {
        margin-left: 30px !important;
        width: 270px;
    }
    .span3:nth-child(2n+1) {
        margin-left: 0 !important;
        clear: both;
    }
}

@media (min-width: 479px) and (max-width: 619px) {

    html.mobile-resolution .main {
        width: 479px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 2%;
        padding-right: 2%;
    }
   
    .span4, .span5, .span6 {
        margin-left: 0;
        width: 220px;  
    }
    .span3 {
        margin-left: 20px !important;
        width: 220px;
    }
    .span3:nth-child(2n+1) {
        margin-left: 0 !important;
        clear: both;
    }
}

html.mobile-resolution .internetSectionWPTop .ms-webpartzone-cell {
    margin-top: 0;
}

/* END - UPM Custom Front Page */