<!DOCTYPE html>
<html  ng-app="vpModule" ng-controller="VPController">
<head>
   <meta charset="utf-8"/>
   <meta name="viewport" content="width=1200">
   <meta name="msvalidate.01" content="AF86D6C94D0294C6DCFF4C02777B9787" />
   
   <link rel="stylesheet" href="/st/css/main.css">
   <link rel="stylesheet" href="/st/css/common.css">
   
   <link rel="stylesheet" href="https://vjs.zencdn.net/4.5/video-js.css">
   
   <script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <script  src="/st/js/o/easing.js"></script>
   
   <link rel="apple-touch-icon" sizes="57x57" href="/st/fav/apple-touch-icon-57x57.png">
   <link rel="apple-touch-icon" sizes="114x114" href="/st/fav/apple-touch-icon-114x114.png">
   <link rel="apple-touch-icon" sizes="72x72" href="/st/fav/apple-touch-icon-72x72.png">
   <link rel="apple-touch-icon" sizes="144x144" href="/st/fav/apple-touch-icon-144x144.png">
   <link rel="apple-touch-icon" sizes="60x60" href="/st/fav/apple-touch-icon-60x60.png">
   <link rel="apple-touch-icon" sizes="120x120" href="/st/fav/apple-touch-icon-120x120.png">
   <link rel="apple-touch-icon" sizes="76x76" href="/st/fav/apple-touch-icon-76x76.png">
   <link rel="apple-touch-icon" sizes="152x152" href="/st/fav/apple-touch-icon-152x152.png">
   <meta name="apple-mobile-web-app-title" content="Videopixie">
   <link rel="icon" type="image/png" href="/st/fav/favicon-196x196.png" sizes="196x196">
   <link rel="icon" type="image/png" href="/st/fav/favicon-160x160.png" sizes="160x160">
   <link rel="icon" type="image/png" href="/st/fav/favicon-96x96.png" sizes="96x96">
   <link rel="icon" type="image/png" href="/st/fav/favicon-16x16.png" sizes="16x16">
   <link rel="icon" type="image/png" href="/st/fav/favicon-32x32.png" sizes="32x32">
   <meta name="msapplication-TileColor" content="#ffffff">
   <meta name="msapplication-TileImage" content="/st/fav/mstile-144x144.png">
   <meta name="application-name" content="Videopixie">
   
   
   
   <title>How we made our San Frandingo animation</title>
   <meta name="description" content="A behind-the-scenes look at how Libby used Videopixie to produce and direct her San Frandingo animation. Woof!">
   <link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
   <link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" type="text/css" href="/st/css/content.css">
   <meta property="fb:app_id" content="257876044244230" /> 
   <style>
      h1{font-size: 27px;}
   </style>
   
   <!-- Twitter Card data -->
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:site" content="@videopixie">
   <meta name="twitter:title" content="How we made our San Frandingo animation">
   <meta name="twitter:description" content="A behind the scene look at how Libby used Videopixie to produce and direct her San Frandingo animation. Woof!">
   <meta name="twitter:creator" content="@videopixie">
   <meta name="twitter:image:src" content="https://s3.amazonaws.com/our.s3.videopixie.com/landing/sanfrandingo_600_338.jpg">

   <!-- Open Graph data -->
   <meta property="og:title" content="How we made our San Frandingo animation" />
   <meta property="og:type" content="article" />
   <meta property="og:url" content="https://www.videopixie.com/how-we-made-the-san-frandingo-animation" />
   <meta property="og:image" content="https://s3.amazonaws.com/our.s3.videopixie.com/landing/sanfrandingo_600_338.jpg" />
   <meta property="og:description" content="A behind the scene look at how Libby used Videopixie to produce and direct her San Frandingo animation. Woof!" /> 
   <meta property="og:site_name" content="Videopixie" />
   <meta property="fb:admins" content="594398981" />   


      
   <link href='//fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
   <link href='//fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
   
   <script  src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-animate.min.js"></script>
   
   <script>
      window.SES={};
      SES.is_dev_enviro = false;
      SES.coupon_unavailable = false;

      var vpModule = angular.module('vpModule', ['ngAnimate',]);
       
   </script>
   
  
   
   <script src="/st/build/vjs.4.5.min.js"></script>
   
   <!--
      <script type="text/javascript" src="/st/build/vjs-extra.concat.js"></script>
   -->
   <script  src="/st/build/vjs-extra.min.js"></script>
   
   <script  src="/st/js/o/common.js"></script>
   <script  src="/st/js/c/VPController.js"></script>
   <script  src="/st/js/c/DirectivesCommon.js"></script>
   <script  src="/st/js/c/MediaModalController.js"></script>
   <script  src="/st/js/c/EditorProfileController.js"></script>
   <script>
      
   var log = VPL('HomePageController');
      
   
   vpModule.controller('HomePageController', ['$scope', 'comm', '$http', 
      function($scope, comm, $http){
      
         $scope.mediaClick = function(id, evt, _options, size){
         
            log.d('mediaClick', _options);

            var content = $(evt.currentTarget).children('.about').eq(0).html()
            var options = _options || {}
            
            comm.broadcast(VP.SHOW_MEDIA,{
               mode: (content ? VP.SIDEBAR_MODES.HTML_MODE : VP.SIDEBAR_MODES.ASSET_MODE),
               htmlSidebarContent: content,
               mediaData: {
                  bucket: options.bucket || "our.s3.videopixie.com/examples/",
                  provider: options.provider || "",
                  provider_id: id,
                  file_extension: 'mp4', 
                  hasWebm: true,
                  overlays: options.overlays || null,
                  format: options.format || null
               },
               size: size
            });
         };
         
         $scope.homepageVideo = function(id,evt){
         
            $scope.mediaClick(id, evt, {
               bucket: 'our.s3.videopixie.com/video/',
               format: '704p'
            },
            {
               width: 1024,
               height: 576,
               media_width: 1024,
               media_height: 576
            });
         }
         
         
         $scope.$watch('MediaModal',function(isPlaying){
         
            window.isPlayingVideo = !!isPlaying;
         });
         
         
         $scope.registerNew = function(){
         
            var path = '/register/new';
            
            if (!$scope.registerNewEmailAddress || $scope.registerNewEmailAddress.length < 3){
               return;
            }
            
            var data = {
               email_address: $scope.registerNewEmailAddress,
               type_context: SES.type_context || ''
            };
            
            $scope.registerNewPending = true;
            $scope.registerNewErrorMsg = null;
           
            $http.post(path, data).then(
               function registerNewSuccess(response){
                  log.d('SUCCESS', path);
                  $scope.registerNewComplete = true;
                  $scope.registerNewPending = false;
               },
               function registerNewError(response){
                  log.d('ERROR', path, response);
                  $scope.registerNewErrorMsg = response.data.error.human;
                  $scope.registerNewPending = false;
               }
            );
            
         
         }

         
         
      }]);
      
      
      
      $(document).ready(function(){
         $('.click-proxy').click(function(evt){
         
            var id = $(evt.currentTarget).attr('click-proxy');
            //console.log('click-proxy', id);
            $('#'+id).triggerHandler('click');
            
         });
         
         (function(d, s, id) {
           var js, fjs = d.getElementsByTagName(s)[0];
           if (d.getElementById(id)) return;
           js = d.createElement(s); js.id = id;
           js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=257876044244230";
           fjs.parentNode.insertBefore(js, fjs);
         }(document, 'script', 'facebook-jssdk'));
      
      });

   </script>

   
   <!-- start Mixpanel -->
   <script type="text/javascript">
    (function(c,a){window.mixpanel=a;var b,d,h,e;b=c.createElement("script");
    b.type="text/javascript";b.async=!0;b.src=("https:"===c.location.protocol?"https:":"http:")+
    '//cdn.mxpnl.com/libs/mixpanel-2.2.min.js';d=c.getElementsByTagName("script")[0];
    d.parentNode.insertBefore(b,d);a._i=[];a.init=function(b,c,f){function d(a,b){
    var c=b.split(".");2==c.length&&(a=a[c[0]],b=c[1]);a[b]=function(){a.push([b].concat(
    Array.prototype.slice.call(arguments,0)))}}var g=a;"undefined"!==typeof f?g=a[f]=[]:
    f="mixpanel";g.people=g.people||[];h=['disable','track','track_pageview','track_links',
    'track_forms','register','register_once','unregister','identify','alias','name_tag',
    'set_config','people.set','people.increment','people.track_charge','people.append'];
    for(e=0;e<h.length;e++)d(g,h[e]);a._i.push([b,c,f])};a.__SV=1.2;})(document,window.mixpanel||[]);
    mixpanel.init("5f3d14b1f63c57b8546c6c7f095ae4b2");
   </script>
   <!-- end Mixpanel -->
   
   
   <script type="text/javascript" src="/st/js/v/ses_mixpanel.js"></script>
   
   <!--[if lt IE 7.]>
      <script defer type="text/javascript" src="st/pngfix.js"></script>
   <![endif]-->
   
   <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-42918769-1', 'videopixie.com');
      ga('require', 'displayfeatures');
      ga('send', 'pageview');
      
      var referrerCookieName = 'vpFirstReferrer';
      if (!readCookie(referrerCookieName)){
         var ref = document.referrer || 'empty';
         createCookie(referrerCookieName , ref ,365*2);
      }
   </script>
  
   
    
   
  
