@charset "utf-8";

/*
SETTINGS : WJ BLUE 2018 TEMPLATE

font-color:           rgb(38,38,38);
backgroun-color:      rgb(230,230,230);


- Custom blues -

light :               rgb(179,211,217);
medium-light :        rgb(67,176,179);
medium :              rgb(1,135,146);
medium-dark :         rgb(10,107,119);
dark :                rgb(0,57,74);
deep :                rgb(40,41,55);


- Custom Shadow -

grey :                rgb(166,166,166);
black :               rgba(0,0,0,0.35);


- Custom icons navigation -

Srites :             '../lib/grc/ux_icons/icons_navigation_bl.svg';
icon bars :           0% 0%;
icon close :          0% 16,667%;
icon prev :           0% 33.333%;
icon next :           0% 50%;
icon up :             0% 66.667%;
icon grip :           0% 83.333%;
icon more :           0% 100%;

*/

/* BG IMG CUSTOM */
@media (-webkit-min-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){  }


/* STYLIZED ANIMATION */
@-webkit-keyframes FadeOn{
  0%{     opacity:        0.0; }
  100%{   opacity:        1.0; }
}
@keyframes FadeOn {
  0%{     opacity:        0.0; }
  100%{   opacity:        1.0; }
}


/* BODY CUSTOM */
body{
  background-color:       rgb(230,230,230);
  color:                  rgb(38,38,38);
}


/* LEAD CUSTOM */
.lead .inside{
  color:                  rgb(38,38,38);
  background-color:       rgb(255,255,255);
}
.lead .inside nav li a,
.lead .inside nav li a:link,
.lead .inside nav li a:visited{
  color:                  rgb(38,38,38);
  background-color:       transparent;
}
.lead .inside nav li a:hover,
.lead .inside nav li a:focus,
.lead .inside nav li a:active,
.lead .inside nav li a.select{
  color:                  rgb(0,0,0);
  background-color:       transparent;
}
.lead .edge{
  color:                  rgb(38,38,38);
  background:             transparent;
}
.lead .inside + .edge{
  background:             -moz-linear-gradient( 90deg, rgba(230,230,230, 1.0), rgba(230,230,230,1.0), rgba(230,230,230,0.6), rgba(230,230,230,0.3), rgba(230,230,230,0.0) );
  background:             -o-linear-gradient( 90deg, rgba(230,230,230, 1.0), rgba(230,230,230,1.0), rgba(230,230,230,0.6), rgba(230,230,230,0.3), rgba(230,230,230,0.0) );
  background:             -webkit-linear-gradient( 90deg, rgba(230,230,230, 1.0), rgba(230,230,230,1.0), rgba(230,230,230,0.6), rgba(230,230,230,0.3), rgba(230,230,230,0.0) );
  background:             linear-gradient( 90deg, rgba(230,230,230, 1.0), rgba(230,230,230,1.0), rgba(230,230,230,0.6), rgba(230,230,230,0.3), rgba(230,230,230,0.0));
}
.lead .edge + .edge{
  background:             -moz-linear-gradient( -90deg, rgba(230,230,230, 1.0), rgba(230,230,230,1.0), rgba(230,230,230,0.6), rgba(230,230,230,0.3), rgba(230,230,230,0.0) );
  background:             -o-linear-gradient( -90deg, rgba(230,230,230, 1.0), rgba(230,230,230,1.0), rgba(230,230,230,0.6), rgba(230,230,230,0.3), rgba(230,230,230,0.0) );
  background:             -webkit-linear-gradient( -90deg, rgba(230,230,230, 1.0), rgba(230,230,230,1.0), rgba(230,230,230,0.6), rgba(230,230,230,0.3), rgba(230,230,230,0.0) );
  background:             linear-gradient( -90deg, rgba(230,230,230, 1.0), rgba(230,230,230,1.0), rgba(230,230,230,0.6), rgba(230,230,230,0.3), rgba(230,230,230,0.0));
}

header.lead .inside{
  box-shadow:             0px 4px 12px rgba(0,0,0,0.35);
}
header.lead .inside .apex .title{
  color:                  rgb(230,230,230);
  background-color:       transparent;
  opacity:                0.5;
}
header.lead .inside .menu li a,
header.lead .inside .menu li a:link,
header.lead .inside .menu li a:hover{
  color:                  rgb(38,38,38);
  background-color:       transparent;
  border-bottom:          2px solid rgba(0,104,114,0.0);
  -webkit-transition:     border-bottom 0.2s ease-in-out;
  -moz-transition:        border-bottom 0.2s ease-in-out;
  -o-transition:          border-bottom 0.2s ease-in-out;
  transition:             border-bottom 0.2s ease-in-out;
}
header.lead .inside .menu li a:hover,
header.lead .inside .menu li a:focus,
header.lead .inside .menu li a:active,
header.lead .inside .menu li a.select{
  color:                  rgb(0,0,0);
  background-color:       transparent;
  border-bottom:          2px solid rgba(0,104,114,1.0);
}
header.lead .inside .menu li a + span{
  -webkit-transition:     opacity 0.2s ease-in-out;
  -moz-transition:        opacity 0.2s ease-in-out;
  -o-transition:          opacity 0.2s ease-in-out;
  transition:             opacity 0.2s ease-in-out;
}
header.lead button{
  background-color:       transparent;
  background-image:       url('../../lib/grc/ux_icons/icons_navigation_bl.svg');
  background-position:    0 0;
  background-repeat:      no-repeat;
  background-size:        44px 308px;
  -webkit-filter:         grayscale(100%);
  filter:                 grayscale(100%);
  -webkit-transition:     -webkit-filter 0.25s ease-in-out;
  -moz-transition:        filter 0.25s ease-in-out;
  -o-transition:          filter 0.25s ease-in-out;
  transition:             filter 0.25s ease-in-out;
}
header.lead button:hover{
  cursor:                 pointer;
  -webkit-filter:         grayscale(0);
  filter:                 grayscale(0);
}

