/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
	  .container {
	    width: 80%;
	    padding: 0; }
	  .blockquote {
		font-size: 1.0rem;
		font-style: italic;
		font-weight: 500;
		line-height: 3.6rem;
		padding: 3rem 0;
		margin: 0rem;}
	.photo-1 {
	  background: url(/charles-adler/content/home/cadler-1-mobile.jpg) no-repeat center center; 
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;
	  height: 678px;}
}


/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 60%; }

  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 2.0em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.8;
  font-weight: 100;
  font-family: "Trispace", sans-serif;
  color: #222; }


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
    
h1, h2 {
  margin-top: 6rem;
  margin-bottom: 4rem;
  font-weight: 400;
  text-transform: uppercase; }
  
h3, h4, h5, h6 {
  margin-top: 3rem;
  margin-bottom: .8rem;
  font-weight: 800; 
}
h1 { font-size: 3.6rem; line-height: 1.0;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 2.0rem; line-height: 1.3;  letter-spacing: 0rem; color: #222; }
h4 { font-size: 2.2rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 2.6rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 2.6rem; color: #222;}
  h4 { font-size: 2.4rem; }
  h5 { font-size: 2.0rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }

blockquote {
	font-size: 2.0rem;
	font-style: italic;
	font-weight: 500;
	line-height: 3.6rem;
	padding: 3rem 0;
}


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #333;
  border-bottom: 2px solid #333;
  padding-bottom: 4px;
  text-decoration: none;
}
a:hover {
  color: #333;
  border-bottom: 2px solid #333;
  text-decoration: none;
  background-color: #ffd651;
}

/* Mark & Logo
–––––––––––––––––––––––––––––––––––––––––––––––––– */	
.logo {
  position: fixed;
  vertical-align: baseline;
  padding: 1.2em 0;
  z-index: 2;
  height: 1em;
  text-decoration: none;
  border-bottom: none;
}

.logo_mast {
  text-decoration: none;
  border-bottom: none;
  background-color: transparent;
}

.name {
	font-weight: 800;
	
}

/* Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––– */	
.navigation {
	z-index: 2;
	padding: 1em 0 0 0;
	background: #fff;
	box-shadow: 0px 0px 0px #f2f2f2;
}

.menu {
  text-align: left;
  font-weight: 500;
}

.menu-item {
  display: inline-block;
}

.menu-item:not(:last-child)::after {
  content: " ";
  display: inline-block;
  padding: 0 .2em;
}

.menu-item a {
  font-size: .6em;
  border-bottom: 0;
  text-decoration: none;
  color: #222;
  padding-bottom: 1em;
}

.menu-item a:hover {
  background-color: transparent;
  padding-bottom: 1em;
  border-bottom: 2px solid #ffd651;
}

.menu-item.is-active a {
  padding-bottom: 1em;
  border-bottom: 2px solid #ffd651;
}

.title a {
  text-decoration: none;
  border-bottom: 0;
	
}

@media all and (min-width: 56em) {
  .menu {
    text-align: left;
  }
}



/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 20px;
  color: #333;
  text-align: center;
  font-size: 1.1rem;
  font-family: "Trispace", sans-serif;
  font-weight: 500;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: #ffd651;
  border-radius: 5px;
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;
  background-color: #ffd651;
  outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #333;
  background-color: #ffd651; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #333;
  background-color: #f2c120; }



/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: disc inside; }
ol {
  list-style: disc inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
	list-style: none;
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }

.talks ul {
	list-style: none;
	font-size: 1.6rem;
	font-weight: 500;
}

.talks li {
	padding: .4rem 0 ;
	line-height: 2.8rem;
}

.article-list {
	margin-bottom: 12rem;
}

.article-date {
  font-weight: 500;
  font-family: "Trispace", sans-serif;
  color: #666; 
  font-size: 1.6rem;
  text-transform: uppercase;
}



/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }

/* Media
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.coverimage {
	margin: 0;
	padding: 0;
}

img {
	padding: 0;
	margin: 0;
}

/* Full Width Images
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.full-width {
	width: 100vw;
	position: relative;
	margin-left: -60vw;
	left: 60%;
}

.full-width img {
  width: 110%;
}


@media (min-width: 400px) {
	.profile img {
		width: 20%;
		padding-top: 20rem;
	}
}


.profile img {
	width: 40%;
	padding-top: 4rem;
}


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }

/* Sections & Colors
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.section {
	padding: 5em 0em 10em 0;
}

.header {
}

.white {
	background-color: #fff;
}

.light-gray {
	background-color: #f6f6f6;
}

.mid-gray {
	background-color: #eee;
}

.dark-gray {
	background-color: #222;
	color: #ddd;	
}

.dark-gray a {
	color:#ccc;
}
.light-yellow {
	background-color: rgba(242, 223, 160, 1);
}

.yellow {
	background-color: #ffd561;
	color: #333;	
}

.rainbow-1 {
  background: #1aed95;
  /* Old browsers */
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #e2f5b1 0%, #f5d391 57%, #fa8672 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-linear-gradient(315deg, #e2f5b1 0%, #f5d391 57%, #fa8672 100%);
  background: linear-gradient(135deg, #e2f5b1 0%, #f5d391 57%, #fa8672 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2f5b1', endColorstr='#fa8672',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
  vertical-align: middle;
  min-height: 200px;
  position: relative;
  color: #222;
 }