</head>
<body class="VP"  ng-controller="HomePageController">
   
   <div id="header">
      <a href="/"><img id="logo" src="/st/images/logo_text_and_pixie.png" alt="Videopixie"></a>
      <a id="phone" href="tel:1 800 510 6570">1 (800) 510-6570</a>
      
      
      
         
         <a href="/sign-in"><div class="button blue">Sign in</div></a>
         
         
      
      
      
      <a class="right-link" href="/pricing">Pricing</a>
      <a class="right-link" href="/video-school">Video School</a>
      <a class="right-link browse-link browse-link-first" href="/videographers">Videographers</a>
      <span class="link-spacer">|</span>
      <a class="right-link browse-link" href="/video-animators">Animators</a>
      <span class="link-spacer">|</span>
      <a class="right-link browse-link" href="/video-editors">Browse:&nbsp; Video editors</a>
      
   </div>
   
   
   

<div id="fb-root"></div>

<div class="hero" style="background-image: url('https://s3.amazonaws.com/our.s3.videopixie.com/landing/school-tables.jpg')">
   
   <div class="header_top_bar">
      <div class="blog_title">
         <a href="/video-school">Video School</a>
      </div>
   </div>

</div>
   
<div class="content_container">
  
   <div class="fixed_width">
      <div class="left_column">
         
         <div id="main_content_column">
            
            <h1>How we made our San Frandingo animation</h1>
            <div class="author_container">
               By Libby Cooper
            </div>
            <div class="date_container">
               Nov. 5th, 2015
            </div>
           
            
            
            <div class="content">
               <p>We recently introduced a cool new perk for Videopixie employees. We each get a small allowance every month to make videos… any video actually, as long as it's made using Videopixie! For my first project, I got <a href="https://www.youtube.com/watch?v=I3Azm7UobjE" target="_vp_pup">slo-mo footage of my puppies</a>. For my second, I was ready to bring to life a concept that has been brewing in my head for quite some time now. Presenting San Frandingo!</p>
