/* =============================================================================
   HTML5 Boilerplate CSS: h5bp.com/css
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

svg:not(:root) { overflow: hidden; }

figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }

/******************************************************/


body{ font:16px/26px Helvetica, Helvetica Neue, Arial; }

html, body { height: 100%; margin:0; padding:0;}

.wrapper{
	width:95%;
	margin:0 2%;
}

.mini-wrapper{
  position:relative;
  width:900px;
  margin:0 auto;
}

.loader{
  position:fixed;
  top:50%;
  left:50%;
  margin:-20px 0 0 -20px;
}

#flags  img
{
    width:21px;
    height:18px;
}
  
#facebook{
   width:24px;
   position:relative;
   top:-2px;
   height:24px;
}


.animated {
  -webkit-animation-duration: 0.7s;
     -moz-animation-duration: 0.7s;
      -ms-animation-duration: 0.7s;
       -o-animation-duration: 0.7s;
          animation-duration: 0.7s;
  -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
      -ms-animation-fill-mode: both;
       -o-animation-fill-mode: both;
          animation-fill-mode: both;
}

.isAnimated{
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.4s ease;
}


#information{
    position: absolute;
    z-index: 110;
    margin-top:19px;
}


.isAnimated2{
  -webkit-transition: all 0.8s cubic-bezier(0.860, 0.000, 0.070, 1.000);
  -moz-transition: all 0.8s cubic-bezier(0.860, 0.000, 0.070, 1.000);
  -o-transition: all 0.8s cubic-bezier(0.860, 0.000, 0.070, 1.000);
  -ms-transition: all 0.8s cubic-bezier(0.860, 0.000, 0.070, 1.000);
  transition: all 0.8s cubic-bezier(0.860, 0.000, 0.070, 1.000);
}

.isRotated{
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}

.noHeight{
  height:0px!important;
}

.noWidth{
  width:0px!important;
}

.noOpacity{
  opacity:0!important;
}

.noVisibility{
  visibility:hidden;
}

.isOpaque{
  opacity:0!important;
}

.whiteBG{
  background-color:white!important;
}

.isHidden{
  display:none!important;
}

.isSmall{
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -o-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
}

.isSmallSlider{
  height:495px!important;
}

.isSmallSliderImg{
  width:997px;
  height:495px;
}

.hasBigBG{
  -webkit-background-size:100%!important;
  -moz-background-size:100%!important;
  background-size:100%!important;
  -webkit-transition: background-size 0.5s;
  -moz-transition: background-size 0.5s;
  -o-transition: background-size 0.5s;
  -ms-transition: background-size 0.5s;
  transition: background-size 0.5s;
}

/* ==============
    MOBILE: Menu
   ============== */

nav{
    float:right;
}


nav a{
	display:block;
	margin-bottom:10px;
	padding:15px 0;
  border-radius:20px;
  border:3px solid white;
	color:#333;
	text-align:center;
	text-decoration:none;
	font-weight:normal;
}

nav a:visited{
	color:#333;
}

nav a:hover{
  background:#8ec700;
  color:white;
  border:3px solid #ebf5d1;

	text-decoration:none;
}

.current-mini-nav{
  background:#8EC700;
  box-shadow:0 5px 10px -5px #111111 inset;
}

.current-mini-nav a{
  color:white!important;
  text-shadow: 0 1px 0 #777!important;
}

.negativeTop{
  top:-50px!important;
  visibility:hidden;
}

#mini-nav{
  position:fixed;
  top:-1px;
  left:0;
  height:40px;
  width:100%;
  z-index:999;
  padding:0;
  line-height:40px;
  border-bottom:5px solid #8EC700;
  background:#ffffff;
  background:rgba(255, 255, 255, 0.95);
  box-shadow:0 0 10px 0 #222;
}
  #mini-nav ul{
    margin:0 auto;
    padding:0;
    text-align:center;
  }
  #mini-nav ul li{
    font-size:14px;
    padding:0 15px;
    list-style:none;
    display:inline-block;
  }
    #mini-nav ul li:hover{
    }
      #mini-nav ul li a, #mini-nav ul li span{
        display:block;
        font-weight:bold;
        color:#555;
        text-decoration:none;
        cursor:pointer;
      }

/* ==============
    MOBILE: Main
   ============== */

#footer-container footer{
	color:#666;
	padding:20px 0;
  text-align:center;
}

/* ===============
    ALL: IE Fixes
   =============== */

.lt-ie8 #header-container{padding:20px 0 20px;}
.lt-ie8 #title{margin:0;}
.lt-ie8 nav a{margin:0 5px;}


/* ===== Primary Styles ========================================================
   Author: Kostas Vasileiou ~ kostas@konv.me
   ========================================================================== */

#title{
  font-family:"pt-sans-narrow";
  font-size:42px;
  color:#444444;
}

#logolink h1{
    position:relative;
    margin-left:50px;
}


  #title span{
    font-family:"pirulen",sans-serif;
    font-size:14px;
    font-weight:normal;
  }
    #title span>span{
      color:#8ec700;
    }

.current-nav a{
  background:#8ec700;
  color:white!important;
  border:3px solid #ebf5d1;
}

