@import url(https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400);

@keyframes line-anim {
    75% {
        width: 40px;
        transform: rotate(0);
    }
    100% {
        width: 200px;
		margin-right: 35px;
		border: 1px solid #FFF;
		margin-top: 5px;
        transform: rotate(0);
    }
}
@keyframes btn-focus-anim {
    0% {
        box-shadow: 0 0 0 85px #333;
    }
    100% {
        box-shadow: 0 0 0 100px #f7c51e;
    }
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 10vw;/* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;/* Support for all WebKit browsers. */
  vertical-align: sub;
  -webkit-font-smoothing: antialiased;/* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;/* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;/* Support for IE. */
  font-feature-settings: 'liga';
  color: #e74c3c;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: 0;
}

.sform {
	position: relative;
	bottom: 0px;
    width: 250px;
    height: 60px;
    margin-top: 25px;
}


#sbx {
    position: relative;
    top: 0px;
    width: 200px;
    border: none;
    background: none;
    color: #FFF;
    font-size: 16px;
	padding-right: 10px;
	direction: rtl;
	text-align: right;
}
#sbx:focus ~ #btn {
    color: f7c51e;
    text-indent: 6px;
    transition: .2s .4s;
}
#sbx:focus ~ #line {
    animation: line-anim .5s both;
}
#sbx:focus::-webkit-input-placeholder {
    text-indent: 100%;
}
#sbx:focus::-moz-placeholder {
    text-align: right;
}
#btn {
    width: 40px;
    height: 40px;
    background: #454545;
    color: transparent;
    font-size: 25px;
	text-align:left;
	color: #f7c51e;
    text-indent: -100%;
    vertical-align: middle;
    border: 2px solid white;
    border-radius: 50%;
	position:relative;
	z-index: 999;
}
#btn:focus {
    text-indent: 6px;
    color: #f7c51e;
    animation: btn-focus-anim .2s both;
}
#line {
    position: absolute;
    top: 30px;
    right: 20px;
    margin: auto;
    width: 25px;
    height: 0;
    background: white;
    border: 3px solid #FFF;
    border-radius: 3px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    transform: rotate(-120deg);
    transform-origin: right;
}
::-webkit-input-placeholder {
    color: white;
    opacity: .6;
    transition: .2s;
}
::-moz-placeholder {
    color: white;
    opacity: .6;
    transition: .2s;
}