<p>Update: for all San Francisco fans out there,  we just released our list of <a href="https://www.videopixie.com/san-francisco-videographers" target="_vp_sfv">the best San Francisco Videographers</a>, check it out to discover the work of talented video artists near you.</p>
<iframe width="600" height="338" src="https://www.youtube.com/embed/vGpQlgdEi6I" frameborder="0" allowfullscreen></iframe>

<h2>
The Making of the Video
</h2>

<p>
I began the search for the best creators. I was originally going to illustrate the dogs myself based on some rough sketches made back in 2014, but one day back in spring 2015 I came across WOOF MODELS (<a href="https://instagram.com/woofmodels/" target="_vp_wf">@woofmodels</a>) on Instagram. The account was flawless, the style was nothing like anything I had seen before. I knew I had to have WOOF MODELS in my video. The magic of social platforms is it opens you up to a world of art that in years past you never would have seen.  
</p>

<p>
Once connected with the creator of WOOF MODELS, Sum Leung, I immediately set up my Videopixie project, getting Sum to sign up as a creator in our community. I recommend this practice to all designers out there. <b>Use your product, and use it on a regular basis</b>. The slang term for this is called <u>dogfooding</u>, which funnily enough applies to my dog animation project in more ways than one! No pun intended. Dogfooding is simply using your own product to test and promote the product. It’s a great way to figure out what works and what doesn’t, looking at the platform with fresh eyes from the perspective of your target user. We even have a 'dogfooding' tag in our Github, so we can keep track of issues, logging them along the way. My team and I are able to enhance features through this useful technique.         
</p>

