@import url(http://fonts.googleapis.com/css?family=Merriweather:300,300italic,400,400italic,700,700italic);
@import url(http://fonts.googleapis.com/css?family=Montserrat);

body { padding-top: 20px; padding-bottom: 40px; font-family: 'Merriweather', Georgia, Times; font-size: 16px; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Merriweather', Georgia, Times; font-weight: 700;}

blockquote p { font-size: 16px; line-height: 1.6em; }

/* Masthead */
.header, .footer, .header h3 { font-family: 'Montserrat', Helvetica, sans-serif; text-transform: uppercase; font-weight: normal; }

/* Navigation */
h3.text-muted a {text-decoration: none; color: #999999; }
h3.text-muted a:hover { text-decoration: none; color: #0088cc; }

img.avatar { margin-bottom: 30px; }
		
/* Custom container */
.container > hr { margin: 30px 0; }
.container > hr.footer {margin-bottom: 15px; }

/* E-Mail */
.obfuscate { unicode-bidi: bidi-override; direction: rtl; }

/* Jumbotron */     
.jumbotron { margin: 80px 0; }
.jumbotron h1 { font-size: 72px; line-height: 1; }
.jumbotron .btn { font-size: 21px; padding: 14px 24px; }
.marketing p { line-height: 25px; }
.marketing p.lead { line-height: 30px; }

/* Notes */
.notelist { width: 600px; margin: 0 auto; }
ul.listnotes { margin: 0 auto; }
ul.listnotes li {line-height: 30px; } 

/* Note */
.note, .contact, .about, .error, .swatches { width: 85%; margin: 0 auto; line-height: 26px; }
.note h2.date, .swatch-log h2.date { font-size: 24.5px; font-weight: 300; font-style: italic; }

/* Swatches */
.swatch-log h2.date { margin-bottom: 30px; }
.swatch-log { margin: 30px auto 70px; height: 140px; }
ul.swatch { list-style: none; margin: 0 auto; padding: 0; height: 50px; }
ul.swatch li { text-transform: uppercase; display: inline; float: left; height: 80px; width: 75px; text-indent: -9999px; font-size: 14px; text-align: center; font-family: 'Montserrat', Helvetica, sans-serif; background-image: url(/img/glass.png); background-repeat: repeat-x; background-position: 0 50%;}
ul.swatch li:hover { height: 75px; width: 75px; vertical-align: middle; text-indent: 0; }
/* 
ul.swatch li:last-child { webkit-border-top-right-radius: 9px; -webkit-border-bottom-right-radius: 9px; -moz-border-radius-topright: 9px; -moz-border-radius-bottomright: 9px; border-top-right-radius: 9px; border-bottom-right-radius: 9px; }
ul.swatch li:first-child { webkit-border-top-left-radius: 9px; -webkit-border-bottom-left-radius: 9px; -moz-border-radius-topleft: 9px; -moz-border-radius-bottomleft: 9px; border-top-left-radius: 9px; border-bottom-left-radius: 9px; }
*/
.swatch-log p { font-size: 14px; clear: left; margin-top: 10px; font-family: 'Montserrat', Helvetica, sans-serif; text-transform: uppercase; }
.clear { clear: both; height: 20px; }

/* CV */
.cv {line-height: 23px; width: 90%; margin: 0 auto;}
.cv li { line-height: 23px; }
.cv h2 { font-size: 26.5px; }
.cv h1 { font-size: 32.5px; }

.notes, .contact, .about, .cv, .error, .swatches { margin-bottom: 30px; }

/* Contact */
iframe {font-family: 'Merriweather', Georgia, Times; font-size: 16px;}

/* About */
.about ul.list-unstyled li { line-height: 30px; text-indent: -30px; margin-left: 30px;}

/* Guides */
.guide { width: 90%; margin: 0 auto 60px auto; line-height: 26px;}
.guide .title { padding: 100px 30px 0px; width: 100%; height: 60%; margin-bottom: 40px; background: #d5d5d5; color: #428bca; }
.guide .title h1 { font-size: 46px; color: #181818; }
.guide p { margin: 0 0 1em;  }
.guide img { border: solid 1px #d5d5d5; border-radius: 4px; margin: 40px auto; display: block; }
.guide .notes { font-size: 12px; }
.guide .notes h2 { font-size: 14px; }

/* Code */
pre.prettyprint { padding: 10px !important; margin: 40px; font-size: 12px;}

.step { border-radius: 50%; 
	-moz-border-radius: 50%; 
	-webkit-border-radius: 50%; 
	width: 35px; 
	height: 35px; 
	background: #4679BD; 
	color: #FFF; 
	float: left;
	text-align: center;
	font-size: 24px;
	padding-top: 5.5px;
	margin: 5px 15px 0px 0px;
	font-family: 'Montserrat', Helvetica, sans-serif; }

.mainbox {
background-color: #FFF;
margin: auto;
height: 600px;
width: 600px;
position: relative;
}

.err {
	color: #4679BD;
	font-family: 'Nunito Sans', sans-serif;
	font-size: 11rem;
	position:absolute;
	left: 20%;
	top: 8%;
}

.far {
position: absolute;
font-size: 8.5rem;
left: 42%;
top: 15%;
color: #4679BD;
}

.err2 {
	color: #4679BD;
	font-family: 'Nunito Sans', sans-serif;
	font-size: 11rem;
	position:absolute;
	left: 68%;
	top: 8%;
}

.msg {
	text-align: center;
	font-family: 'Nunito Sans', sans-serif;
	font-size: 1.6rem;
	position:absolute;
	left: 16%;
	top: 45%;
	width: 75%;
}

.center-image
{
    margin: 0 auto;
    display: block;
}

.contact-card {
  padding-right: 19px;
/* Apply the padding and background styles to links with http URLs inside .contact-card */
  &[href^="http"] {
    padding-left: 19px;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: left center;
  }

  /* targets the <span> elements inside any element with the class .contact-card. */
  span {
    font-weight: 500;
  }

  &:hover {
    text-decoration: none;
    transform: translateY(-2px);
  }

  /* Specific brand colors (scoped to their respective contact-card) */
  &.contact-card i.fa-linkedin {
    color: #0077b5;
  }

  &.contact-card i.fa-x-twitter {
    color: #000;
  }

  &.contact-card i.fa-graduation-cap {
    color: #4285F4;
  }

  &.contact-card i.fa-stack-overflow {
    color: #f48024;
  }

  &.contact-card i.fa-github {
    color: #333;
  }
}