/* Large Screens */

@media only screen and (max-width : 1800px) {
	#intro:after,
	#environments:before,
	#environments:after,
	.yellowLine,
	#logos:before,
	#logos:after,
	#map::before {
		background-size: 1800px 100%;
	}
}

@media only screen and (max-width : 1760px) {
	.section.sectionWide {
		max-width: 1600px;
	}

	#difference .listing li {
		width: 270px;
	}
}

@media only screen and (max-width : 1640px) {
	.section.sectionWide {
		max-width: 1500px;
	}
}

@media only screen and (max-width : 1600px) {
	.section {
		max-width: 1500px;
	}

	#welcome .image {
		width: 600px;
	}
}

@media only screen and (max-width : 1530px) {
	.section,
	.section.sectionWide {
		max-width: 1400px;
	}

	#welcome {
		margin-bottom: 60px;
	}

	#welcome .image {
		width: 480px;
	}

	#welcome .text {
		width: 775px;
	}

	.splashImage {
		width: 600px;
	}

	#feel {
		margin-bottom: 40px;
	}

	#environments .listing li .image {
		height: 350px;
	}

	#difference .listing li {
		width: 254px;
		font-size: 30px;
	}

	#difference .listing li img {
		-webkit-transform: scale(0.7);
		    -ms-transform: scale(0.7);
		        transform: scale(0.7);
		margin-bottom: -7px;
		margin-top: -12px;
	}

	#feedback .text {
		width: 777px;
	}

	#feedback .splashImage {
		width: 600px;
		margin-top: 60px;
	}

	#logos .listing {
		margin-left: -30px;
		margin-right: -30px;
	}

	#logos .listing li {
		padding-left: 30px;
		padding-right: 30px;
	}
}

@media only screen and (max-width : 1468px) {
	.section,
	.section.sectionWide {
		max-width: 1300px;
	}

	#header #navigation ul li {
		margin-left: 20px;
	}

	#intro .image {
		right: -146px;
	}

	#intro .redSplash {
		right: -243px;
	}

	#intro .orangeSplash {
		right: 70px;
	}

	#intro .text .bottom {
		padding-right: 243px;
	}

	.splashImage {
		width: 530px;
	}

	#feel .text {
		width: 730px;
	}

	#welcome {
		margin-bottom: 55px;
	}

	#environments .splash {
		right: -111px;
	}

	#environments .listing li .image {
		height: 323px;
	}

	#difference .listing li {
		width: 240px;
	}

	#feedback .text {
		width: 750px;
	} 

	#feedback .splashImage {
		width: 530px;
	}

	#footer .top .logo {
		width: 560px;
		margin-left: -280px;
		top: -26px;
	}
}