<p>
Now back to the project… I had locked down an illustrator and for $1300 she was going to create 11 custom illustrations.  Now I needed to find a kickass animator. Typically at this point, I would advise any client using Videopixie to post a project looking to hire a specific creator specializing in 2D motion graphics. This type of work starts at $1500/minute of produced animation, but I knew I needed to spend a little more to really elevate the quality. I settled on a range of $1900-$2200 for what I expected to be about a minute of finished video. Now, since I have worked at Videopixie for a long time, I know the community inside and out. Unlike a normal client who comes in needing bids, I already had someone in mind who I had seen bid on past projects. I used our “Videopixie chooses” tool, switched over to my admin account, and assigned the creator to my project. Any client who does not want to receive bids or feels overwhelmed with too many options can easily use this feature. It’s a simple way to get the ball rolling quickly for a project with a tight deadline or for someone who trusts our expertise over their own. 
</p>

<p>
The creator I ended up assigning was <a href="https://www.videopixie.com/creator/sohailkayani" target=_vp_sk">Sohail Kayani</a> from Stellar Video Production. I have admired Sohail’s work for many months and knew he would make countless revisions until I was satisfied. This was shaping up to be quite the international project with myself in San Francisco, Sum in the UK, and Sohail in the Philippines! 
</p>

<p>
With a background in Art Direction, I understand what goes into the pre-production of a project. Especially when dealing with animation, you need to be as specific as possible when building out custom illustrations and giving motion direction. Sum and I exchanged various lists and mood boards to lock down the style of each dog. As the person with the concept and the only one who lives in San Francisco, I had to conceptualize every aspect from the breed to the accessories to make sure each dog really fit with its corresponding neighborhood. Check out a couple wardrobe references that helped lock down the exact outfit of each dog:
</p>
<img src="https://s3.amazonaws.com/our.s3.videopixie.com/landing/sanfrandingo_moodboard_1_600_343.jpg" alt="moodboard_1">
<img src="https://s3.amazonaws.com/our.s3.videopixie.com/landing/sanfrandingo_moodboard_2_600_425.jpg" alt="moodboard_2">

<p>
Using inspiration is really important to aid your project’s successful completion. A great way to help animators understand the motion style you want is to send them a video of something you like. In this case, I sent Sohail and his team this <a href=" https://vimeo.com/67312701" target="_vp_vm">Vimeo link</a>. The team knew exactly what to do once shown this little clip. 
</p>

<p>
Simple tricks like piecing together the layout of your video is also really helpful to animators. By figuring out the typeface, color scheme and layout, you are not only making their job easier, but also cutting costs for creative work and revisions. Check out these simple frames I created in Illustrator:
</p>
<img src="https://s3.amazonaws.com/our.s3.videopixie.com/landing/sanfrandingo_frame_2_276_480.jpg" alt="storyboard_2">
<p>
A skilled animator can match exactly what you want so there are no surprised with the first delivery.
</p>