div section{
  padding:30px 0 50px;
  z-index:2;
}
  div section>header{
    margin-bottom:60px;
    color:#444;
    text-shadow:0 1px 0 white;
    text-align:center;
  }
  div section>header h1{
    margin:15px 0;
    font-size:32px;
    line-height:36px;
    width:100%;
  }

   #apps section .app_phrase{position:relative; font-size:21px; }
   #subscription section .app_phrase{position:relative; font-size:21px; }
   #subscription_comp section .app_phrase{position:relative; font-size:21px; }
  /*
      GMAPS CSS RULES
                        */
  #map{
    display:none;
    position:fixed;
    width:100%;
    height:100%;
    background-color:white;
    z-index:9999;
    -webkit-transition:background-color 0.5s linear;
    -moz-transition:background-color 0.5s linear;
    -o-transition:background-color 0.5s linear;
    -ms-transition:background-color 0.5s linear;
    transition:background-color 0.5s linear;
  }
    #mapmap{
      position:relative; display: block; width: 100%; height: 100%; background-color:#fff!important;
    }

    .map-info{
      display:none;
      position:absolute;
      top:20px;
      right:20px;
      background:#fff;
      background:rgba(255,255,255,0.88);
      color:#444;
      box-shadow:0 5px 20px 0 #888;
      z-index:9999;
    }
      .map-info > div {
        padding:15px 20px;
        margin:0!important;
      }
        .map-info-header{
          background:#c1e5ff;
          font-family:"pirulen",sans-serif;
        }
        .map-info h1{
          margin:0 0 5px;
          font-size:26px;
          color:#444;         
        }
        .map-info h2{
          margin:0;

        }
        .map-info span{
          display:block;
          font-size:14px;
          border-top:1px dotted #ddd;
          line-height: 20px;
          margin: 10px 0;
          padding-top:10px;
        }
          .map-info strong{
            font-size:16px;
          }
        .map-info a{
          text-decoration:none;
          border-bottom: 1px dotted #444;
          color:#444;
        }
        .map-info .button {
          display: inline-block;
          *display: inline;
          width:100%;
          padding: 10px 0;
          margin-bottom: 0;
          margin-top: 10px;
          font-weight:bold;
          font-size: 16px;
          line-height: 18px;
          color: #fff;
          text-align: center;
          text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
          vertical-align: middle;
          cursor: pointer;
          background-color: #da4f49;
          background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f);
          background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
          background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
          background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
          background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
          background-image: linear-gradient(top, #ee5f5b, #bd362f);
          background-repeat: repeat-x;
          filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0);
          filter: progid:dximagetransform.microsoft.gradient(enabled=false);
          -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
             -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
                  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        }
          .map-info .button:hover{
            background-color:#bd362f;
            background-position: 0 -15px;
            text-decoration: none;
          }


  /*
      SMALL CONTACT (TOP) CSS RULES
                        */
  #contact{
    display:none;
    background:#555;
    color:#fff;
  }
  #contact section{
    width:900px;
    padding:60px 0;
  }
    #contact .map-info{
      box-shadow:0 5px 20px 0 #555;
      right:0;
      top:60px;
    }
      #contact h1{
        font-size:32px;
        margin:0 0 15px;
      }
      #contact h2{
        font-size:18px;
        margin:0;
      }
      #contact span{
        display:block;
        font-size:14px;
        margin:0;
      }
      #contact img{
        display:block;
        -webkit-transition: box-shadow 0.5s;
        -moz-transition: box-shadow 0.5s;
        -o-transition: box-shadow 0.5s;
        -ms-transition: box-shadow 0.5s;
        transition: box-shadow 0.5s;
      }
        .shadowImg{
          -webkit-box-shadow:0 30px 40px 0 #333333;
          -moz-box-shadow:0 30px 40px 0 #333333;
          box-shadow:0 30px 40px 0 #333333;
          -webkit-transition: box-shadow 0.5s;
          -moz-transition: box-shadow 0.5s;
          -o-transition: box-shadow 0.5s;
          -ms-transition: box-shadow 0.5s;
          transition: box-shadow 0.5s;
        }
      #contact button{
        float:left;
        width:300px;
        height:40px;
        margin:0;
        border:none;
        color:#fff;
        font-weight:bold;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        box-shadow:0 4px 5px -2px #444444 inset;
        border-bottom:3px solid darkGreen;
        border-bottom-left-radius:6px;
        border-bottom-right-radius:6px;
        background-color: #5bb75b;
        background-image: -ms-linear-gradient(top, #62c462, #51a351);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
        background-image: -webkit-linear-gradient(top, #62c462, #51a351);
        background-image: -o-linear-gradient(top, #62c462, #51a351);
        background-image: -moz-linear-gradient(top, #62c462, #51a351);
        background-image: linear-gradient(top, #62c462, #51a351);
        background-repeat: repeat-x;
        filter: progid:dximagetransform.microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0);
        filter: progid:dximagetransform.microsoft.gradient(enabled=false);
      }
        #contact button:hover{
          background-color: #51a351;
        }
      #contact .map-info span{
        padding:10px 0;
      }


  /*
      SLIDER CSS RULES
                        */
  .slideRightHandler{
    position:absolute;
    top:0;
    right:-100px;
    height:100%;
    width:200px;
    background:url(../../common/images/slide-right-uh.png) no-repeat center;
    z-index:4;
    cursor:pointer;
  }

  .slideRightHandler:hover{
    background:rgba(0,0,0,0.5) url(../../common/images/slide-right.png) no-repeat center;
    right:0;
  }

  .slideLeftHandler{
    display:none;
    position:absolute;
    top:0;
    left:-100px;
    height:100%;
    width:200px;
    background:url(../../common/images/slide-left-uh.png) no-repeat center;
    z-index:4;
    cursor:pointer;
  }

  .slideLeftHandler:hover{
    background:rgba(0,0,0,0.5) url(../../common/images/slide-left.png) no-repeat center;
    left:0;
  }

  #slider{
    background-color:#000;
    position:relative;
    overflow:hidden;
    z-index:1;
    height:725px;
    width:100%;
    
  }
    #slider section{
      position:absolute;
      padding:0;
      top:0;
      left:0;
      margin:0;
      width:6000px;
    }
      #slider section > article{
        position:relative;
        float:left;
        opacity:0.4;
        -webkit-transition: opacity 0.8s ease;
        -moz-transition: opacity 0.8s ease;
        -o-transition: opacity 0.8s ease;
        -ms-transition: opacity 0.8s ease;
        transition: opacity 0.8s ease;
      }
      #slider .active-slider{
        opacity:1;
        -webkit-transition: opacity 0.8s ease;
        -moz-transition: opacity 0.8s ease;
        -o-transition: opacity 0.8s ease;
        -ms-transition: opacity 0.8s ease;
        transition: opacity 0.8s ease;
      }
    #slider > span{
      position:absolute;
      bottom:0;
      left:0;
      width:100%;
      height:70px;
      background:url(../../common/images/slider-slogan.png) repeat;
      color:white;
      line-height:70px;
      font-size: 22px;
      font-family:georgia,"times new roman",serif;
      font-style:italic;
      text-align:center;
      text-shadow:0px 1px 0px #666;
      z-index:3;
    }

    /**** SLIDER ANIMATED ELEMENTS ****/
    #slider1{
      position:absolute;
      left:50%;
      top:50%;
      margin-left:-200px;
      margin-top:-200px;
      width:400px;
      height:400px;
    }
      #slider1 > img{
        display:none;
        position:absolute;
        top:0;
        left:0;
      }

    #slider3{
      position:absolute;
      top:0;
      left:0;
      padding:20px 35px;
      background:rgba(0,0,0,0.5);
      color:white;
      font-size:24px;
    }

    #slider2{
      position:absolute;
      left:0;
      bottom:-800px;
    }
      .popImg{
       bottom:0!important;
      }

      
      #slider2-content{
        position:absolute;
        top:0;
        right:0;
      }
        #slider2-content h1{
          margin:0;
          padding:15px 25px;
          color:white;
          background-color:rgba(0,0,0,0.4);
          font-size:28px;
        }
        #slider2-content ul{
          margin:0;
          padding:10px 25px 15px;
          background-color:rgba(0,0,0,0.3);
          color:white;
          list-style-image:url("../../common/images/Tick16.png")
        }
          #slider2-content ul li{
            padding-top:5px;
            margin-left:25px;
          }


  /*
      POINTS CSS RULES
                        */
  #points{
    background:white;
    border-bottom:1px solid #ccc;
    border-top:1px solid white;
    text-align:center;
    width:100%;
  }
    #points section{
      -webkit-transition: background-size 0.5s ease;
      -moz-transition: background-size 0.5s ease;
      -o-transition: background-size 0.5s ease;
      -ms-transition: background-size 0.5s ease;
      transition: background-size 0.5s ease;
      width:100%;
    }

    #points section>span{
        display:block;
        padding:0 10% 30px;
        font-size:18px;
        font-family:Georgia, "Times New Roman", serif;
        font-style:italic;
        text-align:justify;
      }
    #points article{
      float:left;
      height:300px;
      margin-bottom:20px;
      padding:20px 0;
      border-radius:0px;
      border:1px solid transparent;
      border-radius:4px;
      cursor:default;
    }
      #points article:hover{
        background:#fff;
        border:1px solid #999;
        -webkit-box-shadow:0 0 15px 0 #666;
        -moz-box-shadow:0 0 15px 0 #666;
        box-shadow:0 0 15px 0 #666;
      }
      #points article header{
        padding-top:10px;
        font-size:24px;
        font-weight:bold;
        color:#444;
        text-shadow:0 1px 0 white;
      }
      #points article div{
        padding:5px 20px;
        font-size:14px;
        line-height:20px;
        
      }

    #points button{
      width:450px;
      height:44px;
      background:url(../../common/images/points-button.png) top left;
      font-size:18px;
      color:#525901;
      text-shadow:0 1px 0 rgba(255,255,255,0.4);
      border:none!important;
      outline:none!important;
    }
      #points button:hover{
        background:url(../../common/images/points-button.png) bottom left;
      }
      #points button:active{
        background-position:0px 88px;
      }
    #points span{
      font-family:georgia,"Times New Roman", serif;
      font-size:16px;
      font-style:italic;
      color:#565656;
    }


  /*
      FEATURES CSS RULES
                        */
  #features{
    background:#f7f7f7;
    padding-bottom:10px;
    border-bottom:1px solid #ddd;
    border-top:1px solid white;
  }
    #features section>header{
      margin-bottom:15px;
    }
      #features section>header>span{
        display:block;
        padding:0 10% 30px;
        font-size:18px;
        font-family:Georgia, "Times New Roman", serif;
        font-style:italic;
        text-align:justify;
      }
    #features section>div{
      padding:0 40px 40px;
      width:948px;
      background:white;
      border:1px solid #ddd;
      border-radius: 3px;
    }
      #features section>div>div{
        padding-top:20px;
        text-align:center;
      }
      #features section>div article{
        margin-bottom:10px;
        padding:65px 35px;
        display:block;
        overflow:hidden;
        text-align:justify;
      }
        #features section>div article:first-child{
          background:none;
        }
          #features section>div article:first-child aside{
            padding-top:40px;
          }
          #features section>div .xtra-width header{
            width:100%;
          }
            #features section>div .xtra-width header h2{
              font-size:32px;
              padding-bottom:25px;
              line-height:36px;
              text-align:center;
            }
              #features section>div .xtra-width header img{
                vertical-align:middle;
                padding-right:10px;
                margin-top:-6px;
              }
            #features section>div .xtra-width ul{
              list-style:none;
              margin:0;
              padding-left:25px;
              overflow:hidden;
            }
              #features section>div .xtra-width ul li{
                padding:0 0 15px;
                list-style-image: url(../../common/images/Tick16.png);
                text-shadow:0px 1px 0 #f5f5f5;
              }
                #features section>div .xtra-width ul li strong{
                  font-style:italic;
                }
          #features section>div .xtra-styled header{
            float:right;
            width:80%;
          }
          #features section>div .xtra-styled aside{
            float:left;
          }
        #features section>div article header{
          float:left;
          width:70%;
          color:#444;
        }
          #features section>div article header h2{
            font-size:26px;
            margin:0;
            padding-bottom:10px;
          }
            #features section>div article header strong{
              font-style:italic;
            }
        #features section>div article aside{
          float:right;
        }
        #features section>div article ul{
          margin:0.5em 0;
          padding-left:20px;
        }
        
       
        
        
        #subscription section>div article header{
          float:left;
          width:70%;
          color:#444;
        }
        
        #subscription section>div article header h2{
            font-size:26px;
            margin:0;
            padding-bottom:10px;
          }
            #subscription section>div article header strong{
              font-style:italic;
        }
        
        #subscription section>div article aside{
          float:right;
        }
        
        #subscription section>div article ul{
          margin:0.5em 0;
          padding-left:20px;
        }
        
        #subscription_comp section>div article header{
          float:left;
          width:70%;
          color:#444;
        }
        
        #subscription_comp section>div article header h2{
            font-size:26px;
            margin:0;
            padding-bottom:10px;
          }
            #subscription_comp section>div article header strong{
              font-style:italic;
        }
        
        #subscription_comp section>div article aside{
          float:right;
        }
        
        #subscription_comp section>div article ul{
          margin:0.5em 0;
          padding-left:20px;
        }
        

        
        
  /*
      APPS CSS RULES
                        */
  #apps{
    background:white;
    border-bottom:1px solid #ccc;
    border-top:1px solid white;
    text-align:center;
  }
    #apps section{
      -webkit-transition: background-size 0.5s ease;
      -moz-transition: background-size 0.5s ease;
      -o-transition: background-size 0.5s ease;
      -ms-transition: background-size 0.5s ease;
      transition: background-size 0.5s ease;
    }
    #apps article{
      float:left;
      height:200px;
      margin-bottom:50px;
      padding:20px 0;
      border-radius:0px;
      border:1px solid transparent;
      border-radius:4px;
      cursor:default;
    }
      #apps article:hover{
        background:#fff;
        border:1px solid #999;
        -webkit-box-shadow:0 0 15px 0 #666;
        -moz-box-shadow:0 0 15px 0 #666;
        box-shadow:0 0 15px 0 #666;
      }
      #apps article header{
        padding-top:10px;
        font-size:24px;
        font-weight:bold;
        color:#444;
        text-shadow:0 1px 0 white;
      }
      #apps article div{
        padding:5px 50px;
        font-size:14px;
        line-height:20px;
      }

    
      
    #apps span{
      font-family:georgia,"Times New Roman", serif;
      font-size:16px;
      font-style:italic;
      color:#565656;
    }
    
    
    #subscription{
        background:white;
