/* GLOBAL */
 @font-face {
    font-family:'Pokegravy';
    src: url("pokegravy.ttf");
}

 body{
 	font-family:'Pokegravy', Helvetica, sans-serif;
 	height: 100%;
 	padding: 0px;
 	margin: 0px;
 	text-align: center;
 }



/* TOP NAVIGATION BAR
/////////////////////////////////////*/
div#nav{
	width: 100%;
	height: 120px;
	margin-top: 20px;	
}

ul#topnav{
	width: 1500px;
	margin: auto auto;
	height: 120px;
	padding: 0px;
}

ul#topnav li {
	display:inline-block;
	padding: 10px;
}

ul#topnav li a{
	text-decoration: none;	  
}

ul#topnav li#logo{
	padding-right: 20px;
}

ul#topnav li#topnav-about {

}



.clearfix:before, .clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
.clearfix {  
    *zoom: 1;  
}  

/* DEMO REEL
/////////////////////////////////////*/
div#demo{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
    min-width: 1340px;
}
 
div#social{
    display: inline-block;
    position: relative;
    top: -70px;
}
 
ul#social_ul{
    list-style-type: none;
    vertical-align: middle;
    text-align: left;
}
 
ul#social_ul li#social_fb {
     
     
}
 
ul#social_ul li#arrow_fb {
    position: absolute;
    margin-left: -30px;
    margin-top: -29px;
}
 
ul#social_ul li#follow_fb {
    font-size: 200%;
    margin-bottom: 40px;
}
 
ul#social_ul li#arrow_youtube {
    position: absolute;
    margin-left: -30px;
    margin-top: -29px;
    transform: scaleY(-1);
}
 
ul#social_ul li#subscribe_youtube {
    font-size: 200%;
}
 
div#reel{
    display: inline-block;
    margin-left: 35px;
}
 
.video-player {
    vertical-align: middle;
    background:url('../images/outline_demoreel.png') no-repeat;
    background-size: 100% 100%;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 3px;
    margin-bottom: 15px;
    display: inline-block;
}

.instagram-media, .instagram-media-registered {
    /* center iframe */
    margin: auto !important;
}
 
div#salsberg{
    display: inline-block;
}
 
ul#salsberg_ul{
    list-style-type: none;
    vertical-align: middle;
}
 
ul#salsberg_ul li#salsberg_pic{
    margin-bottom: 20px;
}
 
ul#salsberg_ul li#salsberg_name {
    margin-bottom: 40px;
    font-size: 200%;
}
 
ul#salsberg_ul li#salsberg_twitter {
    margin-bottom: 20px;
}
ul#salsberg_ul li#salsberg_blog {
    margin-bottom: 20px;
}
 
 
/* ANIMATION CONTENT
/////////////////////////////////////*/
div#content_more{
}
 
ul#content_ul{
    width: 100%;
    max-width: 1350px;
    margin-right: auto;
    margin-left: auto;
}
 
div#more{
    width: 100%;
    margin-right: auto;
    margin-top: -70px;
    margin-left: 550px;
}
 
/* WORK WITH US 
/////////////////////////////////////*/
div#work{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
}
 
div#work_div{
    display: inline-block;
}
 
ul#work_ul{
    text-align: left;
}
 
ul#work_ul li {
    display:block;
    margin-right: 20px;
}
 
div#work_banner{
    display: inline-block;
}
 
ul#banner{
    list-style-type: none;
}
 
#work_words{
    font-family:'Pokegravy', Helvetica, sans-serif;
    font-size: 200%;
 
}

#services {
	display: flex;
}

#services #banner img {
	width: 100%;
}
 
/* CLIENT BAR
/////////////////////////////////////*/
div#clients{
    background-color: #79B38B;
    height: 120px;
    padding-top: 10px;
}
 
ul#client_list {
    width: 100%;
    display: block;
    margin-right: auto;
    margin-left: auto;
    list-style:none;
}
 
ul#client_list li {
    display:flex;
}
 
#client_words{
    font-size: 200%;
    color: #FFFFFF;
	background-color: ##f3f3f3;
    margin-right: 5px;
    position: relative;
    top: -32px;
    left: -5px;
}
 
#client_banner{
    padding: 30px 0 0 0;
    list-style-type: none;
}

 
div#learn_more{
    width: 100%;
    margin-right: auto;
    margin-left: 550px;
    margin-top: -37px;
}
 
div#clients_more {
    width: 70%;
    margin-right: auto;
    margin-left: auto;
}
 
#more_words{
    font-family:'Pokegravy', Helvetica, sans-serif;
    font-size: 180%;
    list-style-type: none;
}
#more_pic1{
    margin-left: 50px;
    float:left;
    margin-right: 20px;
}
#more_pic2{
    margin-left: 20px;
    float:right;
    clear: left;
    margin-bottom: 20px;
}
 
 
ul#clients_words p{
    color: #8A8A8A;
    font-family:Cambria, Times, serif;
    text-align: left;
    font-size: 20px;
    font-style: italic;
    clear: both;
}
 