@media only screen and (max-width : 1330px) {
	.section,
	.section.sectionWide {
		max-width: 1170px;
	}

	#mainWrapper {
		font-size: 20px;
		padding-top: 169px;
	}

	.heading {
		font-size: 50px;
	}

	.subheading {
		font-size: 32px;
	}

	#header #navigation ul li {
		font-size: 18px;
		margin-left: 18px;
	}

	#header .contacts .reach {
		font-size: 17px;
	}

	#intro .text {
		font-size: 20px;
	}

	.socials li a {
		width: 34px;
		height: 34px;
	}

	#header .linkBtn {
		font-size: 17px;
	}
	
	#header .section {
		height: 170px;
	}

	#header .logo {
		width: 280px;
	}

	#intro .section {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		min-height: 648px;
	}

	#intro .text {
		width: 545px;
	}

	#intro .image {
		height: 647px;
		right: -76px;
	}

	#intro .greenSplash {
		width: 750px;
		top: -470px;
	}

	#intro .redSplash {
		right: -157px;
		top: 50px;
 		 width: 650px;
	}

	#intro .orangeSplash {
		top: 183px;
  		width: 804px;
	}

	#intro .greenLine {
		left: -18px;
		bottom: 187px;
		width: 188px;
	}
	
		
	#banner {
		margin-bottom: 30px;
	}
	
	#banner .redSplash {
	  right: -51px;
	  bottom: -104px;
	}

	#content .section {
		padding-top: 55px;
	}

	#welcome .text {
		width: 660px;
	}

	#welcome .image {
		width: 468px;
	}

	#feel .text {
		width: 640px;
	}

	.splashImage {
		width: 490px;
	}

	#environments .section {
		padding-bottom: 130px;
	}

	#environments:after {
		height: 80px;
	}
	
	#environments .splash {
		right: -96px;
	}

	#environments .listing li .title {
		font-size: 40px;
	}

	#environments .listing li .image {
		height: 285px;
	} 

	#environments .listing li .image .inner {
		padding: 5px;
	}

	#difference .section {
		padding-bottom: 60px;
	}

	#difference .listing li {
		width: 218px;
		font-size: 25px;
		margin-top: 22px;
	}

	#difference .listing li img {
		margin-top: -15px;
	}

	#feedback {
		margin-bottom: 100px;
	}

	#feedback .section {
		padding-top: 90px;
	}

	#feedback .splashImage {
		width: 490px;
	}

	#feedback .text {
		width: 660px;
	}	

	#feedback .slides li blockquote {
		font-size: 20px;
	}
	
	#feedback .slides .owl-nav {
		top: 70px;
	}
	
	#logos .listing {
		font-size: 18px;
		margin-left: -20px;
		margin-right: -20px;
	}
	
	#logos .listing li {
		padding-left: 20px;
		padding-right: 20px;
	}

	#enquire .left {
		width: 630px;
	}

	#enquire .right {
		width: 500px;
	}
	
	#map .redSplash {
		margin-left: -404px;
		top: -211px;
		width: 398px;	
	} 

	#footer .title {
		font-size: 30px;
	}

	#footer .contactUs ul li {
		font-size: 20px;
	}

	#footer .connectUs .socials {
		width: 92px;
	}

	#footer .connectUs .socials li {
		margin-bottom: 11px;
	}

	#footer .connectUs .socials li a {
		width: 40px;
		height: 40px;
	}

	#footer .top .logo {
		width: 450px;
		margin-left: -225px;
	}
	
}

/* Medium Screens (Tablets - Landscape) */

@media only screen and (max-width : 1225px) {
	.section,
	.section.sectionWide {
		max-width: 970px;
	}

	#header .logo {
		width: 230px;
	}

	body.scrolled #header .btns {
		bottom: 76px;
	}

	body.scrolled #header .logo {
		width: 173px;
	}

	#header #navigation {
		bottom: 11px;
	}

	#header #navigation ul li ul {
		padding-top: 11px;
	}

	#intro:after {
		height: 80px;
	}
	
	#intro .image {
		right: -185px;
	}

	#intro .orangeSplash {
		width: 660px;
	}

	#intro .redSplash {
		right: -224px;
    	top: -6px;
		width: 695px;
	}

	#banner {
		margin-bottom: 40px;
	}
	
	#banner:before {
		height: 40px;
		bottom: -20px;
	}

	#welcome .text {
		width: 610px;
	}

	#welcome .image {
		width: 330px;
	}

	#content .section {
		padding-top: 40px;
	}

	.splashImage {
		width: 400px;
	}

	#feel .text {
		width: 545px;
		margin-top: 0;
	}

	#environments .splash {
		top: -236px;
	}

	#environments .listing {
		margin-left: -12px;
		margin-right: -12px;
	}

	#environments .listing li {
		padding-left: 12px;
		padding-right: 12px;
	}

	#environments .listing li .image {
		height: 230px;
	}

	#difference .listing li {
		width: 180px;
		font-size: 23px;
	}

	#difference .listing li .inner {
		padding-top: 26px;
		padding-bottom: 26px;
	}

	#gallery .slider:before {
		top: 18px;
	}
	
	#gallery .slider .redSplash {
		bottom: -111px;
 		width: 357px;
	}

	#feedback .splashImage {
		width: 400px;
	}

	#feedback .text {
		width: 540px;
		margin-top: 60px;
	}

	#feedback .slides {
		padding-left: 35px;
		padding-right: 35px;
	}

	#feedback .slides .owl-nav {
		left: 5px;
		right: 5px;
	}

	#feedback .splashImage {
		margin-top: 77px;
	}

	.yellowLine {
		height: 80px;
	}
		
	#logos .listing {
		font-size: 15px;
		margin-left: -15px;
		margin-right: -15px;
	}
	
	#logos .listing li {
		padding-left: 15px;
		padding-right: 15px;
	}

	#enquire .right {
		width: 400px;
	}

	#enquire .left {
		width: 540px;
	}

	#enquire .fields {
		margin-left: -15px;
		margin-right: -15px;
		margin-top: 40px;
	}

	#enquire .fields .field {
		padding-left: 15px;
		padding-right: 15px;
	}

	#footer .top {
		padding-top: 90px;
	}

	#footer .top .logo {
		width: 350px;
		margin-left: -148px;
		top: 25px;
	}

	#logos .greenSplash {
		width: 290px;
		right: -111px;
		bottom: -100px;
	}

}