/*        border-bottom:1px solid #ccc;*/
        border-top:1px solid white;
        text-align:center;
    }
    #subscription section{
      -webkit-transition: background-size 0.5s ease;
      -moz-transition: background-size 0.5s ease;
      -o-transition: background-size 0.5s ease;
      -ms-transition: background-size 0.5s ease;
      transition: background-size 0.5s ease;
    }
    #subscription article{
      float:left;
      padding:20px 0;
/*      border-radius:0px;
      border:1px solid transparent;*/
/*      border-radius:4px;*/
      cursor:default;
      
      background:#fff;
      border:1px solid #999;
      -webkit-box-shadow:0 0 15px 0 #666;
      -moz-box-shadow:0 0 15px 0 #666;
      box-shadow:0 0 15px 0 #666;
/*      height:280px;*/
      
    }
      #subscription article:hover{
        background:#fff;
        border:1px solid #999;
        -webkit-box-shadow:0 0 15px 0 #666;
        -moz-box-shadow:0 0 15px 0 #666;
        box-shadow:0 0 15px 0 #666;
      }
      #subscription article header{
        padding-top:10px;
        font-size:24px;
        font-weight:bold;
        color:#444;
        text-shadow:0 1px 0 white;
      }
      #subscription article div{
        padding:5px 50px;
        font-size:14px;
        line-height:20px;
      }

    
      
    #subscription span{
      font-family:georgia,"Times New Roman", serif;
      font-size:16px;
      font-style:italic;
      color:#565656;
    }
    
    
    
    
    
    #subscription_comp{
        background:white;
        border-bottom:1px solid #ccc;
        border-top:1px solid white;
        text-align:center;
    }
    #subscription_comp section{
      -webkit-transition: background-size 0.5s ease;
      -moz-transition: background-size 0.5s ease;
      -o-transition: background-size 0.5s ease;
      -ms-transition: background-size 0.5s ease;
      transition: background-size 0.5s ease;
    }
    #subscription_comp article{
      float:left;
     
      margin-bottom:50px;
      padding:20px 0;
