/* ==========================================================================
   Joyride.co.in - Responsive layer
   Makes the fixed-width (960px) desktop layout adapt to laptop, desktop,
   tablet/iPad and mobile screens. Loaded last / uses !important so it wins
   over the older fixed-width page CSS (style.css, layout.css, about.css,
   services.css, theme.css, achieve.css, chase.css) without editing those.
   ========================================================================== */

*, *:before, *:after {
	box-sizing: border-box;
}

img, iframe, video, embed, object, svg {
	max-width: 100%;
	height: auto;
}

table {
	max-width: 100%;
}

/* Large desktop / laptop: let the fixed 960px canvas breathe instead of
   forcing horizontal scroll on narrower laptop windows */
@media (max-width: 1200px) {
	body {
		min-width: 0 !important;
	}
	.main, .container {
		width: 94% !important;
		max-width: 960px;
	}
}

/* Tablets / iPad landscape */
@media (max-width: 1024px) {
	body {
		min-width: 0 !important;
		overflow-x: hidden;
	}
	.main, .container {
		width: 95% !important;
		max-width: 100%;
	}
	.slider-wrapper, .slider {
		width: 100% !important;
		height: auto !important;
	}
	#page2 .bx-wrapper, #page3 .bx-wrapper, .bx-wrapper {
		width: 100% !important;
		height: auto !important;
	}
	.bx-window {
		height: auto !important;
	}
	#slider, #slider-2 {
		width: 100% !important;
		height: auto !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
	}
	#slider > div, #slider-2 > div {
		width: 220px !important;
		height: auto !important;
	}
	.pagination {
		position: static !important;
		text-align: center;
		padding-top: 10px;
	}
	.pagination li {
		float: none !important;
		display: inline-block;
	}
}

/* Tablet / iPad portrait */
@media (max-width: 800px) {
	h1 {
		float: none !important;
		text-align: center;
		padding: 10px 0 !important;
	}
	h1 a {
		font-size: 34px !important;
		margin-top: 0 !important;
	}
	.menu {
		float: none !important;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 10px 0 !important;
	}
	.menu li {
		float: none !important;
		padding: 4px 12px !important;
	}
	nav .menu {
		width: 100%;
	}
	h2 {
		font-size: 26px !important;
		line-height: 1.3em !important;
		padding: 0 10px;
	}
	h2 span {
		font-size: 22px !important;
	}
	.col-1, .col-2, .column-1, .column-2,
	#page1 .col-1, #page1 .col-2, #page1 .column-1, #page1 .column-2,
	#page2 .col-1, #page2 .col-2, #page2 .column-1, #page2 .column-2,
	#page4 .col-1, #page4 .col-2,
	#page6 .col-1, #page6 .col-2 {
		width: 100% !important;
		float: none !important;
		margin: 0 0 20px 0 !important;
	}
	.list-2 {
		width: 100% !important;
	}
	table[width], table {
		width: 100% !important;
	}
	table td, table tr {
		display: block !important;
		width: 100% !important;
	}
	#contact-form input, #contact-form textarea {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-bottom: 10px !important;
	}
	.text-form {
		float: none !important;
		width: 100% !important;
	}
	.buttons {
		text-align: center !important;
	}
	.img-indent, .img-indent2, .img-indent-r {
		float: none !important;
		margin: 0 auto 15px !important;
		display: block;
	}
	footer .main {
		text-align: center;
	}
	.list-services li {
		float: none !important;
		text-align: center;
	}
}

/* Mobile phones */
@media (max-width: 480px) {
	.main, .container {
		width: 100% !important;
		padding: 0 12px !important;
	}
	h1 a {
		font-size: 24px !important;
	}
	h1 a img {
		height: 48px;
		width: auto;
	}
	h2 {
		font-size: 20px !important;
	}
	h2 span {
		font-size: 16px !important;
	}
	h3 {
		font-size: 19px !important;
	}
	.menu li a {
		font-size: 12px !important;
	}
	.menu li {
		padding: 4px 8px !important;
	}
	#slider > div, #slider-2 > div {
		width: 160px !important;
	}
	.prev-indent-bot {
		font-size: 22px !important;
	}
}