body {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
}
body input, body textarea, body .btn, body button {
  font-family: 'Lato', sans-serif;
}

blockquote p, .section-header p {
  font-weight: 400; 
}

.light {
  font-weight: 300 !important;
}

.hairline {
  font-weight: 700 !important;
}
.hairline strong {
  font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Lato', sans-serif;
}

.lead {
  font-weight: 300;
}
.lead strong {
  font-weight: 600;
}

#masthead .brand {
  font-weight: 300;
}

ul, li { -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}
  
li a.picture-link, li a.web-link { position:relative; width:392px; height:294px; display:block; z-index:10;}
li a.picture-link span, li a.web-link span { position:absolute; top:0px; left:0px; display:block; width:392px; height:294px; background:url(../images/banner-11.png) no-repeat -1400px 0px;}
li a.picture-link:hover span { background-position:-1000px 0px;}

li a.web-link span { background-position:-1400px -235px;}
li a.web-link:hover span { background-position:-1000px -235px;}

/*ul { margin-top:16px; padding:0px; position:relative; overflow:auto;}*/

ul.portfolio li { width:312px; color: #000; float:left; margin-right:24px;  margin-bottom:24px;}

.last { margin-right:0px !important;}


.graphic-shadow {
	-webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.6);
	-moz-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.6);
	box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.6);
	}

div.sample-words {  
background:#f5ebd0; margin: -8px 8px 8px 8px; width:264px; display:block; overflow: hidden; padding:16px 16px 0; z-index:1; 
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
-webkit-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px; 
}

.small-inner-shad {-webkit-box-shadow: inset 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 1px 1px 4px 0px rgba(0, 0, 0, 0.2); }

h3.project-title { margin:0; }

a.play { background: rgba(243,107,34,0.2); font-weight:bold; color:#be4200; margin-top:16px; margin-left:-16px; display:block; height:30px; width:280px; padding:0 0 0 16px; line-height:30px;
transition: all 0.2s;
-moz-transition: all 0.2s; /* Firefox 4 */
-webkit-transition: all 0.2s; /* Safari and Chrome */
-o-transition: all 0.2s; /* Opera */
}
a.play:hover { background:rgba(243,107,34,0.6) url(../images/play-arrow-03.png) no-repeat 16px 0px; color:#892d00; padding-left:32px;}

.clearit {clear:both;}
#ajax-loader{position: absolute; top: 220px; left: 475px;display:none}
#spin { /* width:850px; margin: 0 67px; */ position:relative; /* margin-top:-64px; margin-bottom:64px;*/}
#spin-holder { width:850px; height:850px; background-color:#dddcd7; position: static;  overflow:hidden;
 /*margin: 67px;*/
  margin: 0 auto;
-webkit-border-radius: 425px;
-moz-border-radius: 425px;
border-radius: 425px;
}

#spin-centre {width:512px; height:512px; background-color:#BE4200; position: absolute; margin-top:169px; margin-left:169px; margin-bottom:32px; position:relative;
-webkit-border-radius: 256px;
-moz-border-radius: 256px;
border-radius: 256px;pointer-events: none}

