/* 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%; 
  max-width: 1230px;}
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.75;
  font-family: "Raleway", Helvetica, "HelveticaNeue", "Helvetica Neue", Arial, sans-serif;
  background: white;
  margin-top: 6.5vw;
  margin-left: 10vw;
  margin-right: 10vw;
  margin-bottom: 20vw;
}

/* For devices larger than 550px */
@media (min-width: 550px) {

  .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%;            
  	vertical-align: top;}
  .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%; }


table {
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}
td.img{
	width: 50em;
	padding-right: 5px;
	padding-left: 5px;
}



/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; 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: -.04rem; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.6rem; }
}
#block1, #block2, #block3 {float: left;
	text-align: left;
	line-height: 1.3;
	font-variant: small-caps;
	font-size: small;
}
#block1 {width: 26%; padding-right:  10px;
	position: relative;
}
#block2 {width: 28%; padding-right:  10px; }
#block3 {width: 26%; padding-right:  10px; } 
}

li{list-style-type: none;
	font-variant: small-caps;
	 line-height: 1.3em;
	text-align: left;
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

p {
  line-height: 24px;
  margin: 24px 0;
}

b, strong {
  font-weight: bold;
}

p.indent{
	text-indent: 5%;
}
li{
	list-style-type: none;
	font-variant: small-caps;
}

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
  
  
  /* Lee's 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#clientlist{
	position: relative;
  	width: 100%;
  	max-width: 960px;
	vertical-align: top;
	margin: 2em  0 0;
	border: 3px solid #7980ff;
	display: block;
}

header{
	width: 100%;
	text-align: left;
	float: left;
	border-bottom: 1px solid #c0c0c0;
	margin-bottom: 17em;
}

header. img{	
	width: 30vw;
	height: 20vw;
	padding-bottom: 1vw;
}

.burgee {
	width: 20vw;
}

.column {
  float: left;
  width: 29%;
  padding: 0px;
  list-style-type: none;
  font-variant: small-caps;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.container {
  position: static;
  width: 100%;
  box-sizing: border-box; 

  }


.row{
	vertical-align: top;
	width: 100%;
  	box-sizing: border-box; 
  	margin-bottom: 2em}

.leftcolumn,img{
	width: 100%;
}

.leftcolumn{  float: left;
  width: 25%;
  padding: 2em 0px 0px;
  box-sizing: border-box;
  position: static;
}

.rightcolumn{
	float: left;
	width: 70%;
	padding: 0px;
	vertical-align: top;
	margin-left: 2%;
	margin-top: 0;
}


.core.img{
	width: 300px;
	padding-right: 5px;
	padding-left: 5px;
}

.core{position: relative;
	img-width: 25%;
	margin-left: 10vw;
	margin-right: auto;
	width: 90%;
	border-top: 1px dotted #666;
	display: table;
	margin-bottom: 10vw;
}

.lead{	
       margin-top: 2em;
       margin-bottom: 1em;
       float: left;
       width: 96.15%;
	padding-left: 0px;
	padding-right: 20px;
	text-indent: 3em;
}
em.lead {
	text-align: center;
	margin-top: 1em;
	padding: 0px;
}

.container{
	margin-top: 1em;
	margin-bottom: 1em;
	max-width: 1280px
}
.copy{
	width: 80%;
	float: left;
}

.text{
	float: left;
	top: 400px;
	border-color: #ff7d78;
	border-width: 2px;
}



#foot{position: relative;
	text-align: left;
	display: block;
	padding-top: 5px;
	border-top-color: 1px solid #c0c0c0;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
	border-top: 2px solid gray;
	z-index: 12;
}

.videoclip{
	text-align: center;
	width: 500px;
	height: 450px;
	margin-right: auto;
	display: block;
	margin-left: 25%;
	padding-bottom: 50px;
	padding-top: 15px;
}

  
/* slideshow fade
–––––––––––––––––––––––––––––––––––––––––––––––––– */
  
  @keyframes fade {
  0%   { opacity: 0; }
  11.11%   { opacity: 1; }
  33.33%  { opacity: 1; }
  44.44%  { opacity: 0; }
  100% { opacity: 0; }
}

.fadein { position:relative;
 	
	height: 20%;width: 40%; outline: 0px solid black;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
	float: left;
	bottom: 15em;
	background-color: #ffd478;
}
.fadein img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 24s; animation-iteration-count: infinite;
}
.fadein img:nth-child(1) { animation-delay: 0s;  }
.fadein img:nth-child(2) { animation-delay: 3s;  }
.fadein img:nth-child(3) { animation-delay: 6s;  }
.fadein img:nth-child(4) { animation-delay: 9s;  }
.fadein img:nth-child(5) { animation-delay: 12s; }
.fadein img:nth-child(6) { animation-delay: 15s; }
.fadein img:nth-child(7) { animation-delay: 18s; }

/*

.fadein img:nth-child(8) { animation-delay: 21s; }
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.box {
       float: left;
       position: relative;
       width: 20%;
       padding-bottom: 5%;
		text-align: center;

}
    .boxInner {
       position: absolute;
       left: 10px;
       right: 10px;
       top: 10px;
       bottom: 10px;       
       overflow: visible;
	
}
    .boxInner img {
 	width: 90%;
    }
    .boxInner .titleBox {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       margin-bottom: -60px;
       background: #000;
       background: rgba(0, 0, 0, 0.5);
       color: #FFF;
       padding: 10px;
       text-align: center;
       -webkit-transition: all 0.3s ease-out;
       -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
       transition: all 0.3s ease-out;
    }
    
a{
	text-decoration: none;
}

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

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



    body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
       margin-bottom: 0;
    }
    @media only screen and (max-width : 480px) {
       /* Smartphone view: 1 tile */
       .box {
          width: 100%;
          padding-bottom: 100%;
       }
       	    }
    @media only screen and (max-width : 650px) and (min-width : 481px) {
       /* Tablet view: 2 tiles */
       .box {
          width: 50%;
          padding-bottom: 50%;
       }
    }
    @media only screen and (max-width : 1050px) and (min-width : 651px) {
       /* Small desktop / ipad view: 3 tiles */
       .box {
          width: 33.3%;
          padding-bottom: 33.3%;
       }
    }
    @media only screen and (max-width : 1260px) and (min-width : 1051px) {
       /* Medium desktop: 4 tiles */
       .box {
          width: 25%;
          padding-bottom: 25%;
       }
    }