/*      border-radius:0px;
      border:1px solid transparent;*/
/*      border-radius:4px;*/
      cursor:default;
      
      background:#fff;
      border:1px solid #999;
      -webkit-box-shadow:0 0 15px 0 #666;
      -moz-box-shadow:0 0 15px 0 #666;
      box-shadow:0 0 15px 0 #666;
      height:242px;
      
    }
      #subscription_comp article:hover{
        background:#fff;
        border:1px solid #999;
        -webkit-box-shadow:0 0 15px 0 #666;
        -moz-box-shadow:0 0 15px 0 #666;
        box-shadow:0 0 15px 0 #666;
      }
      #subscription_comp article header{
        padding-top:10px;
        font-size:24px;
        font-weight:bold;
        color:#444;
        text-shadow:0 1px 0 white;
      }
      #subscription_comp article div{
        padding:5px 50px;
        font-size:14px;
        line-height:20px;
      }

    
      
    #subscription_comp span{
      font-family:georgia,"Times New Roman", serif;
      font-size:16px;
      font-style:italic;
      color:#565656;
    }
    
    
    

        
        
  /*
      FOOTER CSS RULES
                        */
  #footer-container {
    background:#eee;
    font-size:14px;
  }
    footer ul{
      margin:0;
      list-style:none;
    }
      footer ul li{
        padding:0 5px;
        display:inline;
        text-shadow:0 1px 0 white;
      }
        #footer-cr{
          clear:both;
          display:block;
        }
          #footer-cr span{
            font-family:pirulen;
          }
     