<p>
Overall, this project was seamless and enjoyable. Everyone who worked on this animation is proud to call it their own. You too can have an easy time making video if you are very clear with expectations from the get go. Staying organized is key. Don’t feel embarrassed to write out an essay of your goals and desires for the video. Understand your audience and let your creators know why you are making the video. Attach as many inspiration images and videos as possible. Never downplay your notes, give honest feedback explaining what you like and why but also never sugar coat what you don’t like. Remember that the first cut is a <u>rough cut</u>. Do not be shocked if it is not up to your standard, it’s only the first version. And have fun with it! Enjoy the process. Check in with your creators to make sure that they too are enjoying the process. The best work comes from people who are happy and are allowed to show off their skills. With these tips, you will be able to make great video right from your laptop screen.  
</p>
            </div>
           
         </div>
      </div>
      
      <div class="right_column">
         
         <div class="sidebar_content_width sidebar_cta_box">
            <h5>Need a video?</h5>
            <a class="stay_white" href="http://www.videopixie.com/">
               <div class="button">Try it free</div>
            </a>
             
         </div>
         
         <div class="sidebar_content_width sidebar_social">
         
            <div class="sidebar_title_line"></div>
            
            <p class="sidebar_title">Follow us</p>
            
            <div class="social-links">
               <div class="social-links-center">
                  <a class="social-link twitter" href="http://www.twitter.com/videopixie">t</a>
                  <a class="social-link facebook" href="http://www.facebook.com/videopixie">f</a>
                  <a class="social-link google" href="http://www.google.com/+videopixie">g+</a>
               </div>
            </div>
         
         </div>
         
        
         
         <div class="sidebar_content_width">
            
            <div class="sidebar_title_line"></div>
            <p class="sidebar_title">Related</p>
            <a class="related" href="https://www.videopixie.com/how-we-made-our-background-video">
               <img style="width:100%" src="https://s3.amazonaws.com/our.s3.videopixie.com/landing/How_make_background_video_videopixie.jpg">
               <span >How we made our background video</span>
            </a>
            <a class="related" href="https://www.videopixie.com/shoot-better-video-on-canon-dslr-with-magic-lantern">
               <img style="width:100%" src="https://s3.amazonaws.com/our.s3.videopixie.com/landing/magic_lantern_zebras.jpg">
               <span >Shoot Better Video on Canon DSLR with Magic Lantern</span>
            </a>
            
         </div>   
         
         
         
         
      </div>
   </div>   
   
   <div class="fixed_width">
      <div class="left_column">
      
         <div class="social" id="social">
            <div class="social_buttons">
               <div class="fb-like va" data-href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.videopixie.com%2Fhow-we-made-the-san-frandingo-animation" data-layout="button" data-action="like" data-show-faces="true" data-share="true"></div>
               <div class="g-plusone va" data-size="medium" data-annotation="none"></div>

               <script type="text/javascript">
                    (function() {
                     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                     po.src = 'https://apis.google.com/js/platform.js';
                     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                    })();
               </script>

               <a href="https://twitter.com/share" class="twitter-share-button va" data-count="none">Tweet</a>
               <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
            </div>
            
         </div>

         <div class="fb-comments" data-href="https://www.videopixie.com/how-we-made-the-san-frandingo-animation" data-width="100%" data-colorscheme="light"></div>
      
      </div>
   </div>
      
   
  
</div>




<script>
   try {
      var pageName = 'how-we-made-the-san-frandingo-animation';
      SES.type_context = '';
      var pageVersion = -1;
      var propertiesForMixpanel = {};
      propertiesForMixpanel[pageName + "_version"] = pageVersion;
      
      SES.track({
         event_name:'viewed_content_page',
         p:propertiesForMixpanel,
         details:'viewed_page='+pageName+';',
         should_not_post_event_to_internal:true
      });   
      
   } catch (e) {
      log.d("error logging to mixpanel");
   }   

   $(document).ready(function(){   
   
      var cta = $('#cta_dynamic');
      if (!cta.length){ return; }
      var didScroll = false;
      var $window = $(window);
      var ctaBottom = cta.height() + cta.offset().top;
    
      $window.bind('scroll.cta', function() {
          didScroll = true;
      });
       
      var clearer = setInterval(function() {
         if ( didScroll ) {
            didScroll = false;
              
            if ($window.height() + $window.scrollTop() > ctaBottom){
               cta.animate({opacity: 1.0});
               clearInterval(clearer);
               $window.unbind('scroll.cta');
               
               setTimeout(function(){
               
                  cta.animate({right: '20px'}, 200, function(){
                     cta.animate({right: 0}, 200);
                  });
               }, 500);
            }
         }
      }, 250);
   });





try{
   createCookie('vp_coupon', '', 180);
} catch(e){

}
















