 
    <!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

    <link href='//fonts.googleapis.com/css?family=Exo+2:400,300,200' rel='stylesheet' type='text/css'>
    <!-- Basic Page Needs
  ================================================== -->
    <meta charset="utf-8">
    <title>Avtuotanto etusivu</title>
    <meta name='description' content='' >
    <meta name="author" content="">

    <!-- Mobile Specific Metas
  ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script type='text/javascript' src= "/sharedjs/jquery2.collection.js"></script>
    <script type="text/javascript" src="/sharedjs/layerslider/layerslider.bundle.js"></script>
    
    <script type="text/javascript" src='/js/common.js'></script>
    
    

    <!-- CSS from this on
  ================================================== -->
    <link rel="stylesheet" href="/css-skel/styles.css">
    
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Favicons
    ================================================== -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">

</head>
<body style="margin:0;padding:0;background-image:none">
    <!-- start header -->

        <div id='header_container'
             style='height: 108px; left:0; position:fixed; width:100%; top:0; z-index:100;background-color:#000;'>
            <div class="header sixteen columns">
            
                
            

                <div  style='clear:right' >
                    <div class="sixteen columns mainmenu " id="mainmenu">
                        
                        <!-- menu id = 1 -->
<a class="menu-link" href="#menu"><img src='/css-skeleton/images/menu-icon-white.png' alt='menu'/></a>
<nav id ="menu" class="menu">
    <ul id='ulmain'>
    
                  <li class="li1"><a href="/avtuotanto_home">avtuotanto</a>
            
              </li>
       
                   <li class="has-submenu li2" >
         <a href="#">mitä?</a>
            
              <ul class='sub-menu'>
                            
                                <li class="li" >
                    <a href="/responsiivinen_design">responsiivinen web</a>
                </li>
                                            
                                <li class="li" >
                    <a href="/valokuvaus">valokuvaus</a>
                </li>
                                            
                                <li class="li" >
                    <a href="/video">videotuotannot</a>
                </li>
                                            
                                <li class="li" >
                    <a href="/audio">äänituotannot</a>
                </li>
                                            
                                <li  class="li last" >
                    <a href="/painotyot">printtimedia</a>
                </li>
                             
            </ul>
        </li>
         
                  <li  class="li3 last"><a href="/references_and_clients">kenelle?</a>
            
              </li>
       
                  <li  class="li4 last"><a href="/yhteydenotto">yhteys</a>
            
              </li>
       
        </ul>
</nav>

<script type='text/javascript'>

    jQuery( document ).ready( function( $ ) {

            $('body').addClass('js');
            var $menu = $('#menu'),
                    $menulink = $('.menu-link'),
                    $menuTrigger = $('.has-submenu > a');

            $menulink.click(function(e) {
                e.preventDefault();
                $menulink.toggleClass('active');
                $menu.toggleClass('active');
            });

            $menuTrigger.click(function(e) {
                e.preventDefault();
                var $this = $(this);
                $this.toggleClass('active').next('ul').toggleClass('active');
            });


    });
</script>

<script type='text/javascript'>
    jQuery( document ).ready( function( $ ) {
    });


    function adjustMenu(){
        var fullwidth = $(window).width();
        if (fullwidth <768){
            $("#ulmain >li").width("100%");
            console.log(fullwidth);
        } else {
            var c = $("#ulmain > li").length;
            var perc = 100 / c;
            $("#ulmain >li").width(perc+"%");
        }
    }
$(document).ready(function() {

    var fullwidth = $(window).width();
    if (fullwidth > 960) fullwidth =960;
    var c = $("#ulmain > li").length;
    var perc = 100 / c;
    //console.log("FW:"+fullwidth, "perc:"+perc);
    if (fullwidth > 768){
        $("#ulmain >li").width(perc+"%");
    }
    //$("#menu").width(fullwidth);
    //$("#ulmain").width(fullwidth);
    $( window ).resize(function() {
      //console.log( $(window).width() );
      var fullwidth = $(window).width();
      var c = $("#ulmain > li").length;
        adjustMenu();
      //console.log(c);
    });
});

</script>

<!--lang:-->

                        
                    </div>
                </div>
            </div>
        </div>


    <!-- end of header -->


    <div class='container' id='maincontainer' role='main' >
        <script type="text/javascript">