/* =============================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 480px) {

  #header-container title{
    text-align:center;
  }
  
  #information{
    width:150px;
    height:128px;
   }

  nav ul li{
    display:none;
   
  }

  #mini-nav ul li{
    font-size:10px;
  }

  #points button{
    margin:0 -7%;
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
    -o-transform:scale(0.8);
    -ms-transform:scale(0.8);
    transform:scale(0.8);
  }

  #points article{
    width:100%;
    height: 100%;
  }

  #features aside{
    display:none;
  }

  #features section, #features section > div{
    width:auto;
  }

  #subscription section > div article header,#subscription_comp section > div article header, #features section > div article header, #features section > div .xtra-styled header{
    width:auto;
    float:none;
  }
  
  

  .xtra-styled{
    border-top: 1px solid #ccc;
    border-bottom:1px solid #ccc;
    background:none;
  }

  #features section > div> article{
    background:none;
  }

  #apps button{
    margin:0 -7%;
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
    -o-transform:scale(0.8);
    -ms-transform:scale(0.8);
    transform:scale(0.8);
  }

  #apps article{
    width:100%;
  }
  
  #subscription button{
    margin:0 -7%;
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
    -o-transform:scale(0.8);
    -ms-transform:scale(0.8);
    transform:scale(0.8);
  }

  #subscription article{
    width:100%;
  }
  
  #subscription_comp article table,
  #subscription article table {
      width: 100%;
      min-width: 350px;
  }
  
  #subscription_comp article aside,
  #subscription article aside {
      display: none;
  }
  
  #subscription_comp button{
    margin:0 -7%;
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
    -o-transform:scale(0.8);
    -ms-transform:scale(0.8);
    transform:scale(0.8);
  }

  #subscription_comp article{
    width:100%;
  }
  
  
  
}

@media only screen and (min-width: 480px) {

/* ====================
    Menu
   ==================== */

  #header-container title{
    text-align:center;
  }

	nav a{
		float:left;
		margin:20px 5px;
		padding:2px 15px;
		margin-bottom:0;
    font-size:12px;
	}

	nav li:first-child a{ margin-left:0;  }
	nav li:last-child  a{ margin-right:0; }

  #mini-nav ul li{
    font-size:12px;
  }

