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

/** =============  Basics =============  **/

html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   width:auto;
}

body, nav, header {
   font-family: 'candelabook';
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
}

p { margin: 2% 10% 2% 10%;
	font-size:120%;
	min-width:50%;
	text-align:left;
}

h1 {
	font-size: 5em;
	line-height: 1.0;
	text-align:center;
	color:white;

}

span.gold {
	color:#ffd500;
}

section {
	display:block;
	overflow:hidden;
}

article {

}

a:visited {
	color:black;
}

/** ============= Main Home page [Hi, I'm Iris. Hire me.] ============= **/

#home { 
background-color:#260c47;
padding-top:10%;
min-height:50%;
max-height:100%;
padding-bottom:10%;
margin: 0 auto; 
width: auto; 
position: relative; 
display:block;
}

#home article { 

}

#home h1 {
	margin-bottom:1%;
}

#home article p {
	color:#c5c0c9;
	text-align:center;
}

#home a, #home a:visited  { color: #fff; }
#home a:hover, #home a:focus { color: #11ABB0; }

hr { 
	border: 2px dotted #c499cc; 
	width:50%; 
	opacity: 0.2;
	margin-top:0;
}

p.image_header {
	margin-bottom:5em;
	padding:0;
}

img#iris-avatar {
	max-width:45%;
	margin-bottom:-5em;
}


/** =============  Who Are You? Segment =============  **/

#about { 
background: url(background-color-2.png) 50% 0 repeat fixed; 
padding-top:10%;
min-height:50%;
max-height:100%;
padding-bottom:10%;
margin: 0 auto; 
width: auto; 
position: relative; 
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
box-shadow: 0 0 50px rgba(0,0,0,0.8);
display:block;
}
 
#about article { 
  width: 100%; 
}

#about article p{
	color:white;
	margin-left:2em;
}

div.image-block {
	margin-left:2em;
	padding-right:2em;
}

#about a, #about a:visited  { color: #fff; }
#about a:hover, #about a:focus { color: #11ABB0; }

/** =============  What I Do Segment =============  **/

#what-i-do { 
background: url(background-color-3.png) 50% 0 repeat fixed;
padding-top:10%;
min-height:50%;
max-height:100%;
padding-bottom:10%;
margin: 0 auto; 
width: auto; 
position: relative; 
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
box-shadow: 0 0 50px rgba(0,0,0,0.8);
display:block;
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
 
#what-i-do article { 
  text-align: center; 
  top: 150px;
  width: 100%; 
}

#what-i-do p, #what-i-do h1 {
	color: black;
}

#what-i-do a, #what-i-do a:visited  { color: #fff; }
#what-i-do a:hover, #what-i-do a:focus { color: #11ABB0; }


/** ============= Skills Segment ============= **/

#skills h2 {
	text-align:left;
	margin-left:10%;
}

#skills { 
background: url(background-color-4.png) 50% 0 repeat fixed; 
padding-top:10%;
padding-bottom:10%;
margin: 0 auto; 
width: auto; 
position: relative; 
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
box-shadow: 0 0 50px rgba(0,0,0,0.8);
display:block;
}
 
#skills article { 
 }

#skills p, #skills h1 {
	color: black;
}

/** ============= Samples Segment ============= **/

#samples { 
background: url(background-color-5.png) 50% 0 repeat fixed; 
padding-top:10%;
padding-bottom:10%;
margin: 0 auto; 
width: auto; 
position: relative; 
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
box-shadow: 0 0 50px rgba(0,0,0,0.8);
display:block;
  -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

#samples img {
	height:200px;
}
 
#samples article { 
}

#samples p, #samples h1 {
	color: black;
}

.center {text-align:center;	
}

div.samples {
text-align: justify;
font-family: Helvetica;
background-color: #98a8dc;
margin-top:2em;
margin-left:10em;
margin-right:10em;
padding-top:2em;
padding-left:2em;
padding-right:2em;
padding-bottom:2em;
min-width: 400px;
max-width:800px;
line-height:2em;
}

h2.samples-header {
	margin-left:10%;
	margin-bottom:0em;
}

p.sample-title {
	margin-top:0em;
	margin-bottom:0em;
	font-weight: bold;
	font-style: italic;
}

p.sample-desc {
	margin-top:0em;	
}

p.example {
	font-size:.85em;
	margin-bottom:0em;
	font-style:italic;
}

p.example-img {
	margin-top:.10em;
}
	
img {
	display:inline;
}

#iris-about {
	display:run-in;
	float:left;
	border:2px solid black;
	width:30%;
	max-width:30%;
	min-width:200px;
	margin-right:2em;
	margin-bottom:1em;
	height:auto;
}

/** ============= Contact Segment =============  **/

#contact { 
background: url(background-color-6.png) 50% 0 repeat fixed; 
padding-top:10%;
min-height:50%;
max-height:100%;
padding-bottom:10%;
margin: 0 auto; 
width: auto; 
position: relative; 
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
box-shadow: 0 0 50px rgba(0,0,0,0.8);
display:block;

}

 
#contact article { 

}

#contact p, #contact h1 {
	color: black;
}

/** ============= Work Places Segment ============= **/

#work_places { 
background: url(background-color-2.png) 50% 0 repeat fixed; 
padding-top:10%;
padding-bottom:10%;
height:80%;
min-height:80%;
margin: 0 auto; 
width: auto; 
position: relative; 
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
 