ul#clients_words em{
    color: #000000;
    font-family:Verdana, Helvetica, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-style: bold;
    float:right;
}
 
ul#b_clients{
    margin-right: auto;
    margin-left: auto;
}
 
ul#b_clients li{    
    display:inline;
}
 
div#contact{
    background:url('../images/outline_contact.png') no-repeat;
    background-position:center;
    background-size: 550px 275px;
    height: 275px;
    margin-bottom: 50px;
    margin-top: 70px;
}
 
ul#contact_pic{
    padding: 30px 0 0 0;
    list-style-type: none;
}
#contact_words_pg{
    font-family:'Pokegravy', Helvetica, sans-serif;
    font-size: 350%;
}
#contact_words{
    font-family:'Pokegravy', Helvetica, sans-serif;
    font-size: 200%;
}
 



/* FOOTER
/////////////////////////////////////*/
#footer {
	font-family:'Pokegravy', Helvetica, sans-serif;
	font-size: 150%;
	color: #AFAFAF;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	bottom:0;
	height:100px; 
	clear: both;
}
 


 /* COMICS PAGE
/////////////////////////////////////*/
 #comic,.comic-img {
	max-width: 100%;
 }

 div#comics_back{
 	width: 80%;
	margin-right: auto;
	margin-left: auto;
 }

 ul#back_pic{
 	list-style-type: none;
 }

 ul#back_pic li{
  	display: inline;
 }
 ul#back_pic li#back_button{
  	float: left;
 }

div#comics_content{
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	background-color: #79ADC5;
	padding: 25px 0;
}
ul#comics{
	list-style-type: none;
	padding: 0;
}

ul#comics_topnav li{
	list-style-type: none;
	display: inline;
	margin-right: 10px;
}

#comics_topnav {
	padding: 0;
}

.comics_topselect {
	padding: 0;
}
ul.comics_topselect li{
	list-style-type: none;
	display: inline;
	margin-left: 5px;
}

#comics_words_title{
	font-family:'Pokegravy', Helvetica, sans-serif;
	margin-top: 20px;
	font-size: 500%;
}

#comics_words_date{
	font-family:'Pokegravy', Helvetica, sans-serif;
	margin-top: 20px;
	font-size: 200%;
	color: #5985a4;
}

#comics_words{
	font-family:'PokeGravy', Helvetica, sans-serif;
	margin-top: 30px;
	font-size: 30px;
        margin-bottom: 10px;
	padding-top: 10px;
        padding-right: 20px;
        padding-left: 20px;
}

 /* ANIMATION PAGE
/////////////////////////////////////*/
 div#animation_back{
 	width: 80%;
	margin-right: auto;
	margin-left: auto;
 }

 ul#back_pic_a{
 	list-style-type: none;
 }

 ul#back_pic_a li{
  	display: inline;
 }

 ul#back_pic_a li#back_button_a{
 	float: left;
 }

 div#animation_content{
	width: 80%;
	min-width: 966px;
	margin-right: auto;
	margin-left: auto;
	background-color: #ffffff;
}
#animation{
    text-align: center;
    padding: 25px 0;
}

ul#animation_topnav{
	padding: 0;
}
ul#animation_topnav li{
	list-style-type: none;
	display: inline;
	margin-right: 10px;
}

ul#animation_topselect {
	padding: 0;
}
ul#animation_topselect li{
	list-style-type: none;
	display: inline;
	margin-left: 5px;
}

#animation_words_title{
	font-family:'Pokegravy', Helvetica, sans-serif;
	margin-top: 20px;
	font-size: 60px;
}

ul#a_desc{
	list-style-type: none;
	padding: 0 50px;
	font-size: 30px;
}

.animation_words{
	font-family:'Pokegravy', Helvetica, sans-serif;
	margin-top: 30px;
	font-size: 50px;
    margin-bottom: 10px;
	padding-top: 10px;
}


#animation_recommend{
	width: 20%;
	font-family:'Pokegravy', Helvetica, sans-serif;
	margin-top: 20px;
	font-size: 40px;
	color: #FFFFFF;
}

ul#animation_rec{
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}

#animation_date {
	margin: 50px 0 80px;
	color: #5985a4;
}


 /* ANIMATION PAGE
/////////////////////////////////////*/
 div#work_nav{
 	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 50px;
 }

 ul#work_topnav{
 	list-style-type: none;
 }

