/*-------- CSS CODE FOR RESPONSIVE LAYOUT --------*/

/*  To make Responsive
---------------------------------------------------------------------- /
*
*   2 - media screen and (max-width: 1199px)
*   3 - media screen and (max-width: 991px)
*   4 - media screen and (max-width: 767px)
*   5 - media screen and (max-width: 680px)
*   6 - media screen and (max-width: 480px)
*
---------------------------------------------------------------------- */


/*  2 - media screen and (max-width: 1199px)
---------------------------------------------------------------------- */

@media screen and (max-width: 1199px) { /* for large device */
	.dg-container {
		height: 345px;
		overflow: hidden;
	}
	.dg-wrapper {
		width: 384px;
	}
	.dg-wrapper a {
		width: 380px;
	}
	.history-section .item-img,
	.history-section .post-text {
		width: 100%;
	}
	.history-section .history-item {
		background-color: #f4f4f4;
		overflow: hidden;
		max-width: 350px;
  		margin: 0 auto 30px auto;
	}
	.main-menu .navbar-default .navbar-nav>li>a {
	    font-size: 16px;
	    padding: 25px 11px;
	}
	.sl-slider h2 {
	    font-size: 50px;
	}
}

/*  2 - media screen and (max-width: 1199px) End
---------------------------------------------------------------------- */


/*  3 - media screen and (max-width: 991px)
---------------------------------------------------------------------- */

