/*
	CSS Styles
	Spring 2016
	
	Developed by Colin To
*
*/

/* =========================================================
 * Media Query Styles
 * ========================================================= */


 @media only screen and (min-width: 1280px) and (max-width: 1366px) {
/*    #myBio{margin-top: 250px;}*/
     .navigateLinks ul li a{font-size:36px;}
     .navigateLinks ul li {margin-bottom: 40px;}
     .lotr_full { display: inline-block; }
     .lotr_full ul li { margin-left: 8%; }
     .lotr_short { display: none; }
     .aladdin_full ul li { margin-left: 5%; }
     .totoro_full ul li { margin-left: 20%; }
} 
 
/* ================================================================================================
*	WXVGA - IPad, Ultrabooks, Tablets+
* ================================================================================================= */

@media only screen and (min-width:1280px){
    #fixedContent {width:1080px;}
    .fixedContent {width:1080px;}
    
    
    /* ------- Projects ----------- */  
    .menu{visibility: visible}
    .menuButton{visibility: hidden}
    
     .lotr_full { display: inline-block; }
     .lotr_full ul li { margin-left: 8%; }
     .lotr_short { display: none; }
     .aladdin_full ul li { margin-left: 5%; }
     .totoro_full ul li { margin-left: 20%; }
}

 @media only screen and (min-width: 1024px) and (max-width: 1280px) {
     .navigateLinks ul li a{font-size:36px;}
     .navigateLinks ul li {margin-bottom: 40px;}
     
    /* ------- Projects ----------- */  
    .menu{visibility: hidden}
    .menuButton{visibility: visible}
    #myBio br{display:none;}
     
    .hlinks {color:#fff; margin:50px 0px; width:100%; }
    .hlinks li{width:100%; margin:0px;}
    .hlinks li a{margin:0px; background-color: #64B645; padding:40px 150px; color:#fff !important} 
    .hlinks a, hlinks a:visited{color:#fff}
    .hlinksLoci{margin:0px; padding:0px;}
    .hlinksLoci li{display:block; margin:0px; padding-top:25px; padding-bottom:25px; width:100%; margin-bottom:25px; border:none;}
     
     .lotr_full { display: none; }
     .lotr_short { display: block; }     
 }

/* ================================================================================================
*	XVGA - IPad
* ================================================================================================= */
 @media only screen and (min-width: 960px) and (max-width: 1024px){
     
    /* ------- Projects ----------- */  
    .menu{visibility: hidden; width:50%;}
    .menuButton{visibility: visible}
    #myBio br{display:none;}
     
    .hlinks {color:#fff; margin:50px 0px; width:100%; }
    .hlinks li{width:100%; margin:0px;}
    .hlinks li a{margin:0px; background-color: #64B645; padding:40px 100px; color:#fff !important} 
    .hlinks a, hlinks a:visited{color:#fff}
    .hlinksLoci{margin:0px; padding:0px;}
    .hlinksLoci li{display:block; margin:0px; padding-top:25px; padding-bottom:25px; width:100%; margin-bottom:25px; border:none;}     
     
    .lotr_full { display: none; }
    .lotr_short { display: block; }         
 }


/* ================================================================================================
*	Between Phone and IPad
* ================================================================================================= */


 @media only screen and (min-width: 767px) and (max-width: 960px) {
     
    #myAll{text-align: center;}
    #myBio{text-align: center;}
    #myBlurb br{display:none;}
    #myBio{ left:0%; margin-left:0px; } 
    #myBio br{display:none;}
     
    /* ------- Projects ----------- */  
    .menu{visibility: hidden; width:50%;}
    .menuButton{visibility: visible}
    .ucDemo{width:50%;}
    .hlinks {color:#fff; margin:50px 0px; width:100%; }
    .hlinks li{width:100%; margin:0px;}
    .hlinks li a{margin:0px; background-color: #64B645; padding:40px 100px; color:#fff !important} 
    .hlinks a, hlinks a:visited{color:#fff}
    .hlinksLoci{margin:0px; padding:0px;}
    .hlinksLoci li{display:block; margin:0px; padding-top:25px; padding-bottom:25px; width:100%; margin-bottom:25px; border:none;}
     
    .lotr_full { display: none; }
    .lotr_short { display: block; }         
 }

/* ================================================================================================
*	Other
* ================================================================================================= */
@media only screen and (max-width:767px){
    
    /* Don't float, give min-width or margins on smaller displays */
    .row {width: auto; min-width:0; margin-left:0; margin-right:0;}
    .row {width: 100%; min-width:0; margin-left:0; margin-right:0;}
    .column, .columns {width:auto !important; float:none;}
    .column:last-child, .columns:last-child{float:none;}
    [class*="column"]+[class*="column"]:last-child{float:none;}

    /* Clearfix Method*/
    .column:before, .columns:before, .column:after,
    .columns:after{content:""; display:table;}
    .column:after, .columns:after{clear:both;}
    
    /* ------- Home and About ----------- */  
    #myAll{text-align: center;}
    #myBio{text-align: center;}
    #myBlurb br{display:none;}
    #myBio{ left:0%; margin-left:0px; } 
    #myBio br{display:none;}
    
    /* ------- Projects ----------- */  
    .menu{visibility: hidden; width:50%;}
    .menuButton{visibility: visible} 
    .ucDemo{width:50%;}
    .hlinks {color:#fff; margin:50px 0px;}
    .hlinks li a{background-color: #64B645; padding:30px 70px; color:#fff !important} 
    .hlinks a, hlinks a:visited{color:#fff}
    .hlinksLoci{margin:0px; padding:0px;}
    .hlinksLoci li{display:block; margin:0px; padding-top:25px; padding-bottom:25px; width:100%; margin-bottom:25px; border:none;}

    .lotr_full { display: none; }
    .lotr_short { display: block; }        
}

@media only screen and (max-width:500px){
    .hlinks li a{background-color: #64B645; padding:30px 30px; color:#fff !important} 
    .lotr_full { display: none; }
    .lotr_short { display: block; }        
}

/* ================================================================================================
*	SAMSUNG S4
* ================================================================================================= */

/* Portrait and Landscape */
@media screen 
  and (-webkit-min-device-pixel-ratio: 3.0) and (max-width: 1080px), screen and (max-width: 480px)  {
      
    h1{ /* Main-Title */ /* font-size: 36px; */ font-size: 56px;}  
      
    /* ------- Home and About ----------- */  
    #myAll{margin-top:-35%; text-align: center;}
    #myName{ /* font-size:42px;*/ font-size:72px;}
    #myRole{ /* font-size:14px;*/ font-size:24px;}
    #myBlurb{ /* font-size:18px;  */ font-size:28px;}
    #myPage{ /* font-size:12px;*/ font-size:22px;}  
    #myPage a, #myPage a:visited{ /* padding:10px 30px; */ padding:30px; width:100%}
    
      
    #myBio{text-align: center;}
    #myBlurb br{display:none;}
    #myBio{ left:0%; margin-left:0px; } 
    #myBio br{display:none;}
    #tomyPortfolio {top:75%}
    #tomyPortfolio img{width:120px; height:120px; padding:30px;}
    .logo,#navIcon{margin-top:32px;}
    .logo, .logo a, .logo svg{ height:88px; width:88px;}
    #navIcon{height:100px; width:100px}
    #navIcon span{height:10px}
    #navIcon span:nth-child(1) { top: 0px; }
    #navIcon span:nth-child(2) { top: 30px; }
    #navIcon span:nth-child(3) { top: 30px; }
    #navIcon span:nth-child(4) { top: 60px; }
      
    .collapsed{height:150px}
    .nav-up{top:-150px}
    
    /* ------- Projects ----------- */  
    .menu{visibility: hidden; width:50%;}
    .menuButton{visibility: visible} 
    .ucDemo{width:50%;}
    .hlinks {color:#fff; margin:50px 0px;}
    .hlinks li a{background-color: #64B645; padding:30px 70px; color:#fff !important} 
    .hlinks a, hlinks a:visited{color:#fff}
    .hlinksLoci{margin:0px; padding:0px;}
    .hlinksLoci li{display:block; margin:0px; padding-top:25px; padding-bottom:25px; width:100%; margin-bottom:25px; border:none;}
      
    .lotr_full { display: none; }
    .lotr_short { display: block; }        
}

/* =========================================================
 * Font Standards
 * ========================================================= */

@media (min-width: 858px) {
    html {
        font-size: 12px;
    }
}

@media (min-width: 780px) {
    html {
        font-size: 11px;
    }
}

@media (min-width: 702px) {
    html {
        font-size: 10px;
    }
}

@media (min-width: 724px) {
    html {
        font-size: 9px;
    }
}

@media (max-width: 623px) {
    html {
        font-size: 8px;
    }
}