/*! HTML5 Boilerplate v7.2.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */


@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap&subset=cyrillic');

:root {
  --spriteURL: url("/img/sprite2.png");
  --canWidth: 320px;
  --canHeight: 320px;
}




body {
  margin: 0px;
  padding: 0px;
  background-color: #4B576B;
  color: #FFF;
  font-size: 12px;
  line-height: 1.4;
  font-family:'Noto Sans','Roboto', sans-serif, Arial, Helvetica, tahoma, verdana;
  text-decoration: none;
  font-weight: normal;

}

input {
  font-family:'Noto Sans','Roboto', sans-serif, Arial, Helvetica, tahoma, verdana;
}

select {
  font-family:'Noto Sans','Roboto', sans-serif, Arial, Helvetica, tahoma, verdana;
}

h1 {
  font-size: 1.3em;
  font-weight: bold;
  text-shadow: 2px 2px #11131d;
}

a {
  color: #FFF
}

a:visited {
  color: #FFFFFF;
}

a:focus {
  outline: thin dotted;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
  display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638


.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}
*/
/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
  visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}


header {
  background: #000000;
  height: 55px;
  padding: 0px;
}

.appholder {
  background-color: #414765;
  min-height: 100px;
  transition: height 0.2s, width 0.2s;
  position: relative;
}

.intro {
  display: block;
  max-width: 700px;
  min-height: 150px;
  margin: auto;
  text-align: center;
}

.properties {
  text-align: center;
  display: inline-block;
}

.introimage {
  text-align: center;
  display: none;
  padding-bottom: 15px;
}

.intimg {
  width: 100%;
  max-width: 250px;
  height: auto;
}

footer {
  text-align: center;
}

button {
  font-family:'Noto Sans','Roboto', sans-serif, Arial, Helvetica, tahoma, verdana;
}

#btnStart {
  background-color: #b34040;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #1f2f47;
  display: inline-block;
  color: #ffffff;
  font-size: 15px;
  font-weight: bold;
  padding: 11px 25px;
  text-decoration: none;
  margin: 10px 0px 10px 0px;
  transition: background-color 0.2s;
  display: none;
}

.intro h1 {
  margin-top: 5px;
}


.loadinggif {
  animation: loadani 2s infinite;
}

@keyframes loadani {
  0% {
    opacity: 0.5;
    transform: translateX(-20px);
  }

  50% {
    opacity: 1;
    transform: translateX(20px);
  }

  51% {
    opacity: 0.5;
    transform: translateX(20px) scaleX(-1);

  }

  100% {
    opacity: 1;
    transform: translateX(-20px) scaleX(-1);
  }
}



/*
IN APP classes
*/


.round-button:disabled,
.round-button[disabled],
.text-icon-button:disabled,
.text-icon-button[disabled] {
  border: 1px solid #1f1f1f;
  background-color: #323639;
  color: #666666;
}

.overlay-button:disabled,
.overlay-button[disabled] {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}



