@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:300,400,800');
@import url('https://fonts.googleapis.com/css?family=Cinzel+Decorative:300,400,800');

.col-sm-6 {
    width: 100%;
}

html, body {
  height: 100%;
  min-height: 18em;
}

.frontend-side {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74452/website-code.png");
}

.frontend-side {
  background-image: url("./frontend-side.png");
}

.uiux-side {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74452/website-post-its.png");
}

.uiux-side {
  background-image: url("./uiux-side.png");
}

.split-pane {
  padding-top: 1em;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 50%;
  min-height: 9em;
  font-size: 1.5em;
  color: white;
  font-family: 'Cinzel', Noto Serif JP;
  font-weight:300;
}

  .split-pane {
    padding-top: 2em;
    height: 100%;
  }

.split-pane > div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

.split-pane > div .text-content {
  line-height: 1.6em;
  margin-bottom: 1em;
}


table{
	margin: 0 auto;
	width: 80%;
	border-collapse:collapse;
	th{
		box-sizing: border-box;
		line-height: 1.5;
		text-align: center;
		font-weight:400;
		border: 1px solid #DDD;
		padding: 15px 20px;
		width: 20%;
		@media screen and (max-width: 800px){
			width:121.6px;
			font-size: 0.5em;
		}
	}
	td{
		box-sizing: border-box;
		line-height: 1.5;
		text-align: left;
		font-weight:400;
		border: 1px solid #DDD;
		padding: 15px 20px;
		@media screen and (max-width: 800px){
			font-size: 0.5em;
		}
  	}
}

#split-pane-or {
  font-size: 2em;
  color: white;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  width: 100%;
  position: absolute;
  top: 15%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
#split-pane-or > div img {
  height: 2.5em;
}
@media (max-width: 1200px) {
  #split-pane-or {
    position: absolute;
    top: 50px;
  }
  #split-pane-or > div img {
    height:2em;
  }
}
@media(min-width: 800px) {
  #split-pane-or {
    font-size: 3em;
  }
}