figure.snip1116 {
  display: inline-block;
  position: relative;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 200px;
  max-width: 15%;
  max-height: 220px;
  width: 100%;
  background: #000000;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  border: 1px solid #333;
  float: right;
}
figure.snip1116 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease-in-out;
  transition: all 0.45s ease-in-out;
}
figure.snip1116 img {
  max-width: 100%;
  position: relative;
  opacity: 0.9;
}
figure.snip1116 figcaption {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 13%;
  right: 13%;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-width: 1px 1px 0;
  background-color: rgba(0, 0, 0, 0.7);
}
figure.snip1116 h2 {
  padding: 15px 20px;
  margin: 0;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: -1px;
}
figure.snip1116 h2 span {
  font-weight: 800;
}
figure.snip1116 .caption {
  overflow: hidden;
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
  position: absolute;
  bottom: 0;
  width: 100%;
}
figure.snip1116 p {
  display: table;
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
  text-align: center;
  width: auto;
  color: rgba(255, 255, 255, 0);
  font-size: 0.8em;
}
figure.snip1116 p:before,
figure.snip1116 p:after {
  position: absolute;
  width: 150%;
  height: 1px;
  content: '';
  background: white;
  bottom: 50%;
  -webkit-transition: all 0.45s ease-in-out;
  transition: all 0.45s ease-in-out;
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}
figure.snip1116 p:before {
  left: -100%;
}
figure.snip1116 p:after {
  right: -100%;
}
figure.snip1116 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
figure.snip1116:hover img,
figure.snip1116.hover img {
  opacity: 0.35;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
figure.snip1116:hover p,
figure.snip1116.hover p {
  opacity: 1;
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
  color: #ffffff;
}
figure.snip1116:hover p:before,
figure.snip1116.hover p:before,
figure.snip1116:hover p:after,
figure.snip1116.hover p:after {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
figure.snip1116:hover p:before,
figure.snip1116.hover p:before {
  left: -150%;
}
figure.snip1116:hover p:after,
figure.snip1116.hover p:after {
  right: -150%;
}



.newm {
  margin-bottom: 2px;
  background: #F7F7F7;
  border-bottom: #FFF;
}

.newm:hover {
  background: #FFF;
}


.poll {
  border:1px solid #dddddd;
  background:#ffffff;
  padding:5px;
  text-align: right;
  direction: rtl;
}

.poll input {
  margin-left: 10px;
}
.poll_question {
  background:#444444;
  color:#ffffff;
  padding:5px;
  margin-bottom:5px;
}
.poll_answer {
  border-bottom:1px solid #eee;
  padding:5px;
}
.poll_answer label {
  padding-left:5px;
}
.poll_result {
  border-top:1px solid #ddd;
  padding:5px;
}
.poll_result:first-child {
  border-top:none;
}
.poll_result_answer {
  overflow:hidden;
}
.poll_submit {
  margin-top:5px;
}
.result_answer {
  float:left;
  padding:5px 0;
  color:#666;
}
.result_answer span{
  color:#888;
  padding-left:10px;
}
.result_percent {
  float:right;
  padding:5px 0;
  color:#555;
}
.result_bar {
  height:10px;
  display:block;
  background:#dddddd;
}
.result_bar_result {
  height:10px;
  display:inline-block;
}
.total_votes {
text-align:right;
color:#777;
padding:5px;
}
.cl {
  clear:both;
}
.notification {
  border:1px solid #EAC572;
  background:#FFE9AD;
  padding:5px;
  margin:5px 0;
  color:#976B05;
}
.bad {
  background:#DC3A6B;
}
.normal {
  background:#6C6C6C;
}
.good {
  background:#6087BD;
}
.best {
  background:#6ABD60;
}

.inputbutton {
  cursor:pointer;
  display:block; 
  display:inline-block;
  margin:0px;
  outline:none;
  position:relative;
  font-size:13px; 
  padding:6px 10px; 
  text-align:center;
  text-decoration:none;
  overflow:visible;
  white-space:nowrap;
  z-index:1;
  color:#FFF;
  text-shadow:#555 -1px -1px 0px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  border:1px solid;
  border-color:#333;
  border-color:rgba(0, 0, 0, .3);
  -moz-box-shadow:
    0px 1px 0px rgba(255, 255, 255, .75) inset,
    0px -1px 1px rgba(255, 255, 255, .2) inset
  ;
  -webkit-box-shadow:
    0px 1px 0px rgba(255, 255, 255, .75) inset, 
    0px -1px 1px rgba(255, 255, 255, .2) inset 
  ;
  box-shadow:
    0px 1px 0px rgba(255, 255, 255, .75) inset, 
    0px -1px 0px rgba(255, 255, 255, .2) inset 
  ;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#55ffffff', endColorstr='#00ffffff');
}

.inputbutton.grey{
  background: -moz-linear-gradient(top, #999999, #444444) no-repeat;
  background: -webkit-gradient(linear, center top, center bottom, from(#999999), to(#444444)) no-repeat;  
  background-color:#666666;
}
.inputbutton.grey:hover{
  background: -moz-linear-gradient(top, #999999, #666666) no-repeat;
  background: -webkit-gradient(linear, center top, center bottom, from(#999999), to(#666666)) no-repeat;
  background-color:#777777;
}
.inputbutton.grey:active{
  background:#555555;
}
.inputbutton.blue{
  background: -moz-linear-gradient(top, #00a9e1, #0049af) no-repeat;
  background: -webkit-gradient(linear, center top, center bottom, from(#00a9e1), to(#0049af)) no-repeat;  
  background-color:#006ebd;
}
.inputbutton.blue:hover{
  background: -moz-linear-gradient(top, #00a9e1, #0067cb) no-repeat;
  background: -webkit-gradient(linear, center top, center bottom, from(#00a9e1), to(#0067cb)) no-repeat;
  background-color:#0077cc;
}
.inputbutton.blue:active{
  background:#005094;
}