@font-face {
    font-family: Sofia;
    src: url("../downloads/fonts/SofiaProLight-webfont.eot");
    src: url("../downloads/fonts/SofiaProLight-webfont.eot?#iefix") format("embedded-opentype"),
         url("../downloads/fonts/SofiaProLight-webfont.woff") format("woff"),
         url("../downloads/fonts/SofiaProLight-webfont.ttf") format("truetype"),
         url("../downloads/fonts/SofiaProLight-webfont.svg#SofiaProLightRegular") format("svg");
    font-weight: normal;
    font-style: normal;
}

html { 
 width: 100%;
 margin: 0;
 padding: 0;
}
body {
 font: normal 1em "Sofia", Verdana, Arial, sans-serif; 
 font-size: 14px;
 color: #3f3d33; 
 margin: 0;
 padding: 0;
}
#bg-img {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 0;
 margin:5px 0;
}
.stretch { 
 width:100%; 
 height:100%; 
}
#container {
 position: relative;
 z-index: 1;
 border-top: 8px solid #38bbbb;
}




/* ------ UNIVERSAL STYLES ------ */

img { 
 border: 0; 
}

p {
 margin: 20px 0;
}

.clear {
 clear: both; 
 height: 1px; 
 display: block; 
}

h1 {
 font-size: 1.5em; 
}
h2 {
 font-size: 1.4em; 
}
h3 {
 font-size: 1em;
}
h3.purple {
 color: #5256cb !important;
}
h3 > div {
 font-size: 1em;
 font-weight: normal !important;
 padding: 5px 0;
}
h4 {
 font-size: .9em;
}
h5 {
 font-size: .9em;
 font-style: italic;
 margin: 0;
 padding: 0 0 3px 0;
}
h6 {
 font-size: .9em;
 font-style: italic;
 margin: 0;
 padding: 10px 0 4px 0;
}

hr {
 border-top: 0;
 border-left: 0;
 border-right: 0;
 border-bottom: 1px solid #ccc !important;
 height: 1px;
 padding: 1px 20px 0 20px;
 margin-top: 8px 8px !important;
 background: #fff !important;
}


a, a:visited {
color: #047373;
text-decoration: underline; 
}
a:hover, a:active {
text-decoration: none; 
}

hr {
 border-top: 0;
 border-left: 0;
 border-right: 0;
 border-bottom: 2px solid #9b937f;
 height: 1px;
 padding: 1px 0 0 0;
 margin: 15px 0;
 background: #faf9f5;
}

pre {
 font-family: inherit;
 font-size: inherit;
}

#wrap {
 width: 60%;
 margin: 0 auto;
}



/* ------ HEADER STYLES ------ */

header {
 width: 100%;
 height: 115px;
 margin: 0 auto;
 padding-top: 10px;
}

#logo {
 display: block;
 width: 422px;
 height: 46px;
 margin: 0 auto;
 text-align: center;
 background: url(../img/logo.png) no-repeat; 
}

nav {
 display: block;
 width: 610px;
 padding-top: 25px;
 *padding-top: 10px;
 font: normal 1em "Sofia", Verdana, Arial, sans-serif; 
 margin: 0 auto;
 text-align: center;
}

#nav-links {
 list-style: none;
 padding: 0;
 margin: 0;
}
#nav-links li {
 display: inline;
 padding: 0 15px;
 margin: 0; 
}

body#home li.home a, 
body#logos li.logos a,
body#photos li.photos a,
body#resume li.resume a,
body#contact li.contact a {
 color: #059595;
 text-shadow: 8px 8px 15px #fff;
 filter: dropshadow(color=#fff, offx=-1, offy=1);
}

#nav-links li a {
 color: #3f3d33;
 font-size: 20px;
 padding: 0;
 margin: 0;
 text-decoration: none; 
}
#nav-links a:hover {
 color: #059595;
}


