@import url('https://fonts.googleapis.com/css?family=Open+Sans:600');
*{
  padding:  0px;
  margin: 0px;
  transition: all .4s ease;
  color: white;
  font-family: 'Open Sans', sans-serif;
}
a {
  text-decoration: none;
}
a:focus,
a:hover,
a:active {
	outline:0;
}
.container{
  width: 100%;
  height: 100vh;
  display: flex;
}
.container .one{
  flex: 1;
  height: 100%;
  background-image: url('../img/gem-01.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.container .two{
  flex: 1;
  height: 100%;
  background-image: url('../img/gem-04.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.content{
  width: 100%;
  height: 100%;
  text-align:center;
}
.one .content{
  background:rgba(33,92,87,0.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.two .content{
  background:rgba(235,178,73,0.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.one .content:hover{
  background: rgba(33,92,87,0.9);
}
.two .content:hover{
  background: rgba(235,178,73,0.9);
}
.container .one:hover {
  flex: 1.3 !important;
}
.container .two:hover {
  flex: 1.3 !important;
}
.container .one:hover > .content img,
.container .two:hover > .content img {
  max-width: 300px;
}
.container .one:hover > .content .c1 {
  border-color: #EBB249;
  background: rgba(235,178,73,1);
  background: -moz-linear-gradient(top, rgba(235,178,73,1) 0%, rgba(201,143,44,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(235,178,73,1)), color-stop(100%, rgba(201,143,44,1)));
  background: -webkit-linear-gradient(top, rgba(235,178,73,1) 0%, rgba(201,143,44,1) 100%);
  background: -o-linear-gradient(top, rgba(235,178,73,1) 0%, rgba(201,143,44,1) 100%);
  background: -ms-linear-gradient(top, rgba(235,178,73,1) 0%, rgba(201,143,44,1) 100%);
  background: linear-gradient(to bottom, rgba(235,178,73,1) 0%, rgba(201,143,44,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebb249', endColorstr='#c98f2c', GradientType=0 );
}
.container .two:hover > .content .c2 {
  border-color: #215C57;
  background: rgba(33,92,87,1);
  background: -moz-linear-gradient(top, rgba(33,92,87,1) 0%, rgba(22,71,66,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(33,92,87,1)), color-stop(100%, rgba(22,71,66,1)));
  background: -webkit-linear-gradient(top, rgba(33,92,87,1) 0%, rgba(22,71,66,1) 100%);
  background: -o-linear-gradient(top, rgba(33,92,87,1) 0%, rgba(22,71,66,1) 100%);
  background: -ms-linear-gradient(top, rgba(33,92,87,1) 0%, rgba(22,71,66,1) 100%);
  background: linear-gradient(to bottom, rgba(33,92,87,1) 0%, rgba(22,71,66,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#215c57', endColorstr='#164742', GradientType=0 );
}
.content .box { 
  margin: 0px 10%;
  max-width: 100%;
  position: relative;
}
.content img {
  max-width: 300px;
  margin:0 auto;
  display: flex;
}
.content .btn {
  margin: 20px auto 0;
  width: 160px;
  height: 40px;
  border-radius: 5px;
  border: solid 2px #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color:#fff;
  box-shadow: 0px 3px 10px 1px rgba(0,0,0,.4);
  font-size:14px;
  font-weight: 600;
  text-decoration:none;
}
.content .c1:hover {
  background: #FCC560;
  color:#215C57;
}
.content .c2:hover {
  background: #215C57;
  color:#FCC560;
}
#gem {
  text-align: center;
  width: 100%;
  position: absolute;
  top: 5%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media (max-width: 500px) {
.container .one:hover > .content img,
.container .two:hover > .content img {
  max-width: 220px;
}
  .content img {
	max-width:160px;
	padding:10px;
  }
  #split-pane-or img {
	max-width:50%;

  }
}
@media (max-width: 768px)
{
  .container{
	flex-direction: column
  }
}