/*
    Designed and written by Alan Yepez. Wanna chat? alanypz(at)gmail(dot)com

    Width: > 1200px
    Devices:
        iPad Pro (Landscape) [1366px]
        Sony Xperia Z4 Tablet, Samsung Galaxy Tab S2 (Landscape) [1280px]
        
/* 
    Width: 1200px-1024px
    Devices:    
        iPad Pro (Portrait), iPads, Nexus 9 Tablet (Landscape) [1024px]
*/
@media only screen and (max-width: 1200px) {
    .row,
    .hero-text-box { padding: 0 2%; }
    .hero-text-box { width: 100%; }
    
}

/* 
    Width: 1023px-768px
    Devices:
        Nexus 7 Tablet (Landscape) [960px]
        Galaxy Note 5, LG G5, One Plus 3 (Landscape) [853px]
        Sony Xperia Z4 Tablet, Samsung Galaxy Tab S2 (Portrait) [800px]
        iPads, Nexus 9 Tablet (Portrait) [768px]
*/
@media only screen and (max-width: 1023px) {
    html, body { font-size: 18px; }
    section { padding: 3.0rem 0 ; }
        
    .tech-icons li { margin-right: 0.8rem; }
}

/* 
    Width: 767px-481px
    Devices:
        iPhone 6+/6S+/7 (Landscape) [736px]
        Google Pixel/Pixel XL, Galaxy S7 Edge (Landscape) [731px]
        iPhone 6/6S/7 (Landscape) [667px]
        Galaxy S7 (Landscape) [640px]
        Nexus 7 Tablet (Portrait) [600px]
        iPhone 5/SE/iPod Touch (Landscape) [568px]
        
*/
@media only screen and (max-width: 767px) {
    body { font-size: 16px; }
    section { padding: 2.0rem 0 ; }
    
    .row, 
    .hero-text-box { padding: 0 4%; }
    
    .col { 
        width: 100%;
        display: block;
        float: left;
    }
        
    h2 { 
        font-size: 150%;
        margin-bottom: 1.25rem;
    }
    
    h2:after { margin-top: 1.25rem; }
    
    .main-nav { display: none; }
    .main-nav { 
        float: left;
        margin-top: 1.75rem;
        margin-left: 1.0rem;
    }
    
    .main-nav li { display: block; }
    
    .main-nav li a:link,
    .main-nav li a:visited {
        display: block;
        border: 0;
        padding: 0.7rem 0;
        font-size: 100%;
    }
    
    .sticky .main-nav { margin-top: 0.5rem; }
    .sticky .mobile-nav-icon i { color: #555555 }
    .sticky .mobile-nav-icon { margin: .75rem 0; }
    .sticky .site-logo { height: 3.0rem; }
    
    a.mobile-nav-icon { border: 0; }
    .mobile-nav-icon { display: inline-block; }
    
    
    .contact-list-row { 
        text-align: center;
    }
        
    .my-photo {
        width: 30%;
        margin-left: 35%;
        margin-bottom: 1.0rem;
    }
    
    /* Disabling these images for small browser widths.   */
    .logo-hex, .course-icon { display: none; }
    
    .entry-row { margin-bottom: 0.75rem; }
    
    .entry-img-box { margin-top: 0; }
    
    .education-row div:nth-child(2) { margin-bottom: 1.0rem }
        
    .section-courses .entry-row { margin-bottom: 0; }
        
    .empty-box { margin: 0; }
    
    .course-box { margin-bottom: 1.0rem; }
    
    .footer-list-row { font-size: 100%; }
}

/*
    Width: 480px-321px
    Devices:
        Galaxy Note 5, LG G5, One Plus 3 (Portrait) [853px]
        iPhone 6+/6S+/7 (Portrait) [414px]
        Nexus  5X/6P, Google Pixel/Pixel XL, Galaxy S7 Edge (Portrait) [411px]
        iPhone 6/6S/7 (Portrait) [375px]
        Galaxy S7 (Portrait) [340px]
*/
@media only screen and (max-width: 480px) {
    .contact-list-row li { margin-right: 1.50rem; }
    .entry-row { margin-bottom: 1.50rem; }
}

/*
    Width: <= 320px
    Devices:
        iPhone 4/5/SE, iPod Touch (Portrait) [320px]
*/
@media only screen and (max-width: 320px) {
    .contact-list-row li { margin-right: 1.0rem; }
    h1 { font-size: 300%; }
}

/* 
    Targeting iOS devices to prevent issues with
    'background-attachment: fixed' that distorts images.
*/

/* iPhone 4/4S */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
      header,
      .section-education { background-attachment: scroll; }
}

/* iPhone 5/5S */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
      header,
      .section-education { background-attachment: scroll; }
}

/* iPhone 6/6S/7 */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
      header,
      .section-education { background-attachment: scroll; }
}

/* iPhone 6+/6S+/7 */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
      header,
      .section-education { background-attachment: scroll; }
}