ul#work_topnav li{
 	display: inline;
 }

 div#tags{
  	width: 65%;
	margin-right: auto;
	margin-left: auto;
 }

 ul#work_tags{
 	list-style-type: none;
 }

 ul#work_tags li{
  float: left;
 }

 ul#work_tags li.tag{
  margin-bottom: 14px;
 }

 ul#work_tags li.tag a{
  padding: 3px 12px;
  font-size: 22px;
  border: 1px solid #555;
  border-radius: 15px;
  margin-left: 5px;
  color: #000;
  text-decoration: none;
 }

 ul#work_tags li.tag.active a {
  background-color: #EED382;
 }

 ul#work_tags li.tag a:hover {
  background-color: #eee;
 }

 div#workpage_content{
 	background-color: #FFFFFF;
	clear: left;
 }

#content_more_c {
    background-color: #FFFFFF;
    margin-bottom: 40px;
}

ul.work {
	clear: left;
	padding: 0;
}

ul.work.flex {
	display: flex;
}
ul.work.flex li {
	flex: 1 1 auto;
}

ul.work.flex li .c {
	margin-right: 0;
}

ul.work li a{
	display: block;
	text-decoration: none;
	color: #000;
}
ul.work li {
	display:inline-block;
}
ul.work li .c{
	display:inline-block;
	margin-top: 25px;
	margin-right: 80px;
	width:220px;
	vertical-align: top;
}

ul.work li .inner-icon {
	position: absolute;
}
ul.work li .inner-icon img.inner-play {
	width: 100px;
	margin-top: 80px;
	margin-left: 60px;
	opacity: 0.3;
}
ul.work li a:hover .inner-icon img.inner-play {
	opacity: 0.7;
}
ul.work li .inner-icon img.inner-link {
	margin-top: -10px;
	margin-left: 160px;
	width: 70px;
}

.outline-thumbnail img{
	width: 210px;
	height: 210px;
}

  	

.title {
	font-size: 24px;
}



.outline-thumbnail {
	background-image: url('../images/outline_thumbnail.png');
	background-size: 100% 100%;
	padding-top: 5px;
}


.s400x160 {
	width: 200px;
	height: 80px;
}
.s600x160 {
	width: 300px;
	height: 80px;
}
.s700x160 {
	width: 350px;
	height: 80px;
}

@media (max-width: 1500px) {
	.s400x160 {
		width: 150px;
		height: 60px;
	}
	.s600x160 {
		width: 225px;
		height: 60px;
	}
	.s700x160 {
		width: 262px;
		height: 60px;
	}
	ul#topnav li {
		display:inline-block;
		padding: 5px;
	}
	ul#topnav li#logo{
		padding-right: 10px;
	}
	ul#topnav{
		width: 940px;
	}
}


div#about{
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    background-color: #ffffff;
}
div#about_body{
    background-color: #ffffff;
}

ul#b_about{
    margin-top: -10px;
    padding: 20px 0 0 0;
}
div#icons{
    background-color: #ffffff;
}

ul#b_about li{  
    display:inline;
    margin-right: 30px;
}
 
p.us{
    margin-left: 35px;
}
 
div#about p{
    font-size: 24px;
    color: #000000;
}

div#about h1{
    color: #FFFFFF;
    margin-top: 20px;
    margin-left: 35px;
    font-size: 60px;
}
 
div#about ul{
    list-style-type: none;
}
 
ul#about_s li{
    display:inline-flex;
    margin-right: 50px;
}
ul#about_s #s_pic1 {
  padding: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto
}
ul#about_s #s_pic2{
    float: right;
    padding-left: 10px;
}
ul#about_s li#s_p{
    display:inline;
    margin: 0px;
    border-spacing: 0px;
    padding: 0px;
}
 
ul.about_desc{
	margin-bottom: 30px;
}
ul.about_desc li{
    width: 49%;
    float: left;
    min-height: 200px;
    margin-bottom: 20px;
}
ul.about_desc li:nth-child(odd) {
	clear: left;
}

#about ul.about_desc li p{
    font-size: 16px;
}

ul.about_desc li h3, ul.about_desc li h4{
    margin: 0;
    color: #FFFFFF;
}

ul.about_desc li div{
    padding: 0 10px 0 170px;
}

ul.about_desc li img.hs{
    width: 156px;
    height: 156px;
    position: absolute;
}

ul.about_c{
    margin-bottom: 30px;
    padding-bottom: 20px;
}
ul.about_c li{
    width: 49%;
    float: left;
    padding-bottom: 20px;
}
ul.about_c li:nth-child(odd) {
    clear: left;
}

#about_contributors h1 {
	padding-top: 40px;
	clear: left;
}

#about ul.about_c li p{
    font-size: 16px;
}

ul.about_c li h3, ul.about_desc li h4{
    margin: 0;
    color: #FFFFFF;
}

ul.about_c li div{
    padding: 0 10px 0 170px;
}

ul.about_c li img.hs{
    width: 156px;
    height: 156px;
    position: absolute;
}
     
.about-alex-salsberg {
	width: 100% !important;
}
  
#body {
	overflow: hidden;
}