button:disabled span,
button[disabled] span {
  opacity: 0.5;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.gbox {
  background: #191F40;
  box-shadow: 5px 5px rgba(0, 0, 0, 1);
  border-radius: 5px 5px 0px 0px;
}

.setup-box {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -150px;
  box-sizing: border-box;
  user-select: none;
  border-radius: 5px 5px 0px 0px;
}

.save-box {
  margin-top: 10px;
}

.dialog-title {
  font-size: 14px;
  font-weight: bold;
  color: #191F40;
  background: #7D8199;
  display: block;
  clear: both;
  padding: 5px;
  border-radius: 5px 5px 0px 0px;
}

.setup-form {
  display: block;
  clear: both;
  padding: 10px;
  line-height: 36px;
  user-select: none;
}

input[type=text],
select,
textarea {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-sizing: border-box;
  resize: vertical;
}

.setup-form input[type=text] {
  width: 50px;
}

.setup-form select {
  width: 150px;
}

.setup-form label {
  min-width: 80px;
  display: inline-block;
}



.text-icon-button {
  background-color: #b34040;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #1f2f47;
  display: inline-block;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  padding: 2px 8px;
  text-decoration: none;
  transition: background-color 0.2s;
  outline: none;
  margin: 5px;
}


.text-icon-button span {
  background-image: var(--spriteURL);
  background-repeat: no-repeat;
  display: inline-block;
  width: 30px;
  height: 30px;
  vertical-align: middle;
  margin-right: 4px;
}

.camera-icon-text span {
  background-position: 0px 0px;
}

.deleteAll-icon-text span {
  background-position: -30px -570px;
}

.photo-icon-text span {
  background-position: 0px -30px;
}

.yes-icon-text span {
  background-position: 0px -60px;
}

.no-icon-text span {
  background-position: 0px -90px;
}

.build-icon-text span {
  background-position: 0px -450px;
}

.edit-icon-text span {
  background-position: 0px -390px;
}

.pasteAfter-icon-text span {
  background-position: -60px -0px;
}

.pasteBefore-icon-text span {
  background-position: -60px -30px;
}

.download-icon-text span {
  background-position: -0px -510px;
}

.box-holder {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -40%);
}

.timeline-box {
  width: 100%;
  height: 100px;
  margin-top: 10px;
}

.editor-box {
  min-width: 50px;
  min-height: 50px;
  box-sizing: border-box;
  user-select: none;
  text-align: center;
  border-radius: 5px;
  display: inline-block;
  position: relative;
  vertical-align: top;
  float: right;
}

.preview-box {
  min-width: 200px;
  min-height: 50px;
  box-sizing: border-box;
  user-select: none;
  text-align: center;
  border-radius: 5px;
  display: inline-block;
  position: relative;
  float: left;
}

.editor-panel {
  min-height: 50px;
  padding: 5px;
}

.filters-box {
  width: 25%;
  max-width: 300px;
  min-width: 150px;
  height: 90%;
  max-height: 600px;
  position: absolute;
  left: 0px;
  top: 0px;
  text-align: center;
  display: none;
}

.filters-list {
  margin: 5px;
  text-align: center;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100% - 110px);
}

.filter-button {
  display: inline-block;
  width: 115px;
  height: 35px;
  margin: 2px;

  background-color: #5a5fad;
  color: white;
  border: 2px solid #5a5fad;
  user-select: none;
  transition: background-color .2s;
}

.filter-button-selected {

  background-color: #191F40;
  border: 2px solid rgb(190, 190, 190);
}


.toggle-button {
  background: #5A5FAD;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 5px;
  padding: 5px;
  box-sizing: border-box;
  outline: none;
  transition: background 0.2s;
  margin: 3px;
  box-shadow: 2px 2px 2px #000;
}

.toggle-button-timer {
  float: right;
}

.toggle-button-pressed {
  box-shadow: 0px 0px 1px #000;
  opacity: 0.6;
  transform: translate(2px, 2px);
  background-color: #343d6f;
}

.toggle-button span {
  background-image: var(--spriteURL);
  width: 30px;
  height: 30px;
  display: block;
}

.toggle-button-flipv span {
  background-position: 0px -330px;
}

.toggle-button-fliph span {
  background-position: 0px -360px;
}

.toggle-button-timer span {
  background-position: 0px -480px;
}

button {
  user-select: none;
}

#prDiv img,
#image-preview img {
  width: 100%;
  height: auto;
}


.overlay-button {
  background: transparent;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  padding: 5px;
  box-sizing: border-box;
  outline: none;
  margin: 3px;
  position: absolute;
  top: 50px;
  opacity: 0.7;
  transition: background .2s;
}

.overlay-button:active {
  background: rgba(255, 255, 255, 0.5);
}


.overlay-button span {
  background-image: var(--spriteURL);
  width: 30px;
  height: 30px;
  display: block;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8));
}

.overlay-button-effects span {
  background-position: 0px -270px;
}

.overlay-button-switchcam span {
  background-position: 0px -300px;
}