var _bg_latestchange = false;






function saveBgIndex(currSlideElement,nextSlideElement,options,forwardFlag){
    //console.log(currSlideElement);
    var idx = $(currSlideElement).data("id");
    if ( $.cookies ) {
        $.cookies.set("bgImgIdx",idx);
        var d = new Date();
        _bg_latestchange = d.getTime() ;
    }
}

function randomizeBg(){
    var startfrom = 0;
    var delay     = 0;
    if ( $.cookies ) {
        if ( $.cookies.get("bgImgIdx") != undefined ){
            startfrom = $.cookies.get("bgImgIdx");
        }
        if ( $.cookies.get( "bgImgShownSec" ) ){
            var time = $.cookies.get( "bgImgShownSec" );
            if ( !isNaN(time) ){
                if ( time < 8000 ){
                    delay = - (time);
                }
            }
        }
    }
    $('#bg_slideshow').cycle({
        fx: 'fade',
        pager: '#smallnav',
        pause:   1,
        speed: 1800,
        delay: delay,
        timeout:  8000,
        // start the 'load background' cycle here
        startingSlide: startfrom,
        after :   function(curr,next){
            saveBgIndex(next);
        }
    });
    
}

$(document).ready(function(){
    //if ("#bg_slideshow").is("visible")){
    randomizeBg();
    $( window ).unload (function() {
        var d = new Date();
        var now = d.getTime() ;
        var elapsed = now - _bg_latestchange;
        $.cookies.set("bgImgShownSec", elapsed )
        //§saveBgIndex();
    });
    $(window).bind('resize', function() {
        randomizeBg();
    });
    //}
});

</script>
<div id="bg_slideshow">
</div>

        <div class='sixteen columns content' id ='content' style='display:none'>
          
                            <!--compound template compiled from 'avtuotanto_home' -->
<!--

-->
<script type='text/javascript'>
// module vars etc

</script>
<div class='sixteen columns '>
            
        
<script type="text/javascript">
$(window).load(function(){
    if ( typeof $.fn.layerSlider == "undefined" ){
        $("head").append("<link rel='stylesheet' href='/sharedcss/layerslider/layerslider.css' type='text/css' media='screen'>");
        $.getScript("/sharedjs/layerslider/greensock.js", function( data,textStatus,jqxhr ){
            $.getScript("/sharedjs/layerslider/layerslider.transitions.js", function( data,textStatus,jqxhr){
                $.getScript("/sharedjs/layerslider/layerslider.kreaturamedia.jquery.js", function(data,textStatus,jqxhr){
                   //console.log('everything loaded');
                   
                   $("#layerslider").layerSlider(  { "skinsPath": "/sharedcss/layerslider/skins/" });
                })
            });
        });

    } else {
        //s$("head").append("<link rel='stylesheet' href='/sharedcss/layerslider/layerslider.css' type='text/css' media='screen'>");
        $("#layerslider").layerSlider(  { "skinsPath": "/sharedcss/layerslider/skins/" });
    }

});

</script>

<div id="slider-wrapper">
  <!-- LayerSlider start -->
  <div id="layerslider"
    style="width: 940px; height: 500px; max-width: 1280px;"
    >

    <!-- slide  start -->
    <div class="ls-slide"
         data-ls="slidedelay: 6000; transition2d: 5; " >
            <!-- layer 1 -->
              
            <!-- background-image -->
            <img class='ls-bg' src='/userfile/files/images/layerslider/eka.jpg' alt='background'/>

                <!-- layer 2 -->
          
            <!-- text layer -->
                        <div data-blah="2" class='ls-l' style="left:431px; top:386px; width:243px;" 
            >                <p><span style="font-size: 18pt;"><em><a href="../yhteydenotto">Lis&auml;tietoja!</a></em></span></p>
                         </div>
            
            </div>
    <!-- slide  start -->
    <div class="ls-slide"
         data-ls="slidedelay: 8000; " >
            <!-- layer 1 -->
              
            <!-- background-image -->
            <img class='ls-bg' src='/userfile/files/images/layerslider/ilmakuvaus2.jpg' alt='background'/>

                <!-- layer 2 -->
          
            <!-- text layer -->
                        <div data-blah="2" class='ls-l' style="left:120px; top:39px; font-family:Open Sans;width:785px;height:112px;" 
            >                <p><span style="color: #ff9900; font-size: 18pt;"><strong><em>Ilmakuvauksella tapahtuma talteen jopa UHD 4K-resoluutiossa!</em></strong></span></p>