/* ========================
    IE Fixes
   ======================== */

	nav ul li{
		display:inline;
	}
	.oldie nav a{
		margin:0 0.7%;
	}

/* ========================
    Main styles
   ======================== */

   #information{
    width:250px;
    height:228px;
   }



  #points section, #features section, #apps section,#subscription section,#subscription_comp section{
    max-width:997px;
  }

  #points article{
    width:100%;
    height: 100%;
    float:none;
  }

  #features aside{
    display:none;
  }

  #features section, #features section > div{
    width:auto;
  }

  #subscription section > div article header,#subscription_comp section > div article header,    #features section > div article header, #features section > div .xtra-styled header{
    width:auto;
    float:none;
  }

  .xtra-styled{
    border-top: 1px solid #ccc;
    border-bottom:1px solid #ccc;
    background:none;
  }

  #features section > div> article{
    background:none;
  }
  
  #apps article{
    width:100%;
    float:none;
  }
  
  #subscription article{
    width:100%;
    float:none;
  }
  
  #subscription_comp article table,
  #subscription article table {
      width: 100%;
      min-width: 350px;
  }
  
  #subscription_comp article aside,
  #subscription article aside {
      display: none;
  }
  
  #subscription_comp article{
    width:100%;
    float:none;
  }
}

@media only screen and (min-width: 768px) {

/* ============
    WIDE: Menu
   ============ */

  #information{
    width:300px;
    height:278px;
   }


    #title{
        float:left;
        margin: 20px 0 10px;
        padding: 5px 0;
        text-align:left;
    }

    nav{
        float:right;
    }

  nav a{
        margin-bottom:20px;
        font-size:14px;
  }

  #mini-nav ul li{
        font-size:14px;
  }

/* ============
    WIDE: Main
   ============ */

  #points section, #features section, #apps section,#subscription section,#subscription_comp section{
    background:none;
    margin:0 auto;
  }

  #points article{
    width:49%;
    height: 300px;
    float:left;
  }

  #points button{
    margin:0 15%;
  }

  #features aside{
    display:block;
  }

  #features section > div article{
    background-image:url(../../common/images/features-top-shadow.png);
    background-repeat:no-repeat;
    background-position:top;
  }

  .xtra-styled{
    border:none;
  }

  #features section > div article header{
    width:60%;
    float:left;
  }
  #features section > div .xtra-styled header{
    width:70%;
    float:right;
  }
  
  
  #subscription article{
    width:49%;
    float:left;
  }
  
  #subscription_comp article table,
  #subscription article table {
      width: 70%;
      max-width: 700px;
  }
  
  #subscription_comp article aside,
  #subscription article aside {
      display: block;
  }

  #subscription button{
    margin:0 15%;
  }
  
  #subscription_comp article{
    width:49%;
    float:left;
  }

  #subscription_comp button{
    margin:0 15%;
  }
  
  
  #apps article{
    width:49%;
    float:left;
  }

  #apps button{
    margin:0 15%;
  }
}

/*@media only screen and (max-width: 810px) {
  #slider{
    display:none;
  }
}*/

@media only screen and (min-width: 1140px) {

/* ===============
    Maximal Width
   =============== */
	.wrapper{
		width:95%; /* 1140px - 10% for margins */
		margin:0 auto;
	}

  #points article{
    width:33%;
    height: 300px;
  }
  
  #information{
    width:300px;
    height:278px;
   }

  #points section{
    background-image:url(../../common/images/dog-bg.png);
    background-repeat:no-repeat;
    background-position:center;
    background-size:100%;
  }

  #features section > div article header{
    width:70%;
  }
  
  #subscription section > div article header{
    width:70%;
  }
  
  #subscription_comp section > div article header{
    width:70%;
  }

  #features section > div .xtra-styled header{
    width:70%;
  }

  #apps article{
    width:33%;
  }

  #apps section{
    background-image:url(../../common/images/dog-bg.png);
    background-repeat:no-repeat;
    background-position:bottom center;
    background-size:50%;
  }
  
  
  #subscription article{
    width:33%;
  }
  
  #subscription_comp article table,
  #subscription article table {
      width: 70%;
      max-width: 700px;
  }
  
  #subscription_comp article aside,
  #subscription article aside {
      display: block;
  }

  #subscription section{
/*    background-image:url(../../common/images/dog-bg.png);
    background-repeat:no-repeat;
    background-position:bottom center;
    background-size:50%;*/
  }
  
  #subscription_comp article{
    width:33%;
  }

  #subscription_comp section{
    
      
  }
  
}

@media only screen and (min-width: 1650px) {

  .wrapper{
    width:1460px; /* 1140px - 10% for margins */
    margin:0 auto;
  }

}

/* =============================================================================
   Non-Semantic Helper Classes
   ========================================================================== */

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* =============================================================================
   Print Styles
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}


/* =============================================================================
   Uber Animations!
   ========================================================================== */