</script>



   
   <div id="footer">
      
      <div class="content">
         <img id="footer-logo" src="/st/images/logo_text_and_pixie.png" alt="videopixie logo">
         
         <div id="footer-left">
            <a href="/im_a_pro">Sign-up as a Professional</a>
            <a href="/video-production">Browse Video Producers</a>
            <a href="/learn-more">Learn More</a>
            <a href="/pricing">Pricing</a>
         </div>
         
         <div id="footer-left">
            <a href="/video-school">Video School</a>
            <a href="/about">Our Team</a>
            <a href="/jobs">Jobs</a>
            <a href="/faq">FAQ</a>
         </div>
      
         <div id="social-links">
            <a target="vp_facebook" href="//www.facebook.com/videopixie" class="facebook social-box">f</a>
            <a target="vp_twitter" href="//www.twitter.com/videopixie" class="twitter social-box">t</a>
            <a target="vp_google" href="//www.google.com/+videopixie" class="google social-box">g+</a>
            <a target="vp_linkedin" href="//www.linkedin.com/company/videopixie" class="linkedin social-box">in</a>
         </div>
         
         <div id="footer-bottom">
            <span>Copyright 2015 TT Labs Inc.</span>
            <a href="/st/privacy.html">Privacy Policy</a>
            <a href="/st/dmca.html">DMCA</a>
         </div>
      
      </div>
      
      
      
   </div>
  
   
   
   <div id="media-modal" class="modal modal-wrapper video-modal dn" vp-size="size" vp-fade="[[MediaModal]]" vp-closeable="MediaModal"  ng-controller="MediaModalController">
<!--vp-fade-but-leave-in-display="MediaModal" -->

   <div id="media-background" vp-width-by-aspect="[[aspectRatio]]"></div>
   <div id="image-wrapper"
      ng-class="{ontop: imageViewerMode, small_hide: !imageViewerMode}"
      vp-img-child="src: '[[imageSrc]]', valid: true">
      <!--img is inserted by vp-img-child -->
   </div>
   <div id="player-wrapper" ng-class="{small_hide: imageViewerMode}">
      <video id="video-element" class="video-js vjs-default-skin" controls ng-controller = "VideoPlayerController"></video>
      <div id="video-overlay" ng-bind-html="overlayHtml">
         
      </div>
   </div>
   
   <div id="sidebar-wrapper">
      
      <div ng-show="mode.design_mode" ng-controller="DesignSideBarController" class="side-bar designSideBar"><!-- Design Mode -->
         
         <div class="font-14-999 fr">[[currentQuestion.name]]</div>
         <div class="currentOptionWrapper clearfix">
         
            <div class="option clearfix"
               ng-click="onCurrentOptionClick()"
               ng-class="{selected:currentOption.selected}"
               vp-hover-exclusion="not-hot">
               <div class="mainRow fl">
                  <div class="thumbnailWrapper fl" 
                     vp-img-child="src: '[[AWS + mediaData.bucket + currentOption.video.provider_id]]' + '_120h.jpg', valid: [[!!currentOption.video.provider_id]]">
                     <!--img is inserted by vp-img-child -->
                     
                  </div>
                  <div class="font-16-666-b optionName fl">[[currentOption.name]]</div>
                  <div class="ok"></div>
               </div>
               <div class="font3 details fl">[[currentOption.details]]</div>
            </div>
            
         </div>
         
         <div class = "otherOptionsWrapper">
            
            <div class="bar"></div>
            <div class="font4 subtitle">Other [[currentQuestion.name]] options:</div>
            <div class="vp-scroll-bar vp-scroll-shadows scroll-wrapper">
               <div class="option clearfix" 
                  ng-repeat="(optionIdx,option) in currentQuestion.options" 
                  ng-hide='optionIdx == currentOptionIdx || option.hidden || option.renderer == "lengthInput"'
                  ng-class="{clickable:option.video.provider_id}"
                  ng-click="onOtherOptionClick(optionIdx)">
                  
                  <div class="thumbnailWrapper fl"
                     vp-img-child="src: '[[AWS + mediaData.bucket + option.video.provider_id]]' + '_120h.jpg', valid: [[!!option.video.provider_id]]">
                     <!--img is inserted by vp-img-child -->
                     
                     <div class="no-example" ng-hide="option.video.provider_id">No example</div>
                  </div>
                  <div class="font3 optionName">[[option.name]]</div>               
               </div>
            </div>
         </div>
         
      </div>
      
      <div ng-show="mode.html_mode" class="html-side-bar side-bar">
      
         <div ng-bind-html="htmlSidebarContent"></div>
      
      </div>
         
      
   </div>
   <div class="x close"></div>
