Your IP : 216.73.216.85

Current Path : /home/smartconb/www/armencom33/tmp/install_6756c2cce8819/media/css/styles/
Upload File :
Current File : /home/smartconb/www/armencom33/tmp/install_6756c2cce8819/media/css/styles/lumen.scss

$twitter: #3894b6;
$twitter_a: #00aced;

$facebook: #526282;
$facebook_a: #3b5998;

$pinterest: #a4484c; 
$pinterest_a: #cb2027;

$linkedin: #2a6d8c; 
$linkedin_a: #007bb6;

$gplus: #b66a60; 
$gplus_a: #dd4b39;

$wapp: #43d854; 
$wapp_a: #05e21f;

$tumblr: #41515f; 
$tumblr_a: #32506d;

$vk: #57687d; 
$vk_a: #45668e;

$tgram: #127fb6; 
$tgram_a: #0088cc;

$flipb: #c21010; 
$flipb_a: #8c1010;

$delio: #257acc; 
$delio_a: #1e61a3;

$reddit: #ea6a3a; 
$reddit_a: #ff4500;

$email: #257acc; 
$email_a: #0076e8;


/**************************/
/******   BTN COLOR   *****/
/**************************/

.s2s_contenedor{
  //generic
  .s2s_btn{
    &.active{
      .s2s_flecha{opacity:1}
    }
    a.s2s_icon{
      color:#fff;
      padding-bottom: 4px;
    }
    .s2s_flecha{content:' ';position:absolute;border:8px solid;border-color:#D6D6D6 transparent transparent transparent;z-index:99999;top:-1px;-webkit-transition:opacity 300ms;-webkit-transition-delay:100ms;opacity:0}

  }
  .s2s_twitter{
    $current: $twitter;
    $current_a: $twitter_a;

    background-color:$current;
    box-shadow: 0 -3px 0px 0px darken($current, 10%) inset;
    &:hover{
      background-color:$current_a;
      box-shadow: 0 -1px 0px 0px darken($current, 10%) inset;
    }
    &.active{
      background-color:$current_a;
      box-shadow: 0 2px 0px 0px darken($current, 10%) inset;
    }
    .s2s_flecha{
      border-color: $current_a transparent transparent transparent;
    }
    .s2s_a_btn{
      background-color:$current;
      &:hover{
        background-color:$current_a;
      }
    }
  }
  .s2s_facebook {
    $current: $facebook;
    $current_a: $facebook_a;

    background-color:$current;
    box-shadow: 0 -3px 0px 0px darken($current, 10%) inset;
    &:hover{
      background-color:$current_a;
      box-shadow: 0 -1px 0px 0px darken($current, 10%) inset;
    }
    &.active{
      background-color:$current_a;
      box-shadow: 0 2px 0px 0px darken($current, 10%) inset;
    }
    .s2s_flecha {
        border-color: $facebook_a transparent transparent transparent;
    }
  }

  .s2s_pinterest {
    $current: $pinterest;
    $current_a: $pinterest_a;

    background-color:$current;
    box-shadow: 0 -3px 0px 0px darken($current, 10%) inset;
    &:hover{
      background-color:$current_a;
      box-shadow: 0 -1px 0px 0px darken($current, 10%) inset;
    }
    &.active{
      background-color:$current_a;
      box-shadow: 0 2px 0px 0px darken($current, 10%) inset;
    }
      .s2s_flecha {
        border-color: $pinterest_a transparent transparent transparent;
    }

  }

  .s2s_linkedin {
    $current: $linkedin;
    $current_a: $linkedin_a;

    background-color:$current;
    box-shadow: 0 -3px 0px 0px darken($current, 10%) inset;
    &:hover{
      background-color:$current_a;
      box-shadow: 0 -1px 0px 0px darken($current, 10%) inset;
    }
    &.active{
      background-color:$current_a;
      box-shadow: 0 2px 0px 0px darken($current, 10%) inset;
    }
      .s2s_flecha {
        border-color: $linkedin_a transparent transparent transparent;
    }
  }

  .s2s_gplus {
    $current: $gplus;
    $current_a: $gplus_a;

    background-color:$current;
    box-shadow: 0 -3px 0px 0px darken($current, 10%) inset;
    &:hover{
      background-color:$current_a;
      box-shadow: 0 -1px 0px 0px darken($current, 10%) inset;
    }
    &.active{
      background-color:$current_a;
      box-shadow: 0 2px 0px 0px darken($current, 10%) inset;
    }
      .s2s_flecha {
        border-color: $gplus_a transparent transparent transparent;
    }

  }

  .s2s_wapp {
    $current: $wapp;
    $current_a: $wapp_a;

    background-color:$current;
    box-shadow: 0 -3px 0px 0px darken($current, 10%) inset;
    &:hover{
      background-color:$current_a;
      box-shadow: 0 -1px 0px 0px darken($current, 10%) inset;
    }
    &.active{
      background-color:$current_a;
      box-shadow: 0 2px 0px 0px darken($current, 10%) inset;
    }
      .s2s_flecha {
        border-color: $wapp_a transparent transparent transparent;
    }
    .s2s_a_btn{
      background-color:$wapp;
      &:hover{
        background-color:$wapp_a;
      }
    }
  }

  .s2s_tumblr {
    $current: $tumblr;
    $current_a: $tumblr_a;

    background-color:$current;
    box-shadow: 0 -3px 0px 0px darken($current, 10%) inset;
    &:hover{
      background-color:$current_a;
      box-shadow: 0 -1px 0px 0px darken($current, 10%) inset;
    }
    &.active{
      background-color:$current_a;
      box-shadow: 0 2px 0px 0px darken($current, 10%) inset;
    }
      .s2s_flecha {
        border-color:  $tumblr_a transparent transparent transparent;
    }

  }

  .s2s_vk {
    $current: $vk;
    $current_a: $vk_a;

    background-color:$current;
    box-shadow: 0 -3px 0px 0px darken($current, 10%) inset;
    &:hover{
      background-color:$current_a;
      box-shadow: 0 -1px 0px 0px darken($current, 10%) inset;
    }
    &.active{
      background-color:$current_a;
      box-shadow: 0 2px 0px 0px darken($current, 10%) inset;
    }
      .s2s_flecha {
        border-color: $vk_a transparent transparent transparent;
    }

  }

  .s2s_tgram {
    $current: $tgram;
    $current_a: $tgram_a;

    background-color:$current;
    box-shadow: 0 -3px 0px 0px darken($current, 10%) inset;
    &:hover{
      background-color:$current_a;
      box-shadow: 0 -1px 0px 0px darken($current, 10%) inset;
    }
    &.active{
      background-color:$current_a;
      box-shadow: 0 2px 0px 0px darken($current, 10%) inset;
    }
      .s2s_flecha {
        border-color: $tgram_a transparent transparent transparent;
    }
    .s2s_a_btn{
      background-color:$tgram;
      &:hover{
        background-color:$tgram_a;
      }
    }
  }

  .s2s_flipb {
    $current: $flipb;
    $current_a: $flipb_a;

    background-color:$current;
    box-shadow: 0 -3px 0px 0px darken($current, 10%) inset;
    &:hover{
      background-color:$current_a;
      box-shadow: 0 -1px 0px 0px darken($current, 10%) inset;
    }
    &.active{
      background-color:$current_a;
      box-shadow: 0 2px 0px 0px darken($current, 10%) inset;
    }
      .s2s_flecha {
        border-color: $flipb_a transparent transparent transparent;
    }

  }

  .s2s_delio {
    $current: $delio;
    $current_a: $delio_a;

    background-color:$current;
    box-shadow: 0 -3px 0px 0px darken($current, 10%) inset;
    &:hover{
      background-color:$current_a;
      box-shadow: 0 -1px 0px 0px darken($current, 10%) inset;
    }
    &.active{
      background-color:$current_a;
      box-shadow: 0 2px 0px 0px darken($current, 10%) inset;
    }
      .s2s_flecha {
        border-color: $delio_a transparent transparent transparent;
    }
    .s2s_a_btn{
      background-color:$delio;
      &:hover{
        background-color:$delio_a;
      }
    }
  }

  .s2s_reddit {
    $current: $reddit;
    $current_a: $reddit_a;

    background-color:$current;
    box-shadow: 0 -3px 0px 0px darken($current, 10%) inset;
    &:hover{
      background-color:$current_a;
      box-shadow: 0 -1px 0px 0px darken($current, 10%) inset;
    }
    &.active{
      background-color:$current_a;
      box-shadow: 0 2px 0px 0px darken($current, 10%) inset;
    }
      .s2s_flecha {
        border-color: $reddit_a transparent transparent transparent;
    }
    .s2s_a_btn{
      background-color:$reddit;
      &:hover{
        background-color:$reddit_a;
      }
    }
  }

  .s2s_email {
    $current: $email;
    $current_a: $email_a;

    background-color:$current;
    box-shadow: 0 -3px 0px 0px darken($current, 10%) inset;
    &:hover{
      background-color:$current_a;
      box-shadow: 0 -1px 0px 0px darken($current, 10%) inset;
    }
    &.active{
      background-color:$current_a;
      box-shadow: 0 2px 0px 0px darken($current, 10%) inset;
    }
      .s2s_flecha {
        border-color: $email_a transparent transparent transparent;
    }
    .s2s_a_btn{
      background-color:$email;
      &:hover{
        background-color:$email_a;
      }
    }
  }
}


/**************************/
/******   BALLOON  *****/
/**************************/
.globo {
    background-color: rgba(255,255,255,0.95);
    padding: 10px;
    border: 0 solid #ccc;
    border-radius: 0px;
    box-shadow: 1px 2px 4px #aaa;

}

.s2s_balloon_top{

  .globo{
    border-bottom: solid 2px;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
    border-radius: 6px;
  }
  .s2s_twitter .globo {
      border-color: $twitter_a;
  }

  .s2s_facebook .globo {
      border-color: $facebook_a;
  }

  .s2s_pinterest .globo {
      border-color: $pinterest_a;
  }

  .s2s_linkedin .globo {
      border-color: $linkedin_a;
  }

  .s2s_gplus .globo {
      border-color: $gplus_a;
  }

  .s2s_wapp .globo {
      border-color: $wapp_a;
  }

  .s2s_tumblr .globo {
      border-color: $tumblr_a;
  }

  .s2s_vk .globo {
      border-color: $vk_a;
  }

  .s2s_email .globo {
      border-color: $email;
  }

  .s2s_reddit .globo {
      border-color: $reddit_a;
  }

  .s2s_delio .globo {
      border-color: $delio_a;
  }

  .s2s_tgram .globo {
      border-color: $tgram_a;
  }

  .s2s_flipb .globo {
      border-color: $flipb_a;
  }


}



/*boton +*/
div.s2s_mas{
  $current:#ccc;
  $current_a:#333;
  background-color:$current; 
  a i{
    color:$current_a;
  }
    background-color:$current;
    box-shadow: 0 -3px 0px 0px darken($current, 10%) inset;
    &:hover{
      background-color:$current;
      box-shadow: 0 -1px 0px 0px darken($current, 10%) inset;
    }
    &.active{
      background-color:$current;
      box-shadow: 0 2px 0px 0px darken($current, 10%) inset;
    }
}

.is_on_screen.globo{
  border-radius:4px 0 4px 4px;
}