/* For tablets & smart phones */
    @media (max-width: 767px) {
      .container {
        width: auto
      }
	  #introP{color:black; padding:10px 10px 10px 10px; left:100%; text-indent:2em;}
	  .colLeft,.colRight{width:90% !important; max-width:700px;}
	  nav{left:-200px;}
	  .tag{left:-318px; width:250px;}
	  .tag > p{left:-193px;}
	  #menuIcon{display:block;}
	  #silhouette1, #silhouette2{display:none;}
	  #iAm{display:none}
	  .title1, .title2, .title3, .title4{display:none;}
	  #title0{ display:block !important;}
	  #mainSlides{margin-top:0px;}
    }

    /* For smartphones */
    @media (max-width: 480px) {
      .container {
        width: auto
      }
	  #introP{color:black; padding:10px 10px 10px 10px; left:100%; text-indent:2em;}
	  .colLeft,.colRight{width:90% !important;  max-width:480px;}
	  p{ font-size:13px; line-height:16px;}
      #silhouette1, #silhouette2{display:none;}
	  #iAm{display:none}
	  .title1, .title2, .title3, .title4{display:none;}
	  #title0{ display:block !important;}
	  #mainSlides{margin-top:0px;}
	}

    /* For smaller displays like laptops */
    @media (min-width: 768px) and (max-width: 1200px) {
      .container {
        max-width: 724px
      }
	  .colLeft,.colRight{width:700px !important; max-width:700px;}
	  nav a:hover + .tag{opacity:1; width:250px; left:7px;}
	  #skillbtn{display:none}
	  #skillset{width:300px;height:670px; position:absolute; top:10px; left:350px;}
	  #mainSlides{margin-top:50px;}
    }

    /* For larger displays */
    @media (min-width: 1200px) {
      .container {
        max-width: 1170px
      }
	  nav a:hover + .tag{opacity:1; width:250px; left:7px;}
	  #skillbtn{display:none}
	  #skillset{width:300px; height:670px; position:absolute; top:10px; left:350px;}
	  #mainSlides{margin-top:50px;}

    }