/* @import "bourbon";*/

// variables - colors

$main-text: #2d313f; // main text
$link: #d36868; // anchor tags
$background: #e7eaf0; // body background color

$color-1: #ccc; // blue
$color-2: #cdcdcd; // red
$color-3: #ffffff; // white

// variables - fonts 

$primary-font: 'Lora', serif;

// rem fallback - credits: http://zerosixthree.se/

@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

// layout - breakpoints
  
$S:     320px;   
$M:     768px;     
$L:     1170px;         

// layout - media queries

@mixin MQ($canvas) {
  @if $canvas == S {
   @media only screen and (min-width: $S) { @content; } 
  }
  @else if $canvas == M {
   @media only screen and (min-width: $M) { @content; } 
  }
  @else if $canvas == L {
   @media only screen and (min-width: $L) { @content; } 
  }
}

/* -------------------------------- 

Primary style

-------------------------------- */


#google-container {
    position: relative;
    width: 100%;
    height: 400px;
    background-color: $background;

    @include MQ(M) {
      height: 300px;
    }

    @include MQ(L) {
      height: 600px;
    }
}

#cd-google-map {
  position: relative;

  address {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 1em 1em;
    background-color: rgba($color-2, .9);
    color: $color-3;
    @include font-size(13px);

    @include MQ(M) {
      @include font-size(15px);
      text-align: center;
    }
  }
}

#cd-zoom-in {
  height: 32px;
  width: 32px;
  cursor: pointer;
  margin-left: 10px;
  background-color: rgba($color-2, .9);
  background-repeat: no-repeat;
  background-image: url('zoom-in.png');

  .no-touch &:hover {
    background-color: rgba($color-2, 1);
  }

  @include MQ(M) {
    margin-left: 50px;
  }
}

#cd-zoom-out {
  height: 32px;
  width: 32px;
  margin-top: 0px;
  cursor: pointer;
  margin-left: 10px;
  background-color: rgba($color-2, .9);
  background-repeat: no-repeat;
  background-image: url('zoom-out.png');

  .no-touch &:hover {
    background-color: rgba($color-2, 1);
  }

  @include MQ(M) {
    margin-left: 50px;
  }

#cd-zoom-in {
  margin-top: 10px;
  margin-bottom: 1px;

  @include MQ(M) {
    margin-top: 50px;
  }
}

#cd-zoom-out {
  background-position: 50% -32px;