.editor-tab {
  background-color: #7A7F99;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
  border-radius: 5px 5px 0px 0px;
  display: inline-block;
  color: #BBBBBB;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  width: 49%;
  height: 40px;
  border: none;
}

.editor-tab-active {
  background-color: #191F40;
  cursor: auto;
  color: #ffffff;
}

.bottom-tab {
  background-color: #7A7F99;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
  border-radius: 0px 5px 0px 0px;
  display: inline-block;
  color: #BBBBBB;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  width: 120px;
  height: 40px;
  border: none;
  position: absolute;
  left: 0px;
  bottom: 0px;
}

canvas {
  background: #000;
  margin-top: 5px;
  width: 100%;
}

#editorPanel {
  padding: 5px;
}

.round-button {
  background: #5A5FAD;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 20px;
  padding: 5px;
  box-sizing: border-box;
  outline: none;
  transition: background 0.2s;
  margin: 3px;
}

.round-button span {
  background-image: var(--spriteURL);
  width: 30px;
  height: 30px;
  display: block;
}


.round-button-add-one span {
  background-position: 0px -120px;
}

.round-button-record span {
  background-position: 0px -150px;
}

.round-button-close span {
  background-position: 0px -240px;
}

.round-button-stop-rec span {
  background-position: 0px -180px;
}

.round-button-open-photo span {
  background-position: 0px -210px;
}





.range-slider {
  -webkit-appearance: none;
  /* Override default CSS styles */
  appearance: none;
  width: 96%;
  /* Full-width */
  height: 5px;
  /* Specified height */
  background: #d3d3d3;
  /* Grey background */
  outline: none;
  /* Remove outline */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 25px;
  border-radius: 50% 50% 0% 0%;
  background: #7D8199;
  cursor: pointer;
}

.range-slider::-moz-range-thumb {
  width: 15px;
  height: 25px;
  border-radius: 50% 50% 0% 0%;
  background: #7D8199;
  cursor: pointer;
}

.range-slider ::-ms-thumb {
  width: 15px;
  height: 25px;
  border-radius: 50% 50% 0% 0%;
  background: #7D8199;
  cursor: pointer;
}

input[type=range]::-ms-fill-lower {
  background: #777;
  border-radius: 10px;
}

input[type=range]::-ms-fill-upper {
  background: #ddd;
  border-radius: 10px;
}

.timeline-frames {
  width: 96%;
  height: 12px;
  display: -webkit-flex;
  display: flex;
  background: grey;
  margin: auto;
}

.timeline-frame {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.timeline-frame-even {
  background: #afafaf;
}

.timeline-frame-current {
  background: #ff5722;
}

.timeline-frame-selected {
  background-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2), #ffed00);
  border-bottom: 4px solid #ff5722;
}


.media-button {
  background: rgba(0, 0, 0, 0.25);
  width: 30px;
  height: 30px;
  border: none;
  padding: 0px;
  border-radius: 10%;
  box-sizing: border-box;
  outline: none;
  transition: background 0.1s;
  vertical-align: middle;
}

.media-button span {
  background-image: var(--spriteURL);
  width: 30px;
  height: 30px;
  display: block;
}


.media-button-play span {
  background-position: -30px 0px;
}

.media-button-pause span {
  background-position: -30px -30px;
}

.media-button-next span {
  background-position: -30px -60px;
}

.media-button-prev span {
  background-position: -30px -90px;
}

.media-button-first span {
  background-position: -30px -150px;
}

.media-button-last span {
  background-position: -30px -120px;
}

.media-button-deleteFrames span {
  background-position: -0px -420px;
}

.media-button-reverseFrames span {
  background-position: -30px -180px;
}

.media-button-selStart span {
  background-position: -30px -210px;
}

.media-button-selEnd span {
  background-position: -30px -240px;
}


.media-button-cut span {
  background-position: -30px -390px;
}

.media-button-copy span {
  background-position: -30px -420px;
}

.media-button-paste span {
  background-position: -30px -450px;
}

.media-button-moveForward span {
  background-position: -30px -300px;
}

.media-button-moveBack span {
  background-position: -30px -330px;
}