footer.lead .inside{
  box-shadow:             0px -2px 12px rgba(0,0,0,0.35);;
}
footer.lead .inside p a,
footer.lead .inside p a:link,
footer.lead .inside p a:visited{
  color:                  rgb(10,107,119);
  background-color:       transparent;
}
footer.lead .inside p a:hover,
footer.lead .inside p a:focus,
footer.lead .inside p a:active,
footer.lead .inside p a.select{
  color:                  rgb(0,57,74);
  background-color:       transparent;
}


/* MAIN CUSTOM */
main h1{
  color:                  rgb(207,207,207);
  background-color:       transparent;
}
main h2 {
  color:                  rgb(10,107,119);
  background-color:       transparent;
}
main h3{
  color:                  rgb(0,0,0);
  background-color:       transparent;
}
main p a, 
main p a:link, 
main p a:visited, 
main li a,
main li a:link,
main li a:visited{
  color:                  rgb(10,107,119);
  background-color:       transparent;
}
main p a:hover, 
main p a:focus, 
main p a:active, 
main li a:hover,
main li a:focus,
main li a:active{
  color:                  rgb(0,57,74);
  background-color:       transparent;
}
main header + section{
  margin-top:             -50px;
}

/* COMMON CUSTOM */
main .picture img,
main figure img{
  box-shadow:             3px 4px 4px rgb(166,166,166);
  border:                 1px solid rgb(38,38,38);
}

/* PRODUCT PAGE TITLE CUSTOM */
main .title time span{
  padding-left:           12px;
  padding-right:          12px;
}
main .title time{
  color:                  inherit;
  background-color:       transparent;
  background-image:       none;
  background-image:       -moz-linear-gradient( 90deg, rgba(0,57,74,0.0), rgba(0,57,74,1.0), rgba(10,107,119,1.0), rgba(0,57,74,1.0), rgba(0,57,74,0.0) );
  background-image:       -o-linear-gradient( 90deg, rgba(0,57,74,0.0), rgba(0,57,74,1.0), rgba(10,107,119,1.0), rgba(0,57,74,1.0), rgba(0,57,74,0.0) );
  background-image:       -webkit-linear-gradient( 90deg, rgba(0,57,74,0.0), rgba(0,57,74,1.0), rgba(10,107,119,1.0), rgba(0,57,74,1.0), rgba(0,57,74,0.0) );
  background-image:       linear-gradient( 90deg, rgba(0,57,74,0.0), rgba(0,57,74,1.0), rgba(10,107,119,1.0), rgba(0,57,74,1.0), rgba(0,57,74,0.0) );
  background-position:    center;
  background-size:        320px 1px;
  background-repeat:      no-repeat;
  text-align:             center;
  display:                block;
}
main .title time span{
  color:                  rgb(38,38,38);
  background-color:       rgb(230,230,230);
}

/* PRODUCT BOXES CUSTOM */
main .product{
  height:                 222px;
  overflow:               hidden;
  padding-top:            3px;
}
main .product .preview{
  height:                 206px;
}
main .product .preview span {
  box-shadow:             3px 4px 4px rgb(166,166,166);
}
main .product .label{
  text-align:             right;
  color:                  rgb(38,38,38);
  background-color:       rgb(230,230,230);
  padding-bottom:         6px;
  width:                  210px;
  height:                 auto;
  -ms-transform-origin:     0% 0%; 
  -webkit-transform-origin: 0% 0%; 
  transform-origin:         0% 0%;
  -ms-transform:          rotate(-90deg);
  -webkit-transform:      rotate(-90deg);
  transform:              rotate(-90deg);
}
main .product .label time,
main .product .label strong{
  text-shadow:            -3px 4px 2px rgb(166,166,166);
}
main .product .label time{
  color:                  rgb(10,107,119);
  background-color:       transparent;
  background-image:       none;
  background-image:       -moz-linear-gradient( 90deg, rgb(0,0,0), rgb(0,0,0) );
  background-image:       -o-linear-gradient( 90deg, rgb(0,0,0), rgb(0,0,0) );
  background-image:       -webkit-linear-gradient( 90deg, rgb(0,0,0), rgb(0,0,0) );
  background-image:       linear-gradient( 90deg, rgb(0,0,0), rgb(0,0,0) );
  background-position:    3% 50%;
  background-size:        76px 1px;
  background-repeat:      no-repeat;
}
main .product .label span img{
  box-shadow:             3px 4px 2px rgb(166,166,166);
  -ms-transform:          rotate(90deg);
  -webkit-transform:      rotate(90deg);
  transform:              rotate(90deg);
}
main .product .label .edge{
  color:                  #000;
  background-color:       rgba(230,230,230,1.0);
  width:                  40px;
  height:                 40px;
  position:               absolute;
  top:                    100%;
  right:                  4px;
}
main .product .label .edge + .edge{
  background-color:       rgba(230,230,230,0.75);
  right:                  44px;
}
main .product .label .edge + .edge + .edge{
  background-color:       rgba(230,230,230,0.5);
  right:                  84px;
}
main .product .label .edge + .edge + .edge + .edge{
  background-color:       rgba(230,230,230,0.25);
  right:                  124px;
}

