/** colors
drk grey - 24272A
5 - f1f1f1
25 - BCBDBD
50 - 7F8182
--
blue - 00A0DF
border:1px solid #000;
**/

body { color:#7F8182; background:#F1F1F1; font-family: 'NeusaNextPro-Regular',sans-serif; border-top:3px solid #24272A; }
a { color:#00A0DF; transition: color .2s ease-in-out;
   -moz-transition: color .2s ease-in-out;
   -webkit-transition: color .2s ease-in-out; }
a:hover { color:#24272A; }
p { letter-spacing: .05px; color:#7F8182; }
h2 { font-family: 'NeusaNextPro-WideRegular'; color:#24272A; font-weight: normal; font-size: 48px; line-height: 1.1em; }
h3 { font-family: 'NeusaNextPro-CompactRegular'; text-transform: uppercase; letter-spacing: 2px; color:#BCBDBD; font-size: 18px; font-weight: normal; }
.row { max-width: 1440px; }


h1 { margin:0; padding:0; font-family: 'NeusaNextPro-WideBold'; color:#24272A; font-size: 20px; margin:12px 0 0 0; font-weight: normal; }
h4 { font-family: 'NeusaNextPro-CompactRegular'; text-transform: uppercase; letter-spacing: 2px; color:#BCBDBD; font-size: 16px; font-weight: normal;  }
h6 { font-family: 'NeusaNextPro-Regular'; color:#BCBDBD; font-size: 14px; font-weight: normal;  }
.logo { float:left; margin:0; padding:0; }
.logo img { float:left; margin:0 14px 0 0; }
.logo a { display:block; }

div { margin:0; padding:0; }

header { margin:3%; height:100px;}
header h4 { margin:-3px 0 0 0; }
.nav { text-align:right; }
.nav ul { list-style: none; float:right; padding:24px 0 0 0; }
.nav ul li { font-size: 16px; float:left; margin-left:40px; text-transform: uppercase; letter-spacing: 2px;}

#main { margin:3%; }
.intro {padding-left:80px; padding-bottom:50px;  }
.intro p { color:#666; line-height:1.8em; }
.intro ul { float:left; color:#666; list-style: none; margin:0 0 20px 20px; }
.intro ul li { margin:5px 0;  width:50%; float:left; }
.intro ul li::before {
  content: "> ";
  color: #00A0DF;
}
.intro h2 { margin-bottom:0; }
.intro h3 { margin-top:0; }
.intro h4 { margin: 20px 0 20px 20px;}

#main img { margin-bottom:40px; }
.quote { font-size: 18px; color:#24272A; }

#main .row { margin-bottom: 30px; }

.detail p { margin-bottom:30px; }
.detail h3 { color:#24272A; }

.work h3 { margin:-20px 10px 30px 0; }
.work p { margin:-30px 0 50px 0; }

.work a:hover h3 { color:#00A0DF; }
.work img { transition: opacity .2s ease-in-out;
   -moz-transition: opacity .2s ease-in-out;
   -webkit-transition: opacity .2s ease-in-out; }
.work a:hover img { opacity:.75; }

.drop { -webkit-box-shadow: 0px 2px 14px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 14px 0px rgba(0,0,0,0.2);
box-shadow: 0px 2px 14px 0px rgba(0,0,0,0.2); }

.browser { border-top:16px solid #ccc; border-bottom:8px solid #ccc; border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px; }

.tv { border:20px solid #000;  border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px; }

.tablet { border-top:8px solid #fff; border-bottom:8px solid #fff; border-left:20px solid #fff; border-right:20px solid #fff; border-radius: 10px 10px 10px 10px;;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px; }

.mobile { border-top:14px solid #fff; border-bottom:20px solid #fff; border-left:4px solid #fff; border-right:4px solid #fff; border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px; }

.mobileclip { position: absolute;
    clip: rect(0px,750px,750px,0px); }

/*.white { background:#fff; margin:0 0.9575rem 0 0.9375rem;  }
.white div { float:left; margin-left:0;}*/

.center { text-align: center; }

.skills ul { list-style: none; margin:0 0 30px 0; padding:0; }
.skills ul li { color:#BCBDBD; font-family: 'NeusaNextPro-CompactRegular'; line-height: 1em; margin-bottom:10px; }
.skills ul li strong { margin-right: 5px;  text-transform: uppercase; letter-spacing: 2px; color:#24272A; }

li strong { margin-right: 5px;  text-transform: uppercase; letter-spacing: 2px; color:#24272A; }

.logos img { padding:0 30px; }

.zero { margin:0; padding:0; }

.rule { border-top: 2px solid #BCBDBD; padding-top:20px }
    
.footer {  border-top:1px solid #BCBDBD;  }
.footer p { padding:20px 0; font-family: 'NeusaNextPro-CompactRegular'; text-transform: uppercase; letter-spacing: 2px; color:#ccc; font-size: 14px; }


/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-width: 375px) 
  and (max-width: 667px) { 
      .nav { text-align:left; padding-left:24px; margin-bottom: 20px;}
      .nav ul { float:left; }
      
      .intro {padding-left:0; padding-bottom:20px; }
      .intro p { padding-bottom: none; }
      .intro h4 { margin:0 0 10px 0;}
      .intro ul li { margin:5px 0; width:50%; float:left; }
      
      .strip { width:200%; overflow: hidden; }
      
}


/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-width: 414px) 
  and (max-device-width: 736px)  { 
      .intro {padding-left:0; padding-bottom:20px;  }
      .strip { width:200%; overflow: hidden; }
}


/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-width: 375px) 
  and (max-width: 812px) { 
      .intro {padding-left:0; padding-bottom:20px;  }
      .strip { width:200%; overflow: hidden; }
}


/* ----------- iPad 3, 4 and Pro 9.7" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-width: 768px) 
  and (max-width: 1024px) {
      .intro ul li { width:100%; }
}

/* Portrait and Landscape */
@media only screen 
  and (min-width: 834px) 
  and (max-width: 1112px) {
      .intro ul li { width:100%; }
}