/* CSS Document 



     HOMEPAGE THEME  

     Theme Name: Flat UI Color Picker

     Theme URI: www.flatuicolorpicker

     Description: A Theme for FlatUI

     Version: 2.0

     Author: Vasilis Baimas (vbaimas)

     Author URL: http://www.vbaimas.com

/*



/* Table of Content

==================================================

  #Site Styles

  #Page Styles

  #Media Queries



/* -----------------------------------------

   navigation 

----------------------------------------- */

.navigation {clear:both; text-transform:uppercase; position:relative;height: 55px;right: 0;width: 100%;text-align: right;margin-right:25px;top:0;z-index: 9999;}

.navigation ul {margin:0; padding:0; position:relative; float:right;  top:1.3em; margin-top:1em; }

.navigation li {margin: 0 5px 10px 0; padding: 0; list-style: none; display:inline-block; }

.navigation li a {display:inline; margin:0; padding:5px 10px; font-size:1em; line-height:1em; text-decoration:none; color:#444;  text-align:right;  }

.navigation li a:hover {color:#696969; text-decoration:none;} 

.current-menu-item {background-color:#95A5A1; line-height:32px;}



span.color-name-white {color:#fff;}



#social {display: inline; left: 30px;  position: relative; }

#social ul {margin:0; padding:0;  left:0;  top:1.3em; margin-top:1em; }

#social li {padding: 0; list-style: none; display:inline-block; }

#facebook {float:right;  position: absolute; margin-left: 125px}

#twitter {float:left;  position: absolute;margin-right: 15px}



.me {bottom:0; right:0; z-index: 9999;position: absolute; margin-right: 65px;}

.me h4 {font-size:  0.875em;background-color: #019875; line-height:35px; text-align:center;padding:6px;}

.me a {text-decoration:none;color:#fff;}

.item-grey{color:#333;}







/* -----------------------------------------

   footer 

----------------------------------------- */

.footer{bottom: 0; display: block;left: 0;position: fixed;width: 100%;background-color: rgba(255, 255, 255, 0.2);padding:30px;}



.page-wrap {clear:both; left: 0; width: 100%; z-index: 9999;}





.grid

{

     width: 20%;

      padding-bottom: 18%;

      color: #151515;

      position: relative;

      float: left;

      top:45px;

      bottom: 0;

      margin:0;

    list-style:none;

}





  .item

{



  position: absolute;

    margin:0;

    left: 0;

    right: 0;

    top:0;

    bottom: 0;

      text-align: center;

      text-transform: uppercase;

      padding: 35%;



}



.item:hover

{

    display: inline;

    z-index: 999;

    overflow: hidden;

cursor: pointer;

-webkit-transform: scale(1); 

        -moz-transform: scale(1); 

        -o-transform: scale(1); 

        transform: scale(1); 

        -webkit-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2); 

        -moz-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2); 

        box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2);

}









/* #Media Queries

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



  /* Smaller than standard 960 (devices and browsers) */

      

@media only screen and (min-width: 320px) and (max-width: 979px) {
  #carbonads {
    float: none;
    margin: 0 auto;
    font-size: 9px !important;
  }
  #carbonads span {
    position: relative;
  }
  #carbonads > span {
    max-width: none;
  }
  .carbon-img {
    float: left;
    margin: 0 1em 0 0 !important;
  }
  .carbon-img img {
    width: 80px;
    height: auto;
  }
  .carbon-text {
    float: left;
    margin-bottom: 0;
    max-width: calc(100% - 80px - 1em);
    text-align: left !important;
  }
  .carbon-poweredby {
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    font-size: 8px !important;
  }
  #carbonads a {
    color: #000 !important;
    text-decoration: none;
    text-transform: none;
  }
}



  /* Tablet Portrait size to standard 960 (devices and browsers) */

  @media only screen and (min-width: 768px) and (max-width: 960px) {.grid{width: 50%;color: #FFF;position: relative;top:45px;margin:0;}

    .item{position: absolute; margin:0;left: 0;right: 0;top:0;bottom: 0; text-align: center;text-transform: uppercase;padding: 8%;font-size: 0.875em;}

    .color-name,.hex-number,.rgb-number, .cmyk-number {position: relative;line-height: 22px;text-align: center;}

    .footer {display: none;}

  }



 @media only screen and (max-width:480px)  {
.grid{width:100%;color: #FFF;position: relative;top:45px;margin:0; padding: :25%;}
 .item{position: absolute; margin:0;left: 0;right: 0;top:0;bottom: 0; text-align: center;text-transform: uppercase;padding:25%;font-size: 0.875em;}
.navigation,.footer {display: none;}
} /*only screen and max-width:30em*/


  /* All Mobile Sizes (devices and browser) */

  @media only screen and (max-width: 767px) {.navigation {clear:both; text-transform:uppercase; position:relative; height: 55px;right: 0;width: 100%;text-align: right;margin-right:25px;top:0;z-index: 9999;}

    .navigation ul {margin:0; padding:0; position:relative; float:right;  top:1.3em; margin-top:1em; }

    .navigation li {margin: 0 5px 10px 0; padding: 0; list-style: none; display:inline-block; }

    .navigation li a {display:inline; margin:0; padding:5px 2px; font-size:1em; line-height:1em; text-decoration:none; color:#444;  text-align:right;  }

    .navigation li a:hover {color:#696969; text-decoration:none;} 

    .current-menu-item {background-color:#95A5A1;  line-height:32px;}

       

    .grid{width: 50%;color: #FFF;position: relative;top:45px;margin:0;}

    .item{position: absolute; margin:0;left: 0;right: 0;top:0;bottom: 0; text-align: center;text-transform: uppercase;padding: 8%;font-size: 0.750em;}

    .color-name,.hex-number,.rgb-number, .cmyk-number {position: relative;line-height: 22px;text-align: center;}

    .footer{display: none;}

  }



  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */

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

  .item{position: absolute; margin:0;left: 0;right: 0;top:0;bottom: 0; text-align: center;text-transform: uppercase;padding: 5%;font-size: 0.750em;}

  .grid{width: 50%;color: #FFF;position: relative;top:45px;margin:0;}

  .footer {display: none;}

  .color-name,.hex-number,.rgb-number, .cmyk-number {position: relative;line-height: 12px;text-align: center;}

  }

  

  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */

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

    .grid{width:100%;padding-bottom:36%; color: #FFF; position: relative;float: left;top:45px;bottom:0;margin:0;}

    .item{position: absolute; margin:0;left: 0;right: 0;top:0;bottom: 0; text-align: center;text-transform: uppercase;padding:11%;font-size: 0.875em;}

    .color-name,.hex-number,.rgb-number, .cmyk-number {position: relative;line-height: 12px;text-align: center;}

    .navigation,.footer {display: none;}

  }


  /* Ads */


    


#carbonads {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.5;
   position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  overflow: hidden;
  padding: 2em;
  font-size: 14px;
}



#carbonads a {
  color: inherit;
  text-decoration: none;
  text-transform: none;
}

#carbonads span {
  display: block;
  overflow: hidden;
}

.carbon-img {
  display: block;
  margin: 0 auto 1em;
  text-align: center;
}

.carbon-text {
  display: block;
  margin-bottom: 1em;
  text-align: center;
}

.carbon-poweredby {
  display: block;
  text-align: center;
  font-size: 12px;
}