@-webkit-keyframes flip {
  0%{-webkit-transform: perspective(800px) rotateY(0);-webkit-animation-timing-function: ease-out;}
  50%{-webkit-transform: perspective(800px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function: ease-in;}
  80%{-webkit-transform: perspective(800px) rotateY(360deg) scale(.95);-webkit-animation-timing-function: ease-in;}
  100%{-webkit-transform: perspective(800px) scale(1);-webkit-animation-timing-function: ease-in;}
}
@-moz-keyframes flip {
  0%{-moz-transform: perspective(800px) rotateY(0);-moz-animation-timing-function: ease-out;}
  50%{-moz-transform: perspective(800px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function: ease-in;}
  80%{-moz-transform: perspective(800px) rotateY(360deg) scale(.95);-moz-animation-timing-function: ease-in;}
  100%{-moz-transform: perspective(800px) scale(1);-moz-animation-timing-function: ease-in;}
}
@-ms-keyframes flip {
  0%{-ms-transform: perspective(400px) rotateY(0);-ms-animation-timing-function: ease-out;}
  50%{-ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-animation-timing-function: ease-in;}
  80%{-ms-transform: perspective(400px) rotateY(360deg) scale(.95);-ms-animation-timing-function: ease-in;}
  100%{-ms-transform: perspective(400px) scale(1);-ms-animation-timing-function: ease-in;}
}
@keyframes flip {
  0%{transform: perspective(400px) rotateY(0);animation-timing-function: ease-out;}
  50%{transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function: ease-in;}
  80%{transform: perspective(400px) rotateY(360deg) scale(.95);animation-timing-function: ease-in;}
  100%{transform: perspective(400px) scale(1);animation-timing-function: ease-in;}
}
.flip {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flip;
  -moz-backface-visibility: visible !important;
  -moz-animation-name: flip;
  -ms-backface-visibility: visible !important;
  -ms-animation-name: flip;
  -o-backface-visibility: visible !important;
  -o-animation-name: flip;
  backface-visibility: visible !important;
  animation-name: flip;
}

#flags
{
    float:right;
    margin-top:2px;
    margin-bottom:10px;
    height:5px;
    position:absolute;
    top:0px;
    right:0px;
    margin-right:2px;
}




/*-----    iphone4   --------*/

@media only screen and (max-width: 414px) {
    #animation{
        display:none;
    }
    
    nav a:visited{
            color:#333;
    }
    nav{
      
    }
   
    #information{
       top:55px;
    }

    nav a:hover{
      background:#8ec700;
      color:white;
      border:2px solid #ebf5d1;
      text-decoration:none;
    }
    
    nav ul li{
      display:inline;
        font-size:8px;
        
    }
    
    nav a{
	float:left;
	margin:1px 0px;
	padding:2px 2px;
	margin-bottom:10px;
        font-size:8px;
    }
    
   .slideRightHandler{
        position:absolute;
        top:0;
        right:-100px;
        height:100%;
        width:140px;
        background:url(../../common/images/slide-right-uh.png) no-repeat center;
        z-index:4;
        cursor:pointer;
    }

    .slideRightHandler:hover{
      background:rgba(0,0,0,0.5) url(../../common/images/slide-right.png) no-repeat center;
      right:0;
    }

    .slideLeftHandler{
      display:none;
      position:absolute;
      top:0;
      left:-100px;
      height:100%;
      width:140px;
      background:url(../../common/images/slide-left-uh.png) no-repeat center;
      z-index:4;
      cursor:pointer;
    }

    .slideLeftHandler:hover{
      background:rgba(0,0,0,0.5) url(../../common/images/slide-left.png) no-repeat center;
      left:0;
    }

    nav li:first-child a{ margin-left:0;  }
    nav li:last-child  a{ margin-right:0; }
    
    
   
    #nav ul{
        margin:0 auto;
        padding:0;
        text-align:center;
    }
    
 
    #nav ul li:hover{
    }
    
    #nav ul li a, #nav ul li span{
      display:block;
      font-weight:bold;
      color:#555;
      text-decoration:none;
      cursor:pointer;
    }
    
    .current-nav a{
        background:#8ec700;
        color:white!important;
        border:2px solid #ebf5d1;
    }
    
    .current-nav{
        background:#8EC700;
        box-shadow:0 2px 5px -2px #111111 inset;
    }
    
    #facebook{
        width:17px;
        height:17px;
    }

/*.current-mini-nav a{
  color:white!important;
  text-shadow: 0 1px 0 #777!important;
}*/

  a #title{
    font-family:"pt-sans-narrow";
    font-size:18px;
    color:#444444;
    text-decoration:none;
  }
  #title span{
    font-size:6px;
  }
    #title span>span{
      color:#8ec700;
      font-size:8px;
    }
  
  #logolink{
            text-decoration:none;          
  }
  
  #logolink h1{
      width:160px;
      right:280px;
      position:relative;
  }
  
  
  #flags  img
  {
    width:17px;
    height:14px;
  }
  
  
  
  
  
/*  down of baner*/
  #points header h1{
    font-size:18px;
  }

 #points article img{
    width:48px;
    height:48px;
  }
  
  #points article header{  
    font-size:9px;
    padding-top:7px;
  }
  
  #subscription article header{  
    font-size:9px;
    padding-top:7px;
  }
  
  #subscription_comp article header{  
    font-size:9px;
    padding-top:7px;
  }
  
  #points article div{
        padding:5px 5px;      
        line-height:19px;
        font-size:9px;
  }
  
  #points button{
    margin:0 0;
    width:340px;
  }
  

  #points button{
    margin:0 -7%;
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
    -o-transform:scale(0.8);
    -ms-transform:scale(0.8);
    transform:scale(0.8);
  }

