/* ----- RESET ----- */
*{outline: 0;padding: 0;margin: 0;border: 0;}
body,ul,ol,dl,textarea,input {font-family: 'LeagueGothic'; font-size:25px;}

 :root {
  /* Colors */
  --primaryColor: #212529; 
  --secondaryColor: #95a5a6;
  --accentColor: #f50a89; /* #f1c40f */ /* main pink */
  --linkColor: #869595; /* #356da9 : #2ecc71 */
  --mutedColor: #f4f6f6;
  --baseColor: #808080; /* grey */
  --addPopColor: #FF6347; /* red orange */ 
}


a {color: var(--accentColor);}
a:hover {color: var(--baseColor);}
a:visited {color: var(--accentColor);} /* #f50a89 */

/*#index a:visited {color: var(--addPopColor);}*/
/* ----- FONTS ----- */
@font-face { font-family: 'LeagueGothic';  src:url('/fonts/LeagueGothic.otf'); }

@font-face { font-family: 'Nobile';  src:url('https://fonts.googleapis.com/css?family=Nobile:400,400italic,700,700italic'); }
@font-face { font-family: 'Open Sans Condensed';  src:url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700'); }

@font-face { font-family: 'Chunk';         src:url('fonts/Chunk.otf'); }
@font-face { font-family: 'Raleway';       src:url('fonts/Raleway.otf'); }
@font-face { font-family: 'Sniglet';       src:url('fonts/Sniglet.otf'); }


.leaguegothic{font-family:'LeagueGothic'; }
.chunk       {font-family:'Chunk'; }
.raleway     {font-family:'Raleway'; }
.sniglet     {font-family:'Sniglet'; }
.helvetica   {font-family:"Helvetica Neue", Helvetica,Arial, sans-serif;}
.calibri     {font-family:'Calibri';}
.code        {font-family:"Courier New",Courier,monospace;}
.nobile      {font-family:'Nobile', sans-serif; font-weight: Normal 400;}
.opencon    {font-family:'Open Sans Condensed', sans-serif; font-weight: 700;}


.tnone {text-decoration: none;}
a:link {text-decoration:none;}

/* ----- BLUEPRINT ----- */
  /* container_width/#divisions - margin */
.xoblueprint {width:950px;margin:0 auto;overflow:auto;}
.x1,.x2,.x3,.x4,.x5,.x6 {float:left;margin-right:10px;}
.last {margin-right:0;clear:right;}
.x1 {width:150px;}
.x2 {width:310px;}
.x3 {width:470px;}
.x4 {width:630px;}
.x5 {width:790px;}
.x6, .full {width:950px;margin-right:0;}

/* ----- TEXT ----- */
.f0 {font-size:15px;}
.f1 {font-size:25px;}
.f2 {font-size:50px;}
.f3 {font-size:100px;}
.f4 {font-size:150px;}
.f5 {font-size:200px;}
.f6 {font-size:20px;}
.f7 {font-size:26px; font-weight: 100; letter-spacing:2px;}
.f8 {font-size:40px;}
.f9 {font-size:27px;}

/* add in font-weight */
.n700 {font-weight: 700;}
.n700i {font-weight: 700italic;}
.n400i {font-family: 'Nobile', sans-serif; font-weight: 400 italic;}

/* add in line-height */
.lh0 {line-height:0.75em;}
.lh1 {line-height:1.0em;}
.lh2 {line-height:1.25em;}
.lh3 {line-height:1.3em;}
.lh18 {line-height:18px;}
.lh22 {line-height:22px;}
.lh25 {line-height:25px;}
.lh30 {line-height:30px;}
.lh30 {line-height:40px;}
.lh190 {line-height: 190px;}


/* add in letter-spacing */
.s1{letter-spacing:10px;}
.s2{letter-spacing:-1px;}

.txtshadow{text-shadow: 1px 1px 3px #000;}

.uppercase{text-transform:uppercase;}
.lowercase{text-transform:lowercase;}

.txtcenter{text-align:center;}
.txtbottom{vertical-align:text-bottom;}
.txtleft{text-align:left;}
.txtright{text-align:right;}

  /* -- Margins -- */
  
.mtopless100{margin-top:-100px;}
.mleftless80{margin-left:-100px;}


/* ----- DIV SPACING ----- */
.wauto{width:auto;}
.w1000{width:1000px;}
.w960 {width:960px;}
.w750 {width:750px;}
.w800 {width:800px;}
.w850 {width:850px;}
.w500 {width:500px;}
.w400 {width:400px;}
.w300 {width:300px;}
.w250 {width:250px;}
.w200 {width:200px;}
.w150 {width:150px;}
.w100 {width:100px;}
.w75  {width:75px;}
.w50  {width:50px;}

.padhead  {padding: 15px 15px 15px 22px;}
.pad25    {padding:15px 15px 15px 15px;}
.pad5      {padding:5 5 5 5;}
.pad25    {padding:25px 25px 25px 25px;}
.pad40    {padding:25px 25px 25px 40px;}
.padtop   {padding-top:15;}
.padbottom{padding-bottom:15;}
.padleft  {padding-left:15;}
.padright {padding-right:15;}

.trim      {margin:15 15 15 15;}
.trimtop   {margin-top:15;}
.trimbottom{margin-bottom:15;}
.trimleft  {margin-left:15;}
.trimright {margin-right:15;}
.trimover  {margin-left:200;}

/* ----- DIV Text Fix ----- */

.proftitle {margin-left:120px; text-align: left; line-height: 22px;}

/* Full height? */

/* ----- DIV POSITION ----- */
.absolute{position:absolute;}
.relative{position:relative;}

.bottom{bottom:0px;}
.top{top:0px;}

.center{margin-left: auto;margin-right: auto;}
.right {float:right;}
.rightimg {float:right; padding-right: 30px;}
.left  {float:left;}
.leftimg  {float:left; padding-left:30px;}
.clear{clear:both;}

.zabove20{z-index:20;}
.zabove{z-index:10;}
.znorm {z-index:auto;}
.zbelow{z-index:-10;}
.zbelow20{z-index:-20;}

/* ----- DIV DECORATION ----- */
.clickable{cursor:pointer;}

.show  {display:block;}
.hide  {display:none;}
.faded {opacity:0.4;}
.faded60 {opacity:0.6;}
.opaque{opacity:1.0;}

.rounded   {-moz-border-radius: 15px;border-radius: 15px;padding-left:10px;padding-right:10px;-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;}
.shadow    { -moz-box-shadow: 0 0 5px 5px #888;-webkit-box-shadow: 0 0 5px 5px#888;box-shadow: 0 0 5px 5px #888;}
.dropshadow{ -moz-box-shadow: 10px 10px 5px #888;-webkit-box-shadow: 10px 10px 5px #888;box-shadow: 10px 10px 5px #888;}


.slant     { -webkit-transform: rotate(10deg);-moz-transform: rotate(10deg);-ms-transform: rotate(10deg);-o-transform: rotate(10deg);transform: rotate(10deg);zoom: 1;}
.slantleft { -webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);-ms-transform: rotate(-10deg);-o-transform: rotate(-10deg);transform: rotate(-10deg);zoom: 1;}
.tilt     { -webkit-transform: rotate(25deg);-moz-transform: rotate(25deg);-ms-transform: rotate(25deg);-o-transform: rotate(25deg);transform: rotate(25deg);zoom: 1;}
.tiltleft { -webkit-transform: rotate(-25deg);-moz-transform: rotate(-25deg);-ms-transform: rotate(-25deg);-o-transform: rotate(-25deg);transform: rotate(-25deg);zoom: 1;}
.rotate90 { -webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);transform: rotate(90deg);zoom: 1;}
.rotate270{ -webkit-transform: rotate(270deg);-moz-transform: rotate(270deg);-ms-transform: rotate(270deg);-o-transform: rotate(270deg);transform: rotate(270deg);zoom: 1;}

.noise{background-image:url('images/noise.png');}
.dust{background-image:url('images/dust.png');}
.fabric{background-image:url('images/canvas.png');}
.vignette{}
/* look at https://gist.github.com/1387878*/

/* ---- PAGE DECORATION ---- */
.topbar   { top:0px;width:100%;position:fixed; z-index:100;}
.bottombar{ width:100%;position:fixed;bottom:0px;}
.header   { width:100%;position:relative;}
.footer   { width:100%;clear:both;overflow:auto;}




/* -- Extra stuff -- */

.up {text-transform:uppercase;}
.low {text-transform:lowercase;}
.cap {text-transform:capitalize;} 

/* -- work on this for a slight tilt left or right, 90 and flip -- */




/* --- stuff to do ---
- add pushing on blueprint
- fixed clearing on blueprint
- p, and h#
- Forms
- Buttons
- Rotation
- http://www.blueprintcss.org/tests/parts/elements.html
- http://css3please.com/

/* ----- stuff I took from blueprint ---- */
.colborder {
    border-right: 1px solid #DDDDDD;
    margin-right: 25px;
    padding-right: 24px;
}

hr {
    background: none repeat scroll 0 0 #DDDDDD;
    border: medium none;
    clear: both;
    color: #DDDDDD;
    float: none;
    height: 1px;
    margin: 0 0 17px;
    width: 100%;
}

.error, .alert {
    background: none repeat scroll 0 0 #FBE3E4;
    border-color: #FBC2C4;
    color: #8A1F11;
}

.error, .alert, .notice, .success, .info {
    border: 2px solid #DDDDDD;
    margin-bottom: 1em;
    padding: 0.8em;
}


/* ----- COLORS ----- */
  /* -- Text -- */
.yellow{color:#CCC400;}
.orange{color:#CC6F00;}
.red   {color:#CC0200;}
.purple{color:#C300CC;}
.blue  {color:#0100CC;}
.cyan  {color:#00CBCC;}
.green {color:#0BCC00;}
.brown {color:#6E4437;}
.grey  {color:#808080;}
.greyres  {color:#555555;}
.greyrestitle  {color:#232323;}
.white {color:white;}
.black {color:black;}
.pink {color: var(--accentColor);}
.redorange {color: var(--addPopColor);}
.resgrey {color:#202020;}

.lghtyellow{color:#FFF84C;}
.lghtorange{color:#FFAD4C;}
.lghtred   {color:#FF4E4C;}
.lghtpurple{color:#F74CFF;}
.lghtblue  {color:#4D4CFF;}
.lghtcyan  {color:#4CFEFF;}
.lghtgreen {color:#56FF4C;}
.lghtbrown {color:#8F4E36;}
.lghtgrey  {color:#C0C0C0;}

.drkyellow{color:#7F7B00;}
.drkorange{color:#7F4500;}
.drkred   {color:#7F0100;}
.drkpurple{color:#79007F;}
.drkblue  {color:#01007F;}
.drkcyan  {color:#007E7F;}
.drkgreen {color:#077F00;}
.drkbrown {color:#3D261F;}
.drkgrey  {color:#404040;}

  /* -- Backgrounds -- */
.yellowbg{background-color:#CCC400;}
.orangebg{background-color:#CC6F00;}
.redbg   {background-color:#CC0200;}
.purplebg{background-color:#C300CC;}
.bluebg  {background-color:#0100CC;}
.cyanbg  {background-color:#00CBCC;}
.greenbg {background-color:#0BCC00;}
.brownbg {background-color:#6E4437;}
.greybg  {background-color:#808080;}
.whitebg {background-color:white;}
.blackbg {background-color:black;}
.pinkbg {background-color:#f50a89;}
.greyresbg  {background-color:#1e1e1e;}

.lghtyellowbg{background-color:#FFF84C;}
.lghtorangebg{background-color:#FFAD4C;}
.lghtredbg   {background-color:#FF4E4C;}
.lghtpurplebg{background-color:#F74CFF;}
.lghtbluebg  {background-color:#4D4CFF;}
.lghtcyanbg  {background-color:#4CFEFF;}
.lghtgreenbg {background-color:#56FF4C;}
.lghtbrownbg {background-color:#8F4E36;}
.lghtgreybg  {background-color:#C0C0C0;}

.drkyellowbg{background-color:#7F7B00;}
.drkorangebg{background-color:#7F4500;}
.drkredbg   {background-color:#7F0100;}
.drkpurplebg{background-color:#79007F;}
.drkbluebg  {background-color:#01007F;}
.drkcyanbg  {background-color:#007E7F;}
.drkgreenbg {background-color:#077F00;}
.drkbrownbg {background-color:#3D261F;}
.drkgreybg  {background-color:#404040;}

  /* -- Hovers -- */
.yellowhvr:hover{color:#CCC400;}
.orangehvr:hover{color:#CC6F00;}
.redhvr:hover   {color:#CC0200;}
.purplehvr:hover{color:#C300CC;}
.bluehvr:hover  {color:#0100CC;}
.cyanhvr:hover  {color:#00CBCC;}
.greenhvr:hover {color:#0BCC00;}
.brownhvr:hover {color:#6E4437;}
.greyhvr:hover  {color:#808080;}
.whitehvr:hover {color:white;}
.blackhvr:hover {color:black;}

.lghtyellowhvr:hover{color:#FFF84C;}
.lghtorangehvr:hover{color:#FFAD4C;}
.lghtredhvr:hover   {color:#FF4E4C;}
.lghtpurplehvr:hover{color:#F74CFF;}
.lghtbluehvr:hover  {color:#4D4CFF;}
.lghtcyanhvr:hover  {color:#4CFEFF;}
.lghtgreenhvr:hover {color:#56FF4C;}
.lghtbrownhvr:hover {color:#8F4E36;}
.lghtgreyhvr:hover  {color:#C0C0C0;}

.drkyellowhvr:hover{color:#7F7B00;}
.drkorangehvr:hover{color:#7F4500;}
.drkredhvr:hover   {color:#7F0100;}
.drkpurplehvr:hover{color:#79007F;}
.drkbluehvr:hover  {color:#01007F;}
.drkcyanhvr:hover  {color:#007E7F;}
.drkgreenhvr:hover {color:#077F00;}
.drkbrownhvr:hover {color:#3D261F;}
.drkgreyhvr:hover  {color:#404040;}

  /* -- Background Hover -- */
.yellowbghvr:hover{background-color:#CCC400;}
.orangebghvr:hover{background-color:#CC6F00;}
.redbghvr:hover   {background-color:#CC0200;}
.purplebghvr:hover{background-color:#C300CC;}
.bluebghvr:hover  {background-color:#0100CC;}
.cyanbghvr:hover  {background-color:#00CBCC;}
.greenbghvr:hover {background-color:#0BCC00;}
.brownbghvr:hover {background-color:#6E4437;}
.greybghvr:hover  {background-color:#808080;}
.whitebghvr:hover {background-color:white;}
.blackbghvr:hover {background-color:black;}

.lghtyellowbghvr:hover{background-color:#FFF84C;}
.lghtorangebghvr:hover{background-color:#FFAD4C;}
.lghtredbghvr:hover   {background-color:#FF4E4C;}
.lghtpurplebghvr:hover{background-color:#F74CFF;}
.lghtbluebghvr:hover  {background-color:#4D4CFF;}
.lghtcyanbghvr:hover  {background-color:#4CFEFF;}
.lghtgreenbghvr:hover {background-color:#56FF4C;}
.lghtbrownbghvr:hover {background-color:#8F4E36;}
.lghtgreybghvr:hover  {background-color:#C0C0C0;}

.drkyellowbghvr:hover{background-color:#7F7B00;}
.drkorangebghvr:hover{background-color:#7F4500;}
.drkredbghvr:hover   {background-color:#7F0100;}
.drkpurplebghvr:hover{background-color:#79007F;}
.drkbluebghvr:hover  {background-color:#01007F;}
.drkcyanbghvr:hover  {background-color:#007E7F;}
.drkgreenbghvr:hover {background-color:#077F00;}
.drkbrownbghvr:hover {background-color:#3D261F;}
.drkgreybghvr:hover  {background-color:#404040;}


  /* -- Borders -- */
.yellowbdr{border-color:#CCC400;border-style:solid;border-width:5px;}
.orangebdr{border-color:#CC6F00;border-style:solid;border-width:5px;}
.redbdr   {border-color:#CC0200;border-style:solid;border-width:5px;}
.purplebdr{border-color:#C300CC;border-style:solid;border-width:5px;}
.bluebdr  {border-color:#0100CC;border-style:solid;border-width:5px;}
.cyanbdr  {border-color:#00CBCC;border-style:solid;border-width:5px;}
.greenbdr {border-color:#0BCC00;border-style:solid;border-width:5px;}
.brownbdr {border-color:#6E4437;border-style:solid;border-width:5px;}
.greybdr  {border-color:#808080;border-style:solid;border-width:5px;}
.whitebdr {border-color:white;border-style:solid;border-width:5px;}

.lghtyellowbdr{border-color:#FFF84C;border-style:solid;border-width:5px;}
.lghtorangebdr{border-color:#FFAD4C;border-style:solid;border-width:5px;}
.lghtredbdr   {border-color:#FF4E4C;border-style:solid;border-width:5px;}
.lghtpurplebdr{border-color:#F74CFF;border-style:solid;border-width:5px;}
.lghtbluebdr  {border-color:#4D4CFF;border-style:solid;border-width:5px;}
.lghtcyanbdr  {border-color:#4CFEFF;border-style:solid;border-width:5px;}
.lghtgreenbdr {border-color:#56FF4C;border-style:solid;border-width:5px;}
.lghtbrownbdr {border-color:#8F4E36;border-style:solid;border-width:5px;}
.lghtgreybdr  {border-color:#C0C0C0;border-style:solid;border-width:5px;}
.lghtgreybdr  {border-color:#C0C0C0;border-style:solid;border-width:1px;}

.drkyellowbdr{border-color:#7F7B00;border-style:solid;border-width:5px;}
.drkorangebdr{border-color:#7F4500;border-style:solid;border-width:5px;}
.drkredbdr   {border-color:#7F0100;border-style:solid;border-width:5px;}
.drkpurplebdr{border-color:#79007F;border-style:solid;border-width:5px;}
.drkbluebdr  {border-color:#01007F;border-style:solid;border-width:5px;}
.drkcyanbdr  {border-color:#007E7F;border-style:solid;border-width:5px;}
.drkgreenbdr {border-color:#077F00;border-style:solid;border-width:5px;}
.drkbrownbdr {border-color:#3D261F;border-style:solid;border-width:5px;}
.drkgreybdr  {border-color:#404040;border-style:solid;border-width:5px;}

/* ----- BORDERS ----- */
.border   {border-width:5px;border-style:solid;}
.thinbdr  {border-width:1px;border-style:solid;}
.thickbdr {border-width:10px;border-style:solid;}
.dashed   {border-style:dashed;}

/* ----- TABLE ----- */
table
{
border-collapse:collapse;
width: 600px;
}
table,th, td
{
border-bottom: 0px solid #f50a89;
}

td {padding:5 5 5 22; color: #555555;}

.clearboth {clear: both;}
/* Add for ID */
#resumelinks {clear: both;}
#linkedindownload {clear: both;}

/******************** CENTER RESUME ****************/
/* ----- MOBILE ----- 
@media screen and (max-width: 1900px){
  .center {margin-left: auto;
      margin-right: auto;}
  }


@media screen and (max-width: 1400px){
  .center {margin-left: auto;
      margin-right: 18%;}
  }

*/


/* ----- MOBILE ----- */
@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;
    }

    #titlebox {
        left: 24%;
        top: 34%;
    }
}

@media only screen and (max-device-width : 768px) {
      #index #titlebox {
        left: 22%;
        top: 26%;
      }

      #index .res-link {
        display: block;
        font-size: 150px;
      }

      #me {margin-top: 20%;}

      #me .innerbox {
        width: 800px;
      }

}

@media only screen and (max-device-width : 667px) {
      #index #titlebox {
        left: 24%;
        top: 32%;
      }

      #index .res-link {
        display: block;
        font-size: 150px;
      }

}

@media (max-width: 320px) {
    html {
        font-size: 6px;
    }
}