#work_places article { 

}

#work_places article p{
	color:white;
}

#work_places a:visited {
	color:#849dff;
}


/** ============= Footnotes ============= **/

span.footnote { display:none; } 
sup {
		color:#ffd500;
		font-size:14pt;
}
sup:hover span.footnote { 
	display:inline-block;
	background-color:#260c47;
	width:40%;
	margin:10px;
	padding:1em;
	line-height:1.25;
	border-radius:10px;
	font-size:small;
	}

/** ============= Navigation & Mobile  ============= **/
/** Design by Styleshout -- Many thanks! **/

header {
   margin:0;   
   padding-bottom:10px;
   height:0px;
   max-height:10px;
   background-color: #260c47;
   text-align: center;
   font-size:120%;
}

#nav-wrap ul, #nav-wrap li, #nav-wrap a {
	 margin: 0;
	 padding: 0;
	 border: none;
	 outline: none;
}


/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
	 margin: 0;
	 padding: 0;
	 border: none;
	 outline: none;
}

/* nav-wrap */
#nav-wrap {
   font: 12px 'candelabook', sans-serif;
   width: 100%;
   text-transform: uppercase;
   letter-spacing: 2.5px;
   margin: 0 auto;
   z-index: 100;
   position: fixed;
   left: 0;
   top: 0;
}
.opaque { background-color: #333; }

/* hide toggle button */
#nav-wrap > a.mobile-btn { display: none; }

ul#nav {
   min-height: 48px;
   width: auto;

   /* center align the menu */
   text-align: center;
}
ul#nav li {
   position: relative;
   list-style: none;
   height: 48px;
   display: inline-block;
}

/* Links */
ul#nav li a {
   display: inline-block;
   padding: 8px 13px;
   line-height: 32px;
	text-decoration: none;
   text-align: left;
   color: #fff;
	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}

ul#nav li a:active { background-color: transparent !important; }
ul#nav li.current a { color: #F06000; }

/* nav-wrap */
#nav-wrap {
   font-family:'candelabook';
   width: 100%;
   text-transform: uppercase;
   letter-spacing: 2.5px;
   margin: 0 auto;
   margin-bottom:10%;
   z-index: 100;
   position: fixed;
   left: 0;
   top: 0;
}
.opaque { background-color:#ea173a; }

ul#nav {
   min-height: 10px;
   width: auto;
   text-align: center;
}

ul#nav li {
   position: relative;
   list-style: none;
   height: 48px;
   display: inline-block;
}

/* Links */
ul#nav li a {
   font-size:120%;
   display: inline-block;
   padding: 8px 13px;
   line-height: 32px;
	text-decoration: none;
   text-align: left;
   color: #fff;
   -webkit-transition: color .2s ease-in-out;
   -moz-transition: color .2s ease-in-out;
   -o-transition: color .2s ease-in-out;
   -ms-transition: color .2s ease-in-out;
   transition: color .2s ease-in-out;
}

ul#nav li a:active { background-color: transparent !important; }
ul#nav li.current a { color: #ffd500; }

/* screenwidth less than 900px
--------------------------------------------------------------------- */
@media only screen and (max-width: 900px) {
   /* nav-wrap */
   #nav-wrap {
      font: 'candelabook', sans-serif;
      letter-spacing: 1.5px;
   }}

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

   /* mobile navigation
   -------------------------------------------------------------------- */
   #nav-wrap ul#nav { 
	   width: auto; 
	   float: none; 
	   }
	}	   
	   /* mobile wide/smaller tablets
---------------------------------------------------------------------- */

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

   /* mobile navigation
   -------------------------------------------------------------------- */
   #nav-wrap {
      font: 12px 'candelabook', sans-serif;
      background: transparent !important;
      letter-spacing: 1.5px;  
      width: auto;
      position: fixed;
      top: 0;
      right: 0;
   }
   #nav-wrap > a {
	   width: 48px;
		height: 48px;
		text-align: left;
		background-color:#ea173a;
		position: relative;
      border: none;
      float: right;
      font: 0/0;
      text-shadow: none;
      color: transparent;
      position: relative;
      top: 0px;
      right: 30px;
   }

	#nav-wrap > a:before,
   #nav-wrap > a:after {
	   position: absolute;
		border: 2px solid #fff;
		top: 35%;
		left: 25%;
		right: 25%;
		content: '';
	}
   #nav-wrap > a:after { top: 60%; }

   /* toggle buttons */
	#nav-wrap:not( :target ) > a:first-of-type,
	#nav-wrap:target > a:last-of-type  {
	   display: block;
	}

   /* hide menu panel */
   #nav-wrap ul#nav {
      height: auto;
		display: none;
      clear: both;
      width: auto; 
      float: right;     
      position: relative;
      top: 12px;
      right: 0;
   }

   /* display menu panels */
	#nav-wrap:target > ul#nav	{
	  display: block;
      padding: 30px 20px 48px 20px;
      background: #1f2024;
      margin: 0 30px;
      clear:both;
   }

   ul#nav li {
      display: block;
      height: auto;      
      margin: 0 auto; 
      padding: 0 4%;           
      text-align: left;
      border-bottom: 1px solid #2D2E34;
      border-bottom-style: dotted; 
   }
  
   ul#nav li a {  
      display: block;    
      margin: 0;
      padding: 0;      
      margin: 12px 0; 
      line-height: 16px; /* reset line-height from 48px */
      border: none;
   }