/*********** INFORMATION *****************************

- document:  SlideIt - CSS3 fixed sliding elements
- author:    Capelle @ Codecanyon
- profile:   http://codecanyon.net/user/Capelle

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

@import url(http://fonts.googleapis.com/css?family=Lato:700);#slideit *{margin:0;padding:0;border:0;outline:0;font-weight:300;font-style:normal;font-size:100%;font-family:Lato,sans-serif;vertical-align:baseline;line-height:normal;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#slideit a{text-decoration:none}#slideit input[type=radio]{display:none}#slideit label{cursor:pointer}#slideit{z-index:9999;position:fixed;width:350px;bottom:0;right:2%}#slideit section{margin:0;overflow:hidden;width:100%;height:auto;right:78px;bottom:0;position:absolute;z-index:10;background:#ffd530;border-bottom:6px solid #d71f27;-webkit-backface-visibility:hidden}#slideit input#close-item:checked~section,#slideit section{-webkit-transform:translateY(100%);-moz-transform:translateY(100%);-ms-transform:translateY(100%);-o-transform:translateY(100%);transform:translateY(100%)}#slideit input#open-item:checked~section{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}#slideit section .wrap{padding:50px;position:relative;float:left;width:100%}#slideit .field{width:100%;position:relative;display:block}#slideit .field p{display:block;color:#999;font-size:12px}#slideit .left-b,#slideit .right-b{float:left}#slideit .left-b{width:40%;margin-right:10%;    margin-left: -39px;margin-top: -25px;}#slideit .right-b{width:50%}#slideit span.title{display:block;width:100%;font-size:10px;color:#999;text-transform:uppercase;margin-bottom:1px}#slideit span.title b{color:#222;padding-left:4px;font-weight:400}#slideit .rating{display:block;float:left}#slideit label.close,#slideit label.open{text-align:center;position:absolute}#slideit label.open{font-size:11px;color:#222;background:#fff;width:100px;bottom:-50px;left:0;right:0;top:auto;margin:0 auto;padding:10px 0;text-transform:uppercase;z-index:1}#slideit input#close-item:checked~label.open{bottom:0}#slideit label.open:focus,#slideit label.open:hover{background:#222;color:#fff}#slideit label.close{right:30px;left:auto;top:0;bottom:auto;font-size:20px;background:#d71f27;color:#fff;width:22px;z-index:99}#slideit label.close:focus,#slideit label.close:hover{background:#757786}#slideit .rating:not(:checked)>label{float:right;overflow:hidden;font-size:20px;color:#ddd;margin-left:3px}#slideit .rating>+ label:hover,#slideit .rating>+ label:hover~label,#slideit .rating>input:checked~label,#slideit .rating>label:hover,#slideit .rating>label:hover~input:checked~label,#slideit .rating>label:hover~label,#slideit .rating>~ label:hover,#slideit .rating>~ label:hover~label{color:#757786}#slideit .rating>label:last-of-type{margin-left:0}#slideit label{-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out}#slideit section{-webkit-transition:all .4s cubic-bezier(0.2,.6,.3,1);-moz-transition:all .4s cubic-bezier(0.2,.6,.3,1);-ms-transition:all .4s cubic-bezier(0.2,.6,.3,1);-o-transition:all .4s cubic-bezier(0.2,.6,.3,1);transition:all .4s cubic-bezier(0.2,.6,.3,1)}#slideit input#close-item:checked~label.open{-webkit-transition:bottom .3s ease .4s,background .1s ease,color .1s ease;-moz-transition:bottom .3s ease .4s,background .1s ease,color .1s ease;-ms-transition:bottom .3s ease .4s,background .1s ease,color .1s ease;-o-transition:bottom .3s ease .4s,background .1s ease,color .1s ease;transition:bottom .3s ease .4s,background .1s ease,color .1s ease}

#slideit .rating > label:hover {
	color: #757786;
}
#slideit .rating > label:hover ~ label {
	color: #757786;	
}
#slideit .rating > input:checked ~ label {
	color: #757786;
}
#slideit .rating > + label:hover, .rating > ~ label:hover {
	color: #757786;
}
#slideit .rating > + label:hover ~ label, .rating > ~ label:hover ~ label {
	color: #757786;
}
#slideit .rating > label:hover ~ input:checked ~ label {
	color: #757786;
}



@media only screen and (max-width: 768px) {
    /* For mobile phones: */
   
   #slideit {
   	
   	width:150px;

   }


   #slideit section{
   	
   	right:0px;

   }
}