/*  #points article{
    width:32%;
  }*/

  #apps button{
    margin:0 -7%;
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
    -o-transform:scale(0.8);
    -ms-transform:scale(0.8);
    transform:scale(0.8);
  }
  
  #subscription button{
    margin:0 -7%;
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
    -o-transform:scale(0.8);
    -ms-transform:scale(0.8);
    transform:scale(0.8);
  }
  
  #subscription_comp button{
    margin:0 -7%;
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
    -o-transform:scale(0.8);
    -ms-transform:scale(0.8);
    transform:scale(0.8);
  }
  
  
  div section>header h1{
    margin:15px 0;
    font-size:20px;
    line-height:24px;
    width:100%;
  }
   
  
  #features section>header>span{
        display:block;
        padding:0 2% 6px;
        font-size:15px;
        font-family:Georgia, "Times New Roman", serif;
        font-style:italic;
        text-align:center;
  }
  
          
/*   store applications*/
   div section>header h1{
    margin:15px 0;
    font-size:20px;
    line-height:24px;
    width:100%;
  }
   
  #apps h2 {
        display: block;
        font-size: 1.0em;
        -webkit-margin-before: 0.83em;
        -webkit-margin-after: 0.83em;
        -webkit-margin-start: 0px;
        -webkit-margin-end: 0px;
        font-weight: bold;
   }
   
   #subscription h2 {
        display: block;
        font-size: 1.0em;
        -webkit-margin-before: 0.83em;
        -webkit-margin-after: 0.83em;
        -webkit-margin-start: 0px;
        -webkit-margin-end: 0px;
        font-weight: bold;
   }
   
   #subscription_comp h2 {
        display: block;
        font-size: 1.0em;
        -webkit-margin-before: 0.83em;
        -webkit-margin-after: 0.83em;
        -webkit-margin-start: 0px;
        -webkit-margin-end: 0px;
        font-weight: bold;
   }
   
/*   tabs */
    #features section > div article{
        background-image:url(../../common/images/features-top-shadow.png);
        background-repeat:no-repeat;
        background-position:top;
    }


   #features section>div article header h2{
            font-size:16px;
            margin:0;
            padding-bottom:7px;
   }
   
   #features section>div{
      padding:0 3px 3px;
      background:white;
      border:1px solid #ddd;
      border-radius: 3px;
    }
    
    #features section>div article header
    {
          float:left;
          width:65%;
          color:#444;
          font-size:12px;
    }
    
     #features section>div article{
        margin-bottom:10px;
        padding:35px 10px;
        display:block;
        overflow:hidden;
      }
      
       #features section>div article aside{
          float:right; 
          display:block;
      }
      
       #features section>div article aside img{
           width:70px;
           height:47px;         
      }
      
      #features section>div .xtra-styled header{
            float:right;
            width:65%;
      }
      
       #features section>div .xtra-styled aside{
            float:left;
       }
       
       #features section>div .xtra-styled aside img{
          
           width:70px;
           height:67px;   
       }
              
       
       #features section>div .eextra-styled header{
            float:left;
            width:65%;
       }
      
       #features section>div .eextra-styled aside{
            float:right;
       }
       
       #features section>div .eextra-styled aside img{
          
           width:70px;
           height:79px;   
       }
       
        #features section>div .eeextra-styled header{
            float:right;
            width:65%;
      }
      
       #features section>div .eeextra-styled aside{
            float:left;
       }
       
       #features section>div .eeextra-styled aside img{
          
           width:70px;
           height:85px;   
       }
       
       #features section>div .xtra-width header h2{
              font-size:18px;
              padding-bottom:25px;
              line-height:30px;
              text-align:center;
       }
       
       #features section>div .xtra-width ul li{
              font-size:12px;
       }
       
        #apps section .app_phrase{            
            font-size:12px;
            position:relative;
            text-align:left;
           
        }
        
        #apps section .helping {            
            top:20px;
            position:relative;
        }
        
        #apps section a img{
            width:100px;
            height:100px;
            top:-12px;  
            left:-50px;
        }
        
        #apps section a {
            width:110px;
            height:110px;
            top:-12px;           
        }
        
        #subscription section .app_phrase{            
            font-size:12px;
            position:relative;
            text-align:left;
           
        }
        
        #subscription section .helping {            
            top:20px;
            position:relative;
        }
        
        #subscription section a img{
            width:100px;
            height:100px;
            top:-12px;  
            left:-50px;
        }
        
        #subscription section a {
            width:110px;
            height:110px;
            top:-12px;           
        }
        
        #subscription_comp section .app_phrase{            
            font-size:12px;
            position:relative;
            text-align:left;
           
        }
        
        #subscription_comp section .helping {            
            top:20px;
            position:relative;
        }
        
        #subscription_comp section a img{
            width:100px;
            height:100px;
            top:-12px;  
            left:-50px;
        }
        
        #subscription_comp section a {
            width:110px;
            height:110px;
            top:-12px;           
        }
        
        

        
        
        
        
   
       
       
       
       
      
       
       
}