/*
====================================================

* 	[Master Stylesheet]
	
	Theme Name :  
	Version    :  
	Author     :  
	Author URI :  

====================================================

	TOC
	
	1. PRIMARY STYLES
	2. COMMONS FOR PAGE DESIGN
	3. HEADER
	4. INTRO SECTION
	5. PORFOLIO SECTION
	6. ABOUT SECTION
	7. EXPERIENCE SECTION
	8. EDUCATION SECTION
	9. COUNTER SECTION
	10. FOOTER

====================================================


/* ---------------------------------
4. SINGLE BLOG PAGE
--------------------------------- */

.main-section {
  height: 100%;
  position: relative;
  border: 1px solid #eee;
}

.main-section .left-area {
  height: 100%;
  width: 40%;
  float: left;
  padding: 50px 40px;
}
.main-section .right-area {
  height: 100%;
  width: 60%;
  float: left;
  padding: 50px 40px;
}

.main-section .left-area {
  padding-right: 25px;
}

.main-section .left-area img {
  box-shadow: 2px 5px 20px rgba(0, 0, 0, 0.1);
}

.main-section .right-area {
  padding-left: 25px;
  padding-bottom: 75px;
  overflow-x: hidden;
  overflow-y: auto;
}

.blog-info {
  margin-top: 20px;
}

.blog-info .info {
  display: inline-block;
  margin: 0px 10px 10px 0;
}

.blog-info .info span {
  color: #aaa;
}

.main-section .social-icons {
  position: absolute;
  bottom: 0;
  left: 40%;
  padding: 20px 0 20px 25px;
  right: 10px;
  background: #000;
}

.main-section .social-icons > li {
  margin-right: 10px;
}

.main-section .social-icons > li > a > i {
  height: 35px;
  width: 35px;
  line-height: 33px;
  display: inline-block;
  text-align: center;
  border-radius: 40px;
  border: 1px solid #aaa;
  color: #fff;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.main-section .social-icons > li > a > i.facebook {
  background: #4a6cce;
  border-color: #4a6cce;
}
.main-section .social-icons > li > a > i.google {
  background: #f03c3d;
  border-color: #f03c3d;
}
.main-section .social-icons > li > a > i.instagram {
  background: #bc8950;
  border-color: #bc8950;
}
.main-section .social-icons > li > a > i.twitter {
  background: #4aa7f4;
  border-color: #4aa7f4;
}

.main-section .social-icons > li > a > i:hover {
  background: none;
  color: #333;
}

.main-section:before {
  content: "";
  position: absolute;
  left: 25px;
  right: 25px;
  height: 50px;
  top: 0;
  background: #000;
}

/* SCROLLBAR */

.right-area::-webkit-scrollbar {
  width: 10px;
}

.right-area::-webkit-scrollbar-track {
  background: #ebebeb;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
}

.right-area::-webkit-scrollbar-thumb {
  background-color: #32d98b;
  outline: 1px solid #32d98b;
}




/* Screens Resolution : 767px
-------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
	

	/* ---------------------------------
	4. MAIN
	--------------------------------- */	
	.main-section .right-area{ padding-bottom: 0px; }	
	.main-section .social-icons{ position: static; padding: 10px 15px 30px; }
	
	
}

/* Screens Resolution : 575px
-------------------------------------------------------------------------- */
@media only screen and (max-width: 575px) {
	
	
	
	/* ---------------------------------
	4. MAIN
	--------------------------------- */

	.main-section .right-area{ padding-bottom: 0px; }

	
}