@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

*{
  font-family:'Lobster',cursive;
  padding:0;
  margin:0;
  box-sizing: border-box;
}
.wrapper{
  width:100%;
  min-height:100vh;
  overflow:hidden;
  background-color:#ddd;
}
.row{
  width:100%;
  padding:50px 100px;
  

}
.image-section{
  width:30%;
  float:left;
  
}
.image-section img{
  width:100%;
  height:400px;
  object-fit: cover;

}
.content{
  width:60%;
  float:left;
  margin-left: 50px;
  
}
.content h1{
  font-size: 90px;
  letter-spacing: 3.5px;

  color:#222;
  margin-top:-30px;
 
}
.content h2{
  font-size: 40px;
  font-family: sans-serif;
  color:cadetblue;
}
.content p{
  font-size:20px ;
  font-family: serif;
  margin-top:30px;
  line-height:1.5;
}
@media screen and (max-width:768px){

  .image-section{
    width:100%;
    float:none;
    margin:0;
    padding:0;
    
  } 
  .image-section img{
    width:100%;
    height:auto;
  }
  .content{
    width:100%;
    float:none;
    margin-left: 0px;

  }
 

  .content p{
    font-size:18px ;
 
  }
  .content h1{
    font-size: 60px;
    letter-spacing: 2px;
    margin-top: 30px;
 
   
  }
  .content h2{
    font-size: 30px;

  }

}
/*lego animation*/



.container .card .icon {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background: #2c73df;

}

.container .card .icon .fa {

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	font-size: 80px;

	color: #fff;

}

.container .card .slide {

	width: 300px;

	height: 200px;

	transition: 0.5s;

}

.container .card .slide.slide1 {

	position: relative;

	display: flex;

	justify-content: center;

	align-items: center;

	z-index: 1;

	transition: .7s;

	transform: translateY(100px);

}

.container .card:hover .slide.slide1{

	transform: translateY(0px);

}

.container .card .slide.slide2 {

	position: relative;

	display: flex;

	justify-content: center;

	align-items: center;

	padding: 20px;

	box-sizing: border-box;

	transition: .8s;

	transform: translateY(-100px);

	box-shadow: 0 20px 40px rgba(0,0,0,0.4);

}

.container .card:hover .slide.slide2{

	transform: translateY(0);

}

.container .card .slide.slide2::after{

	content: "";

	position: absolute;

	width: 30px;

	height: 4px;

	bottom: 15px;

	left: 50%;

	left: 50%;

	transform: translateX(-50%);

	background: #2c73df;

}

.container .card .slide.slide2 .content p {

	margin: 0;

	padding: 0;

	text-align: center;

	color: #414141;

}

.container .card .slide.slide2 .content h3 {

	margin: 0 0 10px 0;

	padding: 0;

	font-size: 24px;

	text-align: center;

	color: #414141;} 



.icon img{
	width:100%;
	height:200px;
	object-fit: cover;
}
.maindiv{
	display:flex;
	width:100%;
	justify-content: center;
	margin-top:25%;
}
.maindivtwo{
	display:flex;
	width:100%;
	justify-content: center;
}
.card{
	margin:15px;
}
@media screen and (max-width:768px){
	.maindiv,.maindivtwo{
		display:flex;
		margin:10px;
		flex-wrap:wrap;
	}


}
.maindiv h2{
	font-size: 20px;

}
/******/
.maincontainer{
	background-color: #fff;
	height:450px;
	width:950px;
	display:flex;
	box-shadow: 0 15px  15px rgba(0,0,0,0.3);
	margin-bottom:150px;
	margin-top:-300px;

}
.maincontainer .video-list{
	width:20%;
	padding:10px;
	padding-right:0;

}
.maincontainer .video-list img{
	width:100%;
	object-fit: cover;
	height:105px;
	padding:10px; 
	cursor:pointer;
}
.maincontainer .main-video{
	width:80%;
	padding:10px;
}
.maincontainer .main-video img{
	height:100%;
	width:100%;
	outline:none;
	padding:10px;
	object-fit:cover;
}

.maincontainer .video-list img:hover{
	background-color: #ddd;
	box-shadow: 0 0 0 4px gray inset;
}
.evenings{
	margin-left:70%;
	margin-top:10%;
}
.evenings h2{
	font-size: 60px;padding-top:10px;
	color:gray;
}
.evenings h3{
	font-size:40px;
	color:gray;
	margin-top:30px;
}