@media screen and (max-width: 991px) { /* for medium device */
	#main-nav2 li{
		font-size: 20px;
	}

	/*  - Main Menu
	-----------------------------------------*/
	.main-menu .navbar-default .navbar-nav>li>a {
	    font-size: 14px;
	    padding: 5px 0px;
	}
	.main-menu .container {
		width: 100%;
	}
	.main-menu {
		padding: 5px 0 0 0;
	}
	.main-menu-container {
		min-height: 75px;
	}
	.main-menu .navbar>.container .navbar-brand, 
	.main-menu .navbar>.container-fluid .navbar-brand {
		width: 180px;
		padding: 21px 0px;
	}
	.main-menu .container>.navbar-header, 
	.main-menu .container-fluid>.navbar-header, 
	.main-menu .container>.navbar-collapse, 
	.main-menu .container-fluid>.navbar-collapse {
		width: 100%;
		padding: 0 0 12px 0;
	}
	.main-menu #main-nav > li {
		color: #737d8b;
		background-color: #DEDFE5;
		border-top: 1px solid #ACAEB2;
	}
	#main-nav li:first-child {
		border: none;
	}
	.main-menu .navbar-default .navbar-nav>li>a {
		padding-left: 10px;
	}
	.main-menu .navbar-nav {
		width: 100%;
		margin: 0;
	}
	.main-menu .navbar-default .navbar-nav>.active>a, 
	.main-menu .navbar-default .navbar-nav>.active>a:hover, 
	.main-menu .navbar-default .navbar-nav>.active>a:focus {
		color: #ffffff;
		background-color: #D1D2D3;
	}
	.main-menu .navbar-nav .sub-arrow:after, 
	.main-menu .navbar-nav .collapsible .sub-arrow:after {
		top: 16px;
		right: 15px;
	} 
	.main-menu .navbar-default .navbar-nav>.active>a:hover, 
	.main-menu .navbar-default .navbar-nav>.active>a:focus {
		color: #ffffff !important;
	}
	.main-menu .navbar-default .navbar-nav>.open>a, 
	.main-menu .navbar-default .navbar-nav>.open>a:hover, 
	.main-menu .navbar-default .navbar-nav>.open>a:focus {
		color: #ffffff !important;
		background-color: #36d7b7 !important;
	} 
	.main-menu .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover, 
	.main-menu .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,
	.main-menu .navbar-default .navbar-nav>.active>a:hover,
	.main-menu .navbar-default .navbar-nav>li>a:hover {
		color: #ffffff !important;
		background-color: #36d7b7 !important;
	}
	.main-menu ul.dropdown-menu.sm-nowrap {
		margin-left: 15px !important;
	}
	.main-menu .dropdown > .dropdown-menu {
		border-top: 0;
	}
	.navbar-fixed-top .navbar-collapse, 
	.navbar-fixed-bottom .navbar-collapse {
		max-height: 340px !important;
	}
	.navbar-collapse.in {
		overflow-y: auto !important;
	}
	.main-menu .sm-blue:not(.sm-blue-vertical) > li > a {
		color: #737d8b;
		padding-left: 20px;
		background-color: #292d39;
	}
	.main-menu .nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
		background-color: #292d39 !important;
	}
	.main-menu .navbar-nav .open .dropdown-menu>li>a {
		background-color: #292d39;
		padding: 10px 15px 10px 25px;
		line-height: 25px !important;
		border-color: #353b4a;
	}
	.main-menu .dropdown > .dropdown-menu {
		border-top: none;
	}
	.main-menu .dropdown > .dropdown-menu:before {
		display: none;
	}
	.main-menu .navbar-nav .sub-arrow:after, 
	.main-menu .navbar-nav .collapsible .sub-arrow:after {
		content: "\f101";
	}
	.main-menu .navbar-nav .dropdown-toggle.has-submenu.highlighted .sub-arrow:after {
		content: "\f103";
	}

	.main-menu .navbar-nav .level-2.has-submenu.highlighted .sub-arrow:after  {
		content: "\f103";
	} 
	.main-menu .navbar-nav .level-3.has-submenu .sub-arrow:after  {
		content: "\f101";
	}
	.main-menu .navbar-nav .level-3.has-submenu.highlighted .sub-arrow:after  {
		content: "\f103";
	}
	nav.navbar-collapse ul.navbar-nav {
	    padding-right: 0;
	}
	#search-wrap input {
	    font-size: 26px;
	    padding: 4% 4% 4% 15%;
	}
	.search-wrap {
	    margin-top: -83px;
	}
	.search-wrap.active {
	    margin-top: -15px;
	}
	span.s-desk {
	    top: 22px;
	}
	/*  - Main Menu End
	-----------------------------------------*/
	.history-section .item-img {
	    float: left;
	}
	.nav-dots {
	    bottom: 5%;
	}
	.accordion-widget {
	    padding-left: 0;
	}

	/*  - Service
	-----------------------------------------*/
	.b-bottom,
	.b-right {
		border: none;
	}
	.service-section .inner-item-md3 {
		margin: 0 auto 30px auto;
	}
	.service-section.section-padding {
		padding-bottom: 70px;
	}

	.form-container .form-control {
		margin-bottom: 15px;
	}
	.google-map-container {
		height: 600px;
	}
	.contact-section .contact-form-area {
		width: 100%;
	}
	.testimonial-section .section-padding {
	    padding-top: 80px;
	    padding-bottom: 80px;
	}
	/*  - Blog Page
	--------------------------------------*/
	.sidebar {
		padding-top: 0;
  		padding-left: 0;
  		padding-bottom: 80px;
	}

}

/*  3 - media screen and (max-width: 991px) End
---------------------------------------------------------------------- */


/*  4 - media screen and (max-width: 767px)
---------------------------------------------------------------------- */

@media screen and (max-width: 768px){ /*For Mobile Device*/

	#main-nav2 li{
		font-size: 16px;
	}

	.main-menu {
	    padding: 0px 0 0 0;
	}
	.single .main-menu,
	.blog .main-menu {
	    padding: 4px 0 0 0;
	}
	a.navbar-brand {
		font-size: 32px;
	}
	.main-menu .navbar>.container .navbar-brand, 
	.main-menu .navbar>.container-fluid .navbar-brand {
		width: 150px;
	}
	.container>.navbar-header, 
	.container-fluid>.navbar-header, 
	.container>.navbar-collapse, 
	.container-fluid>.navbar-collapse {
		width: 100%;
		margin-left: 0;
	}
	.navbar-form .form-group {
	  	margin-top: 2px;
	}
	.navbar-toggle {
	    padding: 7px 7px;
	}
	.sl-slider h2 {
	    font-size: 42px;
	    padding: 130px 30px 35px 30px;
	}
	.sl-slider blockquote {
		font-size: 22px;
	}
	/*  - Circle
	----------------------------------*/
	.circle-area:after {
		top: 0;
  		left: 50%;
  		right: inherit;
  		bottom: 40px;
  		margin-left: -7px;
	}
	.circle-area:before {
		display: none;
	}
	.media-btn .social-media-btn {
		width: 100%;
		text-align: left;
	}
	.newslater-section button {
		padding: 0 30px;
	}

}

