﻿
/* =========================================================================
	Main - Styles 
============================================================================= */

    .container-fluid {
        height: 100%;
        display:table;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .row-fluid {
        height: 100%;
        display:table-cell;
        vertical-align: middle;
        width: 100%;
    }

    .centering {
        float: none;
        margin: 0 auto;
    }


/* Selections */
::selection {background: #e3e4e6; color:black;}
::-moz-selection {background: #e3e4e6;color:black;}


/* Images */

img, iframe {
  max-width: 100%;
  height: auto;
}

.center_left {
    float: left;
	max-width: 50%;
	max-height: 40%;
	padding:10px;
}
.center_right {
    float: left;
	max-width: 50%;
	max-height: 40%;
	padding:10px;
}

.col-centered{
    float: none;
    margin: 0 auto;
}

/* Text Elements */

/* Layout Elements */

body > .row > [class*='coffee-span-'].column-2 {
  float: left;
  clear: both;
  margin-top: 0;
  margin-right: 0;
  padding-top: 0;
}

body > .row > [class*='coffee-span-'].column-3 {
  display: block;
  margin-bottom: 0;
}

body > .row.row-1 {
  position: static;
}

div.responsive-picture.picture-1 {
  position:static;
  display: block;
  float: none;
  clear: none;
  height:100%;
  width:100%;
  max-width:342px;
  max-height:486px;
  background-image:url('../img/center_left.jpg')
}

div.responsive-picture.picture-1:hover {
  background-image:url('../img/center_left_hover.jpg')	
}

div.responsive-picture.picture-2 {
  position: static;
  display: block;
  float: none;
  clear: none;
  height:100%;
  width:100%;
  max-width:342px;
  max-height:486px;
  background-image:url('../img/center_right.jpg')
}

div.responsive-picture.picture-2:hover {
  background-image:url('../img/center_right_hover.jpg')	
}

  /* Text Elements */
  p.paragraph.normal_text {
    font-size: 13px;
  }
  
  p.paragrah.red_text {
	color:#854919;
 }
 
.embed-container {
  position: relative; 
  padding-bottom: 56.25%; /* ratio 16x9 */
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: auto;
}
.embed-container iframe {

  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}
/* ratio 4x3 */
.embed-container.ratio4x3 {
  padding-bottom: 75%;
}

div.responsive-picture.second-img:hover {
  opacity: 0;
  -webkit-transition-timing-function: linear;
     -moz-transition-timing-function: linear;
      -ms-transition-timing-function: linear;
       -o-transition-timing-function: linear;
          transition-timing-function: linear;
  -webkit-transition-duration: .5s;
     -moz-transition-duration: .5s;
      -ms-transition-duration: .5s;
       -o-transition-duration: .5s;
          transition-duration: .5s;
}

div.responsive-picture.image-content {
  position: relative;
  top: 0;
  right: auto;
  bottom: 0;
  left: auto;
  z-index: 0;
  float: none;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-right: 0;
  padding-left: 0;
  max-width: none;
}

div.responsive-picture.second-img {
  position: relative;
  top: 0;
  left: 0;
  float: none;
  margin-top: 0;
  margin-bottom: 0;
  max-width: none;
  -webkit-transition-timing-function: linear;
     -moz-transition-timing-function: linear;
      -ms-transition-timing-function: linear;
       -o-transition-timing-function: linear;
          transition-timing-function: linear;
  -webkit-transition-duration: .5s;
     -moz-transition-duration: .5s;
      -ms-transition-duration: .5s;
       -o-transition-duration: .5s;
          transition-duration: .5s;
}

a.responsive-picture.first-img {
  position: absolute;
  z-index: auto;
  float: none;
  margin: 0 auto;
  padding: 0;
  max-width: none;
  border: 1px solid #dedede;
  border-top-left-radius: 5px 5px;
  border-top-right-radius: 5px 5px;
  border-bottom-right-radius: 5px 5px;
  border-bottom-left-radius: 5px 5px;
  background-color: transparent;
}

div.responsive-picture.bg-image {
  position: static;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  float: left;
  margin-top: 0;
  margin-bottom: 0;
  max-width: none;
}

div.responsive-picture.image-content {
  position: relative;
  top: 0;
  right: auto;
  bottom: 0;
  left: auto;
  z-index: 0;
  float: none;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-right: 0;
  padding-left: 0;
  max-width: none;
}

div.responsive-picture.picture-3 {
	width:15%;
	height:auto;
	padding-left:20px;
}

p.red_text {
	color:#854919;
	font-weight:bold;
	padding-left:20px;
}

div.responsive-picture.picture-4 {
	padding-left:20px;
}

div.responsive-picture.picture-5 {
	padding-left:20px;
}

ul {list-style: none;}
li {
	list-style:none}
}
#wrap { max-width: 865px; margin: 0 auto; width:95%;}
li div { overflow:hidden; position:relative;}
li { margin-bottom:10px;}
.shadow {  position:absolute; top:0; left:0; opacity:1; background:transparent; width:100%; height:100%; 
	-webkit-box-shadow: inset 0 0 60px 20px rgba(37,27,23,.5);
	-moz-box-shadow: inset 0 0 60px 20px rgba(37,27,23,.5);	
	box-shadow: inset 0 0 60px 20px rgba(37,27,23,.5);
	-webkit-transition: opacity 1.5s .5s;-moz-transition:opacity 1.5s .5s; -o-transition:opacity 1.5s .5s;-ms-transition:all 1.5s .5s; transition:opacity 1.5s .5s;}
li div:hover .shadow {opacity:0;}
img {position:relative; top:0;left:0; max-width:auto;width:100%;
	-moz-transform-origin:50% 50%;
	-webkit-transform-origin:50% 50%;
	-o-transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	transform-origin:50% 50%;
	-webkit-transition:all 1.5s .5s;-moz-transition:all 1.5s .5s; -o-transition:all 1.5s .5s;-ms-transition:all 1.5s .5s; transition:all 1.5s .5s; }
li div img.onhover {opacity:0;position:absolute;}
li div:hover img {-webkit-transform: scale(1) rotate(0);-moz-transform:scale(1) rotate(0);-o-transform:scale(1) rotate(0);-ms-transform:scale(1) rotate(0);transform:scale(1) rotate(0);}
li div:hover img.onhover {opacity:1;}