/* update on navigation menu to include 'trends' link */

.header .trends-link a {
  color:#f15925;
 }

 .header .trends-link span {
   background:url(../imgs/trends-icon.svg) 0 0 no-repeat;
   display:inline-block;
   width:24px;
   height:20px;
   position:relative;
   top:5px;
   margin-right:3px;
 }

 .header .trends-link a:hover span {
   background:#396172 url(../imgs/trends-icon-white.svg) 0 0 no-repeat;
 }


/* Currency selectors styling */

.currency-dropdowns {
  cursor:pointer;
}

.currency-selectors {
  text-align:center;
  margin-top:45px;
}

  .currency-selectors li {
    display:inline-block;
    padding:0 10px;
  }

  .currency-drops {
    border:1px solid white;
    border-radius:3px;
    font-size:20px;
    color:white;
    line-height:26px;
    padding:7px 9px;
    width:75px;
    text-align: left;
    background: url(../imgs/arrow-white-dropdown.svg) 85% 15px no-repeat;
  }

/* rate graphs styling */

.rate-graphs {
  clear:both;
  position:relative;
  width:100%;
  background:#2E4C58;
  background:-moz-linear-gradient(-40deg, #3e6a79 0%, #2e4c58 100%);
  background:-webkit-linear-gradient(-40deg, #3e6a79 0%,#2e4c58 100%);
  background:linear-gradient(140deg, #3e6a79 0%,#2e4c58 100%);
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e6a79', endColorstr='#2e4c58',GradientType=1 );
  display: none;
}

  .rate-graphs .inner-container {
    padding-left:20px;
    padding-right:20px;
    padding-top:1px;
  }

.canvas-wrap {
  max-width: 900px;
  margin:35px auto;
  position:relative;
}

  #wrapGraph {
    height:270px;
    position:relative;
  }

  .canvas-wrap canvas {
    height:200px;
  }

.rg-content {
  color:white;
  text-align:center;
  padding-bottom:80px;
  padding-top:10px;
}

  .rg-content h2 {
    padding-bottom:20px;
  }

  .rg-content p {
    padding-left:50px;
    padding-right:50px;
  }

  .rg-content .btn {
    margin-top:30px;
  }

.chart-controls {
  text-align: center;
}

.chart-controls li {
  display:inline-block;
  text-align: right;
  padding:0 10px;
  text-transform: uppercase;
  font-size:12px;
}

.chart-controls li a {
  background:transparent;
  color:#fff;
  border:1px solid #fff;
  border-radius:2px;
  padding:5px 10px;
}

.chart-controls li a.active {
  border:1px solid #fff;
  background:#fff;
  color:#396172;
}

.close-chart {
  background: url(../imgs/close-icon-rates-graph.svg) 50% 50% no-repeat;
  width:70px;
  height:40px;
  position:absolute;
  top:-90px;
  right:-25px;
  cursor: pointer;
  color:white;
  padding-top:30px;
  text-align:center;
}

  .close-chart:hover {
    opacity:0.7;
  }

  .close-chart span {
    position:relative;
    top:40px;
    opacity:0;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }

  .close-chart:hover span {
    display:inline;
    top:20px;
    opacity:1;
    color:rgba(255,255,255,0.5);
  }

/* Spinner styles */

.spinner {
  width: 40px;
  height: 40px;
  margin: 100px auto;
  background-color: #fff;
  position:absolute;
  top:0;
  left:50%;
  margin-left:-25px;

  border-radius: 100%;
  -webkit-animation: sk-scaleout 0.7s infinite ease-in-out;
  animation: sk-scaleout 0.7s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0;
  }
}

/* media queries */

@media (max-width:480px) {
  .currency-selectors {
    text-align:left;
  }

  .currency-selectors li:first-child {
    padding:0 10px 0 0;
  }
}