.rainbow-2 {
  background: #ee1bc4;
  /* Old browsers */
  /* FF3.6-15 */
  background: -webkit-linear-gradient(90deg, #dcee1b 27%, #d70e80 0%, #e4631d 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-linear-gradient(0deg, #dcee1b 0%, #d70e80 27%, #e4631d 100%);
  background: linear-gradient(60deg, #dcee1b 0%, #d70e80 27%, #e4631d 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcee1b', endColorstr='#72c6ed',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
  vertical-align: middle;
  min-height: 200px;
  position: relative;
  color: #eee;
}
	
.rainbow-3 {
  background: #ffd655;
  /* Old browsers */
  /* FF3.6-15 */
  background: -webkit-linear-gradient(90deg, #ffd655 27%, #dcf3a0 0%, #55ff93 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-linear-gradient(90deg, #ffd65 0%, #dcf3a0 27%, #55ff93 100%);
  background: linear-gradient(256deg, #ffd655 0%, #dcf3a0 27%, #55ff93 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd655', endColorstr='#55ff93',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
  vertical-align: middle;
  min-height: 200px;
  position: relative;
}

.green {
  background: #9ff0ca;
  /* Old browsers */
  /* FF3.6-15 */
  background: -webkit-linear-gradient(90deg, #55d021 27%, #5ed95e 0%, #0bee84 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-linear-gradient(90deg, #55d021 0%, #5ed95e 27%, #0bee84 100%);
  background: linear-gradient(256deg, #55d021 0%, #5ed95e 27%, #0bee84 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55d021', endColorstr='#0bee84',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
  vertical-align: middle;
  min-height: 200px;
  position: relative;

}

.work ul {
 list-style: none;
 color: #ffd65;
}

.work li {
 list-style: circle;
 color: #ffd65;
 padding: 2rem 0rem;
 border-bottom: 0px solid #ddd;
}

.showcase ul {
 color: #ffd65;
}

.showcase li {
 list-style: none;
 color: #ffd65;
 font-size: 1.4rem;
 padding: 1.8rem 0rem;
 border-bottom: 1px solid #ddd;
}

.projects ul {
 color: #ffd65;
}

.projects li {
 list-style: none;
 color: #ffd65;
 padding: 2rem 0rem;
 border-bottom: 1px solid #ddd;
}

.cta {
  text-align: center;
  border-radius: 2rem;
  padding: 1rem 4rem;
}




.sidebar {
	font-size: 2rem;
} 
.video {
	z-index: 1;
	overflow: hidden;
}
.title {
	position: relative;
	z-index: 10;
}

.footer {
	font-size: 1.4rem;
	font-weight: 500;
}

.footer ul {
 list-style: none;
 color: #ffd65;
}

.footer a {
	border-bottom: 0px;
	border-bottom: 1px solid #ffd651;
	padding-bottom: 2px;
}

.footer a:hover {
  border-bottom: 2px solid #ffd651;
}

.short-n-phat {
	border: 4px solid #222;
	width: 6px;
	float: left;
	border-radius: 5px;
}

.photo-1 {
  background: url(http://charles-adler.com/content/1-projects/1-speaking/14074631804_9ebf984d71_o.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 400px;	
}



/* Page Art Direction
–––––––––––––––––––––––––––––––––––––––––––––––––– */	

.intro h2 {
	font-size: 4rem;
	font-style: italic;
	font-weight: 200;
}







/* Pagination 
–––––––––––––––––––––––––––––––––––––––––––––––––– */	

.pagination {
	padding: 4rem 1rem 4rem 0rem;
}
	
.pagination-item {
	font-size: 2rem;
	margin: 0rem 2rem 0rem 0rem;
}

.left {
	
}

.right {
	
}

.is-inactive {
	color: #ddd;
}

/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px dashed #222;
  width: 40px; 
}


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}


@font-face {
  font-family: 'Trispace';
  src: url('Trispace/Trispace-Regular.woff2') format("woff2");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Trispace';
  src: url('Trispace/Trispace-Regular.woff2') format("woff2");
  font-weight: normal;
  font-style: italic; }

@font-face {
  font-family: 'Trispace';
  src: url('Trispace/Trispace-Regular.woff2') format("woff2");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'Trispace';
  src: url('Trispace/Trispace-Regular.woff2') format("woff2");
  font-weight: bold;
  font-style: italic; }

@font-face {
  font-family: 'Trispace';
  src: url('Trispace/Trispace-Regular.woff2') format("woff2");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: 'Trispace';
  src: url('Trispace/Trispace-Regular.woff2') format("woff2");
  font-weight: 500;
  font-style: italic; }