#spin-big-start { width:392px; height:294px; position:absolute; top:108px; left:60px;background-color: #000;}
#spin-big { width:392px; height:294px; position:absolute; top:108px; left:60px;
background-image: url(../images/Slides-02-Featured.jpg); background-color: #000; background-repeat: no-repeat;
background-position: 0px 0px;
cursor:pointer;pointer-events:auto !important;
}
.bg-web{background-image: url(../images/Slides-01-Web.jpg) !important}
.bg-presentations{background-image: url(../images/Slides-01-Presentations.jpg) !important}
.bg-motion{background-image: url(../images/Slides-01-Motion.jpg) !important}
.linkDiv{ width:312px;position:absolute; top:72px; left:100px; text-align:center;pointer-events:auto !important}
.linkDiv a{color:#700000}
.textDiv{ width:312px;position:absolute; top:396px; left:100px; text-align:center; color: #fff; line-height: 1.2; }


.linkDiv h2 { margin-top:-12px; font-weight:400; color: #ebdcb5;}


.textSpan {position: absolute; text-align: center; width:328px; height:32px; background-color: #BE4200; z-index:1; margin-left:-8px; font-size: 24px; font-weight: 300;}

#videoFrame{
	 width:392px;
	 height:294px;
	 position:absolute;
	 top:108px;
	 left:60px;
    display: none;
    background-color: #000;
/*    background-image: url(../images/play-06.png);*/
	 pointer-events:auto !important;
}
.spinners
{	position:absolute;
	left: 50%;
	top: 325px; /*(850 / 2) - (width / 2)*/
	width: 140px !important; /*420 - padding*/
	height:153px !important; /*201 - padding /odd number to make it able to center with 105 px thumb*/
	/*padding: 48px 10px 0 270px;*/
	padding: 24px 10px 0 100px;
	margin-top:24px;
	display:inline-block;
/*	background-color: rgba(204,153,51,0.5);*/
	transform-origin:0% 50%;
	-ms-transform-origin:0% 50%; 
	-webkit-transform-origin:0% 50%;
	-moz-transform-origin:0% 50%;
	-o-transform-origin:0% 50%;
}

.thumbs {
	width:140px;
	height:105px;
	display:block;
	background-color: #000000;
/*	margin: 48px 10px 0px 270px;*/
/*    Also change #spin-big-start*/
	background-image:url(../images/Slides-02-Featured.jpg);
	background-repeat:no-repeat;
	background-position: 0px 0px;
	background-size: 140px 1260px; 
	-webkit-box-shadow:  0px 0px 12px 0px rgba(0, 0, 0, 0.6);
    box-shadow:  0px 0px 12px 0px rgba(0, 0, 0, 0.6);
}
.bg-web-thumbs .thumbs{background-image: url(../images/Slides-01-Web.jpg) !important}
.bg-presentations-thumbs .thumbs{background-image: url(../images/Slides-01-Presentations.jpg) !important}
.bg-motion-thumbs .thumbs{background-image: url(../images/Slides-01-Motion.jpg) !important}
.thumbs-play {
	width:140px;
	height:105px;
	display:block;
	background-image: url(../images/play-06-thumbs.png);
	background-repeat:no-repeat;
	background-position: 0px 0px;
	cursor:pointer;
}
.thumbs-play-hover {
	background-position: -140px 0px;
}
.thumbs-play-current{
	background-position: -140px 0px;
}
	
#rot-01 .thumbs { background-position:0px 0px;}
#rot-02 .thumbs { background-position:0px -105px;}
#rot-03 .thumbs { background-position:0px -210px;}
#rot-04 .thumbs { background-position:0px -315px;}
#rot-05 .thumbs { background-position:0px -420px;}
#rot-06 .thumbs { background-position:0px -525px;}
#rot-07 .thumbs { background-position:0px -630px;}
#rot-08 .thumbs { background-position:0px -735px;}
#rot-09 .thumbs { background-position:0px -840px;}
#rot-10 .thumbs { background-position:0px -945px;}
#rot-11 .thumbs { background-position:0px -1050px;}
#rot-12 .thumbs { background-position:0px -1155px;}

.inner-shadow {
-webkit-box-shadow: inset 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 10px 0px rgba(0, 0, 0, 0.2); }

.in-out-shad {
-webkit-box-shadow: 0px 0px 32px 8px rgba(255, 255, 255, 1), inset 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 32px 8px rgba(255, 255, 255, 1), inset 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 32px 8px rgba(255, 255, 255, 1), inset 2px 2px 10px 0px rgba(0, 0, 0, 0.2);;
}


#spin-line { width:184px; height:40px; position: static; margin-top:405px; float:right;
background: #dddcd7; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RkZGNkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEyJSIgc3RvcC1jb2xvcj0iI2NjY2JjNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iI2U4ZTdlMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjU0JSIgc3RvcC1jb2xvcj0iI2U4ZTdlMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg2JSIgc3RvcC1jb2xvcj0iIzliOWE5OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjkxJSIgc3RvcC1jb2xvcj0iIzliOWE5OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkZGRjZDciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #dddcd7 0%, #cccbc7 12%, #e8e7e2 33%, #e8e7e2 54%, #9b9a98 86%, #9b9a98 91%, #dddcd7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddcd7), color-stop(12%,#cccbc7), color-stop(33%,#e8e7e2), color-stop(54%,#e8e7e2), color-stop(86%,#9b9a98), color-stop(91%,#9b9a98), color-stop(100%,#dddcd7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #dddcd7 0%,#cccbc7 12%,#e8e7e2 33%,#e8e7e2 54%,#9b9a98 86%,#9b9a98 91%,#dddcd7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #dddcd7 0%,#cccbc7 12%,#e8e7e2 33%,#e8e7e2 54%,#9b9a98 86%,#9b9a98 91%,#dddcd7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #dddcd7 0%,#cccbc7 12%,#e8e7e2 33%,#e8e7e2 54%,#9b9a98 86%,#9b9a98 91%,#dddcd7 100%); /* IE10+ */
background: linear-gradient(to bottom,  #dddcd7 0%,#cccbc7 12%,#e8e7e2 33%,#e8e7e2 54%,#9b9a98 86%,#9b9a98 91%,#dddcd7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddcd7', endColorstr='#dddcd7',GradientType=0 ); /* IE6-8 */

}

.subtle-shad {
		-webkit-box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
	background: #ecdebb; /* Old browsers */

	}

#details { overflow:auto; margin-bottom:800px;}	
.features { width: 312px; height:384px; margin-right:24px; background-color:#f5ebd0; float:left; display:block; overflow:hidden;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}


.title-shad {margin-top:0px; display:block;}


#pres-interactive { background-image:url(../images/Interactive-06.jpg); background-repeat:no-repeat; background-position:bottom left;}

#rot-01 {transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
#rot-02 {transform: rotate(30deg); -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); -o-transform: rotate(30deg); -moz-transform: rotate(30deg);}
#rot-03 {transform: rotate(60deg); -ms-transform: rotate(60deg); -webkit-transform: rotate(60deg); -o-transform: rotate(60deg); -moz-transform: rotate(60deg);}
#rot-04 {transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -moz-transform: rotate(90deg);}
#rot-05 {transform: rotate(120deg); -ms-transform: rotate(120deg); -webkit-transform: rotate(120deg); -o-transform: rotate(120deg); -moz-transform: rotate(120deg);}
#rot-06 {transform: rotate(150deg); -ms-transform: rotate(150deg); -webkit-transform: rotate(150deg); -o-transform: rotate(150deg); -moz-transform: rotate(150deg);}
#rot-07 {transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -moz-transform: rotate(180deg);}
#rot-08 {transform: rotate(210deg); -ms-transform: rotate(210deg); -webkit-transform: rotate(210deg); -o-transform: rotate(210deg); -moz-transform: rotate(210deg);}
#rot-09 {transform: rotate(240deg); -ms-transform: rotate(240deg); -webkit-transform: rotate(240deg); -o-transform: rotate(240deg); -moz-transform: rotate(240deg);}
#rot-10 {transform: rotate(270deg); -ms-transform: rotate(270deg); -webkit-transform: rotate(270deg); -o-transform: rotate(270deg); -moz-transform: rotate(270deg);}
#rot-11 {transform: rotate(300deg); -ms-transform: rotate(300deg); -webkit-transform: rotate(300deg); -o-transform: rotate(300deg); -moz-transform: rotate(300deg);}
#rot-12 {transform: rotate(330deg); -ms-transform: rotate(330deg); -webkit-transform: rotate(330deg); -o-transform: rotate(330deg); -moz-transform: rotate(330deg);}
/*
#spin-pics {width: 850px; height:850px; display: block; position:absolute; margin-top:0px;}
*/

#spin-pics {width: 850px; height:850px; display: block; position:absolute; margin-top:0px; overflow:hidden;
transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);
transform-origin:center center; -ms-transform-origin:center center; -webkit-transform-origin:center center; -o-transform-origin:center center; -moz-transform-origin:center center;
/*animation: spin-it 24s linear; -ms-animation: spin-it 24s linear;  -webkit-animation: spin-it 24s linear; -o-animation: spin-it 24s linear; -moz-animation: spin-it 24s linear;
animation-iteration-count:infinite; -ms-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite;*/
  }

li.col-md-6 { font-size: 19px;}

li.col-md-6 h3 {font-size: 26px; }


@keyframes spin-it
{
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

@-webkit-keyframes spin-it
{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}

@-o-keyframes spin-it
{
from {-o-transform: rotate(0deg);}
to {-o-transform: rotate(360deg);}
}
@-moz-keyframes spin-it
{
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}



#spin .container {
       -ms-transform: scale(1);
       -ms-transform-origin: 0 0;
       -webkit-transform: scale(1);
       -webkit-transform-origin: 0 0;
       transform: scale(1);
       transform-origin: 0 0;
}




/*
@media only screen
  and (max-width: 970px)  {
       #spin {
       -ms-transform: scale(0.82);
       -ms-transform-origin: 0 0;
       -webkit-transform: scale(0.82);
       -webkit-transform-origin: 0 0;
       transform: scale(0.82);
       transform-origin: 0 0;
}
}
  
@media only screen
  and (max-width: 736px)  {
       #spin {
       -ms-transform: scale(0.70);
       -ms-transform-origin: 0 0;
       -webkit-transform: scale(0.70);
       -webkit-transform-origin: 0 0;
       transform: scale(0.73);
       transform-origin: 0 0;

}
}

@media only screen
  and (max-width: 667px)  {
       #spin {
       -ms-transform: scale(0.62);
       -ms-transform-origin: 0 0;
       -webkit-transform: scale(0.62);
       -webkit-transform-origin: 0 0;
       transform: scale(0.62);
       transform-origin: 0 0;

}
}
      
@media only screen
  and (max-width: 568px)  {
       #spin {
       -ms-transform: scale(0.46);
       -ms-transform-origin: 0 0;
       -webkit-transform: scale(0.46);
       -webkit-transform-origin: 0 0;
       transform: scale(0.46);
       transform-origin: 0 0;

}
}
@media only screen
  and (max-width: 420px)  {
       #spin {
       -ms-transform: scale(0.36);
       -ms-transform-origin: 0 0;
       -webkit-transform: scale(0.36);
       -webkit-transform-origin: 0 0;
       transform: scale(0.36);
       transform-origin: 0 0;

}
}
*/
            
    


/* ----------- iPhone 4 and 4S ----------- */

/*
 Portrait and Landscape 
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
            #spin {
       zoom: 0.36;
        -moz-transform: scale(0.36);

}
      }
*/

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
/*
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
      #spin {
       zoom: 0.36;
        -moz-transform: scale(0.36);
}
      }
*/

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
/*
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
            #spin {
       zoom: 0.42;
        -moz-transform: scale(0.42);
}
}
*/
      
/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
/*
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) {
       #spin {
       zoom: 0.47;
        -moz-transform: scale(0.47);
      }
}      
*/