html {
  box-sizing: border-box;
  background-size:cover;
  font-family: Futura,"Trebuchet MS",Arial,sans-serif
}
*, *:before, *:after {box-sizing: inherit; }


header {
  background: url(../img/header.jpg);
  background-size:cover;
  height:250px;
  display: flex;
  /*flex-flow: row wrap;*/
  flex-flow: row;
}

header div {
  margin: auto;
}

.headerimage {
  height:250px;
  background-size: initial;
  background-repeat: no-repeat;
}

.score {
    position: absolute;
    bottom: 50px;
    font-size: 2em;
    padding:0 0.5em;
}

.contrast-header, .contrast-header a {
  color: #e6ecf0;
}



#sadtrump{
  background-image: url(../img/sadtrump.png);
  background-position: bottom left;
  order: 1;
}
#sadtrump .score {
  left: 0;
}

#happytrump{
  background-image: url(../img/happytrump.png);
  background-position: bottom right;
  order: 3;
}
#happytrump .score {
  right:0;
}

#comment {
  margin-top: 20px;
  order: 2;
  display: flex;
  height:100%;
}

#comment-form-container {
  width:100%;
}

#comment button {
  float:right;
}
.btn-default {
  padding: 3px 9px;
}

#text {
  padding:10px;
  outline:0;
  border:1px solid rgba(0,0,0,0.1);
  width:100%;
  min-height: 62px;
  max-height: 120px;
  resize: none;
}

#comment-form .text-label {
    font-size: 1em;
    font-weight: 400;
    opacity: 0.6;
    pointer-events: none;
    position: absolute;
    padding-left:10px;
    margin-left:1px;
    transform: translate3d(0, 10px, 0) scale(1);
    transform-origin: left top;
    transition: 240ms;
}

#comment-form.focused .text-label {
    opacity: 0.8;
    transform: scale(0.75);
}

#text::-webkit-input-placeholder {
    color: transparent;
    transition: 240ms;
}

#text:focus::-webkit-input-placeholder {
    transition: none;
}

#comment-form.focused ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: transparent;
}
#comment-form.focused ::-moz-placeholder { /* Firefox 19+ */
  color: transparent;
}
#comment-form.focused :-ms-input-placeholder { /* IE 10+ */
  color: transparent;
}
#comment-form.focused :-moz-placeholder { /* Firefox 18- */
  color: transparent;
}




#comment-form .text-counter {
  color: #999999;
  font-weight: normal;
  padding:3px 0;
}




#top-ad {
}

.wide-ad {
  width:100%;
}
.link-ad {
  overflow:hidden;
  text-align: center;
}
main {
  height:auto;
  display: flex;
  flex-flow: row column;
}

ul.feed {
  list-style:none;
  flex: 1 1 100%;
  transition: 0.5s linear all;
  padding:0;
}

ul.positive {
  border-left:6px solid #fff;  
  background-image: -webkit-linear-gradient(#E27575, #ffffff);
  background-image: -o-linear-gradient(#E27575, #ffffff);
  background-image: linear-gradient(#E27575, #ffffff);
}
ul.negative {
  border-right:6px solid #fff;  
  background-image: -webkit-linear-gradient(#0092b7, #ffffff);
  background-image: -o-linear-gradient(#0092b7, #ffffff);
  background-image: linear-gradient(#0092b7, #ffffff);
}


.positive li {
  background: #E27575;
}

 .negative li {
  background: #0092b7;
}

.post {
    display: flex;
    flex-direction: column;
    position: relative;
    color:#222222;
    font-size:1em;
    border-bottom: 1px solid #e6ecf0;
    min-height: 6em;
    padding: 9px 12px;
    transition: all .2s ease-in-out;
    border-radius:3px;
}

.post:last-child {
    border-bottom: none;
}

.feed .post:hover {
    /*background-color: #f5f8fa;*/
    border-top: 1px solid #e6ecf0;
    /*background-color: inherit;*/
    transform: scale(1.02);
    filter: saturate(120%); 
    box-shadow: 1px 1px 4px #eee;
    z-index: 10;
}

.post .text {
  font-size:1.1em;
  margin-bottom:auto;
}


.feed .post .text a {
  color: inherit;  
}


.post a.time {
    cursor:pointer;
}

.post time {
    color: rgba(0,0,0,0.4);
    font-size: 0.9em;
    margin-top: 1px;
    padding-left: 1rem;
    padding-right: .5rem;
    float:right;
}

.post.ad {
  height: 100px;
}

.social {
  display: inline-block;
}
.social svg{

  height: 20px;
  width: 20px;
  cursor: pointer;
  fill:rgba(0,0,0,0.4);
  transition: 0.5s linear all;
}

.social svg:hover{
  transform: scale(1.2);
}

.twitter svg {

}

.facebook svg {

}

.twitter svg:hover {
  fill: #4099FF;
}

.facebook svg:hover {
  fill: #3b5998;
}


footer {
  background: url(../img/header.jpg);
  background-size:cover;
  height:50px;
  display: flex;
}

footer div {
  margin:auto;
  text-align:center;
}

footer .ad {
  height:30px;
}


.loading {
  opacity: 0.6;
  transition: 0.5s linear all;
}

.spinner {
  width: 40px;
  height: 40px;

  position: relative;
  /*margin: 100px auto;*/
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #ccc;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

dialog {
  border: 1px solid rgba(0, 0, 0, 0.3);
  border: 0.5em solid rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  width: 50%;
  padding: 0.5em;
/*  position: fixed;
  top: 50%;
  transform: translate(0, -50%);
*/
}

dialog::backdrop{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
}

dialog.positive, dialog.very-positive {
  background: #E27575;
}

dialog.negative, dialog.very-negative {
  background: #0092b7;
}


#dialog-content .text{
  font-size:1.1em;
}

@media all and (max-width: 768px){
  dialog {
    width:100%;
  }
}







@media all and (max-width: 768px){
  header {
    height:160px;  
    flex-flow: row wrap;
  }

  .headerimage {
    height:100px;
    background-size: 150px;
  }

  #intro {
    display: none;
  }


  #sadtrump{
    order: 2;
  }

  #happytrump{
    order: 3;
  }

  .link-ad {
    display: none;
  }

  .score {
      bottom: 20px;
      font-size: 1em;
  }

  #comment {
    order: 1;
    margin-top:10px;
    height: initial;
    text-align: center;
  }

  #text {
      max-height: 42px;
  }

  #comment button {
    padding: 9px 4px;
    font-size: 0.9em;
    line-height: 1.5;
    border-radius: 3px;
    float:initial;
  }

  #comment .text-counter{
    position: absolute;
    display:block;
  }

  #textbox-container {
    float:left;
    width:80%;
  }
  #submit-container {
    float:right;
  }

}