table#resume-content {
    max-width:  800px;
    padding-bottom: 35px;
    margin:  0 auto !important;
}
table#resume-content td {
    padding: 5px 0 5px 5px;
}
table#resume-content th {
     font-size: 1em;    
     padding: 5px 15px 5px 5px;
     text-align: left;
}

table#resume-content td > ul {
 padding: 0;
 margin: 0;
}

ul.special {
 padding: 0;
 margin: 0;
 list-style: none;
}

ul.special li {
 padding-left: 20px;
 background: url(../img/fancy.png) 0 2px no-repeat;
}


ul.plain {
 padding: 0;
 margin: 0;
 list-style: none;
}
ul li,
ul.plain li {
 padding: 0 0 8px 0;
}

#thanks {
  width: 580px;
  margin: 40px auto;
}

#click {
 width: auto;
 text-align: center;
 margin: 40px auto 0 auto;
}


#resume #wrap > ul {
 width: 170px;
 margin: 25px auto 0 auto;
}

#contact #wrap > ul {
 width: 225px;
 padding: 0;
 margin: 25px auto 0 auto;
 list-style: none;
}




/* ============================= */
/* ! Layout for tablet version   */
/* ============================= */

@media only screen and (max-width: 800px) {

#showcase-content-0 {
 left: 0;
}

 .showcase-arrow-previous {
  left: 3px !important;
 }
 
 .showcase-arrow-next {
  right: 3px !important;
 }
 
 
 .showcase-content,
 .showcase-content-wrapper > img {
   text-align: center;
   margin: 0 auto;
 }


 table#resume-content {
  display: none !important;
  visibility: collapse !important;
 }

}


/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media only screen and (max-width: 500px) {

 body {
  font: normal 14px "Sofia", Verdana, Arial, sans-serif !important; 
  -webkit-text-size-adjust:none !important; 
 }

#logo {
  display: block;
  width: 300px !important;
  height: 33px !important;
  margin: 0 auto !important;
  text-align: center !important;
  background: url(../img/logo-small.png) no-repeat; 
 }

 nav {
  width: 300px !important;
  padding-top: 15px !important;
 }


 #nav-links li {
  padding: 0 8px 12px 8px !important;
 }

 #nav-links li a {
  font-size: 17px !important;
  -webkit-text-size-adjust:none !important; 
 }


 .showcase-content-container  {
  height: 232px !important; 
  }


 .showcase-content-wrapper > img {
  display: inline-block !important;
  width: 300px !important;
  height: auto !important;
  margin: 0 auto !important;
  text-align: center !important;  
  vertical-align: middle !important;
 }

.first-img {
 padding-top: 15px;
} 


 /* Navigation arrows */
 .showcase-arrow-previous, 
 .showcase-arrow-next {
  position: absolute !important;
  background: url("../img/arrows-small.png") !important;
  width: 25px !important;
  height: 27px !important;
  top: 90px !important;
  cursor: pointer !important; 
 }
 .showcase-arrow-previous {
  left: 10px !important;
 }
 
 .showcase-arrow-previous:hover {
  background-position: 0 -27px !important;
 }
 
 .showcase-arrow-next {
  right: 10px !important;
  background-position: -25px 0 !important;
 }
 
 .showcase-arrow-next:hover {
  background-position: -25px -27px !important;
 }
 
.showcase-button-wrapper,
 .showcase-tooltips,
 #view {
  display: none;
}


  /* Styling the tooltips */
  .showcase-plus-anchor
  {
   position: relative !important;
   display: block !important;
   background-image: url('../img/plus_small.png')!important;
   background-repeat: no-repeat !important;
   width:32px !important;
   height:32px !important;
   top: 150px !important;
   right: 150px !important;
   z-index: 5 !important;
  }
  
  .showcase-plus-anchor:hover
  {
   background-position: -60px 0;
  }
  
  div.showcase-tooltip
  {
   background-color: #fff;
   color: #000;
   text-align: left;
   padding: 5px 8px;
   background-image: url(../img/white-opacity-80.png);
  }

  


 #resume-content {
  display: none !important;
 }

}