<p>&nbsp;</p>
<p><span style="font-size: 14pt; color: #ffffff;"><em><strong><a style="color: #ffffff;" href="../video">Katso demo &gt;&gt;</a></strong></em></span></p>
                         </div>
            
            </div>
    <!-- slide  start -->
    <div class="ls-slide"
         data-ls="slidedelay: 8000; transition2d: 5; " >
            <!-- layer 1 -->
              
            <!-- background-image -->
            <img class='ls-bg' src='/userfile/files/images/layerslider/respokmappis.jpg' alt='background'/>

                <!-- layer 2 -->
          
            <!-- text layer -->
                        <div data-blah="2" class='ls-l' style="left:379px; top:339px; font-family:Open Sans;width:279px;" 
            >                <p><span style="font-size: 14pt;"><strong><em><span style="color: #ffffff;"><a style="color: #ffffff;" href="../responsiivinen_design">Nykyaikaista websivustosi!</a></span></em></strong></span></p>
                         </div>
            
            </div>
    <!-- slide  start -->
    <div class="ls-slide"
         data-ls="slidedelay: 8000; transition2d: 5; " >
            <!-- layer 1 -->
              
            <!-- background-image -->
            <img class='ls-bg' src='/userfile/files/images/layerslider/respokmappis2.jpg' alt='background'/>

            </div>
  
      </div>
</div>

<!--

-->

                    
            <!-- generated from dynamic_page.tpl -->
<div class='general_container' >
<!--  <div style="float:left;width:98%"><iframe frameborder="0" height="460px" scrolling="no" src="http://www.avtuotanto.fi/flex/slideshow.html" width="100%"></iframe></div> -->
<h3 style="text-align: center;"><img alt="" src="/userfile/files/images/content_img/homepage-logo.png" style="width: 63%;" /></h3>

<h3 style="text-align: center;">AUDIOVISUAL PRODUCTIONS</h3>

<p style="text-align: center;">[ Tuotamme ääntä ja kuvaa kaikkiin medioihin. Asiakkaitamme ovat pääsääntöisesti pk-yritykset ja konsernit, mainostoimistot sekä muut av-tuotantoalan yritykset. Tuotteitamme ovat mm. tv-spotit, radiospotit ja erilaiset av-tuotannot sekä responsiiviset websivustot ]</p>

<hr style="clear:both;" />
<p style="text-align: center;">[ We create sound, visuals and interactive solutions for web, tv &amp; radio, and other digital platforms Our customers are mainly SME:s, advertising companies and other av-production companies. We make audio-, video- &amp; film productions, photoshoots, virtualization &amp; 360 panoramas with html5 output, responsive web solutions. ]</p>

<hr style="clear:both;" />
<p>&nbsp;</p>

<div style="float:left;width:98%">
<div style="float:left;width:33%; border:0px solid; border-color: #ccc; padding: 6px; height: 225px; min-width: 300px;">
<h3 style="text-align: center;">web</h3>

<p style="text-align: center;">Responsiivinen websivusto on ainoa järkevä vaihtoehto sisällönhallintaan. Sebsisältösi näkyy kaikissa laitteissa &nbsp;ja näytöissä aina optimoidusti!</p>

<p style="text-align: center;"><strong><a class="btn_av" href="/responsiivinen_design"><span style="color:#FFFFFF;"><em>[ lisätietoja ]</em></span></a></strong></p>
</div>

<div style="float:left;width:33%; border:0px solid; border-color: #ccc; padding: 6px; height: 225px; min-width: 300px;">
<h3 style="text-align: center;">photo</h3>

<p style="text-align: center;">Mainoskuvaukset sekä erilaiset henkilö-, ja profiilikuvaukset. Lisää näyttävyyttä kuvauskohteisiin 360º:een panoraamoilla, jotka toimivat tietenkin responsiivisesti!</p>