/* Small Screens  (Tablets - Portrait ) */

@media only screen and (max-width : 991px) {
	.section,
	.section.sectionWide {
		max-width: 750px;
		padding-left: 15px;
		padding-right: 15px;
	}

	#mainWrapper,
	body.scrolled #mainWrapper {
		padding-top: 143px;
	}

	#header .logo {
		left: 15px;
	}

	#header .section,
	body.scrolled #header .section {
		height: 144px;
	}

	#header #navigation ul li {
		font-size: 15px;
		margin-left: 14px;
	}

	body.scrolled #header .contacts {
		top: 7px;
		opacity: 1;
	}

	#header .contacts .reach {
		font-size: 15px;
	}

	#header .btns,
	body.scrolled #header .btns {
		bottom: 54px;
	}

	#header .btns .linkBtn {
		font-size: 15px;
		margin-left: 13px;
	}

	.socials li a {
		width: 30px;
		height: 30px;
	} 

	#header .contacts {
		right: 15px;
	}

	#header .contacts .reach li {
		margin-left: 15px;
	}

	#header .btns {
		right: 15px;
	}

	#header #navigation {
		right: 15px;
	}

	#header .logo,
	body.scrolled #header .logo {
		width: 197px;
	}

	#intro .section {
		min-height: 592px;
	}

	#intro:after {
		height: 67px;
	}
	
	#intro .text {
		padding-top: 40px;
		padding-bottom: 70px;
		width: 398px;
	}

	#intro .image {
		height: 560px;
		bottom: -10px;
		right: -226px;
	}

	#intro .greenSplash {
		width: 640px;
		top: -396px;
	}

	#intro .orangeSplash {
		width: 515px;
	}	

	#intro .redSplash {
		right: -224px;
		top: -41px;
		width: 602px;
	}

	#welcome  {
		position: relative;
	}

	#welcome .image {
		width: 269px;
	}

	#welcome .text {
		position: static;
		width: 426px;
		padding-bottom: 0;
	}

	#welcome .text .crocodile {
		right: auto;
		left: -21px;
		bottom: 18px;
		width: 288px;
	}

	#feel .text {
		width: 426px;
	}

	.splashImage {
		width: 269px;
	}

	#feel {
		margin-bottom: 90px;
	}

	#content .section {
		padding-bottom: 70px;
	}

	#environments .listing {
		margin-left: -7px;
		margin-right: -7px;
		margin-top: 43px;
	}

	#environments .listing li {
		padding-left: 7px;
		padding-right: 7px;
	}

	#environments .listing li .title {
		font-size: 30px;
		margin-bottom: 10px;
	}

	#environments .listing li .age {
		font-size: 19px;
	}

	#environments .listing li .image {
		height: 181px;
	}

	.heading {
		font-size: 40px;
	}
	
	#difference .listing {
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
	}

	#difference .listing {
		margin-left: -10px;
		margin-right: -10px;
	}

	#difference .listing li {
		width: 180px;
		padding-left: 10px;
		padding-right: 10px;
	}

	#gallery .slider {
		margin-top: -10px;
	}

	#gallery .slider .redSplash {
		bottom: -84px;
		width: 297px;
	}

	#feedback {
		margin-bottom: 52px;
	}

	#feedback .splashImage {
		width: 269px;
	}

	#feedback .text {
		width: 425px;
		margin-top: 20px;
	}

	.yellowLine {
		height: 60px;
	}
			
	#logos .listing {
		font-size: 11px;
		margin-left: -10px;
		margin-right: -10px;
	}
	
	#logos .listing li {
		padding-left: 10px;
		padding-right: 10px;
	}

	#logos .greenSplash {
		width: 321px;
		right: -111px;
		bottom: -113px;
	}

	#enquire .fields .field.half {
		width: 100%;
	}

	#enquire .section {
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
	}

	#enquire .left {
		width: 380px;
	}

	#enquire .right {
		width: 300px;
	}

	#map {
		height: 400px;
	}

	#map .redSplash {
		margin-left: -280px;
		top: -170px;
		width: 320px;
	}
	
	#map:before {
		height: 48px;
	}

	#logos .section {
		padding-top: 15px;
		padding-bottom: 15px;
	}

	#footer .top {
		padding-top: 63px;
	}

	#footer .top .section {
		padding-top: 200px;
	}

	#footer .top .logo {
		top: 0;
		width: 380px;
		margin-left: -190px;
	}
}