</div>

   
   <div class="dimmer dn" vp-fade="[[Dimmer]]" vp-match-document-height></div>
   
   <div id="fb-root"></div>
      
   
   <!-- begin olark code -->
   <script data-cfasync="false" type='text/javascript'>
   /*<![CDATA[*/
   if(!SES.is_dev_enviro){
      window.olark||(function(c){var f=window,d=document,l=f.location.protocol=="https:"?"https:":"http:",z=c.name,r="load";var nt=function(){
      f[z]=function(){
      (a.s=a.s||[]).push(arguments)};var a=f[z]._={
      },q=c.methods.length;while(q--){(function(n){f[z][n]=function(){
      f[z]("call",n,arguments)}})(c.methods[q])}a.l=c.loader;a.i=nt;a.p={
      0:+new Date};a.P=function(u){
      a.p[u]=new Date-a.p[0]};function s(){
      a.P(r);f[z](r)}f.addEventListener?f.addEventListener(r,s,false):f.attachEvent("on"+r,s);var ld=function(){function p(hd){
      hd="head";return["<",hd,"></",hd,"><",i,' onl' + 'oad="var d=',g,";d.getElementsByTagName('head')[0].",j,"(d.",h,"('script')).",k,"='",l,"//",a.l,"'",'"',"></",i,">"].join("")}var i="body",m=d[i];if(!m){
      return setTimeout(ld,100)}a.P(1);var j="appendChild",h="createElement",k="src",n=d[h]("div"),v=n[j](d[h](z)),b=d[h]("iframe"),g="document",e="domain",o;n.style.display="none";m.insertBefore(n,m.firstChild).id=z;b.frameBorder="0";b.id=z+"-loader";if(/MSIE[ ]+6/.test(navigator.userAgent)){
      b.src="javascript:false"}b.allowTransparency="true";v[j](b);try{
      b.contentWindow[g].open()}catch(w){
      c[e]=d[e];o="javascript:var d="+g+".open();d.domain='"+d.domain+"';";b[k]=o+"void(0);"}try{
      var t=b.contentWindow[g];t.write(p());t.close()}catch(x){
      b[k]=o+'d.write("'+p().replace(/"/g,String.fromCharCode(92)+'"')+'");d.close();'}a.P(2)};ld()};nt()})({
      loader: "static.olark.com/jsclient/loader0.js",name:"olark",methods:["configure","extend","declare","identify"]});
      /* custom configuration goes here (www.olark.com/documentation) */
      olark.identify('3567-618-10-4944');
   }/*]]>*/
   </script>
   <noscript><a href="https://www.olark.com/site/3567-618-10-4944/contact" title="Contact us" target="_blank">Questions? Feedback?</a> powered by <a href="http://www.olark.com?welcome" title="Olark live chat software">Olark live chat software</a></noscript>
   <!-- end olark code -->
   
  
   
   <!-- Google Code for Remarketing Tag -->
   <!--------------------------------------------------
   Remarketing tags may not be associated with personally identifiable information or placed on pages related to sensitive categories. See more information and instructions on how to setup the tag on: http://google.com/ads/remarketingsetup
   --------------------------------------------------->
   <script type="text/javascript">
   /* <![CDATA[ */
   var google_conversion_id = 993449120;
   var google_custom_params = window.google_tag_params;
   var google_remarketing_only = true;
   /* ]]> */
   </script>
   <script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
   </script>
   <noscript>
      <div style="display:inline;">
         <img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/993449120/?value=0&amp;guid=ON&amp;script=0"/>
      </div>
   </noscript>

   
   <script type="text/javascript">
      (function() {
         window._pa = window._pa || {};
         // _pa.orderId = "myOrderId"; // OPTIONAL: attach unique conversion identifier to conversions
         // _pa.revenue = "19.99"; // OPTIONAL: attach dynamic purchase values to conversions
         // _pa.productId = "myProductId"; // OPTIONAL: Include product ID for use with dynamic ads
         var pa = document.createElement('script'); pa.type = 'text/javascript'; pa.async = true;
         pa.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + "//tag.perfectaudience.com/serve/53dac13adc92cfda2d000130.js";
         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(pa, s);
      })();
   </script>
   
</body>
</html>
