body{
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
  background: #123;
}
ul{
  margin: 0;
  padding: 0;
}
ul li{
  list-style: none;
}
ul li a{
  text-decoration: none;
}
.blue{ color: #00e5ff !important;}
.container{
  width: 90%;
  margin: auto;
}
.header-area, .control-area{
  width:100%;
  padding: 50px 0;
}
.header-area{
  position: relative;
}
.header-area .logo h1{
  font-size: 40px;
  font-weight: 100;
  margin: 0;
}
.header-area .logo h1 a{
  text-decoration: none;
  color: #fff;
}
.header-area .full-scrn-btn{
  position: absolute;
  top:50px;
  right: 50px;
  border: 2px solid #fff;
  transition: 0.3s;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header-area .full-scrn-btn a{
  color: #fff;
  text-decoration: none;
}
.header-area .full-scrn-btn a i{
  font-size: 25px;
  transition: 0.3s;
}
.header-area .full-scrn-btn:hover{
  border: 2px solid #00e5ff;
}
.header-area .full-scrn-btn:hover a i{
  color:#00e5ff;
}
/*START CONTROL AREA*/
.control-area{
  position: fixed;
  bottom: 50px;
  left: 0;
}
.control-area .control-top, .control-area .control-bottom{
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center
}
.control-area .control-top li, .control-area .control-bottom li{
  float: left;
}
.control-area .control-top .middle{
  margin: 0 30px;
}
.control-area ul li a{
  color: #fff;
}
.control-area ul li a i{
  font-size: 30px;
  padding: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  display: flex;
  transition: 0.3s;
}
.control-area .control-top .middle a i{
  transform: scale(1.5);
}
.control-area ul li a i:hover{
  color:#00e5ff;
  border: 2px solid #00e5ff;
  box-shadow: 0 0 4px 1px #00e5ff;
}
.control-area .control-bottom ul li a{
  color: #fff;
  font-size: 25px;
  padding: 8px 15px;
  font-weight: 100;
  border: 0;
  border:1px solid #fff;
}
.control-area .control-bottom .middle a{
  border-left:0;
  border-right:0;
 
}
.control-area .control-bottom ul li a:hover{
  color: #00e5ff;
}



/*************************
**********************
******START MEDIA QUERIES
**********************
**************************/

/*MAXIMUM WIDTH 768px*/
@media only screen and (max-width:768px){
  .header-area, .control-area {
    padding: 30px 0;
  }
  .header-area .logo img{
    width: 120px;
    height: auto;
    display: block;
  }
  .control-area {
    bottom: 0;
  }
  .header-area .full-scrn-btn {
    top: 20px;
    right: 20px;
    border: 1px solid #fff;
    width: 30px;
    height: 30px;
  }
  .header-area .full-scrn-btn a i {
    font-size: 20px;
  }
  .control-area ul li a i {
    font-size: 15px;
    padding: 0px;
    width: 30px;
    height: 30px;
  }
  .control-area .control-bottom ul li a {
    font-size: 20px;
    padding: 5px 8px;
  }

}

/*MINIMUM WIDTH 768px*/
@media only screen and (min-width:768px){
  .header-area, .control-area {
    padding: 50px 0;
  }
  .header-area .logo img{
    width: 180px;
  }
  .control-area {
    bottom: 0;
  }
  .header-area .full-scrn-btn {
    top: 30px;
    right: 30px;
    border: 2px solid #fff;
    width: 40px;
    height: 40px;
  }
  .header-area .full-scrn-btn a i {
    font-size: 25px;
  }
  .control-area ul li a i {
    font-size: 30px;
    padding: 5px;
    width: 50px;
    height: 50px;
  }
  .control-area .control-bottom ul li a {
    font-size: 25px;
    padding: 10px 15px;
  }
}
/*MINIMUM WIDTH 1200px*/
@media only screen and (min-width:1200px){
  
  .header-area, .control-area {
    padding: 50px 0;
  }
  .header-area .logo img{
    width: 220px;
  }
  .header-area .full-scrn-btn {
    top: 50px;
    right: 50px;
    border: 2px solid #fff;
    width: 40px;
    height: 40px;
  }
  .header-area .full-scrn-btn a i {
    font-size: 25px;
  }
  
  .control-area ul li a i {
    font-size: 35px;
    padding: 5px;
    width: 50px;
    height: 50px;
  }
  .control-area .control-bottom{
    margin-top: 30px;
  }
  .control-area .control-bottom ul li a {
    font-size: 25px;
    padding: 10px 15px;
  }
  .control-area .control-top{
    padding: 30px 0;
  }
}
/*MINIMUM WIDTH 1900px*/
@media only screen and (min-width:1900px){
  .header-area, .control-area {
    padding: 100px 0;
  }
  .header-area .logo img{
    width: 250px;
  }
  .header-area .full-scrn-btn {
    top: 100px;
    right: 100px;
    border: 2px solid #fff;
    width: 50px;
    height: 50px;
  }
  .header-area .full-scrn-btn a i {
    font-size: 35px;
  }
  .control-area .control-top{
    padding: 80px 0;
  }
  
  .control-area .control-top .middle {
    margin: 0 60px;
  }
  .control-area ul li a i {
    font-size: 50px;
    padding: 8px;
    width: 70px;
    height: 70px;
  }
  .control-area .control-bottom ul li a {
    font-size: 40px;
    padding: 15px 25px;
  }
  
  .control-area ul li a i:hover{
    box-shadow: 0 0 8px 2px #00e5ff;
  }
}

/*MINIMUM WIDTH 2500px*/
@media only screen and (min-width:2500px){
  
  .header-area .logo img{
    width: 280px;
  }
  .header-area .full-scrn-btn {
    right: 150px;
  }
  .header-area .full-scrn-btn a i {
    font-size: 45px;
  }
  .control-area .control-top{
    padding: 120px 0;
  }
  .control-area .control-top{
    padding: 50px 0;
  }
  .control-area .control-top .middle {
    margin: 0 80px;
  }
  .control-area ul li a i {
    font-size: 80px;
    padding: 15px;
    width: 100px;
    height: 100px;
  }
  .control-area .control-bottom ul li a {
    font-size: 50px;
    padding: 15px 35px;
  }
  
  .control-area ul li a i:hover{
    box-shadow: 0 0 10px 2px #00e5ff;
  }
}