.media-button-deleteAll span {
  background-position: -30px -570px;
}

.media-button-settings span {
  background-position: -60px -60px;
}


.social-button {
  background: rgba(0, 0, 0, 0.25);
  width: 40px;
  height: 40px;
  border: none;
  padding: 0px;
  border-radius: 10%;
  box-sizing: border-box;
  outline: none;
  transition: background 0.1s;
  vertical-align: middle;
}

.social-button span {
  background-image: var(--spriteURL);
  width: 40px;
  height: 40px;
  display: block;
}


.share-social-button span {
  background-position: -90px -200px;
}

.fb-social-button span {
  background-position: -90px 0px;
}
.tw-social-button span {
  background-position: -90px -40px;
}
.tm-social-button span {
  background-position: -90px -80px;
}
.vk-social-button span {
  background-position: -90px -120px;
}
.gp-social-button span {
  background-position: -90px -160px;
}

.delay-icon {
  width: 30px;
  height: 30px;
  display: inline-block;
  background-image: var(--spriteURL);
  background-position: -60px -90px;
  vertical-align: middle;
}


.text-icon-button-media {
  background-color: rgba(0, 0, 0, 0.25);
  border: none;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  display: inline-block;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  padding: 2px 4px;
  text-decoration: none;
  transition: background-color 0.2s;
  outline: none;
  margin: 5px;
  vertical-align: middle;
}


.text-icon-button-media span {
  background-image: var(--spriteURL);
  background-repeat: no-repeat;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 4px;
  vertical-align: middle;
}

.selectAll-icon-button-media span {
  background-position: -30px -270px;
}

.deselect-icon-button-media span {
  background-position: -30px -360px;
}

.speed-icon-button-media span {
    background-position: -30px -510px;
}



.image-thumb {
  display: block;
  float: left;
  margin:2px 1px 2px 1px;
}
.image-thumb img {
  border-style:solid;
  border-width:1px;
  border-color:#ffffff;
}
.related {
  width:300px;
  float:right;
}














  .create-gif-button {width:50px;height:50px;float:right;margin:2px;}
  .top-left-logo {float:left;}




.bigImage {height:auto;max-width:480px;}



#sortLinks {
  float:left;
  margin-top: 12px;
  
}
#sortLinks a {
  text-decoration: none;
  border-radius: 10px 30px;
    padding: 3px 10px 3px 10px;
  margin-left: -4px;
}
.activeSortLink, .paging a {


  background:#000000;
  background:linear-gradient(90deg, rgba(1,1,1,1) 0%, rgba(9,9,9,1) 50%, rgba(20,20,20,1) 100%);  
}
.inactiveSortLink, .activeSortLink:hover, .inactiveSortLink:hover, .paging a:hover,.pageNumSelected {
  background:#FF6600;
  color:#FFFFFF;
}

.paging a, .paging span {
  padding:5px;
  border-radius: 2px 5px;

}

#content-header {
  overflow:auto;
  width: auto;
  padding:5px 20px 10px 20px;
}



#content-header h1 {
  float:left;
  margin-right:16px;
}



.paging{padding:20px;clear:both;text-align:center;}
.stars {background-image: url("/static/img/stars.gif");width:100px;height:20px;float:left}
.stars5 {background-position:0px -0px!important}
.stars4 {background-position:0px -20px!important}
.stars3 {background-position:0px -40px!important}
.stars2 {background-position:0px -58px!important}
.stars1 {background-position:0px -78px!important}
.stars0 {background-position:0px -96px!important}

.rating-stars {
  display: none;
}
.rating-text {

  display:inline-block;
  margin-left:10px;
}


.page {
  margin: 0px 0px;
  background: #414765;
}

.page:after {
  content: "";
  display: table;
  clear: both;
}

.wrapper {
  max-width: 1960px;
  min-width: 200px;
  margin: 0 auto;
  position: relative;
  padding: 0px 0px;
  min-height: 300px;
}

.content-wrapper {
  float: left;
  width: 100%;
}

