@import url('http://fonts.googleapis.com/css?family=Lato:400,700');
body{
	margin: 0;
	padding: 0;
	font-family: 'Lato', sans-serif;
}
section{
	position: relative;
	height: 100vh;
	display: flex;
}
section .screen{
	position: relative;
	flex-grow: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 3s;
	overflow: hidden;
}
section .screen:hover{
	flex-grow: 4;
}
section .screen:nth-child(1){
	background: #111315;
}
section .screen:nth-child(2){
	background: #292826;
}
section .screen .card{
    width:100%;
	text-align: center;
	transition: 0.5s;
}
section .screen .card .imgBox{
    max-width:75%;
	overflow: hidden;
	margin: 10% auto;
}
section .screen .card .imgBox img{
	max-width: 100%;
}
.content{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 100px;
	background: #000;
	transition: 0.5s;
	opacity: 0;
	visibility: hidden;

}
section .screen:nth-child(2) .content{
	background: #bf4747;
}

.btn-1 {
  text-align: center;
  display: inline-block;
  padding: 15px 40px;
  border: 1px solid #fff;
  cursor: pointer;
  letter-spacing: 2px;
  position:relative;
  overflow:hidden;
  margin: 0 20px;
      font-size:25px;
color:#fff;
    max-width:25%;
    white-space:nowrap;
  overflow:hidden;
}

.btn-1:before {
  content: "";
  position: absolute;
  height: 150px;
  width: 50px;
  background : #8cbf39;
  right: -40px;
  top: -40px;
  transform: rotate(37deg);
  transition: all .9s;
  opacity: 1;
    
    
}

.btn-1:hover:before {
  right: 105%;
}

.btn-2 {
  text-align: center;
  display: inline-block;
  padding: 15px 40px;
  border: 1px solid #fff;
  cursor: pointer;
  letter-spacing: 2px;
  position:relative;
  overflow:hidden;
  margin: 0 20px;
      font-size:25px;
color:#fff;
     max-width:25%;
    white-space:nowrap;
  overflow:hidden;
}

.btn-2:before {
  content: "";
  position: absolute;
  height: 150px;
  width: 50px;
  background : #fad342;
  right: -40px;
  top: -40px;
  transform: rotate(37deg);
  transition: all .9s;
  opacity: 1;
    
}

.btn-2:hover:before {
  right: 105%;
}

@media (max-width: 994px)
{
    .btn-1, .btn-2{
        font-size:10px;
    }
}

@media (min-width: 995px) and (max-width: 1500px)
{
    .btn-1, .btn-2{
        font-size:15px;
    }
}