/* import google fonts */
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500,700&subset=latin,greek);
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700&subset=latin,greek);
 
body {font-size:100.01%; font-family: 'Roboto', sans-serif; font-size:14px;}
 
/* wrapper adjusts the width of the page */
    .wrapper                    {width:1000px; margin:0px auto; z-index: 1;}
    .row                        {z-index: 2;}
    #main                       {z-index: 3;}
 
/* header / logo and banners */
    .logoholder                 {float:left; width:204px; margin: 2% 1% 1% 0px; padding:1%;}
    .logo                       {width:100%;} 
    .logo img                   {width:100%; height:auto;}
    .nexttobanner               {float:left; width:745px; margin:2% 0px 2% 2%;}
    .mainBanner img             {width:100%; height:auto;}
    /* big search next to logo */
    .bigsearch                  {padding:10px; margin-top:2%; position:relative;}
    .bigsearchinput             {height:54px; border: 0px; background-color:#000; width:86%; padding:0px 10% 0px 2%; color:#fff; font-size:110%;}
    .submitsearch               {background-color:#c5d821; width:11%; text-align:center; height:54px; width:54px; position:absolute; right:10px;}
 
/* link classes */
    a                           {text-decoration:none; color:inherit;}
    a:hover                     {text-decoration:underline;}
 
    a.tooltip                   {outline:none; }
    a.tooltip strong            {line-height:30px;}
    a.tooltip:hover             {text-decoration:none;} 
    a.tooltip span              {z-index:10;display:none; padding:14px 20px; margin-top:-120px; margin-left:-125px; width:175px; line-height:16px; }
    a.tooltip:hover span        {display:inline; position:absolute; color: #fff; background: rgba(0,0,0,0.8);}
    .callout                    {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
 
/* General Classes */
    .clear                      {clear:both;}
    .left                       {float:left;}
    .right                      {float:right;}
    img                         {display:block;}
    .PaddingTop                 {margin-top: 20px !important;}
 
    .halfpagebanner             {width:47%;}
    .banner336                  {width:345px; height:auto;}
    /* thin border google 160x600 */
    .google160                  {text-align:center; width: 180px; margin: 0px auto; padding: 0px !important;}
    .google160 .bannerimage     {padding: 10px 0px !important;}
    .google160 img              {width:160px !important; height:auto; margin: 0px auto;}
    /* thick border google 160x600 */
    .google180                  {text-align:center; width: 200px; margin: 0px auto; padding: 0px !important;}
    .google180 .bannerimage     {padding: 20px}
    .google180 img              {width:160px !important; height:auto; margin: 0px auto;}
    .bigcolumn                  {width:770px;}
    .smallcolumn                {width:180px;}
    .padding2                   {padding:2%;}
     
    /* Use this class for background pattern */
        .bgpattern              { background: transparent url(../images/bgpattern.gif) repeat top left;}
 
    /* metavasi styles */
        .metavasibg                         {padding: 5px 0px; margin: 40px 0px 60px 0px; border-top: solid 4px #fff; border-bottom: solid 4px #fff; box-shadow: 0px 0px 0px 4px #000; height: 25.1875rem;}
        .trasfercoupon                      {background: transparent url(../images/transfercoupon.png) no-repeat left; padding-left: 300px; height: 226px; background-size: contain;}
        .transfercoupontext                 {font-family: 'Roboto Condensed', sans-serif; font-size: 150%; padding-top: 80px;}
        .transfercoupontext span            {color: #d400a5;}
        .metavasitext h3                    {padding-bottom: 20px; font-weight: normal; font-size: 300%;}
        .metavasitext h3 span               {color: #d400a5; font-weight: bold}
        .metavasitext p                     {padding-bottom: 20px; font-size: 120%;}
        .metavasitext span                  {}
        .metavasitext span a                {color: #d400a5;}

        .offers ul                          {margin: 12px 0px 0px 0px !important;}
        .offers h1                          {height: 3.1875rem; margin-top: 0.4375rem; overflow: hidden; margin-left: 0.125rem;}
 
/* ==== RESPONSIVE STYLES ===== */
/* --- Specific classes for desktop --- */

/* === More than 768px width and less than 980px (pads) */
    @media only screen and (max-width : 999px) {
        .wrapper                    {width:748px;}
        .logoholder                 {width:22.3%;}
        .nexttobanner               {width:72.5%;}
    }

    @media screen and (max-width: 928px) {
        .metavasibg                 {height: 32.2rem;}
        .offers ul                  {margin: 40px 0px 0px 0px !important;}
    }
 
/* === Less than 768px(mobile devices) */
    @media only screen and (max-width : 767px) {
        .wrapper                    {width:310px;}
        body                        {font-size:10pt;}
        .logoholder                 {width:60%; float:none; margin:0px auto;}
        .nexttobanner               {width:100%; float:none; margin-left:0px;}
        /* metavasi styles */
        .metavasibg                 {margin: 10px 0px;}
        .trasfercoupon              {height: 80px; background-position: center; padding: 0px; text-align: center;}
        .metavasitext               {text-align: center;}
    }

/* === iPad only fix === */
    @media only screen and (device-width: 1024px) and (device-height: 768px) and (-webkit-min-device-pixel-ratio: 1)
    {
        /* For landscape layouts only */
    }
    @media only screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-min-device-pixel-ratio: 1)
    {
      /* For portrait layouts only */
    }