.content {
  background: #414765;
  margin-right: 320px;
  clear: both;
  overflow: auto;
  min-height: 300px;
}

.content h1 {
  padding-left: 5px;
}
.sidebar {
  position: relative;
  width: 320px;
  margin-left: -320px;
  float: right;
  overflow: hidden;
  min-height: 300px;
  text-align:center;
}

.sidead {
  width: 320px;
  height:600px;
  display: inline-block;
}

#leaderboard {
  text-align:center;
}

.leaderboard-gallery {
  padding-bottom:10px;
  max-height:100px;
  max-width: 1280px;
  margin:auto;  
}

.yellowLink {color:Yellow;}
.leaderboard_ad {width: 768px; height: 90px;}
.sky_ad {width: 300px; height: 600px; display:inline-block;}


.gifImage {
  margin:2px;
}
.gifHolder {
  margin:1px;
  padding:2px;
  float:left;
  background-color:#000000;
  text-align: left;
}
.big-gif-holder {

  float:left;
  text-align: center;
}

  
















@media only screen and (min-width: 1400px) {
  .wrapper {
    max-width:95%;
  }

}

@media only screen and (max-width: 1200px) {
  .sidebar {
    width: 180px;
    margin-left: -180px;
  }
  .sidead {
    width: 180px;
    height:600px;
    display: inline-block;
  }  
  .content {
    margin-right: 180px;
  }

  .prettyadH img {
    width:100%;
    max-width:728px;
    height:auto;
  }



  .sky_ad {width: 160px; height: 600px;}

}


@media only screen and (max-width: 670px) {
  .bigImage {width:100%;}
  .sidebar {
    display: none;
  }

  .sidead {
    display: none;
  }


  .sky_ad {display: none;}

  .content {
    margin-right: 0;
  }


  .related {
    width:auto;
    float:none;
  }

  .gifImage {
    width:100%;
    height:auto;
    margin:0px;
  }

  .gifHolder {
    margin:1px;
    padding:2px;
    float:none;
    background-color:#000000;
    text-align: left;
  }

.big-gif-holder {
  width:100%;
  float:left;
  text-align: center;
}



  .smallGImg {width:100%;margin-left:0px;margin-right:0px;background-color:#000000}
  .galImage {width:100%;height:auto;}
  .leaderboard_ad {width: 728px; height: 90px;}

}

 @media only screen and (max-width: 728px) {
    .leaderboard_ad {width: 468px; height: 60px;}
      .sky_ad {display: none;}
}

 @media only screen and (max-width: 468px) {
    .leaderboard_ad {width: 320px; height: 100px;}
      .sky_ad {display: none;}
}  

/*
.timer-icon {
  background-image: var(--spriteURL);
  background-position: -30px 0px;
  width: 20px;
  height:20px;
  display:inline-block;
}

.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}


.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .1s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}


.slider.round {
  border-radius: 17px;
}

.slider.round:before {
  border-radius: 50%;
}

*/


/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 700px) {
  .properties {
    width: 400px;
    float: left;
  }

  .introimage {
    display: block;
    text-align: center;
    width: 300px;
    float: right;
  }

  .intimg {
    display: none;
  }

  .intro h1 {
    margin-top: 25px;
  }
}


/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
  /* ... */
}

/* stylus-based screens */
@media (hover: none) and (pointer: fine) {
  /* ... */
}

/* Nintendo Wii controller, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) {
  /* ... */
}

/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) {

  /* ... */
  button {
    cursor: pointer;
  }



  .round-button:hover {
    background-color: #323639;
  }


  #btnStart:hover {
    background-color: #323639;
  }

  .text-icon-button:hover {
    background-color: #323639;
  }

  .filter-button:hover {
    background-color: #323639;
  }

  .overlay-button:hover {
    opacity: 1.0;
  }


  .media-button:hover {
    background-color: #000000;
  }

  .social-button:hover {
    background-color: #000000;
  }

  .text-icon-button-media:hover {
    background-color: #000000;
  }


  a:hover {
    color: #FF6600;
    text-decoration: underline;
    text-shadow: none;
  }




}