/*edit _constants.scss to edit color and fonts
edit main.scss to edit css 
run "sass --watch source/css:source/css in terminal" to compile scss files  

color chart
dark blue: rgba(39, 49, 62, 1)
lighter blue: (50, 62, 79, 1)
orange: FF5541
greyish blue: #ACB7C4

background: #27313e;
text color: #acb7c4;
$link-color: rgba(50, 62, 79, 1);
$accent-color: #FF5541;
$image-color: #ddd;

previous colors
darker greyish blue: rgb(133, 142, 152)
darker orange: rgb(221, 74, 56)
i don't remember: #2C3B57
*/

body {
  font-size: 1em;
  background-color: #F5F1ED;
  color: #5D576B;
  font-family: "lora", "Palatino", "Times New Roman";
  /*	word-spacing: 0.07em;*/
  letter-spacing: 0.08em; }

.pageTop {
  margin-top: 3.1%; }

.spacing {
  margin-bottom: 1.5%; }

.jumpUp {
  float: right;
  margin: 0; }

.hidden {
  display: none; }

p, li {
  /*font-size: 1.1em;*/ }

h1.name {
  padding: 0;
  line-height: 1.2em;
  font-family: "loraItalic", "Palatino", "Times New Roman";
  font-weight: normal;
  letter-spacing: 0.08em; }

h5.projectName, h5.motto {
  padding: 0;
  line-height: 1.2em;
  font-family: "lora", "Palatino", "Times New Roman";
  font-weight: normal; }

h1.name {
  margin: 0; }

h5.projectName {
  margin: 1% 0 0 0;
  font-size: 1.3em; }

h5.motto {
  font-size: 1.3em;
  margin-bottom: 1em;
  margin-top: 0;
  color: #5D576B; }

h6 {
  font-weight: normal;
  font-size: 1em;
  font-family: "lora", "Palatino", "Times New Roman"; }

p.list, .bio p:last-child {
  margin-bottom: 0; }

p.subtitle {
  margin-top: 0.3em;
  margin-bottom: 1.5%; }

.projectDescription p:last-child {
  margin-bottom: 1%; }

hr {
  border-color: #5D576B;
  margin-top: 0.5%; }

.border {
  border: 1px solid #fff; }

.accentColor {
  color: #F7567C; }

.bold {
  font-family: "loraBold", "Palatino", "Times New Roman"; }

/**************
list formating
**************/
/*horzLinks for resume and email*/
ul.horzLinks {
  margin-top: 0.6em;
  list-style: none; }

.horzLinks li {
  display: inline;
  padding: 0px 0px 0px 2.75%;
  margin: 0; }

.horzLinks li:first-child {
  padding-left: 0px;
  padding-right: 2.75%; }

/* navigation */
.navigation li {
  float: left;
  display: inline-block;
  width: 142px;
  text-align: center; }

.navigation .smaller {
  width: 127px; }

/*list of items*/
ul.list {
  margin-bottom: 0; }

.list li {
  margin-left: 1.1em; }

ul.projectImage {
  list-style: none; }

.projectImage li {
  display: inline;
  margin: 1% 0; }

/**************
link formating
**************/
.navigation a.active, .navigation a.inactive, .horzLinks a, .jumpUp a {
  padding: 0.2em 0.7em;
  border-radius: 5px;
  /*background-color: $accent-color;*/ }

a {
  color: #56A3A6;
  font-family: "lora", "Palatino", "Times New Roman";
  /*font-style: italic;*/ }

.navigation a.active, .navigation a.active:hover {
  color: #F5F1ED;
  background-color: #56A3A6;
  font-family: "loraBold", "Palatino", "Times New Roman";
  /*letter-spacing: 0.06em;*/ }

a:hover {
  color: #56A3A6;
  text-decoration: underline; }

a.normalLink {
  /*text-decoration:underline;*/ }

/****************
image formating
****************/
img {
  /*	border: 3px solid $image-color;*/
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background-clip: content-box; }

.imageBorder {
  border: 3px solid #D5DFE5;
  background-color: #D5DFE5;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px; }

.projectImage .imageBorder {
  max-width: 146px;
  line-height: 0.7em; }

.pictureMe {
  line-height: 0.8em; }

/****************
resume formatting
****************/
h3.sectionHeader, h5.position, h5.degree {
  color: #5D576B;
  margin: 0;
  font-family: "lora", "Palatino", "Times New Roman";
  font-weight: normal; }

h3.sectionHeader {
  margin-top: 1.6em; }

h3.sectionHeader:first-child {
  margin-top: 0.3em; }

h5.degree {
  color: #F7567C; }

p.school, ul.jobSkills {
  margin-left: 3em; }

p.dates {
  margin-bottom: 0; }

/****************
media queries
****************/
/*breakpoint - small computers resolution >= 949px*/
/*disabling for now since menu is so small*/
/*@media screen and (max-width: 949px) and (min-width: 768px) {
	#nameEmail {
		max-width: 27%;
	}
	#mobileNav {
		min-width: 73%;
	}
}*/
/*breakpoint - tablets width >= 767px*/
@media screen and (max-width: 767px) {
  .mobileHide, hr.first {
    display: none; }

  .jumpUp {
    line-height: 3em; }

  .zeroPadding {
    padding-left: 0 !important;
    padding-right: 0 !important; }

  .spacing {
    margin-bottom: 2%; }

  /*restyling the navigation*/
  #mobileNav {
    text-align: center;
    background-color: #D5DFE5;
    padding: 0;
    line-height: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 1em;
    cursor: pointer; }

  #mobileNav a {
    display: block;
    line-height: 3em;
    color: #5D576B; }

  #mobileNav .mobileLeft {
    border-right: 2px solid #F5F1ED; }

  #mobileNav .mobileRight {
    border-left: 2px solid #F5F1ED; }

  #menuButton {
    line-height: 3em; }

  #mobileMenu {
    text-align: right;
    position: absolute;
    right: 0;
    z-index: 1000;
    width: 100%;
    background-color: #D5DFE5; }

  ul#mobileMenu {
    margin-bottom: 0; }

  #mobileMenu li {
    display: block;
    text-align: right;
    width: 100%;
    border-top: 1.5px solid #5D576B;
    padding-right: 5%; }

  #mobileMenu li:first-child {
    border-top: 1.5px solid #5D576B; }

  #mobileMenu .active, #mobileMenu .inactive {
    background-color: transparent;
    font-family: "lora", "Palatino", "Times New Roman";
    margin: 0;
    padding: 0; }

  #mobileMenu .active {
    color: #56A3A6; }

  #mobileMenu .inactive {
    color: #5D576B; } }
/*breakpoint - smaller tablets width 507 -640px*/
@media screen and (max-width: 675px) and (min-width: 507px) {
  ul.projectImage {
    margin-right: 25%; } }
/*breakpoint - scaling down width >=350*/
@media screen and (max-width: 350px) {
  h1.name {
    font-size: 1.9em; }

  h3.projectName:first-child {
    margin-top: 2.5%; } }
/*breakpoint - phones width >= 341px*/
@media screen and (max-width: 341px) {
  .tinyHide {
    display: none; }

  h1.name {
    font-size: 1.7em; }

  h3.projectName {
    font-size: 1.2em; }

  .projectImage li {
    max-width: 140px; } }

/*# sourceMappingURL=main.css.map */