/* Extra Small Screens */
@media only screen and (max-width : 767px) {
	#menuBtn {
		display: block;
	}

	#mainWrapper, body.scrolled #mainWrapper {
		padding-top: 0;
		transition: -webkit-transform .4s ease;
		-webkit-transition: -webkit-transform .4s ease;
		-o-transition: transform .4s ease;
		transition: transform .4s ease;
		transition: transform .4s ease, -webkit-transform .4s ease;
		transition: transform .4s ease,-webkit-transform .4s ease;
	}

	#header {
		position: static;
		border-top: 6px solid #f15a6f;
		border-bottom: 4px solid #f15a6f;
	}

	#header .section,
	body.scrolled #header .section {
		height: auto;
		padding-top: 15px;
		padding-bottom: 15px;
	}

	#header #navigation {
		display: none;
	}

	#header .btns {
		display: none;
	}

	#header .logo,
	body.scrolled #header .logo {
		position: static;
		display: block;
		margin: 0 auto 14px;
		width: 234px;
	}

	#header .btns {
		position: static;
	}

	#header .contacts {
		position: static;
		-webkit-animation: none;
		        animation: none;
		-webkit-transform: none;
		    -ms-transform: none;
		        transform: none;
		opacity: 1;
		display: block;
	}
	
	#header .socials {
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
	}

	#header .socials li {
		margin: 0 5px 5px;
	}

	.socials li a {
		width: 35px;
		height: 35px;
	}

	#header .contacts .reach {
		display: block;
		margin: 0 0 10px;
		width: 100%;
		font-size: 18px;
	}

	#header .contacts .reach li {
		display: table;
		margin: 0 auto 8px;
	}

	#header .contacts .reach li:last-child {
		margin-bottom: 0;
	}
	
	#banner {
		margin-bottom: 8px;
	}
	
	#banner:before {
		height: 20px;
		bottom: -10px;
	}
	
	#banner .redSplash {
		width: 199px;
		right: -94px;
		bottom: -66px;
	}
	
	#intro:after {
		background-size: 1150px 100%;
	}

	#intro .text {
		display: block;
		width: auto;
		text-align: center;
		padding-bottom: 370px;
	}

	#intro .text .bottom {
		padding-right: 0;
		text-align: center;
	}

	#intro .image {
		height: 370px;
		right: auto;
		left: 50%;
		max-width: 9999em;
		margin-left: -209px;
		bottom: -30px;
	}

	.subheading {
		font-size: 30px;
		margin-bottom: 20px;
	}

	#intro .orangeSplash {
		top: auto;
		bottom: 7px;
	}

	#intro .redSplash {
		top: auto;
		bottom: 7px;
	}

	#intro .image {
		height: 370px;
	}

	#intro .orangeSplash {
		width: 420px;
		max-width: 9999em;
		left: 50%;
		bottom: -60px;
		margin-left: -267px;
	}

	#intro .greenSplash {
		max-width: 9999em;
	}

	#intro .redSplash {
		width: 420px;
		max-width: 9999em;
		right: 50%;
		bottom: -60px;
		margin-right: -300px;		
	}

	#intro .greenLine {
		left: -18px;
		bottom: 429px;
		width: 123px;
	}
	
	#welcome .image {
		width: 280px;
		margin-top: 20px;
	}

	#welcome {
		display: block;
	}

	#welcome .text {
		margin-left: 0;
		width: auto;
		text-align: center;
	}

	#welcome .image {
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50px;
	}

	#welcome .text .crocodile {
		display: block;
		position: static;
		margin: 20px auto 0;
	}

	#welcome .text .linkBtn {
		margin-top: 0;
	}
	
	em.highlight {
		white-space: wrap;
	}
	
	#feel {
		display: block;
	}

	#feel .text {
		width: auto;
		text-align: center;
	}

	.splashImage {
		width: 280px;
		margin: 0 auto 30px;
	}

	#environments .splash {
		width: 250px;
		top: -168px;
		right: auto;
		left: 50%;
		margin-left: -125px;
	}  

	#environments .listing {
		display: block;
		margin-top: 60px;
	}
	
	#environments .listing li {
		width: auto;
		margin-bottom: 40px;
	}

	#environments .listing li:last-child {
		margin-bottom: 0;
	}

	#environments .listing li .image {
		height: auto;
		width: 280px;
		margin: 0 auto 20px;
	}

	#environments .listing li .title {
		font-size: 35px;
	}

	#difference .section {
		padding-bottom: 40px;
	}

	#difference .listing li {
		width: 154px;
		font-size: 20px;
	}
	
	#difference .listing li img {
		transform: scale(0.5);
		margin-top: -26px;
		margin-bottom: -18px;
	}
	

	#gallery .slider:before {
		top: 10px;
	}

	#gallery .slider .redSplash {
		width: 258px;
		bottom: -80px;
	}

	#feedback .section {
		display: block;
	}

	#feedback .text {
		width: auto;
	}

	#feedback .slides {
		padding-left: 0;
		padding-right: 0;
	}

	#feedback .slides .owl-nav {
		position: static;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		margin-top: 30px;
	}

	#feedback .slides .owl-nav .owl-prev,
	#feedback .slides .owl-nav .owl-next {
		margin: 0 10px;
	}

	#feedback .splashImage {
		width: 280px;
		margin-top: 34px;
	}	

	#logos .listing {
		max-width: 350px;
		margin: 0 auto;
	}

	#logos .listing li {
		width: 50%;
		margin: 10px 0;
	}

	#logos .listing li .inner {
		margin: 0 auto;
	}

	#enquire .section {
		display: block;
		padding-top: 43px;
		padding-bottom: 130px;
	}

	#enquire .left {
		width: auto;
		max-width: 485px;
		margin: 0 auto;
		padding-bottom: 30px;
	}

	#enquire .right {
		width: auto;
	}

	#enquire .submitBtn {
		display: table;
		margin: 0 auto;
	}

	#enquire .heading {
		text-align: center;
	}

	#enquire .fields .field label.error {
		text-align: center;
	}

	#map {
		height: 300px;
	}

	#footer .top .section {
		padding-top: 28px;
		text-align: center;
	}

	#footer .top .logo {
		position: static;
		margin: 0 auto 30px;
		display: block;
		width: 290px;
	}
	
	#map .redSplash {
		width: 243px;
		top: -122px;
		margin-left: -141px;
	}

	#footer .top .section {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}

	#footer .contactUs {
		margin-bottom: 20px;
	}

	#footer .connectUs {
		width: 100%;
	}

}

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

}

@media only screen and (max-width : 400px) { 
	#logos .listing {
		font-size: 9px;
	}
}