/* FORM CUSTOM */
#hello fieldset p.err span{
  background-color:       rgb(193,38,45);
}
#hello fieldset p.fly span{
  background-color:       rgb(10,107,119);
}
#hello div input[type="submit"]:not([disabled]):hover{
  color:                  rgb(10,107,119);
}

/* STIKER BOXES CUSTOM */
main .sticker{
  color:                  inherit;
  background:             rgb(0,57,74);
  background:             -moz-linear-gradient( 135deg, rgb(10,107,119), rgb(0,57,74) );
  background:             -o-linear-gradient( 135deg, rgb(10,107,119), rgb(0,57,74) );
  background:             -webkit-linear-gradient( 135deg, rgb(10,107,119), rgb(0,57,74) );
  background:             linear-gradient( 135deg, rgb(10,107,119), rgb(0,57,74) );
  padding:                24px;
  border-radius:          6px;
  box-shadow:             3px 4px 4px rgb(166,166,166);
  border:                 1px solid rgb(40,41,55);
}
main .sticker *{
  color:                  rgb(255,255,255) !important;
  background:             transparent;
}

/* WIDGET CUSTOM */
.widget li{
  opacity:                0.7;
  -webkit-transition:     opacity 0.2s ease-in-out;
  -moz-transition:        opacity 0.2s ease-in-out;
  -o-transition:          opacity 0.2s ease-in-out;
  transition:             opacity 0.2s ease-in-out;
}
.widget li:hover,
.widget li.select{
  opacity:                1.0;
}
.widget li a{
  border-radius:          18px;
  border:                 1px solid rgb(0,57,74);
}
.widget#languages li a{
  color:                  rgb(38,38,38);
  background-color:       transparent;
}


/* TOOLTIP CUSTOM */
.tooltip .tip{
  background-image:       url('../img/bg/cursor_line_hz_bk.gif');
  background-repeat:      no-repeat;
  background-size:        12px 1px;
}
.tooltip:hover .tip{
  -webkit-animation:      FadeOn 0.3s ease-in;
  animation:              FadeOn 0.3s ease-in;
}
.tooltip .tip.right{
  padding-left:           24px;
  background-position:    6px 11px;
}
.tooltip .tip.left{
  margin-right:           6px;
  padding-right:          18px;
  background-position:    100% 50%;
}
.tooltip .tip .box{
  color:                  rgb(255,255,255);
  box-shadow:             0 4px 8px rgba(0,0,0,0.35);;
  background:             rgb(0,57,74);
  background:             -moz-linear-gradient( 90deg, rgb(10,107,119), rgb(0,57,74) );
  background:             -o-linear-gradient( 90deg, rgb(10,107,119), rgb(0,57,74) );
  background:             -webkit-linear-gradient( 90deg, rgb(10,107,119), rgb(0,57,74) );
  background:             linear-gradient( 90deg, rgb(10,107,119), rgb(0,57,74) );
}


/* BYPASS CUSTOM */
.bypass .box{
  background-image:       url('../../lib/grc/ux_icons/icons_tip_cursors_bl.svg');
  background-size:        12px 60px;
  background-repeat:      no-repeat;
  -webkit-filter:         grayscale(75%);
  filter:                 grayscale(75%);
  -webkit-transition:     -webkit-filter 0.25s ease-in-out;
  -moz-transition:        filter 0.25s ease-in-out;
  -o-transition:          filter 0.25s ease-in-out;
  transition:             filter 0.25s ease-in-out;
}
.bypass.prev .box{
  background-position:    15px 0px;
  padding-left:           44px;
}
.bypass.next .box{
  background-position:    100% 100%;
  margin-right:           15px;
  padding-right:          29px;
}
.bypass .box:hover {
  -webkit-filter:         grayscale(0);
  filter:                 grayscale(0);
}
.bypass .box:hover span{
  color:                  rgb(10,107,119);
  box-shadow:             0 2px 6px rgba(0,0,0,0.35);
  background-color:       rgba(255,255,255,0.85);
  -webkit-animation:      FadeOn 0.2s ease-in;
  animation:              FadeOn 0.2s ease-in;
}