@media (min-width: 320px) and (max-width: 499px) {
.icon {top: 13.5px; right: 30px; position: fixed;}
.logo {top: 25px; left: 30px; position: relative;}
.lightLogo {width: 43px; height: 27px; background-size: contain;}
.banner-arrow { bottom: 20px; width: 17px; height: 7px; background-size: 17px 7px;}
#pic{background-size: 122px 140px;  width:122px; height: 140px; margin: 40px auto 10px auto;}
h1.title {font-size: 21px; margin-top: 25px; padding-bottom: 0px;}
.underscore{ width: 30px; }
.location-bounce { width: 23px; height: 30px; background-size: 23px 30px;}
h2.location {font-size: 14.5px; line-height: 20px;}
span.location {font-size: 14.5px; line-height: 20px;}
h2.banner {display:none;}
.angle{background: rgba(256,256,256,0);}
#about, #location, #projects, #skills, #experience, #process {padding: 20px 0 20px 0;}
.skill {width: 100%; padding: 5px 0;}
.left-col {margin-right: 20%;}
#skills > div.bars {width: 75%;}
.skill li {height: 13px; margin-bottom:30px; border-radius: 2px;}
h1.skill {font-size: 15px;letter-spacing: 1px; width: 100%; margin-bottom: 15px;}
.skill li h4 {font-size: 11px; letter-spacing: 1px; top:-16px;}
p.skill{font-size: 13px; width: 100%; line-height: 20px; top: -10px;}
.bar {height:13px; border-radius: 2px;}
section#contact h3 {max-width: 280px; margin: 0 auto; padding-bottom: 20px; line-height: 32px;}
.underscore_project {width: 35%;}
.onvue_banner, .vibrasole_banner, .boombox_banner, .disclauncher_banner, .gulshachereli_banner, .jamaisvu_banner, .ministryofsupply_banner, .paywithme_banner, .rollio_banner, .showreel_banner, .snaptrack_banner, .venicebeach_banner, .howto_banner   {height: 180px;}
h4.info_project, span.info_project {font-size: 12px; width: 80%; text-align: left; margin: 0 auto;}
p.about_project {text-align: left; font-size: 16px; line-height: 24px; padding: 18px 30px;}
.nav-container ul li a { font-size: 15px;}
.nav-container nav {top: 70%; height: 90%;}
}

@media (max-height: 450px) and (orientation: landscape) {
.angle{background: rgba(256,256,256,0);}
span.work {display: none;}
h1.banner {display:none;}
h3.banner {display: none;}
.banner-arrow { bottom: 20px; width: 17px; height: 7px; background-size: 17px 7px;}
}

@media (min-width: 320px) and (max-width: 374px) {
h2.banner1 {font-size: 18px; line-height: 24px;}
.element {font-size: 18px;}
h1.banner{font-size: 10px; top: 79.5%; letter-spacing: 4px;}
h3.banner{font-size: 7px;  top: 79%;letter-spacing: 2px;}
.inner{ width: 255px; top: 25%;}
p.about{ padding: 0px 15px; line-height: 32px; font-size: 13px;}
span.about{line-height: 32px; font-size: 13px;}
h1.section_title{font-size: 20px; letter-spacing: 2px; padding-top: 30px;}
.underscore_title {width: 40px; height: 3px; margin-bottom: 30px;margin-top: 5px;}
.socialcolor {margin: 20px 2px 30px 2px;}	
h1.title_project { font-size: 25px;}
h3.sub_project {font-size: 11px;}
}

@media (min-width: 375px) and (max-width: 499px) {
h2.banner1 {font-size: 24px; line-height: 30px;}
.element {font-size: 24px;}
h1.banner{font-size: 12px; top: 83%; letter-spacing: 5px;}
h3.banner{font-size: 8px;  top: 82.5%;letter-spacing: 2px;}
.inner{ width: 330px; top: 25%;}
p.about{ padding: 0px 25px; line-height: 40px; font-size: 14.5px;}
span.about{line-height: 40px; font-size: 14.5px;}
h1.section_title{font-size: 25px; letter-spacing: 2px; padding-top: 30px;}
.underscore_title {width: 45px; margin-bottom: 30px; height: 3px; margin-top: 5px;}
.socialcolor {margin: 20px 5px 30px 5px;}	
h1.title_project { font-size: 27px;}
h3.sub_project {font-size: 12px;}
}