<p style="text-align: center;"><strong><a class="btn_av" href="/valokuvaus"><span style="color:#FFFFFF;"><em>[ lisätietoja ]</em></span></a></strong></p>
</div>

<div style="float:left;width:33%; border:0px solid; border-color: #ccc; padding: 6px; height: 225px; min-width: 300px;">
<h3 style="text-align: center;">audio &amp; video</h3>

<p style="text-align: center;">av-tuotannoilla&nbsp;takaat &nbsp;näkyvyyden &nbsp;ja kuuluvuuden sosiaalisessa mediassa, televisiossa ja radioissa. Koko projekti käyttökuntoon käsiksestä jälkituotantoon!</p>

<p style="text-align: center;"><strong><a class="btn_av" href="http://www.avtuotanto.fi/video"><span style="color:#FFFFFF;"><em>[ lisätietoja ]</em></span></a></strong></p>
</div>
</div>

<h3>&nbsp;</h3>

<p>&nbsp;</p>

<h3>&nbsp;</h3>

<h3>&nbsp;</h3>

<h3 style="text-align: center;">Avtuotanto Social Links</h3>

<div style="float:left;width:98%">
<div style="float:left;width:20%; border:0px solid; border-color: #ccc; padding: 8px; height: 225px; min-width: 50px;">
<p style="text-align: center;"><a href="https://www.facebook.com/pages/Avtuotanto/145809038773564?fref=ts" target="_blank"><img alt="" src="/userfile/files/images/content_img/Facebook128.png" style="border-width: 0px; border-style: solid; width: 70%;" /></a></p>
</div>

<div style="float:left;width:20%; border:0px solid; border-color: #ccc; padding: 8px; height: 225px; min-width: 50px;">
<p style="text-align: center;"><a href="https://twitter.com/avtuotanto" target="_blank"><img alt="" src="/userfile/files/images/content_img/Twitter-2128.png" style="border-width: 0px; border-style: solid; width: 70%;" /></a></p>
</div>

<div style="float:left;width:20%; border:0px solid; border-color: #ccc; padding: 8px; height: 225px; min-width: 50px;">
<p style="text-align: center;"><a href="https://www.youtube.com/channel/UCNZ6VtHU3LMGM6nR_ULEl4g" target="_blank"><img alt="" src="/userfile/files/images/content_img/YouTube128.png" style="border-width: 0px; border-style: solid; width: 70%;" /></a></p>
</div>

<div style="float:left;width:20%; border:0px solid; border-color: #ccc; padding: 8px; height: 225px; min-width: 50px;">
<p style="text-align: center;"><a href="https://www.flickr.com/photos/103870834@N04/" target="_blank"><img alt="" src="/userfile/files/images/content_img/Flickr128.png" style="border-width: 0px; border-style: solid; width: 70%;" /></a></p>
</div>

<div style="float:left;width:20%; border:0px solid; border-color: #ccc; padding: 8px; height: 225px; min-width: 50px;">
<p style="text-align: center;"><a href="https://soundcloud.com/cosmicco/" target="_blank"><img alt="" src="/userfile/files/images/content_img/Soundcloud128.png" style="border-width: 0px; border-style: solid; width: 70%;" /></a></p>
</div>
</div>

<p>&nbsp;</p>

</div>

            </div>

            

            
        </div>
    </div>

    <div class="container clearfix footer" style='display:none'>
        <div class='footer-section'>

        </div>
    


    </div>

    <script type='text/javascript'>
    function rsz_content(){
        return false;
    
    }
$(window).load( function(){
    var windowH = $(window).height();
    var contentH = $('#maincontainer').height();
    if(windowH > contentH) {
        //$('#maincontainer').css({ 'height':( $(window).height())+'px' } );
    }
    $("#content").fadeIn("300");
    rsz_content();
    $(window).resize(function(){
        rsz_content();
    })
});
</script>

<script data-no-instant>
    //InstantClick.init(false);

</script>


<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-36267586-1', 'avtuotanto.fi');
  ga('send', 'pageview');

</script>

</script>



</body>
</html>

<!-- generated in 0.01114 secs, using 1024 Kbytes of memory-->