/*
Theme Name: i2g next generation
Theme URI: http://www.i2g.com.br
Description: i2g Next Generation of site's
Author: CSSMix
Author URI: http://www.cssmix.com.br
*/

/*====================INDICE====================

                1. Reset
                2. Geral
                3. Topo
                4. Conteudo 
                5. Rodape
                6. Paginas
                6.1 - Home
                6.2 - Sobre
                6.3 - Servicos
                6.4 - Portfolio
                6.5 - Contato

=============================================*/

/* ==========================================
    1. Reset
============================================*/

* { padding:0; margin:0; text-decoration:none; list-style:none; vertical-align:baseline; border:none; 
    font:normal 12px Verdana, Helvetica, sans-serif; outline:0;}

img { -ms-interpolation-mode: bicubic; }

html,body {height:100%;}


/* ==========================================
    2. Geral
============================================*/

  #pagina { width:100%; height:100%; }
  
  #secoes { overflow:hidden; width:100%; height:100%; }
  
  .red {color:red;}
  .orange {color:#FF6600;}
  .blue {color:#068BE3;}
  .lightblue {color:#4AB3FA;}
  
  .bold {font-weight:bold;}
  .underline {text-decoration:underline;}
  
  .bigfont {font-size:14px;}
  .mediumfont {font-size:12px;}

/* ==========================================
    3. Topo
============================================*/

    .header {width:100%; height:80px; padding:10px 0 0 0; margin:0 0 0 100px;}
    
    .logo {width:128px; float:left; }
           
    .logo h1 {width:128px; height:69px;}
    
    .logo h1 a {text-indent:-9999px; overflow:hidden; display:block; width:128px; height:69px; }       
           
    .menu {width:600px; float:left; margin:0 0 0 30px; }
    
    .menu ul {height:50px;}
           
    .menu ul li {display:inline;float:left;margin:0 0 0 25px; }
                 
    .menu ul li a {color:#FFF; 
                   font:bold small Arial, Helvetica, sans-serif;
                   display:block;
                   height:50px;
                   width:70px;
                   text-align:center;
                   padding:35px 0 0 0; }
                   
    .menu ul li a:hover {color:yellow; background:url(images/backmenuli.png) center top no-repeat; } 

/* ==========================================
    4. Conteudo
============================================*/

    #conteudo {width:99999px; height:100%; background:#D1E0ED url(images/background3.png) repeat-y;}
                                 
    .contentinner { float:left; width:1460px; height:100%; }
    
    #transicao1 {background:url(images/line-home-invert.png) left top no-repeat; width:1460px; height:100%; float:left;}
    #transicao2 {background:url(images/line-sobre-invert.png) left top no-repeat; width:1460px; height:100%; float:left;}
    #transicao3 {background:url(images/line-servicos-invert.png) left top no-repeat; width:1460px; height:100%; float:left;}
    #transicao4 {background:url(images/line-portfolio-invert.png) left top no-repeat; width:1460px; height:100%; float:left;}

/* ==========================================
    5. Rodape
============================================*/

    /* Como o Rodape muda em todas as paginas ele ficara 
       contido dentro da formatacao das paginas, siga para 
       o proximo item */

/* ==========================================
    6. Rodape
============================================*/

  /* 6.1 Home    ===========================*/

        #home {background:url(images/line-home.png) left top no-repeat; width:100%; height:100%; }  
        
        #homebottom { width:100%; height:334px; background:url(images/openbox.png) 120px 60px no-repeat; padding-top:60px; }
        
        #comunica {width:235px; height:82px; margin:-30px 0 0 50px;}
        #balao { width:49px; height:59px; margin:0 0 0 900px;}
        
        #twitter { width:260px; height:200px; background:url(images/twitter.png) 40% 100% no-repeat; float:left; display:inline; margin:170px 0 0 50px; }  
        #twitter p {color:#FFF; margin:10px 0 0 0; font:normal 12px Arial, Helvetica, sans-serif; line-height:1.5em; }
        #twitter p a { color:orange; font-weight:bold; }
        
        #i2you { display:inline; width:300px; height:200px; float:left; background:url(images/rss.png) 50% 100% no-repeat; margin:170px 0 0 50px; }
        #i2you ul { list-style:none; margin:10px 0 0 0;  }
        #i2you ul li { background:url(images/marker.gif) left 7px no-repeat; padding-left:10px; margin-bottom:10px; }
        #i2you ul li a { color:white; font:bold 11px Arial, Helvetica, sans-serif; } 
        #i2you ul li a:hover { color:#CCFF00; }    
        
        #primavera {  background:url(images/arvore3.png) 60% bottom no-repeat;  height:100%;}
        #homefooter {margin:-26px 0 0 0; width:100%; height:26px; bottom:0; background:url(images/graminha.png) bottom left repeat-x; }
        #ah-o-verao { background:url(images/summer.png) 62% bottom no-repeat; height:100%; width:1320px; }
        
        .primavera {background:url(images/i2g.png) left top no-repeat;}

  /* 6.2 Sobre    ===========================*/


      #sobre {background:url(images/line-sobre.png) left top no-repeat; width:100%; height:100%; }
      
      #quemsomos { width:700px; height:441px; margin:25px 0 0 190px;}
      #quemsomos #quemsomoscontent {float:left; background:url(images/backpaginas.png) left top repeat; padding:10px; width:414px; height:411px; padding-bottom:25px; }
      #quemsomos #quemsomoscontent p {line-height:1.5em; margin:0 0 20px 0; font-size:11px; text-align:justify;}
      #quemsomos #quemsomoscontent .quadradinhos {width:100%; height:29px; display:block; margin:0 0 5px 0; background:url(images/quadradinhos.png) left top no-repeat;}
      #quemsomos #backcontent {background:#fff; padding:7px; height:415px;}
      #quemsomos #backcontent p.first-content { margin-top:30px; }
      #navquemsomos {float:left; width:210px; height:200px;}
      #navquemsomos ul {margin:50px 0 0 0;}
      #navquemsomos ul li {width:210px; height:44px; margin:0 0 15px 0; background:url(images/backpaginas.png) left top repeat; }
      #navquemsomos ul li a {display:block; width:145px; font:bold 12px Arial, Verdana, Helvetiva, Sans-serif; color:#333; height:29px; padding:15px 0 0 65px;} 
      #navquemsomos ul li a:hover {color:#000;}
      #navquemsomos ul li.quemsomosli a {background:url(images/quemsomosli.gif) 10% 50% no-repeat;}
      #navquemsomos ul li.estruturali a {background:url(images/estruturali.gif) 10% 50% no-repeat;}

      #verao-is-gone { height:100%; }
      
      .verao {background:url(images/i2g.png) left top no-repeat;}

  /* 6.3 Servicos    ===========================*/

      #servicos {background:url(images/line-servicos.png) left top no-repeat; width:100%; height:100%;}
      #servicoscontent {width:750px; height:280px; background:url(images/backpaginas.png) left top repeat; margin:25px 0 0 150px;}
      #oquefazemos {overflow:hidden; width:100%; height:100%;}
      #englobaservicos {width:100%; height:1400px;}
      .servicosinner {width:100%; height:280px;}
          
      #servicoscontent ul.lista-servicos {width:100%; height:90px; background:url(images/backpaginas.png) left top repeat;}
      #servicoscontent ul.lista-servicos li {width:100px; height:60px; float:left; margin:15px 30px 25px 15px; }
      #servicoscontent ul.lista-servicos li a { width:100px; height:60px; display:block; text-align:center; color:#666; font-size:9px;}
      #servicoscontent ul.lista-servicos li a:hover {color:#B896BF;}
      #servicoscontent ul.lista-servicos li.servicosdesign a {background:url(images/menu-servicos-design.png) bottom center no-repeat;}
      #servicoscontent ul.lista-servicos li.servicosseo a {background:url(images/menu-servicos-seo.png) bottom center no-repeat;}
      #servicoscontent ul.lista-servicos li.servicosmidia a {background:url(images/menu-servicos-midia-sociais.png) bottom center no-repeat;}
      #servicoscontent ul.lista-servicos li.servicosplataforma a {background:url(images/menu-servicos-midia-plataformas.jpg) bottom center no-repeat;}
      #servicoscontent ul.lista-servicos li.servicosplanejamento a {background:url(images/menu-servicos-planejamento.png) bottom center no-repeat;}
      
      #englobaservicos p { width:55%; margin-top:!0px; }
      #servicoscontent .formatacao-servicos { margin-left:50px; margin-top:20px; }
      #servicoscontent .formatacao-servicos li { background:url(images/marker-servicos.gif) left 3px no-repeat; padding-left:10px; margin-bottom:10px; }
      
      #servdesign, #servseo, #servmidias, #servplat, #servplan {width:100%; height:100%;}
      #servdesign {background:url(images/servicos-design-back.png) 97% 50% no-repeat;}
      #servdesign h2 {background:url(images/h2-design.png) bottom left no-repeat;}
      
      #servseo {background:url(images/servicos-seo-back.png) 97% 50% no-repeat;}
      #servseo h2 {background:url(images/h2-seo.png) bottom left no-repeat;}
      
      #servmidias {background:url(images/servicos-social-back.png) 97% 50% no-repeat;}
      #servmidias h2 {background:url(images/h2-social-media.png) bottom left no-repeat;}
      
      #servplat {background:url(images/servicos-plataformas-back.png) 97% 50% no-repeat;}
      #servplat h2 {background:url(images/h2-plataformas.png) bottom left no-repeat;}
      
      #servplan {background:url(images/servicos-planejamento-back.png) 97% 50% no-repeat;}
      #servplan h2 {background:url(images/h2-planejamento.png) bottom left no-repeat;}
      
      .servicosinner h2 { text-indent:-9999px; overflow:hidden; display:block; width:100%; height:26px; margin:15px; padding:15px 0 0 0; }
      .servicosinner p {width:500px; margin:10px 0; padding:0 0 0 30px; line-height:1.7em; text-align:justify;}
      
      #servicosfooter { width:100%; bottom:0; height:17px; background:url(images/graminha-outono.png) bottom left repeat; margin:-17px 0 0 0; }
      #outono { background:url(images/autumn.png) 67% bottom no-repeat; height:100%; width:1360px; }
      #outono-is-gone { /* background:url(images/outono-is-outono.png) bottom left no-repeat; */ height:100%; }
      
      .outono {background:url(images/i2g-outono.png) left top no-repeat;}

  /* 6.4 Portfolio    ===========================*/

      #portfolio {  background:url(images/line-portfolio.png) left top no-repeat; width:100%; height:100%;}
      #cases {width:740px; height:419px; background:url(images/nosso-trabalho.png) 10% 10% no-repeat; margin:25px 0 0 150px;}
      #trabalhos {overflow:hidden; width:100%; height:100%; background:url(images/backpaginas.png) left top repeat; }
      #englobatrab {width:99999px; height:100%;}
      .trabalhosinner {width:740px; height:440px; float:left;}
      
        #cases #projetos { width:90%; height:55px; }
        #cases #agencias { width:90%; height:55px; }
        #cases .projetos { margin:10px 0 10px 0;  }
        #cases .projetos li { float:left; margin:0 0 0 10px; }
        #cases .agencias { margin:10px 0 10px 0; }
        #cases .agencias li { float:left; margin:0 0 0 10px; }
        #cases .pucpr { background:url(images/pucpr.png) left top no-repeat; }
        #cases .pucpr a { text-indent:-9999px; overflow:hidden; display:block; width:40px; height:54px;  }
        #cases .habibs { background:url(images/habibs.png) left top no-repeat; }
        #cases .habibs a { text-indent:-9999px; overflow:hidden; display:block; width:130px; height:49px;  }
        #cases .universal { background:url(images/universal.png) left top no-repeat; }
        #cases .universal a { text-indent:-9999px; overflow:hidden; display:block; width:91px; height:46px;  }
        #cases .zandu { background:url(images/zandu.png) left top no-repeat; }
        #cases .zandu a { text-indent:-9999px; overflow:hidden; display:block; width:155px; height:38px;  }
        #cases .dynamo { background:url(images/dynamo.png) left top no-repeat; }
        #cases .dynamo a { text-indent:-9999px; overflow:hidden; display:block; width:106px; height:40px;  }
        #cases .estrategia { background:url(images/estrategia-digital.png) left top no-repeat; }
        #cases .estrategia a { text-indent:-9999px; overflow:hidden; display:block; width:122px; height:41px;  }
       
        #pizzabig, #thallita, #brasforme, #flora {width:100%; height:100%;}
        #flora {}
        #pizzabig {}
        #brasforme {}
        #thallita {}
      
        .trab-esquerda {width:340px; height:100%; float:left; padding:130px 0 0 30px;}
        .trab-direita {width:290px; height:100%; float:right; padding:10px 0 0 80px;}
      
        .flexa-esq, .flexa-dir {width:35px; height:25px;}
        .flexa-esq { background:url(images/flexa-esquerda.png) top right no-repeat; text-indent:-9999px; overflow:hidden; display:block; }
        .flexa-dir {margin:0 0 0 220px; background:url(images/flexa-direita.png) left top no-repeat; text-indent:-9999px; overflow:hidden; display:block; }

        #winterfooter { width:100%; bottom:0; height:360px; background:url(images/winter.png) 64% 0% no-repeat; margin:-340px 0 0 0; }
        
        .inverno { background:url(images/i2g-inverno.png) left top no-repeat; width:153px !important; height:91px !important;}

  /* 6.5 Contato    ===========================*/


      #contato {background:url(images/line-contato.png) left top no-repeat; width:100%; height:100%;}
      #contatocontent {width:697px; height:340px; padding:15px; background:url(images/backpaginas.png) left top repeat; margin:25px 0 0 150px;}
      #contatocontent .h2-contato {font:bold 20px Verdana, Arial, Helvetica, Sans-serif; color:#72A9EA; background:url(images/h2-contato.png) left top no-repeat; text-indent:-9999px; overflow:hidden; display:block;  width:450px; height:20px; margin:15px 0 20px 15px}
      
      #cform { width:430px; float:left; margin-left:10px; }
      #inf-contact { width:220px; float:left; margin:17px 0 0 10px; }
      #inf-contact li { margin-bottom:10px; }
      #inf-contact li.phone { background:url(images/phone.png) left top no-repeat; padding:12px 0 13px 47px; color:#C92813; font:bold 14px Arial, Helvetica, sans-serif; }
      #inf-contact li.end { background:url(images/end.png) 7px top no-repeat; padding:5px 7px 9px 37px; text-align:center; color:#333; font:bold 11px Arial, Helvetica, sans-serif; }
      
      
      #cabine {width:100%; height:100%; background:url(images/backcontato.png) 55% bottom no-repeat;}
      #contatofooter { width:100%; bottom:0; height:58px; background:url(images/contato-footer.png) top left repeat; margin:-58px 0 0 0; } 
      
      .dourado {background:url(images/i2g-dourado.png) left top no-repeat;}