/*  4 - media screen and (max-width: 767px) End
---------------------------------------------------------------------- */


/*  5 - media screen and (max-width: 680px)
---------------------------------------------------------------------- */

@media screen and (max-width: 640px){ /*For Mobile Device*/

#main-nav2{
	padding-left: 0px;
	margin: auto;
	width: 100%;
}
	.container>.navbar-header, 
	.container-fluid>.navbar-header, 
	.container>.navbar-collapse, 
	.container-fluid>.navbar-collapse {
		width: 100%;
		margin-left: 0;
	}
	.footer-container .social-media-btn {
		width: 100%;
		text-align: center;
	}
	.footer-container .copyright p {
		text-align: center;
	}
	.video-section .section-title {
		font-size: 32px;
		padding-top: 120px;
	}
	.post-info .details {
		width: 100%;
  		margin-top: 20px;
	}
	.comments-txt .reply a { 
		position: relative;
	}
	.section-title {
    	font-size: 1.5em;
	}
	.sidebar {
	    padding-bottom: 10px;
	}
	.head-wrap h1 {
	    margin-top: 95px;
	    font-size: 2.4285em;
	}
	.post-container {
	    padding-top: 60px;
	}
	.widget {
	    margin-bottom: 30px;
	}
	.section-padding {
	    padding-top: 40px;
	    padding-bottom: 50px;
	}
	.portfolio-section.section-padding {
	    padding-bottom: 70px;
	}

}

/*  5 - media screen and (max-width: 680px) End
---------------------------------------------------------------------- */


/*  6 - media screen and (max-width: 480px)
---------------------------------------------------------------------- */

@media screen and (max-width: 480px){ /*For Mobile Device*/
	.main-menu .navbar>.container-fluid .navbar-brand {
	    padding: 21px 0;
	}

	.main-menu{
		margin-bottom: -30px;
	}

	.logo-area{
		margin: auto;
    	width: 100%;
	}

	.logo-area img{
		display: block;
		margin: auto;
    	width: 50%;
	}

	a.navbar-brand {
	    font-size: 28px;
	}
	.navbar-toggle {
	  	margin-bottom: 0;
	  	margin-top: 20px;
	  	margin-right: 15px;
	}
	.slider-txt-container {
		padding-top: 190px;
	}
	.slider-txt-container .title {
		font-size: 3.2857em;
	}
	.sl-slider h2 {
	    font-size: 170%;
	}
	.sl-slider blockquote {
	    font-size: 18px;
	}
	.sl-slider h2 {
	    padding: 125px 30px 35px 30px;
	}
	.service-section .inner-item-md3 {
	    margin: 0 auto 0px auto;
	}
	#gallery-slider {
		display: none;
	} 
	#video {
		display: none;
	}
	.team-section.section-padding {
		padding: 0;
	}
	.comments-post .entry-content p {
		font-size: 1.4285em;
		line-height: 30px;
	}
	blockquote {
		margin: 30px 5px 12px 0px;
	}
	.children, .parent {
	    padding-bottom: 20px;
	    padding-left: 0;
	}
	.post-comments-area .comments-img,
	.post-auther .auther-img {
		float: none;
		margin-bottom: 20px;
	}
	h2.rounded {
		font-size: 22px;
	}
	.single-post .post-details {
	    padding: 25px;
	}
	.copyright {
	    padding: 25px 0;
	}
	.head-wrap h1 {
	    margin-top: 80px;
	}
}

/*  6 - media screen and (max-width: 480px) End
---------------------------------------------------------------------- */



@media screen and (max-width: 320px){


	.sl-slider h2 {
	    font-size: 18px;
	}
	.sl-slider blockquote {
	    font-size: 14px;
	}
	.sl-slider blockquote cite {
		padding-top: 20px;
	}
	.sl-slider h2 {
	    padding: 135px 30px 10px 30px;
	}
}