@media (min-width: 500px) and (max-width: 599px) {
h1.banner{font-size: 15px; top: 86%; letter-spacing: 7px;}
h3.banner{font-size: 10px;  top: 86%;letter-spacing: 3px;}
h2.banner {display:none;}
.icon{top: 35px; right: 50px;}
.logo {left:50px; top: 47px;}
h2.banner1 {font-size: 27px; line-height: 30px;}
.element {font-size: 27px;}
.inner{ width: 370px;}
.socialcolor {margin: 20px 5px 30px 5px;}
.nav-container ul li a { font-size: 17px;}	
}

@media (min-width: 500px) and (max-width: 768px) {
.skill {width: 42.5%; padding: 20px 0;}
.left-col {margin-right: 13%;}
#skills > div.bars {width: 85%;}
.skill li {height: 12px; margin-bottom: 36.5px;}
h1.skill {margin-top: -30px; font-size: 14px; letter-spacing: 3px; width: 100%; margin-bottom: 0px;}
.skill li h4 {font-size: 12px; letter-spacing: 1px;}
p.skill{font-size: 13px; width: 100%; line-height: 25px; top: -25px;}
.bar {height:12px; }
p.about_project {text-align: left; font-size: 17px; line-height: 27px; padding: 18px 25px;}

}

@media (min-width: 600px) and (max-width: 799px)  {
h1.banner{font-size: 15px; top: 86%; letter-spacing: 7px;}
h3.banner{font-size: 10px;  top: 86%;letter-spacing: 3px;}
h2.banner {display:none;}
.icon{top: 35px; right: 50px;}
.logo {left:50px; top: 47px;}
h2.banner1 {font-size: 34px; line-height: 38px;}
.element {font-size: 35px;}
.inner{ width: 468px;}
p.about{ padding: 0px 80px;}
.nav-container ul li a { font-size: 19px;}
}

@media (max-width: 700px){
.experience_wrapper {max-width: 420px; margin-top: -20px;}
.expcolumn {width: 100%;}
h2.position {text-align: left;}
p.info {border-left: 0px; padding-left: 0px; line-height: 20px;text-align: left;}
h3.date {padding-left: 0px; margin-top: 7px; letter-spacing: 2px; font-size: 11px;font-family: 'ProximaNova-Semibold';text-align: left;}
h1.job { margin-top: 35px;text-align: left; font-size: 17px;}
span.code {display: none;}
#grad, #abroad, #backpack, #product, #graphic, #film, #research, #design, #refine{ height: 112px; width: 112px;}
#grad span, #abroad span, #backpack span, #product span, #graphic span, #film span, #research span, #design span, #refine span{ height: 112px; width: 112px; background-position: -112px 0;}
p.designinfo{display: none;}
}

@media (min-width: 800px) and (max-width: 1025px) {
h2.banner {font-size: 20px; top: 46%;}
.element {font-size: 20px;}
h1.banner{font-size: 17px; top: 47%; letter-spacing: 8px;}
h3.banner{font-size: 10px;  top: 47%;letter-spacing: 4px;}
.icon{top: 35px; right: 50px;}
.logo {left:50px; top: 47px;}
ul li.info_project{  padding-left: 0px; font-size: 12px;}
ul li span.bold_info { font-size: 12px;}
}

@media (min-width: 800px){
h2.banner1 { display: none;}
.project_grid img { width: 280px;}
.project_grid li { margin: 20px 18px;}
.project_grid { max-width:1100px;}
}

@media (max-width: 800px){
span.work {display:none;}
h2.banner {display:none;}
ul li.info_project{display: list-item; line-height: 27px; font-size: 13px;}
ul li span.bold_info { line-height: 27px; font-size: 13px;}
p.info { font-size: 14px; line-height: 21px;}
h2.position {font-size: 12px; letter-spacing: 1px;}
.year_wrapper {width: 100%;}
.yearcolumn {width: 100%; margin-bottom: 20px;}
.goals_wrapper {width: 100%;}
.goalscolumn {width: 100%; margin-bottom: 20px;}
.process_wrapper {width: 100%; padding: 0px 0 0px 0;}
.processcolumn {width: 100%; margin-bottom: 50px;}
.captioninfo {max-width: 300px;}
} 

@media (max-width: 1024px){
.background-img {background: url('../imgs/bg_